Mercurial > gemma

changeset 1350:58d41573e530

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
staging: now with real data from backend
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 26 Nov 2018 14:42:48 +0100
parents 6720d683f7ca
children 89d013d55ec9 58113365c51d
files client/src/components/map/contextbox/Bottlenecks.vue client/src/components/map/contextbox/ImportSoundingresults.vue client/src/components/map/contextbox/Staging.vue client/src/store/imports.js
diffstat 4 files changed, 78 insertions(+), 118 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Bottlenecks.vue	Mon Nov 26 12:53:15 2018 +0100
+++ b/client/src/components/map/contextbox/Bottlenecks.vue	Mon Nov 26 14:42:48 2018 +0100
@@ -1,83 +1,64 @@
 <template>
-    <div>
-        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-          <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>
-          Bottlenecks
-        </h6>
-        <div class="row p-2 text-left small">
-            <div class="col-5">
-                <a href="#" @click="sortBy('name')" class="sort-link">Name</a>
-                <font-awesome-icon
-                    :icon="sortIcon"
-                    class="ml-1"
-                    v-if="sortColumn === 'name'"
-                ></font-awesome-icon>
-            </div>
-            <div class="col-2">
-                <a
-                    href="#"
-                    @click="sortBy('latestMeasurement')"
-                    class="sort-link"
-                >Latest<br>Measurement</a>
-                <font-awesome-icon
-                    :icon="sortIcon"
-                    class="ml-1"
-                    v-if="sortColumn === 'latestMeasurement'"
-                ></font-awesome-icon>
-            </div>
-            <div class="col-3">
-                <a href="#" @click="sortBy('chainage')" class="sort-link">Chainage</a>
-                <font-awesome-icon
-                    :icon="sortIcon"
-                    class="ml-1"
-                    v-if="sortColumn === 'chainage'"
-                ></font-awesome-icon>
-            </div>
-            <div class="col-2"></div>
+  <div>
+    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+      <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>Bottlenecks
+    </h6>
+    <div class="row p-2 text-left small">
+      <div class="col-5">
+        <a href="#" @click="sortBy('name')" class="sort-link">Name</a>
+        <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'name'"></font-awesome-icon>
+      </div>
+      <div class="col-2">
+        <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">Latest
+          <br>Measurement
+        </a>
+        <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'latestMeasurement'"></font-awesome-icon>
+      </div>
+      <div class="col-3">
+        <a href="#" @click="sortBy('chainage')" class="sort-link">Chainage</a>
+        <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'chainage'"></font-awesome-icon>
+      </div>
+      <div class="col-2"></div>
+    </div>
+    <div class="bottleneck-list small text-left" v-if="filteredAndSortedBottlenecks().length">
+      <div
+        v-for="bottleneck in filteredAndSortedBottlenecks()"
+        :key="bottleneck.properties.name"
+        class="border-top row mx-0 py-2"
+      >
+        <div class="col-5 text-left">
+          <a
+            href="#"
+            class="d-block"
+            @click="moveToBottleneck(bottleneck)"
+          >{{ bottleneck.properties.name }}</a>
         </div>
-        <div class="bottleneck-list small text-left" v-if="filteredAndSortedBottlenecks().length">
-            <div
-                v-for="bottleneck in filteredAndSortedBottlenecks()"
-                :key="bottleneck.properties.name"
-                class="border-top row mx-0 py-2"
-            >
-                <div class="col-5 text-left">
-                    <a
-                        href="#"
-                        class="d-block"
-                        @click="moveToBottleneck(bottleneck)"
-                    >{{ bottleneck.properties.name }}</a>
-                </div>
-                <div class="col-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div>
-                <div
-                    class="col-3"
-                >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div>
-                <div class="col-2 text-right">
-                    <button
-                        type="button"
-                        class="btn btn-sm btn-outline-secondary"
-                        @click="toggleBottleneck(bottleneck.properties.name)"
-                    >
-                        <font-awesome-icon icon="angle-down"></font-awesome-icon>
-                    </button>
-                </div>
-                <div
-                    :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"
-                >
-                    <a
-                        href="#"
-                        class="d-block p-2"
-                        v-for="(survey, index) in openBottleneckSurveys"
-                        :key="index"
-                        @click="selectSurvey(survey, bottleneck)"
-                    >{{ survey.date_info }}</a>
-                </div>
-            </div>
+        <div class="col-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div>
+        <div
+          class="col-3"
+        >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div>
+        <div class="col-2 text-right">
+          <button
+            type="button"
+            class="btn btn-sm btn-outline-secondary"
+            @click="toggleBottleneck(bottleneck.properties.name)"
+          >
+            <font-awesome-icon icon="angle-down"></font-awesome-icon>
+          </button>
         </div>
-        <div v-else class="small text-center py-3 border-top">
-            No results.
+        <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]">
+          <a
+            href="#"
+            class="d-block p-2"
+            v-for="(survey, index) in openBottleneckSurveys"
+            :key="index"
+            @click="selectSurvey(survey, bottleneck)"
+          >{{ survey.date_info }}</a>
         </div>
+      </div>
     </div>
+    <div v-else class="small text-center py-3 border-top">No results.</div>
+  </div>
 </template>
 
 <script>
--- a/client/src/components/map/contextbox/ImportSoundingresults.vue	Mon Nov 26 12:53:15 2018 +0100
+++ b/client/src/components/map/contextbox/ImportSoundingresults.vue	Mon Nov 26 14:42:48 2018 +0100
@@ -80,7 +80,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  * License-Filename: LICENSES/AGPL-3.0.txt
  *
- * Copyright (C) 2018 by via donau 
+ * Copyright (C) 2018 by via donau
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
  *
--- a/client/src/components/map/contextbox/Staging.vue	Mon Nov 26 12:53:15 2018 +0100
+++ b/client/src/components/map/contextbox/Staging.vue	Mon Nov 26 14:42:48 2018 +0100
@@ -6,10 +6,10 @@
     <table class="table mb-0">
       <thead>
         <tr>
-          <th>Name</th>
+          <th>id</th>
           <th>Datatype</th>
           <th>Importdate</th>
-          <th>ImportID</th>
+          <th>Username</th>
           <th>&nbsp;</th>
           <th>&nbsp;</th>
         </tr>
@@ -17,11 +17,11 @@
       <tbody v-if="filteredData.length">
         <tr v-for="data in filteredData" :key="data.id">
           <td>
-            <a @click="zoomTo(data.location)" href="#">{{ data.name }}</a>
+            <a @click="zoomTo(data.location)" href="#">{{ data.id }}</a>
           </td>
-          <td>{{ data.type }}</td>
-          <td>{{ data.date }}</td>
-          <td>{{ data.importID }}</td>
+          <td>{{ data.kind }}</td>
+          <td>{{ data.enqueued }}</td>
+          <td>{{ data.user }}</td>
           <td>
             <button
               @click="toggleApproval(data.id, $options.STATES.APPROVED)"
@@ -59,7 +59,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  * License-Filename: LICENSES/AGPL-3.0.txt
  *
- * Copyright (C) 2018 by via donau 
+ * Copyright (C) 2018 by via donau
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
  *
@@ -88,44 +88,19 @@
     ...mapState("imports", ["staging"]),
     filteredData() {
       return this.staging.filter(data => {
-        const nameFound = data.name
-          .toLowerCase()
-          .includes(this.searchQuery.toLowerCase());
-        const dateFound = data.date
-          .toLowerCase()
-          .includes(this.searchQuery.toLowerCase());
-        const locationFound = data.location.find(coord => {
-          return coord
-            .toString()
-            .toLowerCase()
-            .includes(this.searchQuery.toLowerCase());
-        });
-        const statusFound = data.status
-          .toLowerCase()
-          .includes(this.searchQuery.toLowerCase());
-        const importIDFound = data.importID
-          .toLowerCase()
-          .includes(this.searchQuery.toLowerCase());
-        const typeFound = data.type
-          .toLowerCase()
-          .includes(this.searchQuery.toLowerCase());
-
-        return (
-          nameFound ||
-          dateFound ||
-          locationFound ||
-          statusFound ||
-          importIDFound ||
-          typeFound
+        const result = [data.id + "", data.enqueued, data.kind, data.user].some(
+          x => x.toLowerCase().includes(this.searchQuery.toLowerCase())
         );
+        return result;
       });
     }
   },
+  STATES: STATES,
   methods: {
     confirmReview() {
-      const message = this.demodata
+      const message = this.staging
         .map(x => {
-          return x.name + ": " + x.status;
+          return x.id + ": " + x.status;
         })
         .join("\n");
       displayInfo({
@@ -143,6 +118,7 @@
       return item.status === STATES.APPROVED;
     },
     zoomTo(coordinates) {
+      if (!coordinates) return;
       this.$store.commit("map/moveMap", {
         coordinates: coordinates,
         zoom: 17,
@@ -159,8 +135,8 @@
 };
 </script>
 
-<style lang="sass" scoped>   
-  
+<style lang="sass" scoped>
+
 .table th,
 td
   font-size: 0.9rem
--- a/client/src/store/imports.js	Mon Nov 26 12:53:15 2018 +0100
+++ b/client/src/store/imports.js	Mon Nov 26 14:42:48 2018 +0100
@@ -40,12 +40,15 @@
       state.imports = imports;
     },
     setStaging: (state, staging) => {
-      state.staging = staging;
+      const enriched = staging.map(x => {
+        return { ...x, status: STATES.NEEDSAPPROVAL };
+      });
+      state.staging = enriched;
     },
 
     toggleApproval: (state, change) => {
       const { id, newStatus } = change;
-      const stagedResult = this.state.staging.find(e => {
+      const stagedResult = state.staging.find(e => {
         return e.id === id;
       });
       if (stagedResult.status === newStatus) {