diff --git a/scoreboard/public/javascripts/admin.js b/scoreboard/public/javascripts/admin.js index 06cd611..a66818f 100644 --- a/scoreboard/public/javascripts/admin.js +++ b/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 +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) => { // Once client is connected to websocket +// ###################################################################################################################################################### +// 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 - document.getElementById("score").innerHTML = message; // Display score in corresponding html Element + 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 - values.durationLeft = moment.duration(values.durationLeft) // Create moment object from ISO 8601 string - document.getElementById("durationLeft").innerHTML = values.print // Display durationLeft as prettyfied string + console.log(values); // Print received data + 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 + document.getElementById("timerStartBtn").disabled = false; + document.getElementById("timerPauseBtn").disabled = true; } else { - document.getElementById("timerStartBtn").disabled = true - document.getElementById("timerPauseBtn").disabled = false + document.getElementById("timerStartBtn").disabled = true; + 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,116 +59,107 @@ 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) - console.log("Send request to refresh the monitor"); + const data = await response.json(); // Wait for asyncronous transfer to complete } +// ###################################################################################################################################################### // 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) - console.log(data); // Print received data - updateTimerFrontend(data); // Update admin frontend with received values for timerboard + const data = await response.json(); // Wait for asynchronous transfer to complete + updateTimerFrontend(data); // Update admin frontend } // 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) - console.log(data); // Print received data - updateTimerFrontend(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 + const data = await response.json(); // Wait for asyncronous transfer to complete + updateTimerFrontend(data); // Update admin frontend + } else { // Timer already finished + const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast")); // Create toast instance byId timerStartErrorToast + timerStartErrorToast.show(); // Show error toast } } // Request to pause the timer async function timerPause() { - const response = await fetch("/admin/timerPause"); // Call API Endpoint /admin/timerStart + 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 - updateTimerFrontend(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 + const data = await response.json(); // Wait for asyncronous transfer to complete + updateTimerFrontend(data); // Update admin frontend + } else { // Timer already paused + const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast")); // Create toast instance byId timerPauseErrorToast + timerPauseErrorToast.show(); // Show error toast } } // Request to reset the timer with the specified time 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 + 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 - updateTimerFrontend(data); // Update admin frontend with received values + const data = await response.json(); // Wait for asyncronous transfer to complete + updateTimerFrontend(data); // Update admin frontend } // Request to increase or decrease the timer depending on passed value in seconds async function timerIncDec(value) { - const response = await fetch("/admin/timerIncDec", { // Call API Endpoint /admin/timerIncDec with value in seconds to increase or decrease the timer + const response = await fetch("/admin/timerIncDec", { // Call API Endpoint /admin/timerIncDec with value in seconds to increase or decrease the timer method: 'POST', 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) - console.log(data); // Print received data - updateTimerFrontend(data); // Update admin frontend with received values + const data = await response.json(); // Wait for asyncronous 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 - 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 + const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/scoreGetValues + const data = await response.json(); // Wait for asynchronous transfer to complete + updateScoreFrontend(data); // Update admin frontend } // 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/scoreEnable - 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 - updateScoreFrontend(data); // Update admin frontend with received values for scoreboard - refreshMonitor(); // Send request to refresh monitor + const response = await fetch("/admin/scoreToggle"); // Call API Endpoint /admin/scoreToggle + const data = await response.json(); // Wait for asyncronous transfer to complete + updateScoreFrontend(data); // Update admin frontend + refreshMonitor(); // Refresh main monitor to display new frontend } // 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) - console.log(data); // Print received data - updateScoreFrontend(data); // Update admin frontend with received values + const data = await response.json(); // Wait for asyncronous transfer to complete + updateScoreFrontend(data); // Update admin frontend } // Switch sides 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 - updateScoreFrontend(data); // Update admin frontend with received values for scoreboard + const response = await fetch("/admin/scoreSwitch"); // Call API Endpoint /admin/scoreSwitch + const data = await response.json(); // Wait for asyncronous transfer to complete + updateScoreFrontend(data); // Update admin frontend } // Clear score async function scoreClearScore() { - const response = await fetch("/admin/scoreClearScore"); // Call API Endpoint /admin/scoreResetScore - 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 -} - + const response = await fetch("/admin/scoreClearScore"); // Call API Endpoint /admin/scoreClearScore + const data = await response.json(); // Wait for asynchronous transfer to complete + updateScoreFrontend(data); // Update admin frontend +} \ No newline at end of file