Merge pull request #120 from the-orange-alliance/2024-core-ems-ui

Core EMS UI for Season Components and Schedule Generation
the-orange-alliance · Aug 22, 2024 · c9101bc · c9101bc
2 parents b3bc626 + a350c88
commit c9101bc
Show file tree

Hide file tree

Showing 16 changed files with 317 additions and 18 deletions.
diff --git a/back-end/api/src/controllers/Match.ts b/back-end/api/src/controllers/Match.ts
@@ -59,7 +59,7 @@ router.post(
         matchMakerArgs,
         config
       );
-      logger.info('mathmaker complete - sending results');
+      logger.info('matchmaker complete - sending results');
       res.send(matches);
     } catch (e) {
       return next(e);

diff --git a/front-end/package-lock.json b/front-end/package-lock.json
diff --git a/front-end/src/apps/schedules/match-gen/random-matches.tsx b/front-end/src/apps/schedules/match-gen/random-matches.tsx
@@ -6,6 +6,7 @@ import {
   Tournament,
   assignMatchTimes
 } from '@toa-lib/models';
+import { FGCSchedule } from '@toa-lib/models';
 import { FC, useState } from 'react';
 import { createMatchSchedule } from 'src/api/use-match-data';
 import { MatchMakerQualityDropdown } from 'src/components/dropdowns/match-maker-dropdown';
@@ -53,7 +54,14 @@ export const RandomMatches: FC<Props> = ({
         teamKeys,
         name
       });
-      onCreateMatches(assignMatchTimes(matches, scheduleItems));
+      onCreateMatches(
+        assignMatchTimes(
+          eventSchedule.hasPremiereField
+            ? FGCSchedule.FGC2024.assignFields(matches)
+            : matches,
+          scheduleItems
+        )
+      );
       showSnackbar('MatchMaker executed successfully.');
       setLoading(false);
     } catch (e) {

diff --git a/front-end/src/apps/schedules/options/default-options.tsx b/front-end/src/apps/schedules/options/default-options.tsx
@@ -1,4 +1,12 @@
-import { Grid, TextField } from '@mui/material';
+import {
+  FormControl,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  TextField
+} from '@mui/material';
 import { EventSchedule, calculateTotalMatches } from '@toa-lib/models';
 import { ChangeEvent, FC, useEffect } from 'react';
 
@@ -35,13 +43,50 @@ export const DefaultScheduleOptions: FC<Props> = ({
     });
   };
 
+  const handleSelectChange = (event: SelectChangeEvent<boolean | number>) => {
+    if (!eventSchedule) return;
+    const { name, value } = event.target;
+    onChange({
+      ...eventSchedule,
+      [name]: Boolean(value)
+    });
+  };
+
   return (
     <Grid
       container
       spacing={3}
       sx={{ marginBottom: (theme) => theme.spacing(2) }}
     >
-      <Grid item xs={12} sm={6} md={4} lg={3}>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
+        <FormControl fullWidth>
+          <InputLabel>Premiere Field</InputLabel>
+          <Select
+            name='hasPremiereField'
+            label='Premiere Field?'
+            value={eventSchedule?.hasPremiereField ? 1 : 0}
+            disabled={disabled}
+            fullWidth
+            onChange={handleSelectChange}
+            type='number'
+          >
+            <MenuItem value={0}>No</MenuItem>
+            <MenuItem value={1}>Yes</MenuItem>
+          </Select>
+        </FormControl>
+      </Grid>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
+        <TextField
+          name='matchConcurrency'
+          label='Match Concurrency'
+          value={eventSchedule?.matchConcurrency}
+          disabled={disabled}
+          fullWidth
+          onChange={handleChange}
+          type='number'
+        />
+      </Grid>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
         <TextField
           name='cycleTime'
           label='Cycle Time'
@@ -52,7 +97,7 @@ export const DefaultScheduleOptions: FC<Props> = ({
           type='number'
         />
       </Grid>
-      <Grid item xs={12} sm={6} md={4} lg={3}>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
         <TextField
           name='matchesPerTeam'
           label='Matches Per Team'
@@ -63,7 +108,7 @@ export const DefaultScheduleOptions: FC<Props> = ({
           type='number'
         />
       </Grid>
-      <Grid item xs={12} sm={6} md={4} lg={3}>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
         <TextField
           label='Teams Scheduled'
           value={eventSchedule?.teamsParticipating}
@@ -72,7 +117,7 @@ export const DefaultScheduleOptions: FC<Props> = ({
           type='number'
         />
       </Grid>
-      <Grid item xs={12} sm={6} md={4} lg={3}>
+      <Grid item xs={12} sm={6} md={4} lg={2}>
         <TextField
           label='Total Matches'
           value={eventSchedule?.totalMatches}

diff --git a/front-end/src/apps/schedules/tabs/schedule-matches.tsx b/front-end/src/apps/schedules/tabs/schedule-matches.tsx
@@ -97,7 +97,7 @@ export const ScheduleMatches: FC<Props> = ({ eventSchedule, savedMatches }) => {
         tournament={tournament}
         onCreateMatches={handleCreateMatches}
       />
-      {matchesToDisplay && (
+      {matchesToDisplay.length > 0 && (
         <>
           <MatchTable matches={matchesToDisplay} teams={teams} />
           <ScheduleMatchFooter

diff --git a/front-end/src/apps/scorekeeper/match-header/alliance-card.tsx b/front-end/src/apps/scorekeeper/match-header/alliance-card.tsx
@@ -7,7 +7,7 @@ import {
 } from '@toa-lib/models';
 import { FC } from 'react';
 import { AutocompleteTeam } from 'src/components/dropdowns/autocomplete-team';
-import { ParticipantCardStatus } from './participant-card-status';
+import { FGCParticipantCardStatus } from './participant-card-status';
 import CheckboxStatus from './checkbox-status';
 
 interface Props {
@@ -118,7 +118,7 @@ export const AllianceCard: FC<Props> = ({
               />
             </Grid>
             <Grid item md={4}>
-              <ParticipantCardStatus
+              <FGCParticipantCardStatus
                 cardStatus={p.cardStatus}
                 disabled={disabled}
                 onChange={handleCardChange}

diff --git a/front-end/src/apps/scorekeeper/match-header/participant-card-status.tsx b/front-end/src/apps/scorekeeper/match-header/participant-card-status.tsx
@@ -53,3 +53,54 @@ export const ParticipantCardStatus: FC<Props> = ({
     </Button>
   );
 };
+
+export const FGCParticipantCardStatus: FC<Props> = ({
+  cardStatus,
+  disabled,
+  onChange
+}) => {
+  const toggle = () => {
+    onChange(cardStatus >= 3 ? 0 : cardStatus + 1);
+  };
+
+  const renderText = useCallback(() => {
+    switch (cardStatus) {
+      case 0:
+        return 'NO CARD';
+      case 1:
+        return 'YELLOW CARD';
+      case 2:
+        return 'RED CARD';
+      case 3:
+        return 'WHITE CARD';
+      default:
+        return 'NO CARD';
+    }
+  }, [cardStatus]);
+
+  const getClass = () => {
+    switch (cardStatus) {
+      case 0:
+        return 'no-card';
+      case 1:
+        return 'yellow-card';
+      case 2:
+        return 'red-card';
+      case 3:
+        return 'white-card';
+      default:
+        return 'no-card';
+    }
+  };
+  return (
+    <Button
+      variant='contained'
+      fullWidth
+      onClick={toggle}
+      disabled={disabled}
+      className={getClass()}
+    >
+      {renderText()}
+    </Button>
+  );
+};
diff --git a/front-end/src/apps/scorekeeper/tabs/scorekeeper-details.tsx b/front-end/src/apps/scorekeeper/tabs/scorekeeper-details.tsx
@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+export const ScorekeeperDetails: FC = () => {
+  return <div>Scorekeeper Details</div>;
+};
diff --git a/front-end/src/apps/scorekeeper/tabs/scorekeeper-tabs.tsx b/front-end/src/apps/scorekeeper/tabs/scorekeeper-tabs.tsx
@@ -10,6 +10,7 @@ import { useTeamsForEvent } from 'src/api/use-team-data';
 import { currentMatchIdAtom, matchOccurringAtom } from 'src/stores/recoil';
 import { useMatchControl } from '../hooks/use-match-control';
 import { MatchState } from '@toa-lib/models';
+import { ScorekeeperDetails } from './scorekeeper-details';
 
 interface Props {
   eventKey?: string;
@@ -65,7 +66,7 @@ export const ScorekeeperTabs: FC<Props> = ({ eventKey }) => {
         />
       </TabPanel>
       <TabPanel value={value} index={1}>
-        Score Details
+        <ScorekeeperDetails />
       </TabPanel>
     </Paper>
   );

diff --git a/front-end/src/components/tables/match-results-table.tsx b/front-end/src/components/tables/match-results-table.tsx
@@ -54,7 +54,9 @@ export const MatchResultsTable: FC<Props> = ({
         return [
           e.name,
           e.fieldNumber,
-          DateTime.fromISO(e.startTime).toLocaleString(DateTime.DATETIME_SHORT),
+          DateTime.fromISO(e.scheduledTime).toLocaleString(
+            DateTime.DATETIME_SHORT
+          ),
           ...participants.map((p, i) => (
             <span
               key={`${e.eventKey}-${e.tournamentKey}-${e.id}-${i}`}

diff --git a/front-end/src/components/tables/matches-table.tsx b/front-end/src/components/tables/matches-table.tsx
@@ -33,7 +33,9 @@ export const MatchTable: FC<Props> = ({ matches, teams }) => {
         return [
           e.name,
           e.fieldNumber,
-          DateTime.fromISO(e.startTime).toLocaleString(DateTime.DATETIME_FULL),
+          DateTime.fromISO(e.scheduledTime).toLocaleString(
+            DateTime.DATETIME_FULL
+          ),
           ...participants
         ];
       }}

diff --git a/front-end/src/seasons/fgc-2024/index.tsx b/front-end/src/seasons/fgc-2024/index.tsx
@@ -0,0 +1,13 @@
+import { FeedingTheFuture } from '@toa-lib/models';
+import { SeasonComponents } from '..';
+
+export const fgc2024Components: SeasonComponents<
+  FeedingTheFuture.MatchDetails,
+  FeedingTheFuture.SeasonRanking
+> = {
+  MatchDetailInfo: () => <div>MatchDetailInfo</div>,
+  RedScoreBreakdown: () => <div>RedScoreBreakdown</div>,
+  BlueScoreBreakdown: () => <div>BlueScoreBreakdown</div>,
+  RefereeScoreSheet: () => <div>RefereeScoreSheet</div>,
+  RankingsReport: () => <div>RankingsReport</div>
+};
diff --git a/front-end/src/seasons/index.tsx b/front-end/src/seasons/index.tsx
@@ -1,23 +1,29 @@
 import {
   Alliance,
   ChargedUpSeason,
+  HydrogenHorizons,
+  Crescendo,
+  FeedingTheFuture,
   Match,
   MatchDetailBase,
   Ranking
 } from '@toa-lib/models';
 import { FC, ChangeEvent } from 'react';
 import { chargedUpComponents } from './ChargedUp';
-import { HydrogenHorizonsSeason } from '@toa-lib/models/build/seasons/HydrogenHorizons';
 import { hydrogenHorizonComponents } from './HydrogenHorizons';
 import { crescendoComponents } from './Crescendo';
+import { fgc2024Components } from './fgc-2024';
 
-import { CrescendoSeason } from '@toa-lib/models/build/seasons/Crescendo';
+const { HydrogenHorizonsSeason } = HydrogenHorizons;
+const { CrescendoSeason } = Crescendo;
+const { FeedingTheFutureSeason } = FeedingTheFuture;
 
 // Add season components map here to be used in the function for later.
 const seasonComponents = new Map<string, SeasonComponents<any, any>>();
 seasonComponents.set(ChargedUpSeason.key, chargedUpComponents);
 seasonComponents.set(HydrogenHorizonsSeason.key, hydrogenHorizonComponents);
 seasonComponents.set(CrescendoSeason.key, crescendoComponents);
+seasonComponents.set(FeedingTheFutureSeason.key, fgc2024Components);
 
 export interface MatchDetailInfoProps<T extends MatchDetailBase> {
   match?: Match<T>;

diff --git a/front-end/src/utils.less b/front-end/src/utils.less
@@ -109,6 +109,11 @@
   background-color: @red !important;
 }
 
+.white-card {
+  background-color: #ffffff !important;
+  color: #000000 !important;
+}
+
 .mouse-disable {
   cursor: not-allowed !important;
 }