show submissions for selected player

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 {
+const Calendar = ({
-  [id: number]: string;
+  playerId,
-}
+  events,
-interface Events {
+}: {
-  [key: string]: Datum;
+  playerId: number;
-}
+  events: Events | undefined;
-
+}) => {
-const Calendar = ({ playerId }: { playerId: number }) => {
   const [selectedDate, setSelectedDate] = useState(new Date());
-  const [events, setEvents] = useState<Events>();
   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]];
   };

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<Events>();
   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<ErrorState>();
   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 = () => {
                         </button>
                       </div>
                     </div>
+                    {player.id !== 0 && (
+                      <div className="field">
+                        <div className="control">
+                          <label className="label">submissions</label>
+                          {getPlayerSubmissions().map((submission) => (
+                            <span className="tooltip">
+                              {submission.emoji}
+                              <span className="tooltiptext notification is-primary is-light has-text-centered">
+                                {submission.date}
+                              </span>
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    )}
                   </div>
                   {error?.message && (
                     <p
@@ -287,7 +330,7 @@ const TeamPanel = () => {
         </section>
         <section className="section">
           <div className="container">
-            <Calendar playerId={player.id} />
+            <Calendar playerId={player.id} events={events} />
           </div>
         </section>
       </>

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;

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;
+}