Adrien/carrramba-encore-rate
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

✨ Add button to PassagesDisplay to disable passages fetching

Browse Source
This commit is contained in:
Adrien
2023-02-11 18:10:21 +01:00
parent 7294f35622
commit 3913209b28
3 changed files with 288 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/extra/iconHamburgerMenu.tsx Normal file
View File

@@ -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"
/>
),
});

15
frontend/src/passagesDisplay.module.css
View File

@@ -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%);

258
frontend/src/passagesDisplay.tsx
View File

@@ -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,74 +10,100 @@ 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 = {
type PositionnedPanel = {
position: number;
// TODO: Should be PassagesPanelComponent ?
panel: JSX.Element;
};
interface PassagesDisplayStore {
isPassagesRefreshEnabled: () => boolean;
enablePassagesRefresh: () => void;
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 [panels, setPanels] = createStore<PositionnedPanel[]>([]);
const [store, setStore] = createStore<Store>({ refreshEnabled: true, panels: [], displayedPanelId: 0 });
const isPassagesRefreshEnabled = (): boolean => {
return store.refreshEnabled;
}
const enablePassagesRefresh = (): void => {
setStore('refreshEnabled', true);
}
const disablePassagesRefresh = (): void => {
setStore('refreshEnabled', false);
}
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<{ 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);
setInterval(() => {
let nextPanelId = displayedPanelId() + 1;
if (nextPanelId >= panels.length) {
nextPanelId = 0;
}
setDisplayedPanelId(nextPanelId);
}, panelSwitchPeriodMsec);
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);
}
});
setInterval(
async () => {
const stops = getDisplayedStops();
if (stops.length > 0) {
refreshPassages(stops[0].id);
}
},
syncPeriodMsec
);
// TODO: Sort transport modes by weight
const Header: VoidComponent<{ passages: Passages, title: string }> = (props) => {
const computeTransportModes = async (lineIds: string[]): Promise<string[]> => {
const lines = await Promise.all(lineIds.map((lineId) => getLine(lineId)));
const urls: Set<string> = new Set();
@@ -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">
@@ -123,19 +160,27 @@ export const PassagesDisplay: ParentComponent = () => {
</div>
</div >
);
};
};
const Footer: VoidComponent<{}> = () => {
const passagesDisplayStore: PassagesDisplayStore | undefined = useContext(PassagesDisplayContext);
if (passagesDisplayStore === undefined)
return <div />;
const { getDisplayedPanelId, getPanels } = passagesDisplayStore;
const Footer: VoidComponent<{ panels: PositionnedPanel[] }> = (props) => {
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>
@@ -144,11 +189,62 @@ export const PassagesDisplay: ParentComponent = () => {
</For>
</div>
);
}
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>
);
};