Started toggle rework
Signed-off-by: Jyri Eerola <jyri.eerola@jrd.fi>
This commit is contained in:
Jyri Eerola
parent
6bb1c037ac
commit
e7cccb2b62
1 changed files with 29 additions and 59 deletions
88
index.html
88
index.html
|
|
@ -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)
|
||||||
|
|
@ -197,13 +174,6 @@
|
||||||
console.log("GetAll failed:", error);
|
console.log("GetAll failed:", error);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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");
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue