Cleanup, comments, removed ejs stuff

scoreboard/public/javascripts/admin.js

@@ -1,13 +1,16 @@
 let wss = "ws://" + window.location.hostname + ":3001"                  // Build socketio endpoint from window.location
 const socket = io(wss);                                                 // Connect to socketio server
 
+// ######################################################################################################################################################
+// Websockets event handler
+// ######################################################################################################################################################
+
 socket.on('connected', (message) => {                                   // Once client is connected to websocket
     console.log("Connected");
-    initialUpdate()                                     // Request important values to update admin frontend
 });
 
 socket.on('timerDurationLeft', (message) => {
-    console.log(message)                                                // Log durationLeft in client console
+    console.log(message);                                               // Log durationLeft in client console
     document.getElementById("durationLeft").innerHTML = message;        // Display durationLeft in corresponding html Element
 });
 
@@ -16,29 +19,35 @@ socket.on('timerEnded', (message) => {
 });
 
 socket.on('score', (message) => {
-    console.log(message)                                            // Log score in client console
+    console.log(message);                                               // Log score in client console
     document.getElementById("score").innerHTML = message;               // Display score in corresponding html Element
 });
 
+// ######################################################################################################################################################
+// General functions
+// ######################################################################################################################################################
+
 // Update DOM timer elements from passed values
 function updateTimerFrontend(values) {
-    values.duration = moment.duration(values.duration)                  // Create moment object from ISO 8601 string
+    console.log(values);                                                // Print received data
-    values.durationLeft = moment.duration(values.durationLeft)          // Create moment object from ISO 8601 string
+    values.duration = moment.duration(values.duration);                 // Create moment object from ISO 8601 string
-    document.getElementById("durationLeft").innerHTML = values.print    // Display durationLeft as prettyfied 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("timerStartBtn").disabled = false;
-        document.getElementById("timerPauseBtn").disabled = true
+        document.getElementById("timerPauseBtn").disabled = true;
     } else {
-        document.getElementById("timerStartBtn").disabled = true
+        document.getElementById("timerStartBtn").disabled = true;
-        document.getElementById("timerPauseBtn").disabled = false
+        document.getElementById("timerPauseBtn").disabled = false;
     }
 }
 
 // Update DOM score elements from passed values
 function updateScoreFrontend(values) {
+    console.log(values);                                                        // Print received data
     document.getElementById("scoreSwitchEnable").checked = values.enabled;      // Set switch status to received score enabled value
-    document.getElementById("score").innerHTML = values.print                   // Set score on admin interface
+    document.getElementById("score").innerHTML = values.print;                  // Set score on admin interface
 }
 
 // Initial update gets called whenever page has been loaded
@@ -50,28 +59,27 @@ async function initialUpdate() {
 // 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)
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
-    console.log("Send request to refresh the monitor");
 }
 
+// ######################################################################################################################################################
 // Timerfunctions
+// ######################################################################################################################################################
+
 // Request important timer values
 async function timerGetValues() {
     const response = await fetch("/admin/timerGetValues");      // Call API Endpoint /admin/timerGetValues
-    const data = await response.json();                         // Wait for asynchronous transfer to complete and parse json (which got received by backend)
+    const data = await response.json();                         // Wait for asynchronous transfer to complete
-    console.log(data);                                          // Print received data
+    updateTimerFrontend(data);                                  // Update admin frontend
-    updateTimerFrontend(data);                                  // Update admin frontend with received values for timerboard
 }
 
 // Request to start the timer
 async function timerStart() {
     const response = await fetch("/admin/timerStart");          // Call API Endpoint /admin/timerStart
     if(response.status == 200) {                                // If request successfull
-        const data = await response.json();                     // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+        const data = await response.json();                     // Wait for asyncronous transfer to complete
-        console.log(data);                                      // Print received data
+        updateTimerFrontend(data);                              // Update admin frontend
-        updateTimerFrontend(data);                              // Update admin frontend with received values
+    } else {                                                    // Timer already finished
-    } 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
     }
@@ -81,12 +89,10 @@ async function timerStart() {
 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)
+        const data = await response.json();                     // Wait for asyncronous transfer to complete
-        console.log(data);                                  // Print received data
+        updateTimerFrontend(data);                              // Update admin frontend
-        updateTimerFrontend(data);                               // Update admin frontend with received values
+    } else {                                                    // Timer already paused
-    } else {
+        const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast"));  // Create toast instance byId timerPauseErrorToast
-        //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
     }
 }
@@ -99,9 +105,8 @@ async function timerReset() {
         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)
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
-    console.log(data);                                      // Print received data
+    updateTimerFrontend(data);                                  // Update admin frontend
-    updateTimerFrontend(data);                              // Update admin frontend with received values
 }
 
 // Request to increase or decrease the timer depending on passed value in seconds
@@ -111,55 +116,50 @@ async function timerIncDec(value) {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({value: value})
     });
-    const data = await response.json();                     // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
-    console.log(data);                                      // Print received data
+    updateTimerFrontend(data);                                  // Update admin frontend
-    updateTimerFrontend(data);                              // Update admin frontend with received values
 }
 
+// ######################################################################################################################################################
 // Scoreboardfunctions
+// ######################################################################################################################################################
+
 // 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)
+    const data = await response.json();                         // Wait for asynchronous transfer to complete
-    console.log(data);                                      // Print received data
+    updateScoreFrontend(data);                                  // Update admin frontend
-    updateScoreFrontend(data);                              // Update admin frontend with received values for scoreboard
 }
 
 // Toggle index page to also show scoreboard
 async function scoreToggle() {
-    console.log(document.getElementById("scoreSwitchEnable").checked)
+    const response = await fetch("/admin/scoreToggle");         // Call API Endpoint /admin/scoreToggle
-    const response = await fetch("/admin/scoreToggle");     // Call API Endpoint /admin/scoreEnable
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
-    const data = await response.json();                     // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+    updateScoreFrontend(data);                                  // Update admin frontend
-    console.log(data);                                      // Print received data
+    refreshMonitor();                                           // Refresh main monitor to display new frontend
-    updateScoreFrontend(data);                              // Update admin frontend with received values for scoreboard
-    refreshMonitor();                                    // Send request to refresh monitor
 }
 
 // Alter the score of passed team in the specified direction
 async function scoreAlterScore(team, dir) {
-    const response = await fetch("/admin/scoreAlterScore", {// Call API Endpoint /admin/scoreAlterScore with the teamname to alter the score in the specified direction
+    const response = await fetch("/admin/scoreAlterScore", {    // Call API Endpoint /admin/scoreAlterScore with the teamname to alter the score in the specified direction
         method: 'POST',
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({team: team, dir: dir})
     });
-    const data = await response.json();                     // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
-    console.log(data);                                      // Print received data
+    updateScoreFrontend(data);                                  // Update admin frontend
-    updateScoreFrontend(data);                              // Update admin frontend with received values
 }
 
 // Switch sides
 async function scoreSwitch() {
-    const response = await fetch("/admin/scoreSwitch");     // Call API Endpoint /admin/timerStart
+    const response = await fetch("/admin/scoreSwitch");         // Call API Endpoint /admin/scoreSwitch
-    const data = await response.json();                     // Wait for asyncronous transfer to complete and parse json (which got received by backend)
+    const data = await response.json();                         // Wait for asyncronous transfer to complete
-    console.log(data);                                      // Print received data
+    updateScoreFrontend(data);                                  // Update admin frontend
-    updateScoreFrontend(data);                              // Update admin frontend with received values for scoreboard
 }
 
 // Clear score
 async function scoreClearScore() {
-    const response = await fetch("/admin/scoreClearScore"); // Call API Endpoint /admin/scoreResetScore
+    const response = await fetch("/admin/scoreClearScore");     // Call API Endpoint /admin/scoreClearScore
-    const data = await response.json();                     // Wait for asynchronous transfer to complete and parse json (which got received by backend)
+    const data = await response.json();                         // Wait for asynchronous transfer to complete
-    console.log(data);                                      // Print received data
+    updateScoreFrontend(data);                                  // Update admin frontend
-    updateScoreFrontend(data);                              // Update admin frontend with received values for scoreboard
 }
-

scoreboard/public/javascripts/index.js

@@ -1,9 +1,13 @@
 let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
 const socket = io(wss);                                 // Connect to socketio server
 
+// ######################################################################################################################################################
+// Websockets event handler
+// ######################################################################################################################################################
+
 socket.on('connected', (message) => {
     console.log("Connected");
-})
+});
 
 socket.on('timerDurationLeft', (message) => {
     console.log(message)                                            // Log durationLeft in client console
@@ -17,3 +21,28 @@ socket.on('timerEnded', (message) => {
 socket.on('refresh', (message) => {
     document.location.reload()                                      // Reload page on received 'refresh' messagen
 });
+
+// ######################################################################################################################################################
+// General functions
+// ######################################################################################################################################################
+
+// Update DOM timer elements from passed values
+function updateTimerFrontend(values) {
+    document.getElementById("durationLeft").innerHTML = values.print;   // Display durationLeft as prettyfied string
+}
+
+// Initial update gets called whenever page has been loaded
+async function initialUpdate() {
+    timerGetValues();                                           // Request new values for timer
+}
+
+// ######################################################################################################################################################
+// Timerfunctions
+// ######################################################################################################################################################
+
+// Request important timer values
+async function timerGetValues() {
+    const response = await fetch("/admin/timerGetValues");      // Call API Endpoint /admin/timerGetValues
+    const data = await response.json();                         // Wait for asynchronous transfer to complete
+    updateTimerFrontend(data);                                  // Update admin frontend
+}

scoreboard/public/javascripts/indexScore.js

@@ -1,9 +1,13 @@
 let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
 const socket = io(wss);                                 // Connect to socketio server
 
+// ######################################################################################################################################################
+// Websockets event handler
+// ######################################################################################################################################################
+
 socket.on('connected', (message) => {
     console.log("Connected");
-})
+});
 
 socket.on('timerDurationLeft', (message) => {
     console.log(message)                                            // Log durationLeft in client console
@@ -23,15 +27,40 @@ socket.on('score', (message) => {
     document.getElementById("score").innerHTML = message;           // Display score in corresponding html Element
 });
 
+// ######################################################################################################################################################
+// General functions
+// ######################################################################################################################################################
+
+// Update DOM timer elements from passed values
+function updateTimerFrontend(values) {
+    document.getElementById("durationLeft").innerHTML = values.print;   // Display durationLeft as prettyfied string
+}
+
 // Update DOM score elements from passed values
 function updateScoreFrontend(values) {
-    document.getElementById("score").innerHTML = values.print;      // Set switch status to received score enabled value
+    document.getElementById("score").innerHTML = values.print;          // Set score on admin interface
 }
 
 async function initialUpdate() {
-    scoreGetValues();
+    timerGetValues();                                           // Request new values for timer
+    scoreGetValues();                                           // Request new values for score
 }
 
+// ######################################################################################################################################################
+// Timerfunctions
+// ######################################################################################################################################################
+
+// Request important timer values
+async function timerGetValues() {
+    const response = await fetch("/admin/timerGetValues");      // Call API Endpoint /admin/timerGetValues
+    const data = await response.json();                         // Wait for asynchronous transfer to complete
+    updateTimerFrontend(data);                                  // Update admin frontend
+}
+
+// ######################################################################################################################################################
+// Scoreboardfunctions
+// ######################################################################################################################################################
+
 // Request important values for score
 async function scoreGetValues() {
     const response = await fetch("/admin/scoreGetValues");      // Call API Endpoint /admin/scoreGetValues

scoreboard/routes/admin.js

@@ -5,6 +5,10 @@ const io = require('../controllers/socketio');
 const timer = require('../controllers/timer');
 const score = require('../controllers/score');
 
+// ######################################################################################################################################################
+// General endpoints
+// ######################################################################################################################################################
+
 // Express router endpoint to trigger a frontend refresh on all connected sockets
 router.get('/refreshMonitor', function(req, res, next) {
     console.log("Monitor neu geladen");
@@ -13,6 +17,10 @@ router.get('/refreshMonitor', function(req, res, next) {
     res.send();                             // send empty response
 });
 
+// ######################################################################################################################################################
+// Timerendpoints
+// ######################################################################################################################################################
+
 // Express router entpoint to start the timer
 router.get('/timerStart', function(req, res, next) {
     if(timer.start()) {                     // If successfully started the timer
@@ -51,6 +59,10 @@ router.get('/timerGetValues', function(req, res, next) {
     res.json(timer.getValues());            // Respond with important values for frontend
 });
 
+// ######################################################################################################################################################
+// Scoreboard endpoints
+// ######################################################################################################################################################
+
 // Express router endpoint to toggle the scoreboard
 router.get('/scoreToggle', function(req, res, next) {
     if(score.getEnabled()) {                // If scoreboard enabled

scoreboard/routes/index.js

@@ -1,18 +1,15 @@
 var express = require('express');
 var router = express.Router();
 let io = require('../controllers/socketio');
-const timer = require('../controllers/timer');
+
-const score = require('../controllers/score');
+const score = require("../controllers/score");
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
     if (score.getEnabled()) {                   // If scoreboard is enabled
-    res.render('indexScore', { 
+        res.render('indexScore', {});           // Render the site with scoreboard
-      title: "Timer and Score",
-      durationLeft: timer.print(),
-    });
     } else {                                    // If scoreboard is not enabled
-    res.render('index', { title: "Timer", durationLeft: timer.print()})
+        res.render('index', {});                // Render the site without scoreboard
     }
 });
 
@@ -25,5 +22,4 @@ io.on('connection', (socket) => {
     })
 })
 
-
 module.exports = router;

scoreboard/views/index.hbs

@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>{{ title }}</title>
+    <title>Index</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' />
   </head>
-  <body>
+  <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 id="durationLeft" class="durationLeft"></div>
     </div>
 
   </body>

scoreboard/views/indexScore.hbs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>{{ title }}</title>
+    <title>IndexScore</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' />
@@ -9,7 +9,7 @@
   <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 id="durationLeft" class="durationLeft"></div>
     </div>