86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
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>;
|
|
}
|