pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Show usage count on map

Browse source
This commit is contained in:
Paul Bienkowski 2022-03-16 22:06:06 +01:00
parent 85fcdea403
commit 6ef233a2a2
2 changed files with 48 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/pages/MapPage/LayerSidebar.tsx
View file

@ -22,6 +22,7 @@ const ROAD_ATTRIBUTE_OPTIONS = [
{value: 'distance_overtaker_max', key: 'distance_overtaker_max', text: 'Overtaker distance maximum'}, {value: 'distance_overtaker_max', key: 'distance_overtaker_max', text: 'Overtaker distance maximum'},
{value: 'distance_overtaker_median', key: 'distance_overtaker_median', text: 'Overtaker distance median'}, {value: 'distance_overtaker_median', key: 'distance_overtaker_median', text: 'Overtaker distance median'},
{value: 'overtaking_event_count', key: 'overtaking_event_count', text: 'Event count'}, {value: 'overtaking_event_count', key: 'overtaking_event_count', text: 'Event count'},
{value: 'usage_count', key: 'usage_count', text: 'Usage count'},
] ]
function LayerSidebar({ function LayerSidebar({

81
frontend/src/reducers/mapConfig.ts
View file

@ -1,67 +1,80 @@
import {useMemo} from 'react' import { useMemo } from "react";
import {useSelector} from 'react-redux' import { useSelector } from "react-redux";
import produce from 'immer' import produce from "immer";
import _ from 'lodash' import _ from "lodash";
type BaseMapStyle = 'positron' | 'bright' type BaseMapStyle = "positron" | "bright";
type RoadAttribute = type RoadAttribute =
| 'distance_overtaker_mean' | "distance_overtaker_mean"
| 'distance_overtaker_min' | "distance_overtaker_min"
| 'distance_overtaker_max' | "distance_overtaker_max"
| 'distance_overtaker_median' | "distance_overtaker_median"
| 'overtaking_event_count' | "overtaking_event_count"
| "usage_count";
export type MapConfig = { export type MapConfig = {
baseMap: { baseMap: {
style: BaseMapStyle style: BaseMapStyle;
} };
obsRoads: { obsRoads: {
show: boolean show: boolean;
showUntagged: boolean showUntagged: boolean;
attribute: RoadAttribute attribute: RoadAttribute;
maxCount: number maxCount: number;
} };
obsEvents: { obsEvents: {
show: boolean show: boolean;
} };
} };
export const initialState: MapConfig = { export const initialState: MapConfig = {
baseMap: { baseMap: {
style: 'positron', style: "positron",
}, },
obsRoads: { obsRoads: {
show: true, show: true,
showUntagged: true, showUntagged: true,
attribute: 'distance_overtaker_median', attribute: "distance_overtaker_median",
maxCount: 20, maxCount: 20,
}, },
obsEvents: { obsEvents: {
show: false, show: false,
}, },
} };
type MapConfigAction = {type: 'MAP_CONFIG.SET_FLAG'; payload: {flag: string; value: any}} type MapConfigAction = {
type: "MAP_CONFIG.SET_FLAG";
payload: { flag: string; value: any };
};
export function setMapConfigFlag(flag: string, value: unknown): MapConfigAction { export function setMapConfigFlag(
return {type: 'MAP_CONFIG.SET_FLAG', payload: {flag, value}} flag: string,
value: unknown
): MapConfigAction {
return { type: "MAP_CONFIG.SET_FLAG", payload: { flag, value } };
} }
export function useMapConfig() { export function useMapConfig() {
const mapConfig = useSelector((state) => state.mapConfig) const mapConfig = useSelector((state) => state.mapConfig);
const result = useMemo(() => _.merge({}, initialState, mapConfig), [mapConfig]) const result = useMemo(
return result () => _.merge({}, initialState, mapConfig),
[mapConfig]
);
return result;
} }
export default function mapConfigReducer(state: MapConfig = initialState, action: MapConfigAction) { export default function mapConfigReducer(
state: MapConfig = initialState,
action: MapConfigAction
) {
switch (action.type) { switch (action.type) {
case 'MAP_CONFIG.SET_FLAG': case "MAP_CONFIG.SET_FLAG":
return produce(state, (draft) => { return produce(state, (draft) => {
_.set(draft, action.payload.flag, action.payload.value) _.set(draft, action.payload.flag, action.payload.value);
}) });
default: default:
return state return state;
} }
} }