Mercurial > gemma

annotate client/src/components/layers/Layerselect.vue @ 2952:a3017800e045

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: map legend: reduced code
author Markus Kottlaender <markus@intevation.de>
date Fri, 05 Apr 2019 16:13:04 +0200
parents 1ac58e024942
children 3c1b9a6ee04e
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>
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
2 <div>
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
3 <div class="form-check d-flex flex-start">
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
4 <input
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
5 class="form-check-input"
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
6 @change="visibilityToggled"
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
7 :id="name"
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
8 type="checkbox"
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
9 :checked="layer.data.getVisible()"
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
10 />
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
11 <LegendElement :name="name"></LegendElement>
2154
a08e0f532304 staging: improve UI
Thomas Junk <thomas.junk@intevation.de>
parents: 1927
diff changeset
12 <label
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
13 class="pointer layername form-check-label ml-2"
2154
a08e0f532304 staging: improve UI
Thomas Junk <thomas.junk@intevation.de>
parents: 1927
diff changeset
14 @click="visibilityToggled"
a08e0f532304 staging: improve UI
Thomas Junk <thomas.junk@intevation.de>
parents: 1927
diff changeset
15 >
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
16 {{ name }}
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
17 </label>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 </div>
2343
33d2ef9f9e5d client: use the name constants for Layer names
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2154
diff changeset
19 <div v-if="isVisible && isBottleneckIsolineLayer">
1927
5a37ee321651 client: make isolines legend graphic internally availableo
Bernhard Reiter <bernhard@intevation.de>
parents: 1926
diff changeset
20 <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" />
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
21 </div>
2932
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
22 <div v-if="isVisible && isBottleneckDifferences">
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
23 <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" />
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
24 </div>
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
25 </div>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 <script>
1362
ca33ad696594 remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1361
diff changeset
29 /* This is Free Software under GNU Affero General Public License v >= 3.0
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 * without warranty, see README.md and license for details.
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
31 *
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 * SPDX-License-Identifier: AGPL-3.0-or-later
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 * License-Filename: LICENSES/AGPL-3.0.txt
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
34 *
1926
1220cfe96efd client: prepare isoline legend graphic for reuse
Bernhard Reiter <bernhard@intevation.de>
parents: 1669
diff changeset
35 * Copyright (C) 2018, 2019 by via donau
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 * – Österreichische Wasserstraßen-Gesellschaft mbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 * Software engineering by Intevation GmbH
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1277
diff changeset
38 *
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 * Author(s):
1926
1220cfe96efd client: prepare isoline legend graphic for reuse
Bernhard Reiter <bernhard@intevation.de>
parents: 1669
diff changeset
40 * * Thomas Junk <thomas.junk@intevation.de>
1220cfe96efd client: prepare isoline legend graphic for reuse
Bernhard Reiter <bernhard@intevation.de>
parents: 1669
diff changeset
41 * * Bernhard Reiter <bernhard.reiter@intevation.de>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 */
1613
f2d24dceecc7 refac: cleanup import paths
Thomas Junk <thomas.junk@intevation.de>
parents: 1558
diff changeset
43 import { HTTP } from "@/lib/http";
1927
5a37ee321651 client: make isolines legend graphic internally availableo
Bernhard Reiter <bernhard@intevation.de>
parents: 1926
diff changeset
44 import { mapState } from "vuex";
2343
33d2ef9f9e5d client: use the name constants for Layer names
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2154
diff changeset
45 import { LAYERS } from "@/store/map.js";
2920
c1f2b9148cc8 client: removed more unnecessary closing tags and opzimized imports
Markus Kottlaender <markus@intevation.de>
parents: 2851
diff changeset
46
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 export default {
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
48 props: ["layer", "name"],
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 name: "layerselect",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 components: {
1669
16fb9667ddf8 refac: use dynamic imports for components
Thomas Junk <thomas.junk@intevation.de>
parents: 1613
diff changeset
51 LegendElement: () => import("./LegendElement.vue")
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 },
1927
5a37ee321651 client: make isolines legend graphic internally availableo
Bernhard Reiter <bernhard@intevation.de>
parents: 1926
diff changeset
53 computed: {
2932
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
54 ...mapState("map", [
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
55 "isolinesLegendImgDataURL",
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
56 "differencesLegendImgDataURL"
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
57 ]),
2343
33d2ef9f9e5d client: use the name constants for Layer names
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2154
diff changeset
58 isBottleneckIsolineLayer() {
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
59 return this.name == LAYERS.BOTTLENECKISOLINE;
2932
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
60 },
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
61 isBottleneckDifferences() {
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
62 return this.name == LAYERS.DIFFERENCES;
2343
33d2ef9f9e5d client: use the name constants for Layer names
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2154
diff changeset
63 }
1927
5a37ee321651 client: make isolines legend graphic internally availableo
Bernhard Reiter <bernhard@intevation.de>
parents: 1926
diff changeset
64 },
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 methods: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 visibilityToggled() {
2952
a3017800e045 client: map legend: reduced code
Markus Kottlaender <markus@intevation.de>
parents: 2951
diff changeset
67 this.$store.commit("map/toggleVisibilityByName", this.name);
1272
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 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 created() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 // fetch legend image for bottleneck isolines
1927
5a37ee321651 client: make isolines legend graphic internally availableo
Bernhard Reiter <bernhard@intevation.de>
parents: 1926
diff changeset
72 // directly read it as dataURL so it is reusable later
2343
33d2ef9f9e5d client: use the name constants for Layer names
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2154
diff changeset
73 if (this.isBottleneckIsolineLayer) {
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 const src =
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 "/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sounding_results_contour_lines_geoserver&legend_options=columns:4;fontAntiAliasing:true";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 HTTP.get(src, {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 headers: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 Accept: "image/png",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 "X-Gemma-Auth": localStorage.getItem("token")
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 responseType: "blob"
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 }).then(response => {
1926
1220cfe96efd client: prepare isoline legend graphic for reuse
Bernhard Reiter <bernhard@intevation.de>
parents: 1669
diff changeset
83 var that = this;
1220cfe96efd client: prepare isoline legend graphic for reuse
Bernhard Reiter <bernhard@intevation.de>
parents: 1669
diff changeset
84 const reader = new FileReader();
1220cfe96efd client: prepare isoline legend graphic for reuse
Bernhard Reiter <bernhard@intevation.de>
parents: 1669
diff changeset
85 reader.onload = function() {
1927
5a37ee321651 client: make isolines legend graphic internally availableo
Bernhard Reiter <bernhard@intevation.de>
parents: 1926
diff changeset
86 that.$store.commit("map/isolinesLegendImgDataURL", this.result);
1926
1220cfe96efd client: prepare isoline legend graphic for reuse
Bernhard Reiter <bernhard@intevation.de>
parents: 1669
diff changeset
87 };
1220cfe96efd client: prepare isoline legend graphic for reuse
Bernhard Reiter <bernhard@intevation.de>
parents: 1669
diff changeset
88 reader.readAsDataURL(response.data);
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 }
2932
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
91 if (this.isBottleneckDifferences) {
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
92 const src =
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
93 "/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sounding_differences&legend_options=columns:4;fontAntiAliasing:true";
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
94 HTTP.get(src, {
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
95 headers: {
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
96 Accept: "image/png",
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
97 "X-Gemma-Auth": localStorage.getItem("token")
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
98 },
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
99 responseType: "blob"
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
100 }).then(response => {
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
101 var that = this;
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
102 const reader = new FileReader();
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
103 reader.onload = function() {
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
104 that.$store.commit("map/differencesLegendImgDataURL", this.result);
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
105 };
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
106 reader.readAsDataURL(response.data);
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
107 });
173ce013a021 layers: difference layer now contains legend
Thomas Junk <thomas.junk@intevation.de>
parents: 2920
diff changeset
108 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 </script>