chore: checklist

Signed-off-by: ivelin <[email protected]>

.gitpod.yml

@@ -52,9 +52,7 @@ ports:
   - port: 8080 # Ambianic UI App
     onOpen: open-browser
   - port: 6080 # Cypress Interactive Mode
-    onOpen: open-browser
   - port: 3000 # Static file serve via Browsersync
-    onOpen: open-browser
   - port: 3001 # Browsersync dashboard
   - port: 8888 # Dependencies chart
   - port: 10000

src/remote/edgeAPI.js

@@ -118,6 +118,30 @@ export class EdgeAPI {
     return response
   }
 
+  async setIftttKey (newKey) {
+    const apiRoot = this._getRootURL()
+    const esc = encodeURIComponent
+    const urlEncodedKey = esc(newKey)
+    const request = {
+      url: `${apiRoot}integrations/ifttt/api_key/${urlEncodedKey}`
+    }
+    const response = await this._putJSON(request)
+    console.debug('setIftttKey() received response', { request }, { response })
+    return response
+  }
+
+  async enableNotifications (newState) {
+    const apiRoot = this._getRootURL()
+    const esc = encodeURIComponent
+    const urlEncodedState = esc(newState)
+    const request = {
+      url: `${apiRoot}notifications/enable/${urlEncodedState}`
+    }
+    const response = await this._putJSON(request)
+    console.debug('enableNotifications() received response', { request }, { response })
+    return response
+  }
+
   async auth () {
     console.debug('PEER_AUTHENTICATE auth() start')
     const authURL = `${API_SCHEMA}://${API_HOST}:${API_PORT}/`

src/store/localdb.js

@@ -18,5 +18,6 @@ localdb.version(1).stores({
 export var EdgeDeviceCard = localdb.myDevices.defineClass({
   peerID: String,
   displayName: String,
+  notificationsEnabled: Boolean,
   version: String
 })

src/store/mydevices.js

@@ -86,6 +86,9 @@ const actions = {
       if (edgeDetails.display_name) {
         deviceCard.displayName = edgeDetails.display_name
       }
+      if (edgeDetails.notifications_enabled) {
+        deviceCard.notificationsEnabled = edgeDetails.notifications_enabled
+      }
       // use Dexie put instead of update
       // in order to cover the case when a device card is not found in indexeddb
       console.debug('Putting localdb device card: ', { deviceCard })

src/views/AddDevice.vue

@@ -237,7 +237,6 @@
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
-import { EdgeDeviceCard } from '@/store/localdb'
 import {
   PEER_DISCOVERING_DONE,
   PEER_CONNECTED,
@@ -360,26 +359,8 @@ export default {
      */
     async connectStepCompleted () {
       console.debug('connectStepCompleted() called')
-      // fetch device info
-      const deviceDetails = await this.fetchEdgeDetails()
-      const newCard = new EdgeDeviceCard()
-      newCard.peerID = this.edgePeerId
-      newCard.displayName = deviceDetails.display_name
-      newCard.version = deviceDetails.version
-      // check if device is already known
-      const knownDevice = this.allDeviceCards.get(newCard.peerID)
-      console.debug('Is this a known device?', { knownDevice })
-      if (knownDevice) {
-        console.debug('Known device card. Already in localdb', { newCard })
-        // its a known device, let's just update its card
-        this.updateDeviceCard(newCard)
-        console.debug('Updated device card in localdb.')
-      } else {
-        // Not a known device. Add its card to db.
-        console.debug('Adding new device card to localdb', { newCard })
-        await this.addDeviceCard(newCard)
-        console.debug('Added new device card to localdb', { newCard })
-      }
+      // fetch device info and update vuex state
+      await this.fetchEdgeDetails()
       // switch current device reference in UI state (vuex store)
       await this.setCurrentDevice(this.edgePeerId)
       this.addDeviceStep++

src/views/DeviceCard.vue

@@ -395,6 +395,9 @@ export default {
         this.edgeVersion = ''
         this.edgeDisplayName = ''
       }
+    },
+    enableNotifications: async function (newVal, oldVal) {
+      await this.pnp.edgeAPI.enableNotifications(newVal)
     }
   }
 }

src/views/DeviceNotificationsConfig.vue

@@ -77,19 +77,21 @@
                     <amb-list-item
                       ref="list-item-apiKey"
                       data-cy="list-item-apiKey"
-                      title="__MY__KEY__"
-                      subtitle="Enter Your IFTTT API Key"
+                      title="__ENTER_NEW_KEY__"
+                      subtitle="IFTTT Webhooks API Key"
                       :edit-option="true"
                       :sensitive-field="true"
                       icon-name="key"
+                      :on-submit="onIftttKeyChanged"
+                      :rules="[rules.required, rules.counter]"
                     />
                     <v-list-item>
                       <v-list-item-content>
                         <a
                           href="https://docs.ambianic.ai/users/ifttt/"
                           target="_new_window"
                         >
-                          How to configure notifications?
+                          How does this work?
                         </a>
                       </v-list-item-content>
                     </v-list-item>
@@ -100,26 +102,13 @@
           </v-card-text>
           <v-card-actions>
             <v-btn
-              @click="connectToEdgeDevice"
+              @click="testNotifications"
               :disabled="isEdgeConnecting"
               color="primary"
             >
               Test
             </v-btn>
             <v-spacer />
-            <v-btn
-              @click="connectToEdgeDevice"
-              :disabled="isEdgeConnecting"
-              color="warning"
-            >
-              Update
-            </v-btn>
-            <v-btn
-              @click="forgetDeviceDialog = true"
-              :disabled="isEdgeConnecting"
-            >
-              Cancel
-            </v-btn>
           </v-card-actions>
         </v-card>
       </v-row>
@@ -159,7 +148,6 @@ import {
   PEER_AUTHENTICATING,
   PEER_CONNECTION_ERROR
 } from '@/store/mutation-types'
-import { PEER_CONNECT, REMOVE_REMOTE_PEER_ID } from '../store/action-types'
 
 export default {
   components: {
@@ -175,10 +163,10 @@ export default {
       isSyncing: false, // is the UI in the process of syncing with remote device data
       rules: {
         required: value => !!value || 'Required.',
-        counter: value => (!!value && value.length >= 5 && value.length <= 20) || 'Min 5 and Max 20 characters'
+        counter: value => (!!value && value.length >= 5 && value.length <= 50) || 'Min 5 and Max 50 characters'
       },
       forgetDeviceDialog: false,
-      enableNotifications: false,
+      notificationsEnabled: false,
       breadcrumbs: [
         {
           text: 'Settings',
@@ -200,73 +188,35 @@ export default {
   created () {
   },
   async mounted () {
-    // If a connection to the edge device is already established
-    // let's pull the latest info from it in case there are changes
-    // this UI client does not know about yet.
-    if (this.isEdgeConnected) {
-      await this.fetchEdgeDetails()
-    }
   },
   methods: {
     ...mapActions({
-      deleteCurrentDeviceConnection: REMOVE_REMOTE_PEER_ID,
-      forgetDeviceCard: 'myDevices/forget',
-      updateDisplayName: 'myDevices/updateDisplayName',
-      updateFromRemote: 'myDevices/updateFromRemote',
-      setCurrentDevice: 'myDevices/setCurrent'
     }),
-    async fetchEdgeDetails () {
-      try {
-        const details = await this.pnp.edgeAPI.getEdgeStatus()
-        console.debug('Edge device details fetched:', { details })
-        if (!details || !details.version) {
-          this.edgeDeviceError = 'Edge device requires update.'
-        } else {
-          // save device details in local db
-          details.peerID = this.edgePeerId
-          await this.updateFromRemote(details)
-        }
-      } catch (err) {
-        this.edgeDeviceError = 'Edge device API offline or unreachable.'
-        console.error('Error while fetching remote device status', { err })
-      }
-    },
-    async onDisplayNameChanged (newDisplayName) {
-      console.debug(`newDisplayName: ${newDisplayName}`)
+    async onIftttKeyChanged (newIftttKey) {
+      console.debug(`onIftttKeyChanged(): ${newIftttKey}`)
       let updated = false
-      if (newDisplayName) {
+      if (newIftttKey) {
         try {
-          console.debug(`New device display name: ${newDisplayName}`)
+          console.debug(`New IFTTT Key: ${newIftttKey}`)
           // trigger edit change callback
           //    show blocking dialog with spinner https://vuetifyjs.com/en/components/dialogs/#loader
           //    await dispatch to push new device display name: 1. to device, 2. to local device store
           this.isSyncing = true
           // send changes to remote edge device
-          await this.pnp.edgeAPI.setDeviceDisplayName(newDisplayName)
-          // save changes to localdb
-          await this.updateDisplayName({ peerID: this.edgePeerId, displayName: newDisplayName })
+          await this.pnp.edgeAPI.setIftttKey(newIftttKey)
           updated = true
         } catch (e) {
-          this.edgeDeviceError = 'Error updating display name. Edge device offline or has outdated API.'
-          console.error('Exception calling updateDisplayName()', { e })
+          this.edgeDeviceError = 'Error updating IFTTT Key. Edge device offline or has outdated API.'
+          console.error('Exception calling setIftttKey()', { e })
         } finally {
           this.isSyncing = false
         }
       }
       return updated
     },
-    async connectToEdgeDevice () {
-      await this.$store.dispatch(PEER_CONNECT, this.edgePeerId)
-    },
-    async forgetEdgeDevice () {
-      // remove from local db and vuex state
-      console.debug('forgetDeviceCard', this.edgePeerId)
-      await this.forgetDeviceCard(this.edgePeerId)
-      // delete peer connection to curren device
-      await this.deleteCurrentDeviceConnection()
-      // close forget device dialog
-      this.forgetDeviceDialog = false
-      await this.$router.replace({ name: 'settings' })
+    async testNotifications () {
+      // TODO
+      // remote API call to edge device: /api/notifications/test
     }
   },
   computed: {
@@ -288,11 +238,6 @@ export default {
     })
   },
   watch: {
-    isEdgeConnected: async function (isConnected) {
-      if (isConnected) {
-        await this.fetchEdgeDetails()
-      }
-    },
     isPeerConnectionError: async function (isError) {
       console.debug('watch peerConnectionError triggered. New value', { isError })
       if (isError) {
@@ -303,18 +248,6 @@ export default {
         this.edgeDeviceError = undefined
         console.debug('isPeerConnectionError FALSE. Error message:', this.edgeDeviceError)
       }
-    },
-    currentDeviceCard: async function (newVal, oldVal) {
-      console.debug('Current Edge Device Card changed:', { newVal, oldVal })
-      if (newVal) {
-        this.edgeVersion = newVal.version
-        this.edgeDisplayName = newVal.displayName
-      } else {
-        // right after the user requests to "Forget" a device
-        // there is no current device selected
-        this.edgeVersion = ''
-        this.edgeDisplayName = ''
-      }
     }
   }
 }