jyrama/fkx-tools
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Started toggle rework

Browse source 
Signed-off-by: Jyri Eerola <jyri.eerola@jrd.fi>
This commit is contained in:
Jyri Eerola 2019-03-27 20:47:23 +01:00
parent 6bb1c037ac
commit e7cccb2b62
1 changed files with 29 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

88
index.html
View file

@ -11,20 +11,20 @@
<div class="col-2"> <div class="col-2">
<br /><br /> <br /><br />
<h3>HF enable</h3> <h3>HF enable</h3>
<button id="2" class="hf-enable primary">On</button> <button id="2" class="rf-button secondary">Off</button>
</div> </div>
<div class="col-2"> <div class="col-2">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>50/70M</h3> <h3>50/70M</h3>
<button id="0" class="disabled-on-hf-enable row-button">Off</button> <button id="0" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>spare</h3> <h3>spare</h3>
<button id="1" class="disabled-on-hf-enable row-button">Off</button> <button id="1" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
</div> </div>
@ -32,37 +32,37 @@
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>HF1</h3> <h3>HF1</h3>
<button id="3" class="enabled-on-hf-enable row-button">Off</button> <button id="3" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>HF2</h3> <h3>HF2</h3>
<button id="4" class="enabled-on-hf-enable row-button">Off</button> <button id="4" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>HF3</h3> <h3>HF3</h3>
<button id="5" class="enabled-on-hf-enable row-button">Off</button> <button id="5" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>HF4</h3> <h3>HF4</h3>
<button id="6" class="enabled-on-hf-enable row-button">Off</button> <button id="6" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>HF5</h3> <h3>HF5</h3>
<button id="7" class="enabled-on-hf-enable row-button">Off</button> <button id="7" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>HF6</h3> <h3>HF6</h3>
<button id="8" class="enabled-on-hf-enable row-button">Off</button> <button id="8" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
</div> </div>
@ -73,43 +73,43 @@
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>VUHF1</h3> <h3>VUHF1</h3>
<button id="9" class="secondary row-button">Off</button> <button id="9" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>VUHF2</h3> <h3>VUHF2</h3>
<button id="10" class="secondary row-button">Off</button> <button id="10" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>VUHF3</h3> <h3>VUHF3</h3>
<button id="11" class="secondary row-button">Off</button> <button id="11" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>VUHF4</h3> <h3>VUHF4</h3>
<button id="12" class="secondary row-button">Off</button> <button id="12" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>VUHF5</h3> <h3>VUHF5</h3>
<button id="13" class="secondary row-button">Off</button> <button id="13" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>VUHF6</h3> <h3>VUHF6</h3>
<button id="14" class="secondary row-button">Off</button> <button id="14" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<div class="card"> <div class="card">
<h3>VUHF Spare</h3> <h3>VUHF Spare</h3>
<button id="15" class="secondary row-button">Off</button> <button id="15" class="rf-button secondary">Off</button>
</div> </div>
</div> </div>
</div> </div>
@ -123,17 +123,19 @@
<button id="secret-save">Save</button> <button id="secret-save">Save</button>
</footer> </footer>
<script> <script>
hf_enable_button = document.getElementsByClassName("hf-enable")[0]; rf_buttons = document.getElementsByClassName("rf-button");
enabled_on_hf_enable = document.getElementsByClassName("enabled-on-hf-enable");
disabled_on_hf_enable = document.getElementsByClassName("disabled-on-hf-enable"); for(b of rf_buttons) {
row_buttons = document.getElementsByClassName("row-button"); b.addEventListener("click", button_toggle);
}
function button_toggle(button) { function button_toggle(button) {
// toggle colour and text // toggle colour and text
if(button.classList.contains("secondary")) { target = button.currentTarget;
button.textContent = "On"; if(target.classList.contains("secondary")) {
button.classList.remove("secondary"); target.textContent = "On";
button.classList.add("tertiary"); target.classList.remove("secondary");
target.classList.add("tertiary");
payload = 1 << parseInt(button.id); payload = 1 << parseInt(button.id);
@ -149,37 +151,12 @@
console.log("Set failed:", error); console.log("Set failed:", error);
}); });
} else { } else {
button.textContent = "Off"; target.textContent = "Off";
button.classList.add("secondary"); target.classList.add("secondary");
button.classList.remove("tertiary"); target.classList.remove("tertiary");
} }
} }
function toggle_hf_enable(e) {
// hf is enabled if the button is green
hf_enabled = this.classList.contains("tertiary");
// toggle hf enable button text and color
button_toggle(hf_enable_button);
for(b of enabled_on_hf_enable) {
b.disabled = hf_enabled;
}
for(b of disabled_on_hf_enable) {
b.disabled = !hf_enabled;
}
}
function toggle_in_row(event) {
button = event.target;
previously_on = button.closest(".row").querySelector(".tertiary");
if(previously_on != null) {
button_toggle(previously_on);
}
button_toggle(button);
}
function getRemoteState() { function getRemoteState() {
fetch_url = localStorage.getItem("board-url") + "/GetAll/" + localStorage.getItem("secret"); fetch_url = localStorage.getItem("board-url") + "/GetAll/" + localStorage.getItem("secret");
fetch(fetch_url) fetch(fetch_url)
@ -198,13 +175,6 @@
}); });
} }
// add event listeners
hf_enable_button.addEventListener("click", toggle_hf_enable, false);
for(b of row_buttons) {
b.addEventListener("click", toggle_in_row, false);
}
// add listener to save secret token to local storage // add listener to save secret token to local storage
password_input = document.getElementById("secret"); password_input = document.getElementById("secret");
password_input.value = localStorage.getItem("secret"); password_input.value = localStorage.getItem("secret");