Mercurial > gemma

comparison client/src/components/map/contextbox/Staging.vue @ 1276:aec9ed491dad

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
more cleanup in client/src
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 07:40:23 +0100
parents
children 60e15c2d26a2
comparison
equal deleted inserted replaced
1275:9e23a2b02b32 1276:aec9ed491dad
1 <template>
2 <div>
3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
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>&nbsp;</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 &nbsp;
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>