50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { createResource, For, ParentComponent, useContext } from 'solid-js';
|
|
|
|
import { Stop } from '../types';
|
|
import { BusinessDataContext, BusinessDataStore } from "../businessData";
|
|
import { renderLinePicto, ScrollingText } from '../utils';
|
|
|
|
export const StopPopup: ParentComponent<{ stop: Stop, show: boolean }> = (props) => {
|
|
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
|
if (businessDataStore === undefined)
|
|
return <div />;
|
|
|
|
const { getLine, getStopDestinations } = businessDataStore;
|
|
|
|
let popupDiv: HTMLDivElement | undefined = undefined;
|
|
|
|
const getDestinations = async (stop: Stop): Promise<{ lineId: string, destinations: string[] }[]> => {
|
|
let ret = [];
|
|
|
|
if (stop !== undefined) {
|
|
const result = await getStopDestinations(stop.id);
|
|
for (const [lineId, destinations] of Object.entries(result)) {
|
|
const line = await getLine(lineId);
|
|
const linePicto = renderLinePicto(line);
|
|
ret.push({ lineId: linePicto, destinations: destinations });
|
|
}
|
|
}
|
|
|
|
return ret;
|
|
}
|
|
const [destinations] = createResource(() => props.stop, getDestinations);
|
|
|
|
return (
|
|
<div ref={popupDiv} classList={{ "popup": true, "displayed": props.show }}>
|
|
<div class="header">{props.stop?.name}</div>
|
|
<div class="body">
|
|
<For each={destinations()}>
|
|
{(dst) => {
|
|
return <div class='line'>
|
|
{dst.lineId}
|
|
<div class="name">
|
|
<ScrollingText height={10} width={130} content={dst.destinations.join('/')} />
|
|
</div>
|
|
</div>;
|
|
}}
|
|
</For>
|
|
</div>
|
|
</div >
|
|
);
|
|
}
|