🚚 Rename NextPassagesDisplay/NextPassagesPanel (remove Next prefix)

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 = () => {
 							<StopsManager />
 						</div>
 						<div class={styles.panel}>
-							<NextPassagesDisplay />
+							<PassagesDisplay />
 						</div>
 					</div>
 				</HopeProvider>

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 */

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 (
 		<div class={mainDivClasses}>
 			{_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 = (
-								<NextPassagesPanel
+								<PassagesPanel
 									show={panelid == displayedPanelId()}
-									nextPassages={store}
-									lines={_lines}
-								/>
+									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 = (
-							<NextPassagesPanel
+							<PassagesPanel
 								show={panelId == displayedPanelId()}
-								nextPassages={store}
-								lines={_lines}
-							/>
+								passages={store}
+								lines={_lines} />
 						);
 						newPanels.push(panel);
 						positioneds.push({ position: panelId, panel });

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;
 }

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<TrafficStatus, string>([
@@ -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 (
 			<div class={styles.line}>
@@ -102,15 +102,15 @@ export const NextPassagesPanel: Component = (props) => {
 	}
 
 	return (
-		<div classList={{ [styles.nextPassagesContainer]: true, [styles.displayed]: props.show }} style={{ "top": `${100 * props.position}%` }}>
+		<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} style={{ "top": `${100 * props.position}%` }}>
 			{() => {
 				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;