Mercurial > gemma
comparison client/src/components/staging/StagingDetail.vue @ 1615:95641748383f
refac: extracted staging details view
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 18 Dec 2018 12:56:05 +0100 |
parents | |
children | 2e4ec4251c57 |
comparison
equal
deleted
inserted
replaced
1614:efc409e330a6 | 1615:95641748383f |
---|---|
1 <template> | |
2 <tr> | |
3 <td> | |
4 <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a> | |
5 </td> | |
6 <td>{{ data.kind.toUpperCase() }}</td> | |
7 <td>{{ formatSurveyDate(data.summary.date) }}</td> | |
8 <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td> | |
9 <td>{{ data.user }}</td> | |
10 <td> | |
11 <button | |
12 :class="{ | |
13 btn: true, | |
14 'btn-sm': true, | |
15 'btn-outline-success': needsApproval(data) || isRejected(data), | |
16 'btn-success': isApproved(data) | |
17 }" | |
18 @click="toggleApproval(data.id, $options.STATES.APPROVED)" | |
19 > | |
20 <font-awesome-icon icon="check"></font-awesome-icon> | |
21 </button> | |
22 </td> | |
23 <td> | |
24 <button | |
25 :class="{ | |
26 btn: true, | |
27 'btn-sm': true, | |
28 'btn-outline-danger': needsApproval(data) || isApproved(data), | |
29 'btn-danger': isRejected(data) | |
30 }" | |
31 @click="toggleApproval(data.id, $options.STATES.REJECTED)" | |
32 > | |
33 <font-awesome-icon icon="times"></font-awesome-icon> | |
34 </button> | |
35 </td> | |
36 </tr> | |
37 </template> | |
38 | |
39 <script> | |
40 /* This is Free Software under GNU Affero General Public License v >= 3.0 | |
41 * without warranty, see README.md and license for details. | |
42 * | |
43 * SPDX-License-Identifier: AGPL-3.0-or-later | |
44 * License-Filename: LICENSES/AGPL-3.0.txt | |
45 * | |
46 * Copyright (C) 2018 by via donau | |
47 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
48 * Software engineering by Intevation GmbH | |
49 * | |
50 * Author(s): | |
51 * Thomas Junk <thomas.junk@intevation.de> | |
52 */ | |
53 | |
54 import { formatSurveyDate } from "@/lib/date.js"; | |
55 import { STATES } from "@/store/imports.js"; | |
56 | |
57 export default { | |
58 name: "stagingdetail", | |
59 props: ["data"], | |
60 methods: { | |
61 formatSurveyDate(date) { | |
62 return formatSurveyDate(date); | |
63 }, | |
64 needsApproval(item) { | |
65 return item.status === STATES.NEEDSAPPROVAL; | |
66 }, | |
67 isRejected(item) { | |
68 return item.status === STATES.REJECTED; | |
69 }, | |
70 isApproved(item) { | |
71 return item.status === STATES.APPROVED; | |
72 }, | |
73 zoomTo(id) { | |
74 if (!id) return; | |
75 const soundingResult = this.filteredData.filter(x => x.id == id)[0]; | |
76 const { lat, lon, bottleneck, date } = soundingResult.summary; | |
77 const coordinates = [lat, lon]; | |
78 | |
79 this.$store.commit("map/moveMap", { | |
80 coordinates: coordinates, | |
81 zoom: 17, | |
82 preventZoomOut: true | |
83 }); | |
84 this.$store | |
85 .dispatch("bottlenecks/setSelectedBottleneck", bottleneck) | |
86 .then(() => { | |
87 this.$store.commit("bottlenecks/setSelectedSurveyByDate", date); | |
88 }); | |
89 }, | |
90 toggleApproval(id, newStatus) { | |
91 this.$store.commit("imports/toggleApproval", { | |
92 id: id, | |
93 newStatus: newStatus | |
94 }); | |
95 } | |
96 }, | |
97 STATES: STATES | |
98 }; | |
99 </script> | |
100 | |
101 <style lang="scss" scoped></style> |