eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-17 17:19:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

color selected displays checkboxes to show loading status

Browse Source
This commit is contained in:
Matt Walsh
2022-12-14 11:20:25 -06:00
parent b336b01059
commit 8df8fc25dc
8 changed files with 91 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
server/scripts/modules/weatherdisplay.mjs
View File

@@ -1,6 +1,6 @@
// base weather display class
import STATUS from './status.mjs';
import STATUS, { calcStatusClass, statusClasses } from './status.mjs';
import { DateTime } from '../vendor/auto/luxon.mjs';
import { elemForEach } from './utils/elem.mjs';
import {
@@ -64,13 +64,24 @@ class WeatherDisplay {
window.localStorage.setItem(`display-enabled: ${this.elemId}`, this.enabled);
// create a checkbox in the selected displays area
const checkbox = document.createElement('template');
checkbox.innerHTML = `<label for="${this.elemId}Enabled">
<input type="checkbox" value="true" id="${this.elemId}Enabled" name="${this.elemId}Enabled"${this.enabled ? ' checked' : ''}/>
${this.name}</label>`;
checkbox.content.firstChild.addEventListener('change', (e) => this.checkboxChange(e));
const label = document.createElement('label');
label.for = `${this.elemId}-checkbox`;
label.id = `${this.elemId}-label`;
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.value = true;
checkbox.id = `${this.elemId}-checkbox`;
checkbox.name = `${this.elemId}-checkbox`;
checkbox.checked = this.enabled;
checkbox.addEventListener('change', (e) => this.checkboxChange(e));
const span = document.createElement('span');
span.innerHTML = this.name;
return checkbox.content.firstChild;
label.append(checkbox, span);
this.checkbox = label;
return label;
}
checkboxChange(e) {
@@ -89,6 +100,11 @@ class WeatherDisplay {
id: this.navId,
status: this.status,
});
// update coloring of checkbox at bottom of page
if (!this.checkbox) return;
this.checkbox.classList.remove(...statusClasses);
this.checkbox.classList.add(calcStatusClass(value));
}
get status() {