From bf7942079bd5ca0b42e19c596238afe585c18c2d Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sun, 25 May 2025 11:41:39 +0200
Subject: [PATCH] add past/future toggle to event page

---
 resources/js/components/common/Icon.js |  1 +
 resources/js/i18n/de.js                |  2 ++
 resources/js/i18n/en.js                |  2 ++
 resources/js/pages/Event.js            | 36 ++++++++++++++++++++------
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js
index 56d5862..84c6d11 100644
--- 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 2ce6d9f..d988549 100644
--- 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 d579008..75b558e 100644
--- 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 fa5dc21..fd97ae5 100644
--- 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>
-- 
2.39.5