cleanup and tsDoc comments

Author: datKaMa

package-lock.json

@@ -16,7 +16,7 @@ import ReverseGeocoder from '@polar/plugin-reverse-geocoder'
 import Scale from '@polar/plugin-scale'
 import Toast from '@polar/plugin-toast'
 import Zoom from '@polar/plugin-zoom'
-import Routing from '@polar/plugin-routing'
+import Routing from '../../../plugins/Routing'
 
 const defaultOptions = {
   displayComponent: true,

packages/clients/snowbox/src/addPlugins.ts

@@ -274,7 +274,7 @@ export const mapConfiguration = {
     selectablePreferences: [],
     displayPreferences: true,
     displayRouteTypesToAvoid: true,
-    style: {
+    routeStyle: {
       stroke: {
         color: '#e51313',
         width: 6,

packages/clients/snowbox/src/mapConfiguration.ts

@@ -17,10 +17,10 @@ This module has been written for the "BKG-Routing-Service" and uses the "Adresss
 |selectable Preferences|string[]|Specifies which preferences for the route are offered to the user.|
 |displayPreferences|bolean|Defines wether the preferences for the route are offered to the user for selection.|
 |displayRouteTypesToAvoid|boolean|Defines wether route types to avoid are offered to the user for selection.|
-|style|||
-|style.stroke|||
-|style.color|||
-|style.width|||
+|routeStyle|||
+|routeStyle.stroke|||
+|routeStyle.color|||
+|routeStyle.width|||
 |addressSearch|||
 |addressSearch.addLoading|||
 |addressSearch.removeLoading|||

packages/plugins/Routing/README.md

@@ -107,6 +107,7 @@
         <template #activator="{ on }">
           <div v-on="on">
             <v-btn
+              class="sendButton"
               :aria-label="$t('common:plugins.routing.sendRequestButton')"
               :disabled="areFieldsMissing"
               @click="sendRequest"
@@ -420,6 +421,7 @@ export default Vue.extend({
   align-items: center;
   padding-left: 20px;
   padding-right: 20px;
+  padding-bottom: 20px;
 }
 .align-center {
   text-align: center;
@@ -442,6 +444,9 @@ export default Vue.extend({
   gap: 20px;
   justify-content: space-evenly;
 }
+.sendButton {
+  margin-bottom: 20px;
+}
 .details-container {
   max-height: 300px;
   overflow-y: auto; /* enables scrolling */

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

@@ -4,6 +4,16 @@ import { makeStoreModule } from './store'
 import { Routing } from './components'
 import language from './language'
 
+/**
+ * A function that dispatches an action to add the routing component to the Vuex store.
+ *
+ * This function returns another function that accepts a Vue instance. It dispatches the
+ * 'addComponent' action to the store with relevant configuration options such as the
+ * routing plugin, language, and the store module.
+ *
+ * @param options - Configuration options for the routing setup, including language and other routing-related settings.
+ * @returns A function that accepts a Vue instance and dispatches the 'addComponent' action to the Vuex store.
+ */
 export default (options: RoutingConfiguration) => (instance: Vue) => {
   return instance.$store.dispatch('addComponent', {
     name: 'routing',

packages/plugins/Routing/src/index.ts

@@ -25,6 +25,22 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
    * @param contextState - VueX state object.
    */
   initializeTool({ rootGetters: { map, configuration }, commit, state }) {
+    /* setup drawLayer and click event listener */
+
+    drawLayer = createDrawLayer(drawSource)
+    map?.addLayer(drawLayer)
+    map?.on('click', function (event) {
+      const clickCoordinate = event.coordinate
+      if (state.start.length === 0) {
+        commit('setStart', clickCoordinate)
+      } else if (
+        state.end.length === 0 &&
+        !state.start.every((v, i) => v === clickCoordinate[i]) // end Coordinate should not be the same as start Coordinate
+      ) {
+        commit('setEnd', clickCoordinate)
+      }
+    })
+
     /* update state with configuration settings */
 
     if (configuration?.routing?.selectableTravelModes.length > 0) {
@@ -44,22 +60,6 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
       'setDisplayRouteTypesToAvoid',
       configuration?.routing?.displayRouteTypesToAvoid
     )
-
-    /* setup drawLayer and click event listener */
-
-    drawLayer = createDrawLayer(drawSource)
-    map?.addLayer(drawLayer)
-    map?.on('click', function (event) {
-      const clickCoordinate = event.coordinate
-      if (state.start.length === 0) {
-        commit('setStart', clickCoordinate)
-      } else if (
-        state.end.length === 0 &&
-        !state.start.every((v, i) => v === clickCoordinate[i]) // end Coordinate should not be the same as start Coordinate
-      ) {
-        commit('setEnd', clickCoordinate)
-      }
-    })
   },
 
   /* ROUTING REQUEST */
@@ -416,7 +416,7 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
    */
   drawRoute({ rootGetters: { configuration }, state }) {
     const transformedCoordinates =
-      state.searchResponseData.features[0].geometry.coordinates.map(
+      state.searchResponseData?.features[0].geometry.coordinates.map(
         (coordinate) => transform(coordinate, 'EPSG:4326', 'EPSG:25832')
       )
     const routeLineString = new LineString(transformedCoordinates)
@@ -426,8 +426,8 @@ const actions: PolarActionTree<RoutingState, RoutingGetters> = {
     })
     routeFeature.setStyle(
       createDrawStyle(
-        configuration?.routing?.style?.stroke?.color,
-        configuration?.routing?.style
+        configuration?.routing?.routeStyle?.stroke?.color,
+        configuration?.routing?.routeStyle
       )
     )
     drawSource.addFeature(routeFeature)

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

@@ -1,6 +1,14 @@
 import { generateSimpleGetters } from '@repositoryname/vuex-generators'
 import { getInitialState } from './state'
 
+/**
+ * Defines Vuex getters for the routing module.
+ *
+ * - Includes automatically generated simple getters based on the initial state.
+ * - Provides a custom getter 'renderType', which retrieves the 'renderType'
+ *   from the 'configuration.routing' state in the root Vuex store.
+ *   If not defined, it defaults to 'independent'.
+ */
 const getters = {
   ...generateSimpleGetters(getInitialState()),
   renderType: (_, __, ___, rootGetters) => {

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

@@ -5,6 +5,13 @@ import actions from './actions'
 import getters from './getters'
 import mutations from './mutations'
 
+/**
+ * Creates and returns a Vuex store module with namespacing enabled.
+ *
+ * The module is initialized with a predefined state, actions, getters, and mutations.
+ *
+ * @returns A Vuex store module configured with state, actions, getters, and mutations.
+ */
 export const makeStoreModule = () => {
   const storeModule: PolarModule<RoutingState, RoutingGetters> = {
     namespaced: true,

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

@@ -5,6 +5,12 @@ import createTestMountParameters, {
 import { Routing } from '../components/index'
 import { makeStoreModule } from '../store/index'
 
+/**
+ * Test suite for the 'plugin-routing' module.
+ *
+ * This suite includes tests for the Vue component integration and the store functionality
+ * within the 'plugin-routing' module.
+ */
 describe('plugin-routing', () => {
   let testParameters: MockParameters
 
@@ -17,6 +23,9 @@ describe('plugin-routing', () => {
     )
   })
 
+  /**
+   * Test suite for components within the 'plugin-routing' module.
+   */
   describe('components', () => {
     it('should define all elements', () => {
       const wrapper = mount(Routing, { ...testParameters }) // hier wird das mounten des Routing components vorgetäuscht