# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1549531844 -3600
# Node ID 55bedb39295a461025c1076bff96557106c093ca
# Parent  22bbd0d0500e63686afd00348d8001021017f89c
feat: clicking on stretches activates according layer

diff -r 22bbd0d0500e -r 55bedb39295a client/src/components/ImportStretches.vue
--- a/client/src/components/ImportStretches.vue	Thu Feb 07 09:15:39 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Thu Feb 07 10:30:44 2019 +0100
@@ -263,6 +263,7 @@
 import { mapState, mapGetters } from "vuex";
 import { displayError, displayInfo } from "@/lib/errors.js";
 import { formatSurveyDate } from "@/lib/date.js";
+import { LAYERS } from "@/store/map.js";
 
 export default {
   name: "importstretches",
@@ -356,6 +357,7 @@
       });
     },
     moveMapToStretch(index) {
+      this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES);
       this.$store.commit("map/moveToExtent", {
         feature: this.stretches[index],
         zoom: 17,
@@ -406,6 +408,7 @@
       this.edit = true;
     },
     togglePipette(t) {
+      this.$store.commit("map/setLayerVisible", LAYERS.DISTANCEMARKSAXIS);
       if (t === "start") {
         this.pipetteStart = !this.pipetteStart;
         this.pipetteEnd = false;
diff -r 22bbd0d0500e -r 55bedb39295a client/src/components/staging/StagingDetail.vue
--- a/client/src/components/staging/StagingDetail.vue	Thu Feb 07 09:15:39 2019 +0100
+++ b/client/src/components/staging/StagingDetail.vue	Thu Feb 07 10:30:44 2019 +0100
@@ -162,6 +162,7 @@
 import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter.js";
 import { displayError } from "@/lib/errors.js";
 import { mapState } from "vuex";
+import { LAYERS } from "@/store/map.js";
 
 export default {
   name: "stagingdetail",
@@ -206,6 +207,7 @@
   },
   methods: {
     zoomToStretch(name) {
+      this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES);
       this.$store
         .dispatch("imports/loadStretch", name)
         .then(response => {
@@ -301,6 +303,7 @@
       return item.status === STATES.APPROVED;
     },
     moveToBottleneck(index) {
+      this.$store.commit("map/setLayerVisible", LAYERS.BOTTLENECKS);
       this.moveToExtent(this.bottlenecks[index]);
     },
     moveToExtent(feature) {
diff -r 22bbd0d0500e -r 55bedb39295a client/src/store/map.js
--- a/client/src/store/map.js	Thu Feb 07 09:15:39 2019 +0100
+++ b/client/src/store/map.js	Thu Feb 07 10:30:44 2019 +0100
@@ -33,6 +33,23 @@
 import bbox from "@turf/bbox";
 import app from "../main";
 
+const LAYERS = {
+  OPENSTREETMAP: "Open Streetmap",
+  INLANDECDIS: "Inland ECDIS chart Danube",
+  WATERWAYAREA: "Waterway Area",
+  STRETCHES: "Stretches",
+  FAIRWAYDIMENSIONSLOS1: "Fairway Dimensions LOS 1",
+  FAIRWAYDIMENSIONSLOS2: "Fairway Dimensions LOS 2",
+  FAIRWAYDIMENSIONSLOS3: "Fairway Dimensions LOS 3",
+  WATERWAYAXIS: "Waterway Axis",
+  BOTTLENECKS: "Bottlenecks",
+  BOTTLENECKISOLINE: "Bottleneck isolines",
+  DISTANCEMARKS: "Distance marks",
+  DISTANCEMARKSAXIS: "Distance marks, Axis",
+  DRAWTOOL: "Draw Tool",
+  CUTTOOL: "Cut Tool"
+};
+
 // initial state
 const init = () => {
   return {
@@ -51,7 +68,7 @@
     isolinesLegendImgDataURL: "",
     layers: [
       {
-        name: "Open Streetmap",
+        name: LAYERS.OPENSTREETMAP,
         data: new TileLayer({
           source: new OSM()
         }),
@@ -59,7 +76,7 @@
         showInLegend: true
       },
       {
-        name: "Inland ECDIS chart Danube",
+        name: LAYERS.INLANDECDIS,
         data: new TileLayer({
           source: new TileWMS({
             preload: 1,
@@ -72,7 +89,7 @@
         showInLegend: true
       },
       {
-        name: "Waterway Area",
+        name: LAYERS.WATERWAYAREA,
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -88,7 +105,7 @@
         showInLegend: true
       },
       {
-        name: "Stretches",
+        name: LAYERS.STRETCHES,
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -107,7 +124,7 @@
         showInLegend: true
       },
       {
-        name: "Fairway Dimensions LOS 1",
+        name: LAYERS.FAIRWAYDIMENSIONSLOS1,
         data: new VectorLayer({
           source: new VectorSource(),
           style: function() {
@@ -136,7 +153,7 @@
         showInLegend: true
       },
       {
-        name: "Fairway Dimensions LOS 2",
+        name: LAYERS.FAIRWAYDIMENSIONSLOS2,
         data: new VectorLayer({
           source: new VectorSource(),
           style: function() {
@@ -165,7 +182,7 @@
         showInLegend: true
       },
       {
-        name: "Fairway Dimensions LOS 3",
+        name: LAYERS.FAIRWAYDIMENSIONSLOS3,
         data: new VectorLayer({
           source: new VectorSource(),
           style: function() {
@@ -194,7 +211,7 @@
         showInLegend: true
       },
       {
-        name: "Waterway Axis",
+        name: LAYERS.WATERWAYAXIS,
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -211,7 +228,7 @@
         showInLegend: true
       },
       {
-        name: "Bottlenecks",
+        name: LAYERS.BOTTLENECKS,
         data: new VectorLayer({
           source: new VectorSource({
             strategy: bboxStrategy
@@ -230,7 +247,7 @@
         showInLegend: true
       },
       {
-        name: "Bottleneck isolines",
+        name: LAYERS.BOTTLENECKISOLINE,
         data: new TileLayer({
           source: new TileWMS({
             preload: 0,
@@ -258,7 +275,7 @@
         showInLegend: true
       },
       {
-        name: "Distance marks",
+        name: LAYERS.DISTANCEMARKS,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
           source: new VectorSource({
@@ -269,7 +286,7 @@
         showInLegend: true
       },
       {
-        name: "Distance marks, Axis",
+        name: LAYERS.DISTANCEMARKSAXIS,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({
           source: new VectorSource({
@@ -306,7 +323,7 @@
         showInLegend: true
       },
       {
-        name: "Draw Tool",
+        name: LAYERS.DRAWTOOL,
         data: new VectorLayer({
           source: new VectorSource({ wrapX: false }),
           style: function(feature) {
@@ -354,7 +371,7 @@
         showInLegend: false
       },
       {
-        name: "Cut Tool",
+        name: LAYERS.CUTTOOL,
         data: new VectorLayer({
           source: new VectorSource({ wrapX: false }),
           style: function(feature) {
@@ -425,6 +442,21 @@
     extent: (state, extent) => {
       state.extent = extent;
     },
+    setLayerVisible: (state, name) => {
+      const layer = state.layers.findIndex(l => l.name === name);
+      state.layers[layer].isVisible = true;
+      state.layers[layer].data.setVisible(true);
+    },
+    setLayerInvisible: (state, name) => {
+      const layer = state.layers.findIndex(l => l.name === name);
+      state.layers[layer].isVisible = false;
+      state.layers[layer].data.setVisible(false);
+    },
+    toggleVisibilityByName: (state, name) => {
+      const layer = state.layers.findIndex(l => l.name === name);
+      state.layers[layer].isVisible = !state.layers[layer].isVisible;
+      state.layers[layer].data.setVisible(state.layers[layer].isVisible);
+    },
     toggleVisibility: (state, layer) => {
       state.layers[layer].isVisible = !state.layers[layer].isVisible;
       state.layers[layer].data.setVisible(state.layers[layer].isVisible);
@@ -645,3 +677,5 @@
     }
   }
 };
+
+export { LAYERS };