diff --git a/src/api/match-info/create-event-match.ts b/src/api/match-info/create-event-match.ts index dc73ae5b3..2ad59e859 100644 --- a/src/api/match-info/create-event-match.ts +++ b/src/api/match-info/create-event-match.ts @@ -8,4 +8,4 @@ export const createEventMatch = ( // UTC Date - scheduled match time time: string }, -) => request('POST', `events/${eventKey}/matches`, {}, match) +) => request('PUT', `events/${eventKey}/matches/${match.key}`, {}, match) diff --git a/src/components/event-matches.tsx b/src/components/event-matches.tsx index 89814700d..50fc63847 100644 --- a/src/components/event-matches.tsx +++ b/src/components/event-matches.tsx @@ -9,6 +9,7 @@ import { formatMatchKey } from '@/utils/format-match-key' interface Props { matches: ProcessedMatchInfo[] eventKey: string + isAdmin?: boolean } const searchTextStyles = css` @@ -28,7 +29,7 @@ const enum QueryRank { MatchExact, } -export const EventMatches = ({ matches, eventKey }: Props) => { +export const EventMatches = ({ matches, eventKey, isAdmin }: Props) => { const [searchQuery, setSearchQuery] = useState('') const s = searchQuery.trim().toLowerCase() @@ -80,7 +81,13 @@ export const EventMatches = ({ matches, eventKey }: Props) => { />
{filteredMatches.map((m) => ( - + ))}
diff --git a/src/components/match-card.tsx b/src/components/match-card.tsx index 31c59eb4a..d81cf7d99 100644 --- a/src/components/match-card.tsx +++ b/src/components/match-card.tsx @@ -5,6 +5,8 @@ import Card from '@/components/card' import { css } from '@linaria/core' import { memo } from '@/utils/memo' import clsx from 'clsx' +import IconButton from './icon-button' +import { mdiPencil } from '@mdi/js' interface MatchCardProps { match: { @@ -17,13 +19,14 @@ interface MatchCardProps { eventKey: string link?: boolean class?: string + isAdmin?: boolean } const matchCardStyle = css` font-size: 0.93rem; align-items: center; display: grid; - grid-template-columns: auto auto 10rem; + grid-template-columns: auto auto auto 10rem; overflow: hidden; text-decoration: none; @@ -40,13 +43,21 @@ const matchCardStyle = css` const matchTitleStyle = css` font-weight: bold; grid-row: span 2; + grid-column: 1; white-space: nowrap; - margin: 0.3rem 0.6rem; + margin: 0.3rem 0rem 0.3rem 0.6rem; + align-items: center; + & > * { margin: 0.3rem 0; } ` +const pencilStyle = css` + grid-column: 2; + grid-row: span 2; +` + const matchNumStyle = css` grid-row: 2; text-transform: uppercase; @@ -58,7 +69,7 @@ const matchNumStyle = css` const allianceStyle = css` white-space: nowrap; - grid-column: 3; + grid-column: 4; align-self: stretch; margin-left: 0.3rem; padding: 0.35rem 0.8rem; @@ -82,8 +93,13 @@ const blueStyle = css` background-color: var(--alliance-blue); ` +const pencilIconStyle = css` + width: 1rem; + aspect-ratio: 1; +` + export const MatchDetailsCard = memo( - ({ match, eventKey, link, class: className }: MatchCardProps) => { + ({ match, eventKey, link, class: className, isAdmin }: MatchCardProps) => { const matchName = formatMatchKey(match.key) const createTeamLinks = (teams: string[]) => @@ -111,6 +127,15 @@ export const MatchDetailsCard = memo(
{`Match ${matchName.num}`}
)} +
+ {isAdmin && ( + + )} +
{match.time && (