♻️ Refactor StopsSearchMenu + load Map lazily + placeholder
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
@use "_common";
|
||||
@use "_utils";
|
||||
|
||||
|
||||
.passagesDisplay {
|
||||
@extend %widget;
|
||||
|
||||
|
||||
@@ -1,246 +0,0 @@
|
||||
@use "_common";
|
||||
@use "_utils";
|
||||
|
||||
.stopSearchMenu {
|
||||
@extend %widget;
|
||||
|
||||
.stopNameInput {
|
||||
width: 50%;
|
||||
height: 60%;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
||||
border: solid var(--neutral-color) calc(0.01*1vh);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.leftAddon {
|
||||
width: 17%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: var(--idfm-white);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 83%;
|
||||
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
|
||||
color: var(--idfm-white);
|
||||
font-family: IDFVoyageur-regular;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
@extend %title;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.body {
|
||||
@extend %body;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
.stopsPanels {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
|
||||
.stopPanel {
|
||||
scroll-snap-align: center;
|
||||
|
||||
.stop {
|
||||
width: calc(1880/1920*100%);
|
||||
height: calc(100% / 5);
|
||||
// margin: 0 calc(20/1920*100%);
|
||||
margin: 0 calc(10/1920*100%);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
/* TODO: compute the border weight according to the parent height */
|
||||
/* TODO: Disable border-bottom for the last .line */
|
||||
border-bottom: solid calc(2px);
|
||||
|
||||
cursor: default;
|
||||
|
||||
.name {
|
||||
margin-left: calc(40/1920*100%);
|
||||
width: 60%;
|
||||
aspect-ratio: 2.5;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-family: IDFVoyageur-bold;
|
||||
}
|
||||
|
||||
.lineRepr {
|
||||
width: 40%;
|
||||
aspect-ratio: 2.5;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
.transportMode {
|
||||
@extend %transportMode;
|
||||
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.linesRepresentationMatrix {
|
||||
@extend %busLinePicto; // Use the larger picto aspect-ratio
|
||||
width: 75%;
|
||||
aspect-ratio: 3;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
%picto {
|
||||
margin-left: 1%;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
%singleLinePicto {
|
||||
@extend %picto;
|
||||
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.transportMode {
|
||||
@extend %transportMode;
|
||||
@extend %picto;
|
||||
}
|
||||
|
||||
.tramLinePicto {
|
||||
@extendnd %tramLinePicto;
|
||||
@extend %singleLinePicto;
|
||||
}
|
||||
|
||||
.trainLinePicto {
|
||||
@extend %trainLinePicto;
|
||||
@extend %singleLinePicto;
|
||||
}
|
||||
|
||||
.metroLinePicto {
|
||||
@extend %metroLinePicto;
|
||||
@extend %singleLinePicto;
|
||||
}
|
||||
|
||||
.busLinePicto {
|
||||
@extend %busLinePicto;
|
||||
@extend %picto;
|
||||
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.displayed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
|
||||
.ol-viewport {
|
||||
@extend %body;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.popup {
|
||||
@extend %body;
|
||||
margin: 0;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
|
||||
border: solid var(--idfm-white) calc(0.2*1vh);
|
||||
|
||||
background-color: var(--idfm-black);
|
||||
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
|
||||
.header {
|
||||
@extend %header;
|
||||
|
||||
color: var(--idfm-white);
|
||||
}
|
||||
|
||||
.body {
|
||||
@extend %body;
|
||||
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
|
||||
.line {
|
||||
scroll-snap-align: center;
|
||||
|
||||
height: calc(100% / 3);
|
||||
margin: 0 calc(10/1920*100%);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
font-family: IDFVoyageur-bold;
|
||||
|
||||
.busLinePicto {
|
||||
@extend %busLinePicto;
|
||||
|
||||
height: 80%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
@extend %footer;
|
||||
}
|
||||
}
|
||||
|
||||
.displayed {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,764 +0,0 @@
|
||||
import { createContext, createEffect, createResource, createSignal, For, JSX, onMount, ParentComponent, Show, useContext, VoidComponent } from 'solid-js';
|
||||
import { createStore } from "solid-js/store";
|
||||
import { createScrollPosition } from "@solid-primitives/scroll";
|
||||
|
||||
import OlFeature from 'ol/Feature';
|
||||
import OlMap from 'ol/Map';
|
||||
import OlView from 'ol/View';
|
||||
import { isEmpty as isEmptyExtend } from 'ol/extent';
|
||||
import { FeatureLike as OlFeatureLike } from 'ol/Feature';
|
||||
import OlOSM from 'ol/source/OSM';
|
||||
import OlOverlay from 'ol/Overlay';
|
||||
import OlPoint from 'ol/geom/Point';
|
||||
import OlPolygon from 'ol/geom/Polygon';
|
||||
import OlVectorSource from 'ol/source/Vector';
|
||||
import { Tile as OlTileLayer, Vector as OlVectorLayer } from 'ol/layer';
|
||||
import { Circle, Fill, Stroke, Style } from 'ol/style';
|
||||
import { easeOut } from 'ol/easing';
|
||||
import { getVectorContext } from 'ol/render';
|
||||
import { unByKey } from 'ol/Observable';
|
||||
|
||||
import { Stop, StopShape } from './types';
|
||||
import { PositionedPanel, renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from './utils';
|
||||
import { AppContextContext, AppContextStore } from "./appContext";
|
||||
import { BusinessDataContext, BusinessDataStore } from "./businessData";
|
||||
|
||||
import "./stopsSearchMenu.scss";
|
||||
|
||||
|
||||
type ByStopIdMapFeatures = Record<number, OlFeature>;
|
||||
|
||||
interface SearchStore {
|
||||
|
||||
getSearchText: () => string;
|
||||
setSearchText: (text: string, businessDataStore: BusinessDataStore) => Promise<void>;
|
||||
|
||||
getFoundStops: () => Stop[];
|
||||
setFoundStops: (stops: Stop[]) => void;
|
||||
|
||||
getDisplayedPanelId: () => number;
|
||||
setDisplayedPanelId: (panelId: number) => void;
|
||||
|
||||
getPanels: () => PositionedPanel[];
|
||||
setPanels: (panels: PositionedPanel[]) => void;
|
||||
|
||||
getHighlightedStop: () => Stop | undefined;
|
||||
setHighlightedStop: (stop: Stop) => void;
|
||||
resetHighlightedStop: () => void;
|
||||
|
||||
getMapFeature: (stopId: number) => OlFeature | undefined;
|
||||
getAllMapFeatures: () => ByStopIdMapFeatures;
|
||||
setMapFeature: (stopId: number, feature: OlFeature) => void;
|
||||
};
|
||||
|
||||
const SearchContext = createContext<SearchStore>();
|
||||
|
||||
|
||||
function SearchProvider(props: { children: JSX.Element }) {
|
||||
|
||||
const searchTextDelayMs = 1500;
|
||||
|
||||
type Store = {
|
||||
searchText: string;
|
||||
searchPromise: Promise<void> | undefined;
|
||||
foundStops: Stop[];
|
||||
displayedPanelId: number;
|
||||
panels: PositionedPanel[];
|
||||
highlightedStop: Stop | undefined;
|
||||
mapFeatures: ByStopIdMapFeatures;
|
||||
};
|
||||
|
||||
const [store, setStore] = createStore<Store>({
|
||||
searchText: "",
|
||||
searchPromise: undefined,
|
||||
foundStops: [],
|
||||
displayedPanelId: 0,
|
||||
panels: [],
|
||||
highlightedStop: undefined,
|
||||
mapFeatures: {},
|
||||
});
|
||||
|
||||
const getSearchText = (): string => {
|
||||
return store.searchText;
|
||||
}
|
||||
|
||||
const debounce = async (fn: (...args: any[]) => Promise<void>, delayMs: number) => {
|
||||
let timerId: number;
|
||||
return new Promise((...args) => {
|
||||
clearTimeout(timerId);
|
||||
timerId = setTimeout(fn, delayMs, ...args);
|
||||
});
|
||||
}
|
||||
|
||||
const setSearchText = async (text: string, businessDataStore: BusinessDataStore): Promise<void> => {
|
||||
setStore('searchText', text);
|
||||
|
||||
if (store.searchPromise === undefined) {
|
||||
const { searchStopByName } = businessDataStore;
|
||||
const promise: Promise<void> = debounce(async (onSuccess: () => void) => {
|
||||
console.log(`Fetching data for "${store.searchText}" stop name`);
|
||||
const stopsById = await searchStopByName(store.searchText);
|
||||
console.log("stopsById=", stopsById);
|
||||
setFoundStops(Object.values(stopsById));
|
||||
onSuccess();
|
||||
}, searchTextDelayMs).then(() => {
|
||||
setStore('searchPromise', undefined);
|
||||
});
|
||||
setStore('searchPromise', promise);
|
||||
}
|
||||
}
|
||||
|
||||
const getFoundStops = (): Stop[] => {
|
||||
return store.foundStops;
|
||||
}
|
||||
|
||||
const setFoundStops = (stops: Stop[]): void => {
|
||||
setStore('foundStops', stops);
|
||||
}
|
||||
|
||||
const getDisplayedPanelId = (): number => {
|
||||
return store.displayedPanelId;
|
||||
}
|
||||
|
||||
const setDisplayedPanelId = (panelId: number): void => {
|
||||
setStore('displayedPanelId', panelId);
|
||||
}
|
||||
|
||||
const getPanels = (): PositionedPanel[] => {
|
||||
return store.panels;
|
||||
}
|
||||
|
||||
const setPanels = (panels: PositionedPanel[]): void => {
|
||||
setStore('panels', panels);
|
||||
}
|
||||
|
||||
const getHighlightedStop = (): Stop | undefined => {
|
||||
return store.highlightedStop;
|
||||
}
|
||||
|
||||
const setHighlightedStop = (stop: Stop): void => {
|
||||
setStore('highlightedStop', stop);
|
||||
}
|
||||
|
||||
const resetHighlightedStop = (): void => {
|
||||
setStore('highlightedStop', undefined);
|
||||
}
|
||||
|
||||
|
||||
const getAllMapFeatures = (): ByStopIdMapFeatures => {
|
||||
return store.mapFeatures;
|
||||
}
|
||||
|
||||
const getMapFeature = (stopId: number): OlFeature | undefined => {
|
||||
return store.mapFeatures[stopId];
|
||||
}
|
||||
|
||||
const setMapFeature = (stopId: number, feature: OlFeature): void => {
|
||||
setStore('mapFeatures', stopId, feature);
|
||||
};
|
||||
|
||||
return (
|
||||
<SearchContext.Provider value={{
|
||||
getSearchText, setSearchText,
|
||||
getFoundStops, setFoundStops,
|
||||
getDisplayedPanelId, setDisplayedPanelId,
|
||||
getPanels, setPanels,
|
||||
getHighlightedStop, setHighlightedStop, resetHighlightedStop,
|
||||
getMapFeature, getAllMapFeatures, setMapFeature,
|
||||
}}>
|
||||
{props.children}
|
||||
</SearchContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
const StopNameInput: VoidComponent<{ onInput: JSX.EventHandler<HTMLInputElement, InputEvent>, leftAddon: string, placeholder: string }> = (props) => {
|
||||
return (
|
||||
<div class="stopNameInput">
|
||||
<div class="leftAddon">{props.leftAddon}</div>
|
||||
<input type="text" oninput={props.onInput} placeholder={props.placeholder} />
|
||||
</div>);
|
||||
};
|
||||
|
||||
const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) => {
|
||||
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
|
||||
if (businessDataStore === undefined || searchStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { setSearchText } = searchStore;
|
||||
|
||||
const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
|
||||
const stopName = event.currentTarget.value;
|
||||
if (stopName.length >= props.minCharsNb) {
|
||||
await setSearchText(stopName, businessDataStore);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<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>
|
||||
<StopNameInput onInput={onStopNameInput} leftAddon="🚉 🚏" placeholder="Stop name..." />
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
|
||||
const fontSize: number = 40;
|
||||
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
if (businessDataStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { getLine } = businessDataStore;
|
||||
|
||||
const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
|
||||
const reprs = [];
|
||||
for (const lineId of lineIds) {
|
||||
const line = await getLine(lineId);
|
||||
if (line !== undefined) {
|
||||
reprs.push(<div class="transportMode">{renderLineTransportMode(line)}</div>);
|
||||
reprs.push(renderLinePicto(line));
|
||||
}
|
||||
}
|
||||
return reprs;
|
||||
}
|
||||
|
||||
const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
|
||||
|
||||
return (
|
||||
<div class="stop">
|
||||
<svg class="name" viewBox={`0 0 215 ${fontSize}`}>
|
||||
<text
|
||||
x="100%" y="55%"
|
||||
dominant-baseline="middle" text-anchor="end"
|
||||
font-size={fontSize}>
|
||||
{props.stop.name}
|
||||
</text>
|
||||
</svg>
|
||||
<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
type ByTransportModeReprs = {
|
||||
mode: JSX.Element | undefined;
|
||||
lines: Record<string, JSX.Element | JSX.Element[] | undefined>;
|
||||
}
|
||||
|
||||
const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
|
||||
const fontSize: number = 10;
|
||||
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
|
||||
if (businessDataStore === undefined || appContextStore === undefined || searchStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { getLine } = businessDataStore;
|
||||
const { setDisplayedStops } = appContextStore;
|
||||
const { setHighlightedStop, resetHighlightedStop } = searchStore;
|
||||
|
||||
|
||||
const fetchLinesRepr = async (stop: Stop): Promise<JSX.Element> => {
|
||||
const lineIds = new Set(stop.lines);
|
||||
const stops = stop.stops;
|
||||
for (const stop of stops) {
|
||||
stop.lines.forEach(lineIds.add, lineIds);
|
||||
}
|
||||
|
||||
const byModeReprs: Record<string, ByTransportModeReprs> = {};
|
||||
for (const lineId of lineIds) {
|
||||
const line = await getLine(lineId);
|
||||
if (line !== undefined) {
|
||||
if (!(line.transportMode in byModeReprs)) {
|
||||
byModeReprs[line.transportMode] = {
|
||||
mode: <div class="transportMode">{renderLineTransportMode(line)}</div>,
|
||||
lines: {}
|
||||
};
|
||||
}
|
||||
byModeReprs[line.transportMode].lines[line.shortName] = renderLinePicto(line);
|
||||
}
|
||||
}
|
||||
|
||||
const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] <
|
||||
TransportModeWeights[y] ? 1 : -1);
|
||||
|
||||
return (
|
||||
<div class="lineRepr">
|
||||
<For each={sortedTransportModes}>{(transportMode) => {
|
||||
const reprs = byModeReprs[transportMode];
|
||||
const lineNames = Object.keys(reprs.lines).sort((x, y) => x.localeCompare(y));
|
||||
return <>
|
||||
{reprs.mode}
|
||||
<div class="linesRepresentationMatrix">
|
||||
<For each={lineNames}>{(lineName) => reprs.lines[lineName]}</For>
|
||||
</div>
|
||||
</>
|
||||
}}
|
||||
</For>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
const [lineReprs] = createResource(props.stop, fetchLinesRepr);
|
||||
|
||||
return (
|
||||
<div
|
||||
class="stop"
|
||||
onClick={() => setDisplayedStops([props.stop])}
|
||||
onMouseEnter={() => setHighlightedStop(props.stop)}
|
||||
onMouseLeave={resetHighlightedStop}
|
||||
>
|
||||
<div class="name" >
|
||||
<ScrollingText height={fontSize} width={100} content={props.stop.name} />
|
||||
</div>
|
||||
{lineReprs()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const StopsPanel: ParentComponent<{ stops: Stop[], show: boolean }> = (props) => {
|
||||
|
||||
return (
|
||||
<div classList={{ "stopPanel": true, "displayed": props.show }}>
|
||||
<For each={props.stops.sort((x, y) => x.name.localeCompare(y.name))}>
|
||||
{(stop) => {
|
||||
return <Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
|
||||
<StopAreaRepr stop={stop} />
|
||||
</Show>;
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
|
||||
if (searchStore === undefined) {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
const { getDisplayedPanelId, getFoundStops, getPanels, setDisplayedPanelId, setPanels } = searchStore;
|
||||
let stopsPanelsRef: HTMLDivElement | undefined = undefined
|
||||
const stopsPanelsScroll = createScrollPosition(() => stopsPanelsRef);
|
||||
const yStopsPanelsScroll = () => stopsPanelsScroll.y;
|
||||
|
||||
createEffect(() => {
|
||||
yStopsPanelsScroll();
|
||||
|
||||
for (const panel of getPanels()) {
|
||||
const panelDiv = panel.panel();
|
||||
const panelDivClientRect = panelDiv.getBoundingClientRect();
|
||||
if (panelDivClientRect.y > 0) {
|
||||
setDisplayedPanelId(panel.position);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={stopsPanelsRef} class="stopsPanels">
|
||||
{() => {
|
||||
setPanels([]);
|
||||
|
||||
let newPanels = [];
|
||||
let positioneds: PositionedPanel[] = [];
|
||||
|
||||
let stops: Stop[] = [];
|
||||
|
||||
for (const stop of getFoundStops()) {
|
||||
if (stops.length < props.maxStopsPerPanel) {
|
||||
stops.push(stop);
|
||||
}
|
||||
else {
|
||||
const panelId = newPanels.length;
|
||||
const panel = <StopsPanel stops={stops} show={panelId == getDisplayedPanelId()} />;
|
||||
newPanels.push(panel);
|
||||
positioneds.push({ position: panelId, panel: panel });
|
||||
stops = [stop];
|
||||
}
|
||||
}
|
||||
if (stops.length) {
|
||||
const panelId = newPanels.length;
|
||||
const panel = <StopsPanel stops={stops} show={panelId == getDisplayedPanelId()} />;
|
||||
newPanels.push(panel);
|
||||
positioneds.push({ position: panelId, panel: panel });
|
||||
}
|
||||
|
||||
setPanels(positioneds);
|
||||
|
||||
return newPanels;
|
||||
}}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
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 >
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// TODO: Use boolean to set MapStop selected
|
||||
const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (props) => {
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
if (businessDataStore === undefined || searchStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { getStopShape } = businessDataStore;
|
||||
const { setMapFeature } = searchStore;
|
||||
|
||||
const stopStyle = new Style({
|
||||
image: new Circle({
|
||||
fill: undefined,
|
||||
stroke: new Stroke({ color: '#3399CC', width: 1.5 }),
|
||||
radius: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
const selectedStopStyle = new Style({
|
||||
image: new Circle({
|
||||
fill: undefined,
|
||||
stroke: new Stroke({ color: 'purple', width: 2 }),
|
||||
radius: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
const stopAreaStyle = new Style({
|
||||
stroke: new Stroke({ color: 'red' }),
|
||||
fill: new Fill({ color: 'rgba(255,255,255,0.2)' }),
|
||||
});
|
||||
|
||||
const getShape = async (stopId: number): Promise<StopShape | undefined> => {
|
||||
return await getStopShape(stopId);
|
||||
};
|
||||
const [shape] = createResource<StopShape | undefined, number>(props.stop.id, getShape);
|
||||
|
||||
createEffect(() => {
|
||||
const shape_ = shape();
|
||||
|
||||
if (shape_ === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
let feature = undefined;
|
||||
|
||||
if (props.stop.epsg3857_x !== undefined && props.stop.epsg3857_y !== undefined) {
|
||||
const selectStopStyle = () => {
|
||||
return (props.selected?.id === props.stop.id ? selectedStopStyle : stopStyle);
|
||||
}
|
||||
feature = new OlFeature({
|
||||
geometry: new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]),
|
||||
});
|
||||
feature.setStyle(selectStopStyle);
|
||||
}
|
||||
|
||||
else {
|
||||
let geometry = undefined;
|
||||
const areaShape = shape();
|
||||
if (areaShape !== undefined) {
|
||||
geometry = new OlPolygon([areaShape.epsg3857_points.slice(0, -1)]);
|
||||
}
|
||||
else {
|
||||
geometry = new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]);
|
||||
}
|
||||
feature = new OlFeature({ geometry: geometry });
|
||||
feature.setStyle(stopAreaStyle);
|
||||
}
|
||||
feature.setId(props.stop.id);
|
||||
|
||||
setMapFeature(props.stop.id, feature);
|
||||
});
|
||||
|
||||
return <For each={props.stop.stops}>{stop => <MapStop stop={stop} selected={props.selected} />}</For>;
|
||||
}
|
||||
|
||||
|
||||
const Map: ParentComponent<{}> = () => {
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
if (businessDataStore === undefined || searchStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { getStop } = businessDataStore;
|
||||
const { getAllMapFeatures, getFoundStops, getHighlightedStop } = searchStore;
|
||||
|
||||
const [selectedMapStop, setSelectedMapStop] = createSignal<Stop | undefined>(undefined);
|
||||
const [isPopupDisplayed, setPopupDisplayed] = createSignal<boolean>(false);
|
||||
|
||||
const mapCenter = [260769.80336542107, 6250587.867330259]; // EPSG:3857
|
||||
const fitDurationMs = 1500;
|
||||
const flashDurationMs = 2000;
|
||||
// TODO: Set padding according to the marker design.
|
||||
const fitPointsPadding = [50, 50, 50, 50];
|
||||
|
||||
let mapDiv: HTMLDivElement | undefined = undefined;
|
||||
let popup: StopPopup | undefined = undefined;
|
||||
|
||||
const stopVectorSource = new OlVectorSource({ features: [] });
|
||||
const stopVectorLayer = new OlVectorLayer({ source: stopVectorSource });
|
||||
|
||||
let overlay: OlOverlay | undefined = undefined;
|
||||
let map: OlMap | undefined = undefined;
|
||||
|
||||
const displayedFeatures: Record<number, OlFeature> = {};
|
||||
|
||||
const buildMap = (div: HTMLDivElement): void => {
|
||||
overlay = new OlOverlay({
|
||||
element: popup,
|
||||
autoPan: {
|
||||
animation: {
|
||||
duration: 250,
|
||||
},
|
||||
},
|
||||
});
|
||||
map = new OlMap({
|
||||
target: div,
|
||||
controls: [], // remove controls
|
||||
view: new OlView({
|
||||
center: mapCenter,
|
||||
zoom: 10,
|
||||
}),
|
||||
layers: [
|
||||
new OlTileLayer({
|
||||
source: new OlOSM(),
|
||||
}),
|
||||
stopVectorLayer,
|
||||
],
|
||||
overlays: [overlay],
|
||||
});
|
||||
map.on('singleclick', onClickedMap);
|
||||
}
|
||||
|
||||
const onClickedMap = async (event): Promise<void> => {
|
||||
const features = await stopVectorLayer.getFeatures(event.pixel);
|
||||
// Handle only the first feature
|
||||
if (features.length > 0) {
|
||||
await onClickedFeature(features[0]);
|
||||
}
|
||||
else {
|
||||
setPopupDisplayed(false);
|
||||
setSelectedMapStop(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
const onClickedFeature = async (feature: OlFeatureLike): Promise<void> => {
|
||||
const stopId: number = feature.getId();
|
||||
const stop = getStop(stopId);
|
||||
// TODO: Handle StopArea (use center given by the backend)
|
||||
if (stop?.epsg3857_x !== undefined && stop?.epsg3857_y !== undefined) {
|
||||
setSelectedMapStop(stop);
|
||||
map?.getView().animate(
|
||||
{
|
||||
center: [stop.epsg3857_x, stop.epsg3857_y],
|
||||
duration: 1000
|
||||
},
|
||||
// Display the popup once the animation finished
|
||||
() => setPopupDisplayed(true)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => buildMap(mapDiv));
|
||||
|
||||
// Filling the map with stops shape
|
||||
createEffect(() => {
|
||||
const stops = getFoundStops();
|
||||
const foundStopIds = new Set();
|
||||
for (const foundStop of stops) {
|
||||
foundStopIds.add(foundStop.id);
|
||||
foundStop.stops.forEach(s => foundStopIds.add(s.id));
|
||||
}
|
||||
|
||||
for (const [stopIdStr, feature] of Object.entries(displayedFeatures)) {
|
||||
const stopId = parseInt(stopIdStr);
|
||||
if (!foundStopIds.has(stopId)) {
|
||||
console.log(`Remove feature for ${stopId}`);
|
||||
stopVectorSource.removeFeature(feature);
|
||||
delete displayedFeatures[stopId];
|
||||
}
|
||||
}
|
||||
|
||||
const features = getAllMapFeatures();
|
||||
for (const [stopIdStr, feature] of Object.entries(features)) {
|
||||
const stopId = parseInt(stopIdStr);
|
||||
if (foundStopIds.has(stopId) && !(stopId in displayedFeatures)) {
|
||||
console.log(`Add feature for ${stopId}`);
|
||||
stopVectorSource.addFeature(feature);
|
||||
displayedFeatures[stopId] = feature;
|
||||
}
|
||||
}
|
||||
|
||||
const extend = stopVectorSource.getExtent();
|
||||
if (map !== undefined && !isEmptyExtend(extend)) {
|
||||
map.getView().fit(extend, { duration: fitDurationMs, padding: fitPointsPadding });
|
||||
}
|
||||
});
|
||||
|
||||
// Flashing effect
|
||||
createEffect(() => {
|
||||
const highlightedStopId = getHighlightedStop()?.id;
|
||||
if (highlightedStopId !== undefined) {
|
||||
const stop = getStop(highlightedStopId);
|
||||
if (stop !== undefined) {
|
||||
const stops = stop.stops ? stop.stops : [stop];
|
||||
stops.forEach((s) => {
|
||||
const feature = displayedFeatures[s.id];
|
||||
if (feature !== undefined) {
|
||||
flash(feature);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const flash = (feature: OlFeature) => {
|
||||
const start = Date.now();
|
||||
const flashGeom = feature.getGeometry()?.clone();
|
||||
const listenerKey = stopVectorLayer.on('postrender', animate);
|
||||
|
||||
// Force postrender raising.
|
||||
feature.changed();
|
||||
|
||||
function animate(event) {
|
||||
const frameState = event.frameState;
|
||||
const elapsed = frameState.time - start;
|
||||
const vectorContext = getVectorContext(event);
|
||||
|
||||
if (elapsed >= flashDurationMs) {
|
||||
unByKey(listenerKey);
|
||||
return;
|
||||
}
|
||||
|
||||
if (flashGeom !== undefined && map !== undefined) {
|
||||
const elapsedRatio = elapsed / flashDurationMs;
|
||||
// radius will be 5 at start and 30 at end.
|
||||
const radius = easeOut(elapsedRatio) * 25 + 5;
|
||||
const opacity = easeOut(1 - elapsedRatio);
|
||||
|
||||
const style = new Style({
|
||||
image: new Circle({
|
||||
radius: radius,
|
||||
stroke: new Stroke({
|
||||
color: `rgba(255, 0, 0, ${opacity})`,
|
||||
width: 0.25 + opacity,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
vectorContext.setStyle(style);
|
||||
vectorContext.drawGeometry(flashGeom);
|
||||
|
||||
// tell OpenLayers to continue postrender animation
|
||||
map.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return <>
|
||||
<div ref={mapDiv} class="map">
|
||||
<StopPopup ref={popup} stop={selectedMapStop()} show={isPopupDisplayed()} />
|
||||
</div>
|
||||
<For each={getFoundStops()}>{(stop) => <MapStop stop={stop} selected={selectedMapStop()} />}</For>
|
||||
</>;
|
||||
}
|
||||
|
||||
const Footer: VoidComponent<{}> = () => {
|
||||
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
|
||||
if (searchStore === undefined) {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
const { getDisplayedPanelId, getPanels } = searchStore;
|
||||
|
||||
return (
|
||||
<div class="footer">
|
||||
<For each={getPanels()}>
|
||||
{(panel) => {
|
||||
const position = panel.position;
|
||||
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 == getDisplayedPanelId() ? "white" : "black"})` }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const StopsSearchMenu: VoidComponent = () => {
|
||||
|
||||
const maxStopsPerPanel = 5;
|
||||
|
||||
return (
|
||||
<div class="stopSearchMenu">
|
||||
<SearchProvider>
|
||||
<Header title="Recherche de l'arrêt..." minCharsNb={4} />
|
||||
<div class="body">
|
||||
<StopsPanels maxStopsPerPanel={maxStopsPerPanel} />
|
||||
<Map />
|
||||
</div>
|
||||
<Footer />
|
||||
</SearchProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
87
frontend/src/stopsSearchMenu/map.scss
Normal file
87
frontend/src/stopsSearchMenu/map.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
@use "../_common";
|
||||
@use "../_utils";
|
||||
|
||||
|
||||
.map {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
|
||||
.ol-viewport {
|
||||
@extend %body;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.popup {
|
||||
@extend %body;
|
||||
margin: 0;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
|
||||
border: solid var(--idfm-white) calc(0.2*1vh);
|
||||
|
||||
background-color: var(--idfm-black);
|
||||
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
|
||||
.header {
|
||||
@extend %header;
|
||||
|
||||
color: var(--idfm-white);
|
||||
}
|
||||
|
||||
.body {
|
||||
@extend %body;
|
||||
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
|
||||
.line {
|
||||
scroll-snap-align: center;
|
||||
|
||||
height: calc(100% / 3);
|
||||
margin: 0 calc(10/1920*100%);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
font-family: IDFVoyageur-bold;
|
||||
|
||||
.busLinePicto {
|
||||
@extend %busLinePicto;
|
||||
|
||||
height: 80%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
@extend %footer;
|
||||
}
|
||||
}
|
||||
|
||||
.displayed {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
213
frontend/src/stopsSearchMenu/map.tsx
Normal file
213
frontend/src/stopsSearchMenu/map.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import { createEffect, createSignal, For, onMount, ParentComponent, useContext } from 'solid-js';
|
||||
import OlFeature from 'ol/Feature';
|
||||
import OlMap from 'ol/Map';
|
||||
import OlView from 'ol/View';
|
||||
import { isEmpty as isEmptyExtend } from 'ol/extent';
|
||||
import { FeatureLike as OlFeatureLike } from 'ol/Feature';
|
||||
import OlOSM from 'ol/source/OSM';
|
||||
import OlOverlay from 'ol/Overlay';
|
||||
import OlVectorSource from 'ol/source/Vector';
|
||||
import { Tile as OlTileLayer, Vector as OlVectorLayer } from 'ol/layer';
|
||||
import { Circle, Stroke, Style } from 'ol/style';
|
||||
import { easeOut } from 'ol/easing';
|
||||
import { getVectorContext } from 'ol/render';
|
||||
import { unByKey } from 'ol/Observable';
|
||||
|
||||
import { Stop } from '../types';
|
||||
import { BusinessDataContext, BusinessDataStore } from "../businessData";
|
||||
import { SearchContext, SearchStore } from "./searchStore";
|
||||
import { MapStop } from "./mapStop";
|
||||
import { StopPopup } from "./stopPopup";
|
||||
|
||||
|
||||
import "./map.scss";
|
||||
|
||||
|
||||
export const Map: ParentComponent<{}> = () => {
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
if (businessDataStore === undefined || searchStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { getStop } = businessDataStore;
|
||||
const { getAllMapFeatures, getFoundStops, getHighlightedStop } = searchStore;
|
||||
|
||||
const [selectedMapStop, setSelectedMapStop] = createSignal<Stop | undefined>(undefined);
|
||||
const [isPopupDisplayed, setPopupDisplayed] = createSignal<boolean>(false);
|
||||
|
||||
const mapCenter = [260769.80336542107, 6250587.867330259]; // EPSG:3857
|
||||
const fitDurationMs = 1500;
|
||||
const flashDurationMs = 2000;
|
||||
// TODO: Set padding according to the marker design.
|
||||
const fitPointsPadding = [50, 50, 50, 50];
|
||||
|
||||
let mapDiv: HTMLDivElement | undefined = undefined;
|
||||
let popup: StopPopup | undefined = undefined;
|
||||
|
||||
const stopVectorSource = new OlVectorSource({ features: [] });
|
||||
const stopVectorLayer = new OlVectorLayer({ source: stopVectorSource });
|
||||
|
||||
let overlay: OlOverlay | undefined = undefined;
|
||||
let map: OlMap | undefined = undefined;
|
||||
|
||||
const displayedFeatures: Record<number, OlFeature> = {};
|
||||
|
||||
const buildMap = (div: HTMLDivElement): void => {
|
||||
overlay = new OlOverlay({
|
||||
element: popup,
|
||||
autoPan: {
|
||||
animation: {
|
||||
duration: 250,
|
||||
},
|
||||
},
|
||||
});
|
||||
map = new OlMap({
|
||||
target: div,
|
||||
controls: [], // remove controls
|
||||
view: new OlView({
|
||||
center: mapCenter,
|
||||
zoom: 10,
|
||||
}),
|
||||
layers: [
|
||||
new OlTileLayer({
|
||||
source: new OlOSM(),
|
||||
}),
|
||||
stopVectorLayer,
|
||||
],
|
||||
overlays: [overlay],
|
||||
});
|
||||
map.on('singleclick', onClickedMap);
|
||||
}
|
||||
|
||||
const onClickedMap = async (event): Promise<void> => {
|
||||
const features = await stopVectorLayer.getFeatures(event.pixel);
|
||||
// Handle only the first feature
|
||||
if (features.length > 0) {
|
||||
await onClickedFeature(features[0]);
|
||||
}
|
||||
else {
|
||||
setPopupDisplayed(false);
|
||||
setSelectedMapStop(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
const onClickedFeature = async (feature: OlFeatureLike): Promise<void> => {
|
||||
const stopId: number = feature.getId();
|
||||
const stop = getStop(stopId);
|
||||
// TODO: Handle StopArea (use center given by the backend)
|
||||
if (stop?.epsg3857_x !== undefined && stop?.epsg3857_y !== undefined) {
|
||||
setSelectedMapStop(stop);
|
||||
map?.getView().animate(
|
||||
{
|
||||
center: [stop.epsg3857_x, stop.epsg3857_y],
|
||||
duration: 1000
|
||||
},
|
||||
// Display the popup once the animation finished
|
||||
() => setPopupDisplayed(true)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => buildMap(mapDiv));
|
||||
|
||||
// Filling the map with stops shape
|
||||
createEffect(() => {
|
||||
const stops = getFoundStops();
|
||||
const foundStopIds = new Set();
|
||||
for (const foundStop of stops) {
|
||||
foundStopIds.add(foundStop.id);
|
||||
foundStop.stops.forEach(s => foundStopIds.add(s.id));
|
||||
}
|
||||
|
||||
for (const [stopIdStr, feature] of Object.entries(displayedFeatures)) {
|
||||
const stopId = parseInt(stopIdStr);
|
||||
if (!foundStopIds.has(stopId)) {
|
||||
console.log(`Remove feature for ${stopId}`);
|
||||
stopVectorSource.removeFeature(feature);
|
||||
delete displayedFeatures[stopId];
|
||||
}
|
||||
}
|
||||
|
||||
const features = getAllMapFeatures();
|
||||
for (const [stopIdStr, feature] of Object.entries(features)) {
|
||||
const stopId = parseInt(stopIdStr);
|
||||
if (foundStopIds.has(stopId) && !(stopId in displayedFeatures)) {
|
||||
console.log(`Add feature for ${stopId}`);
|
||||
stopVectorSource.addFeature(feature);
|
||||
displayedFeatures[stopId] = feature;
|
||||
}
|
||||
}
|
||||
|
||||
const extend = stopVectorSource.getExtent();
|
||||
if (map !== undefined && !isEmptyExtend(extend)) {
|
||||
map.getView().fit(extend, { duration: fitDurationMs, padding: fitPointsPadding });
|
||||
}
|
||||
});
|
||||
|
||||
// Flashing effect
|
||||
createEffect(() => {
|
||||
const highlightedStopId = getHighlightedStop()?.id;
|
||||
if (highlightedStopId !== undefined) {
|
||||
const stop = getStop(highlightedStopId);
|
||||
if (stop !== undefined) {
|
||||
const stops = stop.stops ? stop.stops : [stop];
|
||||
stops.forEach((s) => {
|
||||
const feature = displayedFeatures[s.id];
|
||||
if (feature !== undefined) {
|
||||
flash(feature);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const flash = (feature: OlFeature) => {
|
||||
const start = Date.now();
|
||||
const flashGeom = feature.getGeometry()?.clone();
|
||||
const listenerKey = stopVectorLayer.on('postrender', animate);
|
||||
|
||||
// Force postrender raising.
|
||||
feature.changed();
|
||||
|
||||
function animate(event) {
|
||||
const frameState = event.frameState;
|
||||
const elapsed = frameState.time - start;
|
||||
const vectorContext = getVectorContext(event);
|
||||
|
||||
if (elapsed >= flashDurationMs) {
|
||||
unByKey(listenerKey);
|
||||
return;
|
||||
}
|
||||
|
||||
if (flashGeom !== undefined && map !== undefined) {
|
||||
const elapsedRatio = elapsed / flashDurationMs;
|
||||
// radius will be 5 at start and 30 at end.
|
||||
const radius = easeOut(elapsedRatio) * 25 + 5;
|
||||
const opacity = easeOut(1 - elapsedRatio);
|
||||
|
||||
const style = new Style({
|
||||
image: new Circle({
|
||||
radius: radius,
|
||||
stroke: new Stroke({
|
||||
color: `rgba(255, 0, 0, ${opacity})`,
|
||||
width: 0.25 + opacity,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
vectorContext.setStyle(style);
|
||||
vectorContext.drawGeometry(flashGeom);
|
||||
|
||||
// tell OpenLayers to continue postrender animation
|
||||
map.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return <>
|
||||
<div ref={mapDiv} class="map">
|
||||
<StopPopup ref={popup} stop={selectedMapStop()} show={isPopupDisplayed()} />
|
||||
</div>
|
||||
<For each={getFoundStops()}>{(stop) => <MapStop stop={stop} selected={selectedMapStop()} />}</For>
|
||||
</>;
|
||||
}
|
||||
85
frontend/src/stopsSearchMenu/mapStop.tsx
Normal file
85
frontend/src/stopsSearchMenu/mapStop.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import { createEffect, createResource, For, useContext, VoidComponent } from 'solid-js';
|
||||
import { Circle, Fill, Stroke, Style } from 'ol/style';
|
||||
import OlFeature from 'ol/Feature';
|
||||
import OlPoint from 'ol/geom/Point';
|
||||
import OlPolygon from 'ol/geom/Polygon';
|
||||
|
||||
import { Stop, StopShape } from '../types';
|
||||
import { BusinessDataContext, BusinessDataStore } from "../businessData";
|
||||
import { SearchContext, SearchStore } from "./searchStore";
|
||||
|
||||
|
||||
// TODO: Use boolean to set MapStop selected
|
||||
export const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (props) => {
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
if (businessDataStore === undefined || searchStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { getStopShape } = businessDataStore;
|
||||
const { setMapFeature } = searchStore;
|
||||
|
||||
const stopStyle = new Style({
|
||||
image: new Circle({
|
||||
fill: undefined,
|
||||
stroke: new Stroke({ color: '#3399CC', width: 1.5 }),
|
||||
radius: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
const selectedStopStyle = new Style({
|
||||
image: new Circle({
|
||||
fill: undefined,
|
||||
stroke: new Stroke({ color: 'purple', width: 2 }),
|
||||
radius: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
const stopAreaStyle = new Style({
|
||||
stroke: new Stroke({ color: 'red' }),
|
||||
fill: new Fill({ color: 'rgba(255,255,255,0.2)' }),
|
||||
});
|
||||
|
||||
const getShape = async (stopId: number): Promise<StopShape | undefined> => {
|
||||
return await getStopShape(stopId);
|
||||
};
|
||||
const [shape] = createResource<StopShape | undefined, number>(props.stop.id, getShape);
|
||||
|
||||
createEffect(() => {
|
||||
const shape_ = shape();
|
||||
|
||||
if (shape_ === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
let feature = undefined;
|
||||
|
||||
if (props.stop.epsg3857_x !== undefined && props.stop.epsg3857_y !== undefined) {
|
||||
const selectStopStyle = () => {
|
||||
return (props.selected?.id === props.stop.id ? selectedStopStyle : stopStyle);
|
||||
}
|
||||
feature = new OlFeature({
|
||||
geometry: new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]),
|
||||
});
|
||||
feature.setStyle(selectStopStyle);
|
||||
}
|
||||
|
||||
else {
|
||||
let geometry = undefined;
|
||||
const areaShape = shape();
|
||||
if (areaShape !== undefined) {
|
||||
geometry = new OlPolygon([areaShape.epsg3857_points.slice(0, -1)]);
|
||||
}
|
||||
else {
|
||||
geometry = new OlPoint([props.stop.epsg3857_x, props.stop.epsg3857_y]);
|
||||
}
|
||||
feature = new OlFeature({ geometry: geometry });
|
||||
feature.setStyle(stopAreaStyle);
|
||||
}
|
||||
feature.setId(props.stop.id);
|
||||
|
||||
setMapFeature(props.stop.id, feature);
|
||||
});
|
||||
|
||||
return <For each={props.stop.stops}>{stop => <MapStop stop={stop} selected={props.selected} />}</For>;
|
||||
}
|
||||
165
frontend/src/stopsSearchMenu/searchStore.tsx
Normal file
165
frontend/src/stopsSearchMenu/searchStore.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import { createContext, JSX } from 'solid-js';
|
||||
import { createStore } from "solid-js/store";
|
||||
import OlFeature from 'ol/Feature';
|
||||
import { BusinessDataStore } from "../businessData";
|
||||
|
||||
import { Stop } from '../types';
|
||||
import { PositionedPanel } from '../utils';
|
||||
|
||||
type ByStopIdMapFeatures = Record<number, OlFeature>;
|
||||
|
||||
export interface SearchStore {
|
||||
|
||||
getSearchText: () => string;
|
||||
setSearchText: (text: string, businessDataStore: BusinessDataStore) => Promise<void>;
|
||||
|
||||
getFoundStops: () => Stop[];
|
||||
setFoundStops: (stops: Stop[]) => void;
|
||||
|
||||
getDisplayedPanelId: () => number;
|
||||
setDisplayedPanelId: (panelId: number) => void;
|
||||
|
||||
getPanels: () => PositionedPanel[];
|
||||
setPanels: (panels: PositionedPanel[]) => void;
|
||||
|
||||
getHighlightedStop: () => Stop | undefined;
|
||||
setHighlightedStop: (stop: Stop) => void;
|
||||
resetHighlightedStop: () => void;
|
||||
|
||||
enableMap: (enable: boolean) => void;
|
||||
isMapEnabled: () => boolean;
|
||||
getMapFeature: (stopId: number) => OlFeature | undefined;
|
||||
getAllMapFeatures: () => ByStopIdMapFeatures;
|
||||
setMapFeature: (stopId: number, feature: OlFeature) => void;
|
||||
};
|
||||
|
||||
export const SearchContext = createContext<SearchStore>();
|
||||
|
||||
|
||||
export function SearchProvider(props: { children: JSX.Element }) {
|
||||
|
||||
const searchTextDelayMs = 1500;
|
||||
|
||||
type Store = {
|
||||
searchText: string;
|
||||
searchPromise: Promise<void> | undefined;
|
||||
foundStops: Stop[];
|
||||
displayedPanelId: number;
|
||||
panels: PositionedPanel[];
|
||||
highlightedStop: Stop | undefined;
|
||||
mapEnabled: boolean;
|
||||
mapFeatures: ByStopIdMapFeatures;
|
||||
};
|
||||
|
||||
const [store, setStore] = createStore<Store>({
|
||||
searchText: "",
|
||||
searchPromise: undefined,
|
||||
foundStops: [],
|
||||
displayedPanelId: 0,
|
||||
panels: [],
|
||||
highlightedStop: undefined,
|
||||
// mapEnabled: false,
|
||||
mapFeatures: {},
|
||||
});
|
||||
|
||||
const getSearchText = (): string => {
|
||||
return store.searchText;
|
||||
}
|
||||
|
||||
const debounce = async (fn: (...args: any[]) => Promise<void>, delayMs: number) => {
|
||||
let timerId: number;
|
||||
return new Promise((...args) => {
|
||||
clearTimeout(timerId);
|
||||
timerId = setTimeout(fn, delayMs, ...args);
|
||||
});
|
||||
}
|
||||
|
||||
const setSearchText = async (text: string, businessDataStore: BusinessDataStore): Promise<void> => {
|
||||
setStore('searchText', text);
|
||||
|
||||
if (store.searchPromise === undefined) {
|
||||
const { searchStopByName } = businessDataStore;
|
||||
const promise: Promise<void> = debounce(async (onSuccess: () => void) => {
|
||||
console.log(`Fetching data for "${store.searchText}" stop name`);
|
||||
const stopsById = await searchStopByName(store.searchText);
|
||||
console.log("stopsById=", stopsById);
|
||||
setFoundStops(Object.values(stopsById));
|
||||
onSuccess();
|
||||
}, searchTextDelayMs).then(() => {
|
||||
setStore('searchPromise', undefined);
|
||||
});
|
||||
setStore('searchPromise', promise);
|
||||
}
|
||||
}
|
||||
|
||||
const getFoundStops = (): Stop[] => {
|
||||
return store.foundStops;
|
||||
}
|
||||
|
||||
const setFoundStops = (stops: Stop[]): void => {
|
||||
setStore('foundStops', stops);
|
||||
}
|
||||
|
||||
const getDisplayedPanelId = (): number => {
|
||||
return store.displayedPanelId;
|
||||
}
|
||||
|
||||
const setDisplayedPanelId = (panelId: number): void => {
|
||||
setStore('displayedPanelId', panelId);
|
||||
}
|
||||
|
||||
const getPanels = (): PositionedPanel[] => {
|
||||
return store.panels;
|
||||
}
|
||||
|
||||
const setPanels = (panels: PositionedPanel[]): void => {
|
||||
setStore('panels', panels);
|
||||
}
|
||||
|
||||
const getHighlightedStop = (): Stop | undefined => {
|
||||
return store.highlightedStop;
|
||||
}
|
||||
|
||||
const setHighlightedStop = (stop: Stop): void => {
|
||||
setStore('highlightedStop', stop);
|
||||
}
|
||||
|
||||
const resetHighlightedStop = (): void => {
|
||||
setStore('highlightedStop', undefined);
|
||||
}
|
||||
|
||||
|
||||
const enableMap = (enable: boolean): void => {
|
||||
setStore("mapEnabled", enable);
|
||||
}
|
||||
|
||||
const isMapEnabled = (): boolean => {
|
||||
return store.mapEnabled;
|
||||
}
|
||||
|
||||
const getAllMapFeatures = (): ByStopIdMapFeatures => {
|
||||
return store.mapFeatures;
|
||||
}
|
||||
|
||||
const getMapFeature = (stopId: number): OlFeature | undefined => {
|
||||
return store.mapFeatures[stopId];
|
||||
}
|
||||
|
||||
const setMapFeature = (stopId: number, feature: OlFeature): void => {
|
||||
setStore('mapFeatures', stopId, feature);
|
||||
};
|
||||
|
||||
return (
|
||||
<SearchContext.Provider value={{
|
||||
getSearchText, setSearchText,
|
||||
getFoundStops, setFoundStops,
|
||||
getDisplayedPanelId, setDisplayedPanelId,
|
||||
getPanels, setPanels,
|
||||
getHighlightedStop, setHighlightedStop, resetHighlightedStop,
|
||||
enableMap, isMapEnabled,
|
||||
getMapFeature, getAllMapFeatures, setMapFeature,
|
||||
}}>
|
||||
{props.children}
|
||||
</SearchContext.Provider>
|
||||
);
|
||||
}
|
||||
100
frontend/src/stopsSearchMenu/stopPanel.scss
Normal file
100
frontend/src/stopsSearchMenu/stopPanel.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
@use "../_common";
|
||||
@use "../_utils";
|
||||
|
||||
|
||||
.stopPanel {
|
||||
scroll-snap-align: center;
|
||||
|
||||
.stop {
|
||||
width: calc(1880/1920*100%);
|
||||
height: calc(100% / 5);
|
||||
// margin: 0 calc(20/1920*100%);
|
||||
margin: 0 calc(10/1920*100%);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
/* TODO: compute the border weight according to the parent height */
|
||||
/* TODO: Disable border-bottom for the last .line */
|
||||
border-bottom: solid calc(2px);
|
||||
|
||||
cursor: default;
|
||||
|
||||
.name {
|
||||
margin-left: calc(40/1920*100%);
|
||||
width: 60%;
|
||||
aspect-ratio: 2.5;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-family: IDFVoyageur-bold;
|
||||
}
|
||||
|
||||
.lineRepr {
|
||||
width: 40%;
|
||||
aspect-ratio: 2.5;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
.transportMode {
|
||||
@extend %transportMode;
|
||||
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.linesRepresentationMatrix {
|
||||
@extend %busLinePicto; // Use the larger picto aspect-ratio
|
||||
width: 75%;
|
||||
aspect-ratio: 3;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
%picto {
|
||||
margin-left: 1%;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
%singleLinePicto {
|
||||
@extend %picto;
|
||||
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.transportMode {
|
||||
@extend %transportMode;
|
||||
@extend %picto;
|
||||
}
|
||||
|
||||
.tramLinePicto {
|
||||
@extend %tramLinePicto;
|
||||
@extend %singleLinePicto;
|
||||
}
|
||||
|
||||
.trainLinePicto {
|
||||
@extend %trainLinePicto;
|
||||
@extend %singleLinePicto;
|
||||
}
|
||||
|
||||
.metroLinePicto {
|
||||
@extend %metroLinePicto;
|
||||
@extend %singleLinePicto;
|
||||
}
|
||||
|
||||
.busLinePicto {
|
||||
@extend %busLinePicto;
|
||||
@extend %picto;
|
||||
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
143
frontend/src/stopsSearchMenu/stopPanel.tsx
Normal file
143
frontend/src/stopsSearchMenu/stopPanel.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { createResource, For, JSX, ParentComponent, Show, useContext, VoidComponent } from 'solid-js';
|
||||
|
||||
import { Stop } from '../types';
|
||||
import { renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from '../utils';
|
||||
import { AppContextContext, AppContextStore } from "../appContext";
|
||||
import { BusinessDataContext, BusinessDataStore } from "../businessData";
|
||||
import { SearchContext, SearchStore } from "./searchStore";
|
||||
|
||||
|
||||
import "./stopPanel.scss";
|
||||
|
||||
|
||||
const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
|
||||
const fontSize: number = 40;
|
||||
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
if (businessDataStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { getLine } = businessDataStore;
|
||||
|
||||
const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
|
||||
const reprs = [];
|
||||
for (const lineId of lineIds) {
|
||||
const line = await getLine(lineId);
|
||||
if (line !== undefined) {
|
||||
reprs.push(<div class="transportMode">{renderLineTransportMode(line)}</div>);
|
||||
reprs.push(renderLinePicto(line));
|
||||
}
|
||||
}
|
||||
return reprs;
|
||||
}
|
||||
|
||||
const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
|
||||
|
||||
return (
|
||||
<div class="stop">
|
||||
<svg class="name" viewBox={`0 0 215 ${fontSize}`}>
|
||||
<text
|
||||
x="100%" y="55%"
|
||||
dominant-baseline="middle" text-anchor="end"
|
||||
font-size={fontSize}>
|
||||
{props.stop.name}
|
||||
</text>
|
||||
</svg>
|
||||
<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
type ByTransportModeReprs = {
|
||||
mode: JSX.Element | undefined;
|
||||
lines: Record<string, JSX.Element | JSX.Element[] | undefined>;
|
||||
}
|
||||
|
||||
|
||||
const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
|
||||
const fontSize: number = 10;
|
||||
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
|
||||
if (businessDataStore === undefined || appContextStore === undefined || searchStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { getLine } = businessDataStore;
|
||||
const { setDisplayedStops } = appContextStore;
|
||||
const { setHighlightedStop, resetHighlightedStop } = searchStore;
|
||||
|
||||
|
||||
const fetchLinesRepr = async (stop: Stop): Promise<JSX.Element> => {
|
||||
const lineIds = new Set(stop.lines);
|
||||
const stops = stop.stops;
|
||||
for (const stop of stops) {
|
||||
stop.lines.forEach(lineIds.add, lineIds);
|
||||
}
|
||||
|
||||
const byModeReprs: Record<string, ByTransportModeReprs> = {};
|
||||
for (const lineId of lineIds) {
|
||||
const line = await getLine(lineId);
|
||||
if (line !== undefined) {
|
||||
if (!(line.transportMode in byModeReprs)) {
|
||||
byModeReprs[line.transportMode] = {
|
||||
mode: <div class="transportMode">{renderLineTransportMode(line)}</div>,
|
||||
lines: {}
|
||||
};
|
||||
}
|
||||
byModeReprs[line.transportMode].lines[line.shortName] = renderLinePicto(line);
|
||||
}
|
||||
}
|
||||
|
||||
const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] <
|
||||
TransportModeWeights[y] ? 1 : -1);
|
||||
|
||||
return (
|
||||
<div class="lineRepr">
|
||||
<For each={sortedTransportModes}>{(transportMode) => {
|
||||
const reprs = byModeReprs[transportMode];
|
||||
const lineNames = Object.keys(reprs.lines).sort((x, y) => x.localeCompare(y));
|
||||
return <>
|
||||
{reprs.mode}
|
||||
<div class="linesRepresentationMatrix">
|
||||
<For each={lineNames}>{(lineName) => reprs.lines[lineName]}</For>
|
||||
</div>
|
||||
</>
|
||||
}}
|
||||
</For>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
const [lineReprs] = createResource(props.stop, fetchLinesRepr);
|
||||
|
||||
return (
|
||||
<div
|
||||
class="stop"
|
||||
onClick={() => setDisplayedStops([props.stop])}
|
||||
onMouseEnter={() => setHighlightedStop(props.stop)}
|
||||
onMouseLeave={resetHighlightedStop}
|
||||
>
|
||||
<div class="name" >
|
||||
<ScrollingText height={fontSize} width={100} content={props.stop.name} />
|
||||
</div>
|
||||
{lineReprs()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const StopsPanel: ParentComponent<{ stops: Stop[], show: boolean }> = (props) => {
|
||||
|
||||
return (
|
||||
<div classList={{ "stopPanel": true, "displayed": props.show }}>
|
||||
<For each={props.stops.sort((x, y) => x.name.localeCompare(y.name))}>
|
||||
{(stop) => {
|
||||
return <Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
|
||||
<StopAreaRepr stop={stop} />
|
||||
</Show>;
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
frontend/src/stopsSearchMenu/stopPopup.tsx
Normal file
49
frontend/src/stopsSearchMenu/stopPopup.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
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 >
|
||||
);
|
||||
}
|
||||
85
frontend/src/stopsSearchMenu/stopsSearchMenu.scss
Normal file
85
frontend/src/stopsSearchMenu/stopsSearchMenu.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
@use "../_common";
|
||||
@use "../_utils";
|
||||
|
||||
|
||||
.mapPlaceholder {
|
||||
--border-width: 0.1vh;
|
||||
|
||||
height: calc(100% - 2*var(--border-width));
|
||||
width: 50%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: solid var(--neutral-color) var(--border-width);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
background-color: var(--idfm-black);
|
||||
font-family: IDFVoyageur-bold;
|
||||
font-size: 2vh;
|
||||
color: var(--idfm-white);
|
||||
}
|
||||
|
||||
.stopNameInput {
|
||||
width: 50%;
|
||||
height: 60%;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
||||
border: solid var(--neutral-color) calc(0.01vh);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.leftAddon {
|
||||
width: 17%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: var(--idfm-white);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 83%;
|
||||
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
|
||||
color: var(--idfm-white);
|
||||
font-family: IDFVoyageur-regular;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@extend %title;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stopSearchMenu {
|
||||
@extend %widget;
|
||||
|
||||
.body {
|
||||
@extend %body;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
.stopsPanels {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
|
||||
.displayed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
200
frontend/src/stopsSearchMenu/stopsSearchMenu.tsx
Normal file
200
frontend/src/stopsSearchMenu/stopsSearchMenu.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import { createEffect, For, JSX, lazy, ParentComponent, useContext, Show, VoidComponent } from 'solid-js';
|
||||
import { lazily } from 'solidjs-lazily';
|
||||
import { createScrollPosition } from "@solid-primitives/scroll";
|
||||
|
||||
import { Stop } from '../types';
|
||||
import { PositionedPanel } from '../utils';
|
||||
|
||||
import { BusinessDataContext, BusinessDataStore } from "../businessData";
|
||||
import { SearchContext, SearchProvider, SearchStore } from "./searchStore";
|
||||
import { StopsPanel } from "./stopPanel";
|
||||
|
||||
const { Map } = lazily(() => import("./map"));
|
||||
|
||||
|
||||
import "./stopsSearchMenu.scss";
|
||||
|
||||
|
||||
const StopNameInput: VoidComponent<{ onInput: JSX.EventHandler<HTMLInputElement, InputEvent>, leftAddon: string, placeholder: string }> = (props) => {
|
||||
return (
|
||||
<div class="stopNameInput">
|
||||
<div class="leftAddon">{props.leftAddon}</div>
|
||||
<input type="text" oninput={props.onInput} placeholder={props.placeholder} />
|
||||
</div>);
|
||||
};
|
||||
|
||||
|
||||
const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) => {
|
||||
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
|
||||
if (businessDataStore === undefined || searchStore === undefined)
|
||||
return <div />;
|
||||
|
||||
const { setSearchText } = searchStore;
|
||||
|
||||
const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
|
||||
const stopName = event.currentTarget.value;
|
||||
if (stopName.length >= props.minCharsNb) {
|
||||
await setSearchText(stopName, businessDataStore);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<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>
|
||||
<StopNameInput onInput={onStopNameInput} leftAddon="🚉 🚏" placeholder="Stop name..." />
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
|
||||
if (searchStore === undefined) {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
const { getDisplayedPanelId, getFoundStops, getPanels, setDisplayedPanelId, setPanels } = searchStore;
|
||||
let stopsPanelsRef: HTMLDivElement | undefined = undefined
|
||||
const stopsPanelsScroll = createScrollPosition(() => stopsPanelsRef);
|
||||
const yStopsPanelsScroll = () => stopsPanelsScroll.y;
|
||||
|
||||
createEffect(() => {
|
||||
yStopsPanelsScroll();
|
||||
|
||||
for (const panel of getPanels()) {
|
||||
const panelDiv = panel.panel();
|
||||
const panelDivClientRect = panelDiv.getBoundingClientRect();
|
||||
if (panelDivClientRect.y > 0) {
|
||||
setDisplayedPanelId(panel.position);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={stopsPanelsRef} class="stopsPanels">
|
||||
{() => {
|
||||
setPanels([]);
|
||||
|
||||
let newPanels = [];
|
||||
let positioneds: PositionedPanel[] = [];
|
||||
|
||||
let stops: Stop[] = [];
|
||||
|
||||
for (const stop of getFoundStops()) {
|
||||
if (stops.length < props.maxStopsPerPanel) {
|
||||
stops.push(stop);
|
||||
}
|
||||
else {
|
||||
const panelId = newPanels.length;
|
||||
const panel = <StopsPanel stops={stops} show={panelId == getDisplayedPanelId()} />;
|
||||
newPanels.push(panel);
|
||||
positioneds.push({ position: panelId, panel: panel });
|
||||
stops = [stop];
|
||||
}
|
||||
}
|
||||
if (stops.length) {
|
||||
const panelId = newPanels.length;
|
||||
const panel = <StopsPanel stops={stops} show={panelId == getDisplayedPanelId()} />;
|
||||
newPanels.push(panel);
|
||||
positioneds.push({ position: panelId, panel: panel });
|
||||
}
|
||||
|
||||
setPanels(positioneds);
|
||||
|
||||
return newPanels;
|
||||
}}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const MapPlaceholder: VoidComponent<{}> = () => {
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
|
||||
if (searchStore === undefined) {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
const { enableMap } = searchStore;
|
||||
|
||||
const onDoubleClick = (): void => {
|
||||
console.log('!!! ON DOUBLE CLICK');
|
||||
enableMap(true);
|
||||
}
|
||||
|
||||
return <div
|
||||
class="mapPlaceholder" ondblclick={() => onDoubleClick()}>
|
||||
Double-clic pour activer la carte
|
||||
</div>;
|
||||
};
|
||||
|
||||
|
||||
const Body: VoidComponent<{}> = () => {
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
if (searchStore === undefined) {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
const { isMapEnabled } = searchStore;
|
||||
|
||||
const maxStopsPerPanel = 5;
|
||||
|
||||
return <div class="body">
|
||||
<StopsPanels maxStopsPerPanel={maxStopsPerPanel} />
|
||||
<Show when={isMapEnabled()} fallback={<MapPlaceholder />}>
|
||||
<Map />
|
||||
</Show>
|
||||
</div>;
|
||||
};
|
||||
|
||||
|
||||
const Footer: VoidComponent<{}> = () => {
|
||||
const searchStore: SearchStore | undefined = useContext(SearchContext);
|
||||
if (searchStore === undefined) {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
const { getDisplayedPanelId, getPanels } = searchStore;
|
||||
|
||||
return (
|
||||
<div class="footer">
|
||||
<For each={getPanels()}>
|
||||
{(panel) => {
|
||||
const position = panel.position;
|
||||
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 == getDisplayedPanelId() ? "white" : "black"})` }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export const StopsSearchMenu: VoidComponent = () => {
|
||||
return (
|
||||
<div class="stopSearchMenu">
|
||||
<SearchProvider>
|
||||
<Header title="Recherche de l'arrêt..." minCharsNb={4} />
|
||||
<Body />
|
||||
<Footer />
|
||||
</SearchProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user