Merge pull request #250 from Dataport/feature/highlight-expansion-by-…

…clicking-on-bathing-area

Feature/highlight expansion by clicking on bathing area

package.json

@@ -44,7 +44,6 @@
     "pages:build:serve": "http-server pages -o index.html",
     "clean": "nx reset && rimraf --glob packages/**/{.cache,dist,docs} && rimraf --glob {.cache,dist} && node ./scripts/clean",
     "docs:afm": "tsx ./scripts/makeDocs afm",
-    "docs:bgw": "tsx ./scripts/makeDocs bgw",
     "docs:diplan": "npm run diplan:build && cp -r ./packages/clients/diplan/dist ./packages/clients/diplan/example ./packages/clients/diplan/docs",
     "docs:generic": "tsx ./scripts/makeDocs generic",
     "docs:meldemichel": "tsx ./scripts/makeDocs meldemichel && npm run meldemichel:build && cp -r ./packages/clients/meldemichel/dist ./packages/clients/meldemichel/example ./packages/clients/meldemichel/docs",

packages/clients/bgw/README.md

@@ -15,6 +15,7 @@ Usage as a HTML page is simply offered by hosting the client package with the in
 | fieldName | type | description |
 | - | - | - |
 | infoFields | object[] | Array of key-label pair objects. The property of the feature that should be displayed has to be set as `key`. The description of this property has to be set as `label`. |
+| highlightStyleBadestraende | highlightStyleBadestraende? | Highlight style for the layer 'Badestraende'. |
 
 ### Example configuration:
 
@@ -29,4 +30,21 @@ infoFields: [
   { key: 'bgw_laenge_bgw', label: 'Länge Uferlinie (m)'},
   { key: 'bgw_umfeld', label: 'Umfeld (m)' },
 ],
+highlightStyleBadestraende: {
+  stroke: { color: '#FF4500', width: 10 },
+}
+```
+
+### gfi.highlightStyleBadestraende
+
+| fieldName | type | description |
+| - | - | - |
+| stroke | stroke | Stroke style for the layer 'Badestraende'. Please see example below for styling options. |
+
+####  Example configuration:
+
+```js
+highlightStyleBadestraende: {
+  stroke: { color: '#FF4500', width: 10 },
+}
 ```

packages/clients/bgw/package.json

@@ -14,7 +14,6 @@
   },
   "files": [
     "dist/**/**.*",
-    "docs/**/**.*",
     "CHANGELOG.md",
     "README.md"
   ],
@@ -45,6 +44,7 @@
     "@repositoryname/vuex-generators": "^1.1.2",
     "vue": "^2.x",
     "vuex": "^3.x",
+    "ol": "^10.3.1",
     "lodash.merge": "^4.6.2"
   },
   "nx": {

packages/clients/bgw/src/mapConfiguration.ts

@@ -250,6 +250,9 @@ const mapConfig = {
       },
       { key: 'bgw_umfeld', label: 'plugins.gfi.infoLabels.bgw_umfeld' },
     ],
+    highlightStyleBadestraende: {
+      stroke: { color: '#FF4500', width: 10 },
+    },
   },
   featureStyles: './style.json',
 }

packages/clients/bgw/src/plugins/Gfi/Content.vue

@@ -1,8 +1,5 @@
 <template>
-  <v-card
-    v-if="infoFields.length > 0 && currentProperties"
-    class="bgw-gfi-content"
-  >
+  <v-card v-if="info.length > 0 && currentProperties" class="bgw-gfi-content">
     <v-card-actions v-if="!hasWindowSize || !hasSmallWidth">
       <v-spacer></v-spacer>
       <v-btn
@@ -39,22 +36,16 @@ import ActionButton from './ActionButton.vue'
 export default Vue.extend({
   name: 'BgwGfiContent',
   components: { ActionButton },
-  data: () => ({
-    infoFields: [],
-  }),
   computed: {
-    ...mapGetters(['map', 'configuration']),
+    ...mapGetters([
+      'map',
+      'configuration',
+      'selected',
+      'hasSmallWidth',
+      'hasWindowSize',
+    ]),
     ...mapGetters('plugin/gfi', ['currentProperties']),
-    ...mapGetters(['hasSmallWidth', 'hasWindowSize']),
-    info(): Array<string[]> {
-      return this.infoFields.map(({ key, label }) => [
-        label,
-        this.currentProperties[key],
-      ])
-    },
-  },
-  mounted() {
-    this.infoFields = this.configuration.gfi.infoFields
+    ...mapGetters('bgw', ['info']),
   },
   methods: {
     ...mapActions('plugin/gfi', ['close']),

packages/clients/bgw/src/polar-client.ts

@@ -3,6 +3,7 @@ import packageInfo from '../package.json'
 import addPlugins from './addPlugins'
 import services from './services'
 import mapConfiguration from './mapConfiguration'
+import bgwModule from './store/module'
 
 // eslint-disable-next-line no-console
 console.info(`@polar/client-bgw: running in v${packageInfo.version}.`)
@@ -13,13 +14,16 @@ addPlugins(client)
 async function initializeClient() {
   client.rawLayerList.initializeLayerList(services)
 
-  await client.createMap({
+  const clientInstance = await client.createMap({
     containerId,
     mapConfiguration: {
       ...mapConfiguration,
       layerConf: services,
     },
   })
+
+  clientInstance.$store.registerModule('bgw', bgwModule)
+  clientInstance.$store.dispatch('bgw/setupModule')
 }
 
 initializeClient()

packages/clients/bgw/src/store/module.ts

@@ -0,0 +1,66 @@
+import { PolarModule } from '@polar/lib-custom-types'
+import { Stroke, Style } from 'ol/style'
+
+interface BgwGetters {
+  info: string[][]
+  highlightStyle: Style
+}
+
+/*
+ * BGW VueX Store Module
+ */
+const bgwModule: PolarModule<Record<string, never>, BgwGetters> = {
+  namespaced: true,
+  state: {},
+  actions: {
+    setupModule({ rootGetters, dispatch }) {
+      this.watch(
+        () => rootGetters['plugin/gfi/currentProperties'],
+        () => dispatch('updateFeatures'),
+        { deep: true }
+      )
+    },
+    // handles style side effects
+    updateFeatures({ rootGetters, getters }) {
+      const currentProperties = rootGetters['plugin/gfi/currentProperties']
+
+      const features = rootGetters.map
+        .getLayers()
+        .getArray()
+        .find((layer) => layer.get('id') === '14001')
+        // @ts-expect-error | it exists on its deviations
+        ?.getSource()
+        .getFeatures()
+
+      features.forEach((feature) =>
+        feature.setStyle(
+          feature.get('BATHINGWAT') === currentProperties.fid
+            ? getters.highlightStyle
+            : undefined
+        )
+      )
+    },
+  },
+  mutations: {},
+  getters: {
+    info(_, __, ___, rootGetters) {
+      // @ts-expect-error | local piggyback
+      return (rootGetters.configuration.gfi?.infoFields || []).map(
+        ({ key, label }) => [
+          label,
+          rootGetters['plugin/gfi/currentProperties'][key],
+        ]
+      )
+    },
+    highlightStyle(_, __, ___, rootGetters) {
+      return new Style({
+        stroke: new Stroke(
+          // @ts-expect-error | local piggyback
+          rootGetters.configuration.gfi?.highlightStyleBadestraende.stroke
+        ),
+      })
+    },
+  },
+}
+
+export default bgwModule

scripts/buildPages.sh

@@ -1,4 +1,4 @@
-array=( afm bgw diplan generic meldemichel snowbox textLocator )
+array=( afm diplan generic meldemichel snowbox textLocator )
 for i in "${array[@]}"
 do
   echo "Building $i docs ..."