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 -->
|
<!-- 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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
<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>
|
||||||
|
|
||||||
<a href="/?resettc">reset timing control data</a>
|
|
||||||
|
|
||||||
<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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
<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>
|
||||||
|
|
||||||
<a href="/?resettc">reset timing control data</a>
|
|
||||||
|
|
||||||
<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>
|
||||||
|
|
Loading…
Reference in a new issue