navigation wip

src/prog/dashboard3/src/components/domo-tabs.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script>
+
 export default {
   // name: 'ComponentName',
   data () {

src/prog/dashboard3/src/layouts/default.vue

@@ -2,7 +2,7 @@
   <q-layout view="lHh Lpr lFf">
     <q-layout-header>
       <q-toolbar :inverted="$q.theme === 'ios'">
-        <q-toolbar-title> Domo </q-toolbar-title>
+        <q-toolbar-title> {{ pageMeta.title }} </q-toolbar-title>
       </q-toolbar>
     </q-layout-header>
     <q-layout-footer reveal v-if="$q.theme === 'ios'">
@@ -24,6 +24,8 @@
 
 <script>
 import DomoTabs from 'components/domo-tabs'
+import { mapState } from 'vuex'
+
 export default {
   name: 'LayoutDefault',
   components: {
@@ -33,6 +35,11 @@ export default {
     return {
     }
   },
+  computed: {
+    ...mapState('domoStore', [
+      'pageMeta'
+    ])
+  },
   methods: {
     resetScroll (el, done) {
       document.documentElement.scrollTop = 0

src/prog/dashboard3/src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+import store from 'src/store'
 import routes from './routes'
 
 Vue.use(VueRouter)
@@ -21,4 +22,20 @@ const Router = new VueRouter({
   routes
 })
 
+Router.beforeEach((to, from, next) => {
+  if (to.meta) {
+    store.commit('domoStore/updatePageMeta', to.meta)
+  }
+
+  /*
+  // Inform Google Analytics
+  if (typeof ga !== 'undefined') {
+    ga('set', 'page', to.path)
+    ga('send', 'pageview')
+  }
+  */
+
+  next()
+})
+
 export default Router

src/prog/dashboard3/src/router/routes.js

@@ -4,12 +4,36 @@ export default [
     path: '/',
     component: () => import('layouts/default'),
     children: [
-      { path: '', component: () => import('pages/home') },
-      { path: '/outlets', component: () => import('pages/outlets') },
-      { path: '/shutters', component: () => import('pages/shutters') },
-      { path: '/sprinklers', component: () => import('pages/sprinklers') },
-      { path: '/sequences', component: () => import('pages/sequences') },
-      { path: '/settings', component: () => import('pages/settings') }
+      { path: '',
+        meta: {
+          title: 'Domo'
+        },
+        component: () => import('pages/home') },
+      { path: '/outlets',
+        meta: {
+          title: 'Outlets'
+        },
+        component: () => import('pages/outlets') },
+      { path: '/shutters',
+        meta: {
+          title: 'Shutters'
+        },
+        component: () => import('pages/shutters') },
+      { path: '/sprinklers',
+        meta: {
+          title: 'Sprinklers'
+        },
+        component: () => import('pages/sprinklers') },
+      { path: '/sequences',
+        meta: {
+          title: 'Sequences'
+        },
+        component: () => import('pages/sequences') },
+      { path: '/settings',
+        meta: {
+          title: 'Settings'
+        },
+        component: () => import('pages/settings') }
     ]
   },
 

src/prog/dashboard3/src/store/domo-store/actions.js

@@ -0,0 +1,3 @@
+/*
+export const someAction = (state) => {}
+ */

src/prog/dashboard3/src/store/domo-store/getters.js

@@ -0,0 +1,3 @@
+/*
+export const someGetter = (state) => {}
+ */

src/prog/dashboard3/src/store/domo-store/index.js

@@ -0,0 +1,12 @@
+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}

src/prog/dashboard3/src/store/domo-store/mutations.js

@@ -0,0 +1,16 @@
+export const updateDrawerState = (state, opened) => {
+    state.drawerState = opened
+  }
+  
+  export const updatePageMeta = (state, meta) => {
+    state.pageMeta = {
+      title: 'Domo',
+      hash: '',
+      icon: '',
+      iframeTabs: false,
+      backRoute: '/',
+      tabs: [],
+      ...meta
+    }
+  }
+  

src/prog/dashboard3/src/store/domo-store/state.js

@@ -0,0 +1,4 @@
+export default {
+  drawerState: true,
+  pageMeta: {}
+}