mirror
/
wg-easy
mirror of https://github.com/wg-easy/wg-easy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Formatting with Prettier

pull/937/head
Daniil Isakov 3 years ago
committed by Sergei Birukov
parent
6687133821
commit
580f632322
24 changed files with 401 additions and 301 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      webui/index.html
  2. 53
      webui/src/App.vue
  3. 94
      webui/src/components/ClientAddress.vue
  4. 35
      webui/src/components/ClientAvatar.vue
  5. 103
      webui/src/components/ClientName.vue
  6. 38
      webui/src/components/ClientNewButton.vue
  7. 12
      webui/src/components/ClientTransfer.vue
  8. 6
      webui/src/components/LoadingSpinner.vue
  9. 4
      webui/src/components/UpdateNotification.vue
  10. 14
      webui/src/components/icons/IconAvatarDefault.vue
  11. 17
      webui/src/components/icons/IconClose.vue
  12. 19
      webui/src/components/icons/IconDelete.vue
  13. 19
      webui/src/components/icons/IconDownArrow.vue
  14. 22
      webui/src/components/icons/IconDownload.vue
  15. 28
      webui/src/components/icons/IconEdit.vue
  16. 22
      webui/src/components/icons/IconLogout.vue
  17. 25
      webui/src/components/icons/IconNew.vue
  18. 22
      webui/src/components/icons/IconQRCode.vue
  19. 27
      webui/src/components/icons/IconSpinner.vue
  20. 21
      webui/src/components/icons/IconUpArrow.vue
  21. 30
      webui/src/components/icons/IconWarning.vue
  22. 20
      webui/src/composables/useDateTime.js
  23. 48
      webui/src/composables/useTimeAgo.js
  24. 8
      webui/src/main.js

15
webui/index.html
View File

@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>WireGuard</title> <title>WireGuard</title>
<link rel="manifest" href="./manifest.json"> <link rel="manifest" href="./manifest.json" />
<link rel="icon" type="image/png" href="./img/favicon.png"> <link rel="icon" type="image/png" href="./img/favicon.png" />
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png"> <link rel="apple-touch-icon" href="./img/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta
<meta name="apple-mobile-web-app-capable" content="yes"> name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</head> </head>
<body class="bg-gray-50 dark:bg-neutral-800"> <body class="bg-gray-50 dark:bg-neutral-800">
<div id="app"></div> <div id="app"></div>

53
webui/src/App.vue
View File

@ -21,7 +21,7 @@ import LoadingSpinner from './components/LoadingSpinner.vue';
import IconClose from './components/icons/IconClose.vue'; import IconClose from './components/icons/IconClose.vue';
import IconWarning from './components/icons/IconWarning.vue'; import IconWarning from './components/icons/IconWarning.vue';
import IconAvatarDefault from './components/icons/IconAvatarDefault.vue'; import IconAvatarDefault from './components/icons/IconAvatarDefault.vue';
import ClientTransfer from './components/ClientTransfer.vue' import ClientTransfer from './components/ClientTransfer.vue';
class API { class API {
async call({ method, path, body }) { async call({ method, path, body }) {
@ -346,13 +346,15 @@ export default {
this.clientCreateName = ''; this.clientCreateName = '';
}, },
async refresh ({ updateCharts = false } = {}) { async refresh({ updateCharts = false } = {}) {
if (!this.authenticated) return; if (!this.authenticated) return;
const clientsData = await this.api.getClients(); const clientsData = await this.api.getClients();
this.clients = clientsData.map((client) => { this.clients = clientsData.map((client) => {
if (client.name.includes('@') && client.name.includes('.')) { if (client.name.includes('@') && client.name.includes('.')) {
client.avatar = `https://www.gravatar.com/avatar/${sha256(client.name)}?d=blank`; client.avatar = `https://www.gravatar.com/avatar/${sha256(
client.name
)}?d=blank`;
} }
if (!this.clientsPersist[client.id]) { if (!this.clientsPersist[client.id]) {
@ -369,10 +371,12 @@ export default {
if (updateCharts) { if (updateCharts) {
this.clientsPersist[client.id].transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent =
client.transferRx - this.clientsPersist[client.id].transferRxPrevious; client.transferRx -
this.clientsPersist[client.id].transferRxPrevious;
this.clientsPersist[client.id].transferRxPrevious = client.transferRx; this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent =
client.transferTx - this.clientsPersist[client.id].transferTxPrevious; client.transferTx -
this.clientsPersist[client.id].transferTxPrevious;
this.clientsPersist[client.id].transferTxPrevious = client.transferTx; this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].transferRxHistory.push( this.clientsPersist[client.id].transferRxHistory.push(
@ -386,11 +390,15 @@ export default {
this.clientsPersist[client.id].transferTxHistory.shift(); this.clientsPersist[client.id].transferTxHistory.shift();
} }
client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent; client.transferTxCurrent =
client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent; this.clientsPersist[client.id].transferTxCurrent;
client.transferRxCurrent =
this.clientsPersist[client.id].transferRxCurrent;
client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory; client.transferTxHistory =
client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory; this.clientsPersist[client.id].transferTxHistory;
client.transferRxHistory =
this.clientsPersist[client.id].transferRxHistory;
client.transferMax = Math.max( client.transferMax = Math.max(
...client.transferTxHistory, ...client.transferTxHistory,
...client.transferRxHistory ...client.transferRxHistory
@ -403,7 +411,7 @@ export default {
}); });
}, },
login (e) { login(e) {
e.preventDefault(); e.preventDefault();
if (!this.password) return; if (!this.password) return;
@ -429,7 +437,7 @@ export default {
}); });
}, },
logout (e) { logout(e) {
e.preventDefault(); e.preventDefault();
this.api this.api
@ -443,7 +451,7 @@ export default {
}); });
}, },
createClient () { createClient() {
const name = this.clientCreateName; const name = this.clientCreateName;
if (!name) return; if (!name) return;
@ -453,42 +461,42 @@ export default {
.finally(() => this.refresh().catch(console.error)); .finally(() => this.refresh().catch(console.error));
}, },
deleteClient (client) { deleteClient(client) {
this.api this.api
.deleteClient({ clientId: client.id }) .deleteClient({ clientId: client.id })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => this.refresh().catch(console.error)); .finally(() => this.refresh().catch(console.error));
}, },
enableClient (client) { enableClient(client) {
this.api this.api
.enableClient({ clientId: client.id }) .enableClient({ clientId: client.id })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => this.refresh().catch(console.error)); .finally(() => this.refresh().catch(console.error));
}, },
disableClient (client) { disableClient(client) {
this.api this.api
.disableClient({ clientId: client.id }) .disableClient({ clientId: client.id })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => this.refresh().catch(console.error)); .finally(() => this.refresh().catch(console.error));
}, },
updateClientName (client, name) { updateClientName(client, name) {
this.api this.api
.updateClientName({ clientId: client.id, name }) .updateClientName({ clientId: client.id, name })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => this.refresh().catch(console.error)); .finally(() => this.refresh().catch(console.error));
}, },
updateClientAddress (client, address) { updateClientAddress(client, address) {
this.api this.api
.updateClientAddress({ clientId: client.id, address }) .updateClientAddress({ clientId: client.id, address })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => this.refresh().catch(console.error)); .finally(() => this.refresh().catch(console.error));
}, },
toggleTheme () { toggleTheme() {
if (this.isDark) { if (this.isDark) {
localStorage.theme = 'light'; localStorage.theme = 'light';
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
@ -524,7 +532,10 @@ export default {
</h1> </h1>
<h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2> <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
<UpdateNotification :latestRelease="latestRelease" :currentRelease="currentRelease" /> <UpdateNotification
:latestRelease="latestRelease"
:currentRelease="currentRelease"
/>
<div <div
class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden" class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"
@ -939,7 +950,9 @@ export default {
<div <div
class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-800 relative overflow-hidden" class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-800 relative overflow-hidden"
> >
<IconAvatarDefault class="w-10 h-10 m-5 text-white dark:text-white" /> <IconAvatarDefault
class="w-10 h-10 m-5 text-white dark:text-white"
/>
</div> </div>
<input <input

94
webui/src/components/ClientAddress.vue
View File

@ -1,60 +1,62 @@
<!-- EditableAddress.vue --> <!-- EditableAddress.vue -->
<template> <template>
<span class="group block md:inline-block pb-1 md:pb-0"> <span class="group block md:inline-block pb-1 md:pb-0">
<!-- Show --> <!-- Show -->
<input <input
v-show="editAddressId === client.id" v-show="editAddressId === client.id"
v-model="editAddress" v-model="editAddress"
@keyup.enter="updateAddress" @keyup.enter="updateAddress"
@keyup.escape="cancelEdit" @keyup.escape="cancelEdit"
:test="'client-' + client.id + '-address'" :test="'client-' + client.id + '-address'"
:ref="'client-' + client.id + '-address'" :ref="'client-' + client.id + '-address'"
class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500"
/> />
<span v-show="editAddressId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{ <span
client.address v-show="editAddressId !== client.id"
}}</span> class="inline-block border-t-2 border-b-2 border-transparent"
>{{ client.address }}</span
>
<!-- Edit --> <!-- Edit -->
<span <span
v-show="editAddressId !== client.id" v-show="editAddressId !== client.id"
@click="edit" @click="edit"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
> >
<IconEdit /> <IconEdit />
</span>
</span> </span>
</span>
</template> </template>
<script> <script>
import IconEdit from './icons/IconEdit.vue'; import IconEdit from './icons/IconEdit.vue';
export default { export default {
props: ["client"], props: ['client'],
data() { data() {
return { return {
editAddress: null, editAddress: null,
editAddressId: null, editAddressId: null,
}; };
},
methods: {
updateAddress() {
this.$emit('update-address', this.client, this.editAddress);
this.editAddress = null;
this.editAddressId = null;
}, },
methods: { cancelEdit() {
updateAddress() { this.editAddress = null;
this.$emit("update-address", this.client, this.editAddress); this.editAddressId = null;
this.editAddress = null;
this.editAddressId = null;
},
cancelEdit() {
this.editAddress = null;
this.editAddressId = null;
},
edit() {
this.editAddress = this.client.address;
this.editAddressId = this.client.id;
this.$nextTick(() => {
this.$refs["client-" + this.client.id + "-address"].select();
});
},
}, },
components: { IconEdit } edit() {
this.editAddress = this.client.address;
this.editAddressId = this.client.id;
this.$nextTick(() => {
this.$refs['client-' + this.client.id + '-address'].select();
});
},
},
components: { IconEdit },
}; };
</script> </script>

35
webui/src/components/ClientAvatar.vue
View File

@ -1,22 +1,33 @@
<script> <script>
import IconAvatarDefault from "./icons/IconAvatarDefault.vue"; import IconAvatarDefault from './icons/IconAvatarDefault.vue';
export default { export default {
props: ["client"], props: ['client'],
components: { IconAvatarDefault }, components: { IconAvatarDefault },
}; };
</script> </script>
<template> <template>
<div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative"> <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
<IconAvatarDefault class="w-6 m-2 text-gray-300" /> <IconAvatarDefault class="w-6 m-2 text-gray-300" />
<img v-if="client.avatar" :src="client.avatar" class="w-10 rounded-full absolute top-0 left-0" /> <img
v-if="client.avatar"
:src="client.avatar"
class="w-10 rounded-full absolute top-0 left-0"
/>
<div v-if="client.latestHandshakeAt && new Date() - new Date(client.latestHandshakeAt) < 1000 * 60 * 10"> <div
<div v-if="
class="animate-ping w-4 h-4 p-1 bg-red-100 dark:bg-red-100 rounded-full absolute -bottom-1 -right-1" client.latestHandshakeAt &&
></div> new Date() - new Date(client.latestHandshakeAt) < 1000 * 60 * 10
<div class="w-2 h-2 bg-red-800 dark:bg-red-600 rounded-full absolute bottom-0 right-0"></div> "
</div> >
<div
class="animate-ping w-4 h-4 p-1 bg-red-100 dark:bg-red-100 rounded-full absolute -bottom-1 -right-1"
></div>
<div
class="w-2 h-2 bg-red-800 dark:bg-red-600 rounded-full absolute bottom-0 right-0"
></div>
</div> </div>
</div>
</template> </template>

103
webui/src/components/ClientName.vue
View File

@ -3,62 +3,63 @@ import { useDateTime } from '../composables/useDateTime';
import IconEdit from './icons/IconEdit.vue'; import IconEdit from './icons/IconEdit.vue';
export default { export default {
props: ["client", "clientEditName", "clientEditNameId"], props: ['client', 'clientEditName', 'clientEditNameId'],
setup() { setup() {
const { dateTime } = useDateTime(); const { dateTime } = useDateTime();
return { return {
dateTime, dateTime,
// other reactive properties // other reactive properties
}; };
},
methods: {
updateClientName() {
this.$emit('update-client-name', this.client, this.clientEditName);
this.clientEditName = null;
this.clientEditNameId = null;
}, },
methods: { cancelEdit() {
updateClientName() { this.clientEditName = null;
this.$emit("update-client-name", this.client, this.clientEditName); this.clientEditNameId = null;
this.clientEditName = null;
this.clientEditNameId = null;
},
cancelEdit() {
this.clientEditName = null;
this.clientEditNameId = null;
},
editName() {
this.clientEditName = this.client.name;
this.clientEditNameId = this.client.id;
this.$nextTick(() => {
this.$refs["client-" + this.client.id + "-name"][0].select();
});
},
}, },
components: { IconEdit } editName() {
this.clientEditName = this.client.name;
this.clientEditNameId = this.client.id;
this.$nextTick(() => {
this.$refs['client-' + this.client.id + '-name'][0].select();
});
},
},
components: { IconEdit },
}; };
</script> </script>
<template> <template>
<div <div
class="text-gray-700 dark:text-neutral-200 group" class="text-gray-700 dark:text-neutral-200 group"
:title="'Created on ' + dateTime(new Date(client.createdAt))" :title="'Created on ' + dateTime(new Date(client.createdAt))"
>
<!-- Show -->
<input
v-show="clientEditNameId === client.id"
:value="clientEditName"
@input="clientEditName = $event.target.value"
@keyup.enter="updateClientName"
@keyup.escape="cancelEdit"
:ref="'client-' + client.id + '-name'"
class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30"
/>
<span
v-show="clientEditNameId !== client.id"
class="inline-block border-t-2 border-b-2 border-transparent"
>{{ client.name }}</span
> >
<!-- Show -->
<input
v-show="clientEditNameId === client.id"
:value="clientEditName"
@input="clientEditName = $event.target.value"
@keyup.enter="updateClientName"
@keyup.escape="cancelEdit"
:ref="'client-' + client.id + '-name'"
class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30"
/>
<span v-show="clientEditNameId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{
client.name
}}</span>
<!-- Edit --> <!-- Edit -->
<span <span
v-show="clientEditNameId !== client.id" v-show="clientEditNameId !== client.id"
@click="editName" @click="editName"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
> >
<IconEdit /> <IconEdit />
</span> </span>
</div> </div>
</template> </template>

38
webui/src/components/ClientNewButton.vue
View File

@ -1,30 +1,32 @@
<!-- ClientNewButton.vue --> <!-- ClientNewButton.vue -->
<template> <template>
<div class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"> <div
<div class="flex-grow"> class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
<p class="text-2xl font-medium dark:text-neutral-200">Clients</p> >
</div> <div class="flex-grow">
<div class="flex-shrink-0"> <p class="text-2xl font-medium dark:text-neutral-200">Clients</p>
<button
@click="createNewClient"
class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition"
>
<IconNew class="w-4 mr-2" />
<span class="text-sm">New</span>
</button>
</div>
</div> </div>
<div class="flex-shrink-0">
<button
@click="createNewClient"
class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition"
>
<IconNew class="w-4 mr-2" />
<span class="text-sm">New</span>
</button>
</div>
</div>
</template> </template>
<script> <script>
import IconNew from './icons/IconNew.vue'; import IconNew from './icons/IconNew.vue';
export default { export default {
methods: { methods: {
createNewClient() { createNewClient() {
this.$emit("create-new-client"); this.$emit('create-new-client');
},
}, },
components: { IconNew } },
components: { IconNew },
}; };
</script> </script>

12
webui/src/components/ClientTransfer.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<span v-if="transferData" :title="title"> <span v-if="transferData" :title="title">
· ·
<slot></slot> <slot></slot>
{{ transferDataCurrent }}/s {{ transferDataCurrent }}/s
</span> </span>
</template> </template>
<script> <script>
export default { export default {
props: ["transferData", "transferDataCurrent", "title"], props: ['transferData', 'transferDataCurrent', 'title'],
}; };
</script> </script>

6
webui/src/components/LoadingSpinner.vue
View File

@ -1,11 +1,11 @@
<script> <script>
import IconSpinnerVue from "./icons/IconSpinner.vue"; import IconSpinnerVue from './icons/IconSpinner.vue';
export default { export default {
components: { IconSpinnerVue } components: { IconSpinnerVue },
}; };
</script> </script>
<template> <template>
<IconSpinnerVue class="w-5 animate-spin mx-auto" /> <IconSpinnerVue class="w-5 animate-spin mx-auto" />
</template> </template>

4
webui/src/components/UpdateNotification.vue
View File

@ -1,7 +1,7 @@
<script> <script>
export default { export default {
props: ['latestRelease', 'currentRelease'] props: ['latestRelease', 'currentRelease'],
} };
</script> </script>
<template> <template>

14
webui/src/components/icons/IconAvatarDefault.vue
View File

@ -1,5 +1,13 @@
<template> <template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /> xmlns="http://www.w3.org/2000/svg"
</svg> viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clip-rule="evenodd"
/>
</svg>
</template> </template>

17
webui/src/components/icons/IconClose.vue
View File

@ -1,5 +1,16 @@
<template> <template>
<svg class="w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> class="w-8"
</svg> xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</template> </template>

19
webui/src/components/icons/IconDelete.vue
View File

@ -1,9 +1,14 @@
<template> <template>
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg
<path class="w-5"
fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" viewBox="0 0 20 20"
clip-rule="evenodd" fill="currentColor"
/> >
</svg> <path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
/>
</svg>
</template> </template>

19
webui/src/components/icons/IconDownArrow.vue
View File

@ -1,9 +1,14 @@
<template> <template>
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg
<path class="align-middle h-3 inline"
fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" viewBox="0 0 20 20"
clip-rule="evenodd" fill="currentColor"
/> >
</svg> <path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</template> </template>

22
webui/src/components/icons/IconDownload.vue
View File

@ -1,10 +1,16 @@
<template> <template>
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg
<path class="w-5"
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" fill="none"
stroke-width="2" viewBox="0 0 24 24"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" stroke="currentColor"
/> >
</svg> <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
</template> </template>

28
webui/src/components/icons/IconEdit.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/> />
</svg> </svg>
</template> </template>

22
webui/src/components/icons/IconLogout.vue
View File

@ -1,10 +1,16 @@
<template> <template>
<svg class="h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg
<path class="h-3 inline"
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" fill="none"
stroke-width="2" viewBox="0 0 24 24"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke="currentColor"
/> >
</svg> <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
</template> </template>

25
webui/src/components/icons/IconNew.vue
View File

@ -1,11 +1,16 @@
<template> <template>
<svg <svg
inline inline
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
> >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> <path
</svg> stroke-linecap="round"
</template> stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
</template>

22
webui/src/components/icons/IconQRCode.vue
View File

@ -1,10 +1,16 @@
<template> <template>
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg
<path class="w-5"
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" fill="none"
stroke-width="2" viewBox="0 0 24 24"
d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" stroke="currentColor"
/> >
</svg> <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
/>
</svg>
</template> </template>

27
webui/src/components/icons/IconSpinner.vue
View File

@ -1,10 +1,21 @@
<template> <template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <svg
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> xmlns="http://www.w3.org/2000/svg"
<path viewBox="0 0 24 24"
class="opacity-75" fill="currentColor"
fill="currentColor" >
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" <circle
></path> class="opacity-25"
</svg> cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</template> </template>

21
webui/src/components/icons/IconUpArrow.vue
View File

@ -1,9 +1,14 @@
<template> <template>
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg
<path class="align-middle h-3 inline"
fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" viewBox="0 0 20 20"
clip-rule="evenodd" fill="currentColor"
/> >
</svg> <path
</template> fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</template>

30
webui/src/components/icons/IconWarning.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<svg <svg
class="h-6 w-6 text-red-600" class="h-6 w-6 text-red-600"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
aria-hidden="true" aria-hidden="true"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/> />
</svg> </svg>
</template> </template>

20
webui/src/composables/useDateTime.js
View File

@ -1,13 +1,13 @@
export function useDateTime() { export function useDateTime() {
const dateTime = (value) => { const dateTime = (value) => {
return new Intl.DateTimeFormat(undefined, { return new Intl.DateTimeFormat(undefined, {
year: "numeric", year: 'numeric',
month: "short", month: 'short',
day: "numeric", day: 'numeric',
hour: "numeric", hour: 'numeric',
minute: "numeric", minute: 'numeric',
}).format(value); }).format(value);
}; };
return { dateTime }; return { dateTime };
} }

48
webui/src/composables/useTimeAgo.js
View File

@ -1,29 +1,29 @@
export function useTimeAgo() { export function useTimeAgo() {
const timeago = (date) => { const timeago = (date) => {
const now = new Date(); const now = new Date();
const diff = now - date; const diff = now - date;
if (diff < 1000) { if (diff < 1000) {
return "just now"; return 'just now';
} else if (diff < 60000) { } else if (diff < 60000) {
const seconds = Math.floor(diff / 1000); const seconds = Math.floor(diff / 1000);
return `${seconds} ${plural("second", seconds)} ago`; return `${seconds} ${plural('second', seconds)} ago`;
} else if (diff < 3600000) { } else if (diff < 3600000) {
const minutes = Math.floor(diff / 60000); const minutes = Math.floor(diff / 60000);
return `${minutes} ${plural("minute", minutes)} ago`; return `${minutes} ${plural('minute', minutes)} ago`;
} else if (diff < 86400000) { } else if (diff < 86400000) {
const hours = Math.floor(diff / 3600000); const hours = Math.floor(diff / 3600000);
return `${hours} ${plural("hour", hours)} ago`; return `${hours} ${plural('hour', hours)} ago`;
} else { } else {
const days = Math.floor(diff / 86400000); const days = Math.floor(diff / 86400000);
return `${days} ${plural("day", days)} ago`; return `${days} ${plural('day', days)} ago`;
} }
}; };
// #278 -- this function might need to be rewritten to support l18n // #278 -- this function might need to be rewritten to support l18n
const plural = (word, count) => { const plural = (word, count) => {
return count !== 1 ? `${word}s` : word; return count !== 1 ? `${word}s` : word;
}; };
return { timeago }; return { timeago };
} }

8
webui/src/main.js
View File

@ -1,6 +1,6 @@
import './assets/style.css' import './assets/style.css';
import { createApp } from 'vue' import App from './App.vue';
import App from './App.vue' import { createApp } from 'vue';
createApp(App).mount('#app') createApp(App).mount('#app');

Write Preview
Loading…
Cancel
Save