Mercurial > gemma

comparison client/src/fairway/Fairwayprofile.vue @ 1146:74e180ad3d6b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fairway profile UI improvements splitscreen button position at top of profile container bottleneck name and survey date as headline in profile container moved logout button to sidebar menu to avoid unnecessary overlapping
author Markus Kottlaender <markus@intevation.de>
date Tue, 13 Nov 2018 11:12:12 +0100
parents dc3f0277628a
children fb5c83d4ea1d
comparison
equal deleted inserted replaced
1144:5f98d0c9d738 1146:74e180ad3d6b
1 <template> 1 <template>
2 <div class="profiledisplay d-flex flex-row"> 2 <div :class="['position-relative', {show: showSplitscreen}]" v-if="Object.keys(currentProfile).length">
3 <div class="fairwayprofile"></div> 3 <button
4 <div class="additionalsurveys d-flex flex-column"> 4 class="rounded bg-white border-0 position-absolute splitscreen-toggle shadow"
5 <small class="label">Available Additional Surveys</small> 5 @click="$store.commit('application/showSplitscreen', false)"
6 <select v-model="additionalSurvey"> 6 v-if="showSplitscreen">
7 <option value="">None</option> 7 <i class="fa fa-angle-down"></i>
8 <option 8 </button>
9 v-for="survey in additionalSurveys" 9 <button
10 :key="survey.date_info" 10 class="rounded bg-white border-0 position-absolute clear-selection shadow"
11 :value="survey" 11 @click="$store.dispatch('fairwayprofile/clearSelection');"
12 >{{survey.date_info}}</option> 12 v-if="showSplitscreen">
13 </select> 13 <i class="fa fa-times text-danger"></i>
14 <small class="mt-2"> 14 </button>
15 <b>Start:</b> 15 <div class="profile d-flex flex-column">
16 <br> 16 <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5>
17 Lat: {{ startPoint[1] }} 17 <div class="d-flex flex-fill">
18 <br> 18 <div class="fairwayprofile flex-fill"></div>
19 Lon: {{ startPoint[0] }} 19 <div class="additionalsurveys d-flex flex-column">
20 <br> 20 <small class="label">Available Additional Surveys</small>
21 <b>End:</b> 21 <select v-model="additionalSurvey">
22 <br> 22 <option value="">None</option>
23 Lat: {{ endPoint[1] }} 23 <option
24 <br> 24 v-for="survey in additionalSurveys"
25 Lon: {{ endPoint[0] }} 25 :key="survey.date_info"
26 <br> 26 :value="survey"
27 </small> 27 >{{survey.date_info}}</option>
28 </select>
29 <small class="mt-2">
30 <b>Start:</b>
31 <br>
32 Lat: {{ startPoint[1] }}
33 <br>
34 Lon: {{ startPoint[0] }}
35 <br>
36 <b>End:</b>
37 <br>
38 Lat: {{ endPoint[1] }}
39 <br>
40 Lon: {{ endPoint[0] }}
41 <br>
42 </small>
43 </div>
44 </div>
28 </div> 45 </div>
29 </div> 46 </div>
30 </template> 47 </template>
31 48
32 <style scoped lang="scss"> 49 <style lang="sass" scoped>
33 .label { 50 .profile
34 margin-bottom: $small-offset; 51 background-color: white
35 } 52 width: 100vw
36 .waterlevelselection { 53 height: 0
37 margin-top: $large-offset; 54 overflow: hidden
38 margin-right: $large-offset; 55 position: relative
39 } 56 z-index: 2
40 57
41 .additionalsurveys { 58 .splitscreen-toggle,
42 width: 300px; 59 .clear-selection
43 margin-top: $large-offset; 60 top: -$icon-height
44 margin-bottom: auto; 61 right: $icon-width + $offset + $offset
45 margin-right: $large-offset; 62 width: $icon-width
46 margin-left: auto; 63 height: $icon-height
47 } 64 margin-top: 2px
48 65 z-index: 1
49 .additionalsurveys input { 66 outline: none
50 margin-right: $small-offset; 67
51 } 68 .clear-selection
52 69 right: $offset
53 .profiledisplay { 70
54 width: 100vw; 71 .show
55 } 72 .profile
56 73 height: 50vh
57 .fairwayprofile { 74
58 background-color: white; 75 .label
59 margin-left: auto; 76 margin-bottom: $small-offset
60 margin-right: $offset; 77
61 margin-top: auto; 78 .waterlevelselection
62 margin-bottom: auto; 79 margin-top: $large-offset
63 } 80 margin-right: $large-offset
81
82 .additionalsurveys
83 width: 200px
84 margin-top: $large-offset
85 margin-bottom: auto
86 margin-right: $large-offset
87 margin-left: auto
88
89 .additionalsurveys input
90 margin-right: $small-offset
91
92 .fairwayprofile
93 background-color: white
94 margin: $offset
95 margin-top: 0
64 </style> 96 </style>
65 97
66 <script> 98 <script>
67 /* 99 /*
68 * This is Free Software under GNU Affero General Public License v >= 3.0 100 * This is Free Software under GNU Affero General Public License v >= 3.0
94 "yScaleRight", 126 "yScaleRight",
95 "margin", 127 "margin",
96 "additionalSurveys" 128 "additionalSurveys"
97 ], 129 ],
98 computed: { 130 computed: {
131 ...mapState("application", ["showSplitscreen"]),
99 ...mapState("fairwayprofile", [ 132 ...mapState("fairwayprofile", [
100 "startPoint", 133 "startPoint",
101 "endPoint", 134 "endPoint",
102 "currentProfile", 135 "currentProfile",
103 "minAlt", 136 "minAlt",
105 "totalLength", 138 "totalLength",
106 "fairwayCoordinates", 139 "fairwayCoordinates",
107 "waterLevels", 140 "waterLevels",
108 "selectedWaterLevel" 141 "selectedWaterLevel"
109 ]), 142 ]),
110 ...mapState("bottlenecks", ["selectedSurvey"]), 143 ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]),
111 additionalSurvey: { 144 additionalSurvey: {
112 get() { 145 get() {
113 return this.$store.getters["fairwayprofile/additionalSurvey"]; 146 return this.$store.getters["fairwayprofile/additionalSurvey"];
114 }, 147 },
115 set(value) { 148 set(value) {
144 return { 177 return {
145 wait: false 178 wait: false
146 }; 179 };
147 }, 180 },
148 watch: { 181 watch: {
182 showSplitscreen() {
183 this.drawDiagram();
184 },
149 currentData() { 185 currentData() {
150 this.drawDiagram(); 186 this.drawDiagram();
151 }, 187 },
152 width() { 188 width() {
153 this.drawDiagram(); 189 this.drawDiagram();