Fixed tab switching
This commit is contained in:
Kai Lauterbach
parent
d1a0aeb404
commit
39dc462114
6 changed files with 47 additions and 6 deletions
|
|
@ -1,4 +1,5 @@
|
|||
function addTabListener() {
|
||||
console.log("Try to add tab listener");
|
||||
try {
|
||||
var tabMain = document.getElementById("tab-lights");
|
||||
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 atde = document.getElementById("tab-a-tde");
|
||||
amain.addEventListener("click", function() {
|
||||
console.log("Switch to main lights tab");
|
||||
tabMain.classList.add("visible");
|
||||
tabConfig.classList.remove("visible");
|
||||
tabTDE.classList.remove("visible");
|
||||
|
|
@ -15,6 +17,7 @@ acfg.classList.remove("pure-button-primary");
|
|||
atde.classList.remove("pure-button-primary");
|
||||
});
|
||||
acfg.addEventListener("click", function() {
|
||||
console.log("Switch to config tab");
|
||||
tabMain.classList.remove("visible");
|
||||
tabConfig.classList.add("visible");
|
||||
tabTDE.classList.remove("visible");
|
||||
|
|
@ -23,13 +26,13 @@ acfg.classList.add("pure-button-primary");
|
|||
atde.classList.remove("pure-button-primary");
|
||||
});
|
||||
atde.addEventListener("click", function() {
|
||||
console.log("Switch to TDE tab");
|
||||
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");
|
||||
createTable();
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Error: load listener of the tab action listener management: " + error.message);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,23 @@
|
|||
<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-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>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#tab-lights, #tab-config, #tab-tde {
|
||||
/*#tab-lights, #tab-config, #tab-tde {
|
||||
display: none;
|
||||
background-color: #ffffff;
|
||||
color: black;
|
||||
|
|
@ -40,4 +40,4 @@ cursor: pointer;
|
|||
}
|
||||
.pure-button:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
}*/
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
function addTabListener() {
|
||||
console.log("Try to add tab listener");
|
||||
try {
|
||||
var tabMain = document.getElementById("tab-lights");
|
||||
var tabConfig = document.getElementById("tab-config");
|
||||
|
|
@ -10,6 +11,7 @@ function addTabListener() {
|
|||
|
||||
|
||||
amain.addEventListener("click", function() {
|
||||
console.log("Switch to main lights tab");
|
||||
tabMain.classList.add("visible");
|
||||
tabConfig.classList.remove("visible");
|
||||
tabTDE.classList.remove("visible");
|
||||
|
|
@ -20,6 +22,7 @@ function addTabListener() {
|
|||
});
|
||||
|
||||
acfg.addEventListener("click", function() {
|
||||
console.log("Switch to config tab");
|
||||
tabMain.classList.remove("visible");
|
||||
tabConfig.classList.add("visible");
|
||||
tabTDE.classList.remove("visible");
|
||||
|
|
@ -30,6 +33,7 @@ function addTabListener() {
|
|||
});
|
||||
|
||||
atde.addEventListener("click", function() {
|
||||
console.log("Switch to TDE tab");
|
||||
tabMain.classList.remove("visible");
|
||||
tabConfig.classList.remove("visible");
|
||||
tabTDE.classList.add("visible");
|
||||
|
|
@ -38,7 +42,7 @@ function addTabListener() {
|
|||
acfg.classList.remove("pure-button-primary");
|
||||
atde.classList.add("pure-button-primary");
|
||||
|
||||
createTable();
|
||||
//createTable(); // recreate the table on timing data editor tab
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Error: load listener of the tab action listener management: " + error.message);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,23 @@
|
|||
<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-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>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#tab-lights, #tab-config, #tab-tde {
|
||||
/*#tab-lights, #tab-config, #tab-tde {
|
||||
display: none;
|
||||
background-color: #ffffff;
|
||||
color: black;
|
||||
|
|
@ -40,4 +40,4 @@ cursor: pointer;
|
|||
}
|
||||
.pure-button:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
}*/
|
||||
Loading…
Reference in a new issue