feat: new settings page, persist ambianic edge connection settings to…

… browser storage
ambianic · Nov 18, 2019 · e3b70cb · e3b70cb
1 parent 09b3017
commit e3b70cb
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "compression-webpack-plugin": "^3.0.0",
+    "idb": "^4.0.5",
     "konva": "^4.0.17",
     "moment": "^2.24.0",
     "node": "^13.0.0",

diff --git a/src/views/People.vue b/src/views/People.vue
@@ -4,41 +4,84 @@
       align="center"
       justify="center"
     >
-      <div class="about">
-        <strong>People page content goes here...</strong>
-      </div>
-      <v-tooltip right>
-        <template v-slot:activator="{ on }">
-          <v-btn
-            href="https://github.com/ambianic"
-            icon
-            large
-            target="_blank"
-            v-on="on"
+      <v-card>
+        <v-card-title class="grey darken-2">
+          Add Person
+        </v-card-title>
+        <v-container grid-list-sm>
+          <v-layout
+            row
+            wrap
           >
-            <v-icon large>
-              mdi-code-tags
-            </v-icon>
-          </v-btn>
-        </template>
-        <span>Source</span>
-      </v-tooltip>
-      <v-tooltip right>
-        <template v-slot:activator="{ on }">
+            <v-flex
+              xs12
+              align-center
+              justify-space-between
+            >
+              <v-layout align-center>
+                <v-avatar
+                  size="40px"
+                  class="mr-3"
+                >
+                  <img
+                    src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
+                    alt=""
+                  >
+                </v-avatar>
+                <v-text-field
+                  placeholder="Name"
+                ></v-text-field>
+              </v-layout>
+            </v-flex>
+            <v-flex xs6>
+              <v-text-field
+                prepend-icon="business"
+                placeholder="Company"
+              ></v-text-field>
+            </v-flex>
+            <v-flex xs6>
+              <v-text-field
+                placeholder="Job title"
+              ></v-text-field>
+            </v-flex>
+            <v-flex xs12>
+              <v-text-field
+                prepend-icon="mail"
+                placeholder="Email"
+              ></v-text-field>
+            </v-flex>
+            <v-flex xs12>
+              <v-text-field
+                type="tel"
+                prepend-icon="phone"
+                placeholder="(000) 000 - 0000"
+              ></v-text-field>
+            </v-flex>
+            <v-flex xs12>
+              <v-text-field
+                prepend-icon="notes"
+                placeholder="Notes"
+              ></v-text-field>
+            </v-flex>
+          </v-layout>
+        </v-container>
+        <v-card-actions>
           <v-btn
-            icon
-            large
-            href="https://codepen.io/johnjleider/pen/MNYLdL"
-            target="_blank"
-            v-on="on"
-          >
-            <v-icon large>
-              mdi-codepen
-            </v-icon>
-          </v-btn>
-        </template>
-        <span>Codepen</span>
-      </v-tooltip>
+            text
+            color="primary"
+          >More</v-btn>
+          <v-spacer></v-spacer>
+          <v-btn
+            text
+            color="primary"
+            @click="dialog = false"
+          >Cancel</v-btn>
+          <v-btn
+            text
+            @click="dialog = false"
+          >Save</v-btn>
+        </v-card-actions>
+      </v-card>
     </v-row>
   </app-frame>
 </template>

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -4,50 +4,131 @@
       align="center"
       justify="center"
     >
-      <div class="about">
-        <strong>Settings page content goes here...</strong>
-      </div>
-      <v-tooltip right>
-        <template v-slot:activator="{ on }">
+      <v-card>
+        <v-card-title class="grey darken-2">
+          Settings
+        </v-card-title>
+        <v-container grid-list-sm>
+          <v-layout
+            row
+            wrap
+          >
+            <v-flex
+              xs12
+              align-center
+              justify-space-between
+            >
+              <v-layout align-center>
+                <v-text-field
+                  prepend-icon="mdi-web"
+                  placeholder="Ambianic Edge Device IP Address (e.g. 192.168.68.31) or host name (e.g. ambianic-edge.lan)"
+                  v-model="settingsForm.address"
+                />
+              </v-layout>
+            </v-flex>
+            <v-flex xs12>
+              <v-text-field
+                prepend-icon="mdi-shield-key"
+                placeholder="API Key (e.g. 234SDwersd235efedde)"
+                v-model="settingsForm.apiKey"
+              />
+            </v-flex>
+          </v-layout>
+        </v-container>
+        <v-card-actions>
           <v-btn
-            href="https://github.com/ambianic"
-            icon
-            large
-            target="_blank"
-            v-on="on"
+            text
+            color="primary"
           >
-            <v-icon large>
-              mdi-code-tags
-            </v-icon>
+            Test Connection
           </v-btn>
-        </template>
-        <span>Source</span>
-      </v-tooltip>
-      <v-tooltip right>
-        <template v-slot:activator="{ on }">
+          <v-spacer />
           <v-btn
-            icon
-            large
-            href="https://codepen.io/johnjleider/pen/MNYLdL"
-            target="_blank"
-            v-on="on"
+            text
+            color="primary"
+            @click="cancel"
           >
-            <v-icon large>
-              mdi-codepen
-            </v-icon>
+            Cancel
           </v-btn>
-        </template>
-        <span>Codepen</span>
-      </v-tooltip>
+          <v-btn
+            text
+            @click="save"
+          >
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
     </v-row>
   </app-frame>
 </template>
 <script>
 import AppFrame from '@/components/AppFrame.vue'
+import { openDB } from 'idb'
+
+const dbPromise = openDB('keyval-store', 1, {
+  upgrade (db) {
+    db.createObjectStore('settings')
+  }
+})
+
+const settingsDB = {
+  async get (key) {
+    return (await dbPromise).get('settings', key)
+  },
+  async set (key, val) {
+    return (await dbPromise).put('settings', val, key)
+  },
+  async delete (key) {
+    return (await dbPromise).delete('settings', key)
+  },
+  async clear () {
+    return (await dbPromise).clear('settings')
+  },
+  async keys () {
+    return (await dbPromise).getAllKeys('settings')
+  }
+}
 
 export default {
+  data () {
+    return {
+      settingsForm: {
+        address: '',
+        apiKey: ''
+      }
+    }
+  },
   components: {
     AppFrame
+  },
+  create () {
+    this.loadSettings()
+  },
+  methods: {
+    loadSettings () {
+      settingsDB.get('ambanic-edge-address').then(
+        (address) => {
+          this.settingsForm.address = address
+        }
+      )
+      settingsDB.get('ambanic-edge-api-key').then(
+        (apiKey) => {
+          this.settingsForm.apiKey = apiKey
+        }
+      )
+    },
+    saveSettings () {
+      settingsDB.set('ambanic-edge-address', this.settingsForm.address)
+      settingsDB.set('ambanic-edge-api-key', this.settingsForm.apiKey)
+    },
+    cancel () {
+      // load previously saved settings
+      this.loadSettings()
+    },
+    save () {
+      // load previously saved settings
+      this.saveSettings()
+    }
   }
 }