Mercurial > gemma

changeset 2608:13377f2a5c42

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
overview2: agm details prototype implemented
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 13 Mar 2019 09:45:29 +0100
parents ee60096c7eb6
children 546ed93a9829
files client/src/components/importoverview/AdditionalDetail.vue client/src/components/importoverview/AdditionalLog.vue client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue client/src/components/importoverview/LogDetail.vue client/src/components/importoverview/SoundingResultDetail.vue client/src/store/imports.js
diffstat 6 files changed, 157 insertions(+), 20 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importoverview/AdditionalDetail.vue	Tue Mar 12 17:13:04 2019 +0100
+++ b/client/src/components/importoverview/AdditionalDetail.vue	Wed Mar 13 09:45:29 2019 +0100
@@ -9,10 +9,6 @@
       v-if="isApprovedGaugeMeasurement"
     ></ApprovedGaugeMeasurementDetail>
     <BottleneckDetail :entry="entry" v-if="isBottleneck"></BottleneckDetail>
-    <SoundingResultDetail
-      :entry="entry"
-      v-if="isSoundingResult"
-    ></SoundingResultDetail>
   </div>
 </template>
 
@@ -35,7 +31,6 @@
   name: "additionaldetail",
   props: ["entry"],
   components: {
-    SoundingResultDetail: () => import("./SoundingResultDetail.vue"),
     BottleneckDetail: () => import("./BottleneckDetail.vue"),
     ApprovedGaugeMeasurementDetail: () =>
       import("./ApprovedGaugeMeasurementDetail.vue"),
@@ -53,12 +48,6 @@
     },
     isBottleneck() {
       return this.kind === "BN" || this.kind === "UBN";
-    },
-    isStretch() {
-      return this.kind === "ST";
-    },
-    isSoundingResult() {
-      return this.kind === "SR";
     }
   }
 };
--- a/client/src/components/importoverview/AdditionalLog.vue	Tue Mar 12 17:13:04 2019 +0100
+++ b/client/src/components/importoverview/AdditionalLog.vue	Wed Mar 13 09:45:29 2019 +0100
@@ -58,6 +58,11 @@
 </script>
 
 <style lang="scss" scoped>
+.additionallog {
+  width: 600px;
+  max-height: 20vh;
+  overflow-y: auto;
+}
 .kind {
   width: 30px;
 }
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Tue Mar 12 17:13:04 2019 +0100
+++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Wed Mar 13 09:45:29 2019 +0100
@@ -1,5 +1,89 @@
 <template>
-  <div>AGM</div>
+  <div class="diffs">
+    <div v-for="(result, index) in entry.summary" :key="index">
+      <div class="pl-3 d-flex flex-row">
+        <span v-if="result.versions.length == 1" class="agmcode text-left"
+          ><small
+            >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small
+          ></span
+        >
+        <span v-if="result.versions.length == 2" class="agmcode text-left"
+          ><small>{{ result["fk-gauge-id"] }}</small></span
+        >
+        <span class="agmdetail text-left"
+          ><small>{{ result["measure-date"] | dateTime }}</small></span
+        >
+        <div
+          @click="toggleDiff(index)"
+          class="small ml-auto mt-auto mb-auto text-info text-left"
+        >
+          <font-awesome-icon
+            class="pointer"
+            v-if="showDiff == index"
+            icon="angle-up"
+            fixed-width
+          ></font-awesome-icon>
+          <font-awesome-icon
+            class="pointer"
+            v-if="showDiff != index"
+            icon="angle-down"
+            fixed-width
+          ></font-awesome-icon>
+        </div>
+      </div>
+      <div v-if="showDiff == index" class="pl-3 d-flex flex-row">
+        <div>
+          <div class="d-flex flex-row pl-3 text-left">
+            <div class="header border-bottom agmdetailskeys">
+              <small><translate>Value</translate></small>
+            </div>
+            <div
+              v-if="result.versions.length == 2"
+              class="header border-bottom agmdetailsvalues"
+            >
+              <small><translate>Old</translate></small>
+            </div>
+            <div class="header border-bottom agmdetailsvalues">
+              <small><translate>New</translate></small>
+            </div>
+          </div>
+          <div
+            class="d-flex flex-row pl-3 text-left"
+            v-for="(entry, index) in Object.keys(result.versions[0])"
+            :key="index"
+          >
+            <div
+              v-if="
+                result.versions.length == 1 ||
+                  result.versions[0][entry] != result.versions[1][entry]
+              "
+              class="agmdetailskeys"
+            >
+              <small>{{ entry }}</small>
+            </div>
+            <div
+              v-if="
+                result.versions.length == 1 ||
+                  result.versions[0][entry] != result.versions[1][entry]
+              "
+              class="agmdetailsvalues"
+            >
+              <small>{{ result.versions[0][entry] }}</small>
+            </div>
+            <div
+              v-if="
+                result.versions.length == 2 &&
+                  result.versions[0][entry] != result.versions[1][entry]
+              "
+              class="agmdetailsvalues"
+            >
+              <small>{{ result.versions[1][entry] }}</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -16,9 +100,33 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
+
+const NODIFF = -1;
+
 export default {
-  name: "agmdetails"
+  name: "agmdetails",
+  props: ["entry"],
+  data() {
+    return {
+      showDiff: NODIFF
+    };
+  },
+  methods: {
+    toggleDiff(number) {
+      if (this.showDiff !== number || this.showDiff == NODIFF) {
+        this.showDiff = number;
+      } else {
+        this.showDiff = NODIFF;
+      }
+    }
+  }
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.diffs {
+  width: 615px;
+  max-height: 20vh;
+  overflow-y: auto;
+}
+</style>
--- a/client/src/components/importoverview/LogDetail.vue	Tue Mar 12 17:13:04 2019 +0100
+++ b/client/src/components/importoverview/LogDetail.vue	Wed Mar 13 09:45:29 2019 +0100
@@ -20,8 +20,19 @@
         <span class="text-info" v-if="isApprovedGaugeMeasurement">
           ({{ entry.summary.length }})</span
         >
+        <span v-if="isBottleneck" class="text-left">{{
+          data.summary.bottlenecks.length
+        }}</span>
+        <span class="text-left" v-if="isFairwayDimension"
+          >{{ entry.summary["source-organization"] }} (LOS:
+          {{ entry.summary.los }})</span
+        >
       </div>
       <StretchDetail v-if="isStretch" :entry="entry"></StretchDetail>
+      <SoundingResultDetail
+        :entry="entry"
+        v-if="isSoundingResult"
+      ></SoundingResultDetail>
     </div>
     <AdditionalDetail
       v-if="entry.id === showAdditional"
@@ -48,7 +59,7 @@
 
     <AdditionalLog
       v-if="entry.id === showLogs"
-      class="ml-4 d-flex flex-row"
+      class="ml-4 d-flex flex-row mr-1"
       :entry="entry"
     ></AdditionalLog>
   </div>
@@ -75,6 +86,7 @@
   name: "logdetail",
   props: ["entry"],
   components: {
+    SoundingResultDetail: () => import("./SoundingResultDetail.vue"),
     StretchDetail: () => import("./StretchDetails.vue"),
     AdditionalDetail: () => import("./AdditionalDetail.vue"),
     AdditionalLog: () => import("./AdditionalLog.vue")
--- a/client/src/components/importoverview/SoundingResultDetail.vue	Tue Mar 12 17:13:04 2019 +0100
+++ b/client/src/components/importoverview/SoundingResultDetail.vue	Wed Mar 13 09:45:29 2019 +0100
@@ -1,5 +1,10 @@
 <template>
-  <div>SoundingResult</div>
+  <div>
+    <span class="empty"></span>
+    <a @click="zoomTo()" class="text-info pointer">
+      {{ entry.summary.bottleneck }}
+    </a>
+  </div>
 </template>
 
 <script>
@@ -17,7 +22,27 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 export default {
-  name: "soundingresultdetails"
+  name: "soundingresultdetails",
+  props: ["entry"],
+  methods: {
+    moveMap(coordinates) {
+      this.$store.commit("map/moveMap", {
+        coordinates: coordinates,
+        zoom: 17,
+        preventZoomOut: true
+      });
+    },
+    zoomTo() {
+      const { lat, lon, bottleneck, date } = this.entry.summary;
+      const coordinates = [lat, lon];
+      this.moveMap(coordinates);
+      this.$store
+        .dispatch("bottlenecks/setSelectedBottleneck", bottleneck)
+        .then(() => {
+          this.$store.commit("bottlenecks/setSelectedSurveyByDate", date);
+        });
+    }
+  }
 };
 </script>
 
--- a/client/src/store/imports.js	Tue Mar 12 17:13:04 2019 +0100
+++ b/client/src/store/imports.js	Wed Mar 13 09:45:29 2019 +0100
@@ -25,7 +25,6 @@
 };
 
 const NODETAILS = -1;
-const NODIFF = -1;
 
 // initial state
 const init = () => {
@@ -40,8 +39,7 @@
     logsVisible: true,
     show: NODETAILS,
     showAdditional: NODETAILS,
-    showLogs: NODETAILS,
-    showDiff: NODIFF
+    showLogs: NODETAILS
   };
 };