Mercurial > gemma
annotate client/src/components/map/contextbox/Staging.vue @ 1276:aec9ed491dad
more cleanup in client/src
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 07:40:23 +0100 |
parents | |
children | 60e15c2d26a2 |
rev | line source |
---|---|
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
2 <div> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 <i class="fa fa-list-ol mr-2"></i> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 Staging Area |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 </h6> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 <table class="table mb-0"> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 <thead> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 <tr> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 <th>Name</th> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 <th>Datatype</th> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 <th>Importdate</th> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 <th>ImportID</th> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 <th> </th> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 </tr> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 </thead> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 <tbody v-if="filteredData.length"> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 <tr v-for="data in filteredData" :key="data.id"> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 <td> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 <a @click="zoomTo(data.location)" href="#">{{ data.name }}</a> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 </td> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 <td>{{ data.type }}</td> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 <td>{{ data.date }}</td> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 <td>{{ data.importID }}</td> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 <td> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 <button class="btn btn-outline-info"> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 <i class="fa fa-thumbs-up"></i> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 </button> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 <button class="btn btn-outline-info"> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 <i class="fa fa-thumbs-down"></i> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 </button> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 </td> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 </tr> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 </tbody> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 <tbody v-else> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 <tr> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 <td class="text-center" colspan="6">No results.</td> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 </tr> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 </tbody> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 </table> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 <div class="p-3" v-if="filteredData.length"> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 <button class="btn btn-info">Confirm</button> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 </div> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 </div> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 </template> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 <script> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 import { mapState } from "vuex"; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 const demodata = [ |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 id: 1, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 name: "B1", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 date: "2018-11-19 10:23", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 location: [16.5364, 48.1471], |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 status: "Not approved", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 importID: "123456789", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 type: "bottleneck" |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 id: 2, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 name: "B2", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 date: "2018-11-19 10:24", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 location: [16.5364, 48.1472], |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 status: "Not approved", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 importID: "123456789", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 type: "bottleneck" |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 id: 3, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 name: "s1", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 date: "2018-11-13 10:25", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 location: [16.5364, 48.1473], |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 status: "Not approved", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 importID: "987654321", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 type: "soundingresult" |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 id: 4, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 name: "s2", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 date: "2018-11-13 10:26", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 location: [16.5364, 48.1474], |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 status: "Not approved", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 importID: "987654321", |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 type: "soundingresult" |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 ]; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 export default { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 computed: { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 ...mapState("application", ["searchQuery"]), |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 filteredData() { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 return demodata.filter(data => { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 const nameFound = data.name |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 .toLowerCase() |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 .includes(this.searchQuery.toLowerCase()); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 const dateFound = data.date |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 .toLowerCase() |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 .includes(this.searchQuery.toLowerCase()); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 const locationFound = data.location.find(coord => { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 return coord |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 .toString() |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 .toLowerCase() |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 .includes(this.searchQuery.toLowerCase()); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 }); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 const statusFound = data.status |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 .toLowerCase() |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 .includes(this.searchQuery.toLowerCase()); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 const importIDFound = data.importID |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 .toLowerCase() |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 .includes(this.searchQuery.toLowerCase()); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 const typeFound = data.type |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 .toLowerCase() |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 .includes(this.searchQuery.toLowerCase()); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 return ( |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 nameFound || |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 dateFound || |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 locationFound || |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 statusFound || |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 importIDFound || |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 typeFound |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 ); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 }); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 methods: { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 zoomTo(coordinates) { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 this.$store.commit("map/moveMap", { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 coordinates: coordinates, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 zoom: 17, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
133 preventZoomOut: true |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 }); |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
136 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 }; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
138 </script> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 <style lang="sass" scoped> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 .table th, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142 td |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
143 font-size: 0.9rem |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
144 border-top: 0px !important |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
145 border-bottom-width: 1px |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
146 text-align: left |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
147 padding: 0.5rem !important |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
148 </style> |