Mercurial > gemma

changeset 4507:a912b1458834

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: Map: use rgba for styling layers
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 02 Oct 2019 16:25:10 +0200
parents e020e6e34ad7
children d53c78cd53f3
files client/src/components/map/Map.vue
diffstat 1 files changed, 27 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/Map.vue	Wed Oct 02 16:09:10 2019 +0200
+++ b/client/src/components/map/Map.vue	Wed Oct 02 16:25:10 2019 +0200
@@ -319,23 +319,37 @@
       this.$store.dispatch("map/initIdentifyTool", this.map);
     },
     loadStyles() {
+      const getRGBA = color => {
+        return (
+          "rgba(" +
+          parseInt(color.slice(1, 3), 16) +
+          ", " +
+          parseInt(color.slice(3, 5), 16) +
+          ", " +
+          parseInt(color.slice(5, 7), 16) +
+          (color.length > 7
+            ? ", " + parseInt(color.slice(7, 9), 16) / 255
+            : "") +
+          ")"
+        );
+      };
       // load configured bottleneck colors
       HTTP.get("/system/settings", {
         headers: { "X-Gemma-Auth": localStorage.getItem("token") }
       }).then(response => {
-        let btlnStrokeC = response.data.bottlenecks_stroke,
-          btlnFillC = response.data.bottlenecks_fill,
-          strFillC = response.data.stretches_fill,
-          strStrokeC = response.data.stretches_stroke,
-          secStrokeC = response.data.sections_stroke,
-          secFillC = response.data.sections_fill,
-          fwd1StrokeC = response.data.fairwaydimensionslos1_stroke,
-          fwd1FillC = response.data.fairwaydimensionslos1_fill,
-          fwd2StrokeC = response.data.fairwaydimensionslos2_stroke,
-          fwd2FillC = response.data.fairwaydimensionslos2_fill,
-          fwd3StrokeC = response.data.fairwaydimensionslos3_stroke,
-          fwd3FillC = response.data.fairwaydimensionslos3_fill,
-          wwpStokeC = response.data.waterwayprofiles_stroke;
+        let btlnStrokeC = getRGBA(response.data.bottlenecks_stroke),
+          btlnFillC = getRGBA(response.data.bottlenecks_fill),
+          strFillC = getRGBA(response.data.stretches_fill),
+          strStrokeC = getRGBA(response.data.stretches_stroke),
+          secStrokeC = getRGBA(response.data.sections_stroke),
+          secFillC = getRGBA(response.data.sections_fill),
+          fwd1StrokeC = getRGBA(response.data.fairwaydimensionslos1_stroke),
+          fwd1FillC = getRGBA(response.data.fairwaydimensionslos1_fill),
+          fwd2StrokeC = getRGBA(response.data.fairwaydimensionslos2_stroke),
+          fwd2FillC = getRGBA(response.data.fairwaydimensionslos2_fill),
+          fwd3StrokeC = getRGBA(response.data.fairwaydimensionslos3_stroke),
+          fwd3FillC = getRGBA(response.data.fairwaydimensionslos3_fill),
+          wwpStokeC = getRGBA(response.data.waterwayprofiles_stroke);
         let btlnStyle = new Style({
             stroke: new Stroke({
               color: btlnStrokeC,