Fixed tab switching

This commit is contained in:
Kai Lauterbach 2023-05-05 10:41:41 +02:00
parent d1a0aeb404
commit 39dc462114
6 changed files with 47 additions and 6 deletions

View file

@ -1,4 +1,5 @@
function addTabListener() { function addTabListener() {
console.log("Try to add tab listener");
try { try {
var tabMain = document.getElementById("tab-lights"); var tabMain = document.getElementById("tab-lights");
var tabConfig = document.getElementById("tab-config"); var tabConfig = document.getElementById("tab-config");
@ -7,6 +8,7 @@ var amain = document.getElementById("tab-a-lights");
var acfg = document.getElementById("tab-a-config"); var acfg = document.getElementById("tab-a-config");
var atde = document.getElementById("tab-a-tde"); var atde = document.getElementById("tab-a-tde");
amain.addEventListener("click", function() { amain.addEventListener("click", function() {
console.log("Switch to main lights tab");
tabMain.classList.add("visible"); tabMain.classList.add("visible");
tabConfig.classList.remove("visible"); tabConfig.classList.remove("visible");
tabTDE.classList.remove("visible"); tabTDE.classList.remove("visible");
@ -15,6 +17,7 @@ acfg.classList.remove("pure-button-primary");
atde.classList.remove("pure-button-primary"); atde.classList.remove("pure-button-primary");
}); });
acfg.addEventListener("click", function() { acfg.addEventListener("click", function() {
console.log("Switch to config tab");
tabMain.classList.remove("visible"); tabMain.classList.remove("visible");
tabConfig.classList.add("visible"); tabConfig.classList.add("visible");
tabTDE.classList.remove("visible"); tabTDE.classList.remove("visible");
@ -23,13 +26,13 @@ acfg.classList.add("pure-button-primary");
atde.classList.remove("pure-button-primary"); atde.classList.remove("pure-button-primary");
}); });
atde.addEventListener("click", function() { atde.addEventListener("click", function() {
console.log("Switch to TDE tab");
tabMain.classList.remove("visible"); tabMain.classList.remove("visible");
tabConfig.classList.remove("visible"); tabConfig.classList.remove("visible");
tabTDE.classList.add("visible"); tabTDE.classList.add("visible");
amain.classList.remove("pure-button-primary"); amain.classList.remove("pure-button-primary");
acfg.classList.remove("pure-button-primary"); acfg.classList.remove("pure-button-primary");
atde.classList.add("pure-button-primary"); atde.classList.add("pure-button-primary");
createTable();
}); });
} catch (error) { } catch (error) {
console.log("Error: load listener of the tab action listener management: " + error.message); console.log("Error: load listener of the tab action listener management: " + error.message);

View file

@ -9,6 +9,23 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.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"> <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>
#tab-lights, #tab-config, #tab-tde {
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
}
#tab-lights.visible {
display: block;
}
#tab-config.visible {
display: block;
}
#tab-tde.visible {
display: block;
}
</style>
<style src="http://{{IP_ADDRESS}}'/css"> <style src="http://{{IP_ADDRESS}}'/css">
</style> </style>
</head> </head>

View file

@ -1,4 +1,4 @@
#tab-lights, #tab-config, #tab-tde { /*#tab-lights, #tab-config, #tab-tde {
display: none; display: none;
background-color: #ffffff; background-color: #ffffff;
color: black; color: black;
@ -40,4 +40,4 @@ cursor: pointer;
} }
.pure-button:hover { .pure-button:hover {
background-color: #333; background-color: #333;
} }*/

View file

@ -1,4 +1,5 @@
function addTabListener() { function addTabListener() {
console.log("Try to add tab listener");
try { try {
var tabMain = document.getElementById("tab-lights"); var tabMain = document.getElementById("tab-lights");
var tabConfig = document.getElementById("tab-config"); var tabConfig = document.getElementById("tab-config");
@ -10,6 +11,7 @@ function addTabListener() {
amain.addEventListener("click", function() { amain.addEventListener("click", function() {
console.log("Switch to main lights tab");
tabMain.classList.add("visible"); tabMain.classList.add("visible");
tabConfig.classList.remove("visible"); tabConfig.classList.remove("visible");
tabTDE.classList.remove("visible"); tabTDE.classList.remove("visible");
@ -20,6 +22,7 @@ function addTabListener() {
}); });
acfg.addEventListener("click", function() { acfg.addEventListener("click", function() {
console.log("Switch to config tab");
tabMain.classList.remove("visible"); tabMain.classList.remove("visible");
tabConfig.classList.add("visible"); tabConfig.classList.add("visible");
tabTDE.classList.remove("visible"); tabTDE.classList.remove("visible");
@ -30,6 +33,7 @@ function addTabListener() {
}); });
atde.addEventListener("click", function() { atde.addEventListener("click", function() {
console.log("Switch to TDE tab");
tabMain.classList.remove("visible"); tabMain.classList.remove("visible");
tabConfig.classList.remove("visible"); tabConfig.classList.remove("visible");
tabTDE.classList.add("visible"); tabTDE.classList.add("visible");
@ -38,7 +42,7 @@ function addTabListener() {
acfg.classList.remove("pure-button-primary"); acfg.classList.remove("pure-button-primary");
atde.classList.add("pure-button-primary"); atde.classList.add("pure-button-primary");
createTable(); //createTable(); // recreate the table on timing data editor tab
}); });
} catch (error) { } catch (error) {
console.log("Error: load listener of the tab action listener management: " + error.message); console.log("Error: load listener of the tab action listener management: " + error.message);

View file

@ -9,6 +9,23 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.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"> <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>
#tab-lights, #tab-config, #tab-tde {
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
}
#tab-lights.visible {
display: block;
}
#tab-config.visible {
display: block;
}
#tab-tde.visible {
display: block;
}
</style>
<style src="http://{{IP_ADDRESS}}'/css"> <style src="http://{{IP_ADDRESS}}'/css">
</style> </style>
</head> </head>

View file

@ -1,4 +1,4 @@
#tab-lights, #tab-config, #tab-tde { /*#tab-lights, #tab-config, #tab-tde {
display: none; display: none;
background-color: #ffffff; background-color: #ffffff;
color: black; color: black;
@ -40,4 +40,4 @@ cursor: pointer;
} }
.pure-button:hover { .pure-button:hover {
background-color: #333; background-color: #333;
} }*/