Add Ground View screen for server edition, powered by the Windy API https://api.windy.com/

server/scripts/modules/groundview.mjs

@@ -0,0 +1,94 @@
+import STATUS from './status.mjs';
+import WeatherDisplay from './weatherdisplay.mjs';
+import { registerDisplay } from './navigation.mjs';
+import { safeJson } from './utils/fetch.mjs';
+import { withBasePath } from './utils/base-path.mjs';
+
+class GroundView extends WeatherDisplay {
+	constructor(navId, elemId) {
+		super(navId, elemId, 'Ground View', true);
+		this.refreshTime = 5 * 60 * 1000;
+		this.requestToken = 0;
+	}
+
+	async getData(weatherParameters, refresh) {
+		const superResult = super.getData(weatherParameters, refresh);
+		this.setAutoReload();
+		const requestToken = ++this.requestToken;
+		if (!this.weatherParameters?.latitude || !this.weatherParameters?.longitude || !this.weatherParameters?.city) {
+			this.setStatus(STATUS.noData);
+			return superResult;
+		}
+
+		const url = new URL(withBasePath('api/ground-view'), window.location.origin);
+		url.searchParams.set('lat', this.weatherParameters.latitude);
+		url.searchParams.set('lon', this.weatherParameters.longitude);
+		url.searchParams.set('city', this.weatherParameters.city);
+
+		const response = await safeJson(url.toString(), {
+			retryCount: 1,
+		});
+
+		if (requestToken !== this.requestToken) {
+			return superResult;
+		}
+
+		if (!response?.success) {
+			this.data = null;
+			this.setStatus(STATUS.failed);
+			return superResult;
+		}
+
+		this.data = {
+			webcam: response.webcam,
+			hasWebcam: Boolean(response.webcam?.imageUrl),
+		};
+		this.setStatus(STATUS.loaded);
+		return superResult;
+	}
+
+	resetViewState() {
+		const image = this.elem.querySelector('.ground-view-image');
+		const label = this.elem.querySelector('.ground-view-label');
+		const empty = this.elem.querySelector('.ground-view-empty');
+		const media = this.elem.querySelector('.ground-view-media');
+
+		image.removeAttribute('src');
+		image.alt = '';
+		label.textContent = '';
+		empty.textContent = '';
+		media.classList.add('hidden');
+		label.classList.add('hidden');
+		empty.classList.add('hidden');
+	}
+
+	drawCanvas() {
+		super.drawCanvas();
+		const image = this.elem.querySelector('.ground-view-image');
+		const label = this.elem.querySelector('.ground-view-label');
+		const empty = this.elem.querySelector('.ground-view-empty');
+		const media = this.elem.querySelector('.ground-view-media');
+
+		this.resetViewState();
+
+		if (this.data?.hasWebcam) {
+			image.src = this.data.webcam.imageUrl;
+			image.alt = this.data.webcam.label;
+			label.textContent = this.data.webcam.label;
+			media.classList.remove('hidden');
+			label.classList.remove('hidden');
+			empty.classList.add('hidden');
+		} else {
+			image.removeAttribute('src');
+			label.textContent = '';
+			media.classList.add('hidden');
+			label.classList.add('hidden');
+			empty.classList.remove('hidden');
+			empty.textContent = 'No Ground View Available';
+		}
+
+		this.finishDraw();
+	}
+}
+
+registerDisplay(new GroundView(12, 'ground-view'));