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