🎉 First commit !!!
This commit is contained in:
224
frontend/src/stopsManager.tsx
Normal file
224
frontend/src/stopsManager.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import { batch, 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 { 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);
|
||||
|
||||
async function fetchLinesRepr(lineIds) {
|
||||
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 [lineReprs] = createResource(props.stop, fetchLinesRepr);
|
||||
|
||||
async function fetchLinesRepr(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;
|
||||
}
|
||||
|
||||
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, getStops } = useContext(SearchContext);
|
||||
|
||||
let mapDiv: any;
|
||||
let map = null;
|
||||
const stopsLayerGroup = L.featureGroup();
|
||||
|
||||
function buildMap(div: HTMLDivElement) {
|
||||
map = L.map(div).setView(mapCenter, 11);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
stopsLayerGroup.addTo(map);
|
||||
}
|
||||
|
||||
function setMarker(stop) {
|
||||
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));
|
||||
|
||||
const onStopUpdate = createEffect(() => {
|
||||
/* TODO: Avoid to clear all layers... */
|
||||
stopsLayerGroup.clearLayers();
|
||||
|
||||
for (const stop of Object.values(getStops())) {
|
||||
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 = (props) => {
|
||||
|
||||
const [minCharactersNb, setMinCharactersNb] = createSignal<int>(4);
|
||||
const [_inProgress, _setInProgress] = createSignal<bool>(false);
|
||||
|
||||
const { serverUrl } = useContext(BusinessDataContext);
|
||||
const { getStops, removeStops, setStops, setDisplayedStop } = useContext(SearchContext);
|
||||
|
||||
async function _fetchStopByName(name) {
|
||||
const data = await fetch(`${serverUrl()}/stop/?name=${name}`, {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
const stops = await data.json();
|
||||
const stopIds = stops.map((stop) => stop.id);
|
||||
|
||||
const stopIdsToRemove = Object.keys(getStops()).filter(stopId => !(stopId in stopIds));
|
||||
|
||||
const byIdStops = {};
|
||||
for (const stop of stops) {
|
||||
byIdStops[stop.id] = stop;
|
||||
}
|
||||
|
||||
batch(() => {
|
||||
removeStops(stopIdsToRemove);
|
||||
setStops(byIdStops);
|
||||
});
|
||||
}
|
||||
|
||||
async function _onStopNameInput(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);
|
||||
await _fetchStopByName(stopName);
|
||||
_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 Object.values(getStops()).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 !!!`);
|
||||
setDisplayedStop(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 />
|
||||
</Box>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user