Mercurial > gemma
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; } } },