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

♻️ Replace methods called to render Component with small Components

Browse Source
This commit is contained in:
Adrien
2023-01-28 16:22:32 +01:00
parent e141aa15e5
commit 29ba26e80b
3 changed files with 141 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/passagesDisplay.tsx
View File

@@ -60,78 +60,59 @@ export const PassagesDisplay: Component = () => {
);
// TODO: Sort transport modes by weight
// TODO: Split this method to isolate the passagesPanel part.
function _computeHeader(title: string): JSX.Element {
let transportModes = [];
transportModes = new Set(
Object.keys(passages()).map((lineId) => {
const line = _lines.get(lineId);
if (line !== undefined) {
return getTransportModeSrc(line.transportMode, false);
}
return null;
})
);
const Header: Component = (props) => {
const computeTransportModes = async (lineIds: Array<number>) => {
const lines = await Promise.all(lineIds.map((lineId) => getLine(lineId)));
return new Set(lines.map((line) => getTransportModeSrc(line.transportMode, false)));
}
const [linesIds, setLinesIds] = createSignal([]);
const [transportModeUrls] = createResource(linesIds, computeTransportModes);
createEffect(() => {
setLinesIds(Object.keys(props.passages));
});
return (
<div class={styles.header}>
<For each={Array.from(transportModes)}>
{(transportMode) => {
return (
<Show when={transportModeUrls() !== undefined} >
<For each={Array.from(transportModeUrls())}>
{(url) =>
<div class={styles.transportMode}>
<img src={transportMode} />
<img src={url} />
</div>
);
}}
</For>
}
</For>
</Show>
<div class={styles.title}>
<svg viewbox="0 0 1260 50">
<text
x="0"
y="50%"
dominant-baseline="middle"
font-size="50"
style="fill: #ffffff"
>
{title}
<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">
<text
x="50%"
y="55%"
dominant-baseline="middle"
text-anchor="middle"
font-size="43"
style="fill: #ffffff"
>
<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" font-size="43" style="fill: #ffffff">
{format(dateNow(), "HH:mm")}
</text>
</svg>
</div>
</div>
</div >
);
}
};
function _computeFooter(): JSX.Element {
const Footer: Component = (props) => {
return (
<div class={styles.footer}>
<For each={panels}>
<For each={props.panels}>
{(positioned) => {
const { position } = positioned;
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"})`,
}}
<circle cx="50%" cy="50%" r="13" stroke="#ffffff" stroke-width="3"
style={{ fill: `var(--idfm-${position == displayedPanelId() ? "white" : "black"})` }}
/>
</svg>
</div>
@@ -144,7 +125,7 @@ export const PassagesDisplay: Component = () => {
return (
<div class={styles.passagesDisplay}>
{_computeHeader("Prochains passages")}
<Header title="Prochains passages" passages={passages()} />
<div class={styles.panelsContainer}>
{() => {
setPanels([]);
@@ -167,16 +148,11 @@ export const PassagesDisplay: Component = () => {
if (byLinePassagesKeys.length <= maxPassagePerPanel - chunkSize) {
chunk[lineId] = byLinePassages;
chunkSize += byLinePassagesKeys.length;
} else {
console.log("chunk=", chunk);
}
else {
const [store] = createStore(chunk);
const panelid = index++;
const panel = (
<PassagesPanel
show={panelid == displayedPanelId()}
passages={store}
lines={_lines} />
);
const panel = <PassagesPanel show={panelid == displayedPanelId()} passages={store} />;
newPanels.push(panel);
positioneds.push({ position: panelid, panel });
@@ -188,12 +164,7 @@ export const PassagesDisplay: Component = () => {
if (chunkSize) {
const panelId = index++;
const [store] = createStore(chunk);
const panel = (
<PassagesPanel
show={panelId == displayedPanelId()}
passages={store}
lines={_lines} />
);
const panel = <PassagesPanel show={panelId == displayedPanelId()} passages={store} />;
newPanels.push(panel);
positioneds.push({ position: panelId, panel });
}
@@ -202,7 +173,7 @@ export const PassagesDisplay: Component = () => {
return newPanels;
}}
</div>
{_computeFooter()}
<Footer panels={panels} />
</div>
);
};