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

56
frontend/src/passagesPanel.tsx
View File

@@ -1,16 +1,16 @@
import { Component, createEffect, createResource, createSignal, useContext } from 'solid-js';
import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
import { createDateNow, getTime } from '@solid-primitives/date';
import { AnimationOptions } from '@motionone/types';
import { Motion } from "@motionone/solid";
import { TrafficStatus } from './types';
import { Line, Passage, Passages, TrafficStatus } from './types';
import { renderLineTransportMode, renderLinePicto } from './utils';
import { BusinessDataContext, BusinessDataStore } from "./businessData";
import { BusinessDataContext } from "./businessData";
import styles from "./passagesPanel.module.css";
import styles from './passagesPanel.module.css';
const TtwPassage: Component = (props) => {
const TtwPassage: VoidComponent<{ passage: Passage, style: string, fontSize: number }> = (props) => {
const [dateNow] = createDateNow(5000);
@@ -18,6 +18,7 @@ const TtwPassage: Component = (props) => {
const ttwSec = refTs - (getTime(dateNow()) / 1000);
const isApproaching = ttwSec <= 60;
const transition: AnimationOptions = { duration: 3, repeat: Infinity };
return (
<div class={props.style}>
<svg viewBox={`0 0 215 ${props.fontSize}`}>
@@ -25,9 +26,9 @@ const TtwPassage: Component = (props) => {
x="100%" y="55%"
dominant-baseline="middle" text-anchor="end"
font-size={props.fontSize} style={{ fill: "#000000" }}
initial={isApproaching}
initial={isApproaching ? undefined : false}
animate={{ opacity: [1, 0, 1] }}
transition={{ duration: 3, repeat: Infinity }}>
transition={transition}>
{Math.floor(ttwSec / 60)} min
</Motion.text>
</svg>
@@ -35,12 +36,12 @@ const TtwPassage: Component = (props) => {
);
}
const UnavailablePassage: Component = (props) => {
const UnavailablePassage: VoidComponent<{ style: string }> = (props) => {
const textStyle = { fill: "#000000" };
return (
<div class={props.style}>
<svg viewbox="0 0 230 110">
<svg viewBox="0 0 230 110">
<text x="100%" y="26" font-size="25" text-anchor="end" style={textStyle}>Information</text>
<text x="100%" y="63" font-size="25" text-anchor="end" style={textStyle}>non</text>
<text x="100%" y="100" font-size="25" text-anchor="end" style={textStyle}>disponible</text>
@@ -50,7 +51,7 @@ const UnavailablePassage: Component = (props) => {
}
/* TODO: Manage end of service */
const Passages: Component = (props) => {
const DestinationPassages: VoidComponent<{ passages: Passage[], line: Line, destination: string }> = (props) => {
/* TODO: Find where to get data to compute traffic status. */
const trafficStatusColor = new Map<TrafficStatus, string>([
@@ -64,7 +65,10 @@ const Passages: Component = (props) => {
const passagesLength = props.passages.length;
const firstPassage = passagesLength > 0 ? props.passages[0] : undefined;
const secondPassage = passagesLength > 1 ? props.passages[1] : undefined;
const trafficStatusStyle = { fill: trafficStatusColor.get(props.line.trafficStatus) };
// TODO: Manage traffic status
// const trafficStatusStyle = { fill: trafficStatusColor.get(props.line.trafficStatus) };
const trafficStatusStyle = { fill: trafficStatusColor.get(TrafficStatus.UNKNOWN) };
return (
<div class={styles.line}>
@@ -73,7 +77,7 @@ const Passages: Component = (props) => {
</div>
{renderLinePicto(props.line, styles)}
<div class={styles.destination}>
<svg viewbox="0 0 600 40">
<svg viewBox="0 0 600 40">
<text x="0" y="50%" dominant-baseline="middle" font-size="40" style={{ fill: "#000000" }}>
{props.destination}
</text>
@@ -85,33 +89,39 @@ const Passages: Component = (props) => {
</svg>
</div>
<Show when={firstPassage !== undefined} fallback=<UnavailablePassage style={styles.unavailableFirstPassage} />>
<TtwPassage style={styles.firstPassage} passage={firstPassage} fontSize="50" />
<TtwPassage style={styles.firstPassage} passage={firstPassage} fontSize={50} />
</Show>
<Show when={secondPassage !== undefined} fallback=<UnavailablePassage style={styles.unavailableSecondPassage} />>
<TtwPassage style={styles.secondPassage} passage={secondPassage} fontSize="45" />
<TtwPassage style={styles.secondPassage} passage={secondPassage} fontSize={45} />
</Show>
</div >
);
}
export const PassagesPanel: Component = (props) => {
export type PassagesPanelComponentProps = ParentProps & { passages: Passages, show: boolean };
export type PassagesPanelComponent = ParentComponent<PassagesPanelComponentProps>;
export const PassagesPanel: PassagesPanelComponent = (props) => {
const { getLine } = useContext(BusinessDataContext);
const businessDataContext: BusinessDataStore | undefined = useContext(BusinessDataContext);
if (businessDataContext === undefined)
return <div />;
const getLines = async (lineIds: Array<number>) => {
const lines = await Promise.all(lineIds.map((lineId) => getLine(lineId)));
const { getLine } = businessDataContext;
const getLines = async (lineIds: string[]): Promise<Line[]> => {
const lines = await Promise.all<Promise<Line>[]>(lineIds.map((lineId) => getLine(lineId)));
return lines;
}
const [lineIds, setLinesIds] = createSignal([]);
const [lines] = createResource(lineIds, getLines);
const [lineIds, setLinesIds] = createSignal<string[]>([]);
const [lines] = createResource<Line[], string[]>(lineIds, getLines);
createEffect(async () => {
setLinesIds(Object.keys(props.passages));
});
return (
<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} style={{ "top": `${100 * props.position}%` }}>
<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
<Show when={lines() !== undefined} >
{() => {
const ret = [];
@@ -119,7 +129,7 @@ export const PassagesPanel: Component = (props) => {
const byLinePassages = props.passages[line.id];
if (byLinePassages !== undefined) {
for (const destination of Object.keys(byLinePassages)) {
ret.push(<Passages passages={byLinePassages[destination]} line={line} destination={destination} />);
ret.push(<DestinationPassages passages={byLinePassages[destination]} line={line} destination={destination} />);
}
}
}