From 6130b331e6135be5b1038f58f962627e4ecd5768 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Sat, 10 Jun 2023 23:43:09 +0200
Subject: [PATCH] Tab Selector for different Data Visualisations

---
 app/globals.css                               |  7 ++
 .../gui/data-handlers/game-info-handler.tsx   | 17 +++++
 components/gui/game-info-tabs.tsx             | 65 +++++++++++++++++++
 components/gui/game-view.tsx                  | 10 ++-
 public/routes.json                            |  2 +-
 public/routes_api.json                        |  4 +-
 6 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 components/gui/data-handlers/game-info-handler.tsx
 create mode 100644 components/gui/game-info-tabs.tsx

diff --git a/app/globals.css b/app/globals.css
index 4c40d4a..ad9ab27 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -83,3 +83,10 @@ main {
   height: calc(100vh - 30px);
   max-height: 100%;
 }
+
+
+/* DEBUG */
+.row {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/components/gui/data-handlers/game-info-handler.tsx b/components/gui/data-handlers/game-info-handler.tsx
new file mode 100644
index 0000000..78fdc0e
--- /dev/null
+++ b/components/gui/data-handlers/game-info-handler.tsx
@@ -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 <></>
+}
\ No newline at end of file
diff --git a/components/gui/game-info-tabs.tsx b/components/gui/game-info-tabs.tsx
new file mode 100644
index 0000000..e7e21e6
--- /dev/null
+++ b/components/gui/game-info-tabs.tsx
@@ -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>
+  )
+}
\ No newline at end of file
diff --git a/components/gui/game-view.tsx b/components/gui/game-view.tsx
index fb4c1dd..62588db 100644
--- a/components/gui/game-view.tsx
+++ b/components/gui/game-view.tsx
@@ -4,18 +4,22 @@ import { GameSelect } from "./game-select";
 import { useState } from 'react';
 import { GameGroupSelect } from "./game-group-select";
 import { SSRProvider } from "react-bootstrap";
+import { GameInfoTabs } from "./game-info-tabs";
 
 export const GameView = (props: { games: Game[] }) => {
   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);
 
   return (
     <>
       <SSRProvider>
-        <GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
-        <GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
+        <div className="row">
+          <GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
+          <GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
+        </div>
+        <GameInfoTabs game={currentGame} groups={currentGameGroups} />
       </SSRProvider>
     </>
   )
diff --git a/public/routes.json b/public/routes.json
index 0149c2e..a8cacc2 100644
--- a/public/routes.json
+++ b/public/routes.json
@@ -5,7 +5,7 @@
       "href": "/"
     },
     {
-      "name": "Legacy Info",
+      "name": "Game 15 Info",
       "href": "/graphs"
     },
     {
diff --git a/public/routes_api.json b/public/routes_api.json
index 97a95cf..f2c9c29 100644
--- a/public/routes_api.json
+++ b/public/routes_api.json
@@ -1,11 +1,11 @@
 {
   "links": [
     {
-      "name": "Home Alt",
+      "name": "Home New",
       "href": "/"
     },
     {
-      "name": "Legacy Info",
+      "name": "Game 15 Info",
       "href": "/graphs"
     },
     {