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/926/head
Daniil Isakov 3 years ago
parent
439a1ddae4
commit
f5b8c0b77a
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. 16
      webui/src/components/ClientAddress.vue
  4. 21
      webui/src/components/ClientAvatar.vue
  5. 17
      webui/src/components/ClientName.vue
  6. 8
      webui/src/components/ClientNewButton.vue
  7. 2
      webui/src/components/ClientTransfer.vue
  8. 4
      webui/src/components/LoadingSpinner.vue
  9. 4
      webui/src/components/UpdateNotification.vue
  10. 12
      webui/src/components/icons/IconAvatarDefault.vue
  11. 15
      webui/src/components/icons/IconClose.vue
  12. 7
      webui/src/components/icons/IconDelete.vue
  13. 7
      webui/src/components/icons/IconDownArrow.vue
  14. 8
      webui/src/components/icons/IconDownload.vue
  15. 8
      webui/src/components/icons/IconLogout.vue
  16. 7
      webui/src/components/icons/IconNew.vue
  17. 8
      webui/src/components/icons/IconQRCode.vue
  18. 15
      webui/src/components/icons/IconSpinner.vue
  19. 7
      webui/src/components/icons/IconUpArrow.vue
  20. 10
      webui/src/composables/useDateTime.js
  21. 10
      webui/src/composables/useTimeAgo.js
  22. 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

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

@ -11,9 +11,11 @@
: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
@ -30,7 +32,7 @@
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,
@ -39,7 +41,7 @@ export default {
}, },
methods: { methods: {
updateAddress() { updateAddress() {
this.$emit("update-address", this.client, this.editAddress); this.$emit('update-address', this.client, this.editAddress);
this.editAddress = null; this.editAddress = null;
this.editAddressId = null; this.editAddressId = null;
}, },
@ -51,10 +53,10 @@ export default {
this.editAddress = this.client.address; this.editAddress = this.client.address;
this.editAddressId = this.client.id; this.editAddressId = this.client.id;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["client-" + this.client.id + "-address"].select(); this.$refs['client-' + this.client.id + '-address'].select();
}); });
}, },
}, },
components: { IconEdit } components: { IconEdit },
}; };
</script> </script>

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

@ -1,8 +1,8 @@
<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>
@ -10,13 +10,24 @@ export default {
<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
v-if="
client.latestHandshakeAt &&
new Date() - new Date(client.latestHandshakeAt) < 1000 * 60 * 10
"
>
<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" 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>
<div class="w-2 h-2 bg-red-800 dark:bg-red-600 rounded-full absolute bottom-0 right-0"></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> </div>
</template> </template>

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

@ -3,7 +3,7 @@ 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 {
@ -13,7 +13,7 @@ export default {
}, },
methods: { methods: {
updateClientName() { updateClientName() {
this.$emit("update-client-name", this.client, this.clientEditName); this.$emit('update-client-name', this.client, this.clientEditName);
this.clientEditName = null; this.clientEditName = null;
this.clientEditNameId = null; this.clientEditNameId = null;
}, },
@ -25,11 +25,11 @@ export default {
this.clientEditName = this.client.name; this.clientEditName = this.client.name;
this.clientEditNameId = this.client.id; this.clientEditNameId = this.client.id;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["client-" + this.client.id + "-name"][0].select(); this.$refs['client-' + this.client.id + '-name'][0].select();
}); });
}, },
}, },
components: { IconEdit } components: { IconEdit },
}; };
</script> </script>
<template> <template>
@ -47,9 +47,11 @@ export default {
:ref="'client-' + client.id + '-name'" :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" 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">{{ <span
client.name v-show="clientEditNameId !== client.id"
}}</span> class="inline-block border-t-2 border-b-2 border-transparent"
>{{ client.name }}</span
>
<!-- Edit --> <!-- Edit -->
<span <span
@ -61,4 +63,3 @@ export default {
</span> </span>
</div> </div>
</template> </template>

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

@ -1,6 +1,8 @@
<!-- 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
class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
>
<div class="flex-grow"> <div class="flex-grow">
<p class="text-2xl font-medium dark:text-neutral-200">Clients</p> <p class="text-2xl font-medium dark:text-neutral-200">Clients</p>
</div> </div>
@ -22,9 +24,9 @@ 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>

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

@ -8,6 +8,6 @@
<script> <script>
export default { export default {
props: ["transferData", "transferDataCurrent", "title"], props: ['transferData', 'transferDataCurrent', 'title'],
}; };
</script> </script>

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

@ -1,8 +1,8 @@
<script> <script>
import IconSpinnerVue from "./icons/IconSpinner.vue"; import IconSpinnerVue from './icons/IconSpinner.vue';
export default { export default {
components: { IconSpinnerVue } components: { IconSpinnerVue },
}; };
</script> </script>

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>

12
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"
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> </svg>
</template> </template>

15
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"
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> </svg>
</template> </template>

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

@ -1,5 +1,10 @@
<template> <template>
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg
class="w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path <path
fill-rule="evenodd" 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" 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"

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

@ -1,5 +1,10 @@
<template> <template>
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg
class="align-middle h-3 inline"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path <path
fill-rule="evenodd" 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" 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"

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

@ -1,5 +1,11 @@
<template> <template>
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg
class="w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"

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

@ -1,5 +1,11 @@
<template> <template>
<svg class="h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg
class="h-3 inline"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"

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

@ -6,6 +6,11 @@
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
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg> </svg>
</template> </template>

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

@ -1,5 +1,11 @@
<template> <template>
<svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg
class="w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"

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

@ -1,6 +1,17 @@
<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"
viewBox="0 0 24 24"
fill="currentColor"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path <path
class="opacity-75" class="opacity-75"
fill="currentColor" fill="currentColor"

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

@ -1,5 +1,10 @@
<template> <template>
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg
class="align-middle h-3 inline"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path <path
fill-rule="evenodd" 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" 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"

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

@ -1,11 +1,11 @@
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);
}; };

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

@ -4,19 +4,19 @@ export function useTimeAgo() {
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`;
} }
}; };

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