Mercurial > gemma
comparison client/src/bottlenecks/Bottlenecks.vue @ 1055:1ff8c072df18
WIP: Bottleneck list/table
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 25 Oct 2018 15:05:20 +0200 |
parents | |
children | c9badb264d16 |
comparison
equal
deleted
inserted
replaced
1052:e3f3e645792b | 1055:1ff8c072df18 |
---|---|
1 <template> | |
2 <div :class="bottlenecksStyle"> | |
3 <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks"> | |
4 <i class="fa fa-close"></i> | |
5 </div> | |
6 | |
7 <div v-if="!this.bottlenecksCollapsed"> | |
8 <h4>Bottlenecks</h4> | |
9 <hr class="mb-0"> | |
10 <div style="max-height: 500px; overflow-y: scroll"> | |
11 <table class="table text-left mb-0" style="margin-top: -1px;"> | |
12 <tr v-for="(bottleneck, index) in bottlenecks"> | |
13 <td> | |
14 <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)"> | |
15 {{ bottleneck.name }} | |
16 </a> | |
17 </td> | |
18 </tr> | |
19 </table> | |
20 </div> | |
21 </div> | |
22 </div> | |
23 </template> | |
24 | |
25 <script> | |
26 /* | |
27 * This is Free Software under GNU Affero General Public License v >= 3.0 | |
28 * without warranty, see README.md and license for details. | |
29 * | |
30 * SPDX-License-Identifier: AGPL-3.0-or-later | |
31 * License-Filename: LICENSES/AGPL-3.0.txt | |
32 * | |
33 * Copyright (C) 2018 by via donau | |
34 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
35 * Software engineering by Intevation GmbH | |
36 * | |
37 * Author(s): | |
38 * Markus Kottländer <markus.kottlaender@intevation.de> | |
39 */ | |
40 import { mapState } from "vuex"; | |
41 import { fromLonLat } from "ol/proj"; | |
42 | |
43 export default { | |
44 name: "bottlenecks", | |
45 computed: { | |
46 ...mapState("application", ["bottlenecksCollapsed"]), | |
47 ...mapState("bottlenecks", ["bottlenecks"]), | |
48 ...mapState("mapstore", ["openLayersMap"]), | |
49 bottlenecksStyle() { | |
50 return { | |
51 "ui-element": true, | |
52 bottlenecks: true, | |
53 overlay: true, | |
54 bottleneckscollapsed: this.bottlenecksCollapsed, | |
55 bottlenecksextended: !this.bottlenecksCollapsed, | |
56 shadow: true | |
57 }; | |
58 } | |
59 }, | |
60 methods: { | |
61 // TODO: make this central, duplicates code from application/Topbar.vue | |
62 moveToBottleneck(bottleneck) { | |
63 if (bottleneck.geom.type == "Point") { | |
64 let view = this.openLayersMap.getView(); | |
65 const currentZoom = view.getZoom(); | |
66 const newZoom = Math.max(17, currentZoom); | |
67 view.animate( | |
68 { | |
69 zoom: newZoom, | |
70 center: fromLonLat( | |
71 bottleneck.geom.coordinates, | |
72 view.getProjection() | |
73 ) | |
74 }, | |
75 700 | |
76 ); | |
77 } | |
78 this.$store.commit("application/toggleBottlenecks"); | |
79 } | |
80 }, | |
81 mounted() { | |
82 this.$store.dispatch("bottlenecks/loadBottlenecks"); | |
83 } | |
84 }; | |
85 </script> | |
86 | |
87 <style lang="scss"> | |
88 .bottlenecks { | |
89 position: absolute; | |
90 z-index: -2; | |
91 top: $offset; | |
92 left: 64px; | |
93 background-color: #ffffff; | |
94 padding-top: $offset; | |
95 opacity: $slight-transparent; | |
96 border-radius: $border-radius; | |
97 } | |
98 | |
99 .bottleneckscollapsed { | |
100 width: 0; | |
101 height: 0; | |
102 transition: $transition-fast; | |
103 } | |
104 | |
105 .bottlenecksextended { | |
106 min-height: $sidebar-height; | |
107 width: 500px | |
108 } | |
109 | |
110 .close-bottlenecks { | |
111 position: absolute; | |
112 z-index: 2; | |
113 right: 0; | |
114 top: 7px; | |
115 border-radius: $border-radius; | |
116 height: $icon-width; | |
117 width: $icon-height; | |
118 display: none; | |
119 } | |
120 | |
121 .bottlenecksextended .close-bottlenecks { | |
122 display: block; | |
123 } | |
124 | |
125 </style> |