@@ -415,207 +11,37 @@ export default {
-
-
- 
+
WireGuard
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- · {{ timeago(client.latestHandshakeAt) }}
-
-
-
-
-
-
+
-
- +
There are no clients yet.
+
@@ -623,13 +49,11 @@ export default {
-
+
@@ -640,9 +64,7 @@ export default {
-
+
-
+
-
+
-
+
-
-
-
-
-
-
-
-
-
-
+
+
- - Made by - Emile Nijssen - · - Donate - · - GitHub -
+ + + diff --git a/webui/src/components/Auth.vue b/webui/src/components/Auth.vue new file mode 100644 index 00000000..b41f7d26 --- /dev/null +++ b/webui/src/components/Auth.vue @@ -0,0 +1,46 @@ + +
+
+
+
+
diff --git a/webui/src/components/Client.vue b/webui/src/components/Client.vue
new file mode 100644
index 00000000..207527a6
--- /dev/null
+++ b/webui/src/components/Client.vue
@@ -0,0 +1,34 @@
+
+ WireGuard
+ + +
+
+
+
+
+
diff --git a/webui/src/components/ClientAddress.vue b/webui/src/components/ClientAddress.vue
index b46e0de6..1d7b0189 100644
--- a/webui/src/components/ClientAddress.vue
+++ b/webui/src/components/ClientAddress.vue
@@ -2,61 +2,51 @@
-
- {{ client.address }}
+
+ {{ client.address }}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/webui/src/components/ClientControls.vue b/webui/src/components/ClientControls.vue
new file mode 100644
index 00000000..1d0045de
--- /dev/null
+++ b/webui/src/components/ClientControls.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
diff --git a/webui/src/components/ClientInfo.vue b/webui/src/components/ClientInfo.vue
new file mode 100644
index 00000000..2273191c
--- /dev/null
+++ b/webui/src/components/ClientInfo.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/ClientName.vue b/webui/src/components/ClientName.vue
index 6a7ab70a..b37f5302 100644
--- a/webui/src/components/ClientName.vue
+++ b/webui/src/components/ClientName.vue
@@ -1,37 +1,3 @@
-
+
+
+
+
+
+
+
+
+ · {{ timeago(client.latestHandshakeAt) }}
+
+
+ + Made by + Emile Nijssen + · + Donate + · + GitHub +
+ + + diff --git a/webui/src/main.js b/webui/src/main.js index d3e8f495..93b2ae9b 100644 --- a/webui/src/main.js +++ b/webui/src/main.js @@ -2,5 +2,9 @@ import './assets/style.css'; import App from './App.vue'; import { createApp } from 'vue'; +import { createPinia } from 'pinia'; -createApp(App).mount('#app'); +const pinia = createPinia(); +const app = createApp(App).mount('#app'); + +app.use(pinia); diff --git a/webui/src/services/api.js b/webui/src/services/api.js index 8de1cd34..8e36d1de 100644 --- a/webui/src/services/api.js +++ b/webui/src/services/api.js @@ -1,4 +1,4 @@ -const SERVER = 'http://127.0.0.1:51821' +const SERVER = 'http://127.0.0.1:51821'; export default class API { async call({ method, path, body }) { @@ -13,8 +13,7 @@ export default class API { if (res.status === 204) { return undefined; } - console.log(`${SERVER}/api${path}`); - + const json = await res.json(); if (!res.ok) { @@ -62,10 +61,7 @@ export default class API { ...client, createdAt: new Date(client.createdAt), updatedAt: new Date(client.updatedAt), - latestHandshakeAt: - client.latestHandshakeAt !== null - ? new Date(client.latestHandshakeAt) - : null, + latestHandshakeAt: client.latestHandshakeAt !== null ? new Date(client.latestHandshakeAt) : null, })) ); } diff --git a/webui/src/utils/chartOptions.js b/webui/src/utils/chartOptions.js new file mode 100644 index 00000000..e2a0d5e0 --- /dev/null +++ b/webui/src/utils/chartOptions.js @@ -0,0 +1,69 @@ +import { reactive } from 'vue'; + +const chartOptions = reactive({ + chart: { + background: 'transparent', + type: 'bar', + stacked: false, + toolbar: { + show: false, + }, + animations: { + enabled: false, + }, + }, + colors: [ + '#DDDDDD', // rx + '#EEEEEE', // tx + ], + dataLabels: { + enabled: false, + }, + plotOptions: { + bar: { + horizontal: false, + }, + }, + xaxis: { + labels: { + show: false, + }, + axisTicks: { + show: true, + }, + axisBorder: { + show: true, + }, + }, + yaxis: { + labels: { + show: false, + }, + min: 0, + }, + tooltip: { + enabled: false, + }, + legend: { + show: false, + }, + grid: { + show: false, + padding: { + left: -10, + right: 0, + bottom: -15, + top: -15, + }, + column: { + opacity: 0, + }, + xaxis: { + lines: { + show: false, + }, + }, + }, +}); + +export default chartOptions; \ No newline at end of file