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

Refactorized on button javascript code. Reset added to the webservers tc parameter processing after setting tc_enabled.

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-20 11:34:55 +02:00
parent 83c2d74a79
commit e2ca6ceade
6 changed files with 82 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
firmware/20230519_firmware.ino.bin → firmware/20230520_firmware.ino.bin
View file

Binary file not shown.

BIN
firmware/20230519_firmware.spiffs.bin → firmware/20230520_firmware.spiffs.bin
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 MiB

After

Width:  |  Height:  |  Size: 2 MiB

BIN
firmware/20230519_firmware_dev.ino.bin → firmware/20230520_firmware_dev.ino.bin
View file

Binary file not shown.

82
firmware/data/bottom.js
View file

@ -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 handleOnRequest(id_full, id, value) {
var button = document.getElementById(id_full);
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);
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,54 +346,27 @@ console.log('Error while sending data to server.');
};
xhr.send();
updateLightStateAndPWMValues();
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) {
document.getElementById(id_full).classList.add('pure-button-primary');
document.getElementById('on' + id + (value ? '_off' : '_on')).classList.remove('pure-button-primary');
}
function addOnButtonClickListener(id_full, id, value) {
var link = document.getElementById(id_full);
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();
updateLightStateAndPWMValues();
this.classList.add('pure-button-primary');
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
handleOnRequest(id_full, id, value);
});
}
var offLinks = document.querySelectorAll('[id^="on"][id$="_off"]');
offLinks.forEach(function (link) {
var id_full = link.id;
var id = link.id.replace('on', '').replace('_off', '');
addOnButtonClickListener(id_full, id, false);
});
var onLinks = document.querySelectorAll('[id^="on"][id$="_on"]');
onLinks.forEach(function (link) {
var id_full = link.id;
var id = link.id.replace('on', '').replace('_on', '');
addOnButtonClickListener(id_full, id, true);
});
function createTable() {
var table = document.createElement("table");

155
firmware/html/bottom.js
View file

@ -361,111 +361,68 @@ function updateLightStateAndPWMValues() {
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 handleOnRequest(id_full, id, value) {
var button = document.getElementById(id_full);
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) {
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();
updateLightStateAndPWMValues();
this.classList.add('pure-button-primary');
document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
xhr.send();
updateLightStateAndPWMValues();
document.getElementById(id_full).classList.add('pure-button-primary');
document.getElementById('on' + id + (value ? '_off' : '_on')).classList.remove('pure-button-primary');
}
function addOnButtonClickListener(id_full, id, value) {
var link = document.getElementById(id_full);
link.addEventListener('click', function (event) {
event.preventDefault();
handleOnRequest(id_full, id, value);
});
}
var offLinks = document.querySelectorAll('[id^="on"][id$="_off"]');
offLinks.forEach(function (link) {
var id_full = link.id;
var id = link.id.replace('on', '').replace('_off', '');
addOnButtonClickListener(id_full, id, false);
});
// 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);
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();
updateLightStateAndPWMValues();
this.classList.add('pure-button-primary');
document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
});
var onLinks = document.querySelectorAll('[id^="on"][id$="_on"]');
onLinks.forEach(function (link) {
var id_full = link.id;
var id = link.id.replace('on', '').replace('_on', '');
addOnButtonClickListener(id_full, id, true);
});
function createTable() {

1
firmware/webserver.ino
View file

@ -247,6 +247,7 @@ void init_webserver()
EEPROM.commit();
Serial.print("Timing control = ");
Serial.println(EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS));
tc_reset();
tc_update_main(); // call the main update function to read data and set the light states
}
}