hazard scroll working, needs styling #92

server/scripts/modules/currentweatherscroll.mjs

@@ -2,6 +2,7 @@ import { locationCleanup } from './utils/string.mjs';
 import { elemForEach } from './utils/elem.mjs';
 import getCurrentWeather from './currentweather.mjs';
 import { currentDisplay } from './navigation.mjs';
+import getHazards from './hazards.mjs';
 
 // constants
 const degree = String.fromCharCode(176);
@@ -13,6 +14,7 @@ let interval;
 let screenIndex = 0;
 let sinceLastUpdate = 0;
 let nextUpdate = DEFAULT_UPDATE;
+let hazardData;
 
 // start drawing conditions
 // reset starts from the first item in the text scroll list
@@ -51,6 +53,8 @@ const incrementInterval = (force) => {
 		return;
 	}
 	screenIndex = (screenIndex + 1) % (lastScreen);
+	// only show hazards when present
+	if (hazardData?.length > 0) screenIndex = 0;
 	// draw new text
 	drawScreen();
 };
@@ -58,11 +62,23 @@ const incrementInterval = (force) => {
 const drawScreen = async () => {
 	// get the conditions
 	const data = await getCurrentWeather();
+	const hazards = await getHazards(() => this.stillWaiting());
+
+	// combine data
+	data.hazards = hazards;
+	hazardData = hazards;
 
 	// nothing to do if there's no data yet
 	if (!data) return;
 
 	const thisScreen = screens[screenIndex](data);
+
+	// update classes on the scroll area
+	elemForEach('.weather-display .scroll .fixed', (elem) => {
+		elem.classList.forEach((cls) => { if (cls !== 'fixed') elem.classList.remove(cls); });
+		thisScreen?.classes?.forEach((cls) => elem.classList.add(cls));
+	});
+
 	if (typeof thisScreen === 'string') {
 		// only a string
 		drawCondition(thisScreen);
@@ -80,8 +96,23 @@ const drawScreen = async () => {
 	}
 };
 
+const hazards = (data) => {
+	// test for data
+	if (!data.hazards || data.hazards.length === 0) return false;
+
+	const hazard = `${data.hazards[0].properties.event} ${data.hazards[0].properties.description}`;
+
+	return {
+		text: hazard,
+		type: 'scroll',
+		classes: ['hazard'],
+	};
+};
+
 // the "screens" are stored in an array for easy addition and removal
 const screens = [
+	// hazards
+	hazards,
 	// station name
 	(data) => `Conditions at ${locationCleanup(data.station.properties.name).substr(0, 20)}`,
 

server/scripts/modules/hazards.mjs

@@ -21,6 +21,7 @@ class Hazards extends WeatherDisplay {
 		// special height and width for scrolling
 		super(navId, elemId, 'Hazards', defaultActive);
 		this.showOnProgress = false;
+		this.okToDrawCurrentConditions = false;
 
 		// 0 screens skips this during "play"
 		this.timing.totalScreens = 0;
@@ -155,6 +156,17 @@ class Hazards extends WeatherDisplay {
 		// return the value as expected
 		return superValue;
 	}
+
+	// make data available outside this class
+	// promise allows for data to be requested before it is available
+	async getHazards(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
+			this.getDataCallbacks.push(() => resolve(this.data));
+		});
+	}
 }
 
 const calcSeverity = (severity, event) => {
@@ -165,4 +177,7 @@ const calcSeverity = (severity, event) => {
 };
 
 // register display
-registerDisplay(new Hazards(0, 'hazards', true));
+const display = new Hazards(0, 'hazards', true);
+registerDisplay(display);
+
+export default display.getHazards.bind(display);