Skip to content

Commit

Permalink
things
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-flynn
kyle-flynn committed Sep 25, 2024
1 parent 9e1abaf commit a3617bd
Showing 1 changed file with 130 additions and 114 deletions.
244 changes: 130 additions & 114 deletions front-end/src/apps/event-monitor/event-monitor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { Card, CardContent, CardHeader, Grid, Typography } from '@mui/material';
import {
Card,
CardActions,
CardContent,
CardHeader,
Grid,
Typography
} from '@mui/material';
import { FC, useEffect, useState } from 'react';
import { DefaultLayout } from 'src/layouts/default-layout';
import { MatchSocketEvent, MatchKey } from '@toa-lib/models';
Expand All @@ -7,6 +14,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import { useMatchAll } from 'src/api/use-match-data';
import { useTeamIdentifiersForEventKey } from 'src/hooks/use-team-identifier';
import { DateTime } from 'luxon';

interface MonitorCardProps {
field: number;
Expand Down Expand Up @@ -88,115 +96,126 @@ const MonitorCard: FC<MonitorCardProps> = ({ field, url }) => {
/>
<CardContent>
<Grid container>
<Grid item xs={8}>
<Grid container>
<Grid item xs={4}>
<Typography align='left' className='red'>
{match && match.participants ? (
<>
<span
className={`flag-icon flag-icon-${match.participants[0].team?.countryCode}`}
/>{' '}
{identifiers[match?.participants?.[0].teamKey]}
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4} />
<Grid item xs={4}>
<Typography align='right' className='blue'>
{match && match.participants ? (
<>
{identifiers[match?.participants?.[3].teamKey]}{' '}
<span
className={`flag-icon flag-icon-${match.participants[3].team?.countryCode}`}
/>
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4}>
<Typography align='left' className='red'>
{match && match.participants ? (
<>
<span
className={`flag-icon flag-icon-${match.participants[0].team?.countryCode}`}
/>{' '}
{identifiers[match?.participants?.[0].teamKey]}
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4} />
<Grid item xs={4}>
<Typography align='right' className='blue'>
{match && match.participants ? (
<>
{identifiers[match?.participants?.[3].teamKey]}{' '}
<span
className={`flag-icon flag-icon-${match.participants[3].team?.countryCode}`}
/>
</>
) : (
'---'
)}
</Typography>
</Grid>

<Grid item xs={4}>
<Typography align='left' className='red'>
{match && match.participants ? (
<>
<span
className={`flag-icon flag-icon-${match.participants[1].team?.countryCode}`}
/>{' '}
{identifiers[match?.participants?.[1].teamKey]}
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4}>
<Typography align='center'>vs.</Typography>
</Grid>
<Grid item xs={4}>
<Typography align='right' className='blue'>
{match && match.participants ? (
<>
{identifiers[match?.participants?.[4].teamKey]}{' '}
<span
className={`flag-icon flag-icon-${match.participants[4].team?.countryCode}`}
/>
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4}>
<Typography align='left' className='red'>
{match && match.participants ? (
<>
<span
className={`flag-icon flag-icon-${match.participants[1].team?.countryCode}`}
/>{' '}
{identifiers[match?.participants?.[1].teamKey]}
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4}>
<Typography align='center'>vs.</Typography>
</Grid>
<Grid item xs={4}>
<Typography align='right' className='blue'>
{match && match.participants ? (
<>
{identifiers[match?.participants?.[4].teamKey]}{' '}
<span
className={`flag-icon flag-icon-${match.participants[4].team?.countryCode}`}
/>
</>
) : (
'---'
)}
</Typography>
</Grid>

<Grid item xs={4}>
<Typography align='left' className='red'>
{match && match.participants ? (
<>
<span
className={`flag-icon flag-icon-${match.participants[2].team?.countryCode}`}
/>{' '}
{identifiers[match?.participants?.[2].teamKey]}
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4} />
<Grid item xs={4}>
<Typography align='right' className='blue'>
{match && match.participants ? (
<>
{identifiers[match?.participants?.[5].teamKey]}{' '}
<span
className={`flag-icon flag-icon-${match.participants[5].team?.countryCode}`}
/>
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4}>
<Typography align='left' className='red'>
{match && match.participants ? (
<>
<span
className={`flag-icon flag-icon-${match.participants[2].team?.countryCode}`}
/>{' '}
{identifiers[match?.participants?.[2].teamKey]}
</>
) : (
'---'
)}
</Typography>
</Grid>
<Grid item xs={4} />
<Grid item xs={4}>
<Typography align='right' className='blue'>
{match && match.participants ? (
<>
{identifiers[match?.participants?.[5].teamKey]}{' '}
<span
className={`flag-icon flag-icon-${match.participants[5].team?.countryCode}`}
/>
</>
) : (
'---'
)}
</Typography>
</Grid>

<Grid item xs={4}>
<Typography align='center' className='red'>
{match ? match.redScore : '--'}
</Typography>
</Grid>
<Grid item xs={4} />
<Grid item xs={4}>
<Typography align='center' className='blue'>
{match ? match.blueScore : '--'}
</Typography>
</Grid>
</Grid>
<Grid item xs={4}>
<Typography align='center' className='red'>
{match ? match.redScore : '--'}
</Typography>
</Grid>
<Grid item xs={4} />
<Grid item xs={4}>
<Typography align='center' className='blue'>
{match ? match.blueScore : '--'}
</Typography>
</Grid>
</Grid>
</CardContent>
<CardActions>
<Typography variant='body2' sx={{ marginLeft: 'auto' }}>
{match
? DateTime.now() <= DateTime.fromISO(match.startTime)
? DateTime.now()
.diff(DateTime.fromISO(match.scheduledTime))
.shiftTo('hours', 'minutes')
.toFormat(`h'h' m'm' 'behind'`)
: DateTime.fromISO(match.scheduledTime)
.diff(DateTime.now())
.shiftTo('hours', 'minutes')
.toFormat(`h'h' m'm' 'ahead'`)
: ''}
</Typography>
</CardActions>
</Card>
);
};
Expand All @@ -205,22 +224,19 @@ export const EventMonitor: FC = () => {
return (
<DefaultLayout title='Event Monitor'>
<Grid container spacing={3}>
<Grid item xs={12} sm={4}>
<Grid item xs={12} sm={3}>
<MonitorCard field={1} url='192.168.80.111:8081' />
</Grid>
<Grid item xs={12} sm={3}>
<MonitorCard field={2} url='192.168.80.121:8081' />
</Grid>
<Grid item xs={12} sm={4}>
<Grid item xs={12} sm={3}>
<MonitorCard field={3} url='192.168.80.131:8081' />
</Grid>
<Grid item xs={12} sm={4}>
<Grid item xs={12} sm={3}>
<MonitorCard field={4} url='192.168.80.141:8081' />
</Grid>
<Grid item xs={12} sm={4}>
<MonitorCard field={1} url='192.168.80.111:8081' />
</Grid>
<Grid item xs={12} sm={4}>
<div>HERE</div>
</Grid>
<Grid item xs={12} sm={4}>
<Grid item xs={12} sm={3}>
<MonitorCard field={5} url='192.168.80.151:8081' />
</Grid>
</Grid>
Expand Down

0 comments on commit a3617bd

Please sign in to comment.