From 83c2d74a7924deed1cd1d8b70e8d34f051f5cddb Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Sat, 20 May 2023 10:57:50 +0200 Subject: [PATCH] Refactorized the action listener of the tc buttons in the webinterface --- firmware/data/top.js | 69 ++++++----------------- firmware/html/top.js | 130 +++++++++++++++---------------------------- 2 files changed, 62 insertions(+), 137 deletions(-) diff --git a/firmware/data/top.js b/firmware/data/top.js index 59e8c6e..0aa2a58 100644 --- a/firmware/data/top.js +++ b/firmware/data/top.js @@ -1,21 +1,18 @@ -var links = document.querySelectorAll('[id^="tc_on"]'); -links.forEach(function(link) { -link.addEventListener('click', function(event) { -event.preventDefault(); +function handleRequest(id, url) { +var button = document.getElementById(id); var xhr = new XMLHttpRequest(); -xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true); +xhr.open('GET', url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { -var button = document.getElementById("tc_on"); if (xhr.status === 200) { button.classList.remove("pure-button-primary"); button.classList.add("success"); -button.innerHTML = "Enabled!"; +button.innerHTML = (id === 'tc_on') ? "Enabled!" : "Disabled!"; button.style.backgroundColor = "green"; setTimeout(function () { button.classList.remove("success"); button.classList.add("pure-button-primary"); -button.innerHTML = "ON"; +button.innerHTML = (id === 'tc_on') ? "ON" : "OFF"; button.style.backgroundColor = ""; }, 2000); console.log('Data successfully sent to server!'); @@ -27,7 +24,7 @@ button.style.backgroundColor = ""; setTimeout(function () { button.classList.remove("error"); button.classList.add("pure-button-primary"); -button.innerHTML = "ON"; +button.innerHTML = (id === 'tc_on') ? "ON" : "OFF"; button.style.backgroundColor = ""; }, 2000); showToast('Error while sending data to server.', 'error'); @@ -36,52 +33,18 @@ console.log('Error while sending data to server.'); } }; xhr.send(); -document.getElementById('tc_on').classList.add('pure-button-primary'); -document.getElementById('tc_off').classList.remove('pure-button-primary'); -}); -}); -var links = document.querySelectorAll('[id^="tc_off"]'); -links.forEach(function(link) { -link.addEventListener('click', function(event) { +} +function addButtonClickListener(id, url) { +var link = document.getElementById(id); +link.addEventListener('click', function (event) { event.preventDefault(); -var xhr = new XMLHttpRequest(); -xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true); -xhr.onreadystatechange = function () { -if (xhr.readyState === 4) { -var button = document.getElementById("tc_off"); -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.send(); -document.getElementById('tc_off').classList.add('pure-button-primary'); -document.getElementById('tc_on').classList.remove('pure-button-primary'); -}); +handleRequest(id, url); +document.getElementById(id).classList.add('pure-button-primary'); +document.getElementById(id === 'tc_on' ? 'tc_off' : 'tc_on').classList.remove('pure-button-primary'); }); +} +addButtonClickListener('tc_on', 'http://{{IP_ADDRESS}}/?tc=true'); +addButtonClickListener('tc_off', 'http://{{IP_ADDRESS}}/?tc=false'); let timeoutId; function sendSliderValue(x) { x = x - 1; diff --git a/firmware/html/top.js b/firmware/html/top.js index b8ed203..3ef1e45 100644 --- a/firmware/html/top.js +++ b/firmware/html/top.js @@ -1,93 +1,55 @@ -var links = document.querySelectorAll('[id^="tc_on"]'); -links.forEach(function(link) { - link.addEventListener('click', function(event) { - event.preventDefault(); - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true); +function handleRequest(id, url) { + var button = document.getElementById(id); - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - var button = document.getElementById("tc_on"); - 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!"; + var xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + button.classList.remove("pure-button-primary"); + button.classList.add("success"); + button.innerHTML = (id === 'tc_on') ? "Enabled!" : "Disabled!"; + button.style.backgroundColor = "green"; + setTimeout(function () { + button.classList.remove("success"); + button.classList.add("pure-button-primary"); + button.innerHTML = (id === 'tc_on') ? "ON" : "OFF"; button.style.backgroundColor = ""; - 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.'); - } + }, 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 = ""; + setTimeout(function () { + button.classList.remove("error"); + button.classList.add("pure-button-primary"); + button.innerHTML = (id === 'tc_on') ? "ON" : "OFF"; + button.style.backgroundColor = ""; + }, 2000); + showToast('Error while sending data to server.', 'error'); + console.log('Error while sending data to server.'); } - }; + } + }; - xhr.send(); - //console.log('tc=true call'); - document.getElementById('tc_on').classList.add('pure-button-primary'); - document.getElementById('tc_off').classList.remove('pure-button-primary'); - }); -}); -var links = document.querySelectorAll('[id^="tc_off"]'); -links.forEach(function(link) { - link.addEventListener('click', function(event) { + xhr.send(); +} + +function addButtonClickListener(id, url) { + var link = document.getElementById(id); + link.addEventListener('click', function (event) { event.preventDefault(); - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true); - - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - var button = document.getElementById("tc_off"); - 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.send(); - //console.log('tc=false call'); - document.getElementById('tc_off').classList.add('pure-button-primary'); - document.getElementById('tc_on').classList.remove('pure-button-primary'); + handleRequest(id, url); + document.getElementById(id).classList.add('pure-button-primary'); + document.getElementById(id === 'tc_on' ? 'tc_off' : 'tc_on').classList.remove('pure-button-primary'); }); -}); +} + +addButtonClickListener('tc_on', 'http://{{IP_ADDRESS}}/?tc=true'); +addButtonClickListener('tc_off', 'http://{{IP_ADDRESS}}/?tc=false'); let timeoutId; function sendSliderValue(x) {