add past/future toggle to event page

diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js
index 56d5862c59134f977a4e5e19874f5473052ecc40..84c6d11fb7a57e19f65fba4742c79f63e4999b4c 100644 (file)
--- a/resources/js/components/common/Icon.js
+++ b/resources/js/components/common/Icon.js
@@ -94,6 +94,7 @@ Icon.STEP_FORWARD = makePreset('StepForwardIcon', 'forward-step');
 Icon.STOP = makePreset('StopIcon', 'stop');
 Icon.STREAM = makePreset('StreamIcon', ['fab', 'twitch']);
 Icon.THIRD_PLACE = makePreset('ThirdPlaceIcon', 'award');
+Icon.TIME_REVERSE = makePreset('TimeReverseIcon', 'clock-rotate-left');
 Icon.TWITCH = makePreset('TwitchIcon', ['fab', 'twitch']);
 Icon.UNKNOWN = makePreset('UnknownIcon', 'square-question');
 Icon.UNLOCKED = makePreset('UnlockedIcon', 'lock-open');

diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 2ce6d9ffccaaaa4097d27404ac42bf891b966eab..d98854954995da20c6d06a312e7be4648136d6d2 100644 (file)
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -191,6 +191,8 @@ export default {
                        ongoing: 'Laufende Veranstaltungen',
                        past: 'Vergangene Veranstaltungen',
                        pastEpisodes: 'Vergangene Rennen',
+                       setFutureMode: 'Anstehende Rennen zeigen',
+                       setPastMode: 'Vergangene Rennen zeigen',
                        start: 'Start',
                        upcomingEpisodes: 'Anstehende Rennen',
                },

diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index d579008800f774ba661dc646809bdd5e589c8653..75b558eb87a527674144f95ffaaf04e0bbbf748b 100644 (file)
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -191,6 +191,8 @@ export default {
                        ongoing: 'Ongoing events',
                        past: 'Past events',
                        pastEpisodes: 'Past races',
+                       setFutureMode: 'Show upcoming races',
+                       setPastMode: 'Show past races',
                        start: 'Start',
                        upcomingEpisodes: 'Upcoming races',
                },

diff --git a/resources/js/pages/Event.js b/resources/js/pages/Event.js
index fa5dc2163c30c3432356857dbfa330fa153c28ff..fd97ae5be77877b3402f9eff0269516bcfea14c3 100644 (file)
--- a/resources/js/pages/Event.js
+++ b/resources/js/pages/Event.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import moment from 'moment';
 import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Button, Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -11,6 +11,7 @@ import NotFound from './NotFound';
 import CanonicalLinks from '../components/common/CanonicalLinks';
 import ErrorBoundary from '../components/common/ErrorBoundary';
 import ErrorMessage from '../components/common/ErrorMessage';
+import Icon from '../components/common/Icon';
 import Loading from '../components/common/Loading';
 import EpisodeList from '../components/episodes/List';
 import Detail from '../components/events/Detail';
@@ -35,6 +36,7 @@ export const Component = () => {
 
        const [editContent, setEditContent] = React.useState(null);
        const [episodes, setEpisodes] = React.useState([]);
+       const [pastMode, setPastMode] = React.useState(false);
        const [showContentDialog, setShowContentDialog] = React.useState(false);
 
        const actions = React.useMemo(() => ({
@@ -55,6 +57,10 @@ export const Component = () => {
                if (hasConcluded(event)) {
                        params.limit = 25;
                        params.reverse = '1';
+               } else if (pastMode) {
+                       params.before = moment().add(3, 'hours').toISOString();
+                       params.limit = 25;
+                       params.reverse = '1';
                } else {
                        params.after = moment().subtract(3, 'hours').toISOString();
                        params.before = moment().add(14, 'days').toISOString();
@@ -69,7 +75,7 @@ export const Component = () => {
                                console.error(e);
                        }
                });
-       }, []);
+       }, [pastMode]);
 
        const saveContent = React.useCallback(async values => {
                try {
@@ -149,12 +155,26 @@ export const Component = () => {
                <Container>
                        <Detail actions={actions} event={event} />
                        {episodes.length ? <>
-                               <h2 className="mt-4">
-                                       {t(hasConcluded(event)
-                                               ? 'events.pastEpisodes'
-                                               : 'events.upcomingEpisodes'
-                                       )}
-                               </h2>
+                               <div className="d-flex align-items-center justify-content-between">
+                                       <h2 className="mt-4">
+                                               {t(pastMode || hasConcluded(event)
+                                                       ? 'events.pastEpisodes'
+                                                       : 'events.upcomingEpisodes'
+                                               )}
+                                       </h2>
+                                       <div className="button-bar">
+                                               {!hasConcluded(event) ?
+                                                       <Button
+                                                               className="ms-3"
+                                                               onClick={() => setPastMode(!pastMode)}
+                                                               title={t(pastMode ? 'events.setFutureMode' : 'events.setPastMode')}
+                                                               variant="outline-secondary"
+                                                       >
+                                                               <Icon.TIME_REVERSE title="" />
+                                                       </Button>
+                                               : null}
+                                       </div>
+                               </div>
                                <EpisodeList episodes={episodes} />
                        </> : null}
                </Container>