From c48c624f71f496c3a3f9788958e2f29eeaf9daa0 Mon Sep 17 00:00:00 2001
From: mattbk <mattbk@users.noreply.github.com>
Date: Sat, 16 Sep 2023 17:04:22 -0500
Subject: [PATCH 1/2] Shelve.

---
 vulpes/src/main.cpp | 77 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 60 insertions(+), 17 deletions(-)
diff --git a/vulpes/src/main.cpp b/vulpes/src/main.cpp
index 9d019fc..378b12b 100644
--- a/vulpes/src/main.cpp
+++ b/vulpes/src/main.cpp
@@ -72,7 +72,15 @@ long pause_until_millis = 0;
 const char index_html[] PROGMEM = R"rawliteral(
 <!DOCTYPE HTML><html><head>
   <link rel="icon" href="data:,">
-  <title>ESP Input Form</title>
+  <title>Vulpes Radio Orienteering Controller</title>
+  <style>
+    .inv_message {
+      display: none;
+      }
+    .inv_program {
+      display: none;
+      }
+  </style>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script type="text/javascript">
     // Utility from https://webreflection.medium.com/using-the-input-datetime-local-9503e7efdce
@@ -123,7 +131,7 @@ const char index_html[] PROGMEM = R"rawliteral(
     <h2>General Settings</h2>
     <p>Sending program:
     <select name="inputSend" id="send-program">
-      <option value="0" >0 - Off</option>
+      <option value="0">0 - Off</option>
       <option value="1">1 - Continuous</option>
       <option value="2">2 - Cycle</option>
     </select><br>
@@ -138,24 +146,29 @@ const char index_html[] PROGMEM = R"rawliteral(
       <option value="5">5 - MO5</option>
     </select><br>
 
-    Custom message: <input type="text" name="inputCustomMsg" value = "%inputCustomMsg%"><br>
+    <!-- Hidden unless "0 - Custom Message" is selected -->
+    <span id="message0" class="inv_message">
+      Custom message: <input type="text" name="inputCustomMsg" value = "%inputCustomMsg%"><br>
+    </span>
     
     Speed: <input type="number" name="inputWPM" value = %inputWPM%> WPM
     </p>
 
-    <h2>Cycle Settings</h2>
-    <p>Only applies when <em>Sending Program</em> is set to "2 - Cycle". You cannot set a cycle start date more than a month in advance.</p>
-    <p>Cycle start time <input type="datetime-local" id="js_start_time_unix_entry" /><br>
-    Current value: <b><span id=current-start></span></b>
-    
-    <!-- JS converts the entered start time to a unix timestamp, and copies that value
-    to this hidden field so the user doesn't have to see it. -->
-    <input type="hidden" name="inputStartTimeUnix" id="js_start_time_unix" /></p>
-    <p>
-      Step length: <input type="number" name="inputStepLength" min=1000 step=1000 value = %inputStepLength%> milliseconds <br>
-      Cycle ID: <input type="number" name="inputCycleID" min=1 value = %inputCycleID%><br>
-      Number of transmitters: <input type="number" name="inputNtransmitters" min=1 value = %inputNtransmitters%><br>
-    </p>
+    <!-- Hidden unless "2 - Cycle" is selected -->
+    <span id="program2" class="inv_program">
+      <h2>Cycle Settings</h2>
+      <p>Only applies when <em>Sending Program</em> is set to "2 - Cycle". You cannot set a cycle start date more than a month in advance.<br>
+      Cycle start time <input type="datetime-local" id="js_start_time_unix_entry" /><br>
+      Current value: <b><span id=current-start></span></b><br>
+      
+      <!-- JS converts the entered start time to a unix timestamp, and copies that value
+      to this hidden field so the user doesn't have to see it. -->
+      <input type="hidden" name="inputStartTimeUnix" id="js_start_time_unix" /></p>
+        Step length: <input type="number" name="inputStepLength" min=1000 step=1000 value = %inputStepLength%> milliseconds <br>
+        Cycle ID: <input type="number" name="inputCycleID" min=1 value = %inputCycleID%><br>
+        Number of transmitters: <input type="number" name="inputNtransmitters" min=1 value = %inputNtransmitters%><br>
+      </p>
+    </span>
     
     <!-- This field is hidden so people don't change the submit time (it will be wrong).
     The value is automatically filled in with JS. -->
@@ -166,9 +179,39 @@ const char index_html[] PROGMEM = R"rawliteral(
 
     <input type="submit" value="Submit"">
   </form>
+
+  
+
   <iframe style="display:none" name="hidden-form" id="hidden-form"></iframe>
   <script type="text/javascript">
-    
+    // Show more stuff depending on selected values
+    // https://stackoverflow.com/a/24849350
+    document
+      .getElementById('message')
+      .addEventListener('change', function () {
+          'use strict';
+          var vis_message = document.querySelector('.vis_message'),   
+              target = document.getElementById("message"+this.value);
+          if (vis_message !== null) {
+              vis_message.className = 'inv_message';
+          }
+          if (target !== null ) {
+              target.className = 'vis_message';
+          }
+    });
+    document
+      .getElementById('send-program')
+      .addEventListener('change', function () {
+          'use strict';
+          var vis_program = document.querySelector('.vis_program'),   
+              target = document.getElementById("program"+this.value);
+          if (vis_program !== null) {
+              vis_program.className = 'inv_program';
+          }
+          if (target !== null ) {
+              target.className = 'vis_program';
+          }
+    });
   </script>
 </body></html>)rawliteral";
 
-- 
2.30.2


From 269cbfdd22527174e4e7d272b1428eb1b992912d Mon Sep 17 00:00:00 2001
From: mattbk <mattbk@users.noreply.github.com>
Date: Sat, 16 Sep 2023 19:17:31 -0500
Subject: [PATCH 2/2] Shelve.

---
 vulpes/src/main.cpp | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/vulpes/src/main.cpp b/vulpes/src/main.cpp
index 378b12b..d1d2892 100644
--- a/vulpes/src/main.cpp
+++ b/vulpes/src/main.cpp
@@ -186,9 +186,7 @@ const char index_html[] PROGMEM = R"rawliteral(
   <script type="text/javascript">
     // Show more stuff depending on selected values
     // https://stackoverflow.com/a/24849350
-    document
-      .getElementById('message')
-      .addEventListener('change', function () {
+    show_message = function () {
           'use strict';
           var vis_message = document.querySelector('.vis_message'),   
               target = document.getElementById("message"+this.value);
@@ -198,10 +196,8 @@ const char index_html[] PROGMEM = R"rawliteral(
           if (target !== null ) {
               target.className = 'vis_message';
           }
-    });
-    document
-      .getElementById('send-program')
-      .addEventListener('change', function () {
+    }
+    show_program = function () {
           'use strict';
           var vis_program = document.querySelector('.vis_program'),   
               target = document.getElementById("program"+this.value);
@@ -211,7 +207,13 @@ const char index_html[] PROGMEM = R"rawliteral(
           if (target !== null ) {
               target.className = 'vis_program';
           }
-    });
+    }
+    document
+      .getElementById('message')
+      .addEventListener('change', show_message);
+    document
+      .getElementById('send-program')
+      .addEventListener('change', show_program);
   </script>
 </body></html>)rawliteral";
 
-- 
2.30.2

