From 1ca1f3e6e3ada516f5f90beaaa4132527ce62eae Mon Sep 17 00:00:00 2001
From: Kai Lauterbach <klaute@gmx.de>
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 @@
 <a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
 </div>
 <div class="pure-control-group">
-<label for="bri{{LIGHT_NUMBER_DEC}}">Bri</label>
+<label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label>
 <input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
 &nbsp;
 <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
 %
 <br>
-<label for="light{{LIGHT_NUMBER_DEC}}_pwm">PWM-Value</label>
+<label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label>
 <input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
 &nbsp;
 <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
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 @@
                             <a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
                         </div>
                         <div class="pure-control-group">
-                            <label for="bri{{LIGHT_NUMBER_DEC}}">Bri</label>
+                            <label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label>
                             <input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
                             &nbsp;
                             <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
                             %
                             <br>
-                            <label for="light{{LIGHT_NUMBER_DEC}}_pwm">PWM-Value</label>
+                            <label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label>
                             <input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
                             &nbsp;
                             <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
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');