Added a third tab and renamed the old one. Also updated the javascript code.

2023-05-03 12:49:39 +02:00 · 2023-05-03 12:49:39 +02:00 · d015f5b31c
parent caef7945b3
commit d015f5b31c
6 changed files with 98 additions and 56 deletions
--- a/firmware/data/index_template_bottom.html
+++ b/firmware/data/index_template_bottom.html
@ -1,22 +1,42 @@
 <!-- bottom -->
 <script>
-var tabMain = document.getElementById("tab-main");
+var tabMain = document.getElementById("tab-lights");
 var tabConfig = document.getElementById("tab-config");
-var amain = document.getElementById("tab1-a");
-var acfg = document.getElementById("tab2-a");
+var tabTDE = document.getElementById("tab-tde");

-document.getElementById("tab1-a").addEventListener("click", function() {
+var amain = document.getElementById("tab-a-lights");
+var acfg = document.getElementById("tab-a-config");
+var atde = document.getElementById("tab-a-tde");
+
+
+document.getElementById("tab-a-lights").addEventListener("click", function() {
 tabMain.classList.add("visible");
 tabConfig.classList.remove("visible");
+tabTDE.classList.remove("visible");
+
 amain.classList.add("pure-button-primary");
 acfg.classList.remove("pure-button-primary");
+atde.classList.remove("pure-button-primary");
 });

-document.getElementById("tab2-a").addEventListener("click", function() {
+document.getElementById("tab-a-config").addEventListener("click", function() {
 tabMain.classList.remove("visible");
 tabConfig.classList.add("visible");
-acfg.classList.add("pure-button-primary");
+tabTDE.classList.remove("visible");
+
 amain.classList.remove("pure-button-primary");
+acfg.classList.add("pure-button-primary");
+atde.classList.remove("pure-button-primary");
+});
+
+document.getElementById("tab-a-tde").addEventListener("click", function() {
+tabMain.classList.remove("visible");
+tabConfig.classList.remove("visible");
+tabTDE.classList.add("visible");
+
+amain.classList.remove("pure-button-primary");
+acfg.classList.remove("pure-button-primary");
+atde.classList.add("pure-button-primary");
 });
 </script>
 <script>
--- a/firmware/data/index_template_middle.html
+++ b/firmware/data/index_template_middle.html
@ -5,4 +5,8 @@
 </td>
 </tr>
 </table>
-</div><!-- end of main-tab div -->
+</div><!-- end of lights control tab -->
+
+<div id="tab-tde"> <!-- timing editor -->
+Not implemented yet.
+</div>
--- a/firmware/data/index_template_top.html
+++ b/firmware/data/index_template_top.html
@ -1,7 +1,6 @@
 <!doctype html>
 <html>
 <head>
-<style></style>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Light setup - {{LIGHT_NAME}}</title>
@ -11,15 +10,18 @@
 <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
-#tab-main, #tab-config {
+#tab-lights, #tab-config, #tab-tde {
 display: none;
 }
-#tab-main.visible {
+#tab-lights.visible {
 display: block;
 }
 #tab-config.visible {
 display: block;
 }
+#tab-tde.visible {
+display: block;
+}
 </style>
 </head>
 <body>
@ -27,25 +29,21 @@ display: block;
 <h3>{{LIGHT_NAME}}</h3>
 <div class="pure-form pure-form-aligned">
 <div class="pure-controls">
-<span class="pure-form-message">
-<a href="/?alert=1">alert</a>
-&nbsp; 
-<a href="/?reset=1">reset</a>
-&nbsp; 
-<a href="/?resettc">reset timing control data</a>
-&nbsp; 
-<a href="/update">update</a>
-</span>
-<label for="cb" class="pure-checkbox"></label>
+<a href="/update" class="pure-button">update</a>
+<a href="/?reset=1" class="pure-button">reset light</a>
+<a href="/?resettc" class="pure-button">reset timing control data</a>
+<a href="/?alert=1" class="pure-button">alert</a>
 </div>
 <br>

 <div>
-<a href="#" id="tab1-a" class="pure-button pure-button-primary">Main</a>
-<a href="#" id="tab2-a" class="pure-button">Config</a>
+<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 -->
 <div class="pure-control-group">
 <label for="tc_on">
 <strong>Timing control</strong>
@ -106,7 +104,6 @@ console.error(`Error sending slider value to ${url}: ${error}`);
 }
 </script>
 <br>
-<div id="tab-main" class="visible">
 <table border=0>
 <tr>
 <td>
--- a/firmware/data/org/index_template_bottom.html
+++ b/firmware/data/org/index_template_bottom.html
@ -1,22 +1,42 @@
 <!-- bottom -->
  <script>
-    var tabMain = document.getElementById("tab-main");
+    var tabMain = document.getElementById("tab-lights");
    var tabConfig = document.getElementById("tab-config");
-    var amain = document.getElementById("tab1-a");
-    var acfg = document.getElementById("tab2-a");
+    var tabTDE = document.getElementById("tab-tde");

-    document.getElementById("tab1-a").addEventListener("click", function() {
+    var amain = document.getElementById("tab-a-lights");
+    var acfg = document.getElementById("tab-a-config");
+    var atde = document.getElementById("tab-a-tde");
+
+
+    document.getElementById("tab-a-lights").addEventListener("click", function() {
      tabMain.classList.add("visible");
      tabConfig.classList.remove("visible");
+      tabTDE.classList.remove("visible");
+
      amain.classList.add("pure-button-primary");
      acfg.classList.remove("pure-button-primary");
+      atde.classList.remove("pure-button-primary");
    });

-    document.getElementById("tab2-a").addEventListener("click", function() {
+    document.getElementById("tab-a-config").addEventListener("click", function() {
      tabMain.classList.remove("visible");
      tabConfig.classList.add("visible");
-      acfg.classList.add("pure-button-primary");
+      tabTDE.classList.remove("visible");
+
      amain.classList.remove("pure-button-primary");
+      acfg.classList.add("pure-button-primary");
+      atde.classList.remove("pure-button-primary");
+    });
+
+    document.getElementById("tab-a-tde").addEventListener("click", function() {
+      tabMain.classList.remove("visible");
+      tabConfig.classList.remove("visible");
+      tabTDE.classList.add("visible");
+
+      amain.classList.remove("pure-button-primary");
+      acfg.classList.remove("pure-button-primary");
+      atde.classList.add("pure-button-primary");
    });
  </script>
            <script>
--- a/firmware/data/org/index_template_middle.html
+++ b/firmware/data/org/index_template_middle.html
@ -5,4 +5,8 @@
                    </td>
                </tr>
            </table>
-        </div><!-- end of main-tab div -->
+        </div><!-- end of lights control tab -->
+
+<div id="tab-tde"> <!-- timing editor -->
+    Not implemented yet.
+</div>
--- a/firmware/data/org/index_template_top.html
+++ b/firmware/data/org/index_template_top.html
@ -1,7 +1,6 @@
 <!doctype html>
 <html>
 <head>
-    <style></style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light setup - {{LIGHT_NAME}}</title>
@ -9,43 +8,42 @@
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    #tab-main, #tab-config {
-      display: none;
-    }
-    #tab-main.visible {
-      display: block;
-    }
-    #tab-config.visible {
-      display: block;
-    }
-  </style>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        #tab-lights, #tab-config, #tab-tde {
+        display: none;
+        }
+        #tab-lights.visible {
+        display: block;
+        }
+        #tab-config.visible {
+        display: block;
+        }
+        #tab-tde.visible {
+        display: block;
+        }
+    </style>
 </head>
 <body>
    <fieldset>
        <h3>{{LIGHT_NAME}}</h3>
        <div class="pure-form pure-form-aligned">
            <div class="pure-controls">
-                <span class="pure-form-message">
-                    <a href="/?alert=1">alert</a>
-                     &nbsp; 
-                    <a href="/?reset=1">reset</a>
-                     &nbsp; 
-                    <a href="/?resettc">reset timing control data</a>
-                     &nbsp; 
-                    <a href="/update">update</a>
-                </span>
-                <label for="cb" class="pure-checkbox"></label>
+                <a href="/update" class="pure-button">update</a>
+                <a href="/?reset=1" class="pure-button">reset light</a>
+                <a href="/?resettc" class="pure-button">reset timing control data</a>
+                <a href="/?alert=1" class="pure-button">alert</a>
            </div>
            <br>

            <div>
-                <a href="#" id="tab1-a" class="pure-button pure-button-primary">Main</a>
-                <a href="#" id="tab2-a" class="pure-button">Config</a>
+                <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 -->
            <div class="pure-control-group">
                <label for="tc_on">
                    <strong>Timing control</strong>
@ -106,7 +104,6 @@
            }
            </script>
            <br>
-        <div id="tab-main" class="visible">
            <table border=0>
                <tr>
                    <td>