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

🐛 Old stops still displayed on map once the stop search narrowed

Browse Source
This commit is contained in:
Adrien
2023-04-15 18:24:47 +02:00
parent a2728cfc0c
commit ee14d60db7
1 changed files with 68 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/src/stopsSearchMenu.tsx
View File

@@ -407,6 +407,52 @@ const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
); );
} }
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 // TODO: Use boolean to set MapStop selected
const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (props) => { const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (props) => {
const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext); const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
@@ -482,52 +528,7 @@ const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (prop
setMapFeature(props.stop.id, feature); setMapFeature(props.stop.id, feature);
}); });
<For each={props.stop.stops}>{stop => <MapStop stop={stop} selected={props.selected} />}</For> return <For each={props.stop.stops}>{stop => <MapStop stop={stop} selected={props.selected} />}</For>;
}
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 >
);
} }
@@ -601,9 +602,7 @@ const Map: ParentComponent<{}> = () => {
const onClickedFeature = async (feature: OlFeatureLike): Promise<void> => { const onClickedFeature = async (feature: OlFeatureLike): Promise<void> => {
const stopId: number = feature.getId(); const stopId: number = feature.getId();
const stop = getStop(stopId); const stop = getStop(stopId);
// TODO: Handle StopArea (use center given by the backend) // TODO: Handle StopArea (use center given by the backend)
if (stop?.lat !== undefined && stop?.lon !== undefined) { if (stop?.lat !== undefined && stop?.lon !== undefined) {
setSelectedMapStop(stop); setSelectedMapStop(stop);
@@ -613,7 +612,8 @@ const Map: ParentComponent<{}> = () => {
duration: 1000 duration: 1000
}, },
// Display the popup once the animation finished // Display the popup once the animation finished
() => setPopupDisplayed(true)); () => setPopupDisplayed(true)
);
} }
} }
@@ -621,20 +621,29 @@ const Map: ParentComponent<{}> = () => {
// Filling the map with stops shape // Filling the map with stops shape
createEffect(() => { createEffect(() => {
const features = getAllMapFeatures(); 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 [stopId, feature] of Object.entries(features)) { for (const [stopIdStr, feature] of Object.entries(displayedFeatures)) {
if (!(stopId in displayedFeatures)) { const stopId = parseInt(stopIdStr);
const stop = getStop(parseInt(stopId)); if (!foundStopIds.has(stopId)) {
stopVectorSource.addFeature(feature); console.log(`Remove feature for ${stopId}`);
displayedFeatures[stopId] = feature; stopVectorSource.removeFeature(feature);
delete displayedFeatures[stopId];
} }
} }
for (const [stopId, feature] of Object.entries(displayedFeatures)) { const features = getAllMapFeatures();
if (!(stopId in features)) { for (const [stopIdStr, feature] of Object.entries(features)) {
stopVectorSource.removeFeature(feature); const stopId = parseInt(stopIdStr);
delete displayedFeatures[stopId]; if (foundStopIds.has(stopId) && !(stopId in displayedFeatures)) {
console.log(`Add feature for ${stopId}`);
stopVectorSource.addFeature(feature);
displayedFeatures[stopId] = feature;
} }
} }