5.7.0

package-lock.json

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

package.json

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

server/scripts/index.mjs

@@ -36,7 +36,9 @@ const init = () => {
 	document.getElementById('NavigatePrevious').addEventListener('click', btnNavigatePreviousClick);
 	document.getElementById('NavigatePlay').addEventListener('click', btnNavigatePlayClick);
 	document.getElementById('ToggleFullScreen').addEventListener('click', btnFullScreenClick);
-	document.getElementById('btnGetGps').addEventListener('click', btnGetGpsClick);
+	const btnGetGps = document.getElementById('btnGetGps');
+	btnGetGps.addEventListener('click', btnGetGpsClick);
+	if (!navigator.geolocation) btnGetGps.style.display = 'none';
 
 	document.getElementById('divTwc').addEventListener('click', () => {
 		if (document.fullscreenElement) updateFullScreenNavigate();
@@ -77,12 +79,16 @@ const init = () => {
 
 	// Auto load the previous query
 	const query = localStorage.getItem('latLonQuery');
-	const latLon = localStorage.getItem('latLonLon');
-	if (query && latLon) {
+	const latLon = localStorage.getItem('latLon');
+	const fromGPS = localStorage.getItem('latLonFromGPS');
+	if (query && latLon && !fromGPS) {
 		const txtAddress = document.getElementById('txtAddress');
 		txtAddress.value = query;
 		loadData(JSON.parse(latLon));
 	}
+	if (fromGPS) {
+		btnGetGpsClick();
+	}
 
 	const twcPlay = localStorage.getItem('play');
 	if (twcPlay === null || twcPlay === 'true') postMessage('navButton', 'play');
@@ -101,7 +107,9 @@ const init = () => {
 		postMessage('navButton', 'play');
 
 		localStorage.removeItem('latLonQuery');
-		localStorage.removeItem('latLonLon');
+		localStorage.removeItem('latLon');
+		localStorage.removeItem('latLonFromGPS');
+		document.getElementById('btnGetGps').classList.remove('active');
 	});
 
 	// swipe functionality
@@ -129,14 +137,14 @@ const autocompleteOnSelect = async (suggestion, elem) => {
 	}
 };
 
-const doRedirectToGeometry = (geom) => {
+const doRedirectToGeometry = (geom, haveDataCallback) => {
 	const latLon = { lat: round2(geom.y, 4), lon: round2(geom.x, 4) };
 	// Save the query
 	localStorage.setItem('latLonQuery', document.getElementById('txtAddress').value);
-	localStorage.setItem('latLonLon', JSON.stringify(latLon));
+	localStorage.setItem('latLon', JSON.stringify(latLon));
 
 	// get the data
-	loadData(latLon);
+	loadData(latLon, haveDataCallback);
 };
 
 const btnFullScreenClick = () => {
@@ -211,7 +219,7 @@ const btnNavigateMenuClick = () => {
 	return false;
 };
 
-const loadData = (_latLon) => {
+const loadData = (_latLon, haveDataCallback) => {
 	// if latlon is provided store it locally
 	if (_latLon) loadData.latLon = _latLon;
 	// get the data
@@ -221,7 +229,7 @@ const loadData = (_latLon) => {
 
 	document.getElementById('txtAddress').blur();
 	stopAutoRefreshTimer();
-	latLonReceived(latLon);
+	latLonReceived(latLon, haveDataCallback);
 };
 
 const swipeCallBack = (direction) => {
@@ -332,38 +340,39 @@ const postMessage = (type, myMessage = {}) => {
 	navMessage({ type, message: myMessage });
 };
 
+const getPosition = async () => new Promise((resolve) => {
+	navigator.geolocation.getCurrentPosition(resolve);
+});
+
 const btnGetGpsClick = async () => {
 	if (!navigator.geolocation) return;
+	const btn = document.getElementById('btnGetGps');
 
-	const position = await (() => new Promise((resolve) => {
-		navigator.geolocation.getCurrentPosition(resolve);
-	}))();
+	// toggle first
+	if (btn.classList.contains('active')) {
+		btn.classList.remove('active');
+		localStorage.removeItem('latLonFromGPS');
+		return;
+	}
+
+	// set gps active
+	btn.classList.add('active');
+
+	// get position
+	const position = await getPosition();
 	const { latitude, longitude } = position.coords;
 
-	let data;
-	try {
-		data = await json('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode', {
-			data: {
-				location: `${longitude},${latitude}`,
-				distance: 1000, // Find location up to 1 KM.
-				f: 'json',
-			},
-		});
-	} catch (e) {
-		console.error('Unable to fetch reverse geocode');
-		console.error(e.status, e.responseJSONe);
-	}
-	const ZipCode = data.address.Postal;
-	const { City } = data.address;
-	const State = states.getTwoDigitCode(data.address.Region);
-	const Country = data.address.CountryCode;
-	const query = `${ZipCode}, ${City}, ${State}, ${Country}`;
-
 	const txtAddress = document.getElementById('txtAddress');
-	txtAddress.value = query;
-	txtAddress.blur();
-	txtAddress.focus();
+	txtAddress.value = `${round2(latitude, 4)}, ${round2(longitude, 4)}`;
 
-	// Save the query
-	localStorage.setItem('latLonQuery', query);
+	doRedirectToGeometry({ y: latitude, x: longitude }, (point) => {
+		console.log(point);
+		const location = point.properties.relativeLocation.properties;
+		// Save the query
+		const query = `${location.city}, ${location.state}`;
+		localStorage.setItem('latLon', JSON.stringify({ lat: latitude, lon: longitude }));
+		localStorage.setItem('latLonQuery', query);
+		localStorage.setItem('latLonFromGPS', true);
+		txtAddress.value = `${location.city}, ${location.state}`;
+	});
 };

server/scripts/modules/navigation.mjs

@@ -49,10 +49,12 @@ const message = (data) => {
 	}
 };
 
-const getWeather = async (latLon) => {
+const getWeather = async (latLon, haveDataCallback) => {
 	// get initial weather data
 	const point = await getPoint(latLon.lat, latLon.lon);
 
+	if (typeof haveDataCallback === 'function') haveDataCallback(point);
+
 	// get stations
 	const stations = await json(point.properties.observationStations);
 
@@ -331,8 +333,8 @@ const AssignLastUpdate = (date) => {
 	}
 };
 
-const latLonReceived = (data) => {
-	getWeather(data);
+const latLonReceived = (data, haveDataCallback) => {
+	getWeather(data, haveDataCallback);
 	AssignLastUpdate(null);
 };
 

server/styles/scss/_page.scss

@@ -53,19 +53,33 @@ button {
 	border: 1px solid darkgray;
 }
 
-#btnGetGps img {
+#btnGetGps {
+	img {
 
-	&.dark {
-		display: none;
+		&.dark {
+			display: none;
 
-		@media (prefers-color-scheme: dark) {
-			display: inline-block;
+			@media (prefers-color-scheme: dark) {
+				display: inline-block;
+			}
+		}
+
+		&.light {
+			@media (prefers-color-scheme: dark) {
+				display: none;
+			}
 		}
 	}
 
-	&.light {
+	&.active {
+		background-color: black;
+
 		@media (prefers-color-scheme: dark) {
-			display: none;
+			background-color: white;
+		}
+
+		img {
+			filter: invert(1);
 		}
 	}
 }
@@ -306,17 +320,21 @@ jsgif {
 	align-items: center;
 	text-align: center;
 	justify-content: center;
-}
 
-#loading .title {
-	font-family: Star4000 Large;
-	font-size: 36px;
-	color: yellow;
-	margin-bottom: 40px;
-}
+	.title {
+		font-family: Star4000 Large;
+		font-size: 36px;
+		color: yellow;
+		margin-bottom: 0px;
+	}
 
-#loading .instructions {
-	font-size: 18pt;
+	.version {
+		margin-bottom: 35px;
+	}
+
+	.instructions {
+		font-size: 18pt;
+	}
 }
 
 .heading {
@@ -372,4 +390,12 @@ jsgif {
 	visibility: hidden;
 	opacity: 0;
 	transition: visibility 0s 1s, opacity 1s linear
+}
+
+.github-links {
+	width: 610px;
+	max-width: calc(100vw - 30px);
+	display: flex;
+	justify-content: space-evenly;
+	flex-wrap: wrap;
 }

views/index.ejs

@@ -9,7 +9,7 @@
   <meta name="keywords" content="WeatherStar 4000+" />
   <meta name="author" content="Matt Walsh" />
   <meta name="application-name" content="WeatherStar 4000+" />
-  <meta name="viewport" content="width=device-width,initial-scale=1;maximum-scale=1;minimum-scale=1">
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <link rel="manifest" href="manifest.json" />
@@ -81,6 +81,7 @@
       <div id="loading" width="640" height="480">
         <div>
           <div class="title">WeatherStar 4000+</div>
+					<div class="version">v<%- version %></div>
           <div class="instructions">Enter your location above to continue</div>
         </div>
       </div>