Added app settings page (#15)

Closes: #11

Only setting available at the moment are for pytorch server .  But this is this easily expandable.

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#15

src/components/app.vue

@@ -7,7 +7,7 @@
       <f7-page>
         <f7-navbar title="ALVINN"></f7-navbar>
         <f7-list>
-          <f7-list-item>Settings</f7-list-item>
+          <f7-list-item link="/settings/" view=".view-main" panel-close=".panel-left">Settings</f7-list-item>
           <f7-list-item link="/about/">About ALVINN</f7-list-item>
         </f7-list>
       </f7-page>

src/js/routes.js

@@ -1,6 +1,7 @@
 
 import HomePage from '../pages/home.vue';
 import AboutPage from '../pages/about.vue';
+import SettingsPage from '../pages/settings.vue';
 import DetectPage from '../pages/detect.vue';
 
 import DynamicRoutePage from '../pages/dynamic-route.vue';
@@ -19,6 +20,10 @@ var routes = [
     path: '/detect/:region/',
     component: DetectPage,
   },
+  {
+    path: '/settings/',
+    component: SettingsPage,
+  },
 
 
   {

src/pages/detect.vue

@@ -102,6 +102,14 @@
                 return 'yellow';
             },
             setData () {
+                var loadServerSettings = localStorage.getItem('serverSettings')
+                if (loadServerSettings) var serverSettings = JSON.parse(loadServerSettings)
+                if (serverSettings && serverSettings.use) {
+                    f7.dialog.alert(`Using server at ${serverSettings.address}`)
+                } else {
+                    f7.dialog.alert('Using built-in model')
+                }
+                //Placeholder data
                 this.resultData = fakeData.testData
             },
             selectImage () {

src/pages/settings.vue

@@ -0,0 +1,72 @@
+<template>
+    <f7-page name="settings">
+      <!-- Top Navbar -->
+      <f7-navbar :sliding="false" back-link="Back">
+        <f7-nav-title sliding>Settings</f7-nav-title>
+      </f7-navbar>
+      <f7-block style="display: flex; flex-direction: column; align-items: center;">
+        <div style="display: flex; flex-direction: column; align-items: center;">
+          <f7-block-title medium>Server Settings</f7-block-title>
+          <div style="display:flex; justify-content:space-between; width: 100%">
+            <span style="margin-left: 16px;">Use external server</span>
+            <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" />
+          </div>
+          <f7-list>
+            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
+            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
+          </f7-list>
+          <f7-button @click="saveServerSettings" >Save</f7-button>
+        </div>
+      </f7-block>
+    </f7-page>
+</template>
+
+<script>
+    import { f7 } from 'framework7-vue'
+
+    export default {
+        data () {
+            return {
+            serverSettings: {
+              use: false,
+              address: '10.170.64.22',
+              port: '9001'
+            },
+            }
+        },
+        created () {
+            var loadServerSettings = localStorage.getItem('serverSettings')
+            if (loadServerSettings) this.serverSettings =  JSON.parse(loadServerSettings)
+        },
+        methods: {
+            saveServerSettings () {
+                let saveSetting = new Promise(
+                  (saved,failed) => {
+                    try {
+                      localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
+                      saved()
+                    } catch {
+                      failed()
+                    }
+                  }
+                )
+                saveSetting.then(
+                  () => {
+                    var toast = f7.toast.create({
+                      text: 'Settings saved',
+                      closeTimeout: 2000
+                    })
+                    toast.open()
+                  },
+                  () => {
+                    var toast = f7.toast.create({
+                      text: 'ERROR: No settings saved',
+                      closeTimeout: 2000
+                    })
+                    toast.open()
+                  }
+                )
+            },
+          }
+        }
+</script>