5.9.5

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.9.3",
+	"version": "5.9.5",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.9.3",
+			"version": "5.9.5",
 			"license": "MIT",
 			"devDependencies": {
 				"del": "^6.0.0",

package.json

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

server/scripts/index.mjs

@@ -44,10 +44,13 @@ const init = () => {
 		if (document.fullscreenElement) updateFullScreenNavigate();
 	});
 
+	document.getElementById('txtAddress').addEventListener('keydown', (key) => { if (key.code === 'Enter') formSubmit(); });
+	document.getElementById('btnGetLatLng').addEventListener('click', () => formSubmit());
+
 	document.addEventListener('keydown', documentKeydown);
 	document.addEventListener('touchmove', (e) => { if (fullScreenOverride) e.preventDefault(); });
 
-	$('#frmGetLatLng #txtAddress').devbridgeAutocomplete({
+	$('#txtAddress').devbridgeAutocomplete({
 		serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
 		deferRequestBy: 300,
 		paramName: 'text',
@@ -71,11 +74,11 @@ const init = () => {
 		width: 490,
 	});
 
-	$('#frmGetLatLng').on('submit', () => {
+	const formSubmit = () => {
-		const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
+		const ac = $('#txtAddress').devbridgeAutocomplete();
 		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).trigger('click');
 		return false;
-	});
+	};
 
 	// Auto load the previous query
 	const query = localStorage.getItem('latLonQuery');

server/scripts/modules/currentweatherscroll.mjs

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

server/scripts/modules/latestobservations.mjs

@@ -32,26 +32,20 @@ class LatestObservations extends WeatherDisplay {
 		const regionalStations = sortedStations.slice(0, 30);
 
 		// get data for regional stations
-		const allConditions = await Promise.all(regionalStations.map(async (station) => {
+		// get first 7 stations
-			try {
+		const actualConditions = [];
-				const data = await json(`https://api.weather.gov/stations/${station.id}/observations/latest`, { retryCount: 3, stillWaiting: () => this.stillWaiting() });
+		let lastStation = Math.min(regionalStations.length, 7);
-				// test for temperature, weather and wind values present
+		let firstStation = 0;
-				if (data.properties.temperature.value === null
+		while (actualConditions.length < 7 && (lastStation) <= regionalStations.length) {
-					|| data.properties.textDescription === ''
+			// eslint-disable-next-line no-await-in-loop
-					|| data.properties.windSpeed.value === null) return false;
+			const someStations = await getStations(regionalStations.slice(firstStation, lastStation));
-				// format the return values
+
-				return {
+			actualConditions.push(...someStations);
-					...data.properties,
+			// update counters
-					StationId: station.id,
+			firstStation += lastStation;
-					city: station.city,
+			lastStation = Math.min(regionalStations.length + 1, firstStation + 7 - actualConditions.length);
-				};
+		}
-			} catch (e) {
+
-				console.log(`Unable to get latest observations for ${station.id}`);
-				return false;
-			}
-		}));
-		// remove and stations that did not return data
-		const actualConditions = allConditions.filter((condition) => condition);
 		// cut down to the maximum of 7
 		this.data = actualConditions.slice(0, this.MaximumRegionalStations);
 
@@ -119,5 +113,28 @@ const shortenCurrentConditions = (_condition) => {
 	condition = condition.replace(/ with /, '/');
 	return condition;
 };
+
+const getStations = async (stations) => {
+	const stationData = await Promise.all(stations.map(async (station) => {
+		try {
+			const data = await json(`https://api.weather.gov/stations/${station.id}/observations/latest`, { retryCount: 1, stillWaiting: () => this.stillWaiting() });
+			// test for temperature, weather and wind values present
+			if (data.properties.temperature.value === null
+			|| data.properties.textDescription === ''
+			|| data.properties.windSpeed.value === null) return false;
+			// format the return values
+			return {
+				...data.properties,
+				StationId: station.id,
+				city: station.city,
+			};
+		} catch (e) {
+			console.log(`Unable to get latest observations for ${station.id}`);
+			return false;
+		}
+	}));
+	// filter false (no data or other error)
+	return stationData.filter((d) => d);
+};
 // register display
 registerDisplay(new LatestObservations(2, 'latest-observations'));

server/scripts/modules/navigation.mjs

@@ -77,7 +77,7 @@ const getWeather = async (latLon, haveDataCallback) => {
 	weatherParameters.weatherOffice = point.properties.cwa;
 	weatherParameters.city = city;
 	weatherParameters.state = point.properties.relativeLocation.properties.state;
-	weatherParameters.timeZone = point.properties.relativeLocation.properties.timeZone;
+	weatherParameters.timeZone = point.properties.timeZone;
 	weatherParameters.forecast = point.properties.forecast;
 	weatherParameters.forecastGridData = point.properties.forecastGridData;
 	weatherParameters.stations = stations.features;
@@ -400,6 +400,8 @@ const registerRefreshData = (callback) => {
 	loadTwcData.callback = callback;
 };
 
+const timeZone = () => weatherParameters.timeZone;
+
 export {
 	updateStatus,
 	displayNavMessage,
@@ -415,4 +417,5 @@ export {
 	latLonReceived,
 	stopAutoRefreshTimer,
 	registerRefreshData,
+	timeZone,
 };

server/scripts/modules/radar.mjs

@@ -5,7 +5,7 @@ import { loadImg } from './utils/image.mjs';
 import { text } from './utils/fetch.mjs';
 import { rewriteUrl } from './utils/cors.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
-import { registerDisplay } from './navigation.mjs';
+import { registerDisplay, timeZone } from './navigation.mjs';
 import * as utils from './radar-utils.mjs';
 
 class Radar extends WeatherDisplay {
@@ -159,7 +159,7 @@ class Radar extends WeatherDisplay {
 					zone: 'UTC',
 				}).setZone();
 			} else {
-				time = DateTime.fromHTTP(response.headers.get('last-modified')).setZone();
+				time = DateTime.fromHTTP(response.headers.get('last-modified')).setZone(timeZone());
 			}
 
 			// assign to an html image element

server/scripts/modules/regionalforecast-utils.mjs

@@ -23,7 +23,9 @@ const getRegionalObservation = async (point, city) => {
 		const observation = await json(`${station}/observations/latest`);
 		// preload the image
 		if (!observation.properties.icon) return false;
-		preloadImg(getWeatherRegionalIconFromIconLink(observation.properties.icon, !observation.properties.daytime));
+		const icon = getWeatherRegionalIconFromIconLink(observation.properties.icon, !observation.properties.daytime);
+		if (!icon) return false;
+		preloadImg(icon);
 		// return the observation
 		return observation.properties;
 	} catch (e) {

server/scripts/modules/regionalforecast.mjs

@@ -87,6 +87,9 @@ class RegionalForecast extends WeatherDisplay {
 
 				// wait for the regional observation if it's not done yet
 				const observation = await observationPromise;
+
+				if (!observation) return false;
+
 				// format the observation the same as the forecast
 				const regionalObservation = {
 					daytime: !!observation.icon.match(/\/day\//),

server/scripts/modules/weatherdisplay.mjs

@@ -2,9 +2,8 @@
 
 import STATUS, { calcStatusClass, statusClasses } from './status.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
-import { elemForEach } from './utils/elem.mjs';
 import {
-	msg, displayNavMessage, isPlaying, updateStatus,
+	msg, displayNavMessage, isPlaying, updateStatus, timeZone,
 } from './navigation.mjs';
 
 class WeatherDisplay {
@@ -173,20 +172,22 @@ class WeatherDisplay {
 		// only draw if canvas is active to conserve battery
 		if (!this.active) return;
 		// Get the current date and time.
-		const now = DateTime.local();
+		const now = DateTime.local().setZone(timeZone());
 
 		// time = "11:35:08 PM";
 		const time = now.toLocaleString(DateTime.TIME_WITH_SECONDS).padStart(11, ' ');
+		const date = now.toFormat(' ccc LLL ') + now.day.toString().padStart(2, ' ');
 
-		if (this.lastTime !== time) {
+		const dateElem = this.elem.querySelector('.date-time.date');
-			elemForEach('.date-time.time', (elem) => { elem.innerHTML = time.toUpperCase(); });
+		const timeElem = this.elem.querySelector('.date-time.time');
+
+		if (timeElem && this.lastTime !== time) {
+			timeElem.innerHTML = time.toUpperCase();
 		}
 		this.lastTime = time;
 
-		const date = now.toFormat(' ccc LLL ') + now.day.toString().padStart(2, ' ');
+		if (dateElem && this.lastDate !== date) {
-
+			dateElem.innerHTML = date.toUpperCase();
-		if (this.lastDate !== date) {
-			elemForEach('.date-time.date', (elem) => { elem.innerHTML = date.toUpperCase(); });
 		}
 		this.lastDate = date;
 	}

server/styles/scss/_page.scss

@@ -20,72 +20,83 @@ body {
 	}
 }
 
-input,
+#divQuery {
-button {
+	max-width: 640px;
-	font-family: "Star4000";
-}
 
-#imgGetGps {
+	.buttons {
-	height: 13px;
+		display: inline-block;
-	vertical-align: middle;
+		width: 150px;
-}
+		text-align: right;
 
-#txtAddress {
+		#imgGetGps {
-	width: 490px;
+			height: 13px;
-	font-size: 16pt;
+			vertical-align: middle;
-	max-width: calc(100% - 8px);
-
-	@media (prefers-color-scheme: dark) {
-		background-color: #000000;
-		color: white;
-		border: 1px solid darkgray;
-	}
-}
-
-#btnGetGps,
-#btnGetLatLng,
-#btnClearQuery {
-	font-size: 16pt;
-
-	@media (prefers-color-scheme: dark) {
-		background-color: #000000;
-		color: white;
-	}
-
-	border: 1px solid darkgray;
-}
-
-#btnGetGps {
-	img {
-
-		&.dark {
-			display: none;
-
-			@media (prefers-color-scheme: dark) {
-				display: inline-block;
-			}
 		}
 
-		&.light {
+		button {
+			font-size: 16pt;
+
 			@media (prefers-color-scheme: dark) {
-				display: none;
+				background-color: #000000;
+				color: white;
+			}
+
+			border: 1px solid darkgray;
+		}
+
+		#btnGetGps {
+			img {
+
+				&.dark {
+					display: none;
+
+					@media (prefers-color-scheme: dark) {
+						display: inline-block;
+					}
+				}
+
+				&.light {
+					@media (prefers-color-scheme: dark) {
+						display: none;
+					}
+				}
+			}
+
+			&.active {
+				background-color: black;
+
+				@media (prefers-color-scheme: dark) {
+					background-color: white;
+				}
+
+				img {
+					filter: invert(1);
+				}
 			}
 		}
 	}
 
-	&.active {
+	input,
-		background-color: black;
+	button {
+		font-family: "Star4000";
+	}
+
+	#txtAddress {
+		width: calc(100% - 170px);
+		max-width: 490px;
+		font-size: 16pt;
+		min-width: 200px;
+		display: inline-block;
 
 		@media (prefers-color-scheme: dark) {
-			background-color: white;
+			background-color: #000000;
-		}
+			color: white;
-
+			border: 1px solid darkgray;
-		img {
-			filter: invert(1);
 		}
 	}
-}
 
+	
+}
 .autocomplete-suggestions {
 	background-color: #ffffff;
 	border: 1px solid #000000;
@@ -93,19 +104,19 @@ button {
 	@media (prefers-color-scheme: dark) {
 		background-color: #000000;
 	}
-}
 
-.autocomplete-suggestion {
+	.autocomplete-suggestion {
-	/*padding: 2px 5px;*/
+		/*padding: 2px 5px;*/
-	white-space: nowrap;
+		white-space: nowrap;
-	overflow: hidden;
+		overflow: hidden;
-	text-overflow: ellipsis;
+		text-overflow: ellipsis;
-	font-size: 16pt;
+		font-size: 16pt;
-}
+	}
 
-.autocomplete-selected {
+	.autocomplete-selected {
-	background-color: #0000ff;
+		background-color: #0000ff;
-	color: #ffffff;
+		color: #ffffff;
+	}
 }
 
 #divTwc {

views/index.ejs

@@ -60,13 +60,14 @@
 
 
   <div id="divQuery">
-    <form id="frmGetLatLng">
+		<input id="txtAddress" type="text" value="" placeholder="Zip or City, State" />
-      <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/><img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/></button>
+		<div class="buttons">
-      <input id="btnGetLatLng" type="submit" value="GO" />
+			<button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/>
-      <input id="btnClearQuery" type="reset" value="Reset" />
+				<img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/>
-    </form>
+			</button>
-    <div id="divLat"></div>
+			<button id="btnGetLatLng" type="submit">GO</button>
-    <div id="divLng"></div>
+			<button id="btnClearQuery" type="reset">Reset</button>
+		</div>
   </div>
   <div id="version" style="display:none">
     <%- version %>

views/partials/current-weather.ejs

@@ -1,4 +1,4 @@
-<%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true}) %>
+<%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true, hasTime: true}) %>
 	<div class="main has-scroll has-box current-weather">
 		<div class="weather template">
 			<div class="left col">

views/partials/latest-observations.ejs

@@ -1,4 +1,4 @@
-<%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true }) %>
+<%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true, hasTime: true }) %>
 	<div class="main has-scroll latest-observations has-box">
 		<div class="container">
 			<div class="column-headers">