scoreboard-js/scoreboard/public/javascripts/admin.js

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
    console.log("Connected");
    initialUpdate()                                     // Request important values to update admin frontend
});

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) => {
    initialUpdate();                                                    // Update admin frontend to set correct buttonstatus
});

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

    if(values.isPaused) {                                               // Set button state depending on timer status
        document.getElementById("timerStartBtn").disabled = false
        document.getElementById("timerPauseBtn").disabled = true
    } else {
        document.getElementById("timerStartBtn").disabled = true
        document.getElementById("timerPauseBtn").disabled = false
    }
}

// Update DOM score elements from passed values
function updateScoreFrontend(values) {
    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
}

// Initial update gets called whenever page has been loaded
async function initialUpdate() {
    timerGetValues();                                           // Request new values for timer
    scoreGetValues();                                           // Request new values for score
}

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

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

// Request to pause the timer
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)
        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
    }
}

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

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

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

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

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

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

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