feat: add a Team Panel

src/App.css

@@ -471,7 +471,6 @@ button {
   }
 }
 
-
 .networkroute {
   z-index: 3;
   position: absolute;
@@ -479,6 +478,59 @@ button {
   left: 48px;
 }
 
+/*========TEAM PANEL========*/
+.team-panel {
+  padding: 1em;
+  border: 3px solid black;
+  box-shadow: 8px 8px black;
+  margin: 1em;
+
+  input {
+    max-width: 300px;
+    margin: 0.2em auto;
+  }
+}
+
+.team-player {
+  cursor: pointer;
+  color: black;
+  background-color: #36c4;
+  border: 1px solid black;
+  border-radius: 1em;
+  margin: 4px;
+  padding: 0 0.5em;
+
+  &:hover {
+    background-color: #36c8;
+  }
+}
+
+.new-player-inputs {
+  margin: auto;
+
+  div {
+    display: flex;
+    flex-wrap: wrap;
+    margin: auto;
+
+    label {
+      text-align: right;
+      margin-left: 2em;
+      margin-right: auto;
+    }
+
+    input {
+      width: 200px;
+      margin: 2px 1em;
+    }
+  }
+}
+
+#new-team-player {
+  background-color: #3838;
+  font-weight: bold;
+}
+
 @keyframes blink {
 
   0% {

src/App.tsx

@@ -9,6 +9,7 @@ import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
 import { SetPassword } from "./SetPassword";
 import { ThemeProvider } from "./ThemeProvider";
+import { TeamPanel } from "./TeamPanel";
 
 const Maintenance = () => {
   return (
@@ -37,6 +38,7 @@ function App() {
                   <Route path="/analysis" element={<Analysis />} />
                   <Route path="/mvp" element={<MVPChart />} />
                   <Route path="/changepassword" element={<SetPassword />} />
+                  <Route path="/team" element={<TeamPanel />} />
                 </Routes>
                 <Footer />
               </SessionProvider>

src/Avatar.tsx

@@ -44,7 +44,7 @@ const UserInfo = (user: User, teams: TeamState | undefined) => {
           >
             {teams.teams.map((team, index) => (
               <li>
-                {teams.activeTeam === index ? <b>{team.name}</b> : team.name} (
+                {<b>{team.name}</b>} (
                 {team.location || team.country || "location unknown"})
               </li>
             ))}

src/Rankings.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
-import { apiAuth, User } from "./api";
+import { apiAuth, loadPlayers, User } from "./api";
 import { TeamState, useSession } from "./Session";
 import { Chemistry, MVPRanking } from "./types";
 import TabController from "./TabController";
@@ -307,23 +307,10 @@ export default function Rankings() {
   const { user, teams } = useSession();
   const [players, setPlayers] = useState<User[] | null>(null);
 
-  async function loadPlayers() {
-    if (teams) {
-      try {
-        const data = await apiAuth(
-          `player/list/${teams?.activeTeam}`,
-          null,
-          "GET"
-        );
-        setPlayers(data as User[]);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  }
-
   useEffect(() => {
-    loadPlayers();
+    if (teams) {
+      loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+    }
   }, [user, teams]);
 
   const tabs = [

src/TeamPanel.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { loadPlayers, User } from "./api";
+import { useSession } from "./Session";
+
+export const TeamPanel = () => {
+  const { teams } = useSession();
+  const [players, setPlayers] = useState<User[] | null>(null);
+  const [newPlayer, setNewPlayer] = useState({
+    username: "",
+    display_name: "",
+    number: "",
+  });
+  useEffect(() => {
+    if (teams) {
+      loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+    }
+  }, [teams]);
+
+  if (teams) {
+    const activeTeam = teams.teams.filter(
+      (team) => team.id == teams?.activeTeam
+    )[0];
+    return (
+      <div className="team-panel">
+        <h1>{activeTeam.name}</h1>
+        <div className="stack column">
+          <input type="text" value={activeTeam.location || ""} disabled />
+          <input type="text" value={activeTeam.country || ""} disabled />
+          <hr style={{ width: "100%" }} />
+
+          <h2>players</h2>
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: "center",
+            }}
+          >
+            {players &&
+              players.map((player) => (
+                <div className="team-player" key={player.id}>
+                  {player.display_name}
+                </div>
+              ))}
+          </div>
+
+          <hr style={{ width: "100%" }} />
+          <div className="new-player-inputs">
+            <div>
+              <label>name</label>
+              <input
+                type="text"
+                value={newPlayer.display_name}
+                onChange={(e) =>
+                  setNewPlayer({ ...newPlayer, display_name: e.target.value })
+                }
+              />
+            </div>
+            <div>
+              <label>username</label>
+              <input
+                type="text"
+                value={newPlayer.username}
+                onChange={(e) =>
+                  setNewPlayer({ ...newPlayer, username: e.target.value })
+                }
+              />
+            </div>
+            <div>
+              <label>number</label>
+              <input
+                type="text"
+                value={newPlayer.number}
+                onChange={(e) =>
+                  setNewPlayer({ ...newPlayer, number: e.target.value })
+                }
+              />
+            </div>
+          </div>
+          <button className="team-player" id="new-team-player">
+            add player
+          </button>
+        </div>
+      </div>
+    );
+  } else <span className="loader" />;
+};

src/api.ts

@@ -47,9 +47,7 @@ export type User = {
   id: number;
   username: string;
   display_name: string;
-  full_name: string;
   email: string;
-  player_id: number;
   number: string;
   scopes: string;
 };
@@ -78,6 +76,16 @@ export async function currentUser(): Promise<User> {
   return resp.json() as Promise<User>;
 }
 
+export async function loadPlayers(teamId: number) {
+  try {
+    const data = await apiAuth(`player/list/${teamId}`, null, "GET");
+    return data as User[];
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
 export type LoginRequest = {
   username: string;
   password: string;