From 580f632322ec51fdb582008ad6d3a17837cb1d04 Mon Sep 17 00:00:00 2001 From: Daniil Isakov <12859907+oplexz@users.noreply.github.com> Date: Sat, 13 Jan 2024 00:31:17 +0300 Subject: [PATCH] Formatting with Prettier --- webui/index.html | 15 ++- webui/src/App.vue | 53 +++++---- webui/src/components/ClientAddress.vue | 94 ++++++++-------- webui/src/components/ClientAvatar.vue | 35 ++++-- webui/src/components/ClientName.vue | 103 +++++++++--------- webui/src/components/ClientNewButton.vue | 38 ++++--- webui/src/components/ClientTransfer.vue | 12 +- webui/src/components/LoadingSpinner.vue | 6 +- webui/src/components/UpdateNotification.vue | 4 +- .../components/icons/IconAvatarDefault.vue | 14 ++- webui/src/components/icons/IconClose.vue | 17 ++- webui/src/components/icons/IconDelete.vue | 19 ++-- webui/src/components/icons/IconDownArrow.vue | 19 ++-- webui/src/components/icons/IconDownload.vue | 22 ++-- webui/src/components/icons/IconEdit.vue | 28 ++--- webui/src/components/icons/IconLogout.vue | 22 ++-- webui/src/components/icons/IconNew.vue | 25 +++-- webui/src/components/icons/IconQRCode.vue | 22 ++-- webui/src/components/icons/IconSpinner.vue | 27 +++-- webui/src/components/icons/IconUpArrow.vue | 21 ++-- webui/src/components/icons/IconWarning.vue | 30 ++--- webui/src/composables/useDateTime.js | 20 ++-- webui/src/composables/useTimeAgo.js | 48 ++++---- webui/src/main.js | 8 +- 24 files changed, 401 insertions(+), 301 deletions(-) diff --git a/webui/index.html b/webui/index.html index 3e43c5c6..8cf0a851 100644 --- a/webui/index.html +++ b/webui/index.html @@ -1,13 +1,16 @@ - + WireGuard - - - - - + + + + +
diff --git a/webui/src/App.vue b/webui/src/App.vue index 27bd083d..356f950f 100644 --- a/webui/src/App.vue +++ b/webui/src/App.vue @@ -21,7 +21,7 @@ import LoadingSpinner from './components/LoadingSpinner.vue'; import IconClose from './components/icons/IconClose.vue'; import IconWarning from './components/icons/IconWarning.vue'; import IconAvatarDefault from './components/icons/IconAvatarDefault.vue'; -import ClientTransfer from './components/ClientTransfer.vue' +import ClientTransfer from './components/ClientTransfer.vue'; class API { async call({ method, path, body }) { @@ -346,13 +346,15 @@ export default { this.clientCreateName = ''; }, - async refresh ({ updateCharts = false } = {}) { + async refresh({ updateCharts = false } = {}) { if (!this.authenticated) return; const clientsData = await this.api.getClients(); this.clients = clientsData.map((client) => { 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]) { @@ -369,10 +371,12 @@ export default { if (updateCharts) { 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].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].transferRxHistory.push( @@ -386,11 +390,15 @@ export default { this.clientsPersist[client.id].transferTxHistory.shift(); } - client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent; - client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent; + client.transferTxCurrent = + this.clientsPersist[client.id].transferTxCurrent; + client.transferRxCurrent = + this.clientsPersist[client.id].transferRxCurrent; - client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory; - client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory; + client.transferTxHistory = + this.clientsPersist[client.id].transferTxHistory; + client.transferRxHistory = + this.clientsPersist[client.id].transferRxHistory; client.transferMax = Math.max( ...client.transferTxHistory, ...client.transferRxHistory @@ -403,7 +411,7 @@ export default { }); }, - login (e) { + login(e) { e.preventDefault(); if (!this.password) return; @@ -429,7 +437,7 @@ export default { }); }, - logout (e) { + logout(e) { e.preventDefault(); this.api @@ -443,7 +451,7 @@ export default { }); }, - createClient () { + createClient() { const name = this.clientCreateName; if (!name) return; @@ -453,42 +461,42 @@ export default { .finally(() => this.refresh().catch(console.error)); }, - deleteClient (client) { + deleteClient(client) { this.api .deleteClient({ clientId: client.id }) .catch((err) => alert(err.message || err.toString())) .finally(() => this.refresh().catch(console.error)); }, - enableClient (client) { + enableClient(client) { this.api .enableClient({ clientId: client.id }) .catch((err) => alert(err.message || err.toString())) .finally(() => this.refresh().catch(console.error)); }, - disableClient (client) { + disableClient(client) { this.api .disableClient({ clientId: client.id }) .catch((err) => alert(err.message || err.toString())) .finally(() => this.refresh().catch(console.error)); }, - updateClientName (client, name) { + updateClientName(client, name) { this.api .updateClientName({ clientId: client.id, name }) .catch((err) => alert(err.message || err.toString())) .finally(() => this.refresh().catch(console.error)); }, - updateClientAddress (client, address) { + updateClientAddress(client, address) { this.api .updateClientAddress({ clientId: client.id, address }) .catch((err) => alert(err.message || err.toString())) .finally(() => this.refresh().catch(console.error)); }, - toggleTheme () { + toggleTheme() { if (this.isDark) { localStorage.theme = 'light'; document.documentElement.classList.remove('dark'); @@ -524,7 +532,10 @@ export default {

- +
- +
diff --git a/webui/src/components/ClientAvatar.vue b/webui/src/components/ClientAvatar.vue index df1a01ff..e70cf521 100644 --- a/webui/src/components/ClientAvatar.vue +++ b/webui/src/components/ClientAvatar.vue @@ -1,22 +1,33 @@ diff --git a/webui/src/components/ClientName.vue b/webui/src/components/ClientName.vue index 7cf8056a..6a7ab70a 100644 --- a/webui/src/components/ClientName.vue +++ b/webui/src/components/ClientName.vue @@ -3,62 +3,63 @@ import { useDateTime } from '../composables/useDateTime'; import IconEdit from './icons/IconEdit.vue'; export default { - props: ["client", "clientEditName", "clientEditNameId"], - setup() { - const { dateTime } = useDateTime(); - return { - dateTime, - // other reactive properties - }; + props: ['client', 'clientEditName', 'clientEditNameId'], + setup() { + const { dateTime } = useDateTime(); + return { + dateTime, + // other reactive properties + }; + }, + methods: { + updateClientName() { + this.$emit('update-client-name', this.client, this.clientEditName); + this.clientEditName = null; + this.clientEditNameId = null; }, - methods: { - updateClientName() { - this.$emit("update-client-name", this.client, this.clientEditName); - 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(); - }); - }, + cancelEdit() { + this.clientEditName = null; + this.clientEditNameId = null; }, - 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 }, }; - diff --git a/webui/src/components/ClientNewButton.vue b/webui/src/components/ClientNewButton.vue index 07f712c3..26e03d22 100644 --- a/webui/src/components/ClientNewButton.vue +++ b/webui/src/components/ClientNewButton.vue @@ -1,30 +1,32 @@ diff --git a/webui/src/components/ClientTransfer.vue b/webui/src/components/ClientTransfer.vue index 7d7c8a98..c4c6f0b5 100644 --- a/webui/src/components/ClientTransfer.vue +++ b/webui/src/components/ClientTransfer.vue @@ -1,13 +1,13 @@ diff --git a/webui/src/components/LoadingSpinner.vue b/webui/src/components/LoadingSpinner.vue index 75e76380..8d3a31c4 100644 --- a/webui/src/components/LoadingSpinner.vue +++ b/webui/src/components/LoadingSpinner.vue @@ -1,11 +1,11 @@ diff --git a/webui/src/components/UpdateNotification.vue b/webui/src/components/UpdateNotification.vue index 5c087e4d..e620a00b 100644 --- a/webui/src/components/UpdateNotification.vue +++ b/webui/src/components/UpdateNotification.vue @@ -1,7 +1,7 @@ diff --git a/webui/src/components/icons/IconQRCode.vue b/webui/src/components/icons/IconQRCode.vue index a6cbdce3..82ca7b97 100644 --- a/webui/src/components/icons/IconQRCode.vue +++ b/webui/src/components/icons/IconQRCode.vue @@ -1,10 +1,16 @@ diff --git a/webui/src/components/icons/IconSpinner.vue b/webui/src/components/icons/IconSpinner.vue index fc86cdb2..8d58cac9 100644 --- a/webui/src/components/icons/IconSpinner.vue +++ b/webui/src/components/icons/IconSpinner.vue @@ -1,10 +1,21 @@ diff --git a/webui/src/components/icons/IconUpArrow.vue b/webui/src/components/icons/IconUpArrow.vue index 1948e55e..2d88d4b9 100644 --- a/webui/src/components/icons/IconUpArrow.vue +++ b/webui/src/components/icons/IconUpArrow.vue @@ -1,9 +1,14 @@ \ No newline at end of file + + + + diff --git a/webui/src/components/icons/IconWarning.vue b/webui/src/components/icons/IconWarning.vue index 9d5d9095..40dc6cac 100644 --- a/webui/src/components/icons/IconWarning.vue +++ b/webui/src/components/icons/IconWarning.vue @@ -1,17 +1,17 @@ diff --git a/webui/src/composables/useDateTime.js b/webui/src/composables/useDateTime.js index 19820e19..faf424fc 100644 --- a/webui/src/composables/useDateTime.js +++ b/webui/src/composables/useDateTime.js @@ -1,13 +1,13 @@ export function useDateTime() { - const dateTime = (value) => { - return new Intl.DateTimeFormat(undefined, { - year: "numeric", - month: "short", - day: "numeric", - hour: "numeric", - minute: "numeric", - }).format(value); - }; + const dateTime = (value) => { + return new Intl.DateTimeFormat(undefined, { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + }).format(value); + }; - return { dateTime }; + return { dateTime }; } diff --git a/webui/src/composables/useTimeAgo.js b/webui/src/composables/useTimeAgo.js index fec74a27..31f25c77 100644 --- a/webui/src/composables/useTimeAgo.js +++ b/webui/src/composables/useTimeAgo.js @@ -1,29 +1,29 @@ export function useTimeAgo() { - const timeago = (date) => { - const now = new Date(); - const diff = now - date; + const timeago = (date) => { + const now = new Date(); + const diff = now - date; - if (diff < 1000) { - return "just now"; - } else if (diff < 60000) { - const seconds = Math.floor(diff / 1000); - return `${seconds} ${plural("second", seconds)} ago`; - } else if (diff < 3600000) { - const minutes = Math.floor(diff / 60000); - return `${minutes} ${plural("minute", minutes)} ago`; - } else if (diff < 86400000) { - const hours = Math.floor(diff / 3600000); - return `${hours} ${plural("hour", hours)} ago`; - } else { - const days = Math.floor(diff / 86400000); - return `${days} ${plural("day", days)} ago`; - } - }; + if (diff < 1000) { + return 'just now'; + } else if (diff < 60000) { + const seconds = Math.floor(diff / 1000); + return `${seconds} ${plural('second', seconds)} ago`; + } else if (diff < 3600000) { + const minutes = Math.floor(diff / 60000); + return `${minutes} ${plural('minute', minutes)} ago`; + } else if (diff < 86400000) { + const hours = Math.floor(diff / 3600000); + return `${hours} ${plural('hour', hours)} ago`; + } else { + const days = Math.floor(diff / 86400000); + return `${days} ${plural('day', days)} ago`; + } + }; - // #278 -- this function might need to be rewritten to support l18n - const plural = (word, count) => { - return count !== 1 ? `${word}s` : word; - }; + // #278 -- this function might need to be rewritten to support l18n + const plural = (word, count) => { + return count !== 1 ? `${word}s` : word; + }; - return { timeago }; + return { timeago }; } diff --git a/webui/src/main.js b/webui/src/main.js index 48a9274b..d3e8f495 100644 --- a/webui/src/main.js +++ b/webui/src/main.js @@ -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');