From 755cc6adf69cd8ac08a008e9a647fc1ebd1af912 Mon Sep 17 00:00:00 2001
From: vx3r <vx3r@127-0-0-1.fr>
Date: Thu, 20 Feb 2020 12:07:13 +0900
Subject: [PATCH] split frontend into 2 pages, server and client
---
ui/src/App.vue | 16 ++++++++++-
ui/src/components/Server.vue | 38 ++++++++++++++++++--------
ui/src/router/index.js | 27 ++++++++++++++----
ui/src/views/{Home.vue => Clients.vue} | 5 +---
ui/src/views/Index.vue | 10 +++++++
ui/src/views/Server.vue | 16 +++++++++++
6 files changed, 89 insertions(+), 23 deletions(-)
rename ui/src/views/{Home.vue => Clients.vue} (68%)
create mode 100644 ui/src/views/Index.vue
create mode 100644 ui/src/views/Server.vue
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 40b83ac..b0cb4ef 100644
--- a/ui/src/App.vue
+++ b/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>
diff --git a/ui/src/components/Server.vue b/ui/src/components/Server.vue
index 01e9106..9d68928 100644
--- a/ui/src/components/Server.vue
+++ b/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>
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index ad988da..bbd46bb 100644
--- a/ui/src/router/index.js
+++ b/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',
- component: Home
+ name: 'index',
+ 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
diff --git a/ui/src/views/Home.vue b/ui/src/views/Clients.vue
similarity index 68%
rename from ui/src/views/Home.vue
rename to ui/src/views/Clients.vue
index 6ac0b8a..2512e75 100644
--- a/ui/src/views/Home.vue
+++ b/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
}
}
diff --git a/ui/src/views/Index.vue b/ui/src/views/Index.vue
new file mode 100644
index 0000000..46ed1f1
--- /dev/null
+++ b/ui/src/views/Index.vue
@@ -0,0 +1,10 @@
+<template>
+</template>
+
+<script>
+ export default {
+ created () {
+ this.$router.replace({ name: 'clients' })
+ }
+ }
+</script>
diff --git a/ui/src/views/Server.vue b/ui/src/views/Server.vue
new file mode 100644
index 0000000..a45af91
--- /dev/null
+++ b/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>
--
GitLab