carrramba-encore-rate/frontend/src/stopsManager.tsx

import { createEffect, createResource, createSignal, For, JSX, onMount, Show, useContext, VoidComponent } from 'solid-js';

import { Box, Button, Input, InputLeftAddon, InputGroup, HStack, List, ListItem, Progress, ProgressIndicator, VStack } from "@hope-ui/solid";
import 'leaflet/dist/leaflet.css';

import {
	featureGroup as leafletFeatureGroup, LatLngLiteral as LeafletLatLngLiteral, Map as LeafletMap,
	Marker as LeafletMarker, tileLayer as leafletTileLayer
} from 'leaflet';

import { BusinessDataContext, BusinessDataStore } from "./businessData";
import { SearchContext, SearchStore } from './search';

import { Stop } from './types';
import { renderLineTransportMode, renderLinePicto, TransportModeWeights } from './utils';

import styles from './stopManager.module.css';


const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {

	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={styles.transportMode}>{renderLineTransportMode(line)}</div>);
				reprs.push(renderLinePicto(line, styles));
			}
		}
		return reprs;
	}

	const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);

	return (
		<HStack height="100%">
			{props.stop.name}
			<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
		</HStack>
	);
}

const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {

	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
	if (businessDataStore === undefined)
		return <div />;

	const { getLine } = businessDataStore;

	type ByTransportModeReprs = {
		mode: JSX.Element | undefined;
		[key: string]: JSX.Element | JSX.Element[] | undefined;
	};

	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={styles.transportMode}>{renderLineTransportMode(line)}</div>
					};
				}
				byModeReprs[line.transportMode][line.shortName] = renderLinePicto(line, styles);
			}
		}

		const reprs = [];
		const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] < TransportModeWeights[y] ? 1 : -1);
		for (const transportMode of sortedTransportModes) {
			const lines = byModeReprs[transportMode];
			const repr = [lines.mode];
			delete lines.mode;
			for (const lineId of Object.keys(lines).sort((x, y) => x.localeCompare(y))) {
				repr.push(lines[lineId]);
			}
			reprs.push(repr);
		}
		return reprs;
	}

	const [lineReprs] = createResource(props.stop, fetchLinesRepr);

	return (
		<HStack height="100%">
			{props.stop.name}
			<For each={lineReprs()}>{(line) => line}</For>
		</HStack>
	);
}


const Map: VoidComponent<{ stops: Stop[] }> = (props) => {

	const mapCenter: LeafletLatLngLiteral = { lat: 48.853, lng: 2.35 };

	const searchStore: SearchStore | undefined = useContext(SearchContext);
	if (searchStore === undefined)
		return <div />;

	const { addMarkers } = searchStore;


	let mapDiv: any;
	let map: LeafletMap | undefined = undefined;
	const stopsLayerGroup = leafletFeatureGroup();

	const buildMap = (div: HTMLDivElement) => {
		map = new LeafletMap(div).setView(mapCenter, 11);
		leafletTileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);
		stopsLayerGroup.addTo(map);
	}

	const setMarker = (stop: Stop): L.Marker[] => {
		const markers = [];
		if (stop.lat !== undefined && stop.lon !== undefined) {
			/* TODO: Add stop lines representation to popup. */
			markers.push(new LeafletMarker([stop.lat, stop.lon]).bindPopup(`${stop.name}`).openPopup());
		}
		else {
			for (const _stop of stop.stops) {
				markers.push(...setMarker(_stop));
			}
		}
		return markers;
	}

	onMount(() => buildMap(mapDiv));

	createEffect(() => {
		/* TODO: Avoid to clear all layers... */
		stopsLayerGroup.clearLayers();

		for (const stop of props.stops) {
			const markers = setMarker(stop);
			addMarkers(stop.id, markers);
			for (const marker of markers) {
				stopsLayerGroup.addLayer(marker);
			}
		}

		const stopsBound = stopsLayerGroup.getBounds();
		if (map !== undefined && Object.keys(stopsBound).length) {
			map.fitBounds(stopsBound);
		}
	});

	return <div ref={mapDiv} id='main-map' style={{ width: "100%", height: "100%" }} />;
}

export const StopsManager: VoidComponent = () => {

	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
	const searchStore: SearchStore | undefined = useContext(SearchContext);

	if (businessDataStore === undefined || searchStore === undefined)
		return <div />;

	const { searchStopByName } = businessDataStore;
	const { setDisplayedStops } = searchStore;

	// TODO: Use props instead
	const [minCharactersNb] = createSignal<number>(4);

	const [inProgress, setInProgress] = createSignal<boolean>(false);
	const [foundStops, setFoundStops] = createSignal<Stop[]>([]);

	const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
		/* TODO: Add a tempo before fetching stop for giving time to user to finish his request */
		const stopName = event.currentTarget.value;
		if (stopName.length >= minCharactersNb()) {
			console.log(`Fetching data for ${stopName}`);
			setInProgress(true);
			const stopsById = await searchStopByName(stopName);
			setFoundStops(Object.values(stopsById));
			setInProgress(false);
		}
	}

	return (
		<VStack h="100%">
			<InputGroup w="50%" h="5%">
				<InputLeftAddon>🚉 🚏</InputLeftAddon>
				<Input onInput={onStopNameInput} readOnly={inProgress()} placeholder="Stop name..." />
			</InputGroup>
			<Progress size="xs" w="50%" indeterminate={inProgress()}>
				<ProgressIndicator striped animated />
			</Progress>
			<Box w="100%" h="40%" borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" overflow="scroll" marginBottom="2px">
				<List width="100%" height="100%">
					<For each={foundStops().sort((x, y) => x.name.localeCompare(y.name))}>
						{(stop) =>
							<ListItem borderWidth="1px" mb="0px" color="var(--idfm-black)" borderRadius="$lg">
								<Button fullWidth="true" color="var(--idfm-black)" bg="white" onClick={() => setDisplayedStops([stop])}>
									<Box w="100%" h="100%">
										<Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
											<StopAreaRepr stop={stop} />
										</Show>
									</Box>
								</Button>
							</ListItem>
						}
					</For>
				</List>
			</Box>
			<Box borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" h="55%" w="100%" overflow="scroll">
				<Map stops={foundStops()} />
			</Box>
		</VStack>
	);
};