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

* initial version

* custom model is kept even when switching back and forth between desktop and mobile size

* fix bug when mobile view is changed to compact view and no new route is calculated because of an invalid custom model due to missing encoded values (recreation of CustomModelBox without the previously expected /info endpoint being called)

* move CustomModelBox into SettingsBox but outside of settingsTable

* minor -> warn

* minor css fix

* make settings css better fit the rest

* 1. URL with custom_model should trigger a routing request with it; 2. avoid route re-calculation if settings box is shown; 3. invalid custom model is reset to custom model before if settings box is closed

* tricky to fix error 'Cannot use import statement outside a module' in tests: 1. insist on transpiling custom model editor code to avoid ES6 modules for jest and 2. allowJs in tsconfig and 3. explicitly transform js files using ts-jest - why?

* remove CustomModel from QueryStore state

* formatting

* revert change with SettingsContext to use ShowDistanceInMilesContext

* format and clean up imports

* show error message if invalid custom model (not possible at Settings construction time)

* not many benefits to use validateJson as e.g. encoded values not yet known

* revert commit 96108d7

* remove TODO NOW

* Use string to represent custom model state (#320)

* Move custom model examples to separate file

* Minor rename

* Extract custom model area function

* Remove openSettingsHandle

* Rename custom model examples file

* Remove warning that can never occur

* Move state from settings to query store, query store even depended on settings..

* minor

* move custom model box out of settings

* oops, made a mistake

* Use string to represent custom model state!

* much better

* add todos

* Rename action

* no shadow, use text instead

* i18n: update

* separate custom model box and settings box and use gear as indicator instead of shadow

* format

---------

Co-authored-by: easbar <easbar.mail@posteo.net>

Author: karussell

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;
 }