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

Button initialization refactorized.

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-17 18:54:00 +02:00
parent 8deac5fc15
commit dbaa21bd30
2 changed files with 77 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
firmware/data/bottom.js
View file

@ -310,26 +310,21 @@ pwmElementTxt.innerText = pwmValue.toString();
} }
updateLightStateAndPWMValues(); updateLightStateAndPWMValues();
setInterval(updateLightStateAndPWMValues, 5000); setInterval(updateLightStateAndPWMValues, 5000);
var links = document.querySelectorAll('[id^="on"][id$="_off"]'); function sendRequest(id, value) {
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
var id_full = this.id;
var id = this.id.replace('on', '').replace('_off', '');
var xhr = new XMLHttpRequest(); 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 () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
var button = document.getElementById(id_full); var button = document.getElementById(id + '_button');
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 = "Disabled!"; button.innerHTML = (value ? "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 = "OFF"; button.innerHTML = (value ? "ON" : "OFF");
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
@ -341,7 +336,7 @@ button.style.backgroundColor = "red";
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 = "OFF"; button.innerHTML = (value ? "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');
@ -351,55 +346,24 @@ console.log('Error while sending data to server.');
}; };
xhr.send(); xhr.send();
updateLightState(); updateLightState();
this.classList.add('pure-button-primary'); }
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary'); function addButtonClickListener(id, value) {
}); var link = document.getElementById(id);
}); link.addEventListener('click', function (event) {
var links = document.querySelectorAll('[id^="on"][id$="_on"]');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault(); event.preventDefault();
var id_full = this.id; var id = this.id.replace('_button', '');
var id = this.id.replace('on', '').replace('_on', ''); sendRequest(id, value);
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();
this.classList.add('pure-button-primary'); 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() { function createTable() {
var table = document.createElement("table"); var table = document.createElement("table");
table.border = "1"; table.border = "1";

95
firmware/html/bottom.js
View file

@ -357,36 +357,26 @@ function updateLightStateAndPWMValues() {
}) })
.catch(error => console.error(error)); .catch(error => console.error(error));
} }
updateLightStateAndPWMValues(); updateLightStateAndPWMValues();
setInterval(updateLightStateAndPWMValues, 5000); setInterval(updateLightStateAndPWMValues, 5000);
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off function sendRequest(id, value) {
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 // Erstelle eine neue Anfrage an die entsprechende URL
var xhr = new XMLHttpRequest(); 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 () { xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
var button = document.getElementById(id_full); var button = document.getElementById(id + '_button');
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 = "Disabled!"; button.innerHTML = (value ? "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 = "OFF"; button.innerHTML = (value ? "ON" : "OFF");
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
@ -398,7 +388,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 = "OFF"; button.innerHTML = (value ? "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');
@ -410,63 +400,28 @@ links.forEach(function(link) {
// Sende die Anfrage im Hintergrund // Sende die Anfrage im Hintergrund
xhr.send(); xhr.send();
updateLightState(); updateLightState();
this.classList.add('pure-button-primary'); }
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
}); function addButtonClickListener(id, value) {
}); var link = document.getElementById(id);
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off link.addEventListener('click', function (event) {
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
event.preventDefault(); event.preventDefault();
// Extrahiere die Zahl aus der ID des Links var id = this.id.replace('_button', '');
var id_full = this.id; sendRequest(id, value);
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();
this.classList.add('pure-button-primary'); 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() { function createTable() {
// Erstelle eine Tabelle // Erstelle eine Tabelle