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
    document.getElementById("durationLeft").innerHTML = message;    // Display durationLeft in corresponding html Element
});

socket.on('timerEnded', (message) => {
    document.getElementById("durationLeft").innerHTML = "ENDE";     // Display "STOP" in same html element as the duration
});

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
}