No use the login UI, and a list of online devices is displayed. #1

Signed-off-by: Jianhui Zhao <jianhuizhao329@gmail.com>

assets/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@xunlei/vue-context-menu": "^1.0.2",
+    "axios": "^0.17.1",
     "iview": "^2.8.0",
     "simple-websocket": "^5.1.0",
     "vue": "^2.5.2",

assets/src/App.vue

@@ -1,18 +1,6 @@
 <template>
     <div id="app">
-        <Card class="login-container" :style="{display: termOn ? 'none' : 'block'}">
-            <p slot="title">Login</p>
-            <Form ref="form" :model="form" :rules="ruleValidate">
-                <FormItem prop="id">
-                    <Input type="text" v-model="form.id" size="large" auto-complete="off" placeholder="Enter your device ID...">
-                        <Icon type="social-tux" slot="prepend"></Icon>
-                    </Input>
-                </FormItem>
-                <FormItem>
-                    <Button type="primary" long size="large" icon="log-in" @click="handleSubmit">Login</Button>
-                </FormItem>
-            </Form>
-        </Card>
+        <Table :columns="columns" :data="devlist" :style="{display: termOn ? 'none' : 'block'}" class="devlist"></Table>
         <div ref="terminal" :style="{display: termOn ? 'block' : 'none', height: '100%'}"></div>
         <Spin size="large" fix v-if="terminal_loading"></Spin>
         <context-menu class="right-menu" :target="contextMenuTarget" :show="contextMenuVisible" @update:show="showMenu">
@@ -41,6 +29,7 @@ import * as Socket from 'simple-websocket';
 import { Terminal } from 'xterm'
 import 'xterm/lib/xterm.css'
 import * as fit from 'xterm/lib/addons/fit/fit';
+import axios from 'axios'
 
 export default {
     data() {
@@ -59,14 +48,41 @@ export default {
             recvCnt: 0,
             username: '',
             password: '',
-            form: {
-                id: ''
-            },
-            ruleValidate: {
-                id: [
-                    {required: true, trigger: 'blur', message: 'Device ID is required'}
-                ]
-            }
+            did: '',
+            columns: [
+                {
+                    title: 'ID',
+                    key: 'id',
+                    sortType: 'asc',
+                    sortable: true
+                }, {
+                    title: 'Uptime',
+                    key: 'uptime',
+                    sortable: true
+                }, {
+                    title: 'Description',
+                    key: 'description'
+                }, {
+                    width: 150,
+                    align: 'center',
+                    render: (h, params) => {
+                        return h('Button', {
+                            props: {
+                                type: 'primary'
+                            },
+                            on: {
+                                click: () => {
+                                    this.terminal_loading = true;
+                                    this.termOn = true;
+                                    this.did = params.row.id;
+                                    window.setTimeout(this.login, 200);
+                                }
+                            }
+                        }, 'Connect');
+                    }
+                }
+            ],
+            devlist: [ ]
         }
     },
 
@@ -172,7 +188,7 @@ export default {
             if (location.protocol == 'https://')
                 protocol = 'wss://';
 
-            var ws = new Socket(protocol + location.host + '/ws/browser?did=' + this.form.id);
+            var ws = new Socket(protocol + location.host + '/ws/browser?did=' + this.did);
             ws.on('connect', ()=> {
                 ws.on('data', (data)=>{
                     var resp = JSON.parse(data);
@@ -217,15 +233,6 @@ export default {
                     this.logout(null, term);
                 });
             })
-        },
-        handleSubmit() {
-            this.$refs['form'].validate((valid) => {
-                if (valid) {
-                    this.terminal_loading = true;
-                    this.termOn = true;
-                    window.setTimeout(this.login, 200);
-                }
-            });
         }
     },
     mounted() {
@@ -241,9 +248,15 @@ export default {
         if (id) {
             this.terminal_loading = true;
             this.termOn = true;
-            this.form.id = id;
+            this.did = id;
             window.setTimeout(this.login, 200);
         }
+
+        window.setInterval(() => {
+            axios.get('/list').then((res => {
+                this.devlist = res.data;
+            }));
+        }, 3000);
     }
 }
 </script>
@@ -261,13 +274,8 @@ export default {
         background-color: #555;
     }
 
-    .login-container {
-        width: 400px;
-        height: 200px;
-        top: 50%;
-        left: 50%;
-        margin-left: -200px;
-        margin-top: -120px;
+    .devlist {
+        height: 100%
     }
 
     .right-menu {