Added a third tab and renamed the old one. Also updated the javascript code.
This commit is contained in:
parent
caef7945b3
commit
d015f5b31c
6 changed files with 98 additions and 56 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
<a href="/?reset=1">reset</a>
|
||||
|
||||
<a href="/?resettc">reset timing control data</a>
|
||||
|
||||
<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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
<a href="/?reset=1">reset</a>
|
||||
|
||||
<a href="/?resettc">reset timing control data</a>
|
||||
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue