checkboxes display

server/scripts/modules/navigation.js

@@ -95,14 +95,14 @@ const navigation = (() => {
 		// start loading canvases if necessary
 		if (displays.length === 0) {
 			displays = [
-				new CurrentWeather(0,'currentWeather', weatherParameters),
+				new CurrentWeather(0,'currentWeather'),
-				new LatestObservations(1, 'latestObservations', weatherParameters),
+				new LatestObservations(1, 'latestObservations'),
-				new TravelForecast(2, 'travelForecast', weatherParameters),
+				new TravelForecast(2, 'travelForecast', false),	// not active by default
-				new RegionalForecast(3, 'regionalForecast', weatherParameters),
+				new RegionalForecast(3, 'regionalForecast'),
-				new LocalForecast(4, 'localForecast', weatherParameters),
+				new LocalForecast(4, 'localForecast'),
-				new ExtendedForecast(5, 'extendedForecast', weatherParameters),
+				new ExtendedForecast(5, 'extendedForecast'),
-				new Almanac(6, 'almanac', weatherParameters),
+				new Almanac(6, 'almanac'),
-				new Radar(7, 'radar', weatherParameters),
+				new Radar(7, 'radar'),
 			];
 		}
 		// call for new data on each display

server/scripts/modules/progress.js

@@ -67,6 +67,11 @@ class Progress extends WeatherDisplay {
 				statusColor = '#C0C0C0';
 				draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
 				break;
+			case STATUS.disabled:
+				statusText = 'Disabled';
+				statusColor = '#C0C0C0';
+				this.context.drawImage(backgroundImage, 470, y - 20, 45, 25, 470, y - 20, 45, 25);
+				break;
 			default:
 			}
 			// Erase any dots that spill into the status text.

server/scripts/modules/travelforecast.js

@@ -3,9 +3,9 @@
 
 // eslint-disable-next-line no-unused-vars
 class TravelForecast extends WeatherDisplay {
-	constructor(navId, elemId) {
+	constructor(navId, elemId, defaultActive) {
 		// special height and width for scrolling
-		super(navId, elemId, 'Travel Forecast');
+		super(navId, elemId, 'Travel Forecast', defaultActive);
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround6_1.png');
 
@@ -29,7 +29,8 @@ class TravelForecast extends WeatherDisplay {
 	}
 
 	async getData() {
-		super.getData();
+		// super checks for enabled
+		if (!super.getData()) return;
 		const forecastPromises = _TravelCities.map(async city => {
 			try {
 				// get point then forecast

server/scripts/modules/weatherdisplay.js

@@ -7,11 +7,12 @@ const STATUS = {
 	loaded: Symbol('loaded'),
 	failed: Symbol('failed'),
 	noData: Symbol('noData'),
+	disabled: Symbol('disabled'),
 };
 
 // eslint-disable-next-line no-unused-vars
 class WeatherDisplay {
-	constructor(navId, elemId, name) {
+	constructor(navId, elemId, name, defaultEnabled) {
 		// navId is used in messaging
 		this.navId = navId;
 		this.elemId = undefined;
@@ -29,10 +30,39 @@ class WeatherDisplay {
 		this.navBaseCount = 0;
 		this.screenIndex = -1;	// special starting condition
 
-		this.setStatus(STATUS.loading);
+		if (elemId !== 'progress') this.addCheckbox(elemId, defaultEnabled);
+		if (this.enabled) {
+			this.setStatus(STATUS.loading);
+		} else {
+			this.setStatus(STATUS.disabled);
+		}
 		this.createCanvas(elemId);
 	}
 
+	addCheckbox(elemId, defaultEnabled = true) {
+		// get the saved status of the checkbox
+		let savedStatus = window.localStorage.getItem(`${elemId}Enabled`);
+		if (savedStatus === null) savedStatus = defaultEnabled;
+		if (savedStatus === 'true' || savedStatus === true) {
+			this.enabled = true;
+		} else {
+			this.enabled = false;
+		}
+
+		// create a checkbox in the selected displays area
+		const checkbox = `<label for="${elemId}Enabled">
+							<input type="checkbox" value="true" id="${elemId}Enabled" name="${elemId}Enabled"${this.enabled?' checked':''}/>
+						  ${this.name}</label>`;
+		const availableDisplays = document.getElementById('enabledDisplays');
+		availableDisplays.innerHTML += checkbox;
+		const checkboxElem = document.getElementById(`${elemId}Enabled`);
+		checkboxElem.addEventListener('click', this.checkboxChange);
+	}
+
+	checkboxChange(e) {
+		console.log(e);
+	}
+
 	// set data status and send update to navigation module
 	setStatus(value) {
 		this.status = value;
@@ -63,10 +93,17 @@ class WeatherDisplay {
 		// clear current data
 		this.data = undefined;
 		// set status
-		this.setStatus(STATUS.loading);
+
+		if (this.enabled) {
+			this.setStatus(STATUS.loading);
+		} else {
+			this.setStatus(STATUS.disabled);
+			return false;
+		}
 
 		// recalculate navigation timing (in case it was modified in the constructor)
 		this.calcNavTiming();
+		return true;
 	}
 
 	drawCanvas() {
@@ -226,7 +263,7 @@ class WeatherDisplay {
 	}
 
 	isEnabled() {
-		return true;
+		return this.enabled;
 	}
 
 	// navigation timings

server/styles/index.css

@@ -261,4 +261,14 @@ jsgif
 
 #container canvas {
 	position: absolute;
+}
+.heading {
+	font-weight: bold;
+	margin-top: 15px;
+}
+#enabledDisplays {
+	margin-bottom: 15px;
+}
+#enabledDisplays label {
+	display: block;
 }

server/styles/twc3.css

@@ -1 +0,0 @@
-

views/index.ejs

@@ -160,6 +160,11 @@
 		<a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a>
 	</div>
 
+	<div class='heading'>Selected displays</div>
+	<div id='enabledDisplays'>
+
+	</div>
+
     <div id="divInfo">
         Location: <span id="spanCity"></span> <span id="spanState"></span><br />
         Station Id: <span id="spanStationId"></span><br />

ws4kp.code-workspace

@@ -14,10 +14,14 @@
 		},
 		"cSpell.enabled": true,
 		"cSpell.words": [
+			"'storm",
 			"Battaglia",
 			"Noaa",
+			"T",
+			"T'storm",
 			"arcgis",
-			"devbridge"
+			"devbridge",
+			"nosleep"
 		],
 	},
 }