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

🚨 Try to make TS linter happy

Browse Source
This commit is contained in:
Adrien
2023-01-30 22:07:20 +01:00
parent 27f895ce0c
commit 2fd6783534
10 changed files with 242 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/passagesDisplay.tsx
View File

@@ -1,28 +1,43 @@
import { Component, createEffect, createResource, createSignal, useContext } from "solid-js";
import { createEffect, createResource, createSignal, For, JSX, ParentComponent, Show, useContext, VoidComponent } from "solid-js";
import { createStore } from "solid-js/store";
import { createDateNow } from "@solid-primitives/date";
import { format } from "date-fns";
import { BusinessDataContext } from "./businessData";
import { SearchContext } from "./search";
import { BusinessDataContext, BusinessDataStore } from "./businessData";
import { SearchContext, SearchStore } from "./search";
import { PassagesPanel } from "./passagesPanel";
import { Passage, Passages } from "./types";
import { getTransportModeSrc } from "./utils";
import { PassagesPanel } from "./passagesPanel";
import styles from "./passagesDisplay.module.css";
export const PassagesDisplay: Component = () => {
export const PassagesDisplay: ParentComponent = () => {
const maxPassagePerPanel = 5;
const syncPeriodMsec = 20 * 1000;
const panelSwitchPeriodMsec = 4 * 1000;
const { passages, getLine, getLinePassages, refreshPassages, clearPassages } = useContext(BusinessDataContext);
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
// TODO: Use props instead
const { getDisplayedStops } = useContext(SearchContext);
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);
const [panels, setPanels] = createStore([]);
type PositionnedPanel = {
position: number;
// TODO: Should be PassagesPanelComponent ?
panel: JSX.Element;
};
const [panels, setPanels] = createStore<PositionnedPanel[]>([]);
const [dateNow] = createDateNow(1000);
@@ -32,7 +47,7 @@ export const PassagesDisplay: Component = () => {
nextPanelId = 0;
}
setDisplayedPanelId(nextPanelId);
}, 4000);
}, panelSwitchPeriodMsec);
createEffect(() => {
console.log("######### onStopIdUpdate #########");
@@ -60,14 +75,22 @@ export const PassagesDisplay: Component = () => {
);
// TODO: Sort transport modes by weight
const Header: Component = (props) => {
const computeTransportModes = async (lineIds: Array<number>) => {
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)));
return new Set(lines.map((line) => getTransportModeSrc(line.transportMode, false)));
const urls: Set<string> = new Set();
for (const line of lines) {
const src = getTransportModeSrc(line.transportMode, false);
if (src !== undefined) {
urls.add(src);
}
}
return Array.from(urls);
}
const [linesIds, setLinesIds] = createSignal([]);
const [transportModeUrls] = createResource(linesIds, computeTransportModes);
const [linesIds, setLinesIds] = createSignal<string[]>([]);
const [transportModeUrls] = createResource<string[], string[]>(linesIds, computeTransportModes);
createEffect(() => {
setLinesIds(Object.keys(props.passages));
@@ -76,7 +99,7 @@ export const PassagesDisplay: Component = () => {
return (
<div class={styles.header}>
<Show when={transportModeUrls() !== undefined} >
<For each={Array.from(transportModeUrls())}>
<For each={transportModeUrls()}>
{(url) =>
<div class={styles.transportMode}>
<img src={url} />
@@ -85,14 +108,14 @@ export const PassagesDisplay: Component = () => {
</For>
</Show>
<div class={styles.title}>
<svg viewbox="0 0 1260 50">
<svg viewBox="0 0 1260 50">
<text x="0" y="50%" dominant-baseline="middle" font-size="50" style="fill: #ffffff">
{props.title}
</text>
</svg>
</div>
<div class={styles.clock}>
<svg viewbox="0 0 115 43">
<svg viewBox="0 0 115 43">
<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" font-size="43" style="fill: #ffffff">
{format(dateNow(), "HH:mm")}
</text>
@@ -102,12 +125,12 @@ export const PassagesDisplay: Component = () => {
);
};
const Footer: Component = (props) => {
const Footer: VoidComponent<{ panels: PositionnedPanel[] }> = (props) => {
return (
<div class={styles.footer}>
<For each={props.panels}>
{(positioned) => {
const { position } = positioned;
{(panel) => {
const position = panel.position;
return (
<div>
<svg viewBox="0 0 29 29">
@@ -131,10 +154,10 @@ export const PassagesDisplay: Component = () => {
setPanels([]);
let newPanels = [];
let positioneds = [];
let positioneds: PositionnedPanel[] = [];
let index = 0;
let chunk = {};
let chunk: Record<string, Record<string, Passage[]>> = {};
let chunkSize = 0;
console.log("passages=", passages());
@@ -154,7 +177,7 @@ export const PassagesDisplay: Component = () => {
const panelid = index++;
const panel = <PassagesPanel show={panelid == displayedPanelId()} passages={store} />;
newPanels.push(panel);
positioneds.push({ position: panelid, panel });
positioneds.push({ position: panelid, panel: panel });
chunk = {};
chunk[lineId] = byLinePassages;
@@ -166,7 +189,7 @@ export const PassagesDisplay: Component = () => {
const [store] = createStore(chunk);
const panel = <PassagesPanel show={panelId == displayedPanelId()} passages={store} />;
newPanels.push(panel);
positioneds.push({ position: panelId, panel });
positioneds.push({ position: panelId, panel: panel });
}
setPanels(positioneds);