make group options usable for all profiles

karussell · karussell · commit 1363e0eda346 · 2025-04-26T17:10:42.000+02:00
diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -7,6 +7,7 @@ declare module 'custom-model-editor/src/index'
 declare module 'config' {
     import ol from 'ol/dist/ol'
     import array = ol.array
+    import {ProfileGroup, ProfileGroupMap} from "@/stores/QueryStore";
     const routingApi: string
     const geocodingApi: string
     const defaultTiles: string
@@ -33,7 +34,7 @@ declare module 'config' {
         }
         maxZoom?: number
     }
-    const profile_group_mapping: Record<string, string>
+    const profile_group_mapping: Record<string, ProfileGroup>
     const profiles: object
 }
 
diff --git a/src/sidebar/SettingsBox.module.css b/src/sidebar/SettingsBox.module.css
@@ -26,27 +26,23 @@
     align-items: center;
 }
 
-.carProfileOptionsHeader {
+.groupProfileOptionsHeader {
     font-weight: bold;
 }
 
-.carProfileOptions div {
-    padding: 4px 14px;
+.groupProfileOptions div {
+    padding: 4px 20px;
 }
 
-.carProfileOptions label,
+.groupProfileOptions label,
 input {
     cursor: pointer;
 }
 
-.carProfileOptions label {
+.groupProfileOptions label {
     margin-left: 10px;
 }
 
-.carProfileOptions {
-    padding: 12px 5px;
-}
-
 .toggleButton {
     display: flex;
     align-items: center;
@@ -94,7 +90,8 @@ input {
 
 .title,
 .infoLine,
-.settingsTable {
+.settingsTable,
+.groupProfileOptionsHeader {
     font-size: 14px;
     color: gray;
 }
diff --git a/src/sidebar/SettingsBox.tsx b/src/sidebar/SettingsBox.tsx
@@ -1,50 +1,51 @@
-import { SetVehicleProfile, 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'
+import {tr} from '@/translation/Translation'
 import PlainButton from '@/PlainButton'
 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'
+import {useContext} from 'react'
+import {SettingsContext} from '@/contexts/SettingsContext'
+import {RoutingProfile} from '@/api/graphhopper'
+import {ProfileGroupMap} from "@/stores/QueryStore";
+import * as config from "config";
 
-export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
+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 }))
+        Dispatcher.dispatch(new SetVehicleProfile({name: profile.name === n ? 'car' : n}))
     }
 
+    const groupName = ProfileGroupMap.create(config.profile_group_mapping)[profile.name]
+    const group = config.profile_group_mapping[groupName]
     return (
         <div className={styles.parent}>
+            {groupName && <span className={styles.groupProfileOptionsHeader}>
+                {tr(group.settings_tr_key)}
+            </span>}
+            {groupName && <div className={styles.settingsTable}>
+                <div className={styles.groupProfileOptions}>
+                    {group.options.map((option) => (
+                        <div key={option.profile}>
+                            <input checked={profile.name === option.profile} type="radio" id={option.profile}
+                                   name={groupName} value={option.profile}
+                                   onClick={() => setProfile(option.profile)}/>
+                            <label htmlFor={option.profile}>
+                                {tr(group.settings_tr_key + '_' + option.profile)}
+                            </label>
+                        </div>
+                    ))}
+                </div>
+            </div>}
             <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}
                     onClick={() =>
-                        Dispatcher.dispatch(new UpdateSettings({ showDistanceInMiles: !settings.showDistanceInMiles }))
+                        Dispatcher.dispatch(new UpdateSettings({showDistanceInMiles: !settings.showDistanceInMiles}))
                     }
                 />
             </div>
@@ -55,23 +56,23 @@ export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
                         title={tr('settings_gpx_export_trk')}
                         enabled={settings.gpxExportTrk}
                         onClick={() =>
-                            Dispatcher.dispatch(new UpdateSettings({ gpxExportTrk: !settings.gpxExportTrk }))
+                            Dispatcher.dispatch(new UpdateSettings({gpxExportTrk: !settings.gpxExportTrk}))
                         }
                     />
 
                     <SettingsCheckbox
                         title={tr('settings_gpx_export_rte')}
                         enabled={settings.gpxExportRte}
                         onClick={() =>
-                            Dispatcher.dispatch(new UpdateSettings({ gpxExportRte: !settings.gpxExportRte }))
+                            Dispatcher.dispatch(new UpdateSettings({gpxExportRte: !settings.gpxExportRte}))
                         }
                     />
 
                     <SettingsCheckbox
                         title={tr('settings_gpx_export_wpt')}
                         enabled={settings.gpxExportWpt}
                         onClick={() =>
-                            Dispatcher.dispatch(new UpdateSettings({ gpxExportWpt: !settings.gpxExportWpt }))
+                            Dispatcher.dispatch(new UpdateSettings({gpxExportWpt: !settings.gpxExportWpt}))
                         }
                     />
                 </div>
@@ -87,22 +88,23 @@ export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
     )
 }
 
-function SettingsToggle({ title, enabled, onClick }: { title: string; enabled: boolean; onClick: () => void }) {
+function SettingsToggle({title, enabled, onClick}: { title: string; enabled: boolean; onClick: () => void }) {
     return (
         <div className={styles.settingsToggle} onClick={onClick}>
-            <PlainButton style={{ color: enabled ? '' : 'lightgray' }} className={styles.toggleButton}>
-                {enabled ? <OnIcon /> : <OffIcon />}
+            <PlainButton style={{color: enabled ? '' : 'lightgray'}} className={styles.toggleButton}>
+                {enabled ? <OnIcon/> : <OffIcon/>}
             </PlainButton>
-            <div style={{ color: enabled ? '#5b616a' : 'gray' }}>{title}</div>
+            <div style={{color: enabled ? '#5b616a' : 'gray'}}>{title}</div>
         </div>
     )
 }
 
-function SettingsCheckbox({ title, enabled, onClick }: { title: string; enabled: boolean; onClick: () => void }) {
+function SettingsCheckbox({title, enabled, onClick}: { title: string; enabled: boolean; onClick: () => void }) {
     return (
         <div className={styles.settingsCheckbox} onClick={onClick}>
-            <input type="checkbox" checked={enabled} onChange={ignore => {}}></input>
-            <label style={{ color: enabled ? '#5b616a' : 'gray' }}>{title}</label>
+            <input type="checkbox" checked={enabled} onChange={ignore => {
+            }}></input>
+            <label style={{color: enabled ? '#5b616a' : 'gray'}}>{title}</label>
         </div>
     )
 }
diff --git a/src/sidebar/search/Search.module.css b/src/sidebar/search/Search.module.css
@@ -49,12 +49,22 @@
     grid-column: 1 / span 3;
 }
 
-.addSearchBox,
-.settingsButton {
+.addSearchBox {
     font-size: 14px;
     color: gray;
 }
 
+.settingsButton,
+.settingsButton:hover {
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(39, 100, 200, 0.85);
+}
+
+.settingsButton:hover {
+    color: rgb(35, 92, 185);
+}
+
 .lastSearchLine {
     display: flex;
     flex-direction: row;
diff --git a/src/sidebar/search/routingProfiles/RoutingProfiles.tsx b/src/sidebar/search/routingProfiles/RoutingProfiles.tsx
@@ -1,24 +1,25 @@
-import React, { useEffect, useState } from 'react'
+import React, {useEffect, useState} from 'react'
 import styles from './RoutingProfiles.module.css'
 import Dispatcher from '@/stores/Dispatcher'
-import { SetVehicleProfile } from '@/actions/Actions'
-import { RoutingProfile } from '@/api/graphhopper'
+import {SetVehicleProfile} from '@/actions/Actions'
+import {RoutingProfile} from '@/api/graphhopper'
 import PlainButton from '@/PlainButton'
 import Chevron from './chevron.svg'
-import { tr } from '@/translation/Translation'
+import {tr} from '@/translation/Translation'
 import CustomModelBoxSVG from '@/sidebar/open_custom_model.svg'
-import { icons } from '@/sidebar/search/routingProfiles/profileIcons'
+import {icons} from '@/sidebar/search/routingProfiles/profileIcons'
+import {ProfileGroup, ProfileGroupMap} from "@/stores/QueryStore";
 
 export default function ({
-    routingProfiles,
-    profileGroupMapping,
-    selectedProfile,
-    showCustomModelBox,
-    toggleCustomModelBox,
-    customModelBoxEnabled,
-}: {
+                             routingProfiles,
+                             profileGroupMapping,
+                             selectedProfile,
+                             showCustomModelBox,
+                             toggleCustomModelBox,
+                             customModelBoxEnabled,
+                         }: {
     routingProfiles: RoutingProfile[]
-    profileGroupMapping: Record<string, string>
+    profileGroupMapping: Record<string, ProfileGroup>
     selectedProfile: RoutingProfile
     showCustomModelBox: boolean
     toggleCustomModelBox: () => void
@@ -82,14 +83,15 @@ export default function ({
         if (!icons[p.name]) customProfiles[key] = [...(customProfiles[key] || []), p.name]
     })
 
+    let profileToGroup = ProfileGroupMap.create(profileGroupMapping)
     return (
         <div className={styles.profilesParent}>
             <PlainButton
                 title={tr('open_custom_model_box')}
                 className={showCustomModelBox ? styles.enabledCMBox : styles.cmBox}
                 onClick={toggleCustomModelBox}
             >
-                <CustomModelBoxSVG />
+                <CustomModelBoxSVG/>
             </PlainButton>
             <div className={styles.carousel}>
                 <PlainButton
@@ -98,13 +100,12 @@ export default function ({
                     onClick={() => move(false)}
                     disabled={profileScroll <= 0}
                 >
-                    <Chevron />
+                    <Chevron/>
                 </PlainButton>
                 <ul className={styles.profiles} id="profiles_carousel_items" onScroll={onScroll}>
-                    {routingProfiles.map(profile => {
+                    {routingProfiles.filter(profile => !profileToGroup[profile.name] || profile.name == profileToGroup[profile.name]).map(profile => {
                         const isProfileSelected =
-                            profile.name === selectedProfile.name ||
-                            profile.name === profileGroupMapping[selectedProfile.name]
+                            profile.name === selectedProfile.name || profile.name == profileToGroup[selectedProfile.name]
                         const className = isProfileSelected
                             ? styles.selectedProfile + ' ' + styles.profileBtn
                             : styles.profileBtn
@@ -116,7 +117,7 @@ export default function ({
                                     className={className}
                                 >
                                     {customModelBoxEnabled && profile.name === selectedProfile.name && (
-                                        <CustomModelBoxSVG className={styles.asIndicator} />
+                                        <CustomModelBoxSVG className={styles.asIndicator}/>
                                     )}
                                     {getIcon(profile.name, customProfiles)}
                                 </PlainButton>
@@ -130,7 +131,7 @@ export default function ({
                     onClick={() => move()}
                     disabled={profileScroll >= profileWidth}
                 >
-                    <Chevron />
+                    <Chevron/>
                 </PlainButton>
             </div>
         </div>
@@ -147,25 +148,25 @@ function getIcon(profileName: string, customProfiles: Record<string, Array<strin
         if (index >= 1) {
             let icon = icons[key.slice(0, -1)] // slice to remove underscore from key
             if (!icon) icon = icons.question_mark
-            return key === '_' ? <NumberIcon number={index} /> : <IconWithBatchNumber baseIcon={icon} number={index} />
+            return key === '_' ? <NumberIcon number={index}/> : <IconWithBatchNumber baseIcon={icon} number={index}/>
         }
     }
 
     // this is the very last fallback, should never be reached
     return React.createElement(icons.question_mark)
 }
 
-function IconWithBatchNumber({ baseIcon, number }: { baseIcon: any; number: number }) {
+function IconWithBatchNumber({baseIcon, number}: { baseIcon: any; number: number }) {
     return (
         <div className={styles.iconContainer}>
             {React.createElement(baseIcon)}
             <div className={styles.batchNumber}>
-                <NumberIcon number={number} />
+                <NumberIcon number={number}/>
             </div>
         </div>
     )
 }
 
-function NumberIcon({ number }: { number: number }) {
+function NumberIcon({number}: { number: number }) {
     return <span>{number}</span>
 }
diff --git a/src/stores/QueryStore.ts b/src/stores/QueryStore.ts
diff --git a/src/translation/tr.json b/src/translation/tr.json

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ declare module 'custom-model-editor/src/index'`
`7`	`7`	`declare module 'config' {`
`8`	`8`	`import ol from 'ol/dist/ol'`
`9`	`9`	`import array = ol.array`
	`10`	`+ import {ProfileGroup, ProfileGroupMap} from "@/stores/QueryStore";`
`10`	`11`	`const routingApi: string`
`11`	`12`	`const geocodingApi: string`
`12`	`13`	`const defaultTiles: string`
`@@ -33,7 +34,7 @@ declare module 'config' {`
`33`	`34`	`}`
`34`	`35`	`maxZoom?: number`
`35`	`36`	`}`
`36`		`- const profile_group_mapping: Record<string, string>`
	`37`	`+ const profile_group_mapping: Record<string, ProfileGroup>`
`37`	`38`	`const profiles: object`
`38`	`39`	`}`
`39`	`40`