From 164b4f093375666e97e148cdcc4b9a581b3c42b5 Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 10:55:40 +0100 Subject: [PATCH 01/12] add custom gfi to bgw client --- packages/clients/bgw/gfi/ActionButton.vue | 29 ++++++++++ packages/clients/bgw/gfi/Content.vue | 65 +++++++++++++++++++++++ packages/clients/bgw/src/addPlugins.ts | 2 + 3 files changed, 96 insertions(+) create mode 100644 packages/clients/bgw/gfi/ActionButton.vue create mode 100644 packages/clients/bgw/gfi/Content.vue diff --git a/packages/clients/bgw/gfi/ActionButton.vue b/packages/clients/bgw/gfi/ActionButton.vue new file mode 100644 index 000000000..8023125c8 --- /dev/null +++ b/packages/clients/bgw/gfi/ActionButton.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/clients/bgw/gfi/Content.vue b/packages/clients/bgw/gfi/Content.vue new file mode 100644 index 000000000..f75fe2a22 --- /dev/null +++ b/packages/clients/bgw/gfi/Content.vue @@ -0,0 +1,65 @@ + + + diff --git a/packages/clients/bgw/src/addPlugins.ts b/packages/clients/bgw/src/addPlugins.ts index 73f5cff32..0dc0e4428 100644 --- a/packages/clients/bgw/src/addPlugins.ts +++ b/packages/clients/bgw/src/addPlugins.ts @@ -13,6 +13,7 @@ import Scale from '@polar/plugin-scale' import Toast from '@polar/plugin-toast' import Zoom from '@polar/plugin-zoom' import merge from 'lodash.merge' +import BgwGfiContent from '../gfi/Content.vue' import { badestellenSearchResult } from './utils/badestellenSearch' const defaultOptions = { @@ -42,6 +43,7 @@ export default (core) => { plugin: Gfi({ layers: {}, renderType: 'iconMenu', + gfiContentComponent: BgwGfiContent, activeLayerPath: 'plugin/layerChooser/activeMaskIds', coordinateSources: ['plugin/addressSearch/chosenAddress'], }), From 15c238a49a4e76ab6b13ac5edeb7ca6bea3cd407 Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 11:10:49 +0100 Subject: [PATCH 02/12] adjust mapconfig for custom gfi component --- packages/clients/bgw/src/mapConfiguration.ts | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/clients/bgw/src/mapConfiguration.ts b/packages/clients/bgw/src/mapConfiguration.ts index 142a84642..216f5f059 100644 --- a/packages/clients/bgw/src/mapConfiguration.ts +++ b/packages/clients/bgw/src/mapConfiguration.ts @@ -204,17 +204,6 @@ const mapConfig = { 14003: { window: true, geometry: false, - properties: { - bgw_name: 'Name', - fid: 'EU-IRD', - ort: 'Gemeinde', - bgw_kreis: 'Kreis', - bgw_gwkategory: 'Gewässerkategorie', - bgw_laenge: 'geographische Länge', - bgw_breite: 'geographische Breite', - bgw_laenge_bgw: 'Länge Uferlinie (m)', - bgw_umfeld: 'Umfeld (Infrastruktur)', - }, showTooltip: (feature) => feature.get('features').length > 1 ? [ From d851efa143da2a1f8e4b2ea1db88a7e93c2aad79 Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 11:29:59 +0100 Subject: [PATCH 03/12] make button more visible --- packages/clients/bgw/gfi/ActionButton.vue | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/clients/bgw/gfi/ActionButton.vue b/packages/clients/bgw/gfi/ActionButton.vue index 8023125c8..37d64000c 100644 --- a/packages/clients/bgw/gfi/ActionButton.vue +++ b/packages/clients/bgw/gfi/ActionButton.vue @@ -8,7 +8,6 @@ aria-label="Details der Badestelle" onmousedown="return false" > - fa-download Details der Badestelle @@ -27,3 +26,12 @@ export default Vue.extend({ }, }) + From 402d0714ecc7b864079459de9c8e5d4cd876bbd5 Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 11:53:14 +0100 Subject: [PATCH 04/12] add styling to gfi title --- packages/clients/bgw/gfi/Content.vue | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/clients/bgw/gfi/Content.vue b/packages/clients/bgw/gfi/Content.vue index f75fe2a22..22e9059b0 100644 --- a/packages/clients/bgw/gfi/Content.vue +++ b/packages/clients/bgw/gfi/Content.vue @@ -23,7 +23,6 @@ - @@ -52,6 +51,7 @@ export default Vue.extend({ computed: { ...mapGetters('plugin/gfi', ['currentProperties']), info(): Array { + console.warn(this.currentProperties) return this.infoFields.map(({ key, label }) => [ label, this.currentProperties[key], @@ -63,3 +63,11 @@ export default Vue.extend({ }, }) + + From 8b3b8602fc569cd93205d858855891f27252558e Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 12:14:12 +0100 Subject: [PATCH 05/12] align client structure with other clients --- packages/clients/bgw/src/addPlugins.ts | 2 +- packages/clients/bgw/{gfi => src/plugins/Gfi}/ActionButton.vue | 0 packages/clients/bgw/{gfi => src/plugins/Gfi}/Content.vue | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename packages/clients/bgw/{gfi => src/plugins/Gfi}/ActionButton.vue (100%) rename packages/clients/bgw/{gfi => src/plugins/Gfi}/Content.vue (100%) diff --git a/packages/clients/bgw/src/addPlugins.ts b/packages/clients/bgw/src/addPlugins.ts index 0dc0e4428..af9de95f5 100644 --- a/packages/clients/bgw/src/addPlugins.ts +++ b/packages/clients/bgw/src/addPlugins.ts @@ -13,7 +13,7 @@ import Scale from '@polar/plugin-scale' import Toast from '@polar/plugin-toast' import Zoom from '@polar/plugin-zoom' import merge from 'lodash.merge' -import BgwGfiContent from '../gfi/Content.vue' +import BgwGfiContent from './plugins/Gfi/Content.vue' import { badestellenSearchResult } from './utils/badestellenSearch' const defaultOptions = { diff --git a/packages/clients/bgw/gfi/ActionButton.vue b/packages/clients/bgw/src/plugins/Gfi/ActionButton.vue similarity index 100% rename from packages/clients/bgw/gfi/ActionButton.vue rename to packages/clients/bgw/src/plugins/Gfi/ActionButton.vue diff --git a/packages/clients/bgw/gfi/Content.vue b/packages/clients/bgw/src/plugins/Gfi/Content.vue similarity index 100% rename from packages/clients/bgw/gfi/Content.vue rename to packages/clients/bgw/src/plugins/Gfi/Content.vue From ebf93d0e4a88b90de22c157f7d95707c9e531492 Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 12:34:55 +0100 Subject: [PATCH 06/12] add locales keys for possible translation --- packages/clients/bgw/src/mapConfiguration.ts | 17 +++++++++++++++++ .../bgw/src/plugins/Gfi/ActionButton.vue | 6 +++--- .../clients/bgw/src/plugins/Gfi/Content.vue | 18 +++++++++--------- 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/packages/clients/bgw/src/mapConfiguration.ts b/packages/clients/bgw/src/mapConfiguration.ts index 216f5f059..a11d68324 100644 --- a/packages/clients/bgw/src/mapConfiguration.ts +++ b/packages/clients/bgw/src/mapConfiguration.ts @@ -45,6 +45,23 @@ const mapConfig = { }, }, }, + gfi: { + button: { + details: 'Details der Badestelle', + }, + infoLabels: { + fid: 'EU-IRD', + name: 'Name', + ort: 'Gemeinde', + bgw_kreis: 'Kreis', + bgw_kategory: 'Kategorie', + bgw_gwkategory: 'Gewässerkategorie', + bgw_laenge: 'geographische Länge', + bgw_breite: 'geographische Breite', + bgw_laenge_bgw: 'Länge Uferlinie (m)', + bgw_umfeld: 'Umfeld (m)', + }, + }, }, }, }, diff --git a/packages/clients/bgw/src/plugins/Gfi/ActionButton.vue b/packages/clients/bgw/src/plugins/Gfi/ActionButton.vue index 37d64000c..4452111c1 100644 --- a/packages/clients/bgw/src/plugins/Gfi/ActionButton.vue +++ b/packages/clients/bgw/src/plugins/Gfi/ActionButton.vue @@ -4,11 +4,11 @@ text :href="downloadLink" target="_blank" - title="Details der Badestelle" - aria-label="Details der Badestelle" + :title="$t('plugins.gfi.button.details')" + :aria-label="$t('plugins.gfi.button.details')" onmousedown="return false" > - Details der Badestelle + {{ $t('plugins.gfi.button.details') }} diff --git a/packages/clients/bgw/src/plugins/Gfi/Content.vue b/packages/clients/bgw/src/plugins/Gfi/Content.vue index 22e9059b0..e768b062c 100644 --- a/packages/clients/bgw/src/plugins/Gfi/Content.vue +++ b/packages/clients/bgw/src/plugins/Gfi/Content.vue @@ -18,7 +18,7 @@ - {{ item[0] }} + {{ $t(item[0]) }} {{ item[1] }} @@ -38,14 +38,14 @@ export default Vue.extend({ components: { ActionButton }, data: () => ({ infoFields: [ - { key: 'fid', label: 'EU-IRD' }, - { key: 'ort', label: 'Gemeinde' }, - { key: 'bgw_kreis', label: 'Kreis' }, - { key: 'bgw_gwkategory', label: 'Gewässerkategorie' }, - { key: 'bgw_laenge', label: 'geographische Länge' }, - { key: 'bgw_breite', label: 'geographische Breite' }, - { key: 'bgw_laenge_bgw', label: 'Länge Uferlinie (m)' }, - { key: 'bgw_umfeld', label: 'Umfeld (Infrastruktur)' }, + { key: 'fid', label: 'plugins.gfi.infoLabels.fid' }, + { key: 'ort', label: 'plugins.gfi.infoLabels.ort' }, + { key: 'bgw_kreis', label: 'plugins.gfi.infoLabels.bgw_kreis' }, + { key: 'bgw_gwkategory', label: 'plugins.gfi.infoLabels.bgw_gwkategory' }, + { key: 'bgw_laenge', label: 'plugins.gfi.infoLabels.bgw_laenge' }, + { key: 'bgw_breite', label: 'plugins.gfi.infoLabels.bgw_breite' }, + { key: 'bgw_laenge_bgw', label: 'plugins.gfi.infoLabels.bgw_laenge_bgw' }, + { key: 'bgw_umfeld', label: 'plugins.gfi.infoLabels.bgw_umfeld' }, ], }), computed: { From 054b9d2b7d3442f090b377ec04c6afb24ccd7c7a Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 12:54:43 +0100 Subject: [PATCH 07/12] make infoFields configurable --- packages/clients/bgw/src/mapConfiguration.ts | 16 ++++++++++++++++ packages/clients/bgw/src/plugins/Gfi/Content.vue | 16 +++++----------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/clients/bgw/src/mapConfiguration.ts b/packages/clients/bgw/src/mapConfiguration.ts index a11d68324..4f02ce5cd 100644 --- a/packages/clients/bgw/src/mapConfiguration.ts +++ b/packages/clients/bgw/src/mapConfiguration.ts @@ -233,6 +233,22 @@ const mapConfig = { ], }, }, + infoFields: [ + { key: 'fid', label: 'plugins.gfi.infoLabels.fid' }, + { key: 'ort', label: 'plugins.gfi.infoLabels.ort' }, + { key: 'bgw_kreis', label: 'plugins.gfi.infoLabels.bgw_kreis' }, + { + key: 'bgw_gwkategory', + label: 'plugins.gfi.infoLabels.bgw_gwkategory', + }, + { key: 'bgw_laenge', label: 'plugins.gfi.infoLabels.bgw_laenge' }, + { key: 'bgw_breite', label: 'plugins.gfi.infoLabels.bgw_breite' }, + { + key: 'bgw_laenge_bgw', + label: 'plugins.gfi.infoLabels.bgw_laenge_bgw', + }, + { key: 'bgw_umfeld', label: 'plugins.gfi.infoLabels.bgw_umfeld' }, + ], }, featureStyles: './style.json', } diff --git a/packages/clients/bgw/src/plugins/Gfi/Content.vue b/packages/clients/bgw/src/plugins/Gfi/Content.vue index e768b062c..5cfc4e92c 100644 --- a/packages/clients/bgw/src/plugins/Gfi/Content.vue +++ b/packages/clients/bgw/src/plugins/Gfi/Content.vue @@ -37,27 +37,21 @@ export default Vue.extend({ name: 'BgwGfiContent', components: { ActionButton }, data: () => ({ - infoFields: [ - { key: 'fid', label: 'plugins.gfi.infoLabels.fid' }, - { key: 'ort', label: 'plugins.gfi.infoLabels.ort' }, - { key: 'bgw_kreis', label: 'plugins.gfi.infoLabels.bgw_kreis' }, - { key: 'bgw_gwkategory', label: 'plugins.gfi.infoLabels.bgw_gwkategory' }, - { key: 'bgw_laenge', label: 'plugins.gfi.infoLabels.bgw_laenge' }, - { key: 'bgw_breite', label: 'plugins.gfi.infoLabels.bgw_breite' }, - { key: 'bgw_laenge_bgw', label: 'plugins.gfi.infoLabels.bgw_laenge_bgw' }, - { key: 'bgw_umfeld', label: 'plugins.gfi.infoLabels.bgw_umfeld' }, - ], + infoFields: [], }), computed: { + ...mapGetters(['map', 'configuration']), ...mapGetters('plugin/gfi', ['currentProperties']), info(): Array { - console.warn(this.currentProperties) return this.infoFields.map(({ key, label }) => [ label, this.currentProperties[key], ]) }, }, + mounted() { + this.infoFields = this.configuration.gfi.infoFields + }, methods: { ...mapActions('plugin/gfi', ['close']), }, From 744f547c376a24d143b6cd8c89e2430c9e01e651 Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 14:31:16 +0100 Subject: [PATCH 08/12] add documentation for custom gfi config --- packages/clients/bgw/README.md | 21 ++++++++++++++++++++ packages/clients/bgw/src/mapConfiguration.ts | 1 + 2 files changed, 22 insertions(+) diff --git a/packages/clients/bgw/README.md b/packages/clients/bgw/README.md index 8d65999fc..bc1a751ba 100644 --- a/packages/clients/bgw/README.md +++ b/packages/clients/bgw/README.md @@ -9,3 +9,24 @@ Please see the `CHANGELOG.md` for all changes after the initial release. ## Usage Usage as a HTML page is simply offered by hosting the client package with the included .html file. + +## Client specific gfi configuration + +| 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`. | + +### Example configuration: + +```js +infoFields: [ + { key: 'fid', label: 'Id' }, + { key: 'ort', label: 'Ort' }, + { key: 'bgw_kreis', label: 'Kreis' }, + { key: 'bgw_gwkategory', label: 'Kategorie' }, + { key: 'bgw_laenge', label: 'geographische Länge' }, + { key: 'bgw_breite', label: 'geographische Breite' }, + { key: 'bgw_laenge_bgw', label: 'Länge Uferlinie (m)'}, + { key: 'bgw_umfeld', label: 'Umfeld (m)' }, +], +``` \ No newline at end of file diff --git a/packages/clients/bgw/src/mapConfiguration.ts b/packages/clients/bgw/src/mapConfiguration.ts index 4f02ce5cd..e3c9e029a 100644 --- a/packages/clients/bgw/src/mapConfiguration.ts +++ b/packages/clients/bgw/src/mapConfiguration.ts @@ -233,6 +233,7 @@ const mapConfig = { ], }, }, + // client specific gfi configuration. See Readme for more information infoFields: [ { key: 'fid', label: 'plugins.gfi.infoLabels.fid' }, { key: 'ort', label: 'plugins.gfi.infoLabels.ort' }, From 5a1beb4014bd1b7d56a621e525d8640aa64b4d9e Mon Sep 17 00:00:00 2001 From: bruehlca Date: Mon, 24 Feb 2025 14:43:40 +0100 Subject: [PATCH 09/12] prevent empty gfi --- packages/clients/bgw/src/plugins/Gfi/Content.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/clients/bgw/src/plugins/Gfi/Content.vue b/packages/clients/bgw/src/plugins/Gfi/Content.vue index 5cfc4e92c..15df8cc71 100644 --- a/packages/clients/bgw/src/plugins/Gfi/Content.vue +++ b/packages/clients/bgw/src/plugins/Gfi/Content.vue @@ -1,5 +1,8 @@