Add Addresses output as well as Setting Page

Author: 8102

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ava-gui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "AVA Team <[email protected]>",
   "description": "An electron-vue project",
   "license": null,

src/renderer/App.vue

@@ -2,12 +2,31 @@
   <div id="app">
     <Menu  v-if="isLoggedIn" mode="horizontal" active-name="Home" class="menu-nav-bar">
       <MenuItem name="Home">
+        <Icon
+          type="home"
+          color="white"
+        />
         <router-link to='landing-page'>Home</router-link>
       </MenuItem>
       <MenuItem name="Plugins">
+        <Icon
+          type="ios-filing"
+          color="white"
+        />
         <router-link to='plugin'>Plugin</router-link>
       </MenuItem>
-      <MenuItem name="Logout">
+      <MenuItem name="Setting">
+        <Icon
+          type="gear-a"
+          color="white"
+        />
+        <router-link to='setting'>Setting</router-link>
+      </MenuItem>
+      <MenuItem name="Exit">
+        <Icon
+          type="power"
+          color="white"
+        />
         <a v-on:click="logout()" href="#">Logout</a>
       </MenuItem>
     </Menu>

src/renderer/components/LandingPage.vue

@@ -5,11 +5,15 @@
       <p>First Name: {{firstName}}</p>
       <p>Last Name: {{lastName}}</p>
       <p>Email: {{email}}</p>
+      </br>
+      <p>Addresses to conect with the mobile application: <span v-for="address in addresses">{{address}}:8765</br></span></p>
     </div>
   </div>
 </template>
 
 <script>
+  import os from 'os';
+
   export default {
 
     name: 'landing-page',
@@ -34,10 +38,13 @@
         email: '',
         firstName: '',
         lastName: '',
+        addresses: [],
       };
     },
 
     mounted() {
+      const interfaces = os.networkInterfaces();
+
       this.$http.get('http://localhost:8001/me').then((res) => {
         if (res.status === 200) {
           this.username = res.body.username;
@@ -47,6 +54,15 @@
         }
       }).catch(() => {
       });
+
+      Object.keys(interfaces).map((interfacesKey) => {
+        interfaces[interfacesKey].forEach((inet) => {
+          if (inet.family === 'IPv4' && !inet.internal) {
+            this.addresses.push(inet.address);
+          }
+        });
+        return true;
+      });
     },
   };
 </script>

src/renderer/components/Setting.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <h1>All Settings</h1>
+    <p>What speech recognition engine would you like to use:
+      </br>
+      <i-switch
+        :disabled="engineDisabled"
+        @on-change="changeEngine"
+        class="switch-engine"
+        size="large"
+        v-model="switchEngine"
+      >
+        <span slot="open">Sphinx</span>
+        <span slot="close">Watson</span>
+      </i-switch>
+    </p>
+    <p>Would you like to use mobile Jack entry:
+      </br>
+      <i-switch
+        :disabled="entryDisabled"
+        @on-change="changeEntry"
+        class="switch-engine"
+        size="large"
+        v-model="switchEntry"
+      >
+        <span slot="open">Mobile</span>
+        <span slot="close">Raw</span>
+      </i-switch>
+    </p>
+  </div>
+</template>
+
+<script>
+  export default {
+
+    name: 'configuration-page',
+
+    data() {
+      return {
+        switchEngine: false,
+        switchEntry: false,
+        engineDisabled: false,
+        entryDisabled: false,
+      };
+    },
+    methods: {
+      changeEngine() {
+        const body = {
+          engine: this.switchEngine ? 'sphinx' : 'watson',
+        };
+        const option = { emulateJSON: true };
+
+        this.engineDisabled = true;
+        this.$http.post('http://localhost:8001/config', body, option).then(() => {
+          this.engineDisabled = false;
+        }).catch((err) => {
+          this.engineDisabled = false;
+          /* eslint no-console: ["error", { allow: ["warn", "error", "log"] }] */
+          console.log(err);
+        });
+      },
+      changeEntry() {
+        const body = {
+          STT: this.switchEntry ? 'mobile' : 'raw',
+        };
+        const option = { emulateJSON: true };
+
+        this.engineDisabled = true;
+        this.$http.post('http://localhost:8001/config', body, option).then(() => {
+          this.engineDisabled = false;
+        }).catch((err) => {
+          this.engineDisabled = false;
+          /* eslint no-console: ["error", { allow: ["warn", "error", "log"] }] */
+          console.log(err);
+        });
+      },
+    },
+  };
+</script>
+
+<style>
+  .switch-engine {
+    width: 78px;
+  }
+
+  .switch-engine.ivu-switch-checked::after {
+    left: 54px;
+  }
+
+  .switch-engine.ivu-switch-checked {
+    border-color: #EE578A;
+    background-color: #EE578A;
+  }
+</style>

src/renderer/router/index.js

@@ -22,6 +22,11 @@ export default new Router({
       name: 'plugin-page',
       component: require('@/components/PluginPage'),
     },
+    {
+      path: '/setting',
+      name: 'setting',
+      component: require('@/components/Setting'),
+    },
     {
       path: '*',
       redirect: '/',

yarn.lock

@@ -1792,6 +1792,10 @@ clone@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
 
+clone@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -4795,6 +4799,14 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
+less-loader@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.0.5.tgz#ae155a7406cac6acd293d785587fcff0f478c4dd"
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^2.3.0"
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"