changeset 1382:8b85032ed3cd

added loading animation to profile
author Markus Kottlaender <markus@intevation.de>
date Tue, 27 Nov 2018 14:52:59 +0100
parents 632ff17368c6
children cbd04809ee50 8d59457a5651 752b6bb2bee5
files client/src/components/map/fairway/Fairwayprofile.vue client/src/components/map/fairway/Profiles.vue
diffstat 2 files changed, 20 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/fairway/Fairwayprofile.vue	Tue Nov 27 14:30:04 2018 +0100
+++ b/client/src/components/map/fairway/Fairwayprofile.vue	Tue Nov 27 14:52:59 2018 +0100
@@ -1,7 +1,6 @@
 <template>
   <div
     :class="['position-relative', {show: showSplitscreen}]"
-    v-if="Object.keys(currentProfile).length"
   >
     <button
       class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle"
@@ -20,8 +19,12 @@
     <div class="profile bg-white position-relative d-flex flex-column">
       <h5
         class="headline border-bottom mb-0 py-2"
+        v-if="selectedBottleneck && selectedSurvey"
       >{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5>
       <div class="d-flex flex-fill">
+        <div class="loading d-flex justify-content-center align-items-center" v-if="surveysLoading || profileLoading">
+          <font-awesome-icon icon="spinner" spin />
+        </div>
         <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div>
       </div>
     </div>
@@ -56,6 +59,15 @@
 .show
   .profile
     height: 50vh
+
+.loading
+  background: rgba(255, 255, 255, 0.96)
+  position: absolute
+  z-index: 99
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
 </style>
 
 <script>
@@ -112,9 +124,10 @@
       "fairwayCoordinates",
       "waterLevels",
       "selectedWaterLevel",
-      "previousCuts"
+      "previousCuts",
+      "profileLoading"
     ]),
-    ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]),
+    ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey", "surveysLoading"]),
     additionalSurvey: {
       get() {
         return this.$store.getters["fairwayprofile/additionalSurvey"];
@@ -151,6 +164,9 @@
     currentData() {
       this.drawDiagram();
     },
+    additionalData() {
+      this.drawDiagram();
+    },
     width() {
       this.drawDiagram();
     },
--- a/client/src/components/map/fairway/Profiles.vue	Tue Nov 27 14:30:04 2018 +0100
+++ b/client/src/components/map/fairway/Profiles.vue	Tue Nov 27 14:52:59 2018 +0100
@@ -242,6 +242,7 @@
     coordinatesSelect(newValue) {
       if (newValue) {
         this.applyCoordinates(newValue);
+        this.coordinatesSelect = null;
       }
     }
   },