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