- prototype of config page

web/index.ejs

@@ -20,9 +20,13 @@
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav mr-auto">
-            <li class="nav-item active">
-              <a class="nav-link" href="#">First</a>
-            </li>
+            <%# <li class="nav-item active">%>
+            <router-link class="nav-item" to="config" tag="li" active-class="active">
+              <a class="nav-link">
+                Configutration
+              </a>
+            </router-link>
+            <%# </li>%>
             <li class="nav-item">
               <a class="nav-link" href="#">Second</a>
             </li>

webSource/config.vue

@@ -0,0 +1,77 @@
+<template lang="html">
+  <form>
+    <div class="container" id="config">
+      <div class="form-group row">
+        <label class="col-2 col-form-label">Update Interval</label>
+        <div class="col-10">
+          <input v-model="options.updateInterval" class="form-control" type="Number">
+        </div>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label">Port</label>
+        <div class="col-10">
+          <input v-model="options.port"  class="form-control" type="number">
+        </div>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label">Start data collector on start?</label>
+        <div class="col-10">
+          <select v-model="options.updateState" class="form-control">
+            <option value="true">Yes</option>
+            <option value="false">No</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <button @click="send" class="btn btn-primary">Save</button>
+      </div>
+    </div>
+  </form>
+</template>
+<script>
+import $ from "jquery";
+export default {
+  data: function () {
+    return {
+      options: {
+        updateInterval: null,
+        port: null,
+        updateState: null
+      }
+    }
+  },
+  created: function () {
+    var config = new XMLHttpRequest();
+    var form = $(this.$el);
+    var self = this;
+    config.open('GET', '/api/config');
+    config.onreadystatechange = function () {
+      if (config.readyState == XMLHttpRequest.DONE &&
+        config.status === 200) {
+          self.options = JSON.parse(config.response);
+      }
+    };
+    config.send(form.serialize());
+  },
+  methods: {
+    send(){
+      var self = this;
+      var config = new XMLHttpRequest();
+      config.open('POST', '/api/config');
+      config.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+      config.onreadystatechange = function () {
+        if (config.readyState == XMLHttpRequest.DONE &&
+          config.status === 200) {
+            // self.$router.push("/");
+            console.log(JSON.parse(config.response));
+        }
+      };
+      config.send($.param(self.options));
+
+    }
+  }
+}
+</script>
+
+<style lang="css">
+</style>

webSource/index.js

@@ -16,6 +16,7 @@ Vue.config.devtools = true;
 // Silence logs and warnings
 Vue.config.silent = false;
 
+import comp_config from "./config.vue";
 import comp_serverList from "./serverList.vue";
 import comp_serverDetails from "./serverDetails.vue";
 import comp_server from "./server.vue";
@@ -28,7 +29,8 @@ Vue.component('servergraph', comp_servergraph);
 
 var routes = [
   { path: "/", component:  comp_serverList },
-  { path: "/server/:id", component:  comp_serverDetails }
+  { path: "/server/:id", component:  comp_serverDetails },
+  { path: "/config", component:  comp_config }
 ];
 
 const router = new VueRouter({