Skip to content

Commit 9b4f20b

Browse files
IoannaMiIoannaMi
committed
Merge pull request #89 from openearth/update-brl-with-water-system-config
Update brl with water system config
2 parents bfe596e + c2ccc73 commit 9b4f20b

File tree

12 files changed

+502
-246
lines changed

12 files changed

+502
-246
lines changed

‎public/data/brl.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"id": "brl",
3-
"name": "Grondwater effecten Rivierbodem",
4-
"title": "Krijg inzicht in de effecten van ingrepen in het grondwatersysteem van de grote rivieren met Landelijk Hydrologisch Model",
5-
"description": "Deze tool maakt het mogelijk de effecten op de grondwaterstand middels ingrepen in diverse systemen van het grondwatermodel LHM4.2 te simuleren. Er zijn simulaties mogelijk, waaronder simuleren van ingrepen in de waterbodem (hoofdwater), effecten van een onttrekkig en de effecten van een ingreep in de waterbodem van de rivierbodem. Voor deze effectbepaling wordt gebruikt gemaakt van versie 4.2 van het LHM.",
6-
"introduction": "<p>Deze tool maakt het mogelijk de effecten op de grondwaterstand middels ingrepen in diverse systemen van het grondwatermodel LHM4.2 te simuleren. Er zijn simulaties mogelijk, waaronder simuleren van ingrepen in de waterbodem (hoofdwater), effecten van een onttrekkig en de effecten van een ingreep in de waterbodem van de rivierbodem. Voor deze effectbepaling wordt gebruikt gemaakt van versie 4.2 van het LHM.</p><p>Van een gebruiker wordt verwacht dat deze één of meerdere polygonen rondom een riviervak tekent en per polygoon 1 of meerdere ingrepen opgeeft.</p><p>De opgegeven ingrepen worden allemaal doorgevoerd.</p>",
3+
"name": "Effecten op grondwater van maatregelen in het watersysteem",
4+
"title": "Verkrijg inzicht in de effecten van ingrepen in het grondwatersysteem van het watersysteem van het Landelijk Hydrologisch Model",
5+
"description": "Deze tool maakt het mogelijk de effecten op de grondwaterstand middels ingrepen in diverse watersystemen (hoofd, primair, secundair en tertiair) van het grondwatermodel LHM4.2 te simuleren. Er zijn simulaties mogelijk, waaronder simuleren van ingrepen in de waterbodem van bijvoorbeeld hoofdwatersysteem (de grote rivieren en kanalen in beheer bij RWS). Voor deze effectbepaling wordt gebruikt gemaakt van versie 4.2 van het LHM.",
6+
"introduction": "<p>Deze tool maakt het mogelijk de effecten op de grondwaterstand middels ingrepen in diverse watersystemen (hoofd, primair, secundair en tertiair) van het grondwatermodel LHM4.2 te simuleren. Er zijn simulaties mogelijk, waaronder simuleren van ingrepen in de waterbodem van bijvoorbeeld hoofdwatersysteem (de grote rivieren en kanalen in beheer bij RWS). Voor deze effectbepaling wordt gebruikt gemaakt van versie 4.2 van het LHM.</p><p>Van een gebruiker wordt verwacht dat er één of meerdere polygonen worden getekend en dat per polygoon en per watersysteem (hoofd, primair, secundair en tertiair) een maatregel wordt opgegeven. De gebruiker dient tevens voor iedere polygoon en voor ieder systeem het verschil in peil, bodemhoogte en conductance op te geven.</p>",
77
"steps": [
88
{
99
"title": "Selecteren",

‎src/components/configuration-form.vue

+116-56
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,82 @@
11
<template>
22
<v-form v-model="valid" class="configuration-form border">
3-
<v-row no-gutters>
4-
<v-col cols="12" sm="5">
3+
<v-row
4+
no-gutters
5+
v-for="level in Object.keys(formData)"
6+
:key="level"
7+
:class="formData[level].enabled ? 'active' : 'inactive'"
8+
>
9+
<v-col cols="12" sm="1">
510
<v-card
6-
class="pa-2 full-height d-flex"
7-
outlined
8-
tile
11+
class="full-height d-flex align-center justify-center"
12+
outlined
13+
tile
914
>
10-
<v-select
11-
v-model="formData.measure"
12-
class="hide-label"
13-
label="Onttrekking toepassen in laag"
14-
:items="measures"
15-
:disabled="disabled"
15+
<v-checkbox
16+
v-model="formData[level].enabled"
17+
hide-details
18+
class="hide-label checkbox align-center"
19+
label="Plaatsing"
20+
:disabled="disabled"
1621
/>
1722
</v-card>
1823
</v-col>
1924
<v-col cols="12" sm="3">
20-
<text-field-measure
21-
:key="formData.measure"
22-
:differenceRules="differenceRules"
23-
:disabled="disabled"
24-
@update-difference-value="onUpdateDifferenceValue" />
25+
<v-card
26+
class=" full-height d-flex align-center"
27+
outlined
28+
tile
29+
>
30+
<span class="pl-2">
31+
{{ levels[level] }}
32+
</span>
33+
</v-card>
2534
</v-col>
26-
<v-col cols="12" sm="3">
35+
<v-col
36+
cols="12"
37+
sm="4"
38+
>
2739
<v-card
28-
class="pa-2 full-height d-flex"
29-
outlined
30-
tile
40+
class="pa-2 full-height d-flex"
41+
outlined
42+
tile
3143
>
3244
<v-select
33-
v-model="formData.calculationLayer"
34-
class="hide-label"
35-
label="Onttrekking toepassen in laag"
36-
:items="calculationLayers.map((l) => ({ text: `Layer ${l}`, value: l }))"
37-
:disabled="disabled"
45+
v-model="formData[level].measure"
46+
class="hide-label"
47+
label="Onttrekking toepassen in laag"
48+
:items="measures"
49+
:disabled="disabled"
3850
/>
3951
</v-card>
4052
</v-col>
41-
<v-col cols="12" sm="1">
42-
<div
43-
v-if="deletable"
44-
class="d-flex justify-end align-center full-height"
53+
<v-col
54+
cols="12"
55+
sm="2"
56+
>
57+
<text-field-measure
58+
v-model="formData[level].difference"
59+
:differenceRules="differenceRules"
60+
:disabled="disabled"
61+
/>
62+
</v-col>
63+
<v-col
64+
cols="12"
65+
sm="2"
66+
>
67+
<v-card
68+
class="pa-2 full-height d-flex"
69+
outlined
70+
tile
4571
>
46-
<v-btn
47-
icon
48-
@click="handleDelete"
49-
title="delete form"
50-
>
51-
<v-icon>mdi-delete</v-icon>
52-
</v-btn>
53-
</div>
72+
<v-select
73+
v-model="formData[level].calculationLayer"
74+
class="hide-label"
75+
label="Onttrekking toepassen in laag"
76+
:items="calculationLayers.map((l) => ({ text: l, value: l }))"
77+
:disabled="disabled"
78+
/>
79+
</v-card>
5480
</v-col>
5581
</v-row>
5682
</v-form>
@@ -60,9 +86,9 @@
6086
import TextFieldMeasure from '@/components/text-field-measure';
6187
6288
export default {
63-
components: {
89+
components: {
6490
TextFieldMeasure,
65-
91+
6692
},
6793
props: {
6894
id: {
@@ -77,6 +103,11 @@
77103
type: Object,
78104
required: true,
79105
},
106+
type: {
107+
type: String,
108+
required: false,
109+
default: 'default',
110+
},
80111
deletable: {
81112
type: Boolean,
82113
default: false,
@@ -85,23 +116,52 @@
85116
data() {
86117
return {
87118
formData: {
88-
difference: '1',
89-
calculationLayer: 1,
90-
measure: 'riverbedDifference',
119+
default: {
120+
main: {
121+
enabled: true,
122+
difference: '1',
123+
calculationLayer: 1,
124+
measure: 'stageDiff',
125+
},
126+
primary: {
127+
enabled: false,
128+
difference: '1',
129+
calculationLayer: 1,
130+
measure: 'stageDiff',
131+
},
132+
secondary: {
133+
enabled: false,
134+
difference: '1',
135+
calculationLayer: 1,
136+
measure: 'stageDiff',
137+
},
138+
tertiary: {
139+
enabled: false,
140+
difference: '1',
141+
calculationLayer: 1,
142+
measure: 'stageDiff',
143+
},
144+
},
91145
},
92146
calculationLayers: [ 1, 2 ],
147+
levels: {
148+
main: 'Hoofd',
149+
primary: 'Primair',
150+
secondary: 'Secundair',
151+
tertiary: 'Tertiair',
152+
},
93153
measures: [
94154
{
95155
text: 'Rivierbodem (unit m)',
96-
value: 'riverbedDifference',
156+
value: 'stageDiff',
97157
},
98158
{
99159
text: 'Weerstand (unit m/d)',
100-
value: 'conductance',
160+
value: 'condDiff',
101161
},
102162
{
103163
text: 'Waterpeil (unit m)',
104-
value: 'stageDifference',
164+
value: 'rbotDiff',
105165
},
106166
],
107167
rules: {
@@ -117,7 +177,7 @@
117177
computed: {
118178
differenceRules() {
119179
if (this.formData.measure === 'riverbedDifference') {
120-
return [
180+
return [
121181
this.rules.required,
122182
this.rules.notZero,
123183
(value) =>
@@ -127,7 +187,7 @@
127187
}
128188
129189
if (this.formData.measure === 'stageDifference') {
130-
190+
131191
return [
132192
this.rules.required,
133193
this.rules.notZero,
@@ -137,7 +197,7 @@
137197
];
138198
}
139199
140-
return null;
200+
return [];
141201
},
142202
},
143203
watch: {
@@ -151,18 +211,18 @@
151211
beforeMount() {
152212
this.formData = this.value;
153213
},
154-
methods: {
155-
handleDelete() {
156-
this.$emit('delete', this.id);
157-
},
158-
onUpdateDifferenceValue(event) {
159-
this.formData.difference = event;
160-
},
161-
},
162214
};
163215
</script>
164216

165217
<style>
218+
.inactive * {
219+
color: rgba(0, 0, 0, 0.4) !important;
220+
fill: rgba(0, 0, 0, 0.4) !important;
221+
}
222+
.checkbox {
223+
aspect-ratio: 1/1;
224+
}
225+
166226
.hide-label {
167227
padding-top: 0;
168228
margin-top: 0;

‎src/components/map-components/map-levels.vue

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<div class="map-levels">
3+
<!-- <v-btn-->
4+
<!-- color="#008fc5"-->
5+
<!-- class="map-levels__item justify-start white&#45;&#45;text"-->
6+
<!-- v-for="level in Object.keys(_value)"-->
7+
<!-- :key="level"-->
8+
<!-- @click="onToggle(level)"-->
9+
<!-- :aria-label="`Zichtbaarheid van de kaartlaag voor het ${_value[level].label} watersysteem`"-->
10+
<!-- >-->
11+
<!-- <v-icon>-->
12+
<!-- {{ _value[level].active ? 'mdi-eye' : 'mdi-eye-off'}}-->
13+
<!-- </v-icon>-->
14+
<!-- {{ _value[level].label }}-->
15+
<!-- </v-btn>-->
16+
<v-treeview
17+
class="map-levels__tree"
18+
expand-icon="mdi-chevron-down"
19+
dense
20+
:items=" [ {
21+
label: 'Watersystemen',
22+
children: Object.entries(this._value).flatMap(([ level, data ]) => ({ level, ...data })),
23+
} ]"
24+
open-on-click
25+
>
26+
27+
<template #label="{ item }">
28+
<v-btn
29+
plain
30+
color="#008fc5"
31+
class="justify-start map-levels__button"
32+
:key="item.label.toLowerCase()"
33+
v-if="'active' in item"
34+
@click="onToggle(item.level)"
35+
:aria-label="`Zichtbaarheid van de kaartlaag voor het ${item.label} watersysteem`"
36+
>
37+
<v-icon>
38+
{{ item.active ? 'mdi-eye' : 'mdi-eye-off' }}
39+
</v-icon>
40+
<span class="text-body-1">
41+
{{ item.label }}
42+
</span>
43+
</v-btn>
44+
45+
<span v-else class="text-body-1 pr-2">
46+
{{ item.label }}
47+
</span>
48+
</template>
49+
</v-treeview>
50+
</div>
51+
</template>
52+
53+
<script>
54+
export default {
55+
props: {
56+
value: {
57+
type: Object,
58+
required: true,
59+
},
60+
},
61+
emits: [ 'input' ],
62+
computed: {
63+
_value: {
64+
get() {
65+
return this.value;
66+
},
67+
set(value) {
68+
this.$emit('input', value);
69+
},
70+
},
71+
},
72+
methods: {
73+
onToggle(level) {
74+
this._value[level].active = !this._value[level].active;
75+
},
76+
},
77+
};
78+
</script>
79+
80+
<style>
81+
.map-levels {
82+
position: absolute;
83+
border-radius: 4px;
84+
overflow: hidden;
85+
z-index: 100;
86+
width: 180px;
87+
top: 92px;
88+
left: 10px;
89+
display: flex;
90+
flex-direction: column;
91+
box-shadow: 0 0 5px 2px rgba(0, 0, 0, .12);
92+
}
93+
94+
.map-levels .v-treeview-node__level {
95+
display: none;
96+
}
97+
98+
.map-levels__tree .v-treeview-node {
99+
position: relative;
100+
background: white;
101+
}
102+
103+
.map-levels__button {
104+
position: static;
105+
}
106+
107+
.map-levels__button::after {
108+
content: '';
109+
position: absolute;
110+
inset: 0;
111+
}
112+
</style>

‎src/components/map-components/raster-layer.vue

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
:source-id="`${layer.id}-source`"
55
:layer-id="`${layer.id}-layer`"
66
:layer="layer"
7+
before="gl-draw-polygon-fill-inactive.cold"
78
v-bind="$attrs"
89
/>
910
</template>

0 commit comments

Comments
 (0)