From 25c2e8622fa001023514a0d797258d75bcba6744 Mon Sep 17 00:00:00 2001
From: Kai Lauterbach <klaute@gmx.de>
Date: Mon, 8 May 2023 09:46:25 +0200
Subject: [PATCH] Added a toast message to the webinterface.

---
 firmware/data/bottom.js               | 41 ++++++++++++++++++++++++++-
 firmware/data/index_template_top.html |  1 +
 firmware/data/style.css               | 20 +++++++++++++
 firmware/data/top.js                  |  3 ++
 firmware/html/bottom.js               | 31 ++++++++++++++++++--
 firmware/html/index_template_top.html |  1 +
 firmware/html/style.css               | 20 +++++++++++++
 firmware/html/top.js                  |  3 ++
 8 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js
index 8459e2f..9dfd153 100644
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@@ -190,7 +190,7 @@ break;
 }
 }
 if (lowerIndex === -1 || upperIndex === -1) {
-console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
+console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
 lowerIndex = 0;
 upperIndex = 1;
 var tmp1 = time[0].split(':');
@@ -336,6 +336,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "OFF";
 }, 2000);
+showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@@ -376,6 +377,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "ON";
 }, 2000);
+showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@@ -457,22 +459,42 @@ loadTCGraphData();
 function createJsonFromTable() {
 var tableRows = document.querySelectorAll("table tr");
 var tcdata = [];
+var timeArr = [];
 for (var i = 1; i <= 10; i++) {
 var row = document.getElementById("hour" + i).parentNode;
 var hour = parseInt(row.cells[0].childNodes[0].value);
 var min = parseInt(row.cells[1].childNodes[0].value);
+timeArr.push(hour * 60 + min);
 var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55);
 var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].value) * 2.55);
 var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].value) * 2.55);
 var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].value) * 2.55);
 tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
 }
+for (var i = 0; i < timeArr.length - 1; i++) {
+if (timeArr[i] >= timeArr[i + 1]) {
+showToast('Error while verifying timing control data. The timestamps are not incrementing.', 'error');
+return null;
+}
+}
 var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
 var jsonData = {tcdata: tcdata, currenttime: currentTime};
 return JSON.stringify(jsonData);
 }
 function sendDataToServer() {
 var jsonData = createJsonFromTable();
+if (!jsonData) {
+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 = "save";
+}, 2000);
+console.log('Error while generating timing control data.');
+return;
+}
 var urlEncodedData = encodeURIComponent(jsonData);
 var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
 var xhr = new XMLHttpRequest();
@@ -499,6 +521,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "save";
 }, 2000);
+showToast('Error while sending timing control data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@@ -506,3 +529,19 @@ console.log('Error while sending data to server.');
 xhr.send();
 loadTCGraphData();
 }
+function showToast(message, type) {
+const toast = document.querySelector('.toast');
+if (toast) {
+toast.textContent = message;
+toast.classList.remove('success', 'error');
+if (type === 'success') {
+toast.classList.add('success');
+} else if (type === 'error') {
+toast.classList.add('error');
+}
+toast.style.opacity = 1;
+setTimeout(() => {
+toast.style.opacity = 0;
+}, 5000);
+}
+}
diff --git a/firmware/data/index_template_top.html b/firmware/data/index_template_top.html
index 66e10a9..10971ee 100644
--- a/firmware/data/index_template_top.html
+++ b/firmware/data/index_template_top.html
@@ -15,6 +15,7 @@
 <body>
 <fieldset>
 <h3>{{LIGHT_NAME}}</h3>
+<div class="toast"></div>
 <div class="pure-form pure-form-aligned">
 <div class="pure-controls">
 <a href="/update" class="pure-button">update</a>
diff --git a/firmware/data/style.css b/firmware/data/style.css
index 9788312..caa7f53 100644
--- a/firmware/data/style.css
+++ b/firmware/data/style.css
@@ -43,4 +43,24 @@ background-color: #333;
 }
 .top-align {
 vertical-align: top;
+}
+.toast {
+position: fixed;
+bottom: 10px;
+left: 50%;
+transform: translateX(-50%);
+padding: 10px;
+border-radius: 5px;
+color: #fff;
+font-size: 16px;
+font-weight: bold;
+text-align: center;
+opacity: 0;
+transition: opacity 0.5s ease-in-out;
+}
+.toast.success {
+background-color: #4CAF50;
+}
+.toast.error {
+background-color: #f44336;
 }
\ No newline at end of file
diff --git a/firmware/data/top.js b/firmware/data/top.js
index 7c1839a..559e94e 100644
--- a/firmware/data/top.js
+++ b/firmware/data/top.js
@@ -26,6 +26,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "ON";
 }, 2000);
+showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@@ -63,6 +64,7 @@ button.classList.remove("error");
 button.classList.add("pure-button-primary");
 button.innerHTML = "OFF";
 }, 2000);
+showToast('Error while sending data to server.', 'error');
 console.log('Error while sending data to server.');
 }
 }
@@ -84,6 +86,7 @@ if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 }).catch(error => {
+showToast(`Error sending slider value to ${url}: ${error}`, 'error');
 console.error(`Error sending slider value to ${url}: ${error}`);
 });
 }, 500);
diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js
index 3eb1997..3fa0ff7 100644
--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@@ -225,7 +225,7 @@ function loadTCGraphData() {
         //console.log('lowerIndex=' + lowerIndex);
         //console.log('upperIndex=' + upperIndex);
         if (lowerIndex === -1 || upperIndex === -1) {
-            console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
+            console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
             lowerIndex = 0;
             upperIndex = 1;
             var tmp1 = time[0].split(':');
@@ -389,6 +389,7 @@ links.forEach(function(link) {
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "OFF";
                     }, 2000);
+                    showToast('Error while sending data to server.', 'error');
                     console.log('Error while sending data to server.');
                 }
             }
@@ -437,6 +438,7 @@ links.forEach(function(link) {
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "ON";
                     }, 2000);
+                    showToast('Error while sending data to server.', 'error');
                     console.log('Error while sending data to server.');
                 }
             }
@@ -575,7 +577,7 @@ function createJsonFromTable() {
     // Überprüft, ob die Zeitangaben von datensatz i=0 bis i=9 aufsteigend sind
     for (var i = 0; i < timeArr.length - 1; i++) {
       if (timeArr[i] >= timeArr[i + 1]) {
-        console.log("Fehler: Zeitangaben sind nicht aufsteigend.");
+        showToast('Error while verifying timing control data. The timestamps are not incrementing.', 'error');
         return null;
       }
     }
@@ -598,7 +600,7 @@ function sendDataToServer() {
           button.classList.add("pure-button-primary");
           button.innerHTML = "save";
         }, 2000);
-        console.log('Error while sending data to server.');
+        console.log('Error while generating timing control data.');
         return;
     }
 
@@ -628,6 +630,7 @@ function sendDataToServer() {
                     button.classList.add("pure-button-primary");
                     button.innerHTML = "save";
                 }, 2000);
+                showToast('Error while sending timing control data to server.', 'error');
                 console.log('Error while sending data to server.');
             }
         }
@@ -635,3 +638,25 @@ function sendDataToServer() {
     xhr.send();
     loadTCGraphData(); // update the tc data graph
 }
+
+function showToast(message, type) {
+    const toast = document.querySelector('.toast');
+    
+    if (toast) {
+      toast.textContent = message;
+      toast.classList.remove('success', 'error');
+      
+      if (type === 'success') {
+        toast.classList.add('success');
+      } else if (type === 'error') {
+        toast.classList.add('error');
+      }
+      
+      toast.style.opacity = 1;
+      
+      setTimeout(() => {
+        toast.style.opacity = 0;
+      }, 5000);
+    }
+  }
+  
\ No newline at end of file
diff --git a/firmware/html/index_template_top.html b/firmware/html/index_template_top.html
index 5d4956f..ed04cf1 100644
--- a/firmware/html/index_template_top.html
+++ b/firmware/html/index_template_top.html
@@ -15,6 +15,7 @@
 <body>
     <fieldset>
         <h3>{{LIGHT_NAME}}</h3>
+        <div class="toast"></div>
         <div class="pure-form pure-form-aligned">
             <div class="pure-controls">
                 <a href="/update" class="pure-button">update</a>
diff --git a/firmware/html/style.css b/firmware/html/style.css
index 9788312..caa7f53 100644
--- a/firmware/html/style.css
+++ b/firmware/html/style.css
@@ -43,4 +43,24 @@ background-color: #333;
 }
 .top-align {
 vertical-align: top;
+}
+.toast {
+position: fixed;
+bottom: 10px;
+left: 50%;
+transform: translateX(-50%);
+padding: 10px;
+border-radius: 5px;
+color: #fff;
+font-size: 16px;
+font-weight: bold;
+text-align: center;
+opacity: 0;
+transition: opacity 0.5s ease-in-out;
+}
+.toast.success {
+background-color: #4CAF50;
+}
+.toast.error {
+background-color: #f44336;
 }
\ No newline at end of file
diff --git a/firmware/html/top.js b/firmware/html/top.js
index bf4ddaa..0f07a78 100644
--- a/firmware/html/top.js
+++ b/firmware/html/top.js
@@ -27,6 +27,7 @@ links.forEach(function(link) {
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "ON";
                     }, 2000);
+                    showToast('Error while sending data to server.', 'error');
                     console.log('Error while sending data to server.');
                 }
             }
@@ -67,6 +68,7 @@ links.forEach(function(link) {
                         button.classList.add("pure-button-primary");
                         button.innerHTML = "OFF";
                     }, 2000);
+                    showToast('Error while sending data to server.', 'error');
                     console.log('Error while sending data to server.');
                 }
             }
@@ -92,6 +94,7 @@ function sendSliderValue(x) {
             }
             //console.log(`Sent slider value ${value} to ${url}`);
         }).catch(error => {
+            showToast(`Error sending slider value to ${url}: ${error}`, 'error');
             console.error(`Error sending slider value to ${url}: ${error}`);
         });
     }, 500);