Mercurial > gemma

changeset 1415:d4fc5f3c1252

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
improved style of bottleneck list added loading spinner for survey loading
author Markus Kottlaender <markus@intevation.de>
date Thu, 29 Nov 2018 11:02:51 +0100
parents 92d9dec88add
children 3af7ad9717e2
files client/src/components/map/contextbox/Bottlenecks.vue
diffstat 1 files changed, 32 insertions(+), 16 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Bottlenecks.vue	Thu Nov 29 10:29:57 2018 +0100
+++ b/client/src/components/map/contextbox/Bottlenecks.vue	Thu Nov 29 11:02:51 2018 +0100
@@ -28,32 +28,36 @@
       <div
         v-for="bottleneck in filteredAndSortedBottlenecks()"
         :key="bottleneck.properties.name"
-        class="border-top row mx-0 py-2"
+        class="border-top row bottleneck-row mx-0"
       >
-        <div class="col-5 text-left">
+        <div class="col-5 py-2 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">
+        <div class="col-2 py-2">
+          {{ displayCurrentSurvey(bottleneck.properties.current) }}
+        </div>
+        <div class="col-3 py-2">
+          {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}
+        </div>
+        <div class="col-2 pr-0 text-right">
           <button
             type="button"
-            class="btn btn-sm btn-info"
+            class="btn btn-sm btn-info rounded-0 h-100"
             @click="toggleBottleneck(bottleneck.properties.name)"
+            v-if="bottleneck.properties.current"
           >
-            <font-awesome-icon icon="angle-down"></font-awesome-icon>
+            <font-awesome-icon icon="spinner" fixed-width spin v-if="loading === bottleneck.properties.name"></font-awesome-icon>
+            <font-awesome-icon icon="angle-down" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck !== bottleneck.properties.name"></font-awesome-icon>
+            <font-awesome-icon icon="angle-up" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck === bottleneck.properties.name"></font-awesome-icon>
           </button>
         </div>
-        <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]">
+        <div :class="['col-12 p-0', 'surveys', {open: openBottleneck === bottleneck.properties.name}]">
           <a
             href="#"
-            class="d-block p-2"
+            class="d-block px-3 py-2"
             v-for="(survey, index) in openBottleneckSurveys"
             :key="index"
             @click="selectSurvey(survey, bottleneck)"
@@ -90,7 +94,8 @@
       sortColumn: "name",
       sortDirection: "ASC",
       openBottleneck: null,
-      openBottleneckSurveys: null
+      openBottleneckSurveys: null,
+      loading: null
     };
   },
   computed: {
@@ -178,6 +183,7 @@
         this.openBottleneck = null;
       } else {
         this.openBottleneck = name;
+        this.loading = name;
 
         HTTP.get("/surveys/" + name, {
           headers: {
@@ -194,7 +200,8 @@
               title: "Backend Error",
               message: `${status}: ${data.message || data}`
             });
-          });
+          })
+          .finally(() => (this.loading = null));
       }
     },
     displayCurrentSurvey(current) {
@@ -213,14 +220,23 @@
 <style lang="sass" scoped>
 .bottleneck-list
   overflow-y: auto
+  .bottleneck-row
+    a
+      text-decoration: none
+    &:hover
+      background: #fbfbfb
 
 .surveys
   max-height: 0
+  min-height: 0
   overflow: hidden
-  transition: max-height 0.3s ease
+  a
+    &:hover
+      background: #f3f3f3
 
 .surveys.open
-  max-height: 999px
+  max-height: 250px
+  overflow: auto
 
 .sort-link
   color: #444