Mercurial > gemma

annotate client/src/components/Zoom.vue @ 2190:ecb0ad836aa0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
linting
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 12 Feb 2019 10:04:01 +0100
parents 9212b3d60f2a
children 236da7c20eac
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
2 <div
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
3 class="d-flex buttoncontainer shadow-xs mb-3 position-absolute"
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
4 :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''"
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
5 >
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
6 <button
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
7 class="zoomButton border-0 bg-white rounded-left ui-element"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
8 @click="zoomOut"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
9 >
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
10 <font-awesome-icon icon="minus"></font-awesome-icon>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
11 </button>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
12 <button
2184
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
13 class="zoomButton border-0 bg-white ui-element border-right"
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
14 @click="refreshMap"
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
15 >
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
16 <font-awesome-icon icon="redo"></font-awesome-icon>
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
17 </button>
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
18 <button
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
19 class="zoomButton border-0 bg-white rounded-right ui-element border-right"
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
20 @click="zoomIn"
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
21 >
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
22 <font-awesome-icon icon="plus"></font-awesome-icon>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
23 </button>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
24 </div>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
27 <style lang="scss" scoped>
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
28 .buttoncontainer {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
29 bottom: 0;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
30 left: 50%;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
31 margin-left: -$icon-width;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
32 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
34 .zoomButton {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
35 min-height: $icon-width;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
36 min-width: $icon-width;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
37 z-index: 1;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
38 outline: none;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
39 color: #666;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1397
diff changeset
40 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 </style>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 <script>
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
43 /* This is Free Software under GNU Affero General Public License v >= 3.0
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
44 * without warranty, see README.md and license for details.
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
45 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
46 * SPDX-License-Identifier: AGPL-3.0-or-later
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
47 * License-Filename: LICENSES/AGPL-3.0.txt
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
48 *
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
49 * Copyright (C) 2018 by via donau
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
50 * – Österreichische Wasserstraßen-Gesellschaft mbH
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
51 * Software engineering by Intevation GmbH
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
52 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
53 * Author(s):
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
54 * Markus Kottländer <markus@intevation.de>
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
55 * Thomas Junk <thomas.junk@intevation.de>
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
56 */
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 import { mapState } from "vuex";
2190
ecb0ad836aa0 linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2185
diff changeset
58 import { Vector as VectorLayer } from "ol/layer.js";
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 name: "zoom",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 computed: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 ...mapState("map", ["openLayersMap"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 ...mapState("application", ["showSplitscreen"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 zoomLevel: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 get() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 return this.openLayersMap.getView().getZoom();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 set(value) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 methods: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 zoomIn() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 this.zoomLevel = this.zoomLevel + 1;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 zoomOut() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 this.zoomLevel = this.zoomLevel - 1;
2184
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
80 },
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
81 refreshMap() {
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
82 let layers = this.openLayersMap.getLayers().getArray();
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
83 for (let i = 0; i < layers.length; i++) {
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
84 let layer = layers[i];
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
85 if (layer instanceof VectorLayer) {
2185
9212b3d60f2a linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2184
diff changeset
86 console.log(layer.get("source").loader_);
9212b3d60f2a linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2184
diff changeset
87 layer.getSource().clear(true);
9212b3d60f2a linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2184
diff changeset
88 layer.getSource().refresh({ force: true });
2184
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
89 }
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
90 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 </script>