jappel/scoreboard-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup, comments, structuring

Browse Source
This commit is contained in:
Julian Appel 2024-05-17 21:53:37 +02:00
parent 93d06517e4
commit 50dd893b5a
1 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
scoreboard/public/javascripts/admin.js
View File

@ -1,13 +1,16 @@
let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location let wss = "ws://" + window.location.hostname + ":3001" // Build socketio endpoint from window.location
const socket = io(wss); // Connect to socketio server 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"); console.log("Connected");
initialUpdate() // Request important values to update admin frontend
}); });
socket.on('timerDurationLeft', (message) => { 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 document.getElementById("durationLeft").innerHTML = message; // Display durationLeft in corresponding html Element
}); });
@ -16,29 +19,35 @@ socket.on('timerEnded', (message) => {
}); });
socket.on('score', (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 document.getElementById("score").innerHTML = message; // Display score in corresponding html Element
}); });
// ######################################################################################################################################################
// General functions
// ######################################################################################################################################################
// Update DOM timer elements from passed values // Update DOM timer elements from passed values
function updateTimerFrontend(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 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 { } 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 // Update DOM score elements from passed values
function updateScoreFrontend(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("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 // Initial update gets called whenever page has been loaded
@ -50,116 +59,107 @@ async function initialUpdate() {
// Request monitor refresh for index frontend // Request monitor refresh for index frontend
async function refreshMonitor() { async function refreshMonitor() {
const response = await fetch("/admin/refreshMonitor"); // Call API Endpoint /admin/timerStart 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 // Timerfunctions
// ######################################################################################################################################################
// Request important timer values // Request important timer values
async function timerGetValues() { async function timerGetValues() {
const response = await fetch("/admin/timerGetValues"); // Call API Endpoint /admin/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 // Request to start the timer
async function timerStart() { async function timerStart() {
const response = await fetch("/admin/timerStart"); // Call API Endpoint /admin/timerStart const response = await fetch("/admin/timerStart"); // Call API Endpoint /admin/timerStart
if(response.status == 200) { // If request successfull 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 { const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast")); // Create toast instance byId timerStartErrorToast
//console.log("Error, Timer bereits abgelaufen: ", response.status); timerStartErrorToast.show(); // Show error toast
const timerStartErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerStartErrorToast")); // Create toast instance byId timerStartErrorToast
timerStartErrorToast.show(); // Show error toast
} }
} }
// Request to pause the timer // Request to pause the timer
async function timerPause() { 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) { 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); timerPauseErrorToast.show(); // Show error toast
const timerPauseErrorToast = bootstrap.Toast.getOrCreateInstance(document.getElementById("timerPauseErrorToast")); // Create toast instance byId timerStartErrorToast
timerPauseErrorToast.show(); // Show error toast
} }
} }
// Request to reset the timer with the specified time // Request to reset the timer with the specified time
async function timerReset() { async function timerReset() {
let newDuration = document.getElementById("timerSelectDuration").value; 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', method: 'POST',
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({duration: newDuration}) 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 // Request to increase or decrease the timer depending on passed value in seconds
async function timerIncDec(value) { 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', method: 'POST',
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({value: value}) 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 // Scoreboardfunctions
// ######################################################################################################################################################
// Request important values for score // Request important values for score
async function scoreGetValues() { async function scoreGetValues() {
const response = await fetch("/admin/scoreGetValues"); // Call API Endpoint /admin/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 // Toggle index page to also show scoreboard
async function scoreToggle() { 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 // Alter the score of passed team in the specified direction
async function scoreAlterScore(team, dir) { 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', method: 'POST',
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({team: team, dir: dir}) 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 // Switch sides
async function scoreSwitch() { 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 // Clear score
async function scoreClearScore() { 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
} }