Skip to content

Commit e960ad2

Browse files
jedi-of-the-seajedi-of-the-sea
authored
Merge pull request #248 from Dataport/feature/add-download-button-in-bgw-gfi
Feature/add download button in bgw gfi
2 parents 46439af + 4ad15f4 commit e960ad2

File tree

5 files changed

+165
-11
lines changed

5 files changed

+165
-11
lines changed

‎packages/clients/bgw/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,24 @@ Please see the `CHANGELOG.md` for all changes after the initial release.
99
## Usage
1010

1111
Usage as a HTML page is simply offered by hosting the client package with the included .html file.
12+
13+
## Client specific gfi configuration
14+
15+
| fieldName | type | description |
16+
| - | - | - |
17+
| 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`. |
18+
19+
### Example configuration:
20+
21+
```js
22+
infoFields: [
23+
{ key: 'fid', label: 'Id' },
24+
{ key: 'ort', label: 'Ort' },
25+
{ key: 'bgw_kreis', label: 'Kreis' },
26+
{ key: 'bgw_gwkategory', label: 'Kategorie' },
27+
{ key: 'bgw_laenge', label: 'geographische Länge' },
28+
{ key: 'bgw_breite', label: 'geographische Breite' },
29+
{ key: 'bgw_laenge_bgw', label: 'Länge Uferlinie (m)'},
30+
{ key: 'bgw_umfeld', label: 'Umfeld (m)' },
31+
],
32+
```

‎packages/clients/bgw/src/addPlugins.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Scale from '@polar/plugin-scale'
1313
import Toast from '@polar/plugin-toast'
1414
import Zoom from '@polar/plugin-zoom'
1515
import merge from 'lodash.merge'
16+
import BgwGfiContent from './plugins/Gfi/Content.vue'
1617
import {
1718
badestellenSearch,
1819
badestellenSearchResult,
@@ -45,6 +46,7 @@ export default (core) => {
4546
plugin: Gfi({
4647
layers: {},
4748
renderType: 'iconMenu',
49+
gfiContentComponent: BgwGfiContent,
4850
activeLayerPath: 'plugin/layerChooser/activeMaskIds',
4951
coordinateSources: ['plugin/addressSearch/chosenAddress'],
5052
}),

‎packages/clients/bgw/src/mapConfiguration.ts‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,23 @@ const mapConfig = {
4545
},
4646
},
4747
},
48+
gfi: {
49+
button: {
50+
details: 'Details der Badestelle',
51+
},
52+
infoLabels: {
53+
fid: 'EU-IRD',
54+
name: 'Name',
55+
ort: 'Gemeinde',
56+
bgw_kreis: 'Kreis',
57+
bgw_kategory: 'Kategorie',
58+
bgw_gwkategory: 'Gewässerkategorie',
59+
bgw_laenge: 'geographische Länge',
60+
bgw_breite: 'geographische Breite',
61+
bgw_laenge_bgw: 'Länge Uferlinie (m)',
62+
bgw_umfeld: 'Umfeld (m)',
63+
},
64+
},
4865
},
4966
},
5067
},
@@ -204,17 +221,6 @@ const mapConfig = {
204221
14003: {
205222
window: true,
206223
geometry: false,
207-
properties: {
208-
bgw_name: 'Name',
209-
fid: 'EU-IRD',
210-
ort: 'Gemeinde',
211-
bgw_kreis: 'Kreis',
212-
bgw_gwkategory: 'Gewässerkategorie',
213-
bgw_laenge: 'geographische Länge',
214-
bgw_breite: 'geographische Breite',
215-
bgw_laenge_bgw: 'Länge Uferlinie (m)',
216-
bgw_umfeld: 'Umfeld (Infrastruktur)',
217-
},
218224
showTooltip: (feature) =>
219225
feature.get('features').length > 1
220226
? [
@@ -227,6 +233,23 @@ const mapConfig = {
227233
],
228234
},
229235
},
236+
// client specific gfi configuration. See Readme for more information
237+
infoFields: [
238+
{ key: 'fid', label: 'plugins.gfi.infoLabels.fid' },
239+
{ key: 'ort', label: 'plugins.gfi.infoLabels.ort' },
240+
{ key: 'bgw_kreis', label: 'plugins.gfi.infoLabels.bgw_kreis' },
241+
{
242+
key: 'bgw_gwkategory',
243+
label: 'plugins.gfi.infoLabels.bgw_gwkategory',
244+
},
245+
{ key: 'bgw_laenge', label: 'plugins.gfi.infoLabels.bgw_laenge' },
246+
{ key: 'bgw_breite', label: 'plugins.gfi.infoLabels.bgw_breite' },
247+
{
248+
key: 'bgw_laenge_bgw',
249+
label: 'plugins.gfi.infoLabels.bgw_laenge_bgw',
250+
},
251+
{ key: 'bgw_umfeld', label: 'plugins.gfi.infoLabels.bgw_umfeld' },
252+
],
230253
},
231254
featureStyles: './style.json',
232255
}

‎packages/clients/bgw/src/plugins/Gfi/ActionButton.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<v-btn
3+
class="text-none bgw-link-button"
4+
text
5+
:href="link"
6+
target="_blank"
7+
:title="$t('plugins.gfi.button.details')"
8+
:aria-label="$t('plugins.gfi.button.details')"
9+
onmousedown="return false"
10+
>
11+
{{ $t('plugins.gfi.button.details') }}
12+
</v-btn>
13+
</template>
14+
15+
<script lang="ts">
16+
import Vue from 'vue'
17+
import { mapGetters } from 'vuex'
18+
19+
export default Vue.extend({
20+
name: 'ActionButton',
21+
computed: {
22+
...mapGetters('plugin/gfi', ['currentProperties']),
23+
link() {
24+
return `https://www.schleswig-holstein.de/DE/fachinhalte/B/badegewaesser/DarstellungBadestelle.html#bgst=${this.currentProperties.fid}`
25+
},
26+
},
27+
})
28+
</script>
29+
<style lang="scss" scoped>
30+
.bgw-link-button {
31+
margin-right: 0.4em;
32+
margin-top: 0.5em;
33+
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
34+
0 1px 10px 0 rgba(0, 0, 0, 0.12);
35+
border: 3px solid transparent;
36+
}
37+
</style>

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<v-card
3+
v-if="infoFields.length > 0 && currentProperties"
4+
class="bgw-gfi-content"
5+
>
6+
<v-card-actions v-if="!hasWindowSize || !hasSmallWidth">
7+
<v-spacer></v-spacer>
8+
<v-btn
9+
icon
10+
small
11+
:aria-label="$t('plugins.gfi.header.close')"
12+
@click="close(true)"
13+
>
14+
<v-icon small>fa-xmark</v-icon>
15+
</v-btn>
16+
</v-card-actions>
17+
<v-card-title class="bgw-gfi-title">
18+
{{ currentProperties.bgw_name }}
19+
</v-card-title>
20+
<v-card-text>
21+
<v-simple-table dense>
22+
<tbody>
23+
<tr v-for="item in info" :key="item[0]">
24+
<td>{{ $t(item[0]) }}</td>
25+
<td>{{ item[1] }}</td>
26+
</tr>
27+
</tbody>
28+
</v-simple-table>
29+
<ActionButton></ActionButton>
30+
</v-card-text>
31+
</v-card>
32+
</template>
33+
34+
<script lang="ts">
35+
import Vue from 'vue'
36+
import { mapActions, mapGetters } from 'vuex'
37+
import ActionButton from './ActionButton.vue'
38+
39+
export default Vue.extend({
40+
name: 'BgwGfiContent',
41+
components: { ActionButton },
42+
data: () => ({
43+
infoFields: [],
44+
}),
45+
computed: {
46+
...mapGetters(['map', 'configuration']),
47+
...mapGetters('plugin/gfi', ['currentProperties']),
48+
...mapGetters(['hasSmallWidth', 'hasWindowSize']),
49+
info(): Array<string[]> {
50+
return this.infoFields.map(({ key, label }) => [
51+
label,
52+
this.currentProperties[key],
53+
])
54+
},
55+
},
56+
mounted() {
57+
this.infoFields = this.configuration.gfi.infoFields
58+
},
59+
methods: {
60+
...mapActions('plugin/gfi', ['close']),
61+
},
62+
})
63+
</script>
64+
65+
<style lang="scss" scoped>
66+
.bgw-gfi-title {
67+
word-break: break-word;
68+
font-size: medium;
69+
font-weight: bold;
70+
}
71+
</style>

0 commit comments

Comments
 (0)