generate and parse querystring

server/scripts/index.mjs

@@ -4,7 +4,7 @@ import {
 	message as navMessage, isPlaying, resize, resetStatuses, latLonReceived, stopAutoRefreshTimer, registerRefreshData,
 } from './modules/navigation.mjs';
 import { round2 } from './modules/utils/units.mjs';
-import { createLink, readLink } from './modules/share.mjs';
+import { readLink } from './modules/share.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
@@ -82,10 +82,15 @@ const init = () => {
 		return false;
 	};
 
-	// Auto load the previous query
+	// attempt to parse the url parameters
-	const query = localStorage.getItem('latLonQuery');
+	const parsedParameters = readLink();
-	const latLon = localStorage.getItem('latLon');
+
-	const fromGPS = localStorage.getItem('latLonFromGPS');
+	const loadFromParsed = parsedParameters.latLonQuery && parsedParameters.latLon;
+
+	// Auto load the parsed parameters and fall back to the previous query
+	const query = parsedParameters.latLonQuery ?? localStorage.getItem('latLonQuery');
+	const latLon = parsedParameters.latLon ?? localStorage.getItem('latLon');
+	const fromGPS = localStorage.getItem('latLonFromGPS') && !loadFromParsed;
 	if (query && latLon && !fromGPS) {
 		const txtAddress = document.querySelector(TXT_ADDRESS_SELECTOR);
 		txtAddress.value = query;
@@ -239,14 +244,14 @@ const loadData = (_latLon, haveDataCallback) => {
 
 const swipeCallBack = (direction) => {
 	switch (direction) {
-		case 'left':
+	case 'left':
-			btnNavigateNextClick();
+		btnNavigateNextClick();
-			break;
+		break;
 
-		case 'right':
+	case 'right':
-		default:
+	default:
-			btnNavigatePreviousClick();
+		btnNavigatePreviousClick();
-			break;
+		break;
 	}
 };
 
@@ -298,41 +303,41 @@ const documentKeydown = (e) => {
 
 	if (document.fullscreenElement || document.activeElement === document.body) {
 		switch (key) {
-			case ' ': // Space
+		case ' ': // Space
-				// don't scroll
+			// don't scroll
-				e.preventDefault();
+			e.preventDefault();
-				btnNavigatePlayClick();
+			btnNavigatePlayClick();
-				return false;
+			return false;
 
-			case 'ArrowRight':
+		case 'ArrowRight':
-			case 'PageDown':
+		case 'PageDown':
-				// don't scroll
+			// don't scroll
-				e.preventDefault();
+			e.preventDefault();
-				btnNavigateNextClick();
+			btnNavigateNextClick();
-				return false;
+			return false;
 
-			case 'ArrowLeft':
+		case 'ArrowLeft':
-			case 'PageUp':
+		case 'PageUp':
-				// don't scroll
+			// don't scroll
-				e.preventDefault();
+			e.preventDefault();
-				btnNavigatePreviousClick();
+			btnNavigatePreviousClick();
-				return false;
+			return false;
 
-			case 'ArrowUp': // Home
+		case 'ArrowUp': // Home
-				e.preventDefault();
+			e.preventDefault();
-				btnNavigateMenuClick();
+			btnNavigateMenuClick();
-				return false;
+			return false;
 
-			case '0': // "O" Restart
+		case '0': // "O" Restart
-				btnNavigateRefreshClick();
+			btnNavigateRefreshClick();
-				return false;
+			return false;
 
-			case 'F':
+		case 'F':
-			case 'f':
+		case 'f':
-				btnFullScreenClick();
+			btnFullScreenClick();
-				return false;
+			return false;
 
-			default:
+		default:
 		}
 	}
 	return false;

server/scripts/modules/share.mjs

@@ -5,7 +5,7 @@ const init = () => {
 	document.querySelector('#share-link').addEventListener('click', createLink);
 };
 
-const createLink = (e) => {
+const createLink = async (e) => {
 	// cancel default event (click on hyperlink)
 	e.preventDefault();
 	// get all checkboxes on page
@@ -21,7 +21,8 @@ const createLink = (e) => {
 	});
 
 	// add the location string
-	queryStringElements.txtAddress = document.querySelector('#txtAddress')?.value ?? '';
+	queryStringElements.latLonQuery = localStorage.getItem('latLonQuery');
+	queryStringElements.latLon = localStorage.getItem('latLon');
 
 	const queryString = (new URLSearchParams(queryStringElements)).toString();
 
@@ -30,9 +31,22 @@ const createLink = (e) => {
 	console.log(queryStringElements);
 	console.log(queryString);
 	console.log(url.toString());
+	try {
+		await navigator.clipboard.writeText(url.toString());
+		const confirmSpan = document.querySelector('#share-link-copied');
+		confirmSpan.style.display = 'inline';
+		setTimeout(() => {
+			confirmSpan.style.display = 'none';
+		}, 5000);
+	} catch (error) {
+		console.error(error);
+	}
 };
 
-const readLink = false;
+const readLink = () => {
+	const urlSearchParams = new URLSearchParams(window.location.search);
+	return Object.fromEntries(urlSearchParams.entries());
+};
 
 export {
 	createLink,

server/scripts/modules/utils/cors.mjs

@@ -1,8 +1,8 @@
 // rewrite some urls for local server
 const rewriteUrl = (_url) => {
 	let url = _url;
-	url = url.replace('https://api.weather.gov/', window.location.href);
+	url = url.replace('https://api.weather.gov/', `${window.location.protocol}//${window.location.host}/`);
-	url = url.replace('https://www.cpc.ncep.noaa.gov/', window.location.href);
+	url = url.replace('https://www.cpc.ncep.noaa.gov/', `${window.location.protocol}//${window.location.host}/`);
 	return url;
 };
 

server/styles/scss/_page.scss

@@ -1,4 +1,5 @@
 @use 'shared/_utils'as u;
+@use 'shared/_colors'as c;
 
 @font-face {
 	font-family: "Star4000";
@@ -697,4 +698,9 @@ body {
 			}
 		}
 	}
+}
+
+#share-link-copied {
+	color: c.$title-color;
+	display: none;
 }

views/index.ejs

@@ -152,7 +152,7 @@
 	</div>
 
 	<div class='info'>
-		<a href='' id='share-link'>Share this configuration</a>
+		<a href='' id='share-link'>Copy Configuration Link</a> <span id="share-link-copied">Link copied to clipboard!</span>
 	</div>
 
   <div id="divInfo">

ws4kp.code-workspace

@@ -53,6 +53,9 @@
 		},
 		"files.exclude": {},
 		"files.eol": "\n",
-		"editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+			"source.fixAll.eslint": true
+		}
+
 	},
 }