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
-    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
+// 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("Send request to refresh the monitor");
 }
 
 // Timerfunctions

scoreboard/public/javascripts/index.js

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

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%
+  }
+}