Show local ip in settings page (#4)

Guidap · May 14, 2019 · 6a98e9f · 6a98e9f
2 parents 63868b5 + c54e0a3
commit 6a98e9f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "electron-log": "^3.0.5",
     "electron-updater": "^4.0.6",
     "express": "^4.16.4",
+    "ip": "^1.1.5",
     "material-icons": "^0.3.1",
     "morgan": "^1.9.1",
     "printer": "^0.2.2",

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -16,10 +16,10 @@
             <span class="md-list-item-text">Printers</span>
           </md-list-item>
 
-          <!-- <md-list-item to="/settings">
+          <md-list-item to="/settings">
             <md-icon>settings</md-icon>
             <span class="md-list-item-text">Settings</span>
-          </md-list-item> -->
+          </md-list-item>
         </md-list>
 
         <p class="made-with-love">Made with <span class="heart">❤</span> by GUIDAP</p>
@@ -71,6 +71,7 @@
   .md-drawer {
     width: 230px;
     max-width: calc(100vw - 125px);
+    min-height: 100vh;
   }
   
   .md-content.md-app-content {

diff --git a/src/renderer/components/Home.vue b/src/renderer/components/Home.vue
@@ -15,7 +15,7 @@
           <md-icon>refresh</md-icon>
         </md-button>
       </md-subheader>
-      <md-card v-for="pr in printers" :key="pr.name">
+      <md-card v-for="pr in printers" :key="pr.name" md-with-hover>
         <md-card-header>
           <md-card-media>
             <md-icon class="md-size-3x">print</md-icon>

diff --git a/src/renderer/components/Settings.vue b/src/renderer/components/Settings.vue
@@ -1,14 +1,52 @@
 <template>
   <div>
+    <md-card md-with-hover>
+      <md-card-header>
+        <md-card-media>
+          <md-icon class="md-size-3x">router</md-icon>
+        </md-card-media>
+
+        <md-card-header-text>
+          <div class="md-title">
+            {{ ip }} &nbsp;<md-button class="md-dense md-icon-button md-primary" @click="copyIp()"><md-icon>content_copy</md-icon></md-button>
+          </div>
+          <div class="md-subhead">Local IP</div>
+        </md-card-header-text>
+      </md-card-header>
+    </md-card>
 
+    <md-snackbar md-position="center" :md-duration="4000" :md-active.sync="showSnackbar" md-persistent>
+      <span>Local IP copied in your clipboard!</span>
+    </md-snackbar>
   </div>
 </template>
 
 <script>
+  import ip from 'ip'
+  import Vue from 'vue'
+  import { MdCard, MdSnackbar } from 'vue-material/dist/components'
+
+  Vue.use(MdCard)
+  Vue.use(MdSnackbar)
+
   export default {
     name: 'settings',
     data: function () {
       return {
+        ip: ip.address(),
+        showSnackbar: false
+      }
+    },
+
+    methods: {
+      copyIp: function () {
+        const el = document.createElement('textarea')
+        el.value = this.ip
+        document.body.appendChild(el)
+        el.select()
+        document.execCommand('copy')
+        document.body.removeChild(el)
+        this.showSnackbar = true
       }
     }
   }

diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
@@ -12,11 +12,11 @@ export default new Router({
       name: 'home',
       component: require('@/components/Home').default
     },
-    // {
-    //   path: '/settings',
-    //   name: 'settings',
-    //   component: require('@/components/Settings').default
-    // },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: require('@/components/Settings').default
+    },
     {
       path: '*',
       redirect: '/'