This page describes briefly the items developed within the Geolicious project that are candidates for merging/integrating back into the meggsimum/wegue repo. Plus ideas for Architecture and Workflows based on those used in the NPLH Project.

They are divided as follows:

1. Architecture and Workflow: Architectural principles/Main Application structure
2. Components - Reusable single more or less standalone components (under src/components)
3. Bug fixes

Basically: how are developers going to use Wegue, what is needed in terms of structuring code, config and more.

What is starting point for an app-developer:

• Fork/Clone Wegue Project ?
• Wegue as Git Submodule ?
• npm install wegue ?

And from there: ..

https://github.com/meggsimum/wegue/issues/98 - this issue was basically solved

This was more or less applied in NPLH project:

• keep Wegue src and src/components as-is
• all modifications and config, static files (e.g. icons) under app/
• main app structure files "shadowed" under app/-dir: WguApp, WguAppTemplate, AppHeader, AppFooter
• new and enhanced Components under app/components-dir: e.g. LayerList
• needed Webpack build config changes!

Up to now type: win, but in NPLH project added panel/drawer support ("GMaps Style") using the Vuetify v-navigation-drawer component. Included is the concept of a ToggleGroup (via Vue-events) such that only 1 (or zero) side Side Panel is active. Summary:

• FeatureInfoPanel (replaces FeatureInfoWindow), LayerListPanel and RoutingPanel (search) are Side Panels in shared ToggleGroup
• new Module Type panel within Wegue arch
• panel: true indicates it is a Side Panel
• active property if Panel should be shown on initial load
• mobileActive: true do not be active on small screens, move button from toolbar to menu
• toggleGroup shared event group
• right show Panel on right of window (default false)

Example:

    "wgu-layerlist": {
      "target": "toolbar",
      "darkLayout": false,
      "panel": true,
      "active": true,
      "mobileActive": false,
      "right": false,
      "width": 360,
      "height": "100%",
      "toggleGroup": "side-panel-active",
      "options": {
        "hideCategories": true,
        "hideTags": false
      }
    },

Also shows that config should have common attributes direct and module-specific in options. These can be passed to the Vue component like:

<template>
  <v-navigation-drawer class="wgu-layer-list-panel"
      v-model="drawerOpen"
      :value="drawerOpen"
      :dark="dark"
      :right="right"
      :width="width"
      :height="height"
      hide-overlay
      disable-resize-watcher
      disable-route-watcher
      absolute
      stateless
  >

    <wgu-layerlist v-bind="options" />

  </v-navigation-drawer>
</template>

and script section is quite simple:

<script>
  import LayerList from './LayerList';
  import {WguEventBus} from '../../../src/WguEventBus';

  export default {
    name: 'wgu-layerlist-panel',
    components: {
      'wgu-layerlist': LayerList
    },
    props: {
      right: {type: Boolean, required: false, default: false},
      width: {type: Number, required: false, default: 360},
      height: {type: String, required: false, default: '100%'},
      dark: {type: Boolean, required: false, default: false},
      color: {type: String, required: false, default: 'red darken-3'},
      title: {type: String, required: false, default: 'Layers'},
      active: {type: Boolean, required: false, default: false},
      options: { type: Object, required: false, default: {} },
      toggleGroup: {type: String, required: false, default: undefined}
    },
    data () {
      return {
        moduleName: 'wgu-layerlist',
        drawerOpen: this.active
      }
    },
    mounted () {
      WguEventBus.$on('toggle-layerlist-panel', state => {
        this.drawerOpen = state === undefined ? !this.drawerOpen : state;
      });

      // When member of toggle group: close if any other panel active
      if (this.toggleGroup) {
        WguEventBus.$on(this.toggleGroup, ({ moduleName, state }) => {
          this.drawerOpen = moduleName === this.moduleName && state;
        });
      }
    }
  }
</script>

The following components were new or enhanced.

New

Enhanced

Plus

Several bug-fixes were made, though many in the NPLH (private) app repo.

1. theming: appeared very hard to go from dark to non dark Vuetify theme
2. Layerlist scroll bars at overflow