klaute/lumini_p30_control
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactorized the action listener of the tc buttons in the webinterface

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-20 10:57:50 +02:00
parent ec30fa512b
commit 83c2d74a79
2 changed files with 62 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
firmware/data/top.js
View file

@ -1,21 +1,18 @@
var links = document.querySelectorAll('[id^="tc_on"]'); function handleRequest(id, url) {
links.forEach(function(link) { var button = document.getElementById(id);
link.addEventListener('click', function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true); xhr.open('GET', url, true);
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
var button = document.getElementById("tc_on");
if (xhr.status === 200) { if (xhr.status === 200) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = "Enabled!"; button.innerHTML = (id === 'tc_on') ? "Enabled!" : "Disabled!";
button.style.backgroundColor = "green"; button.style.backgroundColor = "green";
setTimeout(function () { setTimeout(function () {
button.classList.remove("success"); button.classList.remove("success");
button.classList.add("pure-button-primary"); button.classList.add("pure-button-primary");
button.innerHTML = "ON"; button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
@ -27,7 +24,7 @@ button.style.backgroundColor = "";
setTimeout(function () { setTimeout(function () {
button.classList.remove("error"); button.classList.remove("error");
button.classList.add("pure-button-primary"); button.classList.add("pure-button-primary");
button.innerHTML = "ON"; button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
@ -36,52 +33,18 @@ console.log('Error while sending data to server.');
} }
}; };
xhr.send(); xhr.send();
document.getElementById('tc_on').classList.add('pure-button-primary'); }
document.getElementById('tc_off').classList.remove('pure-button-primary'); function addButtonClickListener(id, url) {
}); var link = document.getElementById(id);
}); link.addEventListener('click', function (event) {
var links = document.querySelectorAll('[id^="tc_off"]');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault(); event.preventDefault();
var xhr = new XMLHttpRequest(); handleRequest(id, url);
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true); document.getElementById(id).classList.add('pure-button-primary');
xhr.onreadystatechange = function () { document.getElementById(id === 'tc_on' ? 'tc_off' : 'tc_on').classList.remove('pure-button-primary');
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');
});
}); });
}
addButtonClickListener('tc_on', 'http://{{IP_ADDRESS}}/?tc=true');
addButtonClickListener('tc_off', 'http://{{IP_ADDRESS}}/?tc=false');
let timeoutId; let timeoutId;
function sendSliderValue(x) { function sendSliderValue(x) {
x = x - 1; x = x - 1;

76
firmware/html/top.js
View file

@ -1,22 +1,20 @@
var links = document.querySelectorAll('[id^="tc_on"]'); function handleRequest(id, url) {
links.forEach(function(link) { var button = document.getElementById(id);
link.addEventListener('click', function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true); xhr.open('GET', url, true);
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
var button = document.getElementById("tc_on");
if (xhr.status === 200) { if (xhr.status === 200) {
button.classList.remove("pure-button-primary"); button.classList.remove("pure-button-primary");
button.classList.add("success"); button.classList.add("success");
button.innerHTML = "Enabled!"; button.innerHTML = (id === 'tc_on') ? "Enabled!" : "Disabled!";
button.style.backgroundColor = "green"; button.style.backgroundColor = "green";
setTimeout(function () { setTimeout(function () {
button.classList.remove("success"); button.classList.remove("success");
button.classList.add("pure-button-primary"); button.classList.add("pure-button-primary");
button.innerHTML = "ON"; button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
@ -28,7 +26,7 @@ links.forEach(function(link) {
setTimeout(function () { setTimeout(function () {
button.classList.remove("error"); button.classList.remove("error");
button.classList.add("pure-button-primary"); button.classList.add("pure-button-primary");
button.innerHTML = "ON"; button.innerHTML = (id === 'tc_on') ? "ON" : "OFF";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
showToast('Error while sending data to server.', 'error'); showToast('Error while sending data to server.', 'error');
@ -38,56 +36,20 @@ links.forEach(function(link) {
}; };
xhr.send(); 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'); function addButtonClickListener(id, url) {
}); var link = document.getElementById(id);
}); link.addEventListener('click', function (event) {
var links = document.querySelectorAll('[id^="tc_off"]');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault(); event.preventDefault();
var xhr = new XMLHttpRequest(); handleRequest(id, url);
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true); document.getElementById(id).classList.add('pure-button-primary');
document.getElementById(id === 'tc_on' ? 'tc_off' : 'tc_on').classList.remove('pure-button-primary');
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');
}); });
}); }
addButtonClickListener('tc_on', 'http://{{IP_ADDRESS}}/?tc=true');
addButtonClickListener('tc_off', 'http://{{IP_ADDRESS}}/?tc=false');
let timeoutId; let timeoutId;
function sendSliderValue(x) { function sendSliderValue(x) {