1
0
Fork 0

Tab Selector for different Data Visualisations

This commit is contained in:
Neshura 2023-06-10 23:43:09 +02:00
parent f23c9dc0f1
commit 6130b331e6
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
6 changed files with 99 additions and 6 deletions

View file

@ -83,3 +83,10 @@ main {
height: calc(100vh - 30px); height: calc(100vh - 30px);
max-height: 100%; max-height: 100%;
} }
/* DEBUG */
.row {
display: flex;
flex-direction: row;
}

View file

@ -0,0 +1,17 @@
import { fetchGameGroups } from "@/components/server/fetchers";
import { Game, GameGroup } from "@/types/stellaris";
import { Dispatch, SetStateAction } from "react";
export const GameInfoHandler = async (
props: {
game: Game,
groups: GameGroup[]
}) => {
if (props) {
const currentGame = props.game;
const currentGroups = props.groups;
}
return <></>
}

View file

@ -0,0 +1,65 @@
'use client';
import { Game, GameGroup } from "@/types/stellaris";
import { Dropdown } from "@nextui-org/react";
import { Dispatch, Key, SetStateAction, Suspense, useState } from 'react';
import { fetchGameGroups } from "@/components/server/fetchers";
import { GameInfoHandler } from "./data-handlers/game-info-handler";
type SelectionType = "all" | Set<Key>;
export const GameInfoTabs = (
props: {
game: Game,
groups: GameGroup[]
}) => {
const [currentTab, setCurrentTab] = useState(1);
let currentTabView;
switch(currentTab) {
case(1):
case(2): {
currentTabView = <p>{currentTab}</p>
break;
}
case(3): {
currentTabView = <GameInfoLegacyView game={props.game} groups={props.groups}/>
break;
}
default:
currentTabView = <p>Oops, something went wrong</p>
}
return (
<>
<Suspense>
<GameInfoHandler game={props.game} groups={props.groups} />
</Suspense>
<div className="row">
<button key={1} onClick={() => setCurrentTab(_currentTab => 1)}>
Tab 1
</button>
<button key={2} onClick={() => setCurrentTab(_currentTab => 2)}>
Tab 2
</button>
<button key={3} onClick={() => setCurrentTab(_currentTab => 3)}>
Legacy Visuals
</button>
</div>
{currentTabView}
</>
)
}
const GameInfoLegacyView = (
props: {
game: Game,
groups: GameGroup[]
}
) => {
return (
<div>
<p>Legacy View for {props.groups.length > 1 ? "Groups" : "Group"} {props.groups.map(elem => elem.name).join(", ")}</p>
</div>
)
}

View file

@ -4,6 +4,7 @@ import { GameSelect } from "./game-select";
import { useState } from 'react'; import { useState } from 'react';
import { GameGroupSelect } from "./game-group-select"; import { GameGroupSelect } from "./game-group-select";
import { SSRProvider } from "react-bootstrap"; import { SSRProvider } from "react-bootstrap";
import { GameInfoTabs } from "./game-info-tabs";
export const GameView = (props: { games: Game[] }) => { export const GameView = (props: { games: Game[] }) => {
const [currentGame, setCurrentGame] = useState(props.games[0]); const [currentGame, setCurrentGame] = useState(props.games[0]);
@ -14,8 +15,11 @@ export const GameView = (props: { games: Game[] }) => {
return ( return (
<> <>
<SSRProvider> <SSRProvider>
<div className="row">
<GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} /> <GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
<GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} /> <GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
</div>
<GameInfoTabs game={currentGame} groups={currentGameGroups} />
</SSRProvider> </SSRProvider>
</> </>
) )

View file

@ -5,7 +5,7 @@
"href": "/" "href": "/"
}, },
{ {
"name": "Legacy Info", "name": "Game 15 Info",
"href": "/graphs" "href": "/graphs"
}, },
{ {

View file

@ -1,11 +1,11 @@
{ {
"links": [ "links": [
{ {
"name": "Home Alt", "name": "Home New",
"href": "/" "href": "/"
}, },
{ {
"name": "Legacy Info", "name": "Game 15 Info",
"href": "/graphs" "href": "/graphs"
}, },
{ {