Tab Selector for different Data Visualisations
This commit is contained in:
parent
f23c9dc0f1
commit
6130b331e6
6 changed files with 99 additions and 6 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
17
components/gui/data-handlers/game-info-handler.tsx
Normal file
17
components/gui/data-handlers/game-info-handler.tsx
Normal 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 <></>
|
||||||
|
}
|
65
components/gui/game-info-tabs.tsx
Normal file
65
components/gui/game-info-tabs.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -4,18 +4,22 @@ 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]);
|
||||||
|
|
||||||
const [gameGroups, setGameGroups] = useState([{id: 0, name: "", game_id: 0}]);
|
const [gameGroups, setGameGroups] = useState([{ id: 0, name: "", game_id: 0 }]);
|
||||||
const [currentGameGroups, setCurrentGameGroups] = useState(gameGroups);
|
const [currentGameGroups, setCurrentGameGroups] = useState(gameGroups);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SSRProvider>
|
<SSRProvider>
|
||||||
<GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
|
<div className="row">
|
||||||
<GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
|
<GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
|
||||||
|
<GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
|
||||||
|
</div>
|
||||||
|
<GameInfoTabs game={currentGame} groups={currentGameGroups} />
|
||||||
</SSRProvider>
|
</SSRProvider>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
"href": "/"
|
"href": "/"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Legacy Info",
|
"name": "Game 15 Info",
|
||||||
"href": "/graphs"
|
"href": "/graphs"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
Reference in a new issue