Mercurial > gemma

changeset 1394:b350b0b5cb6c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refactored fairwayprofile cross cuts moved all profile relevant data into Fairwayprofile.vue fixed width calculation of diagram fix bug when switching between sounding data fixed display/styling issue code cleanup
author Markus Kottlaender <markus@intevation.de>
date Wed, 28 Nov 2018 11:48:45 +0100
parents efd77496de75
children 210e9f16f8a0
files client/src/components/map/Main.vue client/src/components/map/Maplayer.vue client/src/components/map/contextbox/Bottlenecks.vue client/src/components/map/fairway/Fairwayprofile.vue client/src/components/map/fairway/Profiles.vue client/src/store/bottlenecks.js client/src/store/fairway.js
diffstat 7 files changed, 77 insertions(+), 145 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/Main.vue	Wed Nov 28 11:35:14 2018 +0100
+++ b/client/src/components/map/Main.vue	Wed Nov 28 11:48:45 2018 +0100
@@ -1,11 +1,7 @@
 <template>
   <div class="main d-flex flex-column">
-    <Maplayer :split="showSplitscreen"></Maplayer>
-    <FairwayProfile
-      :xScale="xAxis"
-      :yScaleLeft="yAxisLeft"
-      :yScaleRight="yAxisRight"
-    ></FairwayProfile>
+    <Maplayer></Maplayer>
+    <FairwayProfile></FairwayProfile>
   </div>
 </template>
 
@@ -26,46 +22,12 @@
 
 import Maplayer from "./Maplayer";
 import FairwayProfile from "./fairway/Fairwayprofile";
-import { mapState } from "vuex";
 
 export default {
   name: "mainview",
   components: {
     Maplayer,
     FairwayProfile
-  },
-  computed: {
-    ...mapState("application", ["showSplitscreen"]),
-    ...mapState("fairwayprofile", [
-      "minAlt",
-      "maxAlt",
-      "totalLength",
-      "selectedWaterLevel"
-    ]),
-    ...mapState("bottlenecks", ["surveys", "selectedSurvey"]),
-    xAxis() {
-      return [this.xScale.x, this.xScale.y];
-    },
-    yAxisLeft() {
-      const hi = Math.max(this.maxAlt, this.selectedWaterLevel);
-      return [this.yScaleLeft.lo, hi];
-    },
-    yAxisRight() {
-      const DELTA = this.maxAlt * 1.1 - this.maxAlt;
-      return [this.maxAlt * 1 + DELTA, -DELTA];
-    },
-    yScaleLeft() {
-      return {
-        lo: this.minAlt,
-        hi: this.maxAlt
-      };
-    },
-    xScale() {
-      return {
-        x: 0,
-        y: this.totalLength
-      };
-    }
   }
 };
 </script>
--- a/client/src/components/map/Maplayer.vue	Wed Nov 28 11:35:14 2018 +0100
+++ b/client/src/components/map/Maplayer.vue	Wed Nov 28 11:48:45 2018 +0100
@@ -49,7 +49,6 @@
 /* eslint-disable no-console */
 export default {
   name: "maplayer",
-  props: ["split"],
   data() {
     return {
       projection: "EPSG:3857"
@@ -66,10 +65,11 @@
       "cutTool"
     ]),
     ...mapState("bottlenecks", ["selectedSurvey"]),
+    ...mapState("application", ["showSplitscreen"]),
     mapStyle() {
       return {
-        mapfull: !this.split,
-        mapsplit: this.split,
+        mapfull: !this.showSplitscreen,
+        mapsplit: this.showSplitscreen,
         nocursor: this.hasActiveInteractions
       };
     },
@@ -238,7 +238,7 @@
     }
   },
   watch: {
-    split() {
+    showSplitscreen() {
       const map = this.openLayersMap;
       this.$nextTick(() => {
         map && map.updateSize();
--- a/client/src/components/map/contextbox/Bottlenecks.vue	Wed Nov 28 11:35:14 2018 +0100
+++ b/client/src/components/map/contextbox/Bottlenecks.vue	Wed Nov 28 11:48:45 2018 +0100
@@ -150,7 +150,7 @@
         "bottlenecks/setSelectedBottleneck",
         bottleneck.properties.name
       );
-      this.$store.commit("bottlenecks/setSelectedSurvey", survey);
+      this.$store.commit("bottlenecks/selectedSurvey", survey);
       this.moveToBottleneck(bottleneck);
     },
     moveToBottleneck(bottleneck) {
--- a/client/src/components/map/fairway/Fairwayprofile.vue	Wed Nov 28 11:35:14 2018 +0100
+++ b/client/src/components/map/fairway/Fairwayprofile.vue	Wed Nov 28 11:48:45 2018 +0100
@@ -86,17 +86,14 @@
  */
 import * as d3 from "d3";
 import { mapState, mapGetters } from "vuex";
-import { displayError } from "../../../lib/errors.js";
 import debounce from "debounce";
 
 const GROUND_COLOR = "#4A2F06";
 
 export default {
   name: "fairwayprofile",
-  props: ["xScale", "yScaleLeft", "yScaleRight"],
   data() {
     return {
-      wait: false,
       coordinatesInput: "",
       coordinatesSelect: null,
       cutLabel: "",
@@ -113,37 +110,33 @@
   },
   computed: {
     ...mapGetters("map", ["getLayerByName"]),
+    ...mapGetters("fairwayprofile", ["totalLength"]),
     ...mapState("application", ["showSplitscreen"]),
     ...mapState("fairwayprofile", [
       "startPoint",
       "endPoint",
       "currentProfile",
+      "additionalSurvey",
       "minAlt",
       "maxAlt",
-      "totalLength",
       "fairwayCoordinates",
       "waterLevels",
       "selectedWaterLevel",
       "previousCuts",
       "profileLoading"
     ]),
-    ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey", "surveysLoading"]),
-    additionalSurvey: {
-      get() {
-        return this.$store.getters["fairwayprofile/additionalSurvey"];
-      },
-      set(value) {
-        this.$store.commit("fairwayprofile/additionalSurvey", value);
-        this.selectAdditionalSurveyData();
-      }
-    },
+    ...mapState("bottlenecks", [
+      "selectedBottleneck",
+      "selectedSurvey",
+      "surveysLoading"
+    ]),
     currentData() {
       if (
         !this.selectedSurvey ||
         !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info)
       )
         return [];
-      return this.currentProfile[this.selectedSurvey.date_info];
+      return this.currentProfile[this.selectedSurvey.date_info].points;
     },
     additionalData() {
       if (
@@ -151,13 +144,24 @@
         !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info)
       )
         return [];
-      return this.currentProfile[this.additionalSurvey.date_info];
+      return this.currentProfile[this.additionalSurvey.date_info].points;
     },
     waterColor() {
       const result = this.waterLevels.find(
         x => x.level === this.selectedWaterLevel
       );
       return result.color;
+    },
+    xScale() {
+      return [0, this.totalLength];
+    },
+    yScaleLeft() {
+      const hi = Math.max(this.maxAlt, this.selectedWaterLevel);
+      return [this.minAlt, hi];
+    },
+    yScaleRight() {
+      const DELTA = this.maxAlt * 1.1 - this.maxAlt;
+      return [this.maxAlt * 1 + DELTA, -DELTA];
     }
   },
   watch: {
@@ -184,35 +188,6 @@
     }
   },
   methods: {
-    selectAdditionalSurveyData() {
-      if (
-        !this.additionalSurvey ||
-        this.wait ||
-        this.currentProfile[this.additionalSurvey.date_info]
-      ) {
-        this.drawDiagram();
-        return;
-      }
-      this.$store
-        .dispatch("fairwayprofile/loadProfile", this.additionalSurvey)
-        .then(() => {
-          this.wait = false;
-        })
-        .catch(error => {
-          this.wait = false;
-          let status = "ERROR";
-          let data = error;
-          const response = error.response;
-          if (response) {
-            status = response.status;
-            data = response.data;
-          }
-          displayError({
-            title: "Backend Error",
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    },
     drawDiagram() {
       this.coordinatesSelect = null;
       const chartDiv = document.querySelector(".fairwayprofile");
@@ -225,19 +200,14 @@
       const height = this.height - this.margin.top - 2 * this.margin.bottom;
       const currentData = this.currentData;
       const additionalData = this.additionalData;
-      const {
-        xScale,
-        yScaleRight,
-        yScaleLeft,
-        graph
-      } = this.generateCoordinates(svg, height, width);
-      this.drawWaterlevel({
-        graph,
-        xScale,
-        yScaleRight,
+      const { xScale, yScaleRight, graph } = this.generateCoordinates(
+        svg,
         height,
         width
-      });
+      );
+      this.drawWaterlevel({ graph, xScale, yScaleRight, height });
+      this.drawLabels({ graph, height });
+      this.drawFairway({ graph, xScale, yScaleRight });
       if (currentData) {
         this.drawProfile({
           graph,
@@ -245,7 +215,6 @@
           yScaleRight,
           currentData,
           height,
-          width,
           color: GROUND_COLOR,
           strokeColor: "black",
           opacity: 1
@@ -258,28 +227,11 @@
           yScaleRight,
           currentData: additionalData,
           height,
-          width,
           color: GROUND_COLOR,
           strokeColor: "#943007",
           opacity: 0.6
         });
       }
-      this.drawLabels({
-        graph,
-        xScale,
-        yScaleLeft,
-        currentData,
-        height,
-        width
-      });
-      this.drawFairway({
-        graph,
-        xScale,
-        yScaleRight,
-        currentData,
-        height,
-        width
-      });
     },
     drawFairway({ graph, xScale, yScaleRight }) {
       for (let coordinates of this.fairwayCoordinates) {
--- a/client/src/components/map/fairway/Profiles.vue	Wed Nov 28 11:35:14 2018 +0100
+++ b/client/src/components/map/fairway/Profiles.vue	Wed Nov 28 11:48:45 2018 +0100
@@ -185,7 +185,6 @@
         return this.$store.state.bottlenecks.selectedBottleneck;
       },
       set(name) {
-        this.loading = true;
         this.$store.dispatch("bottlenecks/setSelectedBottleneck", name);
       }
     },
@@ -194,7 +193,8 @@
         return this.$store.state.bottlenecks.selectedSurvey;
       },
       set(survey) {
-        this.$store.commit("bottlenecks/setSelectedSurvey", survey);
+        this.$store.commit("fairwayprofile/additionalSurvey", null);
+        this.$store.commit("bottlenecks/selectedSurvey", survey);
       }
     },
     additionalSurvey: {
@@ -234,13 +234,10 @@
         this.selectedBottleneck + " (" + new Date().toISOString() + ")";
     },
     selectedSurvey(survey) {
-      this.$store.commit("fairwayprofile/additionalSurvey", null);
-      if (survey) {
-        this.$store.dispatch("fairwayprofile/loadProfile", survey);
-      }
+      this.loadProfile(survey);
     },
     additionalSurvey(survey) {
-      if (survey) this.$store.dispatch("fairwayprofile/loadProfile", survey);
+      this.loadProfile(survey);
     },
     coordinatesSelect(newValue) {
       if (newValue) {
@@ -250,6 +247,16 @@
     }
   },
   methods: {
+    loadProfile(survey) {
+      if (survey) {
+        this.$store.commit("fairwayprofile/profileLoading", true);
+        this.$store
+          .dispatch("fairwayprofile/loadProfile", survey)
+          .finally(() =>
+            this.$store.commit("fairwayprofile/profileLoading", false)
+          );
+      }
+    },
     toggleCutTool() {
       if (this.selectedSurvey) {
         this.cutTool.setActive(!this.cutTool.getActive());
--- a/client/src/store/bottlenecks.js	Wed Nov 28 11:35:14 2018 +0100
+++ b/client/src/store/bottlenecks.js	Wed Nov 28 11:48:45 2018 +0100
@@ -41,7 +41,7 @@
     setSurveys(state, surveys) {
       state.surveys = surveys;
     },
-    setSelectedSurvey(state, survey) {
+    selectedSurvey(state, survey) {
       state.selectedSurvey = survey;
     },
     surveysLoading: (state, loading) => {
@@ -54,7 +54,7 @@
       name
     ) {
       if (name !== state.selectedBottleneck) {
-        commit("setSelectedSurvey", null);
+        commit("selectedSurvey", null);
         commit("fairwayprofile/clearCurrentProfile", null, { root: true });
         commit("application/showSplitscreen", false, { root: true });
         rootState.map.cutTool.setActive(false);
@@ -103,12 +103,12 @@
             const surveys = response.data.surveys.sort(
               (a, b) => (a.date_info < b.date_info ? 1 : -1)
             );
-            commit("setSelectedSurvey", surveys[0]);
+            commit("selectedSurvey", surveys[0]);
             commit("setSurveys", surveys);
           })
           .catch(error => {
             commit("setSurveys", []);
-            commit("setSelectedSurvey", null);
+            commit("selectedSurvey", null);
             const { status, data } = error.response;
             displayError({
               title: "Backend Error",
--- a/client/src/store/fairway.js	Wed Nov 28 11:35:14 2018 +0100
+++ b/client/src/store/fairway.js	Wed Nov 28 11:48:45 2018 +0100
@@ -28,7 +28,6 @@
 const init = () => {
   return {
     additionalSurvey: null,
-    totalLength: 0,
     minAlt: 0,
     maxAlt: 0,
     currentProfile: {},
@@ -47,8 +46,11 @@
   namespaced: true,
   state: init(),
   getters: {
-    length: state => {
-      return state.totalLength;
+    totalLength: state => {
+      const keys = Object.keys(state.currentProfile);
+      return keys.length
+        ? Math.max(...keys.map(x => state.currentProfile[x].length))
+        : 0;
     },
     additionalSurvey: state => {
       return state.additionalSurvey;
@@ -72,16 +74,16 @@
       const result = prepareProfile({ geoJSON, startPoint, endPoint });
       // Use Vue.set() to make new object properties rective
       // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
-      Vue.set(state.currentProfile, surveyDate, result.points);
+      Vue.set(state.currentProfile, surveyDate, {
+        points: result.points,
+        length: result.lengthPolyLine
+      });
       if (!state.minAlt || state.minAlt > result.minAlt) {
         state.minAlt = result.minAlt;
       }
       if (!state.maxAlt || state.maxAlt < result.maxAlt) {
         state.maxAlt = result.maxAlt;
       }
-      if (!state.totalLength || state.totalLength < result.lengthPolyLine) {
-        state.totalLength = result.lengthPolyLine;
-      }
     },
     setStartPoint: (state, start) => {
       state.startPoint = start;
@@ -122,7 +124,6 @@
     loadProfile({ commit, state }, survey) {
       if (state.startPoint && state.endPoint) {
         return new Promise((resolve, reject) => {
-          commit("profileLoading", true);
           const profileLine = new LineString([
             state.startPoint,
             state.endPoint
@@ -144,8 +145,7 @@
             })
             .catch(error => {
               reject(error);
-            })
-            .finally(() => commit("profileLoading", false));
+            });
         });
       }
     },
@@ -165,7 +165,6 @@
       // TODO an improvement could be to check if the line intersects
       // with the bottleneck area's polygon before trying the server request
       if (rootState.bottlenecks.selectedSurvey) {
-        commit("clearCurrentProfile");
         const inputLineString = cut.getGeometry().clone();
         inputLineString.transform("EPSG:3857", "EPSG:4326");
         const [start, end] = inputLineString
@@ -174,7 +173,18 @@
         commit("setStartPoint", start);
         commit("setEndPoint", end);
         const profileLine = new LineString([start, end]);
-        dispatch("loadProfile", rootState.bottlenecks.selectedSurvey)
+
+        const profileLoaders = [
+          dispatch("loadProfile", rootState.bottlenecks.selectedSurvey)
+        ];
+        if (rootState.fairwayprofile.additionalSurvey) {
+          profileLoaders.push(
+            dispatch("loadProfile", rootState.fairwayprofile.additionalSurvey)
+          );
+        }
+
+        commit("profileLoading", true);
+        Promise.all(profileLoaders)
           .then(() => {
             rootState.map.cutTool.setActive(false);
             rootGetters["map/getVSourceByName"](
@@ -200,15 +210,16 @@
               }
             );
           })
-          .then(() => {
-            commit("application/showSplitscreen", true, { root: true });
-          })
           .catch(error => {
             const { status, data } = error.response;
             displayError({
               title: "Backend Error",
               message: `${status}: ${data.message || data}`
             });
+          })
+          .finally(() => {
+            commit("application/showSplitscreen", true, { root: true });
+            commit("profileLoading", false);
           });
       }
     },