Merge pull request #86 from openearth/developments-feb-2024

IoannaMi · web-flow · commit bd6587ba63fc · 2024-03-12T17:35:08.000+01:00
Developments feb 2024
diff --git a/public/data/brl.json b/public/data/brl.json
@@ -2,11 +2,11 @@
   "id": "brl",
   "name": "Grondwater effecten Rivierbodem",
   "title": "Krijg inzicht in de effecten van ingrepen in het grondwatersysteem van de grote rivieren met Landelijk Hydrologisch Model",
-  "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 (primair systeem), 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.",
-  "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 (primair systeem), 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>",
+  "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.",
+  "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>",
   "steps": [
     {
-      "title": "Selecties",
+      "title": "Selecteren",
       "components": [
         "selection-list",
         "surface-profile"
@@ -17,7 +17,7 @@
       ]
     },
     {
-      "title": "Configuratie",
+      "title": "Configureren",
       "components": [
         "selection-configuration",
         "surface-profile"
diff --git a/src/components/charts/line-chart/line-chart-areas.vue b/src/components/charts/line-chart/line-chart-areas.vue
@@ -101,17 +101,25 @@
         };
       },
       series() {
+        const seriesPaletteA = [ '#FFFF8A', '#FFFF5C', '#FFFF2E', '#FFFF00', '#D1D100', '#A3A300', '#757500' ];
+        const seriesPaletteB = [ '#8AFF8A', '#5CFF5C', '#2EFF2E', '#00FF00', '#00D100', '#00A300', '#007500' ];
+
+        let incrementEven = 0;
+        let incrementOdd = 0;
+
         return this.chartData.map((item, index) => {
-          const seriesColor = index % 2 ? '#5ba75b' : '#ffffca';
+          const seriesColor = index % 2 === 0 ? seriesPaletteA[incrementOdd++] : seriesPaletteB[incrementEven++];
+    
           return {
             ...item,
             color: seriesColor,
             lineStyle: { color: seriesColor },
-            areaStyle: { ...item.areaStyle, color: seriesColor, opacity: .5 },
+            areaStyle: { ...item.areaStyle, color: seriesColor, opacity: 0.5 },
             symbolSize: 7,
             symbol: 'circle',
           };
         });
+
       },
     },
     methods: {
diff --git a/src/components/configuration-form.vue b/src/components/configuration-form.vue
@@ -17,20 +17,11 @@
         </v-card>
       </v-col>
       <v-col cols="12" sm="3">
-        <v-card
-          class="pa-2 full-height d-flex"
-          outlined
-          tile
-        >
-          <v-text-field
-            v-model="formData.difference"
-            class="hide-label"
-            type="number"
-            label="Verschil in rivierbodemhoogte (m)"
-            :rules="differenceRules"
-            :disabled="disabled"
-          />
-        </v-card>
+        <text-field-measure
+          :key="formData.measure"
+          :differenceRules="differenceRules"
+          :disabled="disabled"
+          @update-difference-value="onUpdateDifferenceValue" />
       </v-col>
       <v-col cols="12" sm="3">
         <v-card
@@ -66,7 +57,13 @@
 </template>
 
 <script>
+  import TextFieldMeasure from '@/components/text-field-measure';
+
   export default {
+    components: { 
+      TextFieldMeasure,
+       
+    },
     props: {
       id: {
         type: String,
@@ -120,14 +117,17 @@
     computed: {
       differenceRules() {
         if (this.formData.measure === 'riverbedDifference') {
-          return [
+          return  [
             this.rules.required,
             this.rules.notZero,
-            this.rules.minMaxDifference,
+            (value) =>
+              (value >= -10 && value <= 10) ||
+              'Waarde moet tussen -10 en 10 meter vallen.',
           ];
         }
 
         if (this.formData.measure === 'stageDifference') {
+         
           return [
             this.rules.required,
             this.rules.notZero,
@@ -155,6 +155,9 @@
       handleDelete() {
         this.$emit('delete', this.id);
       },
+      onUpdateDifferenceValue(event) {
+        this.formData.difference = event;
+      },
     },
   };
 </script>
diff --git a/src/components/map-components/map-raster-opacity-control.vue b/src/components/map-components/map-raster-opacity-control.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="map-raster-opacity-control">
     <label class="map-raster-opacity-control__label text-body-2" for="opacity">
-      Opacity: {{ value }}%
+      Transparantie: {{ value }}%
     </label>
     <input
       class="map-raster-opacity-control__input"
@@ -60,7 +60,7 @@
   position: absolute;
   z-index: 100;
   bottom: 36px;
-  left: 10px;
+  left: 220px;
   flex-direction: column;
   width: 200px;
   padding: 16px;
diff --git a/src/components/marker-configuration/marker-configuration.vue b/src/components/marker-configuration/marker-configuration.vue
@@ -19,7 +19,7 @@
             label="Grootte modelgebied (in m rondom locatie)"
             v-model="area"
             min="0"
-            :rules="[rules.required, rules.notZero]"
+            :rules="[rules.required, rules.notZero, rules.maxExtent]"
           />
         </v-col>
       </v-row>
@@ -75,7 +75,9 @@
           required: (value) => !!value || 'Benodigd.',
           notZero: (value) => value !== '0' || 'Waarde mag niet 0 zijn.',
           minExtent: (value) =>
-            value >= 500 || 'Een grootte van minimaal 500 meter is vereist.',
+            parseFloat(value) >= 500 || 'Een grootte van minimaal 500 meter is vereist.',
+          maxExtent: (value) => 
+            parseFloat(value) <= 25000 || 'De grootte mag niet groter zijn dan 25.000 meter.',
         },
         valid: false,
       };
diff --git a/src/components/polygon-selection-configuration.vue b/src/components/polygon-selection-configuration.vue
@@ -6,7 +6,7 @@
       type="number"
       min="0"
       label="Grootte modelgebied (in m rondom de getekende polygoon)"
-      :rules="[rules.requiredSizeModel, rules.minExtentSizeModel]"
+      :rules="[rules.requiredSizeModel, rules.minExtentSizeModel, rules.maxExtent]"
       @update:error="setExtentValidity"
     />
 
@@ -84,6 +84,8 @@
           requiredAmountToDig: (value) => !!value || 'Benodigd.',
           minExtentAmountToDig: (value) =>
             value >= 0 || 'Een grootte van minimaal 0 meter is vereist.',
+          maxExtent: (value) => 
+            parseFloat(value) <= 25000 || 'De grootte mag niet groter zijn dan 25.000 meter.',
           
         },
       };
diff --git a/src/components/selection-configuration.vue b/src/components/selection-configuration.vue
@@ -6,7 +6,7 @@
       type="number"
       min="0"
       label="Grootte modelgebied (in m rondom de getekende polygoon)"
-      :rules="[rules.required, rules.minExtent]"
+      :rules="[rules.required, rules.minExtent, rules.maxExtent]"
       @update:error="setExtentValidity"
     />
 
@@ -136,6 +136,8 @@
           required: (value) => !!value || 'Benodigd.',
           minExtent: (value) =>
             value >= 500 || 'Een grootte van minimaal 500 meter is vereist.',
+          maxExtent: (value) => 
+            parseFloat(value) <= 25000 || 'De grootte mag niet groter zijn dan 25.000 meter.',
         },
         wpsId: 'brl_gwmodel', // This should be configurable based on the tool
       };
diff --git a/src/components/text-field-measure.vue b/src/components/text-field-measure.vue
@@ -0,0 +1,57 @@
+<template>
+    <v-card
+    class="pa-2 full-height d-flex"
+    outlined
+    tile
+    >
+        <v-text-field
+            v-model="difference"
+            class="hide-label"
+            type="number"
+            label="Verschil in rivierbodemhoogte (m)"
+            :rules="differenceRules"
+            :disabled="disabled"
+        />
+        </v-card>
+</template>
+<script>
+  export default {
+    props: {
+      differenceRules: Array,
+      disabled: Boolean,
+    },
+    data() { 
+      return {
+        difference: 1,
+      };
+    },
+    watch: {
+      difference(value) {
+        this.$emit('update-difference-value', value);
+      },
+    },
+  };
+
+</script>
+<style>
+.hide-label {
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.hide-label label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.hide-label .v-text-field__details,
+.hide-label .v-text-field__details .v-messages {
+  min-height: 0;
+}
+</style>
diff --git a/src/layouts/tool.vue b/src/layouts/tool.vue
@@ -35,8 +35,11 @@
           </v-btn>
         </template>
         <v-list>
+          <v-list-item :to="{ name: 'disclaimer' }">
+            <v-list-item-title>Bijsluiter</v-list-item-title>
+          </v-list-item>
           <v-list-item :to="{ name: 'about' }">
-            <v-list-item-title>Over de Grondwater Toolkit</v-list-item-title>
+            <v-list-item-title>Over</v-list-item-title>
           </v-list-item>
         </v-list>
       </v-menu>
diff --git a/src/router.js b/src/router.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 import Introduction from '@/views/introduction';
+import Disclaimer from '@/views/disclaimer';
 import About from '@/views/about';
 import StepOne from '@/views/step-1';
 import StepThree from '@/views/step-3';
@@ -19,6 +20,14 @@ const routes = [
       title: 'Home',
     },
   },
+  {
+    path: '/bijsluiter',
+    component: Disclaimer,
+    name: 'disclaimer',
+    meta: {
+      title: 'Bijsluiter',
+    },
+  },
   {
     path: '/about',
     component: About,
diff --git a/src/store/modules/selections/index.js b/src/store/modules/selections/index.js
@@ -32,8 +32,8 @@ export default {
       };
       state.selections.push({
         ...selection,
-        configuration: selection.configuration || [defaultForm],
-        name: selection.name || `Selectie #${totalSelections + 1}`,
+        configuration: selection.configuration || [ defaultForm ],
+        name: selection.name || `Selectie #${ totalSelections + 1 }`,
       });
     },
     REMOVE_SELECTION(state, { id }) {
@@ -61,7 +61,6 @@ export default {
     },
     ADD_SELECTION_CONFIGURATION(state, { id }) {
       const selection = state.selections.find((selection) => selection.id === id);
-      console.log('selection to add the form at: ', selection);
       const defaultForm = {
         id: uuid(),
         valid: true,
@@ -84,7 +83,6 @@ export default {
       commit('ADD_SELECTION', { selection });
     },
     addSelectionConfiguration({ commit }, { id }) {
-      console.log('id', id);
       commit('ADD_SELECTION_CONFIGURATION', { id });
     },
     editSelectionName({ commit }, { id, name }) {
diff --git a/src/views/about.vue b/src/views/about.vue
@@ -1,17 +1,29 @@
 <template>
   <div class="pa-4">
-    <div class="text-body-1" v-html="content" />
+    <p class="text-body-1">Deze toolbox is mogelijk gemaakt door RWS in samenwerking met Deltares.</p>
+    <p class="text-body-1">De toolbox maakt het mogelijk om diverse ingrepen te simuleren via online interactie met de stationaire schematisatie in iMODFLOW van LHM4.2. Meer weten, neem dan contact op met <a href="mailto:helpdesk.nhi@deltares.nl?&subject=Online modelling feedback&body=Ik heb de online modelling tool gezien en getest en ik wil graag meer weten of heb opmerkingen over deze tool.">Heldesk NHI</a>.</p>
+    <v-row dense justify="center">
+        <v-col
+            cols="4"
+        >
+            <img src="@/assets/img/deltares-logo.png" class="deltares_logo"/>
+        </v-col>
+        <v-col
+           cols="7"
+        >
+              <img src="@/assets/img/Rijkswaterstaat_logo.png" class="rws_logo"/>
+        </v-col>
+    </v-row>
   </div>
 </template>
+<style>
+ .deltares_logo{
+    max-width: 200px;
+    padding-top: 20px;
+    padding-right: 1px;
 
-<script>
-  import content from '@/content/legal.md';
-
-  export default {
-    data() {
-      return {
-        content,
-      };
-    },
-  };
-</script>
+  }
+  .rws_logo{
+    max-width: 200px;
+  }
+</style>
diff --git a/src/views/disclaimer.vue b/src/views/disclaimer.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="pa-4">
+    <div class="text-body-1" v-html="content" />
+  </div>
+</template>
+
+<script>
+  import content from '@/content/legal.md';
+
+  export default {
+    data() {
+      return {
+        content,
+      };
+    },
+  };
+</script>
