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

import { Component, createEffect, createResource, createSignal, onMount, Show, useContext } 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 L from 'leaflet';

import { BusinessDataContext } from './businessData';
import { SearchContext } from './search';

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

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


const StopRepr: Component = (props) => {

	const { getLine } = useContext(BusinessDataContext);

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

	const fetchLinesRepr = async (lineIds: Array<string>) => {
		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;
	}

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

const StopAreaRepr: Component = (props) => {

	const { getLine } = useContext(BusinessDataContext);

	const fetchLinesRepr = async (stop: Stop) => {
		const lineIds = new Set(stop.lines);
		const stops = stop.stops;
		for (const stop of stops) {
			stop.lines.forEach(lineIds.add, lineIds);
		}

		const byModeReprs = {};
		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]);
		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: Component = (props) => {

	const mapCenter = [48.853, 2.35];

	const { addMarkers } = useContext(SearchContext);

	let mapDiv: any;
	let map = null;
	const stopsLayerGroup = L.featureGroup();

	const buildMap = (div: HTMLDivElement) => {
		map = L.map(div).setView(mapCenter, 11);
		L.tileLayer('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): Array<L.Marker> => {
		const markers = [];
		if (stop.lat !== undefined && stop.lon !== undefined) {
			/* TODO: Add stop lines representation to popup. */
			markers.push(L.marker([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 (Object.keys(stopsBound).length) {
			map.fitBounds(stopsBound);
		}
	});

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

export const StopsManager: Component = () => {

	const [minCharactersNb, setMinCharactersNb] = createSignal<number>(4);
	const [inProgress, setInProgress] = createSignal<boolean>(false);
	const [foundStops, setFoundStops] = createSignal<Array<number>>([]);

	const { getStop, searchStopByName } = useContext(BusinessDataContext);
	const { setDisplayedStops } = useContext(SearchContext);

	const onStopNameInput = async (event) => {
		/* TODO: Add a tempo before fetching stop for giving time to user to finish his request */
		const stopName = event.target.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%">
					{() => {
						const items = [];
						for (const stop of foundStops().sort((x, y) => x.name.localeCompare(y.name))) {
							items.push(
								<ListItem h="10%" borderWidth="1px" mb="0px" color="var(--idfm-black)" borderRadius="$lg">
									<Button fullWidth="true" color="var(--idfm-black)" bg="white" onClick={() => {
										console.log(`${stop.id} clicked !!!`);
										setDisplayedStops([stop]);
									}}>
										<Box w="100%" h="100%">
											<Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
												<StopAreaRepr stop={stop} />
											</Show>
										</Box>
									</Button>
								</ListItem>);
						}
						return items;
					}}
				</List>
			</Box>
			<Box borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" h="55%" w="100%" overflow="scroll">
				<Map stops={foundStops()} />
			</Box>
		</VStack>
	);
};