From 6455a3c0873bd355d8607dcf5c604e6a50cd22c0 Mon Sep 17 00:00:00 2001
From: Malaber <git@schaedler.rocks>
Date: Thu, 13 Mar 2025 16:46:03 +0100
Subject: [PATCH] Add timer to normal tournament page as well

---
 js/components/Timer.js              |  2 +-
 js/components/TournamentBigImage.js | 36 ++++++++++++++++++-----------
 js/redux/tournamentApi.js           | 10 ++++++--
 js/redux/tournamentInfo.js          |  2 +-
 pages/tournament-fullscreen.js      | 10 +++-----
 5 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/js/components/Timer.js b/js/components/Timer.js
index 84a31fb..18c9071 100644
--- a/js/components/Timer.js
+++ b/js/components/Timer.js
@@ -15,7 +15,7 @@ export function Timer({timerEnd}) {
     }, [timerEnd]);
 
     const formatTimeLeft = timeLeft => {
-        if (timeLeft === null) return '';
+        if (timeLeft === 0) return 'Spiel vorbei!';
         const hours = Math.floor(timeLeft / (1000 * 60 * 60));
         const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
         const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
diff --git a/js/components/TournamentBigImage.js b/js/components/TournamentBigImage.js
index 1e74603..b11e831 100644
--- a/js/components/TournamentBigImage.js
+++ b/js/components/TournamentBigImage.js
@@ -1,22 +1,30 @@
 import {Container, ListGroup, ListGroupItem} from 'reactstrap';
 import React from 'react';
+import {Timer} from './Timer';
 
 export function TournamentBigImage(props) {
-    return (<div className="big-image mb-0">
-        <h2 className="display-1">{props.name}</h2>
-        <Container>
-            <TournamentProperties {...props}/>
-        </Container>
-    </div>);
+    return (
+        <div className="big-image mb-0">
+            <h2 className="display-1">{props.name}</h2>
+            <Container>
+                <TournamentProperties {...props}/>
+            </Container>
+        </div>
+    );
 }
 
 function TournamentProperties(props) {
-    return (<ListGroup className='text-dark text-start shadow'>
-        {props.description && <ListGroupItem>{props.description}</ListGroupItem>}
-        <ListGroupItem>
-            {props.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
-        </ListGroupItem>
-        <ListGroupItem>Turnier-Code: <b>{props.code}</b></ListGroupItem>
-        <ListGroupItem>von <b>{props.ownerUsername}</b></ListGroupItem>
-    </ListGroup>);
+    return (
+        <ListGroup className="text-dark text-start shadow">
+            {props.description && <ListGroupItem>{props.description}</ListGroupItem>}
+            <ListGroupItem>
+                {props.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
+            </ListGroupItem>
+            <ListGroupItem>Turnier-Code: <b>{props.code}</b></ListGroupItem>
+            <ListGroupItem>von <b>{props.ownerUsername}</b></ListGroupItem>
+            {props.timerEnd &&
+                <ListGroupItem>Spielzeit: <Timer timerEnd={props.timerEnd} /></ListGroupItem>
+            }
+        </ListGroup>
+    );
 }
diff --git a/js/redux/tournamentApi.js b/js/redux/tournamentApi.js
index bda2da6..0039cbd 100644
--- a/js/redux/tournamentApi.js
+++ b/js/redux/tournamentApi.js
@@ -49,7 +49,12 @@ export function getTournamentMatches(tournamentId, successCallback, errorCallbac
 export function getTournamentTimerEnd(tournamentId, successCallback, errorCallback) {
     getRequest(getState(), '/tournaments/' + tournamentId + '/timer_end')
         .then(response => {
-            const timerEndDate = new Date(response.data.timer_end);
+            let timerEndDate;
+            if (response.data.timer_end === null) {
+                timerEndDate = null;
+            } else {
+                timerEndDate = new Date(response.data.timer_end);
+            }
             successCallback(response.status, timerEndDate);
         })
         .catch(errorCallback);
@@ -75,7 +80,8 @@ function convertTournament(apiTournament) {
         isPublic: apiTournament.public,
         ownerUsername: apiTournament.owner_username,
         groupStage: groupStage,
-        playoffStages: playoffStages
+        playoffStages: playoffStages,
+        timerEnd: apiTournament.timer_end ? new Date(apiTournament.timer_end) : null
     };
 }
 
diff --git a/js/redux/tournamentInfo.js b/js/redux/tournamentInfo.js
index b93f325..f3773a6 100644
--- a/js/redux/tournamentInfo.js
+++ b/js/redux/tournamentInfo.js
@@ -25,5 +25,5 @@ export const defaultStateTournamentinfo = {
     isPublic: '',
     stages: [],
     teams: []
+    // date: null
 };
-
diff --git a/pages/tournament-fullscreen.js b/pages/tournament-fullscreen.js
index 2849c29..939a9d6 100644
--- a/pages/tournament-fullscreen.js
+++ b/pages/tournament-fullscreen.js
@@ -62,7 +62,8 @@ function FullscreenPageHeader(props) {
             <FilterDropdown {...props.filter} />
             <NavbarBrand>{props.title}</NavbarBrand>
             {props.timerEnd &&
-                <div className="ml-auto">Spielzeit: <NavbarBrand><Timer timerEnd={props.timerEnd}/></NavbarBrand></div>}
+                <div className="ml-auto">Spielzeit: <NavbarBrand><Timer timerEnd={props.timerEnd}/></NavbarBrand></div>
+            }
         </Navbar>
     );
 }
@@ -127,12 +128,7 @@ class Main extends React.Component {
     updateTimerEnd() {
         const tournamentId = this.props.query.code;
         getTournamentTimerEnd(tournamentId, (status, timerEnd) => {
-            const now = new Date();
-            if (timerEnd > now) {
-                this.setState({timerEnd: timerEnd});
-            } else {
-                this.setState({timerEnd: null});
-            }
+            this.setState({timerEnd: timerEnd});
         }, error => {
             console.error('Failed to fetch timer end:', error);
         });