From dbaa21bd3031f69f59dae3ef822ca2fba4df4dee Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Wed, 17 May 2023 18:54:00 +0200 Subject: [PATCH] Button initialization refactorized. --- firmware/data/bottom.js | 78 ++++++-------------- firmware/html/bottom.js | 157 ++++++++++++++-------------------------- 2 files changed, 77 insertions(+), 158 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index 40a1950..4062715 100644 --- a/firmware/data/bottom.js +++ b/firmware/data/bottom.js @@ -310,26 +310,21 @@ pwmElementTxt.innerText = pwmValue.toString(); } updateLightStateAndPWMValues(); setInterval(updateLightStateAndPWMValues, 5000); -var links = document.querySelectorAll('[id^="on"][id$="_off"]'); -links.forEach(function(link) { -link.addEventListener('click', function(event) { -event.preventDefault(); -var id_full = this.id; -var id = this.id.replace('on', '').replace('_off', ''); +function sendRequest(id, value) { var xhr = new XMLHttpRequest(); -xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true); +xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { -var button = document.getElementById(id_full); +var button = document.getElementById(id + '_button'); if (xhr.status === 200) { button.classList.remove("pure-button-primary"); button.classList.add("success"); -button.innerHTML = "Disabled!"; +button.innerHTML = (value ? "Enabled!" : "Disabled!"); button.style.backgroundColor = "green"; setTimeout(function () { button.classList.remove("success"); button.classList.add("pure-button-primary"); -button.innerHTML = "OFF"; +button.innerHTML = (value ? "ON" : "OFF"); button.style.backgroundColor = ""; }, 2000); console.log('Data successfully sent to server!'); @@ -341,7 +336,7 @@ button.style.backgroundColor = "red"; setTimeout(function () { button.classList.remove("error"); button.classList.add("pure-button-primary"); -button.innerHTML = "OFF"; +button.innerHTML = (value ? "ON" : "OFF"); button.style.backgroundColor = ""; }, 2000); showToast('Error while sending data to server.', 'error'); @@ -351,55 +346,24 @@ console.log('Error while sending data to server.'); }; xhr.send(); updateLightState(); -this.classList.add('pure-button-primary'); -document.getElementById('on'+id+'_on').classList.remove('pure-button-primary'); -}); -}); -var links = document.querySelectorAll('[id^="on"][id$="_on"]'); -links.forEach(function(link) { -link.addEventListener('click', function(event) { +} +function addButtonClickListener(id, value) { +var link = document.getElementById(id); +link.addEventListener('click', function (event) { event.preventDefault(); -var id_full = this.id; -var id = this.id.replace('on', '').replace('_on', ''); -var xhr = new XMLHttpRequest(); -xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true); -xhr.onreadystatechange = function () { -if (xhr.readyState === 4) { -var button = document.getElementById(id_full); -if (xhr.status === 200) { -button.classList.remove("pure-button-primary"); -button.classList.add("success"); -button.innerHTML = "Enabled!"; -button.style.backgroundColor = "green"; -setTimeout(function () { -button.classList.remove("success"); -button.classList.add("pure-button-primary"); -button.innerHTML = "ON"; -button.style.backgroundColor = ""; -}, 2000); -console.log('Data successfully sent to server!'); -} else { -button.classList.remove("pure-button-primary"); -button.classList.add("error"); -button.innerHTML = "Error!"; -button.style.backgroundColor = "red"; -setTimeout(function () { -button.classList.remove("error"); -button.classList.add("pure-button-primary"); -button.innerHTML = "ON"; -button.style.backgroundColor = ""; -}, 2000); -showToast('Error while sending data to server.', 'error'); -console.log('Error while sending data to server.'); -} -} -}; -xhr.send(); -updateLightState(); +var id = this.id.replace('_button', ''); +sendRequest(id, value); this.classList.add('pure-button-primary'); -document.getElementById('on'+id+'_off').classList.remove('pure-button-primary'); -}); +document.getElementById(id + (value ? '_off' : '_on') + '_button').classList.remove('pure-button-primary'); }); +} +function initializeButtons() { +for (let i = 0; i <= {{LIGHT_COUNT}}; i++) { +addButtonClickListener('on' + i + '_off_button', false); +addButtonClickListener('on' + i + '_on_button', true); +} +} +initializeButtons(); function createTable() { var table = document.createElement("table"); table.border = "1"; diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js index 1b69507..c87e348 100644 --- a/firmware/html/bottom.js +++ b/firmware/html/bottom.js @@ -357,116 +357,71 @@ function updateLightStateAndPWMValues() { }) .catch(error => console.error(error)); } - updateLightStateAndPWMValues(); setInterval(updateLightStateAndPWMValues, 5000); -// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off -var links = document.querySelectorAll('[id^="on"][id$="_off"]'); -// Füge einen Klick-Listener zu jedem Link hinzu -links.forEach(function(link) { - link.addEventListener('click', function(event) { - // Verhindere, dass der Link die Seite neu lädt - event.preventDefault(); - // Extrahiere die Zahl aus der ID des Links - var id_full = this.id; - var id = this.id.replace('on', '').replace('_off', ''); - // Erstelle eine neue Anfrage an die entsprechende URL - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true); +function sendRequest(id, value) { + // Erstelle eine neue Anfrage an die entsprechende URL + var xhr = new XMLHttpRequest(); + xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true); - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - var button = document.getElementById(id_full); - if (xhr.status === 200) { - button.classList.remove("pure-button-primary"); - button.classList.add("success"); - button.innerHTML = "Disabled!"; - button.style.backgroundColor = "green"; - setTimeout(function () { - button.classList.remove("success"); - button.classList.add("pure-button-primary"); - button.innerHTML = "OFF"; - button.style.backgroundColor = ""; - }, 2000); - console.log('Data successfully sent to server!'); - } else { - button.classList.remove("pure-button-primary"); - button.classList.add("error"); - button.innerHTML = "Error!"; - button.style.backgroundColor = "red"; - setTimeout(function () { - button.classList.remove("error"); - button.classList.add("pure-button-primary"); - button.innerHTML = "OFF"; - button.style.backgroundColor = ""; - }, 2000); - showToast('Error while sending data to server.', 'error'); - console.log('Error while sending data to server.'); - } + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + var button = document.getElementById(id + '_button'); + if (xhr.status === 200) { + button.classList.remove("pure-button-primary"); + button.classList.add("success"); + button.innerHTML = (value ? "Enabled!" : "Disabled!"); + button.style.backgroundColor = "green"; + setTimeout(function () { + button.classList.remove("success"); + button.classList.add("pure-button-primary"); + button.innerHTML = (value ? "ON" : "OFF"); + button.style.backgroundColor = ""; + }, 2000); + console.log('Data successfully sent to server!'); + } else { + button.classList.remove("pure-button-primary"); + button.classList.add("error"); + button.innerHTML = "Error!"; + button.style.backgroundColor = "red"; + setTimeout(function () { + button.classList.remove("error"); + button.classList.add("pure-button-primary"); + button.innerHTML = (value ? "ON" : "OFF"); + button.style.backgroundColor = ""; + }, 2000); + showToast('Error while sending data to server.', 'error'); + console.log('Error while sending data to server.'); } - }; + } + }; - // Sende die Anfrage im Hintergrund - xhr.send(); - updateLightState(); - this.classList.add('pure-button-primary'); - document.getElementById('on'+id+'_on').classList.remove('pure-button-primary'); - }); -}); -// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off -var links = document.querySelectorAll('[id^="on"][id$="_on"]'); -// Füge einen Klick-Listener zu jedem Link hinzu -links.forEach(function(link) { - link.addEventListener('click', function(event) { - // Verhindere, dass der Link die Seite neu lädt + // Sende die Anfrage im Hintergrund + xhr.send(); + updateLightState(); +} + +function addButtonClickListener(id, value) { + var link = document.getElementById(id); + link.addEventListener('click', function (event) { event.preventDefault(); - // Extrahiere die Zahl aus der ID des Links - var id_full = this.id; - var id = this.id.replace('on', '').replace('_on', ''); - // Erstelle eine neue Anfrage an die entsprechende URL - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true); - - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - var button = document.getElementById(id_full); - if (xhr.status === 200) { - button.classList.remove("pure-button-primary"); - button.classList.add("success"); - button.innerHTML = "Enabled!"; - button.style.backgroundColor = "green"; - setTimeout(function () { - button.classList.remove("success"); - button.classList.add("pure-button-primary"); - button.innerHTML = "ON"; - button.style.backgroundColor = ""; - }, 2000); - console.log('Data successfully sent to server!'); - } else { - button.classList.remove("pure-button-primary"); - button.classList.add("error"); - button.innerHTML = "Error!"; - button.style.backgroundColor = "red"; - setTimeout(function () { - button.classList.remove("error"); - button.classList.add("pure-button-primary"); - button.innerHTML = "ON"; - button.style.backgroundColor = ""; - }, 2000); - showToast('Error while sending data to server.', 'error'); - console.log('Error while sending data to server.'); - } - } - }; - - // Sende die Anfrage im Hintergrund - xhr.send(); - updateLightState(); + var id = this.id.replace('_button', ''); + sendRequest(id, value); this.classList.add('pure-button-primary'); - document.getElementById('on'+id+'_off').classList.remove('pure-button-primary'); + document.getElementById(id + (value ? '_off' : '_on') + '_button').classList.remove('pure-button-primary'); }); -}); +} + +function initializeButtons() { + for (let i = 0; i <= {{LIGHT_COUNT}}; i++) { + addButtonClickListener('on' + i + '_off_button', false); + addButtonClickListener('on' + i + '_on_button', true); + } +} + +initializeButtons(); + function createTable() { // Erstelle eine Tabelle