From 07144f6b6ac8fe59019956d4bc1c70b391f95cfd Mon Sep 17 00:00:00 2001
From: Djuri Baars <dsbaars@users.noreply.github.com>
Date: Mon, 13 Nov 2023 14:01:20 +0100
Subject: [PATCH] UI improvements

---
 data/src/css/style.scss |  26 ++++++++--
 data/src/index.html     | 102 ++++++++++++++++++++++------------------
 data/src/js/script.ts   |   8 ++--
 src/lib/led_handler.cpp |   5 +-
 4 files changed, 85 insertions(+), 56 deletions(-)

diff --git a/data/src/css/style.scss b/data/src/css/style.scss
index 194a86e..2fb55d2 100644
--- a/data/src/css/style.scss
+++ b/data/src/css/style.scss
@@ -17,6 +17,8 @@ $form-range-track-bg: #fff;
 @import "../node_modules/bootstrap/scss/grid";
 @import "../node_modules/bootstrap/scss/forms";
 @import "../node_modules/bootstrap/scss/buttons";
+@import "../node_modules/bootstrap/scss/button-group";
+
 @import "../node_modules/bootstrap/scss/navbar";
 @import "../node_modules/bootstrap/scss/nav";
 @import "../node_modules/bootstrap/scss/card";
@@ -54,6 +56,24 @@ nav {
     margin: 0 auto;
 }
 
+div#output .btclock {
+    border: 1px solid darkgray;
+    background: #000;
+    border-radius: 5px;
+    padding: 10px;
+    max-width: 700px;
+    margin: 0 auto;
+
+    .digit,
+    .splitText
+    {
+        border: 2px solid gold;
+        border-radius: 8px;
+        min-width: 70px;
+        text-align: center;
+    }
+}
+
 .btclock {
     display: flex;
     flex-direction: row;
@@ -96,9 +116,9 @@ nav {
 }
 
 .splitText {
-    font-size: 2.2rem;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    font-size: 1.8rem;
+    padding-top: 19px !important;
+    padding-bottom: 20px !important;
     text-align: center;
 }
 
diff --git a/data/src/index.html b/data/src/index.html
index ec16f39..0d9e73f 100644
--- a/data/src/index.html
+++ b/data/src/index.html
@@ -22,7 +22,7 @@
         <div class="entry">
           <h1>Status</h1>
           <div class="body">
-            <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+            <div class="btn-group btn-group-sm"" role="group" aria-label="Screens toggle button group">
               {{#each screens }}
               <input type="radio" class="btn-check" name="btnradio" id="btnradio{{ @index }}" autocomplete="off" {{#ifEquals @index ../currentScreen }} checked {{/ifEquals}} onclick="changeScreen({{ @index }})">
               <label class="btn btn-outline-primary" for="btnradio{{ @index }}">{{ this }}</label>
@@ -96,7 +96,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-sm-3">
-        <div class="h-100 p-3 border bg-light">
+        <div class="p-3 border bg-light">
           <h1>Custom text</h1>
           <form name="customText" id="customTextForm">
             <div class="row">
@@ -133,7 +133,7 @@
           <button type="button" class="btn btn-warning" id="forceFullRefresh">Force full refresh</button>
 
         </div>
-        
+
       </div>
       <div class="col-sm-5">
         <div id="output" class="p-3 border bg-light">Loading, please wait...</div>
@@ -143,48 +143,56 @@
           <h1>Settings</h1>
           <form method="post" action="/api/settings" name="settings" id="settingsForm">
             <div class="row">
-              <label for="fgColor" class="col-sm-6 col-form-label">Text color</label>
+              <label for="fgColor" class="col-sm-6 col-form-label col-form-label-sm">Text color</label>
               <div class="col-sm-6">
-                <select class="form-select" id="fgColor" name="fgColor">
-                  <option value="0xF800">Red</option>
+                <select class="form-select form-select-sm" id="fgColor" name="fgColor">
                   <option value="0xFFFF">White</option>
                   <option value="0x0">Black</option>
                 </select>
               </div>
             </div>
             <div class="row">
-              <label for="bgColor" class="col-sm-6 col-form-label">Background color</label>
+              <label for="bgColor" class="col-sm-6 col-form-label col-form-label-sm">Background color</label>
               <div class="col-sm-6">
-                <select class="form-select" id="bgColor" name="bgColor">
-                  <option value="0xF800">Red</option>
+                <select class="form-select form-select-sm" id="bgColor" name="bgColor">
                   <option value="0xFFFF">White</option>
                   <option value="0x0">Black</option>
                 </select>
               </div>
             </div>
             <div class="row">
-              <label for="timePerScreen" class="col-sm-6 col-form-label">Time per screen</label>
+              <label for="timePerScreen" class="col-sm-6 col-form-label col-form-label-sm">Time per screen</label>
               <div class="col-sm-6">
-                <div class="input-group mb-3">
-                  <input type="text" name="timePerScreen" id="timePerScreen" class="form-control">
+                <div class="input-group input-group-sm">
+                  <input type="number" min="1" name="timePerScreen" id="timePerScreen" class="form-control">
                   <span class="input-group-text">minutes</span>
                 </div>
 
               </div>
             </div>
             <div class="row">
-              <label for="fullRefreshMin" class="col-sm-6 col-form-label">Full refresh every</label>
+              <label for="fullRefreshMin" class="col-sm-6 col-form-label col-form-label-sm">Full refresh every</label>
               <div class="col-sm-6">
-                <div class="input-group mb-3">
-                  <input type="text" name="fullRefreshMin" id="fullRefreshMin" class="form-control">
+                <div class="input-group input-group-sm">
+                  <input type="number" min="1" name="fullRefreshMin" id="fullRefreshMin" class="form-control">
                   <span class="input-group-text">minutes</span>
                 </div>
               </div>
             </div>
             <div class="row">
-              <label for="tzOffset" class="col-sm-6 col-form-label">Timezone offset</label>
+              <label for="minSecPriceUpd" class="col-sm-6 col-form-label  col-form-label-sm">Time between price updates</label>
               <div class="col-sm-6 mb-3">
-                <div class="input-group">
+                <div class="input-group input-group-sm">
+                  <input type="number" name="minSecPriceUpd" min="1" id="minSecPriceUpd" class="form-control">
+                  <span class="input-group-text">seconds</span>
+                </div>
+                <div class="form-text">Short amounts might shorten lifespan.</div>
+              </div>
+            </div>
+            <div class="row">
+              <label for="tzOffset" class="col-sm-6 col-form-label col-form-label-sm">Timezone offset</label>
+              <div class="col-sm-6">
+                <div class="input-group input-group-sm">
                   <input type="number" name="tzOffset" id="tzOffset" class="form-control">
                   <span class="input-group-text">min</span>
                   <button class="btn btn-outline-secondary" type="button" id="getTzOffsetBtn">Auto</button>
@@ -192,14 +200,18 @@
                 <div class="form-text">A restart is required to apply TZ offset.</div>
               </div>
             </div>
+            
             <div class="row">
-              <label for="minSecPriceUpd" class="col-sm-6 col-form-label">Time between price updates</label>
-              <div class="col-sm-6 mb-3">
-                <div class="input-group">
-                  <input type="number" name="minSecPriceUpd" id="minSecPriceUpd" class="form-control">
-                  <span class="input-group-text">sec</span>
-                </div>
-                <div class="form-text">Short amounts might shorten lifespan.</div>
+              <label class="col-sm-6 col-form-label col-form-label-sm" 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">
+              </div>
+            </div>
+            <div class="row">
+              <label for="mempoolInstance" class="col-sm-6 col-form-label col-form-label-sm">Mempool Instance</label>
+              <div class="col-sm-6">
+                <input type="text" name="mempoolInstance" id="mempoolInstance" class="form-control">
               </div>
             </div>
             <div class="row">
@@ -221,7 +233,8 @@
             <div class="row">
               <div class="col-sm-12">
                 <div class="form-check form-switch">
-                  <input class="form-check-input" type="checkbox" id="stealFocusOnBlock" name="stealFocusOnBlock" value="1">
+                  <input class="form-check-input" type="checkbox" id="stealFocusOnBlock" name="stealFocusOnBlock"
+                    value="1">
                   <label class="form-check-label" for="stealFocusOnBlock">Steal focus on new block</label>
                 </div>
               </div>
@@ -249,35 +262,30 @@
                   <label class="form-check-label" for="mdnsEnabled">mDNS (restart required)</label>
                 </div>
               </div>
-            <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">
-              </div>
-            </div>
-            <div class="row">
-              <label for="mempoolInstance" class="col-sm-6 col-form-label">Mempool Instance</label>
-              <div class="col-sm-6">
-                <input type="text" name="mempoolInstance" id="mempoolInstance" class="form-control">
-              </div>
-            </div>
-            <script id="screens-template" type="text/x-handlebars-template">
-              {{#each screens }}
+              
+              <script id="screens-template" type="text/x-handlebars-template">
               <div class="row">
-                <div class="col-sm-12">
+                <div class="col-sm-6">
+              {{#each screens }}
                   <div class="form-check form-switch">
                     <input class="form-check-input" type="checkbox" id="screen{{id}}" name="screen[{{id}}]" value="1" {{#if enabled}}checked{{/if}}>
                     <label class="form-check-label" for="screen{{id}}">{{name}}</label>
                   </div>
+                {{#ifEquals @index 2}}
                 </div>
-              </div>
+                <div class="col-sm-6">
+                {{/ifEquals}}
               {{/each}}
+            </div>
+          </div>
             </script>
-            <h3>Screens</h3>
-            <div id="outputScreens"></div>
-            <button type="submit" class="btn btn-secondary">Reset</button>
-            <button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button>
+              <h3>Screens</h3>
+              <div id="outputScreens"></div>
+              <div class="d-grid gap-2 d-md-block">
+                <button type="submit" class="btn btn-secondary">Reset</button>
+                <button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button>
+              </div>
+
           </form>
 
         </div>
@@ -285,7 +293,7 @@
     </div>
   </div>
   <footer>
-   
+
   </footer>
   <script src="/js/script.js"></script>
 </body>
diff --git a/data/src/js/script.ts b/data/src/js/script.ts
index ad48c44..1c9d1ff 100644
--- a/data/src/js/script.ts
+++ b/data/src/js/script.ts
@@ -98,10 +98,10 @@ fetch('/api/settings', {
     .then(response => response.json())
     .then(jsonData => {
         var fgColor = ("0x" + jsonData.fgColor.toString(16).toUpperCase());
-        if (jsonData.epdColors == 2) {
-            document.getElementById('fgColor').querySelector('[value="0xF800"]').remove();
-            document.getElementById('bgColor').querySelector('[value="0xF800"]').remove();
-        }
+        // if (jsonData.epdColors == 2) {
+        //     document.getElementById('fgColor').querySelector('[value="0xF800"]').remove();
+        //     document.getElementById('bgColor').querySelector('[value="0xF800"]').remove();
+        // }
 
         document.getElementById('customText').setAttribute('maxlength', jsonData.numScreens);
         document.getElementById('output').classList.add("fg-" + jsonData.fgColor.toString(16));
diff --git a/src/lib/led_handler.cpp b/src/lib/led_handler.cpp
index fa49108..8a525b2 100644
--- a/src/lib/led_handler.cpp
+++ b/src/lib/led_handler.cpp
@@ -245,14 +245,15 @@ void setLights(int r, int g, int b)
 
 void setLights(uint32_t color)
 {
-    preferences.putUInt("ledColor", color);
 
     bool ledStatus = true;
     if (color == pixels.Color(0, 0, 0))
     {
         ledStatus = false;
+    } else {
+        preferences.putUInt("ledColor", color);
     }
-    preferences.putBool("ledStatus", false);
+    preferences.putBool("ledStatus", ledStatus);
 
     for (int i = 0; i < NEOPIXEL_COUNT; i++)
     {