Added conflict indication to queuers (#960)

FIRSTIsrael · Jan 21, 2025 · 78ecee9 · 78ecee9
1 parent 2d6f3cf
commit 78ecee9
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 12 deletions.
diff --git a/apps/frontend/components/queueing/queuer-field-team-display.tsx b/apps/frontend/components/queueing/queuer-field-team-display.tsx
@@ -1,18 +1,20 @@
 import { useMemo } from 'react';
 import { WithId } from 'mongodb';
-import { Team, DivisionState, RobotGameMatch } from '@lems/types';
+import { Team, DivisionState, RobotGameMatch, JudgingSession } from '@lems/types';
 import TeamQueueCard from './team-queue-card';
 
 interface QueuerFieldTeamDisplayProps {
   teams: Array<WithId<Team>>;
   divisionState: WithId<DivisionState>;
   matches: Array<WithId<RobotGameMatch>>;
+  sessions: Array<WithId<JudgingSession>>;
 }
 
 const QueuerFieldTeamDisplay: React.FC<QueuerFieldTeamDisplayProps> = ({
   teams,
   divisionState,
-  matches
+  matches,
+  sessions
 }) => {
   const calledMatches = useMemo(
     () => matches.filter(m => m.called && m.status === 'not-started'),
@@ -24,13 +26,19 @@ const QueuerFieldTeamDisplay: React.FC<QueuerFieldTeamDisplayProps> = ({
       .filter(p => p.teamId && !p.queued)
       .map(({ teamId, tableName }, index) => {
         const team = teams.find(t => t._id == teamId);
+        const teamInJudging = !!sessions
+          .filter(
+            s => s.status === 'in-progress' || (s.status === 'not-started' && s.called && s.queued)
+          )
+          .find(s => s.teamId === teamId);
         return (
           team?.registered && (
             <TeamQueueCard
               key={index}
               team={team}
               location={tableName}
               scheduledTime={match.scheduledTime}
+              isBusy={teamInJudging ? 'judging' : undefined}
               urgent={divisionState.loadedMatch === match._id}
               urgencyThresholdMinutes={7}
             />

diff --git a/apps/frontend/components/queueing/queuer-judging-team-display.tsx b/apps/frontend/components/queueing/queuer-judging-team-display.tsx
@@ -1,18 +1,24 @@
 import { useMemo } from 'react';
 import { WithId } from 'mongodb';
-import { Team, JudgingSession, JudgingRoom } from '@lems/types';
+import { Team, JudgingSession, JudgingRoom, RobotGameMatch } from '@lems/types';
 import TeamQueueCard from './team-queue-card';
 
 interface QueuerJudgingTeamDisplayProps {
   teams: Array<WithId<Team>>;
   sessions: Array<WithId<JudgingSession>>;
   rooms: Array<WithId<JudgingRoom>>;
+  matches: Array<WithId<RobotGameMatch>>;
+  activeMatch: WithId<RobotGameMatch> | null;
+  loadedMatch: WithId<RobotGameMatch> | null;
 }
 
 const QueuerJudgingTeamDisplay: React.FC<QueuerJudgingTeamDisplayProps> = ({
   teams,
   sessions,
-  rooms
+  rooms,
+  matches,
+  activeMatch,
+  loadedMatch
 }) => {
   const calledSessions = useMemo(() => sessions.filter(m => m.called), [sessions]);
 
@@ -21,12 +27,19 @@ const QueuerJudgingTeamDisplay: React.FC<QueuerJudgingTeamDisplayProps> = ({
     .map(session => {
       const team = teams.find(t => t._id === session.teamId);
       const room = rooms.find(r => r._id === session.roomId);
+      const teamOnField =
+        !!activeMatch?.participants.find(p => p.teamId === team?._id) ||
+        !!loadedMatch?.participants.find(p => p.teamId === team?._id) ||
+        !!matches
+          .filter(m => m.called && m.status === 'not-started')
+          .some(m => m.participants.some(p => p.teamId === team?._id && p.queued));
       return (
         team?.registered && (
           <TeamQueueCard
             key={session._id.toString()}
             team={team}
             location={room?.name}
+            isBusy={teamOnField ? 'field' : undefined}
             scheduledTime={session.scheduledTime}
             urgencyThresholdMinutes={10}
           />

diff --git a/apps/frontend/components/queueing/team-queue-card.tsx b/apps/frontend/components/queueing/team-queue-card.tsx
@@ -1,16 +1,18 @@
 import { useMemo } from 'react';
 import { WithId } from 'mongodb';
-import { Paper, Stack, Typography } from '@mui/material';
+import { Paper, Stack, Tooltip, Typography } from '@mui/material';
 import Grid from '@mui/material/Grid2';
 import { red } from '@mui/material/colors';
-import { Team } from '@lems/types';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import { DivisionSection, Team } from '@lems/types';
 import dayjs from 'dayjs';
 import useCountdown from '../../hooks/use-countdown';
 import useStopwatch from '../../hooks/use-stopwatch';
 interface TeamQueueCardProps {
   team: WithId<Team>;
   location?: string;
   scheduledTime?: Date;
+  isBusy?: DivisionSection;
   urgent?: boolean;
   urgencyThresholdMinutes?: number;
 }
@@ -19,6 +21,7 @@ const TeamQueueCard: React.FC<TeamQueueCardProps> = ({
   team,
   location,
   scheduledTime,
+  isBusy,
   urgent = false,
   urgencyThresholdMinutes = -Infinity
 }) => {
@@ -61,14 +64,22 @@ const TeamQueueCard: React.FC<TeamQueueCardProps> = ({
         <Typography fontWeight={500} fontSize="1.25rem">
           {location}
         </Typography>
-        {scheduledTime && (
-          <Stack direction="row" spacing={2}>
+        <Stack direction="row" spacing={2}>
+          {scheduledTime && (
             <Typography fontSize="1rem" color="textSecondary">
               {dayjs(scheduledTime).format('HH:mm')} (
               {totalMinutes >= 0 ? `בעוד ${totalMinutes}` : `לפני ${totalUpMinutes}`} דק&apos;)
             </Typography>
-          </Stack>
-        )}
+          )}
+          {isBusy && (
+            <Tooltip
+              title={`הקבוצה נמצאת ב${isBusy === 'field' ? 'זירה' : 'חדר השיפוט'} כרגע!`}
+              arrow
+            >
+              <WarningAmberRoundedIcon color="warning" />
+            </Tooltip>
+          )}
+        </Stack>
       </Grid>
     </Grid>
   );

diff --git a/apps/frontend/pages/lems/queuer.tsx b/apps/frontend/pages/lems/queuer.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { WithId } from 'mongodb';
 import { GetServerSideProps, NextPage } from 'next';
 import { useRouter } from 'next/router';
@@ -61,6 +61,15 @@ const Page: NextPage<Props> = ({
   const [matches, setMatches] = useState<Array<WithId<RobotGameMatch>>>(initialMatches);
   const [sessions, setSessions] = useState<Array<WithId<JudgingSession>>>(initialSessions);
 
+  const activeMatch = useMemo(
+    () => matches.find(match => match._id === divisionState.activeMatch) || null,
+    [divisionState.activeMatch, matches]
+  );
+  const loadedMatch = useMemo(
+    () => matches.find(match => match._id === divisionState.loadedMatch) || null,
+    [divisionState.loadedMatch, matches]
+  );
+
   const handleMatchEvent = (
     match: WithId<RobotGameMatch>,
     newDivisionState?: WithId<DivisionState>
@@ -144,10 +153,18 @@ const Page: NextPage<Props> = ({
                   divisionState={divisionState}
                   teams={teams}
                   matches={matches}
+                  sessions={sessions}
                 />
               )}
               {user.roleAssociation?.value === 'judging' && (
-                <QueuerJudgingTeamDisplay teams={teams} sessions={sessions} rooms={rooms} />
+                <QueuerJudgingTeamDisplay
+                  teams={teams}
+                  sessions={sessions}
+                  rooms={rooms}
+                  matches={matches}
+                  activeMatch={activeMatch}
+                  loadedMatch={loadedMatch}
+                />
               )}
             </>
           )}