From ebf587c73ec9f432c97bf78a4d7accf3158f29ec Mon Sep 17 00:00:00 2001
From: Kai Lauterbach <klaute@gmx.de>
Date: Wed, 3 May 2023 14:05:04 +0200
Subject: [PATCH] Fixed config tab look. Rearranged html code.

---
 firmware/data/config_template.html            | 13 ++++++--
 firmware/data/index_template_top.html         | 20 ++++++-------
 firmware/firmware.ino                         |  2 ++
 .../{data/org => html}/config_template.html   | 13 ++++++--
 .../org => html}/index_template_bottom.html   |  0
 .../org => html}/index_template_middle.html   |  0
 .../org => html}/index_template_top.html      | 30 +++++++++----------
 .../org => html}/light_control_template.html  |  0
 tools/html_gen_files.sh                       | 10 +++----
 9 files changed, 50 insertions(+), 38 deletions(-)
 rename firmware/{data/org => html}/config_template.html (90%)
 rename firmware/{data/org => html}/index_template_bottom.html (100%)
 rename firmware/{data/org => html}/index_template_middle.html (100%)
 rename firmware/{data/org => html}/index_template_top.html (91%)
 rename firmware/{data/org => html}/light_control_template.html (100%)

diff --git a/firmware/data/config_template.html b/firmware/data/config_template.html
index ad5e681..da7ca3b 100644
--- a/firmware/data/config_template.html
+++ b/firmware/data/config_template.html
@@ -1,6 +1,9 @@
 <div id="tab-config" class="">
 <form class="pure-form pure-form-aligned" action="/" method="post">
-<h3>Config</h3>
+<br>
+<label for="startup">
+<strong>Light initialization</strong>
+</label>
 <div class="pure-control-group">
 <label for="startup">
 <strong>Startup</strong>
@@ -22,7 +25,9 @@
 </select>
 </div>
 <br>
-<h3>Wifi</h3>
+<label for="startup">
+<strong>Wifi</strong>
+</label>
 <div class="pure-control-group">
 <label for="ip">SSID</label>
 <input id="ssid" name="ssid" type="text" value="{{WIFI_SSID}}">
@@ -32,7 +37,9 @@
 <input id="wpw" name="wpw" type="text" placeholder="1234password">
 </div>
 <br>
-<h3>Network</h3>
+<label for="startup">
+<strong>Network</strong>
+</label>
 <div class="pure-control-group">
 <label for="dip">
 <strong>Dynamic-IP</strong>
diff --git a/firmware/data/index_template_top.html b/firmware/data/index_template_top.html
index ac54de2..c306e26 100644
--- a/firmware/data/index_template_top.html
+++ b/firmware/data/index_template_top.html
@@ -12,6 +12,9 @@
 <style>
 #tab-lights, #tab-config, #tab-tde {
 display: none;
+background-color: #ffffff;
+color: black;
+font-weight: bold;
 }
 #tab-lights.visible {
 display: block;
@@ -35,22 +38,25 @@ display: block;
 <a href="/?alert=1" class="pure-button">alert</a>
 </div>
 <br>
-
-<div>
+<div><!-- Tab links -->
 <a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
 <a href="#" id="tab-a-config" class="pure-button">Config</a>
 <a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a>
 </div>
 <br>
-
 <div id="tab-lights" class="visible"> <!-- lights control tab -->
+<br>
 <div class="pure-control-group">
 <label for="tc_on">
 <strong>Timing control</strong>
 </label>
 <a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a>
 <a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a>
+<br>
+<label for="transition">Transition time (s)</label>
+<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
 </div>
+<br>
 <script>
 var links = document.querySelectorAll('[id^="tc_on"]');
 links.forEach(function(link) {
@@ -76,15 +82,7 @@ document.getElementById('tc_off').classList.add('pure-button-primary');
 document.getElementById('tc_on').classList.remove('pure-button-primary');
 });
 });
-</script>
-<br>
-<div class="pure-control-group">
-<label for="transition">Transition time (s)</label>
-<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
-</div>
-<br>
 
-<script>
 let timeoutId;
 function sendSliderValue(x) {
 x = x - 1;
diff --git a/firmware/firmware.ino b/firmware/firmware.ino
index 9b8256a..2e4eedb 100644
--- a/firmware/firmware.ino
+++ b/firmware/firmware.ino
@@ -734,12 +734,14 @@ String replacePlaceholder(String http_content)
   if (tc_val == TIMING_CONTROL_ENABLED)
   {
     http_content.replace("{{TC_LINK_PRIMARY_ON}}", "pure-button-primary");
+
   } else {
     http_content.replace("{{TC_LINK_PRIMARY_ON}}", "");
   }
   if (tc_val == TIMING_CONTROL_DISABLED)
   {
     http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "pure-button-primary");
+
   } else {
     http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "");
   }
diff --git a/firmware/data/org/config_template.html b/firmware/html/config_template.html
similarity index 90%
rename from firmware/data/org/config_template.html
rename to firmware/html/config_template.html
index 1cee8e5..3a5bbc3 100644
--- a/firmware/data/org/config_template.html
+++ b/firmware/html/config_template.html
@@ -1,6 +1,9 @@
 <div id="tab-config" class="">
 <form class="pure-form pure-form-aligned" action="/" method="post">
-            <h3>Config</h3>
+            <br>
+            <label for="startup">
+                <strong>Light initialization</strong>
+            </label>
             <div class="pure-control-group">
                 <label for="startup">
                     <strong>Startup</strong>
@@ -22,7 +25,9 @@
                 </select>
             </div>
             <br>
-            <h3>Wifi</h3>
+            <label for="startup">
+                <strong>Wifi</strong>
+            </label>
             <div class="pure-control-group">
                 <label for="ip">SSID</label>
                 <input id="ssid" name="ssid" type="text" value="{{WIFI_SSID}}">
@@ -32,7 +37,9 @@
                 <input id="wpw" name="wpw" type="text" placeholder="1234password">
             </div>
             <br>
-            <h3>Network</h3>
+            <label for="startup">
+                <strong>Network</strong>
+            </label>
             <div class="pure-control-group">
                 <label for="dip">
                     <strong>Dynamic-IP</strong>
diff --git a/firmware/data/org/index_template_bottom.html b/firmware/html/index_template_bottom.html
similarity index 100%
rename from firmware/data/org/index_template_bottom.html
rename to firmware/html/index_template_bottom.html
diff --git a/firmware/data/org/index_template_middle.html b/firmware/html/index_template_middle.html
similarity index 100%
rename from firmware/data/org/index_template_middle.html
rename to firmware/html/index_template_middle.html
diff --git a/firmware/data/org/index_template_top.html b/firmware/html/index_template_top.html
similarity index 91%
rename from firmware/data/org/index_template_top.html
rename to firmware/html/index_template_top.html
index 60356f8..d70d8b7 100644
--- a/firmware/data/org/index_template_top.html
+++ b/firmware/html/index_template_top.html
@@ -12,6 +12,9 @@
     <style>
         #tab-lights, #tab-config, #tab-tde {
         display: none;
+        background-color: #ffffff;
+        color: black;
+        font-weight: bold;
         }
         #tab-lights.visible {
         display: block;
@@ -35,22 +38,25 @@
                 <a href="/?alert=1" class="pure-button">alert</a>
             </div>
             <br>
-
-            <div>
+            <div><!-- Tab links -->
                 <a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
                 <a href="#" id="tab-a-config" class="pure-button">Config</a>
                 <a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a>
             </div>
             <br>
-
           <div id="tab-lights" class="visible"> <!-- lights control tab -->
+            <br>
             <div class="pure-control-group">
-                <label for="tc_on">
-                    <strong>Timing control</strong>
-                </label>
-                <a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a>
-                <a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a>
+            <label for="tc_on">
+                <strong>Timing control</strong>
+            </label>
+            <a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a>
+            <a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a>
+            <br>
+                <label for="transition">Transition time (s)</label>
+                <input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
             </div>
+            <br>
             <script>
             var links = document.querySelectorAll('[id^="tc_on"]');
             links.forEach(function(link) {
@@ -76,15 +82,7 @@
                     document.getElementById('tc_on').classList.remove('pure-button-primary');
                 });
             });
-            </script>
-            <br>
-            <div class="pure-control-group">
-                <label for="transition">Transition time (s)</label>
-                <input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
-            </div>
-            <br>
 
-            <script>
             let timeoutId;
             function sendSliderValue(x) {
                 x = x - 1;
diff --git a/firmware/data/org/light_control_template.html b/firmware/html/light_control_template.html
similarity index 100%
rename from firmware/data/org/light_control_template.html
rename to firmware/html/light_control_template.html
diff --git a/tools/html_gen_files.sh b/tools/html_gen_files.sh
index 87de9ac..8665590 100755
--- a/tools/html_gen_files.sh
+++ b/tools/html_gen_files.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
-bash ../../tools/html2string.sh org/index_template_top.html > index_template_top.html
-bash ../../tools/html2string.sh org/index_template_middle.html > index_template_middle.html
-bash ../../tools/html2string.sh org/index_template_bottom.html > index_template_bottom.html
-bash ../../tools/html2string.sh org/config_template.html > config_template.html
-bash ../../tools/html2string.sh org/light_control_template.html > light_control_template.html
+bash ../../tools/html2string.sh ../html/index_template_top.html > index_template_top.html
+bash ../../tools/html2string.sh ../html/index_template_middle.html > index_template_middle.html
+bash ../../tools/html2string.sh ../html/index_template_bottom.html > index_template_bottom.html
+bash ../../tools/html2string.sh ../html/config_template.html > config_template.html
+bash ../../tools/html2string.sh ../html/light_control_template.html > light_control_template.html