From 1ca1f3e6e3ada516f5f90beaaa4132527ce62eae Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Sun, 7 May 2023 16:57:24 +0200 Subject: [PATCH] Status output implemented - after click on a button --- firmware/data/bottom.js | 54 +++++++++++++++++++++ firmware/data/light_control_template.html | 4 +- firmware/data/top.js | 52 ++++++++++++++++++++ firmware/html/bottom.js | 58 +++++++++++++++++++++++ firmware/html/light_control_template.html | 4 +- firmware/html/top.js | 56 ++++++++++++++++++++++ 6 files changed, 224 insertions(+), 4 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index 22bc96f..8459e2f 100644 --- a/firmware/data/bottom.js +++ b/firmware/data/bottom.js @@ -310,9 +310,36 @@ 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(); xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&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!"; +setTimeout(function () { +button.classList.remove("success"); +button.classList.add("pure-button-primary"); +button.innerHTML = "OFF"; +}, 2000); +console.log('Data successfully sent to server!'); +} else { +button.classList.remove("pure-button-primary"); +button.classList.add("error"); +button.innerHTML = "Error!"; +setTimeout(function () { +button.classList.remove("error"); +button.classList.add("pure-button-primary"); +button.innerHTML = "OFF"; +}, 2000); +console.log('Error while sending data to server.'); +} +} +}; xhr.send(); updateLightState(); this.classList.add('pure-button-primary'); @@ -323,9 +350,36 @@ var links = document.querySelectorAll('[id^="on"][id$="_on"]'); links.forEach(function(link) { 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!"; +setTimeout(function () { +button.classList.remove("success"); +button.classList.add("pure-button-primary"); +button.innerHTML = "ON"; +}, 2000); +console.log('Data successfully sent to server!'); +} else { +button.classList.remove("pure-button-primary"); +button.classList.add("error"); +button.innerHTML = "Error!"; +setTimeout(function () { +button.classList.remove("error"); +button.classList.add("pure-button-primary"); +button.innerHTML = "ON"; +}, 2000); +console.log('Error while sending data to server.'); +} +} +}; xhr.send(); updateLightState(); this.classList.add('pure-button-primary'); diff --git a/firmware/data/light_control_template.html b/firmware/data/light_control_template.html index 8bc313f..783a584 100644 --- a/firmware/data/light_control_template.html +++ b/firmware/data/light_control_template.html @@ -7,13 +7,13 @@ OFF
- +   9 %
- +   diff --git a/firmware/data/top.js b/firmware/data/top.js index 373f487..7c1839a 100644 --- a/firmware/data/top.js +++ b/firmware/data/top.js @@ -4,6 +4,32 @@ link.addEventListener('click', function(event) { event.preventDefault(); var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', 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!"; +setTimeout(function () { +button.classList.remove("success"); +button.classList.add("pure-button-primary"); +button.innerHTML = "ON"; +}, 2000); +console.log('Data successfully sent to server!'); +} else { +button.classList.remove("pure-button-primary"); +button.classList.add("error"); +button.innerHTML = "Error!"; +setTimeout(function () { +button.classList.remove("error"); +button.classList.add("pure-button-primary"); +button.innerHTML = "ON"; +}, 2000); +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'); @@ -15,6 +41,32 @@ 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!"; +setTimeout(function () { +button.classList.remove("success"); +button.classList.add("pure-button-primary"); +button.innerHTML = "OFF"; +}, 2000); +console.log('Data successfully sent to server!'); +} else { +button.classList.remove("pure-button-primary"); +button.classList.add("error"); +button.innerHTML = "Error!"; +setTimeout(function () { +button.classList.remove("error"); +button.classList.add("pure-button-primary"); +button.innerHTML = "OFF"; +}, 2000); +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'); diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js index 84a11cd..69dc709 100644 --- a/firmware/html/bottom.js +++ b/firmware/html/bottom.js @@ -361,10 +361,39 @@ links.forEach(function(link) { // 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); + + 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!"; + setTimeout(function () { + button.classList.remove("success"); + button.classList.add("pure-button-primary"); + button.innerHTML = "OFF"; + }, 2000); + console.log('Data successfully sent to server!'); + } else { + button.classList.remove("pure-button-primary"); + button.classList.add("error"); + button.innerHTML = "Error!"; + setTimeout(function () { + button.classList.remove("error"); + button.classList.add("pure-button-primary"); + button.innerHTML = "OFF"; + }, 2000); + console.log('Error while sending data to server.'); + } + } + }; + // Sende die Anfrage im Hintergrund xhr.send(); updateLightState(); @@ -380,10 +409,39 @@ links.forEach(function(link) { // 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!"; + setTimeout(function () { + button.classList.remove("success"); + button.classList.add("pure-button-primary"); + button.innerHTML = "ON"; + }, 2000); + console.log('Data successfully sent to server!'); + } else { + button.classList.remove("pure-button-primary"); + button.classList.add("error"); + button.innerHTML = "Error!"; + setTimeout(function () { + button.classList.remove("error"); + button.classList.add("pure-button-primary"); + button.innerHTML = "ON"; + }, 2000); + console.log('Error while sending data to server.'); + } + } + }; + // Sende die Anfrage im Hintergrund xhr.send(); updateLightState(); diff --git a/firmware/html/light_control_template.html b/firmware/html/light_control_template.html index be21046..bc62ab1 100644 --- a/firmware/html/light_control_template.html +++ b/firmware/html/light_control_template.html @@ -7,13 +7,13 @@ OFF
- +   9 %
- +   diff --git a/firmware/html/top.js b/firmware/html/top.js index 73dd43b..bf4ddaa 100644 --- a/firmware/html/top.js +++ b/firmware/html/top.js @@ -4,6 +4,34 @@ links.forEach(function(link) { event.preventDefault(); var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', 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!"; + setTimeout(function () { + button.classList.remove("success"); + button.classList.add("pure-button-primary"); + button.innerHTML = "ON"; + }, 2000); + console.log('Data successfully sent to server!'); + } else { + button.classList.remove("pure-button-primary"); + button.classList.add("error"); + button.innerHTML = "Error!"; + setTimeout(function () { + button.classList.remove("error"); + button.classList.add("pure-button-primary"); + button.innerHTML = "ON"; + }, 2000); + console.log('Error while sending data to server.'); + } + } + }; + xhr.send(); //console.log('tc=true call'); document.getElementById('tc_on').classList.add('pure-button-primary'); @@ -16,6 +44,34 @@ links.forEach(function(link) { 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!"; + setTimeout(function () { + button.classList.remove("success"); + button.classList.add("pure-button-primary"); + button.innerHTML = "OFF"; + }, 2000); + console.log('Data successfully sent to server!'); + } else { + button.classList.remove("pure-button-primary"); + button.classList.add("error"); + button.innerHTML = "Error!"; + setTimeout(function () { + button.classList.remove("error"); + button.classList.add("pure-button-primary"); + button.innerHTML = "OFF"; + }, 2000); + console.log('Error while sending data to server.'); + } + } + }; + xhr.send(); //console.log('tc=false call'); document.getElementById('tc_off').classList.add('pure-button-primary');