changeset 3523:b0c655e605ee import_review

reviewdetails for stretches
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 29 May 2019 15:07:24 +0200
parents 9538a0aeacde
children 40bc7e3bc561
files client/src/components/importoverview/StretchDetails.vue
diffstat 1 files changed, 59 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importoverview/StretchDetails.vue	Wed May 29 12:30:04 2019 +0200
+++ b/client/src/components/importoverview/StretchDetails.vue	Wed May 29 15:07:24 2019 +0200
@@ -1,11 +1,60 @@
 <template>
-  <div>
-    <a @click="zoomToStretch()" class="text-info pointer">{{
-      details.summary.stretch
-    }}</a>
+  <div
+    :class="{
+      full: !showLogs,
+      split: showLogs
+    }"
+  >
+    <div class="d-flex">
+      <UISpinnerButton
+        @click="showDetails = !showDetails"
+        :state="showDetails"
+        :icons="['angle-right', 'angle-down']"
+        classes="text-info"
+      />
+      <a @click="zoomToStretch()" class="text-info pointer"
+        >{{ details.summary.objnam }} (
+        {{ details.summary.countries.join(", ") }} )</a
+      >
+    </div>
+    <div>
+      <div v-if="showDetails">
+        <div
+          v-for="(entry, index) in Object.keys(details.summary)"
+          :key="index"
+          class="comparison row no-gutters px-4 text-left"
+        >
+          <span class="col-4">{{ entry }}</span>
+          <span v-if="entry === 'countries'" class="col-4">{{
+            details.summary[entry].join(", ")
+          }}</span>
+          <span v-else class="col-4">{{ details.summary[entry] }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
+<style lang="scss" scoped>
+.comparison {
+  width: 668px;
+  border-top: dashed 1px #dee2e6;
+}
+
+.comparison:nth-child(odd) {
+  background-color: #f8f9fa;
+}
+
+.split {
+  max-height: 35vh;
+}
+
+.full {
+  max-height: 70vh;
+}
+</style>
+
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -24,12 +73,17 @@
 import { mapState, mapGetters } from "vuex";
 
 export default {
+  data() {
+    return {
+      showDetails: false
+    };
+  },
   props: ["entry"],
   mounted() {
     this.$store.commit("imports/hideAdditionalInfo");
   },
   computed: {
-    ...mapState("imports", ["showAdditional", "details"]),
+    ...mapState("imports", ["showAdditional", "showLogs", "details"]),
     ...mapGetters("map", ["openLayersMap"])
   },
   methods: {