diff --git a/frontend/src/Calendar.tsx b/frontend/src/Calendar.tsx index 292b1e6..ed69f80 100644 --- a/frontend/src/Calendar.tsx +++ b/frontend/src/Calendar.tsx @@ -1,34 +1,18 @@ import { JSX, useEffect, useState } from "react"; import { apiAuth } from "./api"; import { useSession } from "./Session"; +import { Events } from "./types"; -interface Datum { - [id: number]: string; -} -interface Events { - [key: string]: Datum; -} - -const Calendar = ({ playerId }: { playerId: number }) => { +const Calendar = ({ + playerId, + events, +}: { + playerId: number; + events: Events | undefined; +}) => { const [selectedDate, setSelectedDate] = useState(new Date()); - const [events, setEvents] = useState(); const { teams, players } = useSession(); - async function loadSubmissionDates() { - if (teams?.activeTeam) { - const data = await apiAuth(`analysis/times/${teams?.activeTeam}`, null); - if (data.detail) { - console.log(data.detail); - } else { - setEvents(data as Events); - } - } - } - - useEffect(() => { - loadSubmissionDates(); - }, [players]); - const getEventsForDay = (date: Date) => { return events && events[date.toISOString().split("T")[0]]; }; diff --git a/frontend/src/TeamPanel.tsx b/frontend/src/TeamPanel.tsx index 23c0249..abef21b 100644 --- a/frontend/src/TeamPanel.tsx +++ b/frontend/src/TeamPanel.tsx @@ -1,7 +1,7 @@ import { FormEvent, useEffect, useState } from "react"; import { apiAuth, Gender, User } from "./api"; import { useSession } from "./Session"; -import { ErrorState } from "./types"; +import { ErrorState, Events } from "./types"; import { useNavigate } from "react-router"; import Calendar from "./Calendar"; import { Info, Star, StarHalf, StarOff, UserPen } from "lucide-react"; @@ -9,12 +9,30 @@ import Loading from "./Loading"; const TeamPanel = () => { const { user, teams, players, reloadPlayers } = useSession(); + const [events, setEvents] = useState(); const navigate = useNavigate(); + useEffect(() => { user?.scopes.includes(`team:${teams?.activeTeam}`) || teams?.activeTeam === 42 || navigate("/", { replace: true }); }, [user, teams]); + + async function loadSubmissionDates() { + if (teams?.activeTeam) { + const data = await apiAuth(`analysis/times/${teams?.activeTeam}`, null); + if (data.detail) { + console.log(data.detail); + } else { + setEvents(data as Events); + } + } + } + + useEffect(() => { + loadSubmissionDates(); + }, [players]); + const newPlayerTemplate = { id: 0, username: "", @@ -27,6 +45,16 @@ const TeamPanel = () => { const [error, setError] = useState(); const [player, setPlayer] = useState(newPlayerTemplate); + const getPlayerSubmissions = () => { + var submissions = []; + if (events) { + for (const [date, obj] of Object.entries(events)) + for (const [id, emoji] of Object.entries(obj)) + if (player.id === Number(id)) submissions.push({ emoji, date }); + } + return submissions; + }; + async function handleSubmit(e: FormEvent) { e.preventDefault(); if (teams) { @@ -252,6 +280,21 @@ const TeamPanel = () => { + {player.id !== 0 && ( +
+
+ + {getPlayerSubmissions().map((submission) => ( + + {submission.emoji} + + {submission.date} + + + ))} +
+
+ )} {error?.message && (

{

- +
diff --git a/frontend/src/main.css b/frontend/src/main.css index 34cbbb2..ed568c0 100644 --- a/frontend/src/main.css +++ b/frontend/src/main.css @@ -30,7 +30,9 @@ /* Tooltip text */ .tooltiptext { visibility: hidden; - width: 10rem; + top: 1.5rem; + left: -0.5rem; + width: 8rem; padding: 0.25rem; position: absolute; z-index: 1; diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 4ab76ae..1f4efa7 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -53,3 +53,10 @@ export type ErrorState = { ok: boolean; message: string; }; + +export interface Datum { + [id: number]: string; +} +export interface Events { + [key: string]: Datum; +}