Mercurial > gemma
comparison client/src/morphtool/Morphtool.vue @ 1251:d1903250390b
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 ]) |