feat: add a Team Panel
This commit is contained in:
parent
8c938a7ebc
commit
691b99daa8
54
src/App.css
54
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% {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
))}
|
||||
|
@ -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
87
src/TeamPanel.tsx
Normal 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" />;
|
||||
};
|
12
src/api.ts
12
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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user