changeset 3637:0e2605f6fddd configuration

client: configuration: look up wms capabilities and make layers configurable
author Markus Kottlaender <markus@intevation.de>
date Wed, 12 Jun 2019 12:08:50 +0200
parents 9709081719ae
children 158d55ec2042
files client/src/components/systemconfiguration/MapLayers.vue schema/default_sysconfig.sql
diffstat 2 files changed, 88 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/MapLayers.vue	Tue Jun 11 12:43:05 2019 +0200
+++ b/client/src/components/systemconfiguration/MapLayers.vue	Wed Jun 12 12:08:50 2019 +0200
@@ -5,14 +5,47 @@
       <div class="row">
         <div class="col-sm-6">
           <div class="form-group">
-            <label for="ecdis-url" class="font-weight-bold">ECDIS URL</label>
+            <label for="ecdis-url" class="font-weight-bold">
+              ECDIS WMS URL
+            </label>
             <input
               type="url"
               class="form-control"
               placeholder="https://..."
+              @input="lookupWMSCapabilities()"
               v-model="config.ecdis_url"
             />
           </div>
+          <label for="ecdis-layers">
+            <translate>Layers</translate>
+            <transition name="fade"
+              ><font-awesome-icon
+                icon="spinner"
+                spin
+                v-if="availableWMSLayersLoading"
+                class="ml-2"
+            /></transition>
+          </label>
+          <div class="container-fluid">
+            <div class="row">
+              <div
+                class="custom-control custom-checkbox col-sm-3"
+                v-for="layer in availableWMSLayers"
+                :key="'layer-' + layer"
+              >
+                <input
+                  type="checkbox"
+                  class="custom-control-input"
+                  v-model="selectedWMSLayers"
+                  :id="'layer-' + layer"
+                  :value="layer"
+                />
+                <label class="custom-control-label" :for="'layer-' + layer">
+                  {{ layer }}
+                </label>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -39,17 +72,69 @@
  * Markus Kottländer <markus@intevation.de>
  */
 import { mapState } from "vuex";
+import WMSCapabilities from "ol/format/WMSCapabilities";
+import { HTTP } from "@/lib/http";
+
+const WMSCapabilitiesParser = new WMSCapabilities();
 
 export default {
+  data() {
+    return {
+      selectedWMSLayers: [],
+      availableWMSLayers: [],
+      availableWMSLayersLoading: false,
+      lookupWMSCapabilitiesTimeout: null
+    };
+  },
   computed: {
     ...mapState("application", ["config"])
   },
   methods: {
+    lookupWMSCapabilities() {
+      if (this.lookupWMSCapabilitiesTimeout) {
+        clearTimeout(this.lookupWMSCapabilitiesTimeout);
+      }
+      this.lookupWMSCapabilitiesTimeout = setTimeout(() => {
+        let url;
+        try {
+          let urlParts = new URL(this.config.ecdis_url);
+          url =
+            urlParts.protocol +
+            "//" +
+            urlParts.host +
+            urlParts.pathname.trim("/") +
+            "/";
+        } catch (e) {
+          url = this.config.ecdis_url;
+        }
+        this.availableWMSLayersLoading = true;
+        HTTP.get(url + "?request=GetCapabilities&service=WMS")
+          .then(response => {
+            let capabilities = WMSCapabilitiesParser.read(response.data);
+            let layers = [];
+            capabilities.Capability.Layer.Layer.forEach(l =>
+              layers.push(l.Name)
+            );
+            this.availableWMSLayers = layers;
+          })
+          .catch(() => {
+            this.availableWMSLayers = [];
+          })
+          .finally(() => (this.availableWMSLayersLoading = false));
+      }, 500);
+    },
     submit() {
       this.$store.dispatch("application/saveConfig", {
-        ecdis_url: this.config.ecdis_url
+        ecdis_url: this.config.ecdis_url,
+        ecdis_layers: this.selectedWMSLayers
+          .filter(l => this.availableWMSLayers.includes(l))
+          .join(",")
       });
     }
+  },
+  mounted() {
+    this.selectedWMSLayers = this.config.ecdis_layers.split(",");
+    this.lookupWMSCapabilities();
   }
 };
 </script>
--- a/schema/default_sysconfig.sql	Tue Jun 11 12:43:05 2019 +0200
+++ b/schema/default_sysconfig.sql	Wed Jun 12 12:08:50 2019 +0200
@@ -27,6 +27,7 @@
 -- Settings
 --
 INSERT INTO sys_admin.system_config VALUES ('ecdis_url', 'https://service.d4d-portal.info/wms/');
+INSERT INTO sys_admin.system_config VALUES ('ecdis_layers', 'd4d');
 INSERT INTO sys_admin.system_config VALUES ('bn_revtime_multiplier', 1.5);
 INSERT INTO sys_admin.system_config VALUES ('gm_min_values_14d', 1224);
 INSERT INTO sys_admin.system_config VALUES ('gm_latest_hours', 24);