Mercurial > gemma

comparison client/src/morphtool/Morphtool.vue @ 1251:d1903250390b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
splitted mophtool into two components one shows the survey results and the other the info bar when a bottleneck is selected (and no profile is shown)
author Markus Kottlaender <markus@intevation.de>
date Wed, 21 Nov 2018 12:10:12 +0100
parents c14353e2cdb9
children da51fd6a72a0
comparison
equal deleted inserted replaced
1249:104d41ea7c15 1251:d1903250390b
1 <template> 1 <template>
2 <div class="mb-3 mr-3 ml-auto rounded position-relative"> 2 <div :class="['box ui-element rounded bg-white ml-auto mr-3 mb-3 text-nowrap', { expanded: selectedBottleneck && surveys && !selectedSurvey }]">
3 <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow"> 3 <div style="width: 15rem">
4 <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4> 4 <h5 class="mb-0 py-2 border-bottom">
5 <hr> 5 {{ selectedBottleneck }}
6 <div 6 </h5>
7 @click="$store.dispatch('fairwayprofile/clearSelection');" 7 <div class="p-3">
8 class="ui-element d-flex morphtoolminus position-absolute"
9 >
10 <i class="fa fa-close p-2"></i>
11 </div>
12 <div>
13 <div 8 <div
14 v-for="survey of surveys" 9 v-for="(survey, i) of surveys"
15 :key="survey.data_info" 10 :key="survey.data_info"
16 class="my-1" 11 :class="{ 'mt-1': i }"
17 @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)" 12 @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
18 > 13 >
19 <a href="#" @click.prevent>{{ survey.date_info }}</a> 14 <a href="#" @click.prevent>{{ survey.date_info }}</a>
20 </div> 15 </div>
21 </div> 16 </div>
22 </div> 17 </div>
23 <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto">
24 <div class="d-flex flex-row justify-content-between">
25 <h6 class="my-auto px-2">
26 {{ selectedBottleneck }}
27 ({{ selectedSurvey.date_info }})
28 </h6>
29 <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i>
30 <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
31 </div>
32 </div>
33 </div> 18 </div>
34 </template> 19 </template>
35
36 <style scoped lang="sass">
37 .morphtool
38 height: $icon-width
39 z-index: 2
40
41 .morphtoolminus
42 top: 0
43 right: 0
44 height: $icon-width
45 width: $icon-height
46 z-index: 2
47 </style>
48 20
49 <script> 21 <script>
50 /* 22 /*
51 * This is Free Software under GNU Affero General Public License v >= 3.0 23 * This is Free Software under GNU Affero General Public License v >= 3.0
52 * without warranty, see README.md and license for details. 24 * without warranty, see README.md and license for details.
58 * – Österreichische Wasserstraßen-Gesellschaft mbH 30 * – Österreichische Wasserstraßen-Gesellschaft mbH
59 * Software engineering by Intevation GmbH 31 * Software engineering by Intevation GmbH
60 * 32 *
61 * Author(s): 33 * Author(s):
62 * Thomas Junk <thomas.junk@intevation.de> 34 * Thomas Junk <thomas.junk@intevation.de>
35 * Markus Kottländer <markus.kottlaender@intevation.de>
63 */ 36 */
64 import { mapState, mapGetters } from "vuex"; 37 import { mapState } from "vuex";
65 38
66 export default { 39 export default {
67 name: "morphtool", 40 name: "morphtool",
68 computed: { 41 computed: {
69 ...mapGetters("map", ["getLayerByName"]),
70 ...mapState("map", ["openLayersMap", "cutTool"]),
71 ...mapState("application", ["showSplitscreen"]),
72 ...mapState("fairwayprofile", ["currentProfile"]),
73 ...mapState("bottlenecks", [ 42 ...mapState("bottlenecks", [
74 "selectedBottleneck", 43 "selectedBottleneck",
75 "surveys", 44 "surveys",
76 "selectedSurvey" 45 "selectedSurvey"
77 ]) 46 ])