From 18faece660e0f5301980b2fefd1f89278d12b107 Mon Sep 17 00:00:00 2001
From: Djuri Baars <dsbaars@users.noreply.github.com>
Date: Sat, 7 Oct 2023 12:22:53 +0200
Subject: [PATCH] Added screen timer toggle to WebUI

---
 data/package.json       | 12 ++++++------
 data/src/css/style.scss |  4 ++++
 data/src/index.html     | 17 +++++++++++++++--
 src/lib/webserver.cpp   |  2 ++
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/data/package.json b/data/package.json
index 15a0018..2ef41d5 100644
--- a/data/package.json
+++ b/data/package.json
@@ -5,19 +5,19 @@
     "build": "node esbuild.mjs"
   },
   "dependencies": {
-    "esbuild": "0.18.0"
+    "esbuild": "0.19.4"
   },
   "devDependencies": {
     "@chialab/esbuild-plugin-html": "^0.17.2",
     "@craftamap/esbuild-plugin-html": "^0.5.0",
     "@esbuilder/html": "^0.0.6",
-    "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.3.0",
+    "autoprefixer": "^10.4.16",
+    "bootstrap": "^5.3.2",
     "esbuild-plugin-clean": "^1.0.1",
     "esbuild-plugin-handlebars": "^1.0.2",
-    "esbuild-sass-plugin": "^2.9.0",
+    "esbuild-sass-plugin": "^2.16.0",
     "handlebars": "^4.7.7",
-    "postcss": "^8.4.24",
-    "typescript": "^5.1.3"
+    "postcss": "^8.4.31",
+    "typescript": "^5.1.6"
   }
 }
diff --git a/data/src/css/style.scss b/data/src/css/style.scss
index d66eb55..1de809d 100644
--- a/data/src/css/style.scss
+++ b/data/src/css/style.scss
@@ -113,4 +113,8 @@ nav {
 
 #customText {
     text-transform: uppercase;
+}
+
+#toggleTimerArea {
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/data/src/index.html b/data/src/index.html
index c0d39bb..f59c60d 100644
--- a/data/src/index.html
+++ b/data/src/index.html
@@ -44,7 +44,19 @@
             {{#each ledStatus }}
               <div style="background: #{{ this }}">&nbsp;</div>
             {{/each}}
+            
             {{/if}}
+            <div>
+              <p>Screen cycle: 
+                <span onclick="toggleTimer({{ timerRunning }})" id="toggleTimerArea">
+                {{#if timerRunning}}
+                &#9205;
+                {{else}}
+                &#9208;
+                {{/if}}
+                </span>
+              </p>
+            </div>
           </div>
         </div>
       </script>
@@ -146,7 +158,8 @@
             <div class="row">
               <label class="col-sm-6 col-form-label" for="ledBrightness">LED brightness</label>
               <div class="col-sm-6">
-                  <input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0" max="255">
+                <input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
+                  max="255">
               </div>
             </div>
             <div class="row">
@@ -215,7 +228,7 @@
   <footer>
     <small>
       <span id="gitRev"></span>
-      <span id="lastBuildTime"></span>  
+      <span id="lastBuildTime"></span>
     </small>
   </footer>
   <script src="/js/script.js"></script>
diff --git a/src/lib/webserver.cpp b/src/lib/webserver.cpp
index dc4fa21..70c6a9c 100644
--- a/src/lib/webserver.cpp
+++ b/src/lib/webserver.cpp
@@ -73,6 +73,8 @@ void onApiStatus(AsyncWebServerRequest *request)
 
     DynamicJsonDocument root(1024);
     root["currentScreen"] = String(getCurrentScreen());
+    root["timerRunning"] = timerRunning;
+
     JsonArray data = root.createNestedArray("data");
     JsonArray rendered = root.createNestedArray("rendered");
     String epdContent[7];