feat: add a Team Panel

This commit is contained in:
julius 2025-03-23 15:01:26 +01:00
parent 8c938a7ebc
commit 691b99daa8
Signed by: julius
GPG Key ID: C80A63E6A5FD7092
6 changed files with 157 additions and 21 deletions

View File

@ -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% {

View File

@ -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>

View File

@ -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>
))}

View File

@ -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 = [

87
src/TeamPanel.tsx Normal file
View File

@ -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" />;
};

View File

@ -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;