Mercurial > gemma

comparison client/src/components/importoverview/StretchDetails.vue @ 2605:11fd7ee37f10

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
overview2: added stretch zoom functionality
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 12 Mar 2019 17:08:49 +0100
parents 5d0e5159190f
children 39a05f8c34e6
comparison
equal deleted inserted replaced
2603:8d767359fddb 2605:11fd7ee37f10
1 <template> 1 <template>
2 <div>Stretches Detail</div> 2 <div>
3 <span class="empty">&nbsp;</span>
4 <a @click="zoomToStretch()" class="text-info pointer">{{
5 entry.summary.stretch
6 }}</a>
7 </div>
3 </template> 8 </template>
4 9
5 <script> 10 <script>
6 /* This is Free Software under GNU Affero General Public License v >= 3.0 11 /* This is Free Software under GNU Affero General Public License v >= 3.0
7 * without warranty, see README.md and license for details. 12 * without warranty, see README.md and license for details.
14 * Software engineering by Intevation GmbH 19 * Software engineering by Intevation GmbH
15 * 20 *
16 * Author(s): 21 * Author(s):
17 * Thomas Junk <thomas.junk@intevation.de> 22 * Thomas Junk <thomas.junk@intevation.de>
18 */ 23 */
24 import { displayError } from "@/lib/errors.js";
25 import { LAYERS } from "@/store/map.js";
26
19 export default { 27 export default {
20 name: "stretchdetails" 28 name: "stretchdetails",
29 props: ["entry"],
30 methods: {
31 moveToExtent(feature) {
32 this.$store.commit("map/moveToExtent", {
33 feature: feature,
34 zoom: 17,
35 preventZoomOut: true
36 });
37 },
38 zoomToStretch() {
39 const name = this.entry.summary.stretch;
40 this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES);
41 this.$store
42 .dispatch("imports/loadStretch", name)
43 .then(response => {
44 if (response.data.features.length < 1)
45 throw new Error("no feaures found for: " + name);
46 this.moveToExtent(response.data.features[0]);
47 })
48 .catch(error => {
49 console.log(error);
50 const { status, data } = error.response;
51 displayError({
52 title: this.$gettext("Backend Error"),
53 message: `${status}: ${data.message || data}`
54 });
55 });
56 }
57 }
21 }; 58 };
22 </script> 59 </script>
23 60
24 <style></style> 61 <style></style>