diff --git a/frontend/src/passagesDisplay.tsx b/frontend/src/passagesDisplay.tsx index 9882623..d56101e 100644 --- a/frontend/src/passagesDisplay.tsx +++ b/frontend/src/passagesDisplay.tsx @@ -60,78 +60,59 @@ export const PassagesDisplay: Component = () => { ); // TODO: Sort transport modes by weight - // TODO: Split this method to isolate the passagesPanel part. - function _computeHeader(title: string): JSX.Element { - let transportModes = []; - transportModes = new Set( - Object.keys(passages()).map((lineId) => { - const line = _lines.get(lineId); - if (line !== undefined) { - return getTransportModeSrc(line.transportMode, false); - } - return null; - }) - ); + const Header: Component = (props) => { + const computeTransportModes = async (lineIds: Array) => { + const lines = await Promise.all(lineIds.map((lineId) => getLine(lineId))); + return new Set(lines.map((line) => getTransportModeSrc(line.transportMode, false))); + } + + const [linesIds, setLinesIds] = createSignal([]); + const [transportModeUrls] = createResource(linesIds, computeTransportModes); + + createEffect(() => { + setLinesIds(Object.keys(props.passages)); + }); + return (
- - {(transportMode) => { - return ( + + + {(url) =>
- +
- ); - }} - + } + +
- - {title} + + {props.title}
- + {format(dateNow(), "HH:mm")}
-
+ ); - } + }; - function _computeFooter(): JSX.Element { + const Footer: Component = (props) => { return (
- + {(positioned) => { const { position } = positioned; return (
-
@@ -144,7 +125,7 @@ export const PassagesDisplay: Component = () => { return (
- {_computeHeader("Prochains passages")} +
{() => { setPanels([]); @@ -167,16 +148,11 @@ export const PassagesDisplay: Component = () => { if (byLinePassagesKeys.length <= maxPassagePerPanel - chunkSize) { chunk[lineId] = byLinePassages; chunkSize += byLinePassagesKeys.length; - } else { - console.log("chunk=", chunk); + } + else { const [store] = createStore(chunk); const panelid = index++; - const panel = ( - - ); + const panel = ; newPanels.push(panel); positioneds.push({ position: panelid, panel }); @@ -188,12 +164,7 @@ export const PassagesDisplay: Component = () => { if (chunkSize) { const panelId = index++; const [store] = createStore(chunk); - const panel = ( - - ); + const panel = ; newPanels.push(panel); positioneds.push({ position: panelId, panel }); } @@ -202,7 +173,7 @@ export const PassagesDisplay: Component = () => { return newPanels; }}
- {_computeFooter()} +
); }; diff --git a/frontend/src/passagesPanel.tsx b/frontend/src/passagesPanel.tsx index a602efe..70c9624 100644 --- a/frontend/src/passagesPanel.tsx +++ b/frontend/src/passagesPanel.tsx @@ -1,14 +1,56 @@ -import { Component } from 'solid-js'; +import { Component, createEffect, createResource, createSignal, useContext } from 'solid-js'; import { createDateNow, getTime } from '@solid-primitives/date'; import { Motion } from "@motionone/solid"; import { TrafficStatus } from './types'; import { renderLineTransportMode, renderLinePicto } from './utils'; +import { BusinessDataContext } from "./businessData"; + import styles from "./passagesPanel.module.css"; -export const PassagesPanel: Component = (props) => { +const TtwPassage: Component = (props) => { + + const [dateNow] = createDateNow(5000); + + const refTs = props.passage.expectedDepartTs !== null ? props.passage.expectedDepartTs : props.passage.expectedArrivalTs; + const ttwSec = refTs - (getTime(dateNow()) / 1000); + const isApproaching = ttwSec <= 60; + + return ( +
+ + + {Math.floor(ttwSec / 60)} min + + +
+ ); +} + +const UnavailablePassage: Component = (props) => { + const textStyle = { fill: "#000000" }; + + return ( +
+ + Information + non + disponible + +
+ ); +} + +/* TODO: Manage end of service */ +const Passages: Component = (props) => { /* TODO: Find where to get data to compute traffic status. */ const trafficStatusColor = new Map([ @@ -19,102 +61,71 @@ export const PassagesPanel: Component = (props) => { [TrafficStatus.BYPASSED, "#ffffff"] ]); - const [dateNow] = createDateNow(5000); + const passagesLength = props.passages.length; + const firstPassage = passagesLength > 0 ? props.passages[0] : undefined; + const secondPassage = passagesLength > 1 ? props.passages[1] : undefined; + const trafficStatusStyle = { fill: trafficStatusColor.get(props.line.trafficStatus) }; - function _computeTtwPassage(class_, passage, fontSize) { - const refTs = passage.expectedDepartTs !== null ? passage.expectedDepartTs : passage.expectedArrivalTs; - const ttwSec = refTs - (getTime(dateNow()) / 1000); - const isApproaching = ttwSec <= 60; - return ( -
- - - {Math.floor(ttwSec / 60)} min - + return ( +
+
+ {renderLineTransportMode(props.line)} +
+ {renderLinePicto(props.line, styles)} +
+ + + {props.destination} +
- ); - } - - function _computeUnavailablePassage(class_) { - const textStyle = { fill: "#000000" }; - return ( -
- - Information - non - disponible +
+ +
- ); - } - - function _computeSecondPassage(passage): JSX.Element { - return ( - - {_computeTtwPassage(styles.secondPassage, passage, 45)} + > + - ); - } - - function _computeFirstPassage(passage): JSX.Element { - return ( - - {_computeTtwPassage(styles.firstPassage, passage, 50)} + > + - ); +
+ ); +} + +export const PassagesPanel: Component = (props) => { + + const { getLine } = useContext(BusinessDataContext); + + const getLines = async (lineIds: Array) => { + const lines = await Promise.all(lineIds.map((lineId) => getLine(lineId))); + return lines; } - /* TODO: Manage end of service */ - function _genPassages(passages, line, destination) { - const passagesLength = passages.length; - const firstPassage = passagesLength > 0 ? passages[0] : undefined; - const secondPassage = passagesLength > 1 ? passages[1] : undefined; - const trafficStatusStyle = { fill: trafficStatusColor.get(line.trafficStatus) }; - return ( -
-
- {renderLineTransportMode(line)} -
- {renderLinePicto(line, styles)} -
- - - {destination} - - -
-
- - - -
- {firstPassage ? _computeFirstPassage(firstPassage) : null} - {secondPassage ? _computeSecondPassage(secondPassage) : null} -
- ); - } + const [lineIds, setLinesIds] = createSignal([]); + const [lines] = createResource(lineIds, getLines); + + createEffect(async () => { + setLinesIds(Object.keys(props.passages)); + }); return (
- {() => { - const ret = []; - for (const lineId of Object.keys(props.passages)) { - const line = props.lines.get(lineId); - const byLinePassages = props.passages[lineId]; - for (const destination of Object.keys(byLinePassages)) { - const passages = byLinePassages[destination]; - ret.push(_genPassages(passages, line, destination)); + + {() => { + const ret = []; + for (const line of lines()) { + const byLinePassages = props.passages[line.id]; + if (byLinePassages !== undefined) { + for (const destination of Object.keys(byLinePassages)) { + ret.push(); + } + } } - } - return ret; - }} -
+ return ret; + }} + +
); } diff --git a/frontend/src/stopsManager.tsx b/frontend/src/stopsManager.tsx index f1c8910..9312a0d 100644 --- a/frontend/src/stopsManager.tsx +++ b/frontend/src/stopsManager.tsx @@ -45,9 +45,7 @@ const StopAreaRepr: Component = (props) => { const { getLine } = useContext(BusinessDataContext); - const [lineReprs] = createResource(props.stop, fetchLinesRepr); - - async function fetchLinesRepr(stop) { + const fetchLinesRepr = async (stop: Stop) => { const lineIds = new Set(stop.lines); const stops = stop.stops; for (const stop of stops) { @@ -81,6 +79,8 @@ const StopAreaRepr: Component = (props) => { return reprs; } + const [lineReprs] = createResource(props.stop, fetchLinesRepr); + return ( {props.stop.name} @@ -128,7 +128,7 @@ const Map: Component = (props) => { /* TODO: Avoid to clear all layers... */ stopsLayerGroup.clearLayers(); - for (const stop of Object.values(getStops())) { + for (const stop of props.stops) { const markers = setMarker(stop); addMarkers(stop.id, markers); for (const marker of markers) { @@ -145,8 +145,6 @@ const Map: Component = (props) => { return
; } -export const StopsManager: Component = (props) => { - export const StopsManager: Component = () => { const [minCharactersNb, setMinCharactersNb] = createSignal(4); @@ -172,21 +170,21 @@ export const StopsManager: Component = () => { 🚉 🚏 - + - + {() => { const items = []; - for (const stop of Object.values(getStops()).sort((x, y) => x.name.localeCompare(y.name))) { + for (const stop of foundStops().sort((x, y) => x.name.localeCompare(y.name))) { items.push(