5.5.3

package-lock.json

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

package.json

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

server/scripts/index.mjs

@@ -3,15 +3,13 @@ import noSleep from './modules/utils/nosleep.mjs';
 import {
 	message as navMessage, isPlaying, resize, resetStatuses, latLonReceived, stopAutoRefreshTimer, registerRefreshData,
 } from './modules/navigation.mjs';
+import { round2 } from './modules/utils/units.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
 });
 
-const overrides = {};
+let fullScreenOverride = false;
-
-let AutoSelectQuery = false;
-let FullScreenOverride = false;
 
 const categories = [
 	'Land Features',
@@ -30,7 +28,7 @@ const init = () => {
 		e.target.select();
 	});
 
-	registerRefreshData(LoadTwcData);
+	registerRefreshData(loadData);
 
 	document.getElementById('NavigateMenu').addEventListener('click', btnNavigateMenuClick);
 	document.getElementById('NavigateRefresh').addEventListener('click', btnNavigateRefreshClick);
@@ -41,11 +39,11 @@ const init = () => {
 	document.getElementById('btnGetGps').addEventListener('click', btnGetGpsClick);
 
 	document.getElementById('divTwc').addEventListener('click', () => {
-		if (document.fullscreenElement) UpdateFullScreenNavigate();
+		if (document.fullscreenElement) updateFullScreenNavigate();
 	});
 
 	document.addEventListener('keydown', documentKeydown);
-	document.addEventListener('touchmove', (e) => { if (FullScreenOverride) e.preventDefault(); });
+	document.addEventListener('touchmove', (e) => { if (fullScreenOverride) e.preventDefault(); });
 
 	$('#frmGetLatLng #txtAddress').devbridgeAutocomplete({
 		serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
@@ -58,21 +56,12 @@ const init = () => {
 			maxSuggestions: 10,
 		},
 		dataType: 'json',
-		transformResult: (response) => {
+		transformResult: (response) => ({
-			if (AutoSelectQuery) {
+			suggestions: response.suggestions.map((i) => ({
-				AutoSelectQuery = false;
+				value: i.text,
-				window.setTimeout(() => {
+				data: i.magicKey,
-					$(ac.suggestionsContainer.children[0]).click();
+			})),
-				}, 1);
+		}),
-			}
-
-			return {
-				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.',
@@ -80,24 +69,23 @@ const init = () => {
 		width: 490,
 	});
 
-	const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
 	$('#frmGetLatLng').on('submit', () => {
-		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).click();
+		const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
+		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).trigger('click');
 		return false;
 	});
 
 	// Auto load the previous query
-	const TwcQuery = localStorage.getItem('TwcQuery');
+	const query = localStorage.getItem('latLonQuery');
-	if (TwcQuery) {
+	const latLon = localStorage.getItem('latLonLon');
-		AutoSelectQuery = true;
+	if (query && latLon) {
 		const txtAddress = document.getElementById('txtAddress');
-		txtAddress.value = TwcQuery;
+		txtAddress.value = query;
-		txtAddress.blur();
+		loadData(JSON.parse(latLon));
-		txtAddress.focus();
 	}
 
-	const TwcPlay = localStorage.getItem('TwcPlay');
+	const twcPlay = localStorage.getItem('play');
-	if (TwcPlay === null || TwcPlay === 'true') postMessage('navButton', 'play');
+	if (twcPlay === null || twcPlay === 'true') postMessage('navButton', 'play');
 
 	document.getElementById('btnClearQuery').addEventListener('click', () => {
 		document.getElementById('spanCity').innerHTML = '';
@@ -106,18 +94,14 @@ const init = () => {
 		document.getElementById('spanRadarId').innerHTML = '';
 		document.getElementById('spanZoneId').innerHTML = '';
 
-		localStorage.removeItem('TwcScrollText');
-		localStorage.removeItem('TwcScrollTextChecked');
-
 		document.getElementById('chkAutoRefresh').checked = true;
-		localStorage.removeItem('TwcAutoRefresh');
+		localStorage.removeItem('autoRefresh');
 
-		document.getElementById('radEnglish').checked = true;
+		localStorage.removeItem('play');
-
-		localStorage.removeItem('TwcPlay');
 		postMessage('navButton', 'play');
 
-		localStorage.removeItem('TwcQuery');
+		localStorage.removeItem('latLonQuery');
+		localStorage.removeItem('latLonLon');
 	});
 
 	// swipe functionality
@@ -129,38 +113,37 @@ const autocompleteOnSelect = async (suggestion, elem) => {
 	// Do not auto get the same city twice.
 	if (elem.previousSuggestionValue === suggestion.value) return;
 
-	if (overrides[suggestion.value]) {
+	const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
-		doRedirectToGeometry(overrides[suggestion.value]);
+		data: {
-	} else {
+			text: suggestion.value,
-		const data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find', {
+			magicKey: suggestion.data,
-			data: {
+			f: 'json',
-				text: suggestion.value,
+		},
-				magicKey: suggestion.data,
+	});
-				f: 'json',
-			},
-		});
 
-		const loc = data.locations[0];
+	const loc = data.locations[0];
-		if (loc) {
+	if (loc) {
-			doRedirectToGeometry(loc.feature.geometry);
+		doRedirectToGeometry(loc.feature.geometry);
-		} else {
+	} else {
-			console.error('An unexpected error occurred. Please try a different search string.');
+		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) };
+	const latLon = { lat: round2(geom.y, 4), lon: round2(geom.x, 4) };
-	LoadTwcData(latLon);
 	// Save the query
-	localStorage.setItem('TwcQuery', document.getElementById('txtAddress').value);
+	localStorage.setItem('latLonQuery', document.getElementById('txtAddress').value);
+	localStorage.setItem('latLonLon', JSON.stringify(latLon));
+
+	// get the data
+	loadData(latLon);
 };
 
 const btnFullScreenClick = () => {
 	if (!document.fullscreenElement) {
-		EnterFullScreen();
+		enterFullScreen();
 	} else {
-		ExitFullscreen();
+		exitFullscreen();
 	}
 
 	if (isPlaying()) {
@@ -169,12 +152,12 @@ const btnFullScreenClick = () => {
 		noSleep(false);
 	}
 
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
 
-const EnterFullScreen = () => {
+const enterFullScreen = () => {
 	const element = document.getElementById('divTwc');
 
 	// Supports most browsers and their versions.
@@ -187,10 +170,10 @@ const EnterFullScreen = () => {
 	} else {
 		// iOS doesn't support FullScreen API.
 		window.scrollTo(0, 0);
-		FullScreenOverride = true;
+		fullScreenOverride = true;
 	}
 	resize();
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	// change hover text and image
 	const img = document.getElementById('ToggleFullScreen');
@@ -198,11 +181,11 @@ const EnterFullScreen = () => {
 	img.title = 'Exit fullscreen';
 };
 
-const ExitFullscreen = () => {
+const exitFullscreen = () => {
 	// exit full-screen
 
-	if (FullScreenOverride) {
+	if (fullScreenOverride) {
-		FullScreenOverride = false;
+		fullScreenOverride = false;
 	}
 
 	if (document.exitFullscreen) {
@@ -224,15 +207,15 @@ const ExitFullscreen = () => {
 
 const btnNavigateMenuClick = () => {
 	postMessage('navButton', 'menu');
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 	return false;
 };
 
-const LoadTwcData = (_latLon) => {
+const loadData = (_latLon) => {
 	// if latlon is provided store it locally
-	if (_latLon) LoadTwcData.latLon = _latLon;
+	if (_latLon) loadData.latLon = _latLon;
 	// get the data
-	const { latLon } = LoadTwcData;
+	const { latLon } = loadData;
 	// if there's no data stop
 	if (!latLon) return;
 
@@ -256,39 +239,39 @@ const swipeCallBack = (direction) => {
 
 const btnNavigateRefreshClick = () => {
 	resetStatuses();
-	LoadTwcData();
+	loadData();
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
 
 const btnNavigateNextClick = () => {
 	postMessage('navButton', 'next');
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
 
 const btnNavigatePreviousClick = () => {
 	postMessage('navButton', 'previous');
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
 
-let NavigateFadeIntervalId = null;
+let navigateFadeIntervalId = null;
 
-const UpdateFullScreenNavigate = () => {
+const updateFullScreenNavigate = () => {
 	document.activeElement.blur();
 	document.getElementById('divTwcBottom').classList.remove('hidden');
 	document.getElementById('divTwcBottom').classList.add('visible');
 
-	if (NavigateFadeIntervalId) {
+	if (navigateFadeIntervalId) {
-		clearTimeout(NavigateFadeIntervalId);
+		clearTimeout(navigateFadeIntervalId);
-		NavigateFadeIntervalId = null;
+		navigateFadeIntervalId = null;
 	}
 
-	NavigateFadeIntervalId = setTimeout(() => {
+	navigateFadeIntervalId = setTimeout(() => {
 		if (document.fullscreenElement) {
 			document.getElementById('divTwcBottom').classList.remove('visible');
 			document.getElementById('divTwcBottom').classList.add('hidden');
@@ -337,11 +320,9 @@ const documentKeydown = (e) => {
 	return false;
 };
 
-Math.round2 = (value, decimals) => Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);
-
 const btnNavigatePlayClick = () => {
 	postMessage('navButton', 'playToggle');
-	UpdateFullScreenNavigate();
+	updateFullScreenNavigate();
 
 	return false;
 };
@@ -376,13 +357,13 @@ const btnGetGpsClick = async () => {
 	const { City } = data.address;
 	const State = states.getTwoDigitCode(data.address.Region);
 	const Country = data.address.CountryCode;
-	const TwcQuery = `${ZipCode}, ${City}, ${State}, ${Country}`;
+	const query = `${ZipCode}, ${City}, ${State}, ${Country}`;
 
 	const txtAddress = document.getElementById('txtAddress');
-	txtAddress.value = TwcQuery;
+	txtAddress.value = query;
 	txtAddress.blur();
 	txtAddress.focus();
 
 	// Save the query
-	localStorage.setItem('TwcQuery', TwcQuery);
+	localStorage.setItem('latLonQuery', query);
 };

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/utils/units.mjs

@@ -1,6 +1,6 @@
 // *********************************** unit conversions ***********************
 
-const round2 = (value, decimals) => Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);
+const round2 = (value, decimals) => Math.trunc(value * 10 ** decimals) / 10 ** decimals;
 
 const kphToMph = (Kph) => Math.round(Kph / 1.60934);
 const celsiusToFahrenheit = (Celsius) => Math.round((Celsius * 9) / 5 + 32);
@@ -14,4 +14,5 @@ export {
 	kilometersToMiles,
 	metersToFeet,
 	pascalToInHg,
+	round2,
 };

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;
@@ -51,7 +52,7 @@ class WeatherDisplay {
 		if (this.elemId === 'progress') return false;
 
 		// get the saved status of the checkbox
-		let savedStatus = window.localStorage.getItem(`${this.elemId}Enabled`);
+		let savedStatus = window.localStorage.getItem(`display-enabled: ${this.elemId}`);
 		if (savedStatus === null) savedStatus = defaultEnabled;
 		if (savedStatus === 'true' || savedStatus === true) {
 			this.enabled = true;
@@ -60,7 +61,7 @@ class WeatherDisplay {
 		}
 
 		// refresh (or initially store the state of the checkbox)
-		window.localStorage.setItem(`${this.elemId}Enabled`, this.enabled);
+		window.localStorage.setItem(`display-enabled: ${this.elemId}`, this.enabled);
 
 		// create a checkbox in the selected displays area
 		const checkbox = document.createElement('template');
@@ -76,7 +77,7 @@ class WeatherDisplay {
 		// update the state
 		this.enabled = e.target.checked;
 		// store the value for the next load
-		window.localStorage.setItem(`${this.elemId}Enabled`, this.enabled);
+		window.localStorage.setItem(`display-enabled: ${this.elemId}`, this.enabled);
 		// calling get data will update the status and actually get the data if we're set to enabled
 		this.getData();
 	}
@@ -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 {
+				&.loading .loading,
-					display: block;
+				&.press-here .press-here,
-				}
+				&.failed .failed,
-
+				&.no-data .no-data,
-				&.press-here .press-here {
+				&.disabled .disabled,
-					display: block;
+				&.retrying .retrying {
-				}
-
-				&.failed .failed {
-					display: block;
-				}
-
-				&.no-data .no-data {
-					display: block;
-				}
-
-				&.disabled .disabled {
 					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>

ws4kp.code-workspace

@@ -50,5 +50,10 @@
 		"[html]": {
 			"editor.defaultFormatter": "j69.ejs-beautify"
 		},
+		"files.exclude": {
+			"**/node_modules": true,
+			"**/debug.log": true,
+			"server/scripts/custom.js": true
+		},
 	},
 }