feat: improved app install flow

initial progress towards #380

src/components/NavBar.vue

@@ -192,8 +192,8 @@ export default {
       //    { text: 'Integrations' }
       //  ]
       // },
-      { icon: 'mdi-video-input-antenna', text: 'Connect', link: '/edge-connect' },
-      // { icon: 'settings', text: 'Settings', link: '/settings' },
+      // { icon: 'mdi-video-input-antenna', text: 'Connect', link: '/edge-connect' },
+      { icon: 'settings', text: 'Settings', link: '/settings' },
       { icon: 'chat_bubble', text: 'Send feedback', link: '/feedback' },
       { icon: 'help', text: 'Help', link: '/help' },
       { icon: 'info', text: 'About Ambianic', link: '/about' }

src/router/index.js

@@ -38,7 +38,7 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "edge-connect" */ '../views/EdgeConnect.vue') // '../views/Settings.vue')
+    component: () => import(/* webpackChunkName: "settings" */ '../views/Settings.vue')
   },
   {
     path: '/feedback',

src/store/action-types.js

@@ -2,10 +2,14 @@
 Common action types
 */
 
+// PnP store actions
 export const INITIALIZE_PNP = 'INITIALIZE_PNP'
 export const PNP_SERVICE_CONNECT = 'pnpServiceConnect'
 export const PNP_SERVICE_RECONNECT = 'pnpServiceReconnect'
 export const PEER_DISCOVER = 'peerDiscover'
 export const PEER_CONNECT = 'peerConnect'
 export const PEER_AUTHENTICATE = 'peerAuthenticate'
 export const REMOVE_REMOTE_PEER_ID = 'removeRemotePeerId'
+
+// User store actions
+export const USER_VISIT = 'userVisit'

src/store/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import PNPStore from './pnp.js'
+import UserStore from './user.js'
+
 import { INITIALIZE_PNP } from './action-types.js'
 import { UPDATE_AVAILABLE } from './mutation-types'
 
@@ -19,7 +21,8 @@ const store = new Vuex.Store({
   actions: {
   },
   modules: {
-    pnp: PNPStore
+    pnp: PNPStore,
+    user: UserStore
   }
 })
 

src/store/mutation-types.js

@@ -2,6 +2,7 @@
 Common mutation types
 */
 
+// PnP mutations
 export const PEER_DISCONNECTED = 'PEER_DISCONNECTED'
 export const PEER_CONNECTING = 'PEER_CONNECTING'
 export const PEER_DISCOVERING = 'PEER_DISCOVERING'
@@ -18,4 +19,9 @@ export const NEW_REMOTE_PEER_ID = 'NEW_REMOTE_PEER_ID'
 export const REMOTE_PEER_ID_REMOVED = 'REMOTE_PEER_ID_REMOVED'
 export const PEER_FETCH = 'PEER_FETCH'
 
+// App update mutations
 export const UPDATE_AVAILABLE = 'UPDATE_AVAILABLE'
+
+// User state mutations
+export const FIRST_TIME_USER_VISIT = 'FIRST_TIME_USER_VISIT'
+export const RETURNING_USER_VISIT = 'RETURNING_USER_VISIT'

src/store/user.js

@@ -0,0 +1,62 @@
+/* eslint-disable no-console */
+
+/**
+  Manage user state
+*/
+import {
+  FIRST_TIME_USER_VISIT,
+  RETURNING_USER_VISIT
+} from './mutation-types.js'
+import {
+  USER_VISIT
+} from './action-types.js'
+const STORAGE_KEY = 'ambianic-user-settings'
+
+const state = {
+  /**
+    Is this a first time user of the system?
+  */
+  isReturningUser: window.localStorage.getItem(`${STORAGE_KEY}.isReturningUser`)
+}
+
+const mutations = {
+  [FIRST_TIME_USER_VISIT] (state) {
+    state.isReturningUser = true
+    window.localStorage.setItem(`${STORAGE_KEY}.isReturningUser`, true)
+  },
+  [RETURNING_USER_VISIT] (state) {
+  }
+}
+
+const actions = {
+  /**
+  * Update user state according to user visit of the app
+  */
+  async [USER_VISIT] ({ state, commit }) {
+    console.debug('user visiting app')
+    if (state.isReturningUser) {
+      commit(RETURNING_USER_VISIT)
+    } else {
+      commit(FIRST_TIME_USER_VISIT)
+    }
+  }
+}
+
+const getters = {
+  isFirstTimeUser: state => {
+    const isReturningUser = state.isReturningUser
+    console.debug({ isReturningUser })
+    const isFirstTimeUser = !isReturningUser
+    console.debug({ isFirstTimeUser })
+    return isFirstTimeUser
+  }
+}
+
+const userStoreModule = {
+  state,
+  getters,
+  mutations,
+  actions
+}
+
+export default userStoreModule

src/views/EdgeConnect.vue

@@ -189,6 +189,7 @@ import {
 } from '@/store/mutation-types'
 
 export default {
+  name: 'EdgeConnect',
   components: {
     AmbBanner,
     AmbListItem
@@ -240,28 +241,13 @@ export default {
       return step
     }
   },
-  mounted () {
-    this.loadSettings()
-  },
-  beforeDestroy () {
-  },
   methods: {
     resetEdgeConnection () {
       this.resetEdgeDialog = false
       this.removeEdgeId()
     },
-    loadSettings () {
-      // settingsDB.get('ambanic-edge-address').then(
-      //   (address) => {
-      //     this.edgeAddress = address
-      //   }
-      // )
-    },
-    saveSettings () {
-      // settingsDB.set('ambanic-edge-address', this.edgeAddress)
-    },
     ...mapActions({
-      removeEdgeId: 'removeRemotePeerId' // map `this.add()` to `this.$store.dispatch('increment')`
+      removeEdgeId: 'removeRemotePeerId' // map `this.removeEdgeId()` to `this.$store.dispatch('removeRemotePeerId')`
     })
   }
 }

src/views/Home.vue

@@ -20,10 +20,10 @@
           >
             <v-list-item-content>
               <v-list-item-title class="headline">
-                Cozy at Home
+                Welcome to Ambianic.ai
               </v-list-item-title>
               <v-list-item-subtitle>
-                via Ambient Intelligence
+                Cozy at Home via Ambient Intelligence
               </v-list-item-subtitle>
             </v-list-item-content>
           </v-list-item>
@@ -33,29 +33,18 @@
           />
 
           <v-card-text id="welcome-text">
-            Review your home timeline for notable moments.
-            Configure input sensors and camers for Ambianic to observe.
+            Ambianic.ai enables you to see your home
+            as a timeline of important events.
+            You can configure camers and sensors as ambient observation sources.
             Share, purge or backup your data
             - it never slips out of your control.
           </v-card-text>
 
+          <v-card-text id="welcome-text">
+            Now let's setup your Ambianic.ai system.
+          </v-card-text>
+
           <v-card-actions>
-            <v-btn
-              rounded
-              color="pink darken-4"
-              dark
-              class="ma-2 white--text"
-              :to="'timeline'"
-              id="btn-timeline"
-            >
-              View Timeline
-              <v-icon
-                right
-              >
-                mdi-history
-              </v-icon>
-            </v-btn>
-            <v-spacer />
             <v-btn
               id="btn-settings"
               rounded
@@ -64,11 +53,11 @@
               class="ma-2 white--text"
               :to="'settings'"
             >
-              Settings
+              Continue
               <v-icon
                 right
               >
-                mdi-settings
+                mdi-chevron-right
               </v-icon>
             </v-btn>
           </v-card-actions>
@@ -78,7 +67,7 @@
         align="end"
         justify="center"
         no-gutters=""
-        >
+      >
         <v-col>
           <update-notification class="mx-auto" />
         </v-col>
@@ -89,11 +78,35 @@
 
 <script>
 import UpdateNotification from '../components/UpdateNotification'
+import { mapGetters, mapActions } from 'vuex'
+import {
+  USER_VISIT
+} from '@/store/action-types'
 
 export default {
   name: 'Home',
   components: {
     UpdateNotification
+  },
+  computed: {
+    ...mapGetters([
+      'isFirstTimeUser'
+    ])
+  },
+  methods: {
+    ...mapActions({
+      userVisit: USER_VISIT
+    })
+  },
+  created () {
+    const firstVisit = this.isFirstTimeUser
+    console.debug({ firstVisit }) // eslint-disable-line no-console
+    console.debug('dispatch user visiting app')
+    this.userVisit()
+    if (!firstVisit) {
+      this.$router.replace({ name: 'timeline' })
+    }
   }
+
 }
 </script>