develop gateway_frontend

0f004701 · Pani · a91133df · 0f004701 · 0f004701 · 0f004701
Commit 0f004701 authored Aug 04, 2020 by Pani
9 changed files
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,8 +8,11 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "axios": "^0.19.2",
    "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "element-ui": "^2.4.5",
+    "vue": "^2.6.10",
+    "vue-axios": "^2.1.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
@@ -18,6 +21,7 @@
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
+    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {

--- a/public/index.html
+++ b/public/index.html
@@ -4,8 +4,7 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>网关选择</title>
-    <title>gateway_frontend</title>
  </head>
  <body>
    <noscript>

--- a/src/App.vue
+++ b/src/App.vue
 <template>
  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+    <div class="container">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+      <header>
+        <h1 class="header-title">{{ info.title }}</h1>
+        <p class="origin-ip-container"><span class="origin-text">IP: </span><span class="origin-ip">{{ info.ip }}</span></p>
+      </header>
+      <main>
+        <br>
+        <el-button :icon="refreshIcon" circle @click="refreshNode"></el-button>
+        <div class="group-container" v-for="(item, index) in info.groups" v-bind:key="index">
+          <div class="group-header">
+            <span class="header-title">{{ item.name }}</span>
+            <span class="header-des">{{ item.description }}</span>
+          </div>
+          <div class="group-select-container">
+            <div class="sub-switch" v-for="(subItem, index2) in item.sets" v-bind:key="'sub'+index2">
+              <el-switch
+                         v-model="subItem.here"
+                         @change="handleChange(index, index2)"
+                         :active-text="subItem.name+' ('+ subItem.description +')'">
+              </el-switch>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
  </div>
 </template>
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+  /* eslint-disable */
+  const isTest = false;
+  let APP_DOMAIN = '';
+  if(isTest){
+    APP_DOMAIN = "https://railgun.momobako.com"
+  }else{
+    APP_DOMAIN = window.location.protocol + '//' + window.location.host;
+  }
+  console.log(APP_DOMAIN);
+  export default {
+    name: 'app',
+    created(){
+      this.refreshNode();
+    },
+    data(){
+      return {
+        info: {title: 'Loading...', ip: '0.0.0.0'},
+        nowSelect: '',
+        refreshIcon: 'el-icon-refresh-right'
+      }
+    },
+    methods: {
+      refreshNode(){
+        this.refreshIcon = 'el-icon-loading';
+        const that = this;
+        this.axios.get(APP_DOMAIN + '/api/get').then((res)=>{
+          console.log(res);
+          that.info = res.data;
+          that.refreshIcon = 'el-icon-refresh-right';
+          that.$message({
+            message: '刷新成功',
+            type: 'success'
+          })
+        }).catch((err)=>{
+          that.$message({
+            message: '出现意想不到的错误',
+            type: 'error'
+          });
+        })
+      },
+      handleChange(index, index2){
+        const that = this;
+        for(let j=0;j<this.info.groups[index].sets.length;j++){
+          if (j !== index2){
+            this.info.groups[index].sets[j].here = false;
+          }
+        }
+        if (this.info.groups[index].sets[index2].here){
+          this.axios.post(APP_DOMAIN + '/api/add', {
+            setname: this.info.groups[index].sets[index2].setname
+          }).then((res)=>{
+            if (res.data.success === false){
+              that.$message({
+                message: res.data.message,
+                type: 'error'
+              });
+              that.refreshNode();
+            }else{
+              that.$message({
+                message: '更改成功',
+                type: 'success'
+              })
+            }
+          }).catch((err)=>{
+            that.$message({
+              message: err.message,
+              type: 'error'
+            });
+            that.refreshNode();
+          })
+        }else{
+          this.axios.post(APP_DOMAIN + '/api/del', {
+            setname: this.info.groups[index].sets[index2].setname
+          }).then((res)=>{
+            if (res.data.success === false){
+              that.$message({
+                message: res.data.message,
+                type: 'error'
+              });
+              that.refreshNode();
+            } else {
+              that.$message({
+                message: '更改成功',
+                type: 'success'
+              })
+            }
+          }).catch((err)=>{
+            that.$message({
+              message: err.message,
+              type: 'error'
+            });
+            that.refreshNode();
+          })
+        }
-export default {
+      },
-  name: 'app',
+    }
-  components: {
-    HelloWorld
  }
-}
 </script>
 <style>
@@ -23,6 +139,70 @@ export default {
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
-  margin-top: 60px;
+  min-height: 100vh;
+  position: relative;
+  padding-top: 15px;
+  background: url('./assets/bg.jpg') no-repeat fixed;
+  background-size:100% auto;
+}
+body {
+  margin:0;
+  padding:0;
+}
+.container {
+  max-width: 380px;
+  min-width: 380px;
+  min-height: 95vh;
+  border: 1px solid #E4E7ED;
+  border-radius: 10px;
+  box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
+  background: rgba(255,255,255,0.85);
+  margin:0 auto;
+}
+header {
+  margin-top:14px;
+  text-align: center;
+  border-bottom: 2px solid #EBEEF5;
 }
+header > .header-title {
+  color: #303133;
+  font-weight: 300;
+  margin-bottom: 0;
+}
+header > .origin-ip-container {
+  color: #909399;
+  margin-top: 0;
+}
+header > .origin-ip-container > .origin-ip:hover {
+  color: #67C23A;
+  cursor: pointer;
+}
+.group-container {
+  text-align: left;
+  margin-top: 20px;
+  padding: 20px;
+}
+.group-container > .group-header > .header-title {
+  font-size: 22px;
+  color: #303133;
+}
+.group-container > .group-header > .header-des {
+  padding-left: 5px;
+  font-size: 14px;
+  color: #909399;
+}
+.group-container > .group-select-container {
+  text-align: left;
+  margin:0 auto;
+}
 </style>
--- a/src/assets/bg.jpg
+++ b/src/assets/bg.jpg
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/main.js
+++ b/src/main.js
 import Vue from 'vue'
 import App from './App.vue'
+import './plugins/element.js'
+import VueAxios from 'vue-axios'
+import Axios from 'axios'
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+Vue.use(VueAxios, Axios);
 new Vue({
  render: h => h(App),

--- a/src/plugins/element.js
+++ b/src/plugins/element.js
+import Vue from 'vue'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(Element)
--- a/yarn.lock
+++ b/yarn.lock
@@ -1436,6 +1436,13 @@ async-limiter@~1.0.0:
  resolved "https://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
  integrity sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=
+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=
+  dependencies:
+    babel-runtime "6.x"
 async@^2.6.2:
  version "2.6.3"
  resolved "https://registry.npm.taobao.org/async/download/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -1476,6 +1483,13 @@ aws4@^1.8.0:
  resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2"
  integrity sha1-oXs6jqgRBg501H0wYSJACtRJeuI=
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.npm.taobao.org/axios/download/axios-0.19.2.tgz?cache=0&sync_timestamp=1594827610645&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=
+  dependencies:
+    follow-redirects "1.5.10"
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
  version "6.26.0"
  resolved "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1497,6 +1511,11 @@ babel-eslint@^10.0.1:
    eslint-visitor-keys "^1.0.0"
    resolve "^1.12.0"
+babel-helper-vue-jsx-merge-props@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  integrity sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=
 babel-loader@^8.0.5:
  version "8.1.0"
  resolved "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
@@ -1526,6 +1545,14 @@ babel-plugin-module-resolver@3.2.0:
    reselect "^3.0.1"
    resolve "^1.4.0"
+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
 balanced-match@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -2338,7 +2365,7 @@ copy-webpack-plugin@^4.6.0:
    p-limit "^1.0.0"
    serialize-javascript "^1.4.0"
-core-js@^2.6.5:
+core-js@^2.4.0, core-js@^2.6.5:
  version "2.6.11"
  resolved "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
  integrity sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw=
@@ -2634,6 +2661,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
  dependencies:
    ms "2.0.0"
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=
+  dependencies:
+    ms "2.0.0"
 debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
  version "3.2.6"
  resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -2675,7 +2709,7 @@ deep-is@~0.1.3:
  resolved "https://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
  version "1.5.2"
  resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
  integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
@@ -2935,6 +2969,18 @@ electron-to-chromium@^1.3.488:
  resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.516.tgz?cache=0&sync_timestamp=1596224125690&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.516.tgz#03ec071b061e462b786bf7e7ce226fd7ab7cf1f6"
  integrity sha1-A+wHGwYeRit4a/fnziJv16t88fY=
+element-ui@^2.4.5:
+  version "2.13.2"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.2.tgz?cache=0&sync_timestamp=1589795164194&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.13.2.tgz#582bf47aaaaaafe23ea1958fae217a687ad06447"
+  integrity sha1-WCv0eqqqr+I+oZWPriF6aHrQZEc=
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
 elliptic@^6.0.0, elliptic@^6.5.2:
  version "6.5.3"
  resolved "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.3.tgz?cache=0&sync_timestamp=1592492844326&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
@@ -3671,6 +3717,13 @@ flush-write-stream@^1.0.0:
    inherits "^2.0.3"
    readable-stream "^2.3.6"
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1592518278637&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=
+  dependencies:
+    debug "=3.1.0"
 follow-redirects@^1.0.0:
  version "1.12.1"
  resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.12.1.tgz?cache=0&sync_timestamp=1592518278637&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"
@@ -5411,6 +5464,11 @@ normalize-url@^3.0.0:
  resolved "https://registry.npm.taobao.org/normalize-url/download/normalize-url-3.3.0.tgz?cache=0&sync_timestamp=1596373090568&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnormalize-url%2Fdownload%2Fnormalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
  integrity sha1-suHE3E98bVd0PfczpPWXjRhlBVk=
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
 npm-run-path@^2.0.0:
  version "2.0.2"
  resolved "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6513,6 +6571,11 @@ regenerate@^1.4.0:
  resolved "https://registry.npm.taobao.org/regenerate/download/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f"
  integrity sha1-ytkq2Oa1kXc0hfvgWkhcr09Ffm8=
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz?cache=0&sync_timestamp=1595456117883&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=
 regenerator-runtime@^0.13.4:
  version "0.13.7"
  resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz?cache=0&sync_timestamp=1595456117883&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -6676,6 +6739,11 @@ reselect@^3.0.1:
  resolved "https://registry.npm.taobao.org/reselect/download/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
  integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=
 resolve-cwd@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npm.taobao.org/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -7527,6 +7595,11 @@ thread-loader@^2.1.2:
    loader-utils "^1.1.0"
    neo-async "^2.6.0"
+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1591627066344&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha1-UYU9o3vmihVctugns1FKPEIuic0=
 through2@^2.0.0:
  version "2.0.5"
  resolved "https://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz?cache=0&sync_timestamp=1593478647766&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrough2%2Fdownload%2Fthrough2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -7900,6 +7973,16 @@ vm-browserify@^1.0.1:
  resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
  integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
+vue-axios@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.npm.taobao.org/vue-axios/download/vue-axios-2.1.5.tgz#1af4bf1218ed71309c76afb38d0f683e312c24a7"
+  integrity sha1-GvS/EhjtcTCcdq+zjQ9oPjEsJKc=
+vue-cli-plugin-element@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/vue-cli-plugin-element/download/vue-cli-plugin-element-1.0.1.tgz#34e58fb65b36cf59afaf14f503288e5e578b1554"
+  integrity sha1-NOWPtls2z1mvrxT1AyiOXleLFVQ=
 vue-eslint-parser@^2.0.3:
  version "2.0.3"
  resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"