diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c3083b3..5dad69b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -6,7 +6,7 @@ import { HopeProvider } from "@hope-ui/solid"; import { BusinessDataProvider } from './businessData'; import { SearchProvider } from './search'; -import { NextPassagesDisplay } from './nextPassagesDisplay'; +import { PassagesDisplay } from './passagesDisplay'; import { StopsManager } from './stopsManager'; import styles from './App.module.css'; @@ -53,7 +53,7 @@ const App: Component = () => {
- +
diff --git a/frontend/src/nextPassagesDisplay.module.css b/frontend/src/passagesDisplay.module.css similarity index 98% rename from frontend/src/nextPassagesDisplay.module.css rename to frontend/src/passagesDisplay.module.css index bd13fc9..c42449b 100644 --- a/frontend/src/nextPassagesDisplay.module.css +++ b/frontend/src/passagesDisplay.module.css @@ -5,7 +5,7 @@ } /* Idfm: 1860x1080px */ -.NextPassagesDisplay { +.PassagesDisplay { aspect-ratio: 16/9; --reverse-aspect-ratio: 9/16; /* height is set according to the aspect-ratio, don“t touch it */ diff --git a/frontend/src/nextPassagesDisplay.tsx b/frontend/src/passagesDisplay.tsx similarity index 88% rename from frontend/src/nextPassagesDisplay.tsx rename to frontend/src/passagesDisplay.tsx index 4706dc1..761ad89 100644 --- a/frontend/src/nextPassagesDisplay.tsx +++ b/frontend/src/passagesDisplay.tsx @@ -5,19 +5,18 @@ import { format } from "date-fns"; import { getTransportModeSrc } from "./types"; import { BusinessDataContext } from "./businessData"; -import { NextPassagesPanel } from "./nextPassagesPanel"; +import { PassagesPanel } from "./passagesPanel"; import { SearchContext } from "./search"; -import styles from "./nextPassagesDisplay.module.css"; +import styles from "./passagesDisplay.module.css"; -export const NextPassagesDisplay: Component = () => { +export const PassagesDisplay: Component = () => { const maxPassagePerPanel = 5; const syncPeriodMsec = 20 * 1000; - const { passages, getLinePassages, addPassages, clearPassages, serverUrl } = - useContext(BusinessDataContext); + const { passages, getLinePassages, addPassages, clearPassages, serverUrl } = useContext(BusinessDataContext); const { getDisplayedStop } = useContext(SearchContext); const [panels, setPanels] = createStore([]); @@ -27,12 +26,11 @@ export const NextPassagesDisplay: Component = () => { const [dateNow] = createDateNow(1000); - const panelSwapInterval = setInterval(() => { + setInterval(() => { let nextPanelId = displayedPanelId() + 1; if (nextPanelId >= panels.length) { nextPanelId = 0; } - /* console.log(`Display panel #${nextPanelId}`); */ setDisplayedPanelId(nextPanelId); }, 4000); @@ -92,7 +90,6 @@ export const NextPassagesDisplay: Component = () => { } setInterval( - // const nextPassagesRequestsInterval = setTimeout( async () => { await requestPassages(); }, @@ -100,7 +97,7 @@ export const NextPassagesDisplay: Component = () => { ); // TODO: Sort transport modes by weight - // TODO: Split this method to isolate the nextPassagesPanel part. + // TODO: Split this method to isolate the passagesPanel part. function _computeHeader(title: string): JSX.Element { let transportModes = []; transportModes = new Set( @@ -184,7 +181,7 @@ export const NextPassagesDisplay: Component = () => { ); } - const mainDivClasses = `${styles.NextPassagesDisplay} ${styles.ar16x9}`; + const mainDivClasses = `${styles.PassagesDisplay} ${styles.ar16x9}`; return (
{_computeHeader("Prochains passages")} @@ -212,14 +209,13 @@ export const NextPassagesDisplay: Component = () => { chunkSize += byLinePassagesKeys.length; } else { console.log("chunk=", chunk); - const [store, setStore] = createStore(chunk); + const [store] = createStore(chunk); const panelid = index++; const panel = ( - + passages={store} + lines={_lines} /> ); newPanels.push(panel); positioneds.push({ position: panelid, panel }); @@ -231,13 +227,12 @@ export const NextPassagesDisplay: Component = () => { } if (chunkSize) { const panelId = index++; - const [store, setStore] = createStore(chunk); + const [store] = createStore(chunk); const panel = ( - + passages={store} + lines={_lines} /> ); newPanels.push(panel); positioneds.push({ position: panelId, panel }); diff --git a/frontend/src/nextPassagePanel.module.css b/frontend/src/passagesPanel.module.css similarity index 95% rename from frontend/src/nextPassagePanel.module.css rename to frontend/src/passagesPanel.module.css index 91cb046..88625e1 100644 --- a/frontend/src/nextPassagePanel.module.css +++ b/frontend/src/passagesPanel.module.css @@ -1,4 +1,4 @@ -.nextPassagesContainer { +.passagesContainer { height: 100%; width: 100%; @@ -11,7 +11,7 @@ display: block; } -.nextPassagesContainer .line:last-child { +.passagesContainer .line:last-child { border-bottom: 0; /* To make up for the bottom border deletion */ padding-bottom: calc(2px); @@ -123,6 +123,6 @@ margin-right: calc(30/1920*100%); } -.unavailableSecondNextPassage svg { +.unavailableSecondPassage svg { font-family: IDFVoyageur-regular; } diff --git a/frontend/src/nextPassagesPanel.tsx b/frontend/src/passagesPanel.tsx similarity index 79% rename from frontend/src/nextPassagesPanel.tsx rename to frontend/src/passagesPanel.tsx index 598dc75..a602efe 100644 --- a/frontend/src/nextPassagesPanel.tsx +++ b/frontend/src/passagesPanel.tsx @@ -5,10 +5,10 @@ import { Motion } from "@motionone/solid"; import { TrafficStatus } from './types'; import { renderLineTransportMode, renderLinePicto } from './utils'; -import styles from "./nextPassagePanel.module.css"; +import styles from "./passagesPanel.module.css"; -export const NextPassagesPanel: Component = (props) => { +export const PassagesPanel: Component = (props) => { /* TODO: Find where to get data to compute traffic status. */ const trafficStatusColor = new Map([ @@ -72,10 +72,10 @@ export const NextPassagesPanel: Component = (props) => { } /* TODO: Manage end of service */ - function _genNextPassages(nextPassages, line, destination) { - const nextPassagesLength = nextPassages.length; - const firstPassage = nextPassagesLength > 0 ? nextPassages[0] : undefined; - const secondPassage = nextPassagesLength > 1 ? nextPassages[1] : undefined; + 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 (
@@ -102,15 +102,15 @@ export const NextPassagesPanel: Component = (props) => { } return ( -
+
{() => { const ret = []; - for (const lineId of Object.keys(props.nextPassages)) { + for (const lineId of Object.keys(props.passages)) { const line = props.lines.get(lineId); - const byLineNextPassages = props.nextPassages[lineId]; - for (const destination of Object.keys(byLineNextPassages)) { - const nextPassages = byLineNextPassages[destination]; - ret.push(_genNextPassages(nextPassages, line, destination)); + const byLinePassages = props.passages[lineId]; + for (const destination of Object.keys(byLinePassages)) { + const passages = byLinePassages[destination]; + ret.push(_genPassages(passages, line, destination)); } } return ret;