Frontend manual rescheduling

frontend/public/locales/en/common.json

@@ -29,6 +29,8 @@
     "auto_create_matches_button": "Add new matches automatically",
     "back_home_nav": "Take me back to home page",
     "back_to_login_nav": "Back to login page",
+    "calculate_datetime_match_label": "Calculate date and time of the match",
+    "calculate_label": "Calculate",
     "checkbox_status_checked": "Checked",
     "checkbox_status_unchecked": "Unchecked",
     "club_choose_title": "Please choose a club",
@@ -141,6 +143,7 @@
     "negative_score_validation": "Score cannot be negative",
     "next_matches_badge": "Next matches",
     "next_stage_button": "Next Stage",
+    "next_match_time_label": "Next match time",
     "no_matches_description": "First, add matches by creating stages and stage items. Then, schedule them using the button in the topright corner.",
     "no_matches_title": "No matches scheduled yet",
     "no_players_title": "No players yet",

frontend/src/components/brackets/match.tsx

@@ -1,4 +1,4 @@
-import { Center, Grid, UnstyledButton, useMantineTheme } from '@mantine/core';
+import { Center, Grid, Text, UnstyledButton, useMantineTheme } from '@mantine/core';
 import assert from 'assert';
 import React, { useState } from 'react';
 import { SWRResponse } from 'swr';
@@ -13,7 +13,7 @@ import {
 import { TournamentMinimal } from '../../interfaces/tournament';
 import { getMatchLookup, getStageItemLookup } from '../../services/lookups';
 import MatchModal from '../modals/match_modal';
-import { Time } from '../utils/datetime';
+import { DateTime } from '../utils/datetime';
 import classes from './match.module.css';
 
 export function MatchBadge({ match, theme }: { match: MatchInterface; theme: any }) {
@@ -30,10 +30,14 @@ export function MatchBadge({ match, theme }: { match: MatchInterface; theme: any
         }}
       >
         <Center>
-          <b>
-            {match.court?.name} |{' '}
-            {match.start_time != null ? <Time datetime={match.start_time} /> : null}
-          </b>
+          <div>
+            <Text fw={700} ta="center">
+              {match.court?.name}
+            </Text>
+            <Text fw={700} ta="center">
+              {match.start_time != null ? <DateTime datetime={match.start_time} /> : null}
+            </Text>
+          </div>
         </Center>
       </div>
     </Center>

frontend/src/components/forms/common_custom_times_matches.tsx

@@ -0,0 +1,121 @@
+import { Center, Checkbox, Grid, Input, NumberInput, Text } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { format, fromUnixTime, getUnixTime, parseISO } from 'date-fns';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+
+import { MatchInterface } from '../../interfaces/match';
+
+interface CommonCustomTimeMatchesFormProps<ExtendedObj extends Record<string, unknown>> {
+  customDurationEnabled: boolean;
+  setCustomDurationEnabled: (value: boolean) => void;
+  customMarginEnabled: boolean;
+  setCustomMarginEnabled: (value: boolean) => void;
+  match: MatchInterface;
+  form: UseFormReturnType<
+    ExtendedObj & {
+      custom_duration_minutes: number | null;
+      custom_margin_minutes: number | null;
+    },
+    (
+      values: ExtendedObj & {
+        custom_duration_minutes: number | null;
+        custom_margin_minutes: number | null;
+      }
+    ) => ExtendedObj & {
+      custom_duration_minutes: number | null;
+      custom_margin_minutes: number | null;
+    }
+  >;
+}
+
+export default function CommonCustomTimeMatchesForm<
+  ExtendedValues extends Record<string, unknown> = Record<string, unknown>,
+>({
+  form,
+  customDurationEnabled,
+  customMarginEnabled,
+  match,
+  setCustomDurationEnabled,
+  setCustomMarginEnabled,
+}: CommonCustomTimeMatchesFormProps<ExtendedValues>) {
+  const { t } = useTranslation();
+
+  const matchDuration = useMemo(() => {
+    const value = customDurationEnabled
+      ? form.values.custom_duration_minutes
+      : match.duration_minutes;
+    return value ?? 0;
+  }, [customDurationEnabled, match.custom_duration_minutes, match.duration_minutes]);
+
+  const matchMargin = useMemo(() => {
+    const value = customMarginEnabled ? form.values.custom_margin_minutes : match.margin_minutes;
+    return value ?? 0;
+  }, [customMarginEnabled, match.custom_margin_minutes, match.margin_minutes]);
+
+  const endDatetime = useMemo(
+    () =>
+      fromUnixTime(getUnixTime(parseISO(match.start_time)) + matchDuration * 60 + matchMargin * 60),
+    [match.start_time, matchDuration, matchMargin]
+  );
+
+  return (
+    <>
+      <Grid align="center">
+        <Grid.Col span={{ sm: 8 }}>
+          <NumberInput
+            label={t('custom_match_duration_label')}
+            disabled={!customDurationEnabled}
+            rightSection={<Text>{t('minutes')}</Text>}
+            placeholder={`${match.duration_minutes}`}
+            rightSectionWidth={92}
+            {...form.getInputProps('custom_duration_minutes')}
+          />
+        </Grid.Col>
+        <Grid.Col span={{ sm: 4 }}>
+          <Input.Label />
+          <Center>
+            <Checkbox
+              checked={customDurationEnabled}
+              label={t('customize_checkbox_label')}
+              onChange={(event) => {
+                setCustomDurationEnabled(event.currentTarget.checked);
+              }}
+            />
+          </Center>
+        </Grid.Col>
+      </Grid>
+
+      <Grid align="center">
+        <Grid.Col span={{ sm: 8 }}>
+          <NumberInput
+            label={t('custom_match_margin_label')}
+            disabled={!customMarginEnabled}
+            placeholder={`${match.margin_minutes}`}
+            rightSection={<Text>{t('minutes')}</Text>}
+            rightSectionWidth={92}
+            {...form.getInputProps('custom_margin_minutes')}
+          />
+        </Grid.Col>
+        <Grid.Col span={{ sm: 4 }}>
+          <Input.Label />
+          <Center>
+            <Checkbox
+              checked={customMarginEnabled}
+              label={t('customize_checkbox_label')}
+              onChange={(event) => {
+                setCustomMarginEnabled(event.currentTarget.checked);
+              }}
+            />
+          </Center>
+        </Grid.Col>
+      </Grid>
+
+      <Input.Wrapper label={t('next_match_time_label')} mt="sm">
+        <Input component="time" dateTime={endDatetime.toISOString()}>
+          {format(endDatetime, 'd LLLL yyyy HH:mm')}
+        </Input>
+      </Input.Wrapper>
+    </>
+  );
+}

frontend/src/components/modals/match_modal.tsx

@@ -1,9 +1,10 @@
-import { Button, Center, Checkbox, Divider, Grid, Modal, NumberInput, Text } from '@mantine/core';
+import { Button, Center, Checkbox, Divider, Grid, Input, Modal, NumberInput, Text } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { SWRResponse } from 'swr';
 
+import { format, fromUnixTime, getUnixTime, parseISO } from 'date-fns';
 import {
   MatchBodyInterface,
   MatchInterface,
@@ -90,6 +91,24 @@ function MatchModalForm({
     match.custom_margin_minutes != null
   );
 
+  const matchDuration = useMemo(() => {
+    const value = customDurationEnabled
+      ? form.values.custom_duration_minutes
+      : match.duration_minutes;
+    return value ?? 0;
+  }, [customDurationEnabled, form.values.custom_duration_minutes, match.duration_minutes]);
+
+  const matchMargin = useMemo(() => {
+    const value = customMarginEnabled ? form.values.custom_margin_minutes : match.margin_minutes;
+    return value ?? 0;
+  }, [customMarginEnabled, form.values.custom_margin_minutes, match.margin_minutes]);
+
+  const endDatetime = useMemo(
+    () =>
+      fromUnixTime(getUnixTime(parseISO(match.start_time)) + matchDuration * 60 + matchMargin * 60),
+    [match.start_time, matchDuration, matchMargin]
+  );
+
   const stageItemsLookup = getStageItemLookup(swrStagesResponse);
   const matchesLookup = getMatchLookup(swrStagesResponse);
 
@@ -130,12 +149,18 @@ function MatchModalForm({
         />
         <Divider mt="lg" />
 
-        <Text size="sm" mt="lg">
-          {t('custom_match_duration_label')}
-        </Text>
+        {/* <CommonCustomTimeMatchesForm
+          customDurationEnabled={customDurationEnabled}
+          customMarginEnabled={customMarginEnabled}
+          form={form}
+          match={match}
+          setCustomDurationEnabled={setCustomDurationEnabled}
+          setCustomMarginEnabled={setCustomMarginEnabled}
+        /> */}
         <Grid align="center">
           <Grid.Col span={{ sm: 8 }}>
             <NumberInput
+              label={t('custom_match_duration_label')}
               disabled={!customDurationEnabled}
               rightSection={<Text>{t('minutes')}</Text>}
               placeholder={`${match.duration_minutes}`}
@@ -144,6 +169,7 @@ function MatchModalForm({
             />
           </Grid.Col>
           <Grid.Col span={{ sm: 4 }}>
+            <Input.Label />
             <Center>
               <Checkbox
                 checked={customDurationEnabled}
@@ -156,12 +182,10 @@ function MatchModalForm({
           </Grid.Col>
         </Grid>
 
-        <Text size="sm" mt="lg">
-          {t('custom_match_margin_label')}
-        </Text>
         <Grid align="center">
           <Grid.Col span={{ sm: 8 }}>
             <NumberInput
+              label={t('custom_match_margin_label')}
               disabled={!customMarginEnabled}
               placeholder={`${match.margin_minutes}`}
               rightSection={<Text>{t('minutes')}</Text>}
@@ -170,6 +194,7 @@ function MatchModalForm({
             />
           </Grid.Col>
           <Grid.Col span={{ sm: 4 }}>
+            <Input.Label />
             <Center>
               <Checkbox
                 checked={customMarginEnabled}
@@ -182,6 +207,12 @@ function MatchModalForm({
           </Grid.Col>
         </Grid>
 
+        <Input.Wrapper label={t('next_match_time_label')} mt="sm">
+          <Input component="time" dateTime={endDatetime.toISOString()}>
+            {format(endDatetime, 'd LLLL yyyy HH:mm')}
+          </Input>
+        </Input.Wrapper>
+
         <Button fullWidth style={{ marginTop: 20 }} color="green" type="submit">
           {t('save_button')}
         </Button>