♻️ Refactor StopsSearchMenu + load Map lazily + placeholder

frontend/src/stopsSearchMenu/mapStop.tsx

@@ -0,0 +1,85 @@
+import { createEffect, createResource, For, useContext, VoidComponent } from 'solid-js';
+import { Circle, Fill, Stroke, Style } from 'ol/style';
+import OlFeature from 'ol/Feature';
+import OlPoint from 'ol/geom/Point';
+import OlPolygon from 'ol/geom/Polygon';
+
+import { Stop, StopShape } from '../types';
+import { BusinessDataContext, BusinessDataStore } from "../businessData";
+import { SearchContext, SearchStore } from "./searchStore";
+
+
+// TODO: Use boolean to set MapStop selected
+export const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (props) => {
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+	if (businessDataStore === undefined || searchStore === undefined)
+		return <div />;
+
+	const { getStopShape } = businessDataStore;
+	const { setMapFeature } = searchStore;
+
+	const stopStyle = new Style({
+		image: new Circle({
+			fill: undefined,
+			stroke: new Stroke({ color: '#3399CC', width: 1.5 }),
+			radius: 10,
+		}),
+	});
+
+	const selectedStopStyle = new Style({
+		image: new Circle({
+			fill: undefined,
+			stroke: new Stroke({ color: 'purple', width: 2 }),
+			radius: 10,
+		}),
+	});
+
+	const stopAreaStyle = new Style({
+		stroke: new Stroke({ color: 'red' }),
+		fill: new Fill({ color: 'rgba(255,255,255,0.2)' }),
+	});
+
+	const getShape = async (stopId: number): Promise<StopShape | undefined> => {
+		return await getStopShape(stopId);
+	};
+	const [shape] = createResource<StopShape | undefined, number>(props.stop.id, getShape);
+
+	createEffect(() => {
+		const shape_ = shape();
+
+		if (shape_ === undefined) {
+			return;
+		}
+
+		let feature = undefined;
+
+		if (props.stop.epsg3857_x !== undefined && props.stop.epsg3857_y !== undefined) {
+			const selectStopStyle = () => {
+				return (props.selected?.id === props.stop.id ? selectedStopStyle : stopStyle);
+			}
+			feature = new OlFeature({
+				geometry: new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]),
+			});
+			feature.setStyle(selectStopStyle);
+		}
+
+		else {
+			let geometry = undefined;
+			const areaShape = shape();
+			if (areaShape !== undefined) {
+				geometry = new OlPolygon([areaShape.epsg3857_points.slice(0, -1)]);
+			}
+			else {
+				geometry = new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]);
+			}
+			feature = new OlFeature({ geometry: geometry });
+			feature.setStyle(stopAreaStyle);
+		}
+		feature.setId(props.stop.id);
+
+		setMapFeature(props.stop.id, feature);
+	});
+
+	return <For each={props.stop.stops}>{stop => <MapStop stop={stop} selected={props.selected} />}</For>;
+}