♻️ Refactor StopsSearchMenu + load Map lazily + placeholder

frontend/src/stopsSearchMenu/stopPanel.tsx

@@ -0,0 +1,143 @@
+import { createResource, For, JSX, ParentComponent, Show, useContext, VoidComponent } from 'solid-js';
+
+import { Stop } from '../types';
+import { renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from '../utils';
+import { AppContextContext, AppContextStore } from "../appContext";
+import { BusinessDataContext, BusinessDataStore } from "../businessData";
+import { SearchContext, SearchStore } from "./searchStore";
+
+
+import "./stopPanel.scss";
+
+
+const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
+	const fontSize: number = 40;
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	if (businessDataStore === undefined)
+		return <div />;
+
+	const { getLine } = businessDataStore;
+
+	const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
+		const reprs = [];
+		for (const lineId of lineIds) {
+			const line = await getLine(lineId);
+			if (line !== undefined) {
+				reprs.push(<div class="transportMode">{renderLineTransportMode(line)}</div>);
+				reprs.push(renderLinePicto(line));
+			}
+		}
+		return reprs;
+	}
+
+	const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
+
+	return (
+		<div class="stop">
+			<svg class="name" viewBox={`0 0 215 ${fontSize}`}>
+				<text
+					x="100%" y="55%"
+					dominant-baseline="middle" text-anchor="end"
+					font-size={fontSize}>
+					{props.stop.name}
+				</text>
+			</svg>
+			<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
+		</div>
+	);
+}
+
+
+type ByTransportModeReprs = {
+	mode: JSX.Element | undefined;
+	lines: Record<string, JSX.Element | JSX.Element[] | undefined>;
+}
+
+
+const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
+	const fontSize: number = 10;
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (businessDataStore === undefined || appContextStore === undefined || searchStore === undefined)
+		return <div />;
+
+	const { getLine } = businessDataStore;
+	const { setDisplayedStops } = appContextStore;
+	const { setHighlightedStop, resetHighlightedStop } = searchStore;
+
+
+	const fetchLinesRepr = async (stop: Stop): Promise<JSX.Element> => {
+		const lineIds = new Set(stop.lines);
+		const stops = stop.stops;
+		for (const stop of stops) {
+			stop.lines.forEach(lineIds.add, lineIds);
+		}
+
+		const byModeReprs: Record<string, ByTransportModeReprs> = {};
+		for (const lineId of lineIds) {
+			const line = await getLine(lineId);
+			if (line !== undefined) {
+				if (!(line.transportMode in byModeReprs)) {
+					byModeReprs[line.transportMode] = {
+						mode: <div class="transportMode">{renderLineTransportMode(line)}</div>,
+						lines: {}
+					};
+				}
+				byModeReprs[line.transportMode].lines[line.shortName] = renderLinePicto(line);
+			}
+		}
+
+		const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] <
+			TransportModeWeights[y] ? 1 : -1);
+
+		return (
+			<div class="lineRepr">
+				<For each={sortedTransportModes}>{(transportMode) => {
+					const reprs = byModeReprs[transportMode];
+					const lineNames = Object.keys(reprs.lines).sort((x, y) => x.localeCompare(y));
+					return <>
+						{reprs.mode}
+						<div class="linesRepresentationMatrix">
+							<For each={lineNames}>{(lineName) => reprs.lines[lineName]}</For>
+						</div>
+					</>
+				}}
+				</For>
+			</div >
+		);
+	}
+	const [lineReprs] = createResource(props.stop, fetchLinesRepr);
+
+	return (
+		<div
+			class="stop"
+			onClick={() => setDisplayedStops([props.stop])}
+			onMouseEnter={() => setHighlightedStop(props.stop)}
+			onMouseLeave={resetHighlightedStop}
+		>
+			<div class="name" >
+				<ScrollingText height={fontSize} width={100} content={props.stop.name} />
+			</div>
+			{lineReprs()}
+		</div>
+	);
+}
+
+export const StopsPanel: ParentComponent<{ stops: Stop[], show: boolean }> = (props) => {
+
+	return (
+		<div classList={{ "stopPanel": true, "displayed": props.show }}>
+			<For each={props.stops.sort((x, y) => x.name.localeCompare(y.name))}>
+				{(stop) => {
+					return <Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
+						<StopAreaRepr stop={stop} />
+					</Show>;
+				}}
+			</For>
+		</div>
+	);
+}