Allow custom model for mobile devices (plus separate settings panel)

src/App.tsx

@@ -30,17 +30,20 @@ import ContextMenu from '@/layers/ContextMenu'
 import usePathDetailsLayer from '@/layers/UsePathDetailsLayer'
 import { Map } from 'ol'
 import { getMap } from '@/map/map'
-import CustomModelBox from '@/sidebar/CustomModelBox'
 import useRoutingGraphLayer from '@/layers/UseRoutingGraphLayer'
 import useUrbanDensityLayer from '@/layers/UseUrbanDensityLayer'
 import useMapBorderLayer from '@/layers/UseMapBorderLayer'
-import { ShowDistanceInMilesContext } from '@/ShowDistanceInMilesContext'
 import RoutingProfiles from '@/sidebar/search/routingProfiles/RoutingProfiles'
 import MapPopups from '@/map/MapPopups'
 import Menu from '@/sidebar/menu.svg'
 import Cross from '@/sidebar/times-solid.svg'
 import PlainButton from '@/PlainButton'
 import useAreasLayer from '@/layers/UseAreasLayer'
+import SettingsBox from '@/sidebar/SettingsBox'
+import Dispatcher from '@/stores/Dispatcher'
+import { ToggleShowSettings } from '@/actions/Actions'
+import CustomModelBox from '@/sidebar/CustomModelBox'
+import { SettingsContext } from '@/stores/SettingsStore'
 
 export const POPUP_CONTAINER_ID = 'popup-container'
 export const SIDEBAR_CONTENT_ID = 'sidebar-content'
@@ -99,15 +102,15 @@ export default function App() {
     // our different map layers
     useBackgroundLayer(map, mapOptions.selectedStyle)
     useMapBorderLayer(map, info.bbox)
-    useAreasLayer(map, query.customModelEnabled && query.customModelValid ? query.customModel?.areas! : null)
+    useAreasLayer(map, settings.customModelEnabled && settings.customModelValid ? query.customModel?.areas! : null)
     useRoutingGraphLayer(map, mapOptions.routingGraphEnabled)
     useUrbanDensityLayer(map, mapOptions.urbanDensityEnabled)
     usePathsLayer(map, route.routingResult.paths, route.selectedPath)
     useQueryPointsLayer(map, query.queryPoints)
     usePathDetailsLayer(map, pathDetails)
     const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
     return (
-        <ShowDistanceInMilesContext.Provider value={settings.showDistanceInMiles}>
+        <SettingsContext.Provider value={settings}>
             <div className={styles.appWrapper}>
                 <MapPopups map={map} pathDetails={pathDetails} mapFeatures={mapFeatures} />
                 <ContextMenu map={map} route={route} queryPoints={query.queryPoints} />
@@ -131,7 +134,7 @@ export default function App() {
                     />
                 )}
             </div>
-        </ShowDistanceInMilesContext.Provider>
+        </SettingsContext.Provider>
     )
 }
 
@@ -157,13 +160,10 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                         <RoutingProfiles
                             routingProfiles={query.profiles}
                             selectedProfile={query.routingProfile}
-                            customModelAllowed={true}
-                            customModelEnabled={query.customModelEnabled}
+                            openSettingsHandle={() => Dispatcher.dispatch(new ToggleShowSettings())}
                         />
-                        <CustomModelBox
-                            enabled={query.customModelEnabled}
+                        <SettingsBox
                             encodedValues={encodedValues}
-                            initialCustomModelStr={query.initialCustomModelStr}
                             queryOngoing={query.currentRequest.subRequests[0]?.state === RequestState.SENT}
                         />
                         <Search points={query.queryPoints} />
@@ -201,11 +201,11 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
     )
 }
 
-function SmallScreenLayout({ query, route, map, error, mapOptions }: LayoutProps) {
+function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues }: LayoutProps) {
     return (
         <>
             <div className={styles.smallScreenSidebar}>
-                <MobileSidebar query={query} route={route} error={error} />
+                <MobileSidebar query={query} route={route} error={error} encodedValues={encodedValues} />
             </div>
             <div className={styles.smallScreenMap}>
                 <MapComponent map={map} />

src/NavBar.ts

@@ -7,15 +7,18 @@ import { window } from '@/Window'
 import QueryStore, { Coordinate, QueryPoint, QueryPointType, QueryStoreState } from '@/stores/QueryStore'
 import MapOptionsStore, { MapOptionsStoreState } from './stores/MapOptionsStore'
 import { getApi } from '@/api/Api'
+import SettingsStore from '@/stores/SettingsStore'
 
 export default class NavBar {
     private readonly queryStore: QueryStore
     private readonly mapStore: MapOptionsStore
+    private readonly settingsStore: SettingsStore
     private ignoreStateUpdates = false
 
-    constructor(queryStore: QueryStore, mapStore: MapOptionsStore) {
+    constructor(queryStore: QueryStore, mapStore: MapOptionsStore, settingsStore: SettingsStore) {
         this.queryStore = queryStore
         this.mapStore = mapStore
+        this.settingsStore = settingsStore
         window.addEventListener('popstate', async () => await this.updateStateFromUrl())
     }
 
@@ -26,7 +29,12 @@ export default class NavBar {
         this.mapStore.register(() => this.updateUrlFromState())
     }
 
-    private static createUrl(baseUrl: string, queryStoreState: QueryStoreState, mapState: MapOptionsStoreState) {
+    private static createUrl(
+        baseUrl: string,
+        queryStoreState: QueryStoreState,
+        mapState: MapOptionsStoreState,
+        addCustomModel: boolean
+    ) {
         const result = new URL(baseUrl)
         if (queryStoreState.queryPoints.filter(point => point.isInitialized).length > 0) {
             queryStoreState.queryPoints
@@ -36,7 +44,7 @@ export default class NavBar {
 
         result.searchParams.append('profile', queryStoreState.routingProfile.name)
         result.searchParams.append('layer', mapState.selectedStyle.name)
-        if (queryStoreState.customModelEnabled && queryStoreState.customModel && queryStoreState.customModelValid)
+        if (addCustomModel && queryStoreState.customModel)
             result.searchParams.append('custom_model', JSON.stringify(queryStoreState.customModel))
 
         return result
@@ -156,7 +164,8 @@ export default class NavBar {
         return NavBar.createUrl(
             window.location.origin + window.location.pathname,
             this.queryStore.state,
-            this.mapStore.state
+            this.mapStore.state,
+            this.settingsStore.state.customModelEnabled && this.settingsStore.state.customModelValid
         ).toString()
     }
 

src/actions/Actions.ts

@@ -225,3 +225,5 @@ export class InstructionClicked implements Action {
 }
 
 export class ToggleDistanceUnits implements Action {}
+
+export class ToggleShowSettings implements Action {}

src/index.tsx

@@ -41,11 +41,12 @@ const apiKey = url.searchParams.has('key') ? url.searchParams.get('key') : confi
 setApi(config.routingApi, config.geocodingApi, apiKey || '')
 
 const initialCustomModelStr = url.searchParams.get('custom_model')
-const queryStore = new QueryStore(getApi(), initialCustomModelStr)
+const settingsStore = new SettingsStore(initialCustomModelStr)
+const queryStore = new QueryStore(getApi(), settingsStore)
 const routeStore = new RouteStore(queryStore)
 
 setStores({
-    settingsStore: new SettingsStore(),
+    settingsStore: settingsStore,
     queryStore: queryStore,
     routeStore: routeStore,
     infoStore: new ApiInfoStore(),
@@ -72,7 +73,7 @@ const smallScreenMediaQuery = window.matchMedia('(max-width: 44rem)')
 const mapActionReceiver = new MapActionReceiver(getMap(), routeStore, () => smallScreenMediaQuery.matches)
 Dispatcher.register(mapActionReceiver)
 
-const navBar = new NavBar(getQueryStore(), getMapOptionsStore())
+const navBar = new NavBar(getQueryStore(), getMapOptionsStore(), getSettingsStore())
 
 // get infos about the api as soon as possible
 getApi()

src/layers/PathDetailPopup.tsx

@@ -2,9 +2,9 @@ import { useContext } from 'react'
 import styles from '@/layers/DefaultMapPopup.module.css'
 import { PathDetailsStoreState } from '@/stores/PathDetailsStore'
 import { metersToText } from '@/Converters'
-import { ShowDistanceInMilesContext } from '@/ShowDistanceInMilesContext'
 import MapPopup from '@/layers/MapPopup'
 import { Map } from 'ol'
+import { SettingsContext } from '@/stores/SettingsStore'
 
 interface PathDetailPopupProps {
     map: Map
@@ -15,7 +15,7 @@ interface PathDetailPopupProps {
  * The popup shown along the selected route when we hover the path detail/elevation graph
  */
 export default function PathDetailPopup({ map, pathDetails }: PathDetailPopupProps) {
-    const showDistanceInMiles = useContext(ShowDistanceInMilesContext)
+    const { showDistanceInMiles } = useContext(SettingsContext)
     return (
         // todo: use createMapMarker from heightgraph?
         // {createMapMarker(point.elevation, point.description, showDistanceInMiles)}

src/pathDetails/PathDetails.tsx

@@ -8,7 +8,7 @@ import { PathDetailsElevationSelected, PathDetailsHover, PathDetailsRangeSelecte
 import QueryStore, { Coordinate, QueryPointType } from '@/stores/QueryStore'
 import { Position } from 'geojson'
 import { calcDist } from '@/distUtils'
-import { ShowDistanceInMilesContext } from '@/ShowDistanceInMilesContext'
+import { SettingsContext } from '@/stores/SettingsStore'
 
 interface PathDetailsProps {
     selectedPath: Path
@@ -52,7 +52,7 @@ export default function ({ selectedPath }: PathDetailsProps) {
         graph?.setData(pathDetailsData.data, pathDetailsData.mappings)
     }, [selectedPath, graph])
 
-    const showDistanceInMiles = useContext(ShowDistanceInMilesContext)
+    const { showDistanceInMiles } = useContext(SettingsContext)
     useEffect(() => {
         graph?.setImperial(showDistanceInMiles)
         graph?.redraw()