work in progress

packages/clients/snowbox/src/mapConfiguration.ts

@@ -260,6 +260,9 @@ export const mapConfiguration = {
     },
   },
   routing: {
+    selectableTravelModes: ['Car', 'hdv', 'bike', 'walking', 'wheelchair'],
+    selectablePreferences: ['recommended', 'fastest', 'shortest'],
+    displayPreference: true,
     url: 'https://sg.geodatenzentrum.de/web_ors/v2/',
   },
 }

packages/plugins/Routing/src/components/Routing.vue

@@ -6,18 +6,28 @@
       </v-text-field>
       <v-text-field :label="$t('common:plugins.routing.endLabel')">
       </v-text-field>
-      <v-actions>
-        <v-btn>{{ $t('common:plugins.routing.resetButton') }} </v-btn>
-      </v-actions>
+      <v-btn @click="resetCoordinates"
+        >{{ $t('common:plugins.routing.resetButton') }}
+      </v-btn>
       <v-select
+        v-model="selectedTravelModeItem"
         clearable
-        label="common:plugins.routing.modeLabel"
-        :items="$t('common:plugins.routing.travelMode')"
+        :label="$t('common:plugins.routing.modeLabel')"
+        :items="translatedTravelModes"
+        item-value="key"
+        item-text="translatedKey"
       ></v-select>
       <v-select
+        v-model="selectedPreferenceItem"
         clearable
-        label="common:plugins.routing.preferenceLabel"
-        :items="$t('common:plugins.routing.preference')"
+        :label="$t('common:plugins.routing.preferenceLabel')"
+        :items="
+          // mapping in template to guarantee update on language change
+          preferenceOptionsFromMapConfig.map(({ value, text }) => ({
+            value,
+            text: $t(text),
+          }))
+        "
       ></v-select>
       <!--
       //TODO: values definieren - wo?
@@ -43,7 +53,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, mapMutations } from 'vuex'
 
 export default Vue.extend({
   name: 'RoutingPlugin',
@@ -52,23 +62,58 @@ export default Vue.extend({
   }),
   computed: {
     ...mapGetters(['hasSmallDisplay']),
-    ...mapGetters('plugin/routing', ['renderType']),
+    ...mapGetters('plugin/routing', [
+      'renderType',
+      'travelModeOptionsFromMapConfig',
+      'preferenceOptionsFromMapConfig',
+      'selectableTravelModes',
+      'selectablePreferences',
+    ]),
+    selectedTravelModeItem: {
+      get(): string {
+        return this.selectedTravelMode
+      },
+      set(value: string): void {
+        this.setSelectedTravelMode(value)
+      },
+    },
+    selectedPreferenceItem: {
+      get(): string {
+        return this.selectedPreference
+      },
+      set(value: string): void {
+        this.setSelectedPreference(value)
+      },
+    },
+    translatedTravelModes() {
+      return this.selectableTravelModes.map((item) => ({
+        ...item,
+        translatedText: this.$t(item.localKey),
+      }))
+    },
   },
   mounted() {
     this.setupModule()
   },
   methods: {
-    ...mapActions('plugin/routing', ['setupModule']),
+    ...mapActions('plugin/routing', ['setupModule', 'resetCoordinates']),
+    ...mapMutations('plugin/routing', [
+      'setSelectedTravelMode',
+      'setSelectedPreference',
+      'resetCoordinates',
+    ]),
   },
 })
 </script>
 
 <style>
-.polar-plugin-routing-wrapper {
+.polar-routing-menu {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
+  padding-left: 20px;
+  padding-right: 5px;
 }
 </style>

packages/plugins/Routing/src/store/actions.ts

@@ -5,6 +5,9 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
   setupModule({ rootGetters: { configuration, map }, commit, getters }) {
     console.error(configuration)
   },
+  resetCoordinates(commit) {
+    commit('setRoute', [0.0, 0.0])
+  },
 }
 
 // TODO: implementieren: updateTravelMode, updateDisplayPreferredRoute, updatePreferredRoute, updateRouteTypesToAvoid

packages/plugins/Routing/src/store/getters.ts

@@ -12,6 +12,28 @@ const getters = {
       ? rootGetters.configuration.routing.renderType
       : 'independent'
   },
+  selectedTravelMode({ selectedTravelMode }, { selectableTravelModes }) {
+    return selectedTravelMode || selectableTravelModes[0]
+  },
+  selectedPreference({ selectedPreference }, { selectablePreferences }) {
+    return selectedPreference || selectablePreferences[0]
+  },
+  travelModeOptionsFromMapConfig: (
+    _,
+    __,
+    ___,
+    rootGetters
+  ): string[] | undefined => {
+    return rootGetters.configuration?.routing?.selectableTravelModes
+  },
+  preferenceOptionsFromMapConfig: (
+    _,
+    __,
+    ___,
+    rootGetters
+  ): string[] | undefined => {
+    return rootGetters.configuration?.routing?.selectablePreferences
+  },
 }
 
 export default getters

packages/plugins/Routing/src/store/state.ts

@@ -2,9 +2,20 @@ import { RoutingState } from '../types'
 
 export const getInitialState = (): RoutingState => ({
   route: [],
-  travelMode: '',
-  displayPreferredRoute: false,
-  preferredRoute: '',
+  selectedTravelMode: '',
+  selectableTravelModes: [
+    { key: 'Car', localKey: 'common:plugins.routing.travelMode.car' },
+    { key: 'hdv', localKey: 'common:plugins.routing.travelMode.hdv' },
+    { key: 'bike', localKey: 'common:plugins.routing.travelMode.bike' },
+    { key: 'walking', localKey: 'common:plugins.routing.travelMode.walking' },
+    {
+      key: 'wheelchair',
+      localKey: 'common:plugins.routing.travelMode.wheelchair',
+    },
+  ],
+  displayPreference: false,
+  selectedPreference: '',
+  selectablePreferences: ['recommended', 'fastest', 'shortest'],
   displayRouteTypesToAvoid: false,
   serviceID: '',
   numberOfKeysToTriggerSearch: 3,

packages/plugins/Routing/src/types.ts

@@ -11,9 +11,11 @@ export interface FeatureIndexZip {
 
 export interface RoutingState {
   route: string[]
-  travelMode: string
-  displayPreferredRoute: boolean
-  preferredRoute: string
+  selectedTravelMode: string
+  selectableTravelModes: []
+  displayPreference: boolean
+  selectedPreference: string
+  selectablePreferences: string[]
   displayRouteTypesToAvoid: boolean
   serviceID: string
   numberOfKeysToTriggerSearch: number
@@ -29,6 +31,10 @@ export interface RoutingState {
 
 export interface RoutingGetters extends RoutingState {
   route: string[]
+  selectedTravelMode: string
+  selectedPreference: string
+  travelModeOptions: string[]
+  preferenceOptions: string[]
 }
 
 // TODO: entscheiden, ob ich das brauche