mapping of profile groups (#401)

* mapping of profile groups

* make group options usable for all profiles

* simplify

* formatting

* fix test

* minor fixes and only group ecargobike and racingbike

* move helper/utils out of QueryStore into utils.ts

* avoid unrelated changes

* reduce changes

* minor

* lastProfiles not working anyway

* keep track of option (profile) in a certain group

* avoid error in console

* minor renames

Author: karussell

config.js

@@ -45,6 +45,27 @@ const config = {
     //
     // E.g. the 'bike' entry will add a "bike" profile for which we send a request with the specified 'details' parameter. You can even change the profile itself when you specify
     // bike: { profile: 'raw_bike', ... }
+
+    // You can 'collapse' or group certain profiles to reduce the number of profiles in the panel. Instead they're listed in the settings but still a profile icon is shown.
+    // Note: the name of the group must be the default option for this group.
+    // profile_group_mapping: {
+    //  car: {
+    //    options: [
+    //      { profile: 'car' },
+    //      { profile: 'car_avoid_motorway' },
+    //      { profile: 'car_avoid_ferry' },
+    //      { profile: 'car_avoid_toll' }
+    //    ]
+    //  },
+    //  bike: {
+    //    options: [
+    //      { profile: 'bike' },
+    //      { profile: 'mtb' },
+    //      { profile: 'racingbike' },
+    //      { profile: 'ecargobike' }
+    //    ]
+    //  }
+    // }
 }
 
 // this is needed for jest (with our current setup at least)

src/App.tsx

@@ -192,7 +192,7 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                                 drawAreas={drawAreas}
                             />
                         )}
-                        <Search points={query.queryPoints} map={map} />
+                        <Search points={query.queryPoints} profile={query.routingProfile} map={map} />
                         <div>{!error.isDismissed && <ErrorMessage error={error} />}</div>
                         <RoutingResults
                             info={route.routingResult.info}

src/actions/Actions.ts

@@ -37,6 +37,14 @@ export class SetVehicleProfile implements Action {
     }
 }
 
+export class SetVehicleProfileGroup implements Action {
+    readonly group: string
+
+    constructor(group: string) {
+        this.group = group
+    }
+}
+
 export class AddPoint implements Action {
     readonly atIndex: number
     readonly coordinate: Coordinate

src/api/Api.ts

@@ -445,7 +445,7 @@ export class ApiImpl implements Api {
 
     public static isMotorVehicle(profile: string) {
         return (
-            profile.includes('car') ||
+            (profile.includes('car') && !profile.includes('cargobike')) ||
             profile.includes('truck') ||
             profile.includes('scooter') ||
             profile.includes('bus') ||

src/custom.d.ts

@@ -5,6 +5,10 @@ declare module 'heightgraph/src/heightgraph'
 declare module 'custom-model-editor/src/index'
 
 declare module 'config' {
+    interface ProfileGroup {
+        readonly options: { profile: string }[]
+    }
+
     const routingApi: string
     const geocodingApi: string
     const defaultTiles: string
@@ -31,6 +35,7 @@ declare module 'config' {
         }
         maxZoom?: number
     }
+    const profile_group_mapping: Record<string, ProfileGroup>
     const profiles: object
 }
 

src/map/findNextWayPoint.ts

@@ -1,5 +1,5 @@
 import { Coordinate } from '@/stores/QueryStore'
-import { calcDist } from '@/distUtils'
+import { calcDist } from '@/utils'
 
 /**
  * Finds the way-point that follows the part of a route that is closest to a given location

src/pathDetails/PathDetails.tsx

@@ -7,7 +7,7 @@ import Dispatcher from '@/stores/Dispatcher'
 import { PathDetailsElevationSelected, PathDetailsHover, PathDetailsRangeSelected } from '@/actions/Actions'
 import QueryStore, { Coordinate, QueryPointType } from '@/stores/QueryStore'
 import { Position } from 'geojson'
-import { calcDist } from '@/distUtils'
+import { calcDist } from '@/utils'
 import { tr } from '@/translation/Translation'
 import { SettingsContext } from '@/contexts/SettingsContext'
 

src/sidebar/MobileSidebar.tsx

@@ -74,7 +74,7 @@ export default function ({ query, route, error, encodedValues, drawAreas, map }:
                                 drawAreas={drawAreas}
                             />
                         )}
-                        <Search points={query.queryPoints} map={map} />
+                        <Search points={query.queryPoints} profile={query.routingProfile} map={map} />
                     </div>
                 )}
                 {!error.isDismissed && <ErrorMessage error={error} />}

src/sidebar/RoutingResults.tsx

@@ -10,7 +10,7 @@ import Details from '@/sidebar/list.svg'
 import GPXDownload from '@/sidebar/file_download.svg'
 import Instructions from '@/sidebar/instructions/Instructions'
 import { LineString, Position } from 'geojson'
-import { calcDist } from '@/distUtils'
+import { calcDist } from '@/utils'
 import { useMediaQuery } from 'react-responsive'
 import { tr } from '@/translation/Translation'
 import { ApiImpl } from '@/api/Api'

src/sidebar/SettingsBox.module.css

@@ -26,6 +26,23 @@
     align-items: center;
 }
 
+.groupProfileOptionsHeader {
+    font-weight: bold;
+}
+
+.groupProfileOptions div {
+    padding: 4px 20px;
+}
+
+.groupProfileOptions label,
+input {
+    cursor: pointer;
+}
+
+.groupProfileOptions label {
+    margin-left: 10px;
+}
+
 .toggleButton {
     display: flex;
     align-items: center;
@@ -73,7 +90,8 @@
 
 .title,
 .infoLine,
-.settingsTable {
+.settingsTable,
+.groupProfileOptionsHeader {
     font-size: 14px;
     color: gray;
 }