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

src/App.tsx

@@ -41,6 +41,7 @@ import Menu from '@/sidebar/menu.svg'
 import Cross from '@/sidebar/times-solid.svg'
 import PlainButton from '@/PlainButton'
 import useAreasLayer from '@/layers/UseAreasLayer'
+import { Settings } from '@/stores/SettingsStore'
 
 export const POPUP_CONTAINER_ID = 'popup-container'
 export const SIDEBAR_CONTENT_ID = 'sidebar-content'
@@ -99,7 +100,7 @@ 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, getCustomModelAreas(query))
     useRoutingGraphLayer(map, mapOptions.routingGraphEnabled)
     useUrbanDensityLayer(map, mapOptions.urbanDensityEnabled)
     usePathsLayer(map, route.routingResult.paths, route.selectedPath)
@@ -119,6 +120,7 @@ export default function App() {
                         mapOptions={mapOptions}
                         error={error}
                         encodedValues={info.encoded_values}
+                        settings={settings}
                     />
                 ) : (
                     <LargeScreenLayout
@@ -128,6 +130,7 @@ export default function App() {
                         mapOptions={mapOptions}
                         error={error}
                         encodedValues={info.encoded_values}
+                        settings={settings}
                     />
                 )}
             </div>
@@ -142,10 +145,12 @@ interface LayoutProps {
     mapOptions: MapOptionsStoreState
     error: ErrorStoreState
     encodedValues: object[]
+    settings: Settings
 }
 
 function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues }: LayoutProps) {
     const [showSidebar, setShowSidebar] = useState(true)
+    const [showCustomModelBox, setShowCustomModelBox] = useState(false)
     return (
         <>
             {showSidebar ? (
@@ -157,15 +162,18 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                         <RoutingProfiles
                             routingProfiles={query.profiles}
                             selectedProfile={query.routingProfile}
-                            customModelAllowed={true}
-                            customModelEnabled={query.customModelEnabled}
-                        />
-                        <CustomModelBox
-                            enabled={query.customModelEnabled}
-                            encodedValues={encodedValues}
-                            initialCustomModelStr={query.initialCustomModelStr}
-                            queryOngoing={query.currentRequest.subRequests[0]?.state === RequestState.SENT}
+                            showCustomModelBox={showCustomModelBox}
+                            toggleCustomModelBox={() => setShowCustomModelBox(!showCustomModelBox)}
+                            customModelBoxEnabled={query.customModelEnabled}
                         />
+                        {showCustomModelBox && (
+                            <CustomModelBox
+                                customModelEnabled={query.customModelEnabled}
+                                encodedValues={encodedValues}
+                                customModelStr={query.customModelStr}
+                                queryOngoing={query.currentRequest.subRequests[0]?.state === RequestState.SENT}
+                            />
+                        )}
                         <Search points={query.queryPoints} />
                         <div>{!error.isDismissed && <ErrorMessage error={error} />}</div>
                         <RoutingResults
@@ -201,11 +209,17 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
     )
 }
 
-function SmallScreenLayout({ query, route, map, error, mapOptions }: LayoutProps) {
+function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues, settings }: LayoutProps) {
     return (
         <>
             <div className={styles.smallScreenSidebar}>
-                <MobileSidebar query={query} route={route} error={error} />
+                <MobileSidebar
+                    query={query}
+                    route={route}
+                    error={error}
+                    encodedValues={encodedValues}
+                    settings={settings}
+                />
             </div>
             <div className={styles.smallScreenMap}>
                 <MapComponent map={map} />
@@ -231,3 +245,12 @@ function SmallScreenLayout({ query, route, map, error, mapOptions }: LayoutProps
         </>
     )
 }
+
+function getCustomModelAreas(queryStoreState: QueryStoreState): object | null {
+    if (!queryStoreState.customModelEnabled) return null
+    try {
+        return JSON.parse(queryStoreState.customModelStr)['areas']
+    } catch {
+        return null
+    }
+}

src/NavBar.ts

@@ -36,8 +36,8 @@ 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)
-            result.searchParams.append('custom_model', JSON.stringify(queryStoreState.customModel))
+        if (queryStoreState.customModelEnabled)
+            result.searchParams.append('custom_model', queryStoreState.customModelStr.replace(/\s+/g, ''))
 
         return result
     }

src/actions/Actions.ts

@@ -77,7 +77,7 @@ export class InvalidatePoint implements Action {
     }
 }
 
-export class SetCustomModelBoxEnabled implements Action {
+export class SetCustomModelEnabled implements Action {
     readonly enabled: boolean
 
     constructor(enabled: boolean) {
@@ -86,14 +86,12 @@ export class SetCustomModelBoxEnabled implements Action {
 }
 
 export class SetCustomModel implements Action {
-    readonly customModel: CustomModel | null
-    readonly valid: boolean
-    readonly issueRouteRequest
-
-    constructor(customModel: CustomModel | null, valid: boolean, issueRouteRequest = false) {
-        this.customModel = customModel
-        this.valid = valid
-        this.issueRouteRequest = issueRouteRequest
+    readonly customModelStr: string
+    readonly issueRoutingRequest: boolean
+
+    constructor(customModelStr: string, issueRoutingRequest: boolean) {
+        this.customModelStr = customModelStr
+        this.issueRoutingRequest = issueRoutingRequest
     }
 }
 

src/sidebar/CustomModelBox.module.css

@@ -5,6 +5,20 @@
     height: 18rem;
 }
 
+.customModelOptionTable {
+    display: grid;
+    font-size: 14px;
+    grid-template-columns: 15% auto;
+    grid-template-rows: 1.3rem;
+    align-content: center;
+    align-items: center;
+    margin: 1.5rem 0.5rem 0.5rem 0;
+}
+
+.customModelOptionTable svg {
+    scale: 0.7;
+}
+
 #element::-webkit-scrollbar {
     display: none;
 }