Merge pull request #42 from sebastiankrll/feature/toastify

Feature/toastify

Author: sebastiankrll

apps/web/components/Header/Header.css

@@ -52,7 +52,7 @@ header {
 #header-search {
 	line-height: 2rem;
 	border: none;
-	width: 17rem;
+	width: 20rem;
 	height: 2rem;
 	box-sizing: border-box;
 	background-color: transparent;

apps/web/components/Map/Map.tsx

@@ -3,6 +3,8 @@
 import { useEffect } from "react";
 import "./Map.css";
 import { useRouter } from "next/navigation";
+import { ToastContainer } from "react-toastify";
+import { MessageBoxCloseButton } from "../MessageBox/MessageBox";
 import { onClick, onMoveEnd, onPointerMove, setNavigator } from "./utils/events";
 import { initMap } from "./utils/init";
 import { animatePilotFeatures } from "./utils/pilotFeatures";
@@ -34,5 +36,10 @@ export default function OMap() {
 		};
 	}, [router]);
 
-	return <div id="map" />;
+	return (
+		<>
+			<ToastContainer closeButton={MessageBoxCloseButton} icon={false} theme="colored" />
+			<div id="map" />
+		</>
+	);
 }

apps/web/components/Map/utils/controllerFeatures.ts

@@ -8,10 +8,13 @@ import { fromLonLat } from "ol/proj";
 import Fill from "ol/style/Fill";
 import Style from "ol/style/Style";
 import Text from "ol/style/Text";
+import { toast } from "react-toastify";
+import MessageBox from "@/components/MessageBox/MessageBox";
 import { getCachedAirport, getCachedFir, getCachedTracon } from "@/storage/cache";
 import type { AirportLabelProperties, ControllerLabelProperties } from "@/types/ol";
 import { getAirportSize } from "./airportFeatures";
 import { airportLabelSource, controllerLabelSource, firSource, traconSource } from "./dataLayers";
+import { resetMap } from "./events";
 import { getMapView } from "./init";
 
 export function getControllerLabelStyle(feature: FeatureLike, resolution: number): Style {
@@ -207,6 +210,12 @@ export async function updateControllerFeatures(delta: ControllerDelta): Promise<
 			}
 		}
 	}
+
+	if (highlightedController && !controllerList.has(highlightedController)) {
+		toast.info(MessageBox, { data: { title: "Controller Disconnected", message: `The viewed controller has disconnected.` } });
+		highlightedController = null;
+		resetMap(true);
+	}
 }
 
 function createControllerLabel(lon: number, lat: number, label: string, type: "tracon" | "fir"): void {
@@ -285,7 +294,6 @@ function getAirportLabelStations(controllerMerged: ControllerMerged): number[] {
 }
 
 export function moveToSectorFeature(id: string): Feature<Point> | null {
-	console.log(controllerLabelSource.getFeatures());
 	const labelFeature = controllerLabelSource.getFeatureById(`sector_${id}`) as Feature<Point> | null;
 
 	const view = getMapView();
@@ -299,5 +307,17 @@ export function moveToSectorFeature(id: string): Feature<Point> | null {
 		zoom: 7,
 	});
 
+	addHighlightedController(id);
+
 	return labelFeature;
 }
+
+let highlightedController: string | null = null;
+
+export function addHighlightedController(id: string | null): void {
+	highlightedController = id;
+}
+
+export function clearHighlightedController(): void {
+	highlightedController = null;
+}

apps/web/components/Map/utils/events.tsx

@@ -8,7 +8,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { getAirportShort, getCachedAirline, getCachedAirport, getCachedFir, getCachedTracon, getControllerMerged } from "@/storage/cache";
 import { AirportOverlay, PilotOverlay, SectorOverlay } from "../components/Overlay/Overlays";
 import { addHighlightedAirport, clearHighlightedAirport, moveToAirportFeature } from "./airportFeatures";
-import { moveToSectorFeature } from "./controllerFeatures";
+import { addHighlightedController, clearHighlightedController, moveToSectorFeature } from "./controllerFeatures";
 import { firSource, pilotMainSource, setFeatures, trackSource, traconSource } from "./dataLayers";
 import { getMap, getMapView } from "./init";
 import { addHighlightedPilot, clearHighlightedPilot, moveToPilotFeature } from "./pilotFeatures";
@@ -147,6 +147,7 @@ export async function onClick(evt: MapBrowserEvent): Promise<void> {
 	if ((type === "tracon" || type === "fir") && id) {
 		const strippedId = id.toString().replace(/^(sector)_/, "");
 		navigate?.(`/sector/${strippedId}`);
+		addHighlightedController(strippedId);
 	}
 }
 
@@ -226,11 +227,6 @@ export function updateOverlays(): void {
 }
 
 async function updateOverlay(feature: Feature<Point>, overlay: Overlay): Promise<void> {
-	if (!feature || !overlay) {
-		resetMap(true);
-		return;
-	}
-
 	const geom = feature.getGeometry();
 	const coords = geom?.getCoordinates();
 	overlay.setPosition(coords);
@@ -397,6 +393,7 @@ function clearMap(): void {
 	toggleControllerSectorHover(clickedFeature, false, "clicked");
 	clearHighlightedAirport();
 	clearHighlightedPilot();
+	clearHighlightedController();
 	if (followInterval) {
 		clearInterval(followInterval);
 		followInterval = null;

apps/web/components/Map/utils/pilotFeatures.ts

@@ -4,6 +4,8 @@ import type { Extent } from "ol/extent";
 import { Point } from "ol/geom";
 import { fromLonLat, transformExtent } from "ol/proj";
 import RBush from "rbush";
+import { toast } from "react-toastify";
+import MessageBox from "@/components/MessageBox/MessageBox";
 import type { PilotProperties } from "@/types/ol";
 import { pilotMainSource } from "./dataLayers";
 import { animateOverlays, resetMap } from "./events";
@@ -50,7 +52,6 @@ export function initPilotFeatures(data: WsAll): void {
 }
 
 export function updatePilotFeatures(delta: PilotDelta): void {
-	const items: RBushPilotFeature[] = [];
 	const pilotsInDelta = new Set<string>();
 
 	for (const p of delta.updated) {
@@ -71,15 +72,6 @@ export function updatePilotFeatures(delta: PilotDelta): void {
 		}
 
 		pilotMap.set(p.id, feature);
-
-		const item: RBushPilotFeature = {
-			minX: p.longitude ?? props.longitude,
-			minY: p.latitude ?? props.latitude,
-			maxX: p.longitude ?? props.longitude,
-			maxY: p.latitude ?? props.latitude,
-			feature,
-		};
-		items.push(item);
 	}
 
 	for (const p of delta.added) {
@@ -98,15 +90,6 @@ export function updatePilotFeatures(delta: PilotDelta): void {
 		feature.setId(`pilot_${p.id}`);
 
 		pilotMap.set(p.id, feature);
-
-		const item: RBushPilotFeature = {
-			minX: p.longitude,
-			minY: p.latitude,
-			maxX: p.longitude,
-			maxY: p.latitude,
-			feature,
-		};
-		items.push(item);
 	}
 
 	for (const id of pilotMap.keys()) {
@@ -115,13 +98,26 @@ export function updatePilotFeatures(delta: PilotDelta): void {
 		}
 	}
 
-	if (highlightedPilot && !pilotMap.has(highlightedPilot)) {
-		highlightedPilot = null;
-		resetMap(true);
+	const items: RBushPilotFeature[] = [];
+	for (const [_id, feature] of pilotMap.entries()) {
+		const props = feature.getProperties() as PilotProperties;
+		items.push({
+			minX: props.longitude,
+			minY: props.latitude,
+			maxX: props.longitude,
+			maxY: props.latitude,
+			feature,
+		});
 	}
 
 	pilotRBush.clear();
 	pilotRBush.load(items);
+
+	if (highlightedPilot && !pilotMap.has(highlightedPilot)) {
+		toast.info(MessageBox, { data: { title: "Pilot Disconnected", message: `The viewed pilot has disconnected.` } });
+		highlightedPilot = null;
+		resetMap(true);
+	}
 }
 
 let highlightedPilot: string | null = null;
@@ -134,8 +130,10 @@ export function clearHighlightedPilot(): void {
 	highlightedPilot = null;
 }
 
+let initialized = false;
 export function setPilotFeatures(extent: Extent, zoom: number): void {
-	if (zoom > 10) {
+	if (zoom > 12 && !initialized) {
+		initialized = true;
 		return;
 	}
 
@@ -203,6 +201,8 @@ export function animatePilotFeatures(map: OlMap) {
 
 		features.forEach((feature) => {
 			const groundspeed = (feature.get("groundspeed") as number) || 0;
+			if (groundspeed <= 0) return;
+
 			const heading = (feature.get("heading") as number) || 0;
 			const latitude = (feature.get("latitude") as number) || 0;
 			const longitude = (feature.get("longitude") as number) || 0;

apps/web/components/MessageBox/MessageBox.css

@@ -0,0 +1,68 @@
+:root {
+	--toastify-color-light: var(--color-blue);
+	--toastify-color-dark: var(--color-blue);
+	--toastify-color-info: var(--color-blue);
+	--toastify-color-success: var(--color-green);
+	--toastify-color-warning: var(--color-orange);
+	--toastify-color-error: var(--color-red);
+	--toastify-color-transparent: rgba(255, 255, 255, 0.7);
+
+	--toastify-icon-color-info: white;
+	--toastify-icon-color-success: white;
+	--toastify-icon-color-warning: white;
+	--toastify-icon-color-error: white;
+
+	--toastify-toast-top: 4.5rem;
+	--toastify-toast-right: 1rem;
+	--toastify-toast-padding: 0.5rem;
+	--toastify-toast-min-height: inhert;
+	--toastify-toast-bd-radius: 0px;
+	--toastify-toast-shadow: 1px 1px 5px 1px var(--color-box-shadow);
+	--toastify-font-family: inherit;
+	--toastify-text-color-light: var(--color-light-text);
+	--toastify-text-color-dark: var(--color-main-text);
+
+	--toastify-color-progress-light: white;
+	--toastify-color-progress-dark: white;
+	--toastify-color-progress-info: white;
+	--toastify-color-progress-success: white;
+	--toastify-color-progress-warning: white;
+	--toastify-color-progress-error: white;
+}
+
+.message-box * {
+	color: white;
+	margin-bottom: 4px;
+}
+
+.message-box p:first-child {
+	font-weight: 700;
+	text-transform: uppercase;
+}
+
+.message-box p:last-child {
+	font-size: 12px;
+}
+
+.message-close {
+	position: absolute;
+	top: 0rem;
+	right: 0rem;
+	background-color: var(--color-red);
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 0.25rem;
+	margin-left: auto;
+}
+
+.message-close svg {
+	fill: white;
+}
+
+.message-close:hover {
+	background-color: white;
+}
+
+.message-close:hover svg {
+	fill: var(--color-red);
+}

apps/web/components/MessageBox/MessageBox.tsx

@@ -0,0 +1,30 @@
+import "./MessageBox.css";
+
+interface MessageBoxData {
+	title: string;
+	message: string;
+}
+
+export default function MessageBox({ data }: { data: MessageBoxData }) {
+	return (
+		<div className="message-box">
+			<p>{data.title}</p>
+			<p>{data.message}</p>
+		</div>
+	);
+}
+
+export function MessageBoxCloseButton() {
+	return (
+		<button className="message-close" type="button">
+			<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+				<title>Close panel</title>
+				<path
+					fillRule="evenodd"
+					d="M23.763 22.658 13.106 12 23.68 1.42a.781.781 0 0 0-1.1-1.1L12 10.894 1.42.237a.78.78 0 0 0-1.1 1.105L10.894 12 .237 22.658a.763.763 0 0 0 0 1.105.76.76 0 0 0 1.105 0L12 13.106l10.658 10.657a.76.76 0 0 0 1.105 0 .76.76 0 0 0 0-1.105"
+					clipRule="evenodd"
+				></path>
+			</svg>
+		</button>
+	);
+}

apps/web/package.json

@@ -23,6 +23,7 @@
 		"react": "19.2.0",
 		"react-dom": "19.2.0",
 		"react-intersection-observer": "^10.0.0",
+		"react-toastify": "^11.0.5",
 		"recharts": "^3.5.1",
 		"swr": "^2.3.7"
 	},