mapping of profile groups

config.js

@@ -46,6 +46,13 @@ 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', ... }
+
+    // Certain profiles should not appear in the list as it would be too many. Instead they're listed in the settings but still a 'main' profile needs to be shown.
+    // profile_group_mapping: {
+    //   car_avoid_motorway: 'car',
+    //   car_avoid_ferry: 'car',
+    //   car_avoid_toll: 'car',
+    // }
 }
 
 // this is needed for jest (with our current setup at least)

src/App.tsx

@@ -163,6 +163,7 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                         </PlainButton>
                         <RoutingProfiles
                             routingProfiles={query.profiles}
+                            profileGroupMapping={query.profileGroupMapping}
                             selectedProfile={query.routingProfile}
                             showCustomModelBox={showCustomModelBox}
                             toggleCustomModelBox={() => setShowCustomModelBox(!showCustomModelBox)}
@@ -177,7 +178,7 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                                 drawAreas={drawAreas}
                             />
                         )}
-                        <Search points={query.queryPoints} />
+                        <Search points={query.queryPoints} profile={query.routingProfile} />
                         <div>{!error.isDismissed && <ErrorMessage error={error} />}</div>
                         <RoutingResults
                             info={route.routingResult.info}

src/custom.d.ts

@@ -5,6 +5,8 @@ declare module 'heightgraph/src/heightgraph'
 declare module 'custom-model-editor/src/index'
 
 declare module 'config' {
+    import ol from 'ol/dist/ol'
+    import array = ol.array
     const routingApi: string
     const geocodingApi: string
     const defaultTiles: string
@@ -31,6 +33,7 @@ declare module 'config' {
         }
         maxZoom?: number
     }
+    const profile_group_mapping: Record<string, string>
     const profiles: object
 }
 

src/sidebar/MobileSidebar.tsx

@@ -58,6 +58,7 @@ export default function ({ query, route, error, encodedValues, drawAreas }: Mobi
                         </div>
                         <RoutingProfiles
                             routingProfiles={query.profiles}
+                            profileGroupMapping={query.profileGroupMapping}
                             selectedProfile={query.routingProfile}
                             showCustomModelBox={showCustomModelBox}
                             toggleCustomModelBox={() => setShowCustomModelBox(!showCustomModelBox)}
@@ -72,7 +73,7 @@ export default function ({ query, route, error, encodedValues, drawAreas }: Mobi
                                 drawAreas={drawAreas}
                             />
                         )}
-                        <Search points={query.queryPoints} />
+                        <Search points={query.queryPoints} profile={query.routingProfile} />
                     </div>
                 )}
                 {!error.isDismissed && <ErrorMessage error={error} />}

src/sidebar/SettingsBox.module.css

@@ -26,6 +26,27 @@
     align-items: center;
 }
 
+.carProfileOptionsHeader {
+    font-weight: bold;
+}
+
+.carProfileOptions div {
+    padding: 4px 14px;
+}
+
+.carProfileOptions label,
+input {
+    cursor: pointer;
+}
+
+.carProfileOptions label {
+    margin-left: 10px;
+}
+
+.carProfileOptions {
+    padding: 12px 5px;
+}
+
 .toggleButton {
     display: flex;
     align-items: center;

src/sidebar/SettingsBox.tsx

@@ -1,4 +1,4 @@
-import { UpdateSettings } from '@/actions/Actions'
+import { SetVehicleProfile, UpdateSettings } from '@/actions/Actions'
 import Dispatcher from '@/stores/Dispatcher'
 import styles from '@/sidebar/SettingsBox.module.css'
 import { tr } from '@/translation/Translation'
@@ -7,14 +7,39 @@ import OnIcon from '@/sidebar/toggle_on.svg'
 import OffIcon from '@/sidebar/toggle_off.svg'
 import { useContext, useState } from 'react'
 import { SettingsContext } from '@/contexts/SettingsContext'
+import { RoutingProfile } from '@/api/graphhopper'
 
-export default function SettingsBox() {
+export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
     const settings = useContext(SettingsContext)
+    function setProfile(n: string) {
+        Dispatcher.dispatch(new SetVehicleProfile({ name: profile.name === n ? 'car' : n }))
+    }
 
     return (
         <div className={styles.parent}>
             <div className={styles.title}>{tr('settings')}</div>
             <div className={styles.settingsTable}>
+                {/* TODO make generic so that it could be used to collapse e.g. hike & foot */}
+                {profile.name.startsWith('car') && (
+                    <div className={styles.carProfileOptions}>
+                        <span className={styles.carProfileOptionsHeader}>{tr('Avoid')}</span>
+                        <div>
+                            {/*prettier-ignore*/}
+                            <input checked={profile.name === 'car_avoid_motorway'} type="radio" id="motorway" name="car" value="motorway" onClick={e => setProfile('car_avoid_motorway')} />
+                            <label htmlFor="motorway">{tr('motorway')}</label>
+                        </div>
+                        <div>
+                            {/*prettier-ignore*/}
+                            <input checked={profile.name === 'car_avoid_ferry'} type="radio" id="ferry" name="car" value="ferry" onClick={e => setProfile('car_avoid_ferry')} />
+                            <label htmlFor="ferry">{tr('ferry')}</label>
+                        </div>
+                        <div>
+                            {/*prettier-ignore*/}
+                            <input checked={profile.name === 'car_avoid_toll'} type="radio" id="toll" name="car" value="toll" onClick={e => setProfile('car_avoid_toll')} />
+                            <label htmlFor="toll">{tr('toll and ferry')}</label>
+                        </div>
+                    </div>
+                )}
                 <SettingsToggle
                     title={tr('distance_unit', [tr(settings.showDistanceInMiles ? 'mi' : 'km')])}
                     enabled={settings.showDistanceInMiles}

src/sidebar/search/Search.tsx

@@ -12,8 +12,9 @@ import AddressInput from '@/sidebar/search/AddressInput'
 import { MarkerComponent } from '@/map/Marker'
 import { tr } from '@/translation/Translation'
 import SettingsBox from '@/sidebar/SettingsBox'
+import { RoutingProfile } from '@/api/graphhopper'
 
-export default function Search({ points }: { points: QueryPoint[] }) {
+export default function Search({ points, profile }: { points: QueryPoint[]; profile: RoutingProfile }) {
     const [showSettings, setShowSettings] = useState(false)
     const [showTargetIcons, setShowTargetIcons] = useState(true)
     const [moveStartIndex, onMoveStartSelect] = useState(-1)
@@ -60,7 +61,7 @@ export default function Search({ points }: { points: QueryPoint[] }) {
                     {showSettings ? tr('settings_close') : tr('settings')}
                 </PlainButton>
             </div>
-            {showSettings && <SettingsBox />}
+            {showSettings && <SettingsBox profile={profile} />}
         </div>
     )
 }

src/sidebar/search/routingProfiles/RoutingProfiles.tsx

@@ -11,12 +11,14 @@ import { icons } from '@/sidebar/search/routingProfiles/profileIcons'
 
 export default function ({
     routingProfiles,
+    profileGroupMapping,
     selectedProfile,
     showCustomModelBox,
     toggleCustomModelBox,
     customModelBoxEnabled,
 }: {
     routingProfiles: RoutingProfile[]
+    profileGroupMapping: Record<string, string>
     selectedProfile: RoutingProfile
     showCustomModelBox: boolean
     toggleCustomModelBox: () => void
@@ -100,10 +102,12 @@ export default function ({
                 </PlainButton>
                 <ul className={styles.profiles} id="profiles_carousel_items" onScroll={onScroll}>
                     {routingProfiles.map(profile => {
-                        const className =
-                            profile.name === selectedProfile.name
-                                ? styles.selectedProfile + ' ' + styles.profileBtn
-                                : styles.profileBtn
+                        const isProfileSelected =
+                            profile.name === selectedProfile.name ||
+                            profile.name === profileGroupMapping[selectedProfile.name]
+                        const className = isProfileSelected
+                            ? styles.selectedProfile + ' ' + styles.profileBtn
+                            : styles.profileBtn
                         return (
                             <li key={profile.name}>
                                 <PlainButton

src/stores/QueryStore.ts

@@ -20,7 +20,7 @@ import {
 } from '@/actions/Actions'
 import { Bbox, RoutingArgs, RoutingProfile } from '@/api/graphhopper'
 import { calcDist } from '@/distUtils'
-import config from 'config'
+import config, { profile_group_mapping } from 'config'
 import { customModel2prettyString, customModelExamples } from '@/sidebar/CustomModelExamples'
 
 export interface Coordinate {
@@ -34,6 +34,8 @@ export function getBBoxFromCoord(c: Coordinate, offset: number = 0.005): Bbox {
 
 export interface QueryStoreState {
     readonly profiles: RoutingProfile[]
+    readonly profileGroupMapping: Record<string, string>
+    readonly lastProfiles: Record<string, string>
     readonly queryPoints: QueryPoint[]
     readonly nextQueryPointId: number
     readonly currentRequest: CurrentRequest
@@ -99,6 +101,8 @@ export default class QueryStore extends Store<QueryStoreState> {
 
         return {
             profiles: [],
+            profileGroupMapping: {},
+            lastProfiles: {},
             queryPoints: [
                 QueryStore.getEmptyPoint(0, QueryPointType.From),
                 QueryStore.getEmptyPoint(1, QueryPointType.To),
@@ -258,16 +262,30 @@ export default class QueryStore extends Store<QueryStoreState> {
                 {
                     ...state,
                     profiles,
+                    profileGroupMapping: config.profile_group_mapping,
                     routingProfile: profile,
                 },
                 true
             )
         } else if (action instanceof SetVehicleProfile) {
+            const mainProfile = profile_group_mapping[action.profile.name]
+            const prevProfile = this.state.lastProfiles[action.profile.name]
+            let name = action.profile.name,
+                key = action.profile.name,
+                value = ''
+            if (prevProfile && !profile_group_mapping[this.state.routingProfile.name]) {
+                name = prevProfile
+                value = prevProfile
+            } else if (mainProfile) {
+                key = mainProfile
+                value = action.profile.name
+            }
+
             const newState: QueryStoreState = {
                 ...state,
-                routingProfile: action.profile,
+                routingProfile: { name: name },
+                lastProfiles: { ...state.lastProfiles, [key]: value },
             }
-
             return this.routeIfReady(newState, true)
         } else if (action instanceof SetCustomModel) {
             const newState = {