diff --git a/frontend/src/businessData.tsx b/frontend/src/businessData.tsx index 7f8eec1..218cbd4 100644 --- a/frontend/src/businessData.tsx +++ b/frontend/src/businessData.tsx @@ -7,11 +7,11 @@ import { Passages, Stops } from './types'; interface Store { passages: () => Passages; getLinePassages?: (lineId: string) => Passages; - addPassages?: (passages) => void; + addPassages?: (passages: Passages) => void; clearPassages?: () => void; stops: () => Stops; - addStops?: (stops) => void; + addStops?: (stops: Stops) => void; }; export const BusinessDataContext = createContext(); @@ -22,7 +22,7 @@ export function BusinessDataProvider(props: { children: JSX.Element }) { const [store, setStore] = createStore({ lines: {}, passages: {}, stops: {} }); - async function getLine(lineId: number) { + const getLine: Line = async (lineId: string) => { let line = store.lines[lineId]; if (line === undefined) { console.log(`${lineId} not found... fetch it from backend.`); diff --git a/frontend/src/passagesDisplay.tsx b/frontend/src/passagesDisplay.tsx index d56101e..a165a50 100644 --- a/frontend/src/passagesDisplay.tsx +++ b/frontend/src/passagesDisplay.tsx @@ -1,4 +1,4 @@ -import { Component, createEffect, createSignal, useContext } from "solid-js"; +import { Component, createEffect, createResource, createSignal, useContext } from "solid-js"; import { createStore } from "solid-js/store"; import { createDateNow } from "@solid-primitives/date"; import { format } from "date-fns"; diff --git a/frontend/src/search.tsx b/frontend/src/search.tsx index 02c73d6..099140a 100644 --- a/frontend/src/search.tsx +++ b/frontend/src/search.tsx @@ -1,20 +1,20 @@ -import { batch, createContext, createSignal } from 'solid-js'; +import { batch, createContext } from 'solid-js'; import { createStore } from 'solid-js/store'; import { Stop, Stops } from './types'; interface Store { - getMarkers: () => Markers; - addMarkers?: (stopId, markers) => void; - setMarkers?: (markers) => void; + getMarkers: () => Markers; + addMarkers?: (stopId, markers) => void; + setMarkers?: (markers) => void; - getStops: () => Stops; - setStops?: (stops) => void; - removeStops?: (stopIds) => void; + getStops: () => Stops; + setStops?: (stops) => void; + removeStops?: (stopIds: Array) => void; - getDisplayedStop: () => Stop; - setDisplayedStop: (stop: Stop) => void; + getDisplayedStops: () => Array; + setDisplayedStops: (stops: Array) => void; }; export const SearchContext = createContext(); diff --git a/frontend/src/stopsManager.tsx b/frontend/src/stopsManager.tsx index 9312a0d..dce13f2 100644 --- a/frontend/src/stopsManager.tsx +++ b/frontend/src/stopsManager.tsx @@ -1,15 +1,13 @@ -import { batch, Component, createEffect, createResource, createSignal, onMount, Show, useContext } from 'solid-js'; +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 { 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'; @@ -21,7 +19,7 @@ const StopRepr: Component = (props) => { const [lineReprs] = createResource(props.stop.lines, fetchLinesRepr); - async function fetchLinesRepr(lineIds) { + const fetchLinesRepr = async (lineIds: Array) => { const reprs = []; for (const lineId of lineIds) { const line = await getLine(lineId); @@ -100,7 +98,7 @@ const Map: Component = (props) => { let map = null; const stopsLayerGroup = L.featureGroup(); - function buildMap(div: HTMLDivElement) { + const buildMap = (div: HTMLDivElement) => { map = L.map(div).setView(mapCenter, 11); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' @@ -108,7 +106,7 @@ const Map: Component = (props) => { stopsLayerGroup.addTo(map); } - function setMarker(stop) { + const setMarker = (stop: Stop): Array => { const markers = []; if (stop.lat !== undefined && stop.lon !== undefined) { /* TODO: Add stop lines representation to popup. */ @@ -124,7 +122,7 @@ const Map: Component = (props) => { onMount(() => buildMap(mapDiv)); - const onStopUpdate = createEffect(() => { + createEffect(() => { /* TODO: Avoid to clear all layers... */ stopsLayerGroup.clearLayers(); diff --git a/frontend/src/types.tsx b/frontend/src/types.tsx index 9428eca..8e12970 100644 --- a/frontend/src/types.tsx +++ b/frontend/src/types.tsx @@ -6,28 +6,91 @@ export enum TrafficStatus { BYPASSED } -export interface Passages { }; -export interface Passage { - line: number, - operator: string, - destinations: Array, - atStop: boolean, - aimedArrivalTs: number, - expectedArrivalTs: number, - arrivalPlatformName: string, - aimedDepartTs: number, - expectedDepartTs: number, - arrivalStatus: string, - departStatus: string, +export class Passages { }; + +export class Passage { + line: number; + operator: string; + destinations: Array; + atStop: boolean; + aimedArrivalTs: number; + expectedArrivalTs: number; + arrivalPlatformName: string; + aimedDepartTs: number; + expectedDepartTs: number; + arrivalStatus: string; + departStatus: string; + + constructor(line: number, operator: string, destinations: Array, atStop: boolean, aimedArrivalTs: number, + expectedArrivalTs: number, arrivalPlatformName: string, aimedDepartTs: number, expectedDepartTs: number, + arrivalStatus: string, departStatus: string) { + this.line = line; + this.operator = operator; + this.destinations = destinations; + this.atStop = atStop; + this.aimedArrivalTs = aimedArrivalTs; + this.expectedArrivalTs = expectedArrivalTs; + this.arrivalPlatformName = arrivalPlatformName; + this.aimedDepartTs = aimedDepartTs; + this.expectedDepartTs = expectedDepartTs; + this.arrivalStatus = arrivalStatus; + this.departStatus = departStatus; + } }; +export class Stops { }; -export interface Stops { }; -export interface Stop { - id: number, - name: string, - town: string, - lat: number, - lon: number, - lines: Array +export class Stop { + id: number; + name: string; + town: string; + lat: number; + lon: number; + stops: Array; + lines: Array; + + constructor(id: number, name: string, town: string, lat: number, lon: number, stops: Array, lines: Array) { + this.id = id; + this.name = name; + this.town = town; + this.lat = lat; + this.lon = lon; + this.stops = stops; + this.lines = lines; + for (const stop of this.stops) { + this.lines.push(...stop.lines); + } + } +}; + +export class Line { + id: string; + shortName: string; + name: string; + status: string; // TODO: Use an enum + transportMode: string; // TODO: Use an enum + backColorHexa: string; + foreColorHexa: string; + operatorId: number; + accessibility: boolean; + visualSignsAvailable: string; // TODO: Use an enum + audibleSignsAvailable: string; // TODO: Use an enum + stopIds: Array; + + constructor(id: string, shortName: string, name: string, status: string, transportMode: string, backColorHexa: string, + foreColorHexa: string, operatorId: number, accessibility: boolean, visualSignsAvailable: string, + audibleSignsAvailable: string, stopIds: Array) { + this.id = id; + this.shortName = shortName; + this.name = name; + this.status = status; + this.transportMode = transportMode; + this.backColorHexa = backColorHexa; + this.foreColorHexa = foreColorHexa; + this.operatorId = operatorId; + this.accessibility = accessibility; + this.visualSignsAvailable = visualSignsAvailable; + this.audibleSignsAvailable = audibleSignsAvailable; + this.stopIds = stopIds; + } }; diff --git a/frontend/src/utils.tsx b/frontend/src/utils.tsx index ac810be..ff15bac 100644 --- a/frontend/src/utils.tsx +++ b/frontend/src/utils.tsx @@ -1,3 +1,5 @@ +import { Line } from './types'; + const validTransportModes = ["bus", "tram", "metro", "rer", "transilien", "funicular", "ter", "unknown"]; export const TransportModeWeights = { @@ -11,11 +13,11 @@ export const TransportModeWeights = { ter: 8, }; -export function renderLineTransportMode(line): JSX.Element { +export function renderLineTransportMode(line: Line): JSX.Element { return } -export function getTransportModeSrc(mode: string, color: bool = true): string { +export function getTransportModeSrc(mode: string, color: boolean = true): string | null { let ret = null; if (validTransportModes.includes(mode)) { ret = `/public/symbole_${mode}_${color ? "" : "support_fonce_"}RVB.svg`; @@ -24,7 +26,7 @@ export function getTransportModeSrc(mode: string, color: bool = true): string { } -function renderBusLinePicto(line, styles): JSX.Element { +function renderBusLinePicto(line: Line, styles): JSX.Element { return (
@@ -42,7 +44,7 @@ function renderBusLinePicto(line, styles): JSX.Element { ); } -function renderTramLinePicto(line, styles): JSX.Element { +function renderTramLinePicto(line: Line, styles): JSX.Element { const lineStyle = { fill: `#${line.backColorHexa}` }; return (
@@ -62,7 +64,7 @@ function renderTramLinePicto(line, styles): JSX.Element { ); } -function renderMetroLinePicto(line, styles): JSX.Element { +function renderMetroLinePicto(line: Line, styles): JSX.Element { return (
@@ -79,7 +81,7 @@ function renderMetroLinePicto(line, styles): JSX.Element { ); } -function renderTrainLinePicto(line, styles): JSX.Element { +function renderTrainLinePicto(line: Line, styles): JSX.Element { return (
@@ -97,7 +99,7 @@ function renderTrainLinePicto(line, styles): JSX.Element { ); } -export function renderLinePicto(line, styles): JSX.Element { +export function renderLinePicto(line: Line, styles): JSX.Element { switch (line.transportMode) { case "bus": case "funicular":