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

🚚 Rename NextPassagesDisplay/NextPassagesPanel (remove Next prefix)

Browse Source
This commit is contained in:
Adrien
2023-01-23 22:34:33 +01:00
parent b8984e455c
commit e96e7aeae0
5 changed files with 33 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@@ -6,7 +6,7 @@ import { HopeProvider } from "@hope-ui/solid";
import { BusinessDataProvider } from './businessData'; import { BusinessDataProvider } from './businessData';
import { SearchProvider } from './search'; import { SearchProvider } from './search';
import { NextPassagesDisplay } from './nextPassagesDisplay'; import { PassagesDisplay } from './passagesDisplay';
import { StopsManager } from './stopsManager'; import { StopsManager } from './stopsManager';
import styles from './App.module.css'; import styles from './App.module.css';
@@ -53,7 +53,7 @@ const App: Component = () => {
<StopsManager /> <StopsManager />
</div> </div>
<div class={styles.panel}> <div class={styles.panel}>
<NextPassagesDisplay /> <PassagesDisplay />
</div> </div>
</div> </div>
</HopeProvider> </HopeProvider>

2
frontend/src/nextPassagesDisplay.module.css → frontend/src/passagesDisplay.module.css
View File

@@ -5,7 +5,7 @@
} }
/* Idfm: 1860x1080px */ /* Idfm: 1860x1080px */
.NextPassagesDisplay { .PassagesDisplay {
aspect-ratio: 16/9; aspect-ratio: 16/9;
--reverse-aspect-ratio: 9/16; --reverse-aspect-ratio: 9/16;
/* height is set according to the aspect-ratio, don´t touch it */ /* height is set according to the aspect-ratio, don´t touch it */

35
frontend/src/nextPassagesDisplay.tsx → frontend/src/passagesDisplay.tsx
View File

@@ -5,19 +5,18 @@ import { format } from "date-fns";
import { getTransportModeSrc } from "./types"; import { getTransportModeSrc } from "./types";
import { BusinessDataContext } from "./businessData"; import { BusinessDataContext } from "./businessData";
import { NextPassagesPanel } from "./nextPassagesPanel"; import { PassagesPanel } from "./passagesPanel";
import { SearchContext } from "./search"; import { SearchContext } from "./search";
import styles from "./nextPassagesDisplay.module.css"; import styles from "./passagesDisplay.module.css";
export const NextPassagesDisplay: Component = () => { export const PassagesDisplay: Component = () => {
const maxPassagePerPanel = 5; const maxPassagePerPanel = 5;
const syncPeriodMsec = 20 * 1000; const syncPeriodMsec = 20 * 1000;
const { passages, getLinePassages, addPassages, clearPassages, serverUrl } = const { passages, getLinePassages, addPassages, clearPassages, serverUrl } = useContext(BusinessDataContext);
useContext(BusinessDataContext);
const { getDisplayedStop } = useContext(SearchContext); const { getDisplayedStop } = useContext(SearchContext);
const [panels, setPanels] = createStore([]); const [panels, setPanels] = createStore([]);
@@ -27,12 +26,11 @@ export const NextPassagesDisplay: Component = () => {
const [dateNow] = createDateNow(1000); const [dateNow] = createDateNow(1000);
const panelSwapInterval = setInterval(() => { setInterval(() => {
let nextPanelId = displayedPanelId() + 1; let nextPanelId = displayedPanelId() + 1;
if (nextPanelId >= panels.length) { if (nextPanelId >= panels.length) {
nextPanelId = 0; nextPanelId = 0;
} }
/* console.log(`Display panel #${nextPanelId}`); */
setDisplayedPanelId(nextPanelId); setDisplayedPanelId(nextPanelId);
}, 4000); }, 4000);
@@ -92,7 +90,6 @@ export const NextPassagesDisplay: Component = () => {
} }
setInterval( setInterval(
// const nextPassagesRequestsInterval = setTimeout(
async () => { async () => {
await requestPassages(); await requestPassages();
}, },
@@ -100,7 +97,7 @@ export const NextPassagesDisplay: Component = () => {
); );
// TODO: Sort transport modes by weight // TODO: Sort transport modes by weight
// TODO: Split this method to isolate the nextPassagesPanel part. // TODO: Split this method to isolate the passagesPanel part.
function _computeHeader(title: string): JSX.Element { function _computeHeader(title: string): JSX.Element {
let transportModes = []; let transportModes = [];
transportModes = new Set( transportModes = new Set(
@@ -184,7 +181,7 @@ export const NextPassagesDisplay: Component = () => {
); );
} }
const mainDivClasses = `${styles.NextPassagesDisplay} ${styles.ar16x9}`; const mainDivClasses = `${styles.PassagesDisplay} ${styles.ar16x9}`;
return ( return (
<div class={mainDivClasses}> <div class={mainDivClasses}>
{_computeHeader("Prochains passages")} {_computeHeader("Prochains passages")}
@@ -212,14 +209,13 @@ export const NextPassagesDisplay: Component = () => {
chunkSize += byLinePassagesKeys.length; chunkSize += byLinePassagesKeys.length;
} else { } else {
console.log("chunk=", chunk); console.log("chunk=", chunk);
const [store, setStore] = createStore(chunk); const [store] = createStore(chunk);
const panelid = index++; const panelid = index++;
const panel = ( const panel = (
<NextPassagesPanel <PassagesPanel
show={panelid == displayedPanelId()} show={panelid == displayedPanelId()}
nextPassages={store} passages={store}
lines={_lines} lines={_lines} />
/>
); );
newPanels.push(panel); newPanels.push(panel);
positioneds.push({ position: panelid, panel }); positioneds.push({ position: panelid, panel });
@@ -231,13 +227,12 @@ export const NextPassagesDisplay: Component = () => {
} }
if (chunkSize) { if (chunkSize) {
const panelId = index++; const panelId = index++;
const [store, setStore] = createStore(chunk); const [store] = createStore(chunk);
const panel = ( const panel = (
<NextPassagesPanel <PassagesPanel
show={panelId == displayedPanelId()} show={panelId == displayedPanelId()}
nextPassages={store} passages={store}
lines={_lines} lines={_lines} />
/>
); );
newPanels.push(panel); newPanels.push(panel);
positioneds.push({ position: panelId, panel }); positioneds.push({ position: panelId, panel });

6
frontend/src/nextPassagePanel.module.css → frontend/src/passagesPanel.module.css
View File

@@ -1,4 +1,4 @@
.nextPassagesContainer { .passagesContainer {
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -11,7 +11,7 @@
display: block; display: block;
} }
.nextPassagesContainer .line:last-child { .passagesContainer .line:last-child {
border-bottom: 0; border-bottom: 0;
/* To make up for the bottom border deletion */ /* To make up for the bottom border deletion */
padding-bottom: calc(2px); padding-bottom: calc(2px);
@@ -123,6 +123,6 @@
margin-right: calc(30/1920*100%); margin-right: calc(30/1920*100%);
} }
.unavailableSecondNextPassage svg { .unavailableSecondPassage svg {
font-family: IDFVoyageur-regular; font-family: IDFVoyageur-regular;
} }

24
frontend/src/nextPassagesPanel.tsx → frontend/src/passagesPanel.tsx
View File

@@ -5,10 +5,10 @@ import { Motion } from "@motionone/solid";
import { TrafficStatus } from './types'; import { TrafficStatus } from './types';
import { renderLineTransportMode, renderLinePicto } from './utils'; import { renderLineTransportMode, renderLinePicto } from './utils';
import styles from "./nextPassagePanel.module.css"; import styles from "./passagesPanel.module.css";
export const NextPassagesPanel: Component = (props) => { export const PassagesPanel: Component = (props) => {
/* TODO: Find where to get data to compute traffic status. */ /* TODO: Find where to get data to compute traffic status. */
const trafficStatusColor = new Map<TrafficStatus, string>([ const trafficStatusColor = new Map<TrafficStatus, string>([
@@ -72,10 +72,10 @@ export const NextPassagesPanel: Component = (props) => {
} }
/* TODO: Manage end of service */ /* TODO: Manage end of service */
function _genNextPassages(nextPassages, line, destination) { function _genPassages(passages, line, destination) {
const nextPassagesLength = nextPassages.length; const passagesLength = passages.length;
const firstPassage = nextPassagesLength > 0 ? nextPassages[0] : undefined; const firstPassage = passagesLength > 0 ? passages[0] : undefined;
const secondPassage = nextPassagesLength > 1 ? nextPassages[1] : undefined; const secondPassage = passagesLength > 1 ? passages[1] : undefined;
const trafficStatusStyle = { fill: trafficStatusColor.get(line.trafficStatus) }; const trafficStatusStyle = { fill: trafficStatusColor.get(line.trafficStatus) };
return ( return (
<div class={styles.line}> <div class={styles.line}>
@@ -102,15 +102,15 @@ export const NextPassagesPanel: Component = (props) => {
} }
return ( return (
<div classList={{ [styles.nextPassagesContainer]: true, [styles.displayed]: props.show }} style={{ "top": `${100 * props.position}%` }}> <div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} style={{ "top": `${100 * props.position}%` }}>
{() => { {() => {
const ret = []; const ret = [];
for (const lineId of Object.keys(props.nextPassages)) { for (const lineId of Object.keys(props.passages)) {
const line = props.lines.get(lineId); const line = props.lines.get(lineId);
const byLineNextPassages = props.nextPassages[lineId]; const byLinePassages = props.passages[lineId];
for (const destination of Object.keys(byLineNextPassages)) { for (const destination of Object.keys(byLinePassages)) {
const nextPassages = byLineNextPassages[destination]; const passages = byLinePassages[destination];
ret.push(_genNextPassages(nextPassages, line, destination)); ret.push(_genPassages(passages, line, destination));
} }
} }
return ret; return ret;