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

Revert "Button initialization refactorized."

Browse source 
This reverts commit dbaa21bd30.
This commit is contained in:
Kai Lauterbach 2023-05-17 19:39:00 +02:00
parent 88b738ac75
commit 91d2d867b0
2 changed files with 158 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
firmware/data/bottom.js
View file

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

91
firmware/html/bottom.js
View file

@ -357,26 +357,36 @@ function updateLightStateAndPWMValues() {
}) })
.catch(error => console.error(error)); .catch(error => console.error(error));
} }
updateLightStateAndPWMValues(); updateLightStateAndPWMValues();
setInterval(updateLightStateAndPWMValues, 5000); setInterval(updateLightStateAndPWMValues, 5000);
function sendRequest(id, value) { // 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 // Erstelle eine neue Anfrage an die entsprechende URL
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=' + value + '&transition=' + document.getElementById('transition').value, true); xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&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 + '_button'); var button = document.getElementById(id_full);
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 = (value ? "Enabled!" : "Disabled!"); button.innerHTML = "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 = (value ? "ON" : "OFF"); button.innerHTML = "OFF";
button.style.backgroundColor = ""; button.style.backgroundColor = "";
}, 2000); }, 2000);
console.log('Data successfully sent to server!'); console.log('Data successfully sent to server!');
@ -388,7 +398,7 @@ function sendRequest(id, value) {
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 = (value ? "ON" : "OFF"); button.innerHTML = "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');
@ -400,28 +410,63 @@ function sendRequest(id, value) {
// Sende die Anfrage im Hintergrund // Sende die Anfrage im Hintergrund
xhr.send(); xhr.send();
updateLightState(); updateLightState();
}
function addButtonClickListener(id, value) {
var link = document.getElementById(id);
link.addEventListener('click', function (event) {
event.preventDefault();
var id = this.id.replace('_button', '');
sendRequest(id, value);
this.classList.add('pure-button-primary'); this.classList.add('pure-button-primary');
document.getElementById(id + (value ? '_off' : '_on') + '_button').classList.remove('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
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);
function initializeButtons() { xhr.onreadystatechange = function () {
for (let i = 0; i <= {{LIGHT_COUNT}}; i++) { if (xhr.readyState === 4) {
addButtonClickListener('on' + i + '_off_button', false); var button = document.getElementById(id_full);
addButtonClickListener('on' + i + '_on_button', true); 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.');
} }
} }
};
initializeButtons();
// Sende die Anfrage im Hintergrund
xhr.send();
updateLightState();
this.classList.add('pure-button-primary');
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
});
});
function createTable() { function createTable() {
// Erstelle eine Tabelle // Erstelle eine Tabelle