Admin frontend page

scoreboard/controllers/timer.js

@@ -2,10 +2,8 @@ const moment = require('moment');
 const io = require('./socketio')
 
 let timerInterval;
-// let duration = moment.duration(7, 'minutes');        // Initial duration
+let duration = moment.duration(7, 'minutes');        // Initial duration
-// let durationLeft = moment.duration(7, 'minutes');    // durationLeft after the timer has been started
+let durationLeft = moment.duration(7, 'minutes');    // durationLeft after the timer has been started
-let duration = moment.duration(7, 'seconds');
-let durationLeft = moment.duration(10, 'seconds');
 
 let isPaused = true;                                    // Status of the timer
 
@@ -15,29 +13,38 @@ function pause() {};
 function reset() {};
 function end() {};
 function print() {};
-
+function getValues() {};
 
 function start() {
-    if(isPaused == true)
+    if(isPaused == true && durationLeft.asSeconds() != 0) {     // Only allow start if timer ist currently paused and durationLeft is not 0 seconds
-    {
+        console.log("Timer gestartet")
-        isPaused = false
+        isPaused = false                                        // Set status of the timer
     
         timerInterval = setInterval(() => {                     // Create Intervalfunction every 1000ms
+            durationLeft.subtract(1, 'second');                 // Subtract a second from from the timer
             console.log(print());                               // Print durationLeft
             io.sockets.emit('timerDurationLeft', print())       // Emit durationLeft to all connected sockets
-            if(durationLeft.minutes() == 0 && durationLeft.seconds() == 0)      // End timer if durationLeft == 00:00
+            if(durationLeft.asSeconds() == 0)                   // End timer if durationLeft == 00:00
                 end()
-            durationLeft.subtract(1, 'second');                 // Subtract a second from from the timer
         }, 1000);
-    }
+        return true
+    } else
+        return false
 }
 
 function pause() {
+    if(!isPaused) {
+        console.log("Timer pausiert");
         isPaused = true;                    // Set status of the timer
         clearInterval(timerInterval);       // End the execution
+        return true
+    } else
+        return false
 }
 
-function reset() {
+function reset(newDuration) {
+    console.log("Timer Zurückgesetzt");
+    duration = moment.duration(newDuration, 'seconds').clone();     // Set initial duration to received duration in seconds
     durationLeft = duration.clone();                // Set durationLeft to the initial duration
     io.sockets.emit('timerDurationLeft', print())   // Emit durationLeft to all connected sockets
 }
@@ -48,13 +55,21 @@ function end() {
     io.sockets.emit('timerEnded', print())          // Emit end to all connected sockets
 }
 
-function print()
+function print() {
-{
     var minutes = (durationLeft.minutes() < 10) ? "0" + durationLeft.minutes() : durationLeft.minutes();        // Create leading zeros for numbers <10
     var seconds = (durationLeft.seconds() < 10) ? "0" + durationLeft.seconds() : durationLeft.seconds();        // Create leading zeros for numbers <10
     return minutes + ":" + seconds
 }
 
-module.exports = {
+function getValues() {
-    duration, durationLeft, isPaused, start, pause, reset, end, print
+    return {
+        isPaused: isPaused,
+        duration: duration,
+        durationLeft: durationLeft,
+        print: print()
     };
+}
+
+module.exports = {
+    duration, durationLeft, isPaused, start, pause, reset, end, print, getValues
+}

scoreboard/public/javascripts/admin.js

@@ -1,11 +1,83 @@
+let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
+const socket = io(wss);                                 // Connect to socketio server
 
-function timerStart()
+socket.on('connected', (message) => {                   // Once client is connected to websocket
-{
+    console.log("Connected");
-    fetch("/admin/timerStart", {
+    initialUpdate()                                     // Request important values to update admin frontend
-        method: "POST",
+});
-        headers: {'Content-Type': 'text/html'},
+
-        body: ""
+socket.on('timerDurationLeft', (message) => {
-    }).then(res => {
+    console.log(message)                                                // Log durationLeft in client console
-        console.log(res);
+    document.getElementById("durationLeft").innerHTML = message;        // Display durationLeft in corresponding html Element
-    })
+});
+
+socket.on('timerEnded', (message) => {
+    initialUpdate();                                                    // Update admin frontend to set correct buttonstatus
+});
+
+function updateFrontend(values) {
+    values.duration = moment.duration(values.duration)                  // Create moment object from ISO 8601 string
+    values.durationLeft = moment.duration(values.durationLeft)          // Create moment object from ISO 8601 string
+    document.getElementById("durationLeft").innerHTML = values.print    // Display durationLeft as prettyfied string
+
+    if(values.isPaused) {                                               // Set button state depending on timer status
+        document.getElementById("timerStartBtn").disabled = false
+        document.getElementById("timerPauseBtn").disabled = true
+    } else {
+        document.getElementById("timerStartBtn").disabled = true
+        document.getElementById("timerPauseBtn").disabled = false
+    }
+}
+
+async function initialUpdate() {
+    const response = await fetch("/admin/timerGetValues");  // Call API Endpoint /admin/timerGetValues
+    const data = await response.json();                     // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+    console.log(data);                                      // Print received data
+    updateFrontend(data);                                   // Update admin frontend with received values
+}
+
+// Timerfunctions
+async function timerStart() {
+    const response = await fetch("/admin/timerStart");      // Call API Endpoint /admin/timerStart
+    if(response.status == 200) {
+        const data = await response.json();                 // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+        console.log(data);                                  // Print received data
+        updateFrontend(data);                               // Update admin frontend with received values
+    } else {
+        //console.log("Error, Timer bereits abgelaufen: ", response.status);
+        const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast"));  // Create toast instance byId timerStartErrorToast
+        timerStartErrorToast.show();                        // Show error toast
+    }
+}
+
+async function timerPause() {
+    const response = await fetch("/admin/timerPause");      // Call API Endpoint /admin/timerStart
+    if(response.status == 200) {
+        const data = await response.json();                 // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+        console.log(data);                                  // Print received data
+        updateFrontend(data);                               // Update admin frontend with received values
+    } else {
+        //console.log("Error, Timer bereits pausiert: ", response.status);
+        const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast"));  // Create toast instance byId timerStartErrorToast
+        timerPauseErrorToast.show();                        // Show error toast
+    }
+}
+
+async function timerReset() {
+    let newDuration = document.getElementById("timerSelectDuration").value;
+    const response = await fetch("/admin/timerReset", {     // Call API Endpoint /admin/timerStart with selected new duration in seconds
+        method: 'POST',
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({duration: newDuration})
+    });
+    const data = await response.json();                     // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+    console.log(data);                                      // Print received data
+    updateFrontend(data);                                   // Update admin frontend with received values
+}
+
+// Scoreboardfunctions
+async function scoreSwitch() {
+    const response = await fetch("/admin/scoreSwitch");     // Call API Endpoint /admin/timerStart
+    const data = await response.json();                     // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+    console.log(data);                                      // Print received data
 }

scoreboard/public/javascripts/index.js

@@ -11,5 +11,5 @@ socket.on('timerDurationLeft', (message) => {
 });
 
 socket.on('timerEnded', (message) => {
-    document.getElementById("durationLeft").innerHTML = "STOP";     // Display "STOP" in same html element as the duration
+    document.getElementById("durationLeft").innerHTML = "ENDE";     // Display "STOP" in same html element as the duration
 });

scoreboard/public/stylesheets/fontawesome/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

scoreboard/public/stylesheets/seven-segment.css

@@ -1 +1 @@
-@font-face{font-family:seven segment;font-style:normal;font-weight:400;src:local('Seven Segment'),url('fonts/Seven\ Segment.woff') format('woff')}
+@font-face{font-family:seven segment;font-style:normal;font-weight:400;src:local('Seven Segment'),url('webfonts/Seven\ Segment.woff') format('woff')}

scoreboard/public/stylesheets/style.css

@@ -6,6 +6,7 @@ html, body {
 body {
   /* padding: 50px; */
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  background-color: #47BAEA;
 }
 
 a {
@@ -17,7 +18,8 @@ a {
   font-family: 'Seven Segment', sans-serif;
   font-weight: bold;
   height: 100%;
-  font-size: 50vh
+  font-size: 50vh;
+  
 }
 
 .score {

scoreboard/routes/admin.js

@@ -1,29 +1,49 @@
 var express = require('express');
 var router = express.Router();
 
-let timer = require('../controllers/timer');
+var timer = require('../controllers/timer');
 
-router.post('/timerStart', function(req, res, next) {
+// Express router entpoint to start the timer
-  console.log("Timer gestartet");
+router.get('/timerStart', function(req, res, next) {
-  timer.start()
+    if(timer.start()) {                     // If successfully started the timer
-  res.render('admin');
+        res.status(200);                    // Set http status code to 200 (success)
+        res.json(timer.getValues());        // Respond with all important values to update the frontend
+    } else {                                // If not successfull, for example because timer is already running or not time is left
+        res.status(406);                    // Set http status code to 406 (not acceptable)
+        res.send();                         // Respond with empty payload
+    }
 });
 
+// Express router endpoint to pause the timer
+router.get('/timerPause', function(req, res, next) {
+    if(timer.pause()) {                     // If successfully paused the timer
+        res.status(200);                    // Set http status code to 200 (success)
+        res.json(timer.getValues());        // Respond with all important values to update the frontend
+    } else {                                // If not successfull, for example if timer already is paused
+        res.status(406);                    // Set http status code to 406 (not acceptable)
+        res.send();                         // Respond with empty payload
+    }
+});
+
+// Express router endpoint to reset the timer
 router.post('/timerReset', function(req, res, next) {
-  console.log("Timer Zurückgesetzt");
+    timer.reset(req.body.duration);         // Reset the timer with the duration in seconds received from the request
-  timer.reset();
+    res.json(timer.getValues());            // Respond with all important values to update the frontend
-  res.render('admin');
 });
 
-router.post('/timerPause', function(req, res, next) {
+// Express router endpoint to switch the score after halftime
-  console.log("Timer pausiert");
+router.get('/timerGetValues', function(req, res, next) {
-  timer.pause();
+    res.json(timer.getValues());            // Respond with important values for frontend
+});
+
+// Express router endpoint to switch the score after halftime
+router.get('/scoreSwitch', function(req, res, next) {
     res.render('admin');
 });
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('admin', {});
+    res.render('admin');
 });
 
 

scoreboard/routes/index.js

@@ -3,9 +3,6 @@ var router = express.Router();
 let io = require('../controllers/socketio')
 const timer = require('../controllers/timer')
 
-
-
-
 /* GET home page. */
 router.get('/', function(req, res, next) {
     res.render('index', { durationLeft: timer.print()});
@@ -18,8 +15,6 @@ io.on('connection', (socket) => {
     socket.on('message', (message) => {
       console.log(message)
     })
-
-
 })
 
 

scoreboard/views/admin.hbs

@@ -4,27 +4,170 @@
     <title>Scoreboard Admin</title>
     <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
     <link rel='stylesheet' href='/stylesheets/style.css' />
+
+    <link href="/stylesheets/fontawesome/fontawesome.min.css" rel="stylesheet" />
+    <link href="/stylesheets/fontawesome/brands.min.css" rel="stylesheet" />
+    <link href="/stylesheets/fontawesome/solid.min.css" rel="stylesheet" />
   </head>
-  <body>
+  <body onload="initialUpdate()">
-    Interface zur Bedienung des Zeit-/Scoreboards.
+    <div class="container">
+
+      <div class="row justify-content-center">
+        <div class="col-sm-12 col-md-4">
+          <div class="card text-center">
+            <div class="card-body">
+              <h1 id="durationLeft"></h1>
+            </div>
+          </div>
+        </div>
+      </div>
+      </br>
       <div class="row">
-      <div class="col-lg-4">
+        <div class="col-sm-12 col-md-4">
-        <form method="post" action="/admin/timerStart">
+          <div class="card text-center">
-          <button class="btn btn-lg btn-success" type="submit" name="startButton">Start</button>
+            <div class="card-body">
-        </form>
+              <button class="btn btn-lg btn-success" onclick="timerStart()" id="timerStartBtn"><i class="fa-solid fa-play"></i> Start</button>
+              <button class="btn btn-lg btn-warning" onclick="timerPause()" id="timerPauseBtn"><i class="fa-solid fa-pause"></i> Pause</button>
             </div>
-      <div class="col-lg-4">
-        <form method="post" action="/admin/timerPause">
-          <button class="btn btn-lg btn-warning" type="submit" name="pauseButton">Pause</button>
-        </form>
           </div>
-      <div class="col-lg-4">
-        <form method="post" action="/admin/timerReset">
-          <button class="btn btn-lg btn-danger" type="submit" name="resetButton">Reset</button>
-        </form>
         </div>
+
+        <div class="col-sm-12 col-md-4">
+          <div class="card text-center">
+            <div class="card-body">
+              <div class="btn-group" role="group" aria-label="Basic example">
+                <button type="button" class="btn btn-secondary">-1m</button>
+                <button type="button" class="btn btn-secondary">-10s</button>
+                <button type="button" class="btn btn-secondary">-1s</button>
+                <button type="button" class="btn btn-secondary">+1s</button>
+                <button type="button" class="btn btn-secondary">+10s</button>
+                <button type="button" class="btn btn-secondary">+1m</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-sm-12 col-md-4">
+          <div class="card text-center">
+            <div class="card-body">
+              <button class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#timerResetModal">
+                <i class="fa-solid fa-rotate-right"></i> Zurücksetzen
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      </br></br></br></br></br></br>
+
+      <div class="row text-center">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <button class="btn btn-lg btn-danger" onclick="scoreSwitch()"><i class="fa-solid fa-rotate"></i> Seitenwechsel</button>
+        </div>
+      </div>
+
     </div>
   </body>
   <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
+  <script src="/javascripts/socket.io.min.js"></script>
+  <script src="/javascripts/moment.js"></script>
   <script src="/javascripts/admin.js"></script>
+
+  <!-- Modal -->
+  <div class="modal fade" id="timerResetModal" tabindex="-1" aria-labelledby="timerResetModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="timerResetModalLabel">Timer zurücksetzen?</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Möchtest du den Timer wirklich zurücksetzen?</p>
+          <p>Gewünschte Zeit: 
+          <select class="form-select" id="timerSelectDuration" aria-label="Default select example">
+            <option value="0">0:00</option>
+            <option value="15">0:15</option>
+            <option value="30">0:30</option>
+            <option value="45">0:45</option>
+            <option value="60">1:00</option>
+            <option value="75">1:15</option>
+            <option value="90">1:30</option>
+            <option value="105">1:45</option>
+            <option value="120">2:00</option>
+            <option value="135">2:15</option>
+            <option value="150">2:30</option>
+            <option value="165">2:45</option>
+            <option value="180">3:00</option>
+            <option value="195">3:15</option>
+            <option value="210">3:30</option>
+            <option value="225">3:45</option>
+            <option value="240">4:00</option>
+            <option value="255">4:15</option>
+            <option value="270">4:30</option>
+            <option value="285">4:45</option>
+            <option value="300">5:00</option>
+            <option value="315">5:15</option>
+            <option value="330">5:30</option>
+            <option value="345">5:45</option>
+            <option value="360">6:00</option>
+            <option value="375">6:15</option>
+            <option value="390">6:30</option>
+            <option value="405">6:45</option>
+            <option selected value="420">7:00</option>
+            <option value="435">7:15</option>
+            <option value="450">7:30</option>
+            <option value="465">7:45</option>
+            <option value="480">8:00</option>
+            <option value="495">8:15</option>
+            <option value="510">8:30</option>
+            <option value="525">8:45</option>
+            <option value="540">9:00</option>
+            <option value="555">9:15</option>
+            <option value="570">9:30</option>
+            <option value="585">9:45</option>
+            <option value="600">10:00</option>
+          </select>
+          </p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="timerReset()">Zurücksetzen</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Modal -->
+
+  <!-- Timer start error toast -->
+  <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div id="timerStartErrorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-header">
+        <i class="fa-solid fa-triangle-exclamation"> </i>
+        <strong class="me-auto">  Fehler</strong>
+        <small></small>
+        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
+      <div class="toast-body">
+        Der Timer ist bereits abgelaufen. Zum neustarten bitte zurücksetzen!
+      </div>
+    </div>
+  </div>
+  <!-- Timer start error toast -->
+
+  <!-- Timer pause error toast -->
+  <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div id="timerPauseErrorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-header">
+        <i class="fa-solid fa-triangle-exclamation"> </i>
+        <strong class="me-auto">  Fehler</strong>
+        <small></small>
+        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
+      <div class="toast-body">
+        Der Timer ist bereits pausiert.
+      </div>
+    </div>
+  </div>
+  <!-- Timer pause error toast -->
 </html>
+

scoreboard/views/index.hbs

@@ -8,19 +8,19 @@
   </head>
   <body>
 
-    <div class="d-flex flex-column align-items-center justify-content-center box-time" style="background-color:brown; ">
+    <div class="d-flex flex-column align-items-center justify-content-center box-time">
       <div id="durationLeft" class="durationLeft">{{ durationLeft }}</div>
     </div>
 
-    <div class="d-flex flex-sm-wrap flex-md-wrap text-center align-items-center justify-content-around box-etc" style="background-color:blueviolet;">
+    <div class="d-flex flex-sm-wrap flex-md-wrap text-center align-items-center justify-content-around box-etc">
-      <div style="background-color:crimson;" class="flex-fill order-sm-1 order-md-1 order-lg-0">
+      <div class="flex-fill order-xs-1 order-sm-1 order-md-1 order-lg-0">
-        <h1>L<br/>LLLLLLLLLLLLLL<br/>L<br/></h>
+        <h1>Team A</h>
       </div>
-      <div style="background-color: darkgreen" class="flex-fill order-sm-0 order-md-0 order-lg-1">
+      <div class="flex-fill order-xs-0 order-sm-0 order-md-0 order-lg-1">
         <div id="score" class="score">5:2</div>
       </div>
-      <div style="background-color:coral" class="flex-fill order-sm-2 order-md-2 order-lg-2">
+      <div class="flex-fill order-xs-2 order-sm-2 order-md-2 order-lg-2">
-        <h1>R<br/>R<br/>RRRRRRRRRRRRR<br/></h>
+        <h1>Team B</h>
       </div>
     </div>