comparison client/src/components/fairway/Profiles.vue @ 3158:f91df0bc4986

client: compare surveys: prevent loading of differences from blocking the whole dialog The loading process of differences data is now visualized inside of the button to toggle between differences and the survey layer. The button is now disabled and says 'calculating differences' for the time of the calculation
author Markus Kottlaender <markus@intevation.de>
date Mon, 06 May 2019 12:21:28 +0200
parents b6cc4838d2c0
children 975efa874acf
comparison
equal deleted inserted replaced
3157:18a639e1f7f4 3158:f91df0bc4986
10 icon="chart-area" 10 icon="chart-area"
11 :title="profilesLable" 11 :title="profilesLable"
12 :closeCallback="close" 12 :closeCallback="close"
13 /> 13 />
14 <div class="box-body"> 14 <div class="box-body">
15 <UISpinnerOverlay 15 <UISpinnerOverlay v-if="surveysLoading || profileLoading" />
16 v-if="surveysLoading || profileLoading || differencesLoading"
17 />
18 <select 16 <select
19 @change="moveToBottleneck" 17 @change="moveToBottleneck"
20 v-model="selectedBottleneck" 18 v-model="selectedBottleneck"
21 class="form-control font-weight-bold" 19 class="form-control font-weight-bold"
22 > 20 >
94 </select> 92 </select>
95 </div> 93 </div>
96 </div> 94 </div>
97 <div class="mt-2 d-flex" v-if="additionalSurvey"> 95 <div class="mt-2 d-flex" v-if="additionalSurvey">
98 <button 96 <button
97 v-if="differencesLoading"
98 class="btn btn-info btn-xs flex-fill"
99 disabled
100 >
101 <font-awesome-icon icon="spinner" spin class="mr-1" />
102 <translate>Calculating differences</translate>
103 </button>
104 <button
99 class="btn btn-info btn-xs flex-fill" 105 class="btn btn-info btn-xs flex-fill"
100 @click="differencesVisible ? showSurvey() : showDifferences()" 106 @click="differencesVisible ? showSurvey() : showDifferences()"
107 v-else
101 > 108 >
102 <translate v-if="differencesVisible" key="showsurvey" 109 <translate v-if="differencesVisible" key="showsurvey"
103 >Show survey</translate 110 >Show survey</translate
104 > 111 >
105 <translate v-else key="showdifferences" 112 <translate v-else key="showdifferences"