5.5.2

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.4.3",
+	"version": "5.5.2",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.4.3",
+			"version": "5.5.2",
 			"license": "MIT",
 			"dependencies": {
 				"eslint": "^8.21.0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.4.3",
+	"version": "5.5.2",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {

server/scripts/index.mjs

@@ -8,9 +8,6 @@ document.addEventListener('DOMContentLoaded', () => {
 	init();
 });
 
-const overrides = {};
-
-let AutoSelectQuery = false;
 let FullScreenOverride = false;
 
 const categories = [
@@ -58,21 +55,12 @@ const init = () => {
 			maxSuggestions: 10,
 		},
 		dataType: 'json',
-		transformResult: (response) => {
-			if (AutoSelectQuery) {
-				AutoSelectQuery = false;
-				window.setTimeout(() => {
-					$(ac.suggestionsContainer.children[0]).click();
-				}, 1);
-			}
-
-			return {
-				suggestions: $.map(response.suggestions, (i) => ({
-					value: i.text,
-					data: i.magicKey,
-				})),
-			};
-		},
+		transformResult: (response) => ({
+			suggestions: $.map(response.suggestions, (i) => ({
+				value: i.text,
+				data: i.magicKey,
+			})),
+		}),
 		minChars: 3,
 		showNoSuggestionNotice: true,
 		noSuggestionNotice: 'No results found. Please try a different search string.',
@@ -88,12 +76,11 @@ const init = () => {
 
 	// Auto load the previous query
 	const TwcQuery = localStorage.getItem('TwcQuery');
-	if (TwcQuery) {
-		AutoSelectQuery = true;
+	const TwcLatLong = localStorage.getItem('TwcLatLon');
+	if (TwcQuery && TwcLatLong) {
 		const txtAddress = document.getElementById('txtAddress');
 		txtAddress.value = TwcQuery;
-		txtAddress.blur();
-		txtAddress.focus();
+		LoadTwcData(JSON.parse(TwcLatLong));
 	}
 
 	const TwcPlay = localStorage.getItem('TwcPlay');
@@ -118,6 +105,7 @@ const init = () => {
 		postMessage('navButton', 'play');
 
 		localStorage.removeItem('TwcQuery');
+		localStorage.removeItem('TwcLatLon');
 	});
 
 	// swipe functionality
@@ -129,31 +117,30 @@ const autocompleteOnSelect = async (suggestion, elem) => {
 	// Do not auto get the same city twice.
 	if (elem.previousSuggestionValue === suggestion.value) return;
 
-	if (overrides[suggestion.value]) {
-		doRedirectToGeometry(overrides[suggestion.value]);
-	} else {
-		const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
-			data: {
-				text: suggestion.value,
-				magicKey: suggestion.data,
-				f: 'json',
-			},
-		});
+	const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
+		data: {
+			text: suggestion.value,
+			magicKey: suggestion.data,
+			f: 'json',
+		},
+	});
 
-		const loc = data.locations[0];
-		if (loc) {
-			doRedirectToGeometry(loc.feature.geometry);
-		} else {
-			console.error('An unexpected error occurred. Please try a different search string.');
-		}
+	const loc = data.locations[0];
+	if (loc) {
+		doRedirectToGeometry(loc.feature.geometry);
+	} else {
+		console.error('An unexpected error occurred. Please try a different search string.');
 	}
 };
 
 const doRedirectToGeometry = (geom) => {
 	const latLon = { lat: Math.round2(geom.y, 4), lon: Math.round2(geom.x, 4) };
-	LoadTwcData(latLon);
 	// Save the query
 	localStorage.setItem('TwcQuery', document.getElementById('txtAddress').value);
+	localStorage.setItem('TwcLatLon', JSON.stringify(latLon));
+
+	// get the data
+	LoadTwcData(latLon);
 };
 
 const btnFullScreenClick = () => {

server/scripts/modules/currentweather.mjs

@@ -19,7 +19,8 @@ class CurrentWeather extends WeatherDisplay {
 	}
 
 	async getData(_weatherParameters) {
-		if (!super.getData(_weatherParameters)) return;
+		// always load the data for use in the lower scroll
+		const superResult = super.getData(_weatherParameters);
 		const weatherParameters = _weatherParameters ?? this.weatherParameters;
 
 		// Load the observations
@@ -39,6 +40,8 @@ class CurrentWeather extends WeatherDisplay {
 					data: {
 						limit: 2,
 					},
+					retryCount: 3,
+					stillWaiting: () => this.stillWaiting(),
 				});
 
 				// test data quality
@@ -60,14 +63,17 @@ class CurrentWeather extends WeatherDisplay {
 			this.getDataCallback(undefined);
 			return;
 		}
-		// preload the icon
-		preloadImg(getWeatherIconFromIconLink(observations.features[0].properties.icon));
 
 		// we only get here if there was no error above
 		this.data = { ...observations, station };
-		this.setStatus(STATUS.loaded);
-
 		this.getDataCallback();
+
+		// stop here if we're disabled
+		if (!superResult) return;
+
+		// preload the icon
+		preloadImg(getWeatherIconFromIconLink(observations.features[0].properties.icon));
+		this.setStatus(STATUS.loaded);
 	}
 
 	// format the data for use outside this function
@@ -163,7 +169,8 @@ class CurrentWeather extends WeatherDisplay {
 
 	// make data available outside this class
 	// promise allows for data to be requested before it is available
-	async getCurrentWeather() {
+	async getCurrentWeather(stillWaiting) {
+		if (stillWaiting) this.stillWaitingCallbacks.push(stillWaiting);
 		return new Promise((resolve) => {
 			if (this.data) resolve(this.parseData());
 			// data not available, put it into the data callback queue

server/scripts/modules/currentweatherscroll.mjs

@@ -43,7 +43,7 @@ const incrementInterval = () => {
 
 const drawScreen = async () => {
 	// get the conditions
-	const data = await getCurrentWeather();
+	const data = await getCurrentWeather(() => this.stillWaiting());
 
 	// nothing to do if there's no data yet
 	if (!data) return;

server/scripts/modules/extendedforecast.mjs

@@ -28,6 +28,8 @@ class ExtendedForecast extends WeatherDisplay {
 				data: {
 					units: 'us',
 				},
+				retryCount: 3,
+				stillWaiting: () => this.stillWaiting(),
 			});
 		} catch (e) {
 			console.error('Unable to get extended forecast');

server/scripts/modules/hourly-graph.mjs

@@ -27,7 +27,7 @@ class HourlyGraph extends WeatherDisplay {
 	async getData() {
 		if (!super.getData()) return;
 
-		const data = await getHourlyData();
+		const data = await getHourlyData(() => this.stillWaiting());
 		if (data === undefined) {
 			this.setStatus(STATUS.failed);
 			return;

server/scripts/modules/hourly.mjs

@@ -33,7 +33,7 @@ class Hourly extends WeatherDisplay {
 		let forecast;
 		try {
 			// get the forecast
-			forecast = await json(weatherParameters.forecastGridData);
+			forecast = await json(weatherParameters.forecastGridData, { retryCount: 3, stillWaiting: () => this.stillWaiting() });
 		} catch (e) {
 			console.error('Get hourly forecast failed');
 			console.error(e.status, e.responseJSON);
@@ -120,7 +120,8 @@ class Hourly extends WeatherDisplay {
 
 	// make data available outside this class
 	// promise allows for data to be requested before it is available
-	async getCurrentData() {
+	async getCurrentData(stillWaiting) {
+		if (stillWaiting) this.stillWaitingCallbacks.push(stillWaiting);
 		return new Promise((resolve) => {
 			if (this.data) resolve(this.data);
 			// data not available, put it into the data callback queue

server/scripts/modules/latestobservations.mjs

@@ -34,7 +34,7 @@ class LatestObservations extends WeatherDisplay {
 		// get data for regional stations
 		const allConditions = await Promise.all(regionalStations.map(async (station) => {
 			try {
-				const data = await json(`https://api.weather.gov/stations/${station.id}/observations/latest`);
+				const data = await json(`https://api.weather.gov/stations/${station.id}/observations/latest`, { retryCount: 3, stillWaiting: () => this.stillWaiting() });
 				// test for temperature, weather and wind values present
 				if (data.properties.temperature.value === null
 					|| data.properties.textDescription === ''

server/scripts/modules/localforecast.mjs

@@ -63,6 +63,8 @@ class LocalForecast extends WeatherDisplay {
 				data: {
 					units: 'us',
 				},
+				retryCount: 3,
+				stillWaiting: () => this.stillWaiting(),
 			});
 		} catch (e) {
 			console.error(`GetWeatherForecast failed: ${weatherParameters.forecast}`);

server/scripts/modules/navigation.mjs

@@ -98,21 +98,27 @@ const getWeather = async (latLon) => {
 const updateStatus = (value) => {
 	if (value.id < 0) return;
 	if (!progress) return;
-	progress.drawCanvas(displays, countLoadedCanvases());
+	progress.drawCanvas(displays, countLoadedDisplays());
+
+	// calculate first enabled display
+	const firstDisplayIndex = displays.findIndex((display) => display.enabled);
 
 	// if this is the first display and we're playing, load it up so it starts playing
-	if (isPlaying() && value.id === 0 && value.status === STATUS.loaded) {
+	if (isPlaying() && value.id === firstDisplayIndex && value.status === STATUS.loaded) {
 		navTo(msg.command.firstFrame);
 	}
 
 	// send loaded messaged to parent
-	if (countLoadedCanvases() < displays.length) return;
+	if (countLoadedDisplays() < displays.length) return;
 
 	// everything loaded, set timestamps
 	AssignLastUpdate(new Date());
 };
 
-const countLoadedCanvases = () => displays.reduce((acc, display) => {
+// note: a display that is "still waiting"/"retrying" is considered loaded intentionally
+// the weather.gov api has long load times for some products when you are the first
+// requester for the product after the cache expires
+const countLoadedDisplays = () => displays.reduce((acc, display) => {
 	if (display.status !== STATUS.loading) return acc + 1;
 	return acc;
 }, 0);

server/scripts/modules/progress.mjs

@@ -55,6 +55,9 @@ class Progress extends WeatherDisplay {
 			case STATUS.disabled:
 				statusClass = 'disabled';
 				break;
+			case STATUS.retrying:
+				statusClass = 'retrying';
+				break;
 			default:
 			}
 

server/scripts/modules/status.mjs

@@ -4,6 +4,7 @@ const STATUS = {
 	failed: Symbol('failed'),
 	noData: Symbol('noData'),
 	disabled: Symbol('disabled'),
+	retrying: Symbol('retyring'),
 };
 
 export default STATUS;

server/scripts/modules/utils/fetch.mjs

@@ -11,9 +11,13 @@ const fetchAsync = async (_url, responseType, _params = {}) => {
 		method: 'GET',
 		mode: 'cors',
 		type: 'GET',
+		retryCount: 0,
 		..._params,
 	};
-		// build a url, including the rewrite for cors if necessary
+	// store original number of retries
+	params.originalRetries = params.retryCount;
+
+	// build a url, including the rewrite for cors if necessary
 	let corsUrl = _url;
 	if (params.cors === true) corsUrl = rewriteUrl(_url);
 	const url = new URL(corsUrl, `${window.location.origin}/`);
@@ -30,7 +34,7 @@ const fetchAsync = async (_url, responseType, _params = {}) => {
 	}
 
 	// make the request
-	const response = await fetch(url, params);
+	const response = await doFetch(url, params);
 
 	// check for ok response
 	if (!response.ok) throw new Error(`Fetch error ${response.status} ${response.statusText} while fetching ${response.url}`);
@@ -47,6 +51,48 @@ const fetchAsync = async (_url, responseType, _params = {}) => {
 	}
 };
 
+// fetch with retry and back-off
+const doFetch = (url, params) => new Promise((resolve, reject) => {
+	fetch(url, params).then((response) => {
+		if (params.retryCount > 0) {
+			// 500 status codes should be retried after a short backoff
+			if (response.status >= 500 && response.status <= 599 && params.retryCount > 0) {
+				// call the "still waiting" function
+				if (typeof params.stillWaiting === 'function' && params.retryCount === params.originalRetries) {
+					params.stillWaiting();
+				}
+				// decrement and retry
+				const newParams = {
+					...params,
+					retryCount: params.retryCount - 1,
+				};
+				return resolve(delay(retryDelay(params.originalRetries - newParams.retryCount), doFetch, url, newParams));
+			}
+			// not 500 status
+			return resolve(response);
+		}
+		// out of retries
+		return resolve(response);
+	})
+		.catch((e) => reject(e));
+});
+
+const delay = (time, func, ...args) => new Promise((resolve) => {
+	setTimeout(() => {
+		resolve(func(...args));
+	}, time);
+});
+
+const retryDelay = (retryNumber) => {
+	switch (retryNumber) {
+	case 1: return 1000;
+	case 2: return 2000;
+	case 3: return 5000;
+	case 4: return 10000;
+	default: return 30000;
+	}
+};
+
 export {
 	json,
 	text,

server/scripts/modules/weatherdisplay.mjs

@@ -17,6 +17,7 @@ class WeatherDisplay {
 		this.loadingStatus = STATUS.loading;
 		this.name = name ?? elemId;
 		this.getDataCallbacks = [];
+		this.stillWaitingCallbacks = [];
 		this.defaultEnabled = defaultEnabled;
 		this.okToDrawCurrentConditions = true;
 		this.okToDrawCurrentDateTime = true;
@@ -392,6 +393,14 @@ class WeatherDisplay {
 
 		return template;
 	}
+
+	// still waiting for data (retries triggered)
+	stillWaiting() {
+		if (this.enabled) this.setStatus(STATUS.retrying);
+		// handle still waiting callbacks
+		this.stillWaitingCallbacks.forEach((callback) => callback());
+		this.stillWaitingCallbacks = [];
+	}
 }
 
 export default WeatherDisplay;

server/styles/scss/_progress.scss

@@ -37,7 +37,8 @@
 					padding-left: 4px;
 				}
 
-				.loading {
+				.loading,
+				.retrying {
 					color: #ffff00;
 				}
 
@@ -58,23 +59,12 @@
 					color: #C0C0C0;
 				}
 
-				&.loading .loading {
-					display: block;
-				}
-
-				&.press-here .press-here {
-					display: block;
-				}
-
-				&.failed .failed {
-					display: block;
-				}
-
-				&.no-data .no-data {
-					display: block;
-				}
-
-				&.disabled .disabled {
+				&.loading .loading,
+				&.press-here .press-here,
+				&.failed .failed,
+				&.no-data .no-data,
+				&.disabled .disabled,
+				&.retrying .retrying {
 					display: block;
 				}
 

views/partials/progress.ejs

@@ -9,6 +9,7 @@
         <div class="failed">Failed</div>
         <div class="no-data">No Data</div>
         <div class="disabled">Disabled</div>
+        <div class="retrying">Retrying</div>
       </div>
     </div>
   </div>