Add timer to normal tournament page as well

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);

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>
+    );
 }

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
     };
 }
 

js/redux/tournamentInfo.js

@@ -25,5 +25,5 @@ export const defaultStateTournamentinfo = {
     isPublic: '',
     stages: [],
     teams: []
+    // date: null
 };
-

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);
         });