✨ Add button to PassagesDisplay to disable passages fetching

frontend/src/extra/iconHamburgerMenu.tsx

@@ -0,0 +1,19 @@
+import { createIcon } from "@hope-ui/solid";
+
+
+// From https://github.com/hope-ui/hope-ui/blob/main/apps/docs/src/icons/IconHamburgerMenu.tsx
+
+export const IconHamburgerMenu = createIcon({
+	viewBox: "0 0 15 15",
+	path: () => (
+		<path
+			d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386
+	13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5
+	8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761
+	13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+			/>
+	),
+});

frontend/src/passagesDisplay.module.css

@@ -39,6 +39,21 @@
 	margin-right: auto;
 }
 
+.header .menu {
+	height: calc(80/100*100%);
+	aspect-ratio: 1;
+	margin-right: calc(30/1920*100%);
+}
+
+.header .menu button {
+	height: 100%;
+	aspect-ratio: 1;
+
+	background-color: var(--idfm-black);
+	border: solid var(--idfm-white) 3px;
+	border-radius: calc(9/86*100%);
+}
+
 .header .clock {
 	width: calc(175/1920*100%);
 	height: calc(80/100*100%);

frontend/src/passagesDisplay.tsx

@@ -1,6 +1,7 @@
-import { createEffect, createResource, createSignal, For, JSX, ParentComponent, Show, useContext, VoidComponent } from "solid-js";
+import { createContext, createEffect, createResource, createSignal, For, JSX, ParentComponent, Show, useContext, VoidComponent, VoidProps } from "solid-js";
 import { createStore } from "solid-js/store";
 import { createDateNow } from "@solid-primitives/date";
+import { IconButton, Menu, MenuTrigger, MenuContent, MenuItem } from "@hope-ui/solid";
 import { format } from "date-fns";
 
 import { BusinessDataContext, BusinessDataStore } from "./businessData";
@@ -9,73 +10,99 @@ import { SearchContext, SearchStore } from "./search";
 import { Passage, Passages } from "./types";
 import { getTransportModeSrc } from "./utils";
 import { PassagesPanel } from "./passagesPanel";
-
+import { IconHamburgerMenu } from './extra/iconHamburgerMenu';
 
 import styles from "./passagesDisplay.module.css";
 
 
-export const PassagesDisplay: ParentComponent = () => {
-
-	const maxPassagePerPanel = 5;
-	const syncPeriodMsec = 20 * 1000;
-	const panelSwitchPeriodMsec = 4 * 1000;
-
-	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	// TODO: Use props instead
-	const searchStore: SearchStore | undefined = useContext(SearchContext);
-
-	if (businessDataStore === undefined || searchStore === undefined)
-		return <div />;
-
-	const { passages, getLine, getLinePassages, refreshPassages, clearPassages } = businessDataStore;
-	const { getDisplayedStops } = searchStore;
-
-	const [displayedPanelId, setDisplayedPanelId] = createSignal<number>(0);
-
 type PositionnedPanel = {
 	position: number;
 	// TODO: Should be PassagesPanelComponent ?
 	panel: JSX.Element;
 };
-	const [panels, setPanels] = createStore<PositionnedPanel[]>([]);
 
-	const [dateNow] = createDateNow(1000);
 
-	setInterval(() => {
+interface PassagesDisplayStore {
-		let nextPanelId = displayedPanelId() + 1;
+	isPassagesRefreshEnabled: () => boolean;
-		if (nextPanelId >= panels.length) {
+	enablePassagesRefresh: () => void;
-			nextPanelId = 0;
+	disablePassagesRefresh: () => void;
+	togglePassagesRefresh: () => void;
+
+	getPanels: () => Array<PositionnedPanel>;
+	setPanels: (panels: Array<PositionnedPanel>) => void;
+
+	getDisplayedPanelId: () => number;
+	setDisplayedPanelId: (panelId: number) => void;
+};
+
+const PassagesDisplayContext = createContext<PassagesDisplayStore>();
+
+function PassagesDisplayProvider(props: { children: JSX.Element }) {
+
+	type Store = {
+		refreshEnabled: boolean;
+		panels: Array<PositionnedPanel>;
+		displayedPanelId: number;
+	};
+
+	const [store, setStore] = createStore<Store>({ refreshEnabled: true, panels: [], displayedPanelId: 0 });
+
+	const isPassagesRefreshEnabled = (): boolean => {
+		return store.refreshEnabled;
 	}
-		setDisplayedPanelId(nextPanelId);
-	}, panelSwitchPeriodMsec);
 
-	createEffect(() => {
+	const enablePassagesRefresh = (): void => {
-		console.log("######### onStopIdUpdate #########");
+		setStore('refreshEnabled', true);
-		// Track local.stopIp to force dependency.
-		console.log("getDisplayedStop=", getDisplayedStops());
-		clearPassages();
-	});
-
-	createEffect(async () => {
-		console.log(`## OnPassageUpdate ${passages()} ##`);
-		const stops = getDisplayedStops();
-		if (stops.length > 0) {
-			refreshPassages(stops[0].id);
 	}
-	});
 
-	setInterval(
+	const disablePassagesRefresh = (): void => {
-		async () => {
+		setStore('refreshEnabled', false);
-			const stops = getDisplayedStops();
-			if (stops.length > 0) {
-				refreshPassages(stops[0].id);
 	}
-		},
+
-		syncPeriodMsec
+	const togglePassagesRefresh = (): void => {
+		setStore('refreshEnabled', !store.refreshEnabled);
+	}
+
+	const getPanels = (): Array<PositionnedPanel> => {
+		return store.panels;
+	}
+	const setPanels = (panels: Array<PositionnedPanel>): void => {
+		setStore('panels', panels);
+	}
+
+	const getDisplayedPanelId = (): number => {
+		return store.displayedPanelId;
+	}
+	const setDisplayedPanelId = (panelId: number): void => {
+		setStore('displayedPanelId', panelId);
+	}
+
+	return (
+		<PassagesDisplayContext.Provider value={{
+			isPassagesRefreshEnabled, enablePassagesRefresh,
+			disablePassagesRefresh, togglePassagesRefresh,
+			getPanels, setPanels,
+			getDisplayedPanelId, setDisplayedPanelId
+		}}>
+			{props.children}
+		</PassagesDisplayContext.Provider>
 	);
+}
+
 
 // TODO: Sort transport modes by weight
-	const Header: VoidComponent<{ passages: Passages, title: string }> = (props) => {
+const Header: VoidComponent<{ title: string }> = (props) => {
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const passagesDisplayStore: PassagesDisplayStore | undefined = useContext(PassagesDisplayContext);
+
+	if (businessDataStore === undefined || passagesDisplayStore === undefined)
+		return <div />;
+
+	const { getLine, passages } = businessDataStore;
+	const { isPassagesRefreshEnabled, togglePassagesRefresh } = passagesDisplayStore;
+
+	const [dateNow] = createDateNow(1000);
 
 	const computeTransportModes = async (lineIds: string[]): Promise<string[]> => {
 		const lines = await Promise.all(lineIds.map((lineId) => getLine(lineId)));
@@ -88,12 +115,11 @@ export const PassagesDisplay: ParentComponent = () => {
 		}
 		return Array.from(urls);
 	}
-
 	const [linesIds, setLinesIds] = createSignal<string[]>([]);
 	const [transportModeUrls] = createResource<string[], string[]>(linesIds, computeTransportModes);
 
 	createEffect(() => {
-			setLinesIds(Object.keys(props.passages));
+		setLinesIds(Object.keys(passages()));
 	});
 
 	return (
@@ -114,6 +140,17 @@ export const PassagesDisplay: ParentComponent = () => {
 					</text>
 				</svg>
 			</div>
+			<div class={styles.menu}>
+				<Menu>
+					<MenuTrigger
+						as={IconButton}
+						icon=<IconHamburgerMenu />
+					/>
+					<MenuContent>
+						<MenuItem onSelect={() => togglePassagesRefresh()}>{isPassagesRefreshEnabled() ? "Disable" : "Enable"}</MenuItem>
+					</MenuContent>
+				</Menu>
+			</div>
 			<div class={styles.clock}>
 				<svg viewBox="0 0 115 43">
 					<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" font-size="43" style="fill: #ffffff">
@@ -125,17 +162,25 @@ export const PassagesDisplay: ParentComponent = () => {
 	);
 };
 
-	const Footer: VoidComponent<{ panels: PositionnedPanel[] }> = (props) => {
+const Footer: VoidComponent<{}> = () => {
+
+	const passagesDisplayStore: PassagesDisplayStore | undefined = useContext(PassagesDisplayContext);
+
+	if (passagesDisplayStore === undefined)
+		return <div />;
+
+	const { getDisplayedPanelId, getPanels } = passagesDisplayStore;
+
 	return (
 		<div class={styles.footer}>
-				<For each={props.panels}>
+			<For each={getPanels()}>
 				{(panel) => {
 					const position = panel.position;
 					return (
 						<div>
 							<svg viewBox="0 0 29 29">
 								<circle cx="50%" cy="50%" r="13" stroke="#ffffff" stroke-width="3"
-										style={{ fill: `var(--idfm-${position == displayedPanelId() ? "white" : "black"})` }}
+									style={{ fill: `var(--idfm-${position == getDisplayedPanelId() ? "white" : "black"})` }}
 								/>
 							</svg>
 						</div>
@@ -146,9 +191,60 @@ export const PassagesDisplay: ParentComponent = () => {
 	);
 }
 
+const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: number, panelSwitchPeriodMsec: number }> = (props) => {
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const passagesDisplayStore: PassagesDisplayStore | undefined = useContext(PassagesDisplayContext);
+	// TODO: Use props instead
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (businessDataStore === undefined || passagesDisplayStore === undefined || searchStore === undefined) {
+		return <div />;
+	}
+
+	const { getLinePassages, passages, clearPassages, refreshPassages } = businessDataStore;
+	const { isPassagesRefreshEnabled, getDisplayedPanelId, setDisplayedPanelId, getPanels, setPanels } = passagesDisplayStore;
+	const { getDisplayedStops } = searchStore;
+
+	setInterval(() => {
+		let nextPanelId = getDisplayedPanelId() + 1;
+		if (nextPanelId >= getPanels().length) {
+			nextPanelId = 0;
+		}
+		setDisplayedPanelId(nextPanelId);
+	}, props.panelSwitchPeriodMsec);
+
+	setInterval(
+		async () => {
+			if (isPassagesRefreshEnabled()) {
+				const stops = getDisplayedStops();
+				if (stops.length > 0) {
+					refreshPassages(stops[0].id);
+				}
+			}
+			else {
+				console.log("Passages refresh disabled... skip it.");
+			}
+		},
+		props.syncPeriodMsec
+	);
+
+	createEffect(() => {
+		console.log("######### onStopIdUpdate #########");
+		// Track local.stopIp to force dependency.
+		console.log("getDisplayedStop=", getDisplayedStops());
+		clearPassages();
+	});
+
+	createEffect(async () => {
+		console.log(`## OnPassageUpdate ${passages()} ##`);
+		const stops = getDisplayedStops();
+		if (stops.length > 0) {
+			refreshPassages(stops[0].id);
+		}
+	});
+
 	return (
-		<div class={styles.passagesDisplay}>
-			<Header title="Prochains passages" passages={passages()} />
 		<div class={styles.panelsContainer}>
 			{() => {
 				setPanels([]);
@@ -160,21 +256,17 @@ export const PassagesDisplay: ParentComponent = () => {
 				let chunk: Record<string, Record<string, Passage[]>> = {};
 				let chunkSize = 0;
 
-					console.log("passages=", passages());
 				for (const lineId of Object.keys(passages())) {
-						console.log("lineId=", lineId);
 					const byLinePassages = getLinePassages(lineId);
-						console.log("byLinePassages=", byLinePassages);
 					const byLinePassagesKeys = Object.keys(byLinePassages);
-						console.log("byLinePassagesKeys=", byLinePassagesKeys);
 
-						if (byLinePassagesKeys.length <= maxPassagePerPanel - chunkSize) {
+					if (byLinePassagesKeys.length <= props.maxPassagesPerPanel - chunkSize) {
 						chunk[lineId] = byLinePassages;
 						chunkSize += byLinePassagesKeys.length;
 					}
 					else {
 						const panelid = index++;
-							const panel = <PassagesPanel show={panelid == displayedPanelId()} passages={chunk} />;
+						const panel = <PassagesPanel show={panelid == getDisplayedPanelId()} passages={chunk} />;
 						newPanels.push(panel);
 						positioneds.push({ position: panelid, panel: panel });
 
@@ -185,16 +277,34 @@ export const PassagesDisplay: ParentComponent = () => {
 				}
 				if (chunkSize) {
 					const panelId = index++;
-						const panel = <PassagesPanel show={panelId == displayedPanelId()} passages={chunk} />;
+					const panel = <PassagesPanel show={panelId == getDisplayedPanelId()} passages={chunk} />;
 					newPanels.push(panel);
 					positioneds.push({ position: panelId, panel: panel });
 				}
 
 				setPanels(positioneds);
+
 				return newPanels;
 			}}
 		</div>
-			<Footer panels={panels} />
+	);
+}
+
+export const PassagesDisplay: ParentComponent = () => {
+
+	const MAX_PASSAGES_PER_PANEL = 5;
+
+	// TODO: Use props.
+	const syncPeriodMsec = 20 * 1000;
+	const panelSwitchPeriodMsec = 4 * 1000;
+
+	return (
+		<div class={styles.passagesDisplay}>
+			<PassagesDisplayProvider>
+				<Header title="Prochains passages" />
+				<Body maxPassagesPerPanel={MAX_PASSAGES_PER_PANEL} syncPeriodMsec={syncPeriodMsec} panelSwitchPeriodMsec={panelSwitchPeriodMsec} />
+				<Footer />
+			</PassagesDisplayProvider>
 		</div>
 	);
 };