Adrien/carrramba-encore-rate
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

🚨 Try to make TS linter happy

Browse Source
This commit is contained in:
Adrien
2023-01-30 22:07:20 +01:00
parent 27f895ce0c
commit 2fd6783534
10 changed files with 242 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/stopsManager.tsx
View File

@@ -1,11 +1,15 @@
import { Component, createEffect, createResource, createSignal, onMount, Show, useContext } from 'solid-js';
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 L from 'leaflet';
import { BusinessDataContext } from './businessData';
import { SearchContext } from './search';
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';
@@ -13,13 +17,15 @@ import { renderLineTransportMode, renderLinePicto, TransportModeWeights } from '
import styles from './stopManager.module.css';
const StopRepr: Component = (props) => {
const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
const { getLine } = useContext(BusinessDataContext);
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
if (businessDataStore === undefined)
return <div />;
const [lineReprs] = createResource(props.stop.lines, fetchLinesRepr);
const { getLine } = businessDataStore;
const fetchLinesRepr = async (lineIds: Array<string>) => {
const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
const reprs = [];
for (const lineId of lineIds) {
const line = await getLine(lineId);
@@ -31,26 +37,37 @@ const StopRepr: Component = (props) => {
return reprs;
}
const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
return (
<HStack height="100%">
{props.stop.name}
<For each={lineReprs()}>{(line) => line}</For>
<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
</HStack>
);
}
const StopAreaRepr: Component = (props) => {
const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
const { getLine } = useContext(BusinessDataContext);
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
if (businessDataStore === undefined)
return <div />;
const fetchLinesRepr = async (stop: Stop) => {
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 = {};
const byModeReprs: Record<string, ByTransportModeReprs> = {};
for (const lineId of lineIds) {
const line = await getLine(lineId);
if (line !== undefined) {
@@ -64,7 +81,7 @@ const StopAreaRepr: Component = (props) => {
}
const reprs = [];
const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] < TransportModeWeights[y]);
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];
@@ -88,29 +105,34 @@ const StopAreaRepr: Component = (props) => {
}
const Map: Component = (props) => {
const Map: VoidComponent<{ stops: Stop[] }> = (props) => {
const mapCenter = [48.853, 2.35];
const mapCenter: LeafletLatLngLiteral = { lat: 48.853, lng: 2.35 };
const searchStore: SearchStore | undefined = useContext(SearchContext);
if (searchStore === undefined)
return <div />;
const { addMarkers } = searchStore;
const { addMarkers } = useContext(SearchContext);
let mapDiv: any;
let map = null;
const stopsLayerGroup = L.featureGroup();
let map: LeafletMap | undefined = undefined;
const stopsLayerGroup = leafletFeatureGroup();
const buildMap = (div: HTMLDivElement) => {
map = L.map(div).setView(mapCenter, 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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): Array<L.Marker> => {
const setMarker = (stop: Stop): 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());
markers.push(new LeafletMarker([stop.lat, stop.lon]).bindPopup(`${stop.name}`).openPopup());
}
else {
for (const _stop of stop.stops) {
@@ -135,7 +157,7 @@ const Map: Component = (props) => {
}
const stopsBound = stopsLayerGroup.getBounds();
if (Object.keys(stopsBound).length) {
if (map !== undefined && Object.keys(stopsBound).length) {
map.fitBounds(stopsBound);
}
});
@@ -143,18 +165,26 @@ const Map: Component = (props) => {
return <div ref={mapDiv} id='main-map' style={{ width: "100%", height: "100%" }} />;
}
export const StopsManager: Component = () => {
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 [minCharactersNb, setMinCharactersNb] = createSignal<number>(4);
const [inProgress, setInProgress] = createSignal<boolean>(false);
const [foundStops, setFoundStops] = createSignal<Array<number>>([]);
const [foundStops, setFoundStops] = createSignal<Stop[]>([]);
const { getStop, searchStopByName } = useContext(BusinessDataContext);
const { setDisplayedStops } = useContext(SearchContext);
const onStopNameInput = async (event) => {
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.target.value;
const stopName = event.currentTarget.value;
if (stopName.length >= minCharactersNb()) {
console.log(`Fetching data for ${stopName}`);
setInProgress(true);