split frontend into 2 pages, server and client

ui/src/App.vue

@@ -3,7 +3,21 @@
 
     <v-app-bar app>
       <img class="mr-3" :src="require('./assets/logo.png')" height="50" alt="Wg Gen Web"/>
-      <v-toolbar-title>Wg Gen Web</v-toolbar-title>
+      <v-toolbar-title to="/">Wg Gen Web</v-toolbar-title>
+
+      <v-spacer />
+
+      <v-toolbar-items>
+        <v-btn to="/clients">
+          Clients
+          <v-icon right dark>mdi-account-network-outline</v-icon>
+        </v-btn>
+        <v-btn to="/server">
+          Server
+          <v-icon right dark>mdi-vpn</v-icon>
+        </v-btn>
+      </v-toolbar-items>
+
     </v-app-bar>
 
     <v-content>

ui/src/components/Server.vue

@@ -1,12 +1,20 @@
 <template>
     <v-container v-if="server">
         <v-row>
-            <v-col cols="6">
+            <v-col cols="12">
                 <v-card dark>
                     <v-list-item>
                         <v-list-item-content>
                             <v-list-item-title class="headline">Server's interface configuration</v-list-item-title>
                         </v-list-item-content>
+                        <v-btn
+                                class="ma-2"
+                                color="warning"
+                                @click="updateServer"
+                        >
+                            Update server configuration
+                            <v-icon right dark>mdi-update</v-icon>
+                        </v-btn>
                     </v-list-item>
                     <div class="d-flex flex-no-wrap justify-space-between">
                         <v-col cols="12">
@@ -53,12 +61,20 @@
                     </div>
                 </v-card>
             </v-col>
-            <v-col cols="6">
+            <v-col cols="12">
                 <v-card dark>
                     <v-list-item>
                         <v-list-item-content>
                             <v-list-item-title class="headline">Client's global configuration</v-list-item-title>
                         </v-list-item-content>
+                        <v-btn
+                                class="ma-2"
+                                color="warning"
+                                @click="updateServer"
+                        >
+                            Update server configuration
+                            <v-icon right dark>mdi-update</v-icon>
+                        </v-btn>
                     </v-list-item>
                     <div class="d-flex flex-no-wrap justify-space-between">
                         <v-col cols="12">
@@ -114,6 +130,14 @@
                         <v-list-item-content>
                             <v-list-item-title class="headline">Interface configuration hooks</v-list-item-title>
                         </v-list-item-content>
+                        <v-btn
+                                class="ma-2"
+                                color="warning"
+                                @click="updateServer"
+                        >
+                            Update server configuration
+                            <v-icon right dark>mdi-update</v-icon>
+                        </v-btn>
                     </v-list-item>
                     <div class="d-flex flex-no-wrap justify-space-between">
                         <v-col cols="12">
@@ -140,16 +164,6 @@
         </v-row>
         <v-divider dark/>
         <v-divider dark/>
-        <v-row justify="center">
-            <v-btn
-                    class="ma-2"
-                    color="warning"
-                    @click="updateServer"
-            >
-                Update server configuration
-                <v-icon right dark>mdi-update</v-icon>
-            </v-btn>
-        </v-row>
         <Notification v-bind:notification="notification"/>
     </v-container>
 </template>

ui/src/router/index.js

@@ -1,21 +1,36 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
     path: '/',
-    name: 'home',
+    name: 'index',
-    component: Home
+    component: function () {
+      return import(/* webpackChunkName: "Index" */ '../views/Index.vue')
+    },
+  },
+  {
+    path: '/clients',
+    name: 'clients',
+    component: function () {
+      return import(/* webpackChunkName: "Clients" */ '../views/Clients.vue')
+    },
+  },
+  {
+    path: '/server',
+    name: 'server',
+    component: function () {
+      return import(/* webpackChunkName: "Server" */ '../views/Server.vue')
+    },
   }
-]
+];
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
   routes
-})
+});
 
 export default router

ui/src/views/Clients.vue

@@ -1,18 +1,15 @@
 <template>
   <v-content>
-    <Server/>
     <Clients/>
   </v-content>
 </template>
 
 <script>
-  import Server from '../components/Server'
   import Clients from '../components/Clients'
 
   export default {
-    name: 'home',
+    name: 'clients',
     components: {
-      Server,
       Clients
     }
   }

ui/src/views/Index.vue

@@ -0,0 +1,10 @@
+<template>
+</template>
+
+<script>
+  export default {
+    created () {
+      this.$router.replace({ name: 'clients' })
+    }
+  }
+</script>

ui/src/views/Server.vue

@@ -0,0 +1,16 @@
+<template>
+    <v-content>
+        <Server/>
+    </v-content>
+</template>
+
+<script>
+  import Server from '../components/Server'
+
+  export default {
+    name: 'server',
+    components: {
+      Server
+    }
+  }
+</script>