Refresh function for main frontend, separate main frontends for normal countdown and score+countdown

scoreboard/public/javascripts/admin.js

@@ -30,10 +30,11 @@ function updateFrontend(values) {
 }
 
 async function initialUpdate() {
-    const response = await fetch("/admin/timerGetValues");  // Call API Endpoint /admin/timerGetValues
+// Request monitor refresh for index frontend
+async function refreshMonitor() {
+    const response = await fetch("/admin/refreshMonitor");      // 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
+    console.log("Send request to refresh the monitor");
-    updateFrontend(data);                                   // Update admin frontend with received values
 }
 
 // Timerfunctions

scoreboard/public/javascripts/index.js

@@ -13,3 +13,7 @@ socket.on('timerDurationLeft', (message) => {
 socket.on('timerEnded', (message) => {
     document.getElementById("durationLeft").innerHTML = "ENDE";     // Display "STOP" in same html element as the duration
 });
+
+socket.on('refresh', (message) => {
+    document.location.reload()                                      // Reload page on received 'refresh' messagen
+});

scoreboard/public/javascripts/indexScore.js

@@ -0,0 +1,41 @@
+let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
+const socket = io(wss);                                 // Connect to socketio server
+
+socket.on('connected', (message) => {
+    console.log("Connected");
+})
+
+socket.on('timerDurationLeft', (message) => {
+    console.log(message)                                            // Log durationLeft in client console
+    document.getElementById("durationLeft").innerHTML = message;    // Display durationLeft in corresponding html Element
+});
+
+socket.on('timerEnded', (message) => {
+    document.getElementById("durationLeft").innerHTML = "ENDE";     // Display "STOP" in same html element as the duration
+});
+
+socket.on('refresh', (message) => {
+    document.location.reload()                                      // Reload page on received 'refresh' messagen
+});
+
+socket.on('score', (message) => {
+    console.log(message)                                            // Log score in client console
+    document.getElementById("score").innerHTML = message;           // Display score in corresponding html Element
+});
+
+// Update DOM score elements from passed values
+function updateScoreFrontend(values) {
+    document.getElementById("score").innerHTML = values.print;      // Set switch status to received score enabled value
+}
+
+async function initialUpdate() {
+    scoreGetValues();
+}
+
+// Request important values for score
+async function scoreGetValues() {
+    const response = await fetch("/admin/scoreGetValues");  // Call API Endpoint /admin/scoreGetValues
+    const data = await response.json();                     // Wait for asynchronous transfer to complete and parse json (which got received by backend)
+    console.log(data);                                      // Print received data
+    updateScoreFrontend(data);                              // Update admin frontend with received values for scoreboard
+}

scoreboard/public/stylesheets/index.css

@@ -1,55 +1,41 @@
 html, body {
     height: 100%
-}
+  }
   
-body {
+  body {
     /* padding: 50px; */
     font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
     background-color: #47BAEA;
-}
+  }
   
-a {
+  a {
     color: #00B7FF;
-}
+  }
   
-.durationLeft {
+  .durationLeft {
     font-family: 'Seven Segment', sans-serif;
     font-weight: bold;
     height: 100%;
-  font-size: 50vh;
+    font-size: 100vh;
     
-}
+  }
 
-.score {
-  font-family: 'Seven Segment', sans-serif;
-  font-weight: bold;
-  font-size: 50vh
-}
   
-@media ( min-width: 768px ) {
+  @media ( min-width: 768px ) {
     .box-time {
-    height:25%
+      height:100%
     }
   
     .durationLeft {
-    font-size: 18vh
+      font-size: 15vh
     }
   
-  .box-etc {
+  @media ( min-width: 992px ) {
-    height: 75%
-  }
-}
-
-@media ( min-width: 992px ) {
     .box-time {
-    height:50%
+      height:100%
     }
   
     .durationLeft {
-    font-size: 48vh
+      font-size: 96vh
     }
-
-  .box-etc {
-    height: 50%
   }
-}

scoreboard/public/stylesheets/indexScore.css

@@ -0,0 +1,55 @@
+html, body {
+  height: 100%
+}
+
+body {
+  /* padding: 50px; */
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  background-color: #47BAEA;
+}
+
+a {
+  color: #00B7FF;
+}
+
+.durationLeft {
+  font-family: 'Seven Segment', sans-serif;
+  font-weight: bold;
+  height: 100%;
+  font-size: 50vh;
+  
+}
+
+.score {
+  font-family: 'Seven Segment', sans-serif;
+  font-weight: bold;
+  font-size: 50vh
+}
+
+@media ( min-width: 768px ) {
+  .box-time {
+    height:25%
+  }
+
+  .durationLeft {
+    font-size: 18vh
+  }
+
+  .box-etc {
+    height: 75%
+  }
+}
+
+@media ( min-width: 992px ) {
+  .box-time {
+    height:50%
+  }
+
+  .durationLeft {
+    font-size: 48vh
+  }
+
+  .box-etc {
+    height: 50%
+  }
+}

scoreboard/routes/admin.js

@@ -1,7 +1,13 @@
 var express = require('express');
 var router = express.Router();
-
+const io = require('../controllers/socketio');
-var timer = require('../controllers/timer');
+// Express router endpoint to trigger a frontend refresh on all connected sockets
+router.get('/refreshMonitor', function(req, res, next) {
+    console.log("Monitor neu geladen");
+    io.sockets.emit('refresh', "");         // Emit refresh to all connected sockets over websockets
+    res.status(200);                        // Set http status code to 200 (success)
+    res.send();                             // send empty response
+});
 
 // Express router entpoint to start the timer
 router.get('/timerStart', function(req, res, next) {

scoreboard/routes/index.js

@@ -1,11 +1,19 @@
 var express = require('express');
 var router = express.Router();
-let io = require('../controllers/socketio')
+let io = require('../controllers/socketio');
-const timer = require('../controllers/timer')
+const timer = require('../controllers/timer');
+const score = require('../controllers/score');
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-    res.render('index', { durationLeft: timer.print()});
+  if (score.getEnabled()) {                                      // If scoreboard is enabled
+    res.render('indexScore', { 
+      title: "Timer and Score",
+      durationLeft: timer.print(),
+    });
+  } else {                                                      // If scoreboard is not enabled
+    res.render('index', { title: "Timer", durationLeft: timer.print()})
+  }
 });
 
 io.on('connection', (socket) => {

scoreboard/views/index.hbs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Counter</title>
+    <title>{{ title }}</title>
     <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
     <link rel='stylesheet' href='/stylesheets/index.css' />
     <link rel='stylesheet' href='/stylesheets/seven-segment.css' />
@@ -12,18 +12,6 @@
       <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">
-      <div class="flex-fill order-xs-1 order-sm-1 order-md-1 order-lg-0">
-        <h1>Team A</h>
-      </div>
-      <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 class="flex-fill order-xs-2 order-sm-2 order-md-2 order-lg-2">
-        <h1>Team B</h>
-      </div>
-    </div>
-
   </body>
   <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
   <script src="/javascripts/socket.io.min.js"></script>

scoreboard/views/indexScore.hbs

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{ title }}</title>
+    <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
+    <link rel='stylesheet' href='/stylesheets/indexScore.css' />
+    <link rel='stylesheet' href='/stylesheets/seven-segment.css' />
+  </head>
+  <body onload="initialUpdate()">
+
+    <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">
+      <div class="flex-fill order-xs-1 order-sm-1 order-md-1 order-lg-0">
+        <h1 id="scoreTeamA">Team A</h>
+      </div>
+      <div class="flex-fill order-xs-0 order-sm-0 order-md-0 order-lg-1">
+        <div id="score" class="score"></div>
+      </div>
+      <div class="flex-fill order-xs-2 order-sm-2 order-md-2 order-lg-2">
+        <h1 id="scoreTeamB">Team B</h>
+      </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/indexScore.js"></script>
+</html>