From 55028512532c325f9b8e2596fac2752b9d1968f9 Mon Sep 17 00:00:00 2001
From: Daniel <dalathegreat@gmail.com>
Date: Sun, 11 Feb 2024 22:27:18 +0200
Subject: [PATCH 1/3] Fix formatting for events table

---
 .../src/devboard/webserver/events_html.cpp    | 77 +++++++++++++++----
 .../src/devboard/webserver/index_html.cpp     | 26 ++++++-
 2 files changed, 87 insertions(+), 16 deletions(-)

diff --git a/Software/src/devboard/webserver/events_html.cpp b/Software/src/devboard/webserver/events_html.cpp
index 597245e0..4f6add2e 100644
--- a/Software/src/devboard/webserver/events_html.cpp
+++ b/Software/src/devboard/webserver/events_html.cpp
@@ -8,19 +8,69 @@ const char EVENTS_HTML_START[] = R"=====(
     .event { display: flex; flex-wrap: wrap; border: 1px solid white; padding: 10px; }
     .event > div { flex: 1; min-width: 100px; max-width: 90%; word-break: break-word; }
 </style>
-<div style='background-color: #303E47; padding: 10px; margin-bottom: 10px;border-radius: 50px'>
+<div style='background-color: #303E47; padding: 10px; margin-bottom: 10px;border-radius: 25px'>
 <div class="event-log">
-<div class="event">
-<div>Event Type</div><div>Severity</div><div>Last Event</div><div>Count</div><div>Data</div><div>Message</div>
+<div class="event" style="background-color: #1E2C33; font-weight: bold;">
+    <div>Event Type</div>
+    <div>Severity</div>
+    <div>Last Event</div>
+    <div>Count</div>
+    <div>Data</div>
+    <div>Message</div>
 </div>
 )=====";
 const char EVENTS_HTML_END[] = R"=====(
 </div></div>
 <button onclick='goToMainPage()'>Back to main page</button>
-<script>function displayEventLog(){document.querySelector(".event-log");var i=(new Date).getTime()/1e3;document.querySelectorAll(".event").forEach(function(e){var n=e.querySelector(".last-event-seconds-ago"),t=e.querySelector(".timestamp");if(n&&t){var o=parseInt(n.innerText,10),a=parseFloat(t.innerText),r=new Date(1e3*(i-a+o)).toLocaleString();n.innerText=r}})}function goToMainPage(){window.location.href="/"}window.onload=function(){displayEventLog()}</script>
+<style> // This section makes each element alternate betweeen two colors
+    .event:nth-child(even) { background-color: #455A64; }
+    .event:nth-child(odd) { background-color: #394B52; }
+</style>
+<script>
+function displayEventLog() {
+    var eventLogElement = document.querySelector('.event-log');
+
+    // Get the current time on the client side
+    var currentTime = new Date().getTime() / 1000; // Convert milliseconds to seconds
+
+    // Loop through the events and update the "Last Event" column
+    var events = document.querySelectorAll('.event');
+    events.forEach(function(event) {
+        var secondsAgoElement = event.querySelector('.last-event-seconds-ago');
+        var timestampElement = event.querySelector('.timestamp');
+
+        if (secondsAgoElement && timestampElement) {
+            var secondsAgo = parseInt(secondsAgoElement.innerText, 10);
+            var uptimeTimestamp = parseFloat(timestampElement.innerText); // Parse as float to handle seconds with decimal parts
+
+            // Calculate the actual system time based on the client-side current time
+            var actualTime = new Date((currentTime - uptimeTimestamp + secondsAgo) * 1000);
+
+            // Format the date and time
+            var formattedTime = actualTime.toLocaleString();
+
+            // Update the "Last Event" column with the formatted time
+            secondsAgoElement.innerText = formattedTime;
+        }
+    });
+}
+
+// Call the displayEventLog function when the page is loaded
+window.onload = function() {
+    displayEventLog();
+};
+
+function goToMainPage() {
+    window.location.href = '/';
+}
+</script>
 )=====";
 
 /* The above <script> section is minified to save storage and increase performance, here is the full function: 
+<style>
+    .event:nth-child(even) { background-color: #455A64; }
+    .event:nth-child(odd) { background-color: #394B52; }
+</style>
 <script>
 function displayEventLog() {
     var eventLogElement = document.querySelector('.event-log');
@@ -72,16 +122,15 @@ String events_processor(const String& var) {
                      " count: " + String(entries[i].occurences) + " seconds: " + String(entries[i].timestamp) +
                      " data: " + String(entries[i].data));
       if (entries[i].occurences > 0) {
-        content.concat("<div class='event'>");
-        content.concat("<div>" + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
-        content.concat("<div>" + String(get_led_color_display_text(entries[i].led_color)) + "</div>");
-        content.concat("<div class='last-event-seconds-ago'>" + String((millis() / 1000) - entries[i].timestamp) +
-                       "</div>");
-        content.concat("<div>" + String(entries[i].occurences) + "</div>");
-        content.concat("<div>" + String(entries[i].data) + "</div>");
-        content.concat("<div>" + String(get_event_message(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
-        content.concat("<div class='timestamp'>" + String(entries[i].timestamp) + "</div>");
-        content.concat("</div>");  // End of event row
+content.concat("<div class='event'>");
+content.concat("<div>" + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
+content.concat("<div>" + String(get_led_color_display_text(entries[i].led_color)) + "</div>");
+content.concat("<div class='last-event-seconds-ago'>" + String((millis() / 1000) - entries[i].timestamp) + "</div>");
+content.concat("<div>" + String(entries[i].occurences) + "</div>");
+content.concat("<div>" + String(entries[i].data) + "</div>");
+content.concat("<div>" + String(get_event_message(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
+content.concat("<div class='timestamp' style='display:none;'>" + String(entries[i].timestamp) + "</div>");
+content.concat("</div>");  // End of event row
       }
     }
     content.concat(FPSTR(EVENTS_HTML_END));
diff --git a/Software/src/devboard/webserver/index_html.cpp b/Software/src/devboard/webserver/index_html.cpp
index c7a11e90..6d77bad6 100644
--- a/Software/src/devboard/webserver/index_html.cpp
+++ b/Software/src/devboard/webserver/index_html.cpp
@@ -1,5 +1,27 @@
 const char index_html[] = R"rawliteral(
-<!DOCTYPE HTML><html><head><title>Battery Emulator</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html{font-family:Arial;display:inline-block;text-align:center}h2{font-size:3rem}p{font-size:3rem}body{max-width:600px;margin:0 auto;padding-bottom:25px}.switch{position:relative;display:inline-block;width:120px;height:68px}.switch input{display:none}.slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:6px}.slider:before{position:absolute;content:"";height:52px;width:52px;left:8px;bottom:8px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:3px}input:checked+.slider{background-color:#b30000}input:checked+.slider:before{-webkit-transform:translateX(52px);-ms-transform:translateX(52px);transform:translateX(52px)}</style></head><body><h2>Battery Emulator</h2>%PLACEHOLDER%</body></html>
+<!DOCTYPE HTML><html>
+<head>
+  <title>Battery Emulator</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    html {font-family: Arial; display: inline-block; text-align: center;}
+    h2 {font-size: 3.0rem;}
+    p {font-size: 3.0rem;}
+    body {max-width: 800px; margin:0px auto; padding-bottom: 25px;}
+    .switch {position: relative; display: inline-block; width: 120px; height: 68px} 
+    .switch input {display: none}
+    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
+    .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
+    input:checked+.slider {background-color: #b30000}
+    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
+  </style>
+</head>
+<body>
+  <h2>Battery Emulator</h2>
+  %PLACEHOLDER%
+</script>
+</body>
+</html>
 )rawliteral";
 
 /* The above code is minified to increase performance. Here is the full HTML function:
@@ -11,7 +33,7 @@ const char index_html[] = R"rawliteral(
     html {font-family: Arial; display: inline-block; text-align: center;}
     h2 {font-size: 3.0rem;}
     p {font-size: 3.0rem;}
-    body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
+    body {max-width: 800px; margin:0px auto; padding-bottom: 25px;}
     .switch {position: relative; display: inline-block; width: 120px; height: 68px} 
     .switch input {display: none}
     .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}

From 5204da74a02b6829c12b01fc50acb035791c19a4 Mon Sep 17 00:00:00 2001
From: Daniel <dalathegreat@gmail.com>
Date: Sun, 11 Feb 2024 23:51:23 +0200
Subject: [PATCH 2/3] Fix bug that caused clock to run

---
 .../src/devboard/webserver/events_html.cpp    | 129 +++++-------------
 1 file changed, 32 insertions(+), 97 deletions(-)

diff --git a/Software/src/devboard/webserver/events_html.cpp b/Software/src/devboard/webserver/events_html.cpp
index 4f6add2e..185d20c4 100644
--- a/Software/src/devboard/webserver/events_html.cpp
+++ b/Software/src/devboard/webserver/events_html.cpp
@@ -2,98 +2,61 @@
 #include <Arduino.h>
 
 const char EVENTS_HTML_START[] = R"=====(
-<style>
-    body { background-color: black; color: white; }
-    .event-log { display: flex; flex-direction: column; }
-    .event { display: flex; flex-wrap: wrap; border: 1px solid white; padding: 10px; }
-    .event > div { flex: 1; min-width: 100px; max-width: 90%; word-break: break-word; }
-</style>
-<div style='background-color: #303E47; padding: 10px; margin-bottom: 10px;border-radius: 25px'>
-<div class="event-log">
-<div class="event" style="background-color: #1E2C33; font-weight: bold;">
-    <div>Event Type</div>
-    <div>Severity</div>
-    <div>Last Event</div>
-    <div>Count</div>
-    <div>Data</div>
-    <div>Message</div>
-</div>
+<style>body{background-color:#000;color:#fff}.event-log{display:flex;flex-direction:column}.event{display:flex;flex-wrap:wrap;border:1px solid #fff;padding:10px}.event>div{flex:1;min-width:100px;max-width:90%;word-break:break-word}</style><div style="background-color:#303e47;padding:10px;margin-bottom:10px;border-radius:25px"><div class="event-log"><div class="event" style="background-color:#1e2c33;font-weight:700"><div>Event Type</div><div>Severity</div><div>Last Event</div><div>Count</div><div>Data</div><div>Message</div></div>
 )=====";
 const char EVENTS_HTML_END[] = R"=====(
 </div></div>
 <button onclick='goToMainPage()'>Back to main page</button>
-<style> // This section makes each element alternate betweeen two colors
-    .event:nth-child(even) { background-color: #455A64; }
-    .event:nth-child(odd) { background-color: #394B52; }
-</style>
-<script>
-function displayEventLog() {
-    var eventLogElement = document.querySelector('.event-log');
-
-    // Get the current time on the client side
-    var currentTime = new Date().getTime() / 1000; // Convert milliseconds to seconds
-
-    // Loop through the events and update the "Last Event" column
-    var events = document.querySelectorAll('.event');
-    events.forEach(function(event) {
-        var secondsAgoElement = event.querySelector('.last-event-seconds-ago');
-        var timestampElement = event.querySelector('.timestamp');
-
-        if (secondsAgoElement && timestampElement) {
-            var secondsAgo = parseInt(secondsAgoElement.innerText, 10);
-            var uptimeTimestamp = parseFloat(timestampElement.innerText); // Parse as float to handle seconds with decimal parts
-
-            // Calculate the actual system time based on the client-side current time
-            var actualTime = new Date((currentTime - uptimeTimestamp + secondsAgo) * 1000);
-
-            // Format the date and time
-            var formattedTime = actualTime.toLocaleString();
-
-            // Update the "Last Event" column with the formatted time
-            secondsAgoElement.innerText = formattedTime;
-        }
-    });
-}
-
-// Call the displayEventLog function when the page is loaded
-window.onload = function() {
-    displayEventLog();
-};
-
-function goToMainPage() {
-    window.location.href = '/';
-}
-</script>
+<style>.event:nth-child(even){background-color:#455a64}.event:nth-child(odd){background-color:#394b52}</style>
+<script>function displayEventLog(){document.querySelector(".event-log");var i=(new Date).getTime()/1e3;document.querySelectorAll(".event").forEach(function(e){var n=e.querySelector(".last-event-seconds-ago"),t=e.querySelector(".timestamp");if(n&&t){var o=parseInt(n.innerText,10),a=parseFloat(t.innerText),r=new Date(1e3*(i-a+o)).toLocaleString();n.innerText=r}})}function goToMainPage(){window.location.href="/"}window.onload=function(){displayEventLog()}</script>
 )=====";
 
-/* The above <script> section is minified to save storage and increase performance, here is the full function: 
-<style>
-    .event:nth-child(even) { background-color: #455A64; }
-    .event:nth-child(odd) { background-color: #394B52; }
-</style>
+String events_processor(const String& var) {
+  if (var == "PLACEHOLDER") {
+    String content = "";
+    content.reserve(5000);
+    // Page format
+    content.concat(FPSTR(EVENTS_HTML_START));
+    for (int i = 0; i < EVENT_NOF_EVENTS; i++) {
+      Serial.println("Event: " + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) +
+                     " count: " + String(entries[i].occurences) + " seconds: " + String(entries[i].timestamp) +
+                     " data: " + String(entries[i].data));
+      if (entries[i].occurences > 0) {
+        content.concat("<div class='event'>");
+        content.concat("<div>" + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
+        content.concat("<div>" + String(get_led_color_display_text(entries[i].led_color)) + "</div>");
+        content.concat("<div class='last-event-seconds-ago'>" + String(entries[i].timestamp) + "</div>");
+        content.concat("<div>" + String(entries[i].occurences) + "</div>");
+        content.concat("<div>" + String(entries[i].data) + "</div>");
+        content.concat("<div>" + String(get_event_message(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
+        content.concat("<div class='timestamp' style='display:none;'>" + String(millis() / 1000) + "</div>");
+        content.concat("</div>");  // End of event row
+      }
+    }
+    content.concat(FPSTR(EVENTS_HTML_END));
+    return content;
+  }
+  return String();
+}
+
+/* Script for displaying event log before it gets minified
 <script>
 function displayEventLog() {
     var eventLogElement = document.querySelector('.event-log');
-
     // Get the current time on the client side
     var currentTime = new Date().getTime() / 1000; // Convert milliseconds to seconds
-
     // Loop through the events and update the "Last Event" column
     var events = document.querySelectorAll('.event');
     events.forEach(function(event) {
         var secondsAgoElement = event.querySelector('.last-event-seconds-ago');
         var timestampElement = event.querySelector('.timestamp');
-
         if (secondsAgoElement && timestampElement) {
             var secondsAgo = parseInt(secondsAgoElement.innerText, 10);
             var uptimeTimestamp = parseFloat(timestampElement.innerText); // Parse as float to handle seconds with decimal parts
-
             // Calculate the actual system time based on the client-side current time
             var actualTime = new Date((currentTime - uptimeTimestamp + secondsAgo) * 1000);
-
             // Format the date and time
             var formattedTime = actualTime.toLocaleString();
-
             // Update the "Last Event" column with the formatted time
             secondsAgoElement.innerText = formattedTime;
         }
@@ -110,31 +73,3 @@ function goToMainPage() {
 }
 </script>
 */
-
-String events_processor(const String& var) {
-  if (var == "PLACEHOLDER") {
-    String content = "";
-    content.reserve(5000);
-    // Page format
-    content.concat(FPSTR(EVENTS_HTML_START));
-    for (int i = 0; i < EVENT_NOF_EVENTS; i++) {
-      Serial.println("Event: " + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) +
-                     " count: " + String(entries[i].occurences) + " seconds: " + String(entries[i].timestamp) +
-                     " data: " + String(entries[i].data));
-      if (entries[i].occurences > 0) {
-content.concat("<div class='event'>");
-content.concat("<div>" + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
-content.concat("<div>" + String(get_led_color_display_text(entries[i].led_color)) + "</div>");
-content.concat("<div class='last-event-seconds-ago'>" + String((millis() / 1000) - entries[i].timestamp) + "</div>");
-content.concat("<div>" + String(entries[i].occurences) + "</div>");
-content.concat("<div>" + String(entries[i].data) + "</div>");
-content.concat("<div>" + String(get_event_message(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
-content.concat("<div class='timestamp' style='display:none;'>" + String(entries[i].timestamp) + "</div>");
-content.concat("</div>");  // End of event row
-      }
-    }
-    content.concat(FPSTR(EVENTS_HTML_END));
-    return content;
-  }
-  return String();
-}

From e2b9222366dd579179e1181632e7e7d345b0a374 Mon Sep 17 00:00:00 2001
From: Daniel <dalathegreat@gmail.com>
Date: Sun, 11 Feb 2024 23:54:02 +0200
Subject: [PATCH 3/3] Restore minification on index_html

---
 .../src/devboard/webserver/index_html.cpp     | 24 +------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/Software/src/devboard/webserver/index_html.cpp b/Software/src/devboard/webserver/index_html.cpp
index 6d77bad6..8ab7cf00 100644
--- a/Software/src/devboard/webserver/index_html.cpp
+++ b/Software/src/devboard/webserver/index_html.cpp
@@ -1,27 +1,5 @@
 const char index_html[] = R"rawliteral(
-<!DOCTYPE HTML><html>
-<head>
-  <title>Battery Emulator</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    html {font-family: Arial; display: inline-block; text-align: center;}
-    h2 {font-size: 3.0rem;}
-    p {font-size: 3.0rem;}
-    body {max-width: 800px; margin:0px auto; padding-bottom: 25px;}
-    .switch {position: relative; display: inline-block; width: 120px; height: 68px} 
-    .switch input {display: none}
-    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
-    .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
-    input:checked+.slider {background-color: #b30000}
-    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
-  </style>
-</head>
-<body>
-  <h2>Battery Emulator</h2>
-  %PLACEHOLDER%
-</script>
-</body>
-</html>
+<!DOCTYPE HTML><html><head><title>Battery Emulator</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html{font-family:Arial;display:inline-block;text-align:center}h2{font-size:3rem}p{font-size:3rem}body{max-width:800px;margin:0 auto;padding-bottom:25px}.switch{position:relative;display:inline-block;width:120px;height:68px}.switch input{display:none}.slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:6px}.slider:before{position:absolute;content:"";height:52px;width:52px;left:8px;bottom:8px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:3px}input:checked+.slider{background-color:#b30000}input:checked+.slider:before{-webkit-transform:translateX(52px);-ms-transform:translateX(52px);transform:translateX(52px)}</style></head><body><h2>Battery Emulator</h2>%PLACEHOLDER%</body></html>
 )rawliteral";
 
 /* The above code is minified to increase performance. Here is the full HTML function: