From 90b4340f4a07b4005324ea1abe2c6a6ffdccb54c Mon Sep 17 00:00:00 2001
From: Just van den Broecke <just@justobjects.nl>
Date: Wed, 22 Apr 2020 12:33:19 +0200
Subject: [PATCH] #36 PoC success for app config/dir restructure

---
 app/.gitignore                            |   5 +-
 app/WguApp.vue                            |  17 +++
 app/WguAppTemplate.vue                    | 143 +++++++++++++++++++++
 app/components/AppFooter.vue              |  30 +++++
 app/components/AppHeader.vue              | 145 +++++++++++++++++++++
 app/components/layerlist/LayerList.vue    | 131 +++++++++++++++++++
 app/components/layerlist/LayerListWin.vue |  57 +++++++++
 app/components/layerlist/ToggleButton.vue |  49 +++++++
 app/css/app.css                           |   1 +
 app/static/app-conf.json                  | 132 +++++++++++++++++++
 build/dev-server.js                       |   6 +
 build/webpack.base.conf.js                |   4 +-
 src/WguAppTemplate.vue                    |  15 +--
 src/components/AppHeader.vue              |   9 +-
 src/main.js                               |  35 +++--
 static/app-conf.json                      | 149 +++++++++++++---------
 16 files changed, 831 insertions(+), 97 deletions(-)
 create mode 100644 app/WguApp.vue
 create mode 100644 app/WguAppTemplate.vue
 create mode 100644 app/components/AppFooter.vue
 create mode 100644 app/components/AppHeader.vue
 create mode 100644 app/components/layerlist/LayerList.vue
 create mode 100644 app/components/layerlist/LayerListWin.vue
 create mode 100644 app/components/layerlist/ToggleButton.vue
 create mode 100644 app/css/app.css
 create mode 100644 app/static/app-conf.json

diff --git a/app/.gitignore b/app/.gitignore
index 5e7d2734..a6b8e0d6 100644
--- a/app/.gitignore
+++ b/app/.gitignore
@@ -1,4 +1,5 @@
 # Ignore everything in this directory
-*
+# *
 # Except this file
-!.gitignore
+# !.gitignore
+.DS_Store
diff --git a/app/WguApp.vue b/app/WguApp.vue
new file mode 100644
index 00000000..406ce71d
--- /dev/null
+++ b/app/WguApp.vue
@@ -0,0 +1,17 @@
+<!-- Created by init-app.js at Tue Mar 10 2020 16:02:41 GMT+0100 (GMT+01:00) -->
+<template>
+  <wgu-app-tpl>
+    <!-- insert your app slots here  -->
+  </wgu-app-tpl>
+</template>
+
+<script>
+  import WguAppTemplate from './WguAppTemplate.vue';
+  export default {
+    name: 'my-wgu-app',
+    components: {
+      'wgu-app-tpl': WguAppTemplate
+    }
+    // add Vue methods and hooks here
+  }
+</script>
diff --git a/app/WguAppTemplate.vue b/app/WguAppTemplate.vue
new file mode 100644
index 00000000..5c2d5a36
--- /dev/null
+++ b/app/WguAppTemplate.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-app id="wgu-app" data-app :class="{ 'wgu-app': true, 'wgu-app-embedded': isEmbedded }">
+
+    <slot name="wgu-app-begin" />
+
+    <wgu-app-header :color="baseColor">
+      <!-- forward the slots of AppHeader -->
+      <slot name="wgu-tb-start" slot="wgu-tb-start" />
+      <slot name="wgu-tb-after-title" slot="wgu-tb-after-title" />
+      <slot name="wgu-tb-before-auto-buttons" slot="wgu-tb-before-auto-buttons" />
+      <slot name="wgu-tb-after-auto-buttons" slot="wgu-tb-after-auto-buttons" />
+      <slot name="wgu-tb-end" slot="wgu-tb-end" />
+    </wgu-app-header>
+
+    <slot name="wgu-after-header" />
+
+    <wgu-app-logo />
+
+    <slot name="wgu-before-content" />
+
+    <v-content>
+      <wgu-routing-panel />
+      <v-container id="ol-map-container" fluid fill-height style="padding: 0">
+         <wgu-map :color="baseColor" />
+         <!-- layer loading indicator -->
+         <wgu-maploading-status :color="baseColor" />
+         <slot name="wgu-after-map" />
+      </v-container>
+    </v-content>
+
+    <template v-for="(moduleWin, index) in moduleWins">
+      <component
+        :is="moduleWin.type" :key="index" :ref="moduleWin.type"
+        :color="baseColor"
+        :draggable="moduleWin.draggable"
+        :initPos="moduleWin.initPos"
+        :width="moduleWin.width"
+        :title="moduleWin.title"
+        :icon="moduleWin.icon"
+      />
+    </template>
+
+    <slot name="wgu-before-footer" />
+
+    <wgu-app-footer
+      :color="baseColor"
+      :footerTextLeft="footerTextLeft"
+      :footerTextRight="footerTextRight"
+      :showCopyrightYear="showCopyrightYear"
+    />
+
+    <slot name="wgu-after-footer" />
+
+    <slot name="wgu-app-end" />
+
+  </v-app>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import { WguEventBus } from '../src/WguEventBus'
+  import OlMap from '../src/components/ol/Map'
+  import AppHeader from './components/AppHeader'
+  import AppFooter from './components/AppFooter'
+  import AppLogo from '../src/components/AppLogo'
+  import MeasureWin from '../src/components/measuretool/MeasureWin'
+  import LayerListWin from '../src/components/layerlist/LayerListWin'
+  import InfoClickWin from '../src/components/infoclick/InfoClickWin'
+  import MapLoadingStatus from '../src/components/progress/MapLoadingStatus'
+  import FeatureInfoWindow from '../src/components/FeatureInfoWindow'
+  import RoutingPanel from '../src/components/routing/RoutingPanel'
+
+  export default {
+    name: 'wgu-app-tpl',
+    components: {
+      'wgu-map': OlMap,
+      'wgu-app-header': AppHeader,
+      'wgu-app-footer': AppFooter,
+      'wgu-app-logo': AppLogo,
+      'wgu-measuretool-win': MeasureWin,
+      'wgu-layerlist-win': LayerListWin,
+      'wgu-infoclick-win': InfoClickWin,
+      'wgu-maploading-status': MapLoadingStatus,
+      'wgu-feature-info-window-win': FeatureInfoWindow,
+      'wgu-routing-panel': RoutingPanel
+    },
+    data () {
+      return {
+        isEmbedded: false,
+        moduleWins: this.getModuleWinData(),
+        footerTextLeft: Vue.prototype.$appConfig.footerTextLeft,
+        footerTextRight: Vue.prototype.$appConfig.footerTextRight,
+        showCopyrightYear: Vue.prototype.$appConfig.showCopyrightYear,
+        baseColor: Vue.prototype.$appConfig.baseColor
+      }
+    },
+    mounted () {
+      // apply the isEmbedded state to the member var
+      this.isEmbedded = this.$isEmbedded;
+
+      // make the refs (floating module window, which are not connected to their
+      // related components, e.g. buttons to toggle them)
+      const refs = this.$refs;
+      let cmpLookup = {};
+      for (const key of Object.keys(refs)) {
+        cmpLookup[key] = refs[key][0];
+      }
+      Vue.prototype.cmpLookup = cmpLookup;
+      // inform registered cmps that the app is mounted and the dynamic
+      // components are available
+      WguEventBus.$emit('app-mounted');
+    },
+    methods: {
+      /**
+       * Determines the module window configuration objects from app-config:
+       *     moduleWins: [
+       *       {type: 'wgu-layerlist-win'},
+       *       {type: 'wgu-measuretool-win'}
+       *     ]
+       * @return {Array} module window configuration objects
+       */
+      getModuleWinData () {
+        const appConfig = Vue.prototype.$appConfig || {};
+        const modulesConfs = appConfig.modules || {};
+        let moduleWins = [];
+        for (const key of Object.keys(modulesConfs)) {
+          const moduleOpts = appConfig.modules[key];
+          if (moduleOpts.win === true) {
+            moduleWins.push({
+              type: key + '-win',
+              draggable: moduleOpts.draggable,
+              initPos: moduleOpts.initPos,
+              title: moduleOpts.title,
+              width: moduleOpts.width,
+              icon: moduleOpts.icon
+            });
+          }
+        }
+        return moduleWins;
+      }
+    }
+  }
+</script>
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
new file mode 100644
index 00000000..b499e401
--- /dev/null
+++ b/app/components/AppFooter.vue
@@ -0,0 +1,30 @@
+<template>
+
+  <v-footer :color="color" class="white--text" app>
+    <span class="wgu-footer-left" v-html="footerTextLeft"></span>
+    <v-spacer></v-spacer>
+    <div class="wgu-footer-right">
+      <span v-html="footerTextRight"></span>
+      <span v-if="showCopyrightYear" >&copy; {{ new Date().getFullYear() }}</span>
+    </div>
+  </v-footer>
+
+</template>
+
+<script>
+
+export default {
+  name: 'wgu-app-footer',
+  props: {
+    color: {type: String, required: false, default: 'red darken-3'},
+    footerTextLeft: {type: String, required: false, default: 'Powered by <a href="https://meggsimum.de/wegue/" target="_blank">Wegue WebGIS</a>'},
+    footerTextRight: {type: String, required: false, default: 'meggsimum'},
+    showCopyrightYear: {type: Boolean, required: false, default: true}
+  }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+</style>
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
new file mode 100644
index 00000000..1dbdef20
--- /dev/null
+++ b/app/components/AppHeader.vue
@@ -0,0 +1,145 @@
+<template>
+  <v-toolbar
+    class="wgu-app-toolbar white--text"
+    :color="color"
+    fixed
+    app
+    clipped-right
+  >
+
+    <!-- slot to inject components at the beginning (before title) -->
+    <slot name="wgu-tb-start"></slot>
+
+    <v-toolbar-title><span v-html="title"/></v-toolbar-title>
+
+    <!-- slot to inject components after the title text -->
+    <slot name="wgu-tb-after-title"></slot>
+
+    <v-spacer></v-spacer>
+
+    <!-- slot to inject components before the auto-generated buttons (by config) -->
+    <slot name="wgu-tb-before-auto-buttons"></slot>
+
+    <template v-for="(tbButton, index) in tbButtons">
+      <component
+        :is="tbButton.type" :key="index"
+        :icon="tbButton.icon" :text="tbButton.text"
+        :color="color"
+        :dark="tbButton.dark"
+      />
+    </template>
+
+    <!-- slot to inject components after the auto-generated buttons (by config) -->
+    <slot name="wgu-tb-after-auto-buttons"></slot>
+
+    <v-menu v-if="menuButtons.length" offset-y>
+      <v-btn icon dark slot="activator">
+        <v-icon medium>menu</v-icon>
+      </v-btn>
+      <v-list>
+          <template v-for="(tbButton, index) in menuButtons">
+              <v-list-tile>
+                <component :is="tbButton.type" :key="index" :icon="tbButton.icon" :text="tbButton.text" :color="color" />
+              </v-list-tile>
+          </template>
+      </v-list>
+    </v-menu>
+
+    <!-- slot to inject components at the end of the toolbar (after menu) -->
+    <slot name="wgu-tb-end"></slot>
+
+  </v-toolbar>
+</template>
+
+<script>
+
+import Vue from 'vue'
+import LayerListToggleButton from './layerlist/ToggleButton'
+import HelpWinToggleButton from '../../src/components/helpwin/ToggleButton'
+import MeasureToolToggleButton from '../../src/components/measuretool/ToggleButton'
+import InfoClickButton from '../../src/components/infoclick/ToggleButton'
+import ShareButton from '../../src/components/sharebutton/ShareButton'
+import ZoomToMaxExtentButton from '../../src/components/maxextentbutton/ZoomToMaxExtentButton'
+import RoutingToggleButton from '../../src/components/routing/RoutingToggleButton'
+import Geocoder from '../../src/components/geocoder/Geocoder'
+
+export default {
+  name: 'wgu-app-header',
+  components: {
+    'wgu-share-btn': ShareButton,
+    'wgu-geocoder-btn': Geocoder,
+    'wgu-zoomtomaxextent-btn': ZoomToMaxExtentButton,
+    'wgu-layerlist-btn': LayerListToggleButton,
+    'wgu-helpwin-btn': HelpWinToggleButton,
+    'wgu-measuretool-btn': MeasureToolToggleButton,
+    'wgu-infoclick-btn': InfoClickButton,
+    'wgu-routing-btn': RoutingToggleButton
+  },
+  props: {
+    color: {type: String, required: false, default: 'red darken-3'}
+  },
+  data () {
+    return {
+      title: this.$appConfig.title,
+      menuButtons: this.getModuleButtonData() || [],
+      tbButtons: this.getToolbarButtons() || []
+    }
+  },
+  methods: {
+    /**
+     * Determines the module menu button configuration objects from app-config:
+     *    menuButtons: [
+     *      {type: 'wgu-layerlist-toggle-btn'},
+     *      {type: 'wgu-helpwin-toggle-btn'},
+     *      {type: 'wgu-measuretool-toggle-btn'}
+     *    ]
+     * @return {Array} module button configuration objects for the menu
+     */
+    getModuleButtonData () {
+      const appConfig = Vue.prototype.$appConfig || {};
+      const modulesConfs = appConfig.modules || {};
+      let moduleWins = [];
+      for (const key of Object.keys(modulesConfs)) {
+        const moduleOpts = appConfig.modules[key];
+        if (moduleOpts.target === 'menu') {
+          moduleWins.push({
+            type: key + '-btn',
+            target: moduleOpts.target
+          });
+        }
+      }
+      return moduleWins;
+    },
+    /**
+     * Determines the module toolbar button configuration objects from app-config:
+     *    menuButtons: [
+     *      {type: 'wgu-layerlist-toggle-btn'},
+     *      {type: 'wgu-helpwin-toggle-btn'},
+     *      {type: 'wgu-measuretool-toggle-btn'}
+     *    ]
+     * @return {Array} module button configuration objects for the toolbar
+     */
+    getToolbarButtons () {
+      const appConfig = Vue.prototype.$appConfig || {};
+      const modulesConfs = appConfig.modules || {};
+      let moduleWins = [];
+
+      for (const key of Object.keys(modulesConfs)) {
+        const moduleOpts = appConfig.modules[key];
+        if (moduleOpts.target === 'toolbar') {
+          moduleWins.push({
+            type: key + '-btn',
+            target: moduleOpts.target,
+            dark: moduleOpts.darkLayout
+          });
+        }
+      }
+      return moduleWins;
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+</style>
diff --git a/app/components/layerlist/LayerList.vue b/app/components/layerlist/LayerList.vue
new file mode 100644
index 00000000..c48a1487
--- /dev/null
+++ b/app/components/layerlist/LayerList.vue
@@ -0,0 +1,131 @@
+<template>
+
+  <v-list>
+    <v-list-tile class="wgu-layerlist-item" v-for="layerItem in layerItems" v-bind:key="layerItem.lid" @click="onItemClick($event, layerItem)">
+      <input type="checkbox" :key="layerItem.lid" class="wgu-layer-viz-cb" v-model="layerItem.visible" @change="layerVizChanged">
+      <v-list-tile-content class="black--text">
+          <v-list-tile-title>{{ layerItem.title }}</v-list-tile-title>
+      </v-list-tile-content>
+    </v-list-tile>
+  </v-list>
+
+</template>
+
+<script>
+  import { Mapable } from '../../../src/mixins/Mapable';
+  import LayerUtil from '../../../src/util/Layer';
+
+  export default {
+    name: 'wgu-layerlist',
+    mixins: [Mapable],
+    props: {
+    },
+    data () {
+      return {
+        layerItems: [],
+        changeVisByClickUpdate: false
+      }
+    },
+    methods: {
+      /**
+       * This function is executed, after the map is bound (see mixins/Mapable)
+       */
+      onMapBound () {
+        var me = this;
+        me.createLayerItems();
+
+        // react on added / removed layers
+        me.map.getLayers().on('change:length', function (evt) {
+          me.createLayerItems();
+        });
+      },
+      /**
+       * Creates the layer items from the OpenLayers map.
+       */
+      createLayerItems () {
+        const me = this;
+        // go over all layers from the map and list them up
+        var layers = this.map.getLayers();
+        // clone to only reverse the order for the list
+        var layerArrClone = layers.getArray().slice(0);
+        layers = layerArrClone.reverse();
+
+        var layerItems = [];
+        layers.forEach(function (layer) {
+          // skip if layer should not be listed
+          if (layer.get('displayInLayerList') === false) {
+            return;
+          }
+          layerItems.push({
+            title: layer.get('name'),
+            lid: layer.get('lid'),
+            visible: layer.getVisible()
+          });
+
+          // synchronize visibility with UI when changed programatically
+          layer.on('change:visible', me.onOlLayerVizChange);
+        });
+
+        me.layerItems = layerItems;
+      },
+
+      /**
+       * Handles the 'change:visible' event of the layer in order to
+       * apply the current visibility state to the corresponding checkbox in
+       * case the 'change:visible' wasn't triggered by click.
+       *
+       * @param  {ol/Object.ObjectEvent} evt The OL event of 'change:visible'
+       */
+      onOlLayerVizChange (evt) {
+        const me = this;
+        if (!me.changeVisByClickUpdate) {
+          me.layerItems.forEach(function (layerItem, idx) {
+            if (layerItem.lid === evt.target.get('lid')) {
+              // execute click handler to change visibility
+              me.onItemClick(null, layerItem);
+            }
+          });
+        }
+      },
+
+      /**
+       * Handler for click on item in layer list:
+       * Toggles the corresponding visibility and calls this.layerVizChanged.
+       *
+       * @param  {Object} ect       Original vue click event
+       * @param  {Object} layerItem Layer item data object
+       */
+      onItemClick (evt, layerItem) {
+        const me = this;
+        layerItem.visible = !layerItem.visible;
+
+        me.changeVisByClickUpdate = true;
+        this.layerVizChanged();
+        me.changeVisByClickUpdate = false;
+      },
+
+      /**
+       * Handles the 'change' event of the visibility checkboxes in order to
+       * apply the current visibility state in 'data' to the OL layers.
+       */
+      layerVizChanged () {
+        var me = this;
+
+        me.layerItems.forEach(function (layerItem, idx) {
+          const layer = LayerUtil.getLayerByLid(layerItem.lid, me.map);
+          if (layer) {
+            layer.setVisible(layerItem.visible);
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style>
+
+  .wgu-layer-viz-cb {
+    width: 45px;
+  }
+
+</style>
diff --git a/app/components/layerlist/LayerListWin.vue b/app/components/layerlist/LayerListWin.vue
new file mode 100644
index 00000000..a69ddedf
--- /dev/null
+++ b/app/components/layerlist/LayerListWin.vue
@@ -0,0 +1,57 @@
+<template>
+
+  <v-card
+    v-draggable-win="draggable" class="wgu-layerlist"
+    v-if=show v-bind:style="{ left: left, top: top}"
+  >
+    <v-toolbar :color="color" class="" dark>
+      <v-toolbar-side-icon><v-icon>{{icon}}</v-icon></v-toolbar-side-icon>
+      <v-toolbar-title class="wgu-win-title">{{title}}</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-toolbar-side-icon @click="show=false"><v-icon>close</v-icon></v-toolbar-side-icon>
+    </v-toolbar>
+
+    <wgu-layerlist />
+
+  </v-card>
+
+</template>
+
+<script>
+  import { DraggableWin } from '../../../src/directives/DraggableWin.js';
+  import LayerList from './LayerList';
+
+  export default {
+    name: 'wgu-layerlist-win',
+    directives: {
+      DraggableWin
+    },
+    components: {
+      'wgu-layerlist': LayerList
+    },
+    props: {
+      color: {type: String, required: false, default: 'red darken-3'},
+      icon: {type: String, required: false, default: 'layers'},
+      title: {type: String, required: false, default: 'Layers'},
+      draggable: {type: Boolean, required: false, default: true},
+      initPos: {type: Object, required: false}
+    },
+    data () {
+      return {
+        moduleName: 'wgu-layerlist',
+        show: false,
+        left: this.initPos ? this.initPos.left + 'px' : '10px',
+        top: this.initPos ? this.initPos.top + 'px' : '70px'
+      }
+    }
+  }
+</script>
+
+<style>
+
+  .v-card.wgu-layerlist {
+    position: absolute;
+    z-index: 2;
+  }
+
+</style>
diff --git a/app/components/layerlist/ToggleButton.vue b/app/components/layerlist/ToggleButton.vue
new file mode 100644
index 00000000..e5ff21fe
--- /dev/null
+++ b/app/components/layerlist/ToggleButton.vue
@@ -0,0 +1,49 @@
+<template>
+
+  <v-btn icon :dark="dark" @click="toggleUi">
+    <v-icon medium>{{icon}}</v-icon>
+    {{text}}
+  </v-btn>
+
+</template>
+
+<script>
+
+import Vue from 'vue';
+import LayerListWin from './LayerListWin'
+import { WguEventBus } from '../../../src/WguEventBus'
+
+export default {
+  name: 'wgu-layerlist-btn',
+  components: {
+    'wgu-layerlist-win': LayerListWin
+  },
+  props: {
+    icon: {type: String, required: false, default: 'layers'},
+    text: {type: String, required: false, default: ''},
+    dark: {type: Boolean, required: false, default: false}
+  },
+  data: function () {
+    return {
+      moduleName: 'wgu-layerlist'
+    }
+  },
+  created () {
+    var me = this;
+    // TODO move to a father class
+    WguEventBus.$on('app-mounted', () => {
+      me.win = Vue.prototype.cmpLookup[me.moduleName + '-win'];
+    });
+  },
+  methods: {
+    toggleUi () {
+      // TODO move to a father class
+      this.win.show = !this.win.show;
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+</style>
diff --git a/app/css/app.css b/app/css/app.css
new file mode 100644
index 00000000..58dd7590
--- /dev/null
+++ b/app/css/app.css
@@ -0,0 +1 @@
+/* Created by init-app.js at Tue Mar 10 2020 16:02:41 GMT+0100 (GMT+01:00) */
\ No newline at end of file
diff --git a/app/static/app-conf.json b/app/static/app-conf.json
new file mode 100644
index 00000000..88482799
--- /dev/null
+++ b/app/static/app-conf.json
@@ -0,0 +1,132 @@
+{
+
+  "title": "<a href='https://naturpark-lueneburger-heide.de/' target='_blank' style='text-decoration: none; color: white'>Naturpark Lüneburger Heide</a>",
+
+  "baseColor": "rgba(226, 0, 122, 1)",
+
+  "logoText": "<a href='https://naturpark-lueneburger-heide.de/' target='_blank' style='text-decoration: none; color: white'><img src='./static/media/nplh-logo@2.jpg' alt='NPLH Logo'</a>",
+
+  "footerTextLeft": "Powered by <a href='https://meggsimum.de/wegue/' target='_blank'>Wegue WebGIS</a> and <a href='https://geolicious.de/' target='_blank'>Geolicious GeoCMS</a>",
+  "footerTextRight": "Geolicious",
+  "showCopyrightYear": true,
+
+  "mapCenter": [1113871, 7012966],
+  "mapZoom": 9,
+
+  "permalink": {
+    "location": "search",
+    "layers": true,
+    "extent": true,
+    "projection": "EPSG:4326",
+    "paramPrefix": "",
+    "history": false
+  },
+
+  "mapLayers": [
+    {
+      "type": "VECTOR",
+      "lid": "np_lh_border",
+      "name": "Naturpark Grenze",
+      "url": "./static/data/np_lh_border_4326.geojson",
+      "formatConfig": {
+      },
+      "format": "GeoJSON",
+      "visible": true,
+      "selectable": false,
+      "style": {
+        "strokeColor": "rgba(226, 0, 122, 1)",
+        "strokeWidth": 4
+      }
+    },
+    {
+      "type": "VECTOR",
+      "lid": "heide",
+      "name": "Heide",
+      "url": "./static/data/overpass_natural-heath.geojson",
+      "formatConfig": {
+      },
+      "format": "GeoJSON",
+      "visible": true,
+      "selectable": false,
+      "style": {
+        "strokeColor": "rgb(162, 114, 240)",
+        "strokeWidth": 4,
+        "fillColor": "rgba(162, 114, 240, 0.5)"
+      }
+    },
+    {
+      "type": "LAYERCOLLECTION",
+      "url": "http://staging.nplh.geolicious.de/api/layer_list_wegue_format"
+    },
+    {
+      "type": "OSM",
+      "lid": "osm-bg",
+      "name": "OSM",
+      "isBaseLayer": true,
+      "visible": true,
+      "displayInLayerList": false
+    }
+  ],
+
+  "modules": {
+    "wgu-layerlist": {
+      "target": "toolbar",
+      "darkLayout": true,
+      "win": true,
+      "draggable": false
+    },
+    "wgu-measuretool": {
+      "target": "menu",
+      "win": true,
+      "draggable": false,
+      "strokeColor": "#c62828",
+      "fillColor": "rgba(198,40,40,0.2)",
+      "sketchStrokeColor": "rgba(198,40,40,0.8)",
+      "sketchFillColor": "rgba(198,40,40,0.1)",
+      "sketchVertexStrokeColor": "#c62828",
+      "sketchVertexFillColor": "rgba(198,40,40,0.2)"
+    },
+    "wgu-infoclick": {
+      "target": "menu",
+      "win": true,
+      "draggable": false,
+      "darkLayout": true,
+      "initPos": {
+        "left": 8,
+        "top": 74
+      }
+    },
+    "wgu-zoomtomaxextent": {
+      "target": "toolbar",
+      "darkLayout": true
+    },
+    "wgu-share": {
+      "target": "toolbar",
+      "darkLayout": true
+    },
+    "wgu-feature-info-window": {
+      "win": true,
+      "draggable": true,
+      "width": 360,
+      "icon": "info",
+      "layers": [
+        {
+          "layerId": "layer",
+          "title": "Info",
+          "titleProp": "name",
+          "imageProp": "image_url",
+          "descProp": "description",
+          "imageWidth": 360
+        }
+      ]
+    },
+    "wgu-routing": {
+      "transportModes": ["car", "publicTransport"],
+      "panel": true,
+      "target": "toolbar",
+      "icon": "info",
+      "darkLayout": true
+    }
+  }
+
+}
diff --git a/build/dev-server.js b/build/dev-server.js
index 6c37b783..2a7e09ad 100644
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -65,6 +65,12 @@ app.use(hotMiddleware)
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 app.use(staticPath, express.static('./static'))
 
+console.log(config.dev.assetsPublicPath);
+// assetsSubDirectory: 'static',
+// assetsPublicPath: './',
+var staticPath2 = path.posix.join(config.dev.assetsPublicPath, 'app/static')
+app.use(staticPath2, express.static('./app/static'))
+
 var uri = 'http://localhost:' + port
 
 var _resolve
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 7a2d5fc8..407cda62 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -33,7 +33,7 @@ module.exports = {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
+        include: [resolve('app'), resolve('src'), resolve('test')],
         options: {
           formatter: require('eslint-friendly-formatter')
         }
@@ -46,7 +46,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/ol')],
+        include: [resolve('app'), resolve('src'), resolve('test'), resolve('node_modules/ol')],
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
diff --git a/src/WguAppTemplate.vue b/src/WguAppTemplate.vue
index 8ef4a56c..5570dc78 100644
--- a/src/WguAppTemplate.vue
+++ b/src/WguAppTemplate.vue
@@ -19,7 +19,6 @@
     <slot name="wgu-before-content" />
 
     <v-content>
-      <wgu-routing-panel />
       <v-container id="ol-map-container" fluid fill-height style="padding: 0">
          <wgu-map :color="baseColor" />
          <!-- layer loading indicator -->
@@ -34,9 +33,6 @@
         :color="baseColor"
         :draggable="moduleWin.draggable"
         :initPos="moduleWin.initPos"
-        :width="moduleWin.width"
-        :title="moduleWin.title"
-        :icon="moduleWin.icon"
       />
     </template>
 
@@ -67,8 +63,6 @@
   import LayerListWin from './components/layerlist/LayerListWin'
   import InfoClickWin from './components/infoclick/InfoClickWin'
   import MapLoadingStatus from './components/progress/MapLoadingStatus'
-  import FeatureInfoWindow from './components/FeatureInfoWindow'
-  import RoutingPanel from './components/routing/RoutingPanel'
 
   export default {
     name: 'wgu-app-tpl',
@@ -80,9 +74,7 @@
       'wgu-measuretool-win': MeasureWin,
       'wgu-layerlist-win': LayerListWin,
       'wgu-infoclick-win': InfoClickWin,
-      'wgu-maploading-status': MapLoadingStatus,
-      'wgu-feature-info-window-win': FeatureInfoWindow,
-      'wgu-routing-panel': RoutingPanel
+      'wgu-maploading-status': MapLoadingStatus
     },
     data () {
       return {
@@ -129,10 +121,7 @@
             moduleWins.push({
               type: key + '-win',
               draggable: moduleOpts.draggable,
-              initPos: moduleOpts.initPos,
-              title: moduleOpts.title,
-              width: moduleOpts.width,
-              icon: moduleOpts.icon
+              initPos: moduleOpts.initPos
             });
           }
         }
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 3a8e6e7c..bb5f2520 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -10,7 +10,7 @@
     <!-- slot to inject components at the beginning (before title) -->
     <slot name="wgu-tb-start"></slot>
 
-    <v-toolbar-title><span v-html="title"/></v-toolbar-title>
+    <v-toolbar-title>{{title}}</v-toolbar-title>
 
     <!-- slot to inject components after the title text -->
     <slot name="wgu-tb-after-title"></slot>
@@ -58,22 +58,18 @@ import LayerListToggleButton from './layerlist/ToggleButton'
 import HelpWinToggleButton from './helpwin/ToggleButton'
 import MeasureToolToggleButton from './measuretool/ToggleButton'
 import InfoClickButton from './infoclick/ToggleButton'
-import ShareButton from './sharebutton/ShareButton'
 import ZoomToMaxExtentButton from './maxextentbutton/ZoomToMaxExtentButton'
-import RoutingToggleButton from './routing/RoutingToggleButton'
 import Geocoder from './geocoder/Geocoder'
 
 export default {
   name: 'wgu-app-header',
   components: {
-    'wgu-share-btn': ShareButton,
     'wgu-geocoder-btn': Geocoder,
     'wgu-zoomtomaxextent-btn': ZoomToMaxExtentButton,
     'wgu-layerlist-btn': LayerListToggleButton,
     'wgu-helpwin-btn': HelpWinToggleButton,
     'wgu-measuretool-btn': MeasureToolToggleButton,
-    'wgu-infoclick-btn': InfoClickButton,
-    'wgu-routing-btn': RoutingToggleButton
+    'wgu-infoclick-btn': InfoClickButton
   },
   props: {
     color: {type: String, required: false, default: 'red darken-3'}
@@ -123,7 +119,6 @@ export default {
       const appConfig = Vue.prototype.$appConfig || {};
       const modulesConfs = appConfig.modules || {};
       let moduleWins = [];
-
       for (const key of Object.keys(modulesConfs)) {
         const moduleOpts = appConfig.modules[key];
         if (moduleOpts.target === 'toolbar') {
diff --git a/src/main.js b/src/main.js
index 867734eb..32852839 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,17 +33,28 @@ if (appCtx) {
   appCtxFile = '-' + appCtx.replace(/(\.\.[/])+/g, '');
 }
 
-fetch('static/app-conf' + appCtxFile + '.json')
+const createApp = function (appConfig) {
+  // make app config accessible for all components
+  Vue.prototype.$appConfig = appConfig;
+  /* eslint-disable no-new */
+  new Vue({
+    el: '#app',
+    template: '<wgu-app/>',
+    components: { WguApp }
+  });
+};
+
+fetch('app/static/app-conf' + appCtxFile + '.json')
   .then(function (response) {
-    return response.json();
-  })
-  .then(function (appConfig) {
-    // make app config accessible for all components
-    Vue.prototype.$appConfig = appConfig;
-    /* eslint-disable no-new */
-    new Vue({
-      el: '#app',
-      template: '<wgu-app/>',
-      components: { WguApp }
-    });
+    return response.json().then(function (appConfig) {
+      // console.log('app', appConfig);
+      createApp(appConfig);
+    })
+  }).catch(function () {
+    fetch('static/app-conf' + appCtxFile + '.json').then(function (response) {
+      return response.json().then(function (appConfig) {
+        // console.log('static', appConfig);
+        createApp(appConfig);
+      })
+    })
   });
diff --git a/static/app-conf.json b/static/app-conf.json
index 88482799..ad512fd2 100644
--- a/static/app-conf.json
+++ b/static/app-conf.json
@@ -1,77 +1,114 @@
 {
 
-  "title": "<a href='https://naturpark-lueneburger-heide.de/' target='_blank' style='text-decoration: none; color: white'>Naturpark Lüneburger Heide</a>",
+  "title": "Vue.js / OpenLayers WebGIS",
 
-  "baseColor": "rgba(226, 0, 122, 1)",
+  "baseColor": "red darken-3",
 
-  "logoText": "<a href='https://naturpark-lueneburger-heide.de/' target='_blank' style='text-decoration: none; color: white'><img src='./static/media/nplh-logo@2.jpg' alt='NPLH Logo'</a>",
+  "logo": "https://dummyimage.com/100x100/aaa/fff&text=Wegue",
+  "logoSize": "100",
 
-  "footerTextLeft": "Powered by <a href='https://meggsimum.de/wegue/' target='_blank'>Wegue WebGIS</a> and <a href='https://geolicious.de/' target='_blank'>Geolicious GeoCMS</a>",
-  "footerTextRight": "Geolicious",
+  "footerTextLeft": "Powered by <a href='https://meggsimum.de/wegue/' target='_blank'>Wegue WebGIS</a>",
+  "footerTextRight": "meggsimum",
   "showCopyrightYear": true,
 
-  "mapCenter": [1113871, 7012966],
-  "mapZoom": 9,
-
-  "permalink": {
-    "location": "search",
-    "layers": true,
-    "extent": true,
-    "projection": "EPSG:4326",
-    "paramPrefix": "",
-    "history": false
-  },
+  "mapZoom": 2,
+  "mapCenter": [0, 0],
 
   "mapLayers": [
+
     {
       "type": "VECTOR",
-      "lid": "np_lh_border",
-      "name": "Naturpark Grenze",
-      "url": "./static/data/np_lh_border_4326.geojson",
+      "lid": "Shops",
+      "name": "Shops DaSchau",
+      "url": "./static/data/shops-dannstadt.geojson",
       "formatConfig": {
       },
       "format": "GeoJSON",
       "visible": true,
-      "selectable": false,
+      "selectable": true,
       "style": {
-        "strokeColor": "rgba(226, 0, 122, 1)",
-        "strokeWidth": 4
+        "radius": 4,
+        "strokeColor": "purple",
+        "strokeWidth": 2,
+        "fillColor": "rgba(155,153,51,0.5)"
       }
     },
+
     {
       "type": "VECTOR",
-      "lid": "heide",
-      "name": "Heide",
-      "url": "./static/data/overpass_natural-heath.geojson",
+      "lid": "earthquakes",
+      "name": "Earthquakes 2012 (Mag 5)",
+      "url": "./static/data/2012_Earthquakes_Mag5.kml",
       "formatConfig": {
+        "extractStyles": false
       },
-      "format": "GeoJSON",
+      "format": "KML",
       "visible": true,
-      "selectable": false,
+      "attributions": "U.S. Geological Survey",
+      "selectable": true,
+      "hoverable": true,
+      "hoverAttribute": "name",
+      "style": {
+        "radius": 4,
+        "strokeColor": "rgb(207, 16, 32)",
+        "strokeWidth": 1,
+        "fillColor": "rgba(207, 16, 32, 0.6)"
+      }
+    },
+
+    {
+      "type": "WMS",
+      "lid": "ahocevar-wms",
+      "name": "WMS (ahocevar)",
+      "format": "image/png",
+      "layers": "topp:states",
+      "url": "https://ahocevar.com/geoserver/wms",
+      "transparent": true,
+      "singleTile": false,
+      "projection": "EPSG:3857",
+      "attribution": "",
+      "isBaseLayer": false,
+      "visible": false,
+      "displayInLayerList": true
+    },
+
+    {
+      "type": "VECTORTILE",
+      "name": "Vector Tile Layer",
+      "url": "https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf",
+      "format": "MVT",
+      "visible": false,
       "style": {
-        "strokeColor": "rgb(162, 114, 240)",
-        "strokeWidth": 4,
-        "fillColor": "rgba(162, 114, 240, 0.5)"
+        "strokeColor": "gray",
+        "strokeWidth": 1,
+        "fillColor": "rgba(20,20,20,0.1)"
       }
     },
+
     {
-      "type": "LAYERCOLLECTION",
-      "url": "http://staging.nplh.geolicious.de/api/layer_list_wegue_format"
+      "type": "XYZ",
+      "name": "OpenTopoMap",
+      "url": "https://tile.opentopomap.org/{z}/{x}/{y}.png",
+      "attributions": "Map data: <a href=\"https://openstreetmap.org/copyright\">©OpenStreetMap</a>-contributors, SRTM | Map representation (Kartendarstellung): © <a href=\"http://opentopomap.org/\">OpenTopoMap</a> (<a href=\"https://creativecommons.org/licenses/by-sa/3.0/\">CC-BY-SA</a>)",
+      "lid": "opentopomap",
+      "displayInLayerList": true,
+      "visible": false
     },
+
     {
       "type": "OSM",
       "lid": "osm-bg",
       "name": "OSM",
-      "isBaseLayer": true,
+      "isBaseLayer": false,
       "visible": true,
-      "displayInLayerList": false
+      "displayInLayerList": true
     }
+
   ],
 
   "modules": {
     "wgu-layerlist": {
-      "target": "toolbar",
-      "darkLayout": true,
+      "target": "menu",
       "win": true,
       "draggable": false
     },
@@ -90,43 +127,33 @@
       "target": "menu",
       "win": true,
       "draggable": false,
-      "darkLayout": true,
       "initPos": {
         "left": 8,
         "top": 74
       }
     },
-    "wgu-zoomtomaxextent": {
+    "wgu-geocoder": {
       "target": "toolbar",
-      "darkLayout": true
+      "darkLayout": true,
+      "minChars": 2,
+      "queryDelay": 200,
+      "selectZoom": 16,
+      "debug": false,
+      "placeHolder": "Search address",
+      "provider": "osm",
+      "providerOptions": {
+        "lang": "en-US",
+        "countrycodes": "",
+        "limit": 6
+      }
     },
-    "wgu-share": {
+    "wgu-zoomtomaxextent": {
       "target": "toolbar",
       "darkLayout": true
     },
-    "wgu-feature-info-window": {
-      "win": true,
-      "draggable": true,
-      "width": 360,
-      "icon": "info",
-      "layers": [
-        {
-          "layerId": "layer",
-          "title": "Info",
-          "titleProp": "name",
-          "imageProp": "image_url",
-          "descProp": "description",
-          "imageWidth": 360
-        }
-      ]
-    },
-    "wgu-routing": {
-      "transportModes": ["car", "publicTransport"],
-      "panel": true,
+    "wgu-helpwin": {
       "target": "toolbar",
-      "icon": "info",
       "darkLayout": true
     }
   }
-
 }