Merge pull request #5 from benjasper/feature/weather-update-notification

feat: added weather update notification

.eslintrc.json

@@ -15,6 +15,6 @@
 		"linebreak-style": ["error", "unix"],
 		"quotes": ["error", "single"],
 		"semi": ["error", "never"],
-		"prettier/prettier": "error"
+		"prettier/prettier": "warn"
 	}
 }

src/components/ForecastElements.tsx

@@ -265,9 +265,12 @@ const ForecastElements: Component<ForecastElementsProps> = props => {
 										<Show when={forecast.windSpeed && forecast.windDirection}>
 											<WindElement
 												airport={props.airport}
-												windDirection={forecast.windDirection!}
-												windSpeed={forecast.windSpeed!}
-												windGust={forecast.windGust ?? 0}
+												windData={{
+													windDirection: forecast.windDirection!,
+													windSpeed: forecast.windSpeed!,
+													windGust: forecast.windGust ?? 0,
+													isVariable: forecast.windDirectionVariable,
+												}}
 												size="small"
 											/>
 										</Show>

src/components/WeatherElements.tsx

@@ -20,6 +20,7 @@ interface ParsedWeatherElementsProps {
 
 const WeatherElements: Component<ParsedWeatherElementsProps> = props => {
 	const latestMetar = createMemo(() => props.airport?.station?.metars?.edges[0]?.node)
+	const previousMetar = createMemo(() => props.airport?.station?.metars?.edges[1]?.node)
 
 	const now = useTimeStore()
 
@@ -107,44 +108,71 @@ const WeatherElements: Component<ParsedWeatherElementsProps> = props => {
 					<div class="flex flex-shrink-0 flex-col">
 						<WindElement
 							airport={props.airport}
-							windDirection={latestMetar()!.windDirection}
-							windSpeed={latestMetar()!.windSpeed}
-							windGust={latestMetar()!.windGust}
-							variableWindDirection={latestMetar()?.rawText ?? ''}
+							windData={{
+								windDirection: latestMetar()!.windDirection,
+								windSpeed: latestMetar()!.windSpeed,
+								windGust: latestMetar()!.windGust,
+								variableWindDirection: latestMetar()?.rawText ?? '',
+								isVariable: latestMetar()!.windDirectionVariable,
+							}}
+							previousWindDate={{
+								windDirection: previousMetar()?.windDirection,
+								windSpeed: previousMetar()?.windSpeed,
+								windGust: previousMetar()?.windGust,
+								variableWindDirection: previousMetar()?.rawText ?? '',
+								isVariable: previousMetar()?.windDirectionVariable ?? false,
+							}}
 							size="large"
 						/>
 					</div>
 					<div class="flex flex-row flex-wrap justify-center gap-8 md:justify-start">
 						<VisibilityElement
 							visibility={latestMetar()!.visibility}
 							visibilityMoreThan={latestMetar()!.visibilityIsMoreThan}
+							previousVisibility={previousMetar()!.visibility}
+							previousVisibilityMoreThan={previousMetar()!.visibilityIsMoreThan}
 						/>
 
 						<Show when={latestMetar()!.skyConditions!.length > 0}>
 							<SkyConditionsElement
 								skyConditions={latestMetar()!.skyConditions!}
+								previousSkyConditions={previousMetar()?.skyConditions ?? undefined}
 								airport={props.airport}
 							/>
 						</Show>
 
 						<Show when={latestMetar()!.temperature !== undefined}>
-							<TemperatureElement temperature={latestMetar()!.temperature!} name="Temperature" />
+							<TemperatureElement
+								temperature={latestMetar()!.temperature!}
+								previousTemperature={previousMetar()?.temperature ?? undefined}
+								name="Temperature"
+							/>
 						</Show>
 
 						<Show when={latestMetar()!.dewpoint !== undefined}>
-							<TemperatureElement temperature={latestMetar()!.dewpoint!} name="Dewpoint" />
+							<TemperatureElement
+								temperature={latestMetar()!.dewpoint!}
+								previousTemperature={previousMetar()?.dewpoint ?? undefined}
+								name="Dewpoint"
+							/>
 						</Show>
 
 						<Show when={latestMetar()!.altimeter !== undefined}>
-							<AltimeterElement altimeter={latestMetar()!.altimeter!} />
+							<AltimeterElement
+								altimeter={latestMetar()!.altimeter!}
+								previousAltimeter={previousMetar()?.altimeter ?? undefined}
+							/>
 						</Show>
 
 						<Show when={latestMetar()!.presentWeather && (latestMetar()!.presentWeather ?? '').length > 0}>
-							<PrecipitationElement weather={latestMetar()!.presentWeather ?? ''} />
+							<PrecipitationElement
+								weather={latestMetar()!.presentWeather ?? ''}
+								previousWeather={previousMetar()!.presentWeather ?? undefined}
+							/>
 						</Show>
 
 						<Show when={latestMetar()!.flightCategory}>
-							<FlightCategoryElement latestMetar={latestMetar()!} />
+							<FlightCategoryElement latestMetar={latestMetar()!} previousMetar={previousMetar()} />
 						</Show>
 					</div>
 				</Show>

src/components/special/RunwayAndWindRenderer.tsx

@@ -39,7 +39,7 @@ interface RunwayDirection {
 	heading: number
 	x: number
 	y: number
-	windAngle: number
+	windAngle?: number
 	favourableLevel: number
 }
 
@@ -58,25 +58,35 @@ const RunwayPopup = (props: {
 	runway: Runway
 	runwayDirection: RunwayDirection
 	windSpeed: number
-	windDirection: number
+	windDirection?: number
 }) => {
 	const [unitStore] = useUnitStore()
 	const selectedLengthUnit = () => unitStore.smallLength.units[unitStore.smallLength.selected]
 	const selectedSpeedUnit = () => unitStore.speed.units[unitStore.speed.selected]
 
 	// Calculate crosswind components
-	const crosswindComponent = () => Math.sin((props.runwayDirection.windAngle * Math.PI) / 180) * props.windSpeed
+	const crosswindComponent = () =>
+		props.runwayDirection.windAngle !== undefined
+			? Math.sin((props.runwayDirection.windAngle * Math.PI) / 180) * props.windSpeed
+			: undefined
 
 	// Left or right crosswind by comparing wind direction and runway heading
 	const crosswindDirection = () => {
+		if (props.windDirection === undefined) {
+			return undefined
+		}
+
 		let result = props.windDirection - props.runwayDirection.heading
 		if (result < 0) result += 360
 		if (result > 180) return 'left'
 		else return 'right'
 	}
 
-	const headwindComponent = () => Math.cos((props.runwayDirection.windAngle * Math.PI) / 180) * props.windSpeed
-	const tailwindComponent = () => -headwindComponent()
+	const headwindComponent = () =>
+		props.runwayDirection.windAngle !== undefined
+			? Math.cos((props.runwayDirection.windAngle * Math.PI) / 180) * props.windSpeed
+			: undefined
+	const tailwindComponent = () => (headwindComponent() ? -headwindComponent()! : undefined)
 
 	return (
 		<div class="flex flex-col gap-1">
@@ -105,7 +115,7 @@ const RunwayPopup = (props: {
 				</span>
 			</div>
 
-			<Show when={props.windSpeed > 0 && props.windDirection > 0}>
+			<Show when={props.windSpeed > 0 && props.windDirection != undefined}>
 				<div class="flex gap-1">
 					<div
 						class="my-auto h-3 w-3 flex-shrink-0 rounded-full border-[3px]"
@@ -119,17 +129,20 @@ const RunwayPopup = (props: {
 						}}
 						aria-label={`Wind direction is ${favourableToText(props.runwayDirection.favourableLevel)}`}
 					/>
-					<span class="text-sm">
-						Wind angle: {favourableToText(props.runwayDirection.favourableLevel)} (
-						{Math.round(props.runwayDirection.windAngle)}°)
-					</span>
+					<Show when={props.runwayDirection.windAngle !== undefined}>
+						<span class="text-sm">
+							Wind angle: {favourableToText(props.runwayDirection.favourableLevel)} (
+							{Math.round(props.runwayDirection.windAngle!)}°)
+						</span>
+					</Show>
 				</div>
 			</Show>
 
 			<Show
 				when={
-					Math.round(selectedSpeedUnit().conversionFunction(headwindComponent())) > 0 &&
-					props.windDirection > 0
+					props.windDirection !== undefined &&
+					headwindComponent() != undefined &&
+					Math.round(selectedSpeedUnit().conversionFunction(headwindComponent()!)) > 0
 				}>
 				<div class="flex gap-1">
 					<BsArrowUp
@@ -139,15 +152,16 @@ const RunwayPopup = (props: {
 						}}
 					/>
 					<span class="text-sm">
-						Headwind: {Math.round(selectedSpeedUnit().conversionFunction(headwindComponent()))}{' '}
+						Headwind: {Math.round(selectedSpeedUnit().conversionFunction(headwindComponent()!))}{' '}
 						{selectedSpeedUnit().symbol}
 					</span>
 				</div>
 			</Show>
 			<Show
 				when={
-					Math.round(selectedSpeedUnit().conversionFunction(crosswindComponent())) > 0 &&
-					props.windDirection > 0
+					props.windDirection != undefined &&
+					crosswindComponent() != undefined &&
+					Math.round(selectedSpeedUnit().conversionFunction(crosswindComponent()!)) > 0
 				}>
 				<div class="flex gap-1">
 					<BsArrowUp
@@ -158,15 +172,16 @@ const RunwayPopup = (props: {
 						}}
 					/>
 					<span class="text-sm">
-						Crosswind: {Math.round(selectedSpeedUnit().conversionFunction(crosswindComponent()))}{' '}
+						Crosswind: {Math.round(selectedSpeedUnit().conversionFunction(crosswindComponent()!))}{' '}
 						{selectedSpeedUnit().symbol} from the {crosswindDirection()}{' '}
 					</span>
 				</div>
 			</Show>
 			<Show
 				when={
-					Math.round(selectedSpeedUnit().conversionFunction(tailwindComponent())) > 0 &&
-					props.windDirection > 0
+					tailwindComponent() != undefined &&
+					props.windDirection != undefined &&
+					Math.round(selectedSpeedUnit().conversionFunction(tailwindComponent()!)) > 0
 				}>
 				<div class="flex gap-1">
 					<BsArrowUp
@@ -176,7 +191,7 @@ const RunwayPopup = (props: {
 						}}
 					/>
 					<span class="text-sm">
-						Tailwind: {Math.round(selectedSpeedUnit().conversionFunction(tailwindComponent()))}{' '}
+						Tailwind: {Math.round(selectedSpeedUnit().conversionFunction(tailwindComponent()!))}{' '}
 						{selectedSpeedUnit().symbol}
 					</span>
 				</div>
@@ -188,8 +203,9 @@ const RunwayPopup = (props: {
 const RunwayAndWindRenderer = (props: {
 	airport: AirportSearchFragment
 	windSpeed: number
-	windDirection: number
+	windDirection?: number
 	variableWind: VariableWind | undefined
+	isVariable: boolean
 }) => {
 	const [runways, setRunways] = createSignal<Runway[]>([])
 
@@ -236,34 +252,42 @@ const RunwayAndWindRenderer = (props: {
 					x: direction1.x,
 					y: direction1.y,
 					favourableLevel: 0,
-					windAngle: 180 - Math.abs(Math.abs((runway.lowRunwayHeading ?? 0) - props.windDirection) - 180),
+					windAngle: props.windDirection
+						? 180 - Math.abs(Math.abs((runway.lowRunwayHeading ?? 0) - props.windDirection) - 180)
+						: undefined,
 				},
 				direction2: {
 					runway: runway.highRunwayIdentifier,
 					heading: runway.highRunwayHeading ?? 0,
 					x: direction2.x,
 					y: direction2.y,
 					favourableLevel: 0,
-					windAngle: 180 - Math.abs(Math.abs((runway.highRunwayHeading ?? 0) - props.windDirection) - 180),
+					windAngle: props.windDirection
+						? 180 - Math.abs(Math.abs((runway.highRunwayHeading ?? 0) - props.windDirection) - 180)
+						: undefined,
 				},
 				length: runway.length ?? 0,
 				width: runway.width ?? 0,
 			})
 		})
 
 		// Calculate the best runway heading
-		if (props.windSpeed > 1 && props.windDirection != 0) {
+		if (props.windSpeed > 0 && props.windDirection && props.windDirection != 0) {
 			const bestRunways = preparingRunways.filter(runway => {
+				if (runway.direction1.windAngle === undefined || runway.direction2.windAngle === undefined) {
+					return
+				}
+
 				return runway.direction1.windAngle < 90 || runway.direction2.windAngle < 90
 			})
 
 			bestRunways.forEach(runway => {
 				// Set the favourable level to 1 if the wind angle is less than 90 and 2 if the wind angle is less than 45 degrees
-				if (runway.direction1.windAngle < 90)
-					runway.direction1.favourableLevel = runway.direction1.windAngle < 45 ? 2 : 1
+				if (runway.direction1.windAngle! < 90)
+					runway.direction1.favourableLevel = runway.direction1.windAngle! < 45 ? 2 : 1
 
-				if (runway.direction2.windAngle < 90)
-					runway.direction2.favourableLevel = runway.direction2.windAngle < 45 ? 2 : 1
+				if (runway.direction2.windAngle! < 90)
+					runway.direction2.favourableLevel = runway.direction2.windAngle! < 45 ? 2 : 1
 			})
 		}
 
@@ -299,7 +323,7 @@ const RunwayAndWindRenderer = (props: {
 	const windArrows = (): { angle: number; x: number; y: number; isVariable: boolean }[] => {
 		const arrows: { angle: number; x: number; y: number; isVariable: boolean }[] = []
 
-		if (props.windSpeed > 0 && props.windDirection != 0) {
+		if (props.windSpeed > 0 && props.windDirection && props.windDirection != 0) {
 			arrows.push({
 				angle: props.windDirection,
 				x: realCenterX() + radius() * Math.cos(((props.windDirection - 90) * Math.PI) / 180),
@@ -345,7 +369,7 @@ const RunwayAndWindRenderer = (props: {
 					/>
 
 					{/* Wind arrow */}
-					<Show when={props.windSpeed > 0 && props.windDirection != 0}>
+					<Show when={props.windDirection && props.windDirection != 0}>
 						<For each={windArrows()}>
 							{arrow => (
 								<svg

src/components/weather-elements/AltimeterElement.tsx

@@ -1,27 +1,37 @@
 import { FaSolidGauge } from 'solid-icons/fa'
 import { Component } from 'solid-js'
 import { useUnitStore } from '../../context/UnitStore'
-import WeatherElementLayout from '../../layouts/WeatherElementLayout'
+import WeatherElementLayout, { UpdatePing } from '../../layouts/WeatherElementLayout'
 import { PressureUnit } from '../../models/units'
 
 interface AltimeterElementProps {
 	altimeter: number
+	previousAltimeter?: number
 }
 
 const AltimeterElement: Component<AltimeterElementProps> = props => {
 	const [unitStore] = useUnitStore()
 
 	const selected = () => unitStore.pressure.units[unitStore.pressure.selected]
-	const altimeter = () =>
-		selected().symbol === PressureUnit.InchesOfMercury
-			? (Math.round((selected().conversionFunction(props.altimeter) + Number.EPSILON) * 100) / 100).toFixed(2)
-			: Math.round(selected().conversionFunction(props.altimeter))
+
+	const value = (altimeter: number) => {
+		const result =
+			selected().symbol === PressureUnit.InchesOfMercury
+				? (Math.round((selected().conversionFunction(altimeter) + Number.EPSILON) * 100) / 100).toFixed(2)
+				: Math.round(selected().conversionFunction(altimeter))
+
+		return `${result} ${selected().symbol}`
+	}
 
 	return (
-		<WeatherElementLayout name="Altimeter" icon={<FaSolidGauge />} unitType={[{ unitType: 'pressure' }]}>
-			<p class="text-center text-xl dark:text-white-dark">
-				{altimeter()} {selected().symbol}
-			</p>
+		<WeatherElementLayout
+			name="Altimeter"
+			icon={<FaSolidGauge />}
+			unitType={[{ unitType: 'pressure' }]}
+			updatePing={UpdatePing.Neutral}
+			updatePingOldValue={props.previousAltimeter ? value(props.previousAltimeter) : undefined}
+			updatePingNewValue={value(props.altimeter)}>
+			<p class="text-center text-xl dark:text-white-dark">{value(props.altimeter)}</p>
 		</WeatherElementLayout>
 	)
 }