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

This commit is contained in:
Kai Lauterbach 2023-05-03 12:49:39 +02:00
parent caef7945b3
commit d015f5b31c
6 changed files with 98 additions and 56 deletions

View file

@ -1,22 +1,42 @@
<!-- bottom --> <!-- bottom -->
<script> <script>
var tabMain = document.getElementById("tab-main"); var tabMain = document.getElementById("tab-lights");
var tabConfig = document.getElementById("tab-config"); var tabConfig = document.getElementById("tab-config");
var amain = document.getElementById("tab1-a"); var tabTDE = document.getElementById("tab-tde");
var acfg = document.getElementById("tab2-a");
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"); tabMain.classList.add("visible");
tabConfig.classList.remove("visible"); tabConfig.classList.remove("visible");
tabTDE.classList.remove("visible");
amain.classList.add("pure-button-primary"); amain.classList.add("pure-button-primary");
acfg.classList.remove("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"); tabMain.classList.remove("visible");
tabConfig.classList.add("visible"); tabConfig.classList.add("visible");
acfg.classList.add("pure-button-primary"); tabTDE.classList.remove("visible");
amain.classList.remove("pure-button-primary"); 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>
<script> <script>

View file

@ -5,4 +5,8 @@
</td> </td>
</tr> </tr>
</table> </table>
</div><!-- end of main-tab div --> </div><!-- end of lights control tab -->
<div id="tab-tde"> <!-- timing editor -->
Not implemented yet.
</div>

View file

@ -1,7 +1,6 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<style></style>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light setup - {{LIGHT_NAME}}</title> <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"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
#tab-main, #tab-config { #tab-lights, #tab-config, #tab-tde {
display: none; display: none;
} }
#tab-main.visible { #tab-lights.visible {
display: block; display: block;
} }
#tab-config.visible { #tab-config.visible {
display: block; display: block;
} }
#tab-tde.visible {
display: block;
}
</style> </style>
</head> </head>
<body> <body>
@ -27,25 +29,21 @@ display: block;
<h3>{{LIGHT_NAME}}</h3> <h3>{{LIGHT_NAME}}</h3>
<div class="pure-form pure-form-aligned"> <div class="pure-form pure-form-aligned">
<div class="pure-controls"> <div class="pure-controls">
<span class="pure-form-message"> <a href="/update" class="pure-button">update</a>
<a href="/?alert=1">alert</a> <a href="/?reset=1" class="pure-button">reset light</a>
&nbsp; <a href="/?resettc" class="pure-button">reset timing control data</a>
<a href="/?reset=1">reset</a> <a href="/?alert=1" class="pure-button">alert</a>
&nbsp;
<a href="/?resettc">reset timing control data</a>
&nbsp;
<a href="/update">update</a>
</span>
<label for="cb" class="pure-checkbox"></label>
</div> </div>
<br> <br>
<div> <div>
<a href="#" id="tab1-a" class="pure-button pure-button-primary">Main</a> <a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
<a href="#" id="tab2-a" class="pure-button">Config</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> </div>
<br> <br>
<div id="tab-lights" class="visible"> <!-- lights control tab -->
<div class="pure-control-group"> <div class="pure-control-group">
<label for="tc_on"> <label for="tc_on">
<strong>Timing control</strong> <strong>Timing control</strong>
@ -106,7 +104,6 @@ console.error(`Error sending slider value to ${url}: ${error}`);
} }
</script> </script>
<br> <br>
<div id="tab-main" class="visible">
<table border=0> <table border=0>
<tr> <tr>
<td> <td>

View file

@ -1,22 +1,42 @@
<!-- bottom --> <!-- bottom -->
<script> <script>
var tabMain = document.getElementById("tab-main"); var tabMain = document.getElementById("tab-lights");
var tabConfig = document.getElementById("tab-config"); var tabConfig = document.getElementById("tab-config");
var amain = document.getElementById("tab1-a"); var tabTDE = document.getElementById("tab-tde");
var acfg = document.getElementById("tab2-a");
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"); tabMain.classList.add("visible");
tabConfig.classList.remove("visible"); tabConfig.classList.remove("visible");
tabTDE.classList.remove("visible");
amain.classList.add("pure-button-primary"); amain.classList.add("pure-button-primary");
acfg.classList.remove("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"); tabMain.classList.remove("visible");
tabConfig.classList.add("visible"); tabConfig.classList.add("visible");
acfg.classList.add("pure-button-primary"); tabTDE.classList.remove("visible");
amain.classList.remove("pure-button-primary"); 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>
<script> <script>

View file

@ -5,4 +5,8 @@
</td> </td>
</tr> </tr>
</table> </table>
</div><!-- end of main-tab div --> </div><!-- end of lights control tab -->
<div id="tab-tde"> <!-- timing editor -->
Not implemented yet.
</div>

View file

@ -1,7 +1,6 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<style></style>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light setup - {{LIGHT_NAME}}</title> <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"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
#tab-main, #tab-config { #tab-lights, #tab-config, #tab-tde {
display: none; display: none;
} }
#tab-main.visible { #tab-lights.visible {
display: block; display: block;
} }
#tab-config.visible { #tab-config.visible {
display: block; display: block;
} }
#tab-tde.visible {
display: block;
}
</style> </style>
</head> </head>
<body> <body>
@ -27,25 +29,21 @@
<h3>{{LIGHT_NAME}}</h3> <h3>{{LIGHT_NAME}}</h3>
<div class="pure-form pure-form-aligned"> <div class="pure-form pure-form-aligned">
<div class="pure-controls"> <div class="pure-controls">
<span class="pure-form-message"> <a href="/update" class="pure-button">update</a>
<a href="/?alert=1">alert</a> <a href="/?reset=1" class="pure-button">reset light</a>
&nbsp; <a href="/?resettc" class="pure-button">reset timing control data</a>
<a href="/?reset=1">reset</a> <a href="/?alert=1" class="pure-button">alert</a>
&nbsp;
<a href="/?resettc">reset timing control data</a>
&nbsp;
<a href="/update">update</a>
</span>
<label for="cb" class="pure-checkbox"></label>
</div> </div>
<br> <br>
<div> <div>
<a href="#" id="tab1-a" class="pure-button pure-button-primary">Main</a> <a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
<a href="#" id="tab2-a" class="pure-button">Config</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> </div>
<br> <br>
<div id="tab-lights" class="visible"> <!-- lights control tab -->
<div class="pure-control-group"> <div class="pure-control-group">
<label for="tc_on"> <label for="tc_on">
<strong>Timing control</strong> <strong>Timing control</strong>
@ -106,7 +104,6 @@
} }
</script> </script>
<br> <br>
<div id="tab-main" class="visible">
<table border=0> <table border=0>
<tr> <tr>
<td> <td>