wegue-oss#36 PoC success for app config/dir restructure

app/.gitignore

@@ -1,4 +1,5 @@
 # Ignore everything in this directory
-*
+# *
 # Except this file
-!.gitignore
+# !.gitignore
+.DS_Store

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>

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>

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>

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>