changeset 1030:bf10a7f990cc

refac: fairway profile retrieves current data from store
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 24 Oct 2018 15:09:06 +0200
parents 1fdeb9404afb
children c0f5dedf5753
files client/src/application/Main.vue client/src/fairway/Fairwayprofile.vue
diffstat 2 files changed, 29 insertions(+), 20 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Main.vue	Wed Oct 24 14:50:25 2018 +0200
+++ b/client/src/application/Main.vue	Wed Oct 24 15:09:06 2018 +0200
@@ -15,7 +15,6 @@
                 :selectedWaterLevel="selectedWaterLevel"
                 :fairwayCoordinates="fairwayCoordinates"
                 :waterLevels="waterLevels"
-                :data="coordinates"
                 :height="height"
                 :width="width"
                 :xScale="xAxis"
@@ -87,10 +86,6 @@
       "availableSurveys"
     ]),
     ...mapState("fairwayprofile", ["selectedMorph"]),
-    coordinates() {
-      const currentSurveyDate = this.selectedMorph.date_info;
-      return this.currentProfile[currentSurveyDate];
-    },
     additionalSurveys() {
       if (!this.availableSurveys) return [];
       return this.availableSurveys.surveys.filter(x => {
--- a/client/src/fairway/Fairwayprofile.vue	Wed Oct 24 14:50:25 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Wed Oct 24 15:09:06 2018 +0200
@@ -1,22 +1,28 @@
 <template>
     <div class="profiledisplay d-flex flex-row">
-        <div class="fairwayprofile">
-        </div>
+        <div class="fairwayprofile"></div>
         <div class="additionalsurveys d-flex flex-column">
             <small class="label">Available Additional Surveys</small>
             <select v-model="additionalSurvey" @change="selectAdditionalSurveyData">
                 <option value="">None</option>
-                <option v-for="survey in additionalSurveys" :key="survey.date_info">
-                    {{survey.date_info}}
-                </option>
+                <option
+                    v-for="survey in additionalSurveys"
+                    :key="survey.date_info"
+                >{{survey.date_info}}</option>
             </select>
             <small class="mt-2">
-                <b>Start:</b><br>
-                Lat: {{ startPoint[1] }}<br>
-                Lon: {{ startPoint[0] }}<br>
-                <b>End:</b><br>
-                Lat: {{ endPoint[1] }}<br>
-                Lon: {{ endPoint[0] }}<br>
+                <b>Start:</b>
+                <br>
+                Lat: {{ startPoint[1] }}
+                <br>
+                Lon: {{ startPoint[0] }}
+                <br>
+                <b>End:</b>
+                <br>
+                Lat: {{ endPoint[1] }}
+                <br>
+                Lon: {{ endPoint[0] }}
+                <br>
             </small>
         </div>
     </div>
@@ -79,7 +85,6 @@
 export default {
   name: "fairwayprofile",
   props: [
-    "data",
     "width",
     "height",
     "xScale",
@@ -95,7 +100,16 @@
     "additionalSurveys"
   ],
   computed: {
-    ...mapState("fairwayprofile", ["startPoint", "endPoint"]),
+    ...mapState("fairwayprofile", [
+      "startPoint",
+      "endPoint",
+      "currentProfile",
+      "selectedMorph"
+    ]),
+    currentData() {
+      const currentSurveyDate = this.selectedMorph.date_info;
+      return this.currentProfile[currentSurveyDate];
+    },
     waterColor() {
       const result = this.waterLevels.find(
         x => x.level === this.selectedWaterLevel
@@ -109,7 +123,7 @@
     };
   },
   watch: {
-    data() {
+    currentProfile() {
       this.drawDiagram();
     },
     width() {
@@ -140,7 +154,7 @@
       svg.attr("height", this.height);
       const width = this.width - this.margin.right - 1.5 * this.margin.left;
       const height = this.height - this.margin.top - 2 * this.margin.bottom;
-      const currentData = this.data;
+      const currentData = this.currentData;
       const {
         xScale,
         yScaleRight,