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