color selected displays checkboxes to show loading status

server/scripts/modules/progress.mjs

@@ -1,6 +1,6 @@
 // regional forecast and observations
 import { loadImg } from './utils/image.mjs';
-import STATUS from './status.mjs';
+import STATUS, { calcStatusClass, statusClasses } from './status.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
 import {
 	registerProgress, message, getDisplay, msg,
@@ -38,28 +38,7 @@ class Progress extends WeatherDisplay {
 
 			fill.name = display.name;
 
-			let statusClass;
+			const statusClass = calcStatusClass(display.status);
-			switch (display.status) {
-			case STATUS.loading:
-				statusClass = 'loading';
-				break;
-			case STATUS.loaded:
-				statusClass = 'press-here';
-				break;
-			case STATUS.failed:
-				statusClass = 'failed';
-				break;
-			case STATUS.noData:
-				statusClass = 'no-data';
-				break;
-			case STATUS.disabled:
-				statusClass = 'disabled';
-				break;
-			case STATUS.retrying:
-				statusClass = 'retrying';
-				break;
-			default:
-			}
 
 			// make the line
 			const line = this.fillTemplate('item', fill);
@@ -68,7 +47,7 @@ class Progress extends WeatherDisplay {
 
 			// update the status
 			const links = line.querySelector('.links');
-			links.classList.remove('loading');
+			links.classList.remove(...statusClasses);
 			links.classList.add(statusClass);
 			links.dataset.index = index;
 			return line;

server/scripts/modules/status.mjs

@@ -7,4 +7,29 @@ const STATUS = {
 	retrying: Symbol('retyring'),
 };
 
+const calcStatusClass = (statusCode) => {
+	switch (statusCode) {
+	case STATUS.loading:
+		return 'loading';
+	case STATUS.loaded:
+		return 'press-here';
+	case STATUS.failed:
+		return 'failed';
+	case STATUS.noData:
+		return 'no-data';
+	case STATUS.disabled:
+		return 'disabled';
+	case STATUS.retrying:
+		return 'retrying';
+	default:
+		return '';
+	}
+};
+
+const statusClasses = ['loading', 'press-here', 'failed', 'no-data', 'disabled', 'retrying'];
+
 export default STATUS;
+export {
+	calcStatusClass,
+	statusClasses,
+};

server/scripts/modules/weatherdisplay.mjs

@@ -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');
+		const label = document.createElement('label');
-		checkbox.innerHTML = `<label for="${this.elemId}Enabled">
+		label.for = `${this.elemId}-checkbox`;
-							<input type="checkbox" value="true" id="${this.elemId}Enabled" name="${this.elemId}Enabled"${this.enabled ? ' checked' : ''}/>
+		label.id = `${this.elemId}-label`;
-						  ${this.name}</label>`;
+		const checkbox = document.createElement('input');
-		checkbox.content.firstChild.addEventListener('change', (e) => this.checkboxChange(e));
+		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() {

server/styles/scss/_page.scss

@@ -1,3 +1,5 @@
+@use 'shared/_utils'as u;
+
 @font-face {
 	font-family: "Star4000";
 	src: url('../fonts/Star4000.woff') format('woff');
@@ -312,11 +314,17 @@ button {
 
 #enabledDisplays {
 	margin-bottom: 15px;
+	@include u.status-colors();
+
+	.press-here {
+		color: white;
 	}
 
-#enabledDisplays label {
+	label {
 		display: block;
 		max-width: 300px;
+
+	}
 }
 
 #divTwcBottom img {

server/styles/scss/_progress.scss

@@ -37,27 +37,7 @@
 					padding-left: 4px;
 				}
 
-				.loading,
+				@include u.status-colors();
-				.retrying {
-					color: #ffff00;
-				}
-
-				.press-here {
-					color: #00ff00;
-					cursor: pointer;
-				}
-
-				.failed {
-					color: #ff0000;
-				}
-
-				.no-data {
-					color: #C0C0C0;
-				}
-
-				.disabled {
-					color: #C0C0C0;
-				}
 
 				&.loading .loading,
 				&.press-here .press-here,

server/styles/scss/shared/_utils.scss

@@ -15,3 +15,28 @@
 		(-$outline) $outline 0 c.$text-shadow,
 		(-$outline) 0 0 c.$text-shadow;
 }
+
+@mixin status-colors() {
+
+	.loading,
+	.retrying {
+		color: #ffff00;
+	}
+
+	.press-here {
+		color: #00ff00;
+		cursor: pointer;
+	}
+
+	.failed {
+		color: #ff0000;
+	}
+
+	.no-data {
+		color: #C0C0C0;
+	}
+
+	.disabled {
+		color: #C0C0C0;
+	}
+}