feat(www): add sort clients by name (#1227)
Co-authored-by: Philip H. <47042125+pheiduck@users.noreply.github.com>
This commit is contained in:
Võ Hoàng
GitHub
parent
7c521e8733
commit
ca7ee32052
|
|
@ -123,6 +123,7 @@ These options can be configured by setting environment variables using `-e KEY="
|
|||
| `UI_CHART_TYPE` | `0` | `1` | UI_CHART_TYPE=0 # Charts disabled, UI_CHART_TYPE=1 # Line chart, UI_CHART_TYPE=2 # Area chart, UI_CHART_TYPE=3 # Bar chart |
|
||||
| `UI_SHOW_LINKS` | `false` | `true` | Enable display of a short download link in Web UI |
|
||||
| `MAX_AGE` | `0` | `1440` | The maximum age of Web UI sessions in minutes. `0` means that the session will exist until the browser is closed. |
|
||||
| `UI_ENABLE_SORT_CLIENTS` | `false` | `true` | Enable UI sort clients by name |
|
||||
|
||||
> If you change `WG_PORT`, make sure to also change the exposed port.
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ services:
|
|||
# - UI_TRAFFIC_STATS=true
|
||||
# - UI_CHART_TYPE=0 # (0 Charts disabled, 1 # Line chart, 2 # Area chart, 3 # Bar chart)
|
||||
# - UI_SHOW_LINKS=true
|
||||
# - UI_ENABLE_SORT_CLIENTS=true
|
||||
|
||||
image: ghcr.io/wg-easy/wg-easy
|
||||
container_name: wg-easy
|
||||
|
|
|
|||
|
|
@ -39,3 +39,4 @@ module.exports.LANG = process.env.LANG || 'en';
|
|||
module.exports.UI_TRAFFIC_STATS = process.env.UI_TRAFFIC_STATS || 'false';
|
||||
module.exports.UI_CHART_TYPE = process.env.UI_CHART_TYPE || 0;
|
||||
module.exports.UI_SHOW_LINKS = process.env.UI_SHOW_LINKS || 'false';
|
||||
module.exports.UI_ENABLE_SORT_CLIENTS = process.env.UI_ENABLE_SORT_CLIENTS || 'false';
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ const {
|
|||
UI_TRAFFIC_STATS,
|
||||
UI_CHART_TYPE,
|
||||
UI_SHOW_LINKS,
|
||||
UI_ENABLE_SORT_CLIENTS,
|
||||
} = require('../config');
|
||||
|
||||
const requiresPassword = !!PASSWORD_HASH;
|
||||
|
|
@ -101,7 +102,12 @@ module.exports = class Server {
|
|||
|
||||
.get('/api/ui-show-links', defineEventHandler((event) => {
|
||||
setHeader(event, 'Content-Type', 'application/json');
|
||||
return `${UI_SHOW_LINKS}`;
|
||||
return `"${UI_SHOW_LINKS}"`;
|
||||
}))
|
||||
|
||||
.get('/api/ui-sort-clients', defineEventHandler((event) => {
|
||||
setHeader(event, 'Content-Type', 'application/json');
|
||||
return `"${UI_ENABLE_SORT_CLIENTS}"`;
|
||||
}))
|
||||
|
||||
// Authentication
|
||||
|
|
|
|||
|
|
@ -112,6 +112,15 @@
|
|||
</svg>
|
||||
<span class="max-md:hidden text-sm">{{$t("backup")}}</span>
|
||||
</a>
|
||||
<!-- Sort client -->
|
||||
<div v-if="enableSortClient === true">
|
||||
<button @click="sortClient = !sortClient;"
|
||||
class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition">
|
||||
<span v-if="sortClient === false" class="max-md:hidden text-sm">{{$t("sort")}} ↑</span>
|
||||
<span v-if="sortClient === true" class="max-md:hidden text-sm">{{$t("sort")}} ↓</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- New client -->
|
||||
<button @click="clientCreate = true; clientCreateName = '';"
|
||||
class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition">
|
||||
|
|
|
|||
|
|
@ -160,4 +160,11 @@ class API {
|
|||
});
|
||||
}
|
||||
|
||||
async getUiSortClients() {
|
||||
return this.call({
|
||||
method: 'get',
|
||||
path: '/ui-sort-clients',
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,22 @@ function bytes(bytes, decimals, kib, maxunit) {
|
|||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sorts an array of objects by a specified property in ascending or descending order.
|
||||
*
|
||||
* @param {Array} array - The array of objects to be sorted.
|
||||
* @param {string} property - The property to sort the array by.
|
||||
* @param {boolean} [sort=true] - Whether to sort the array in ascending (default) or descending order.
|
||||
* @return {Array} - The sorted array of objects.
|
||||
*/
|
||||
function sortByProperty(array, property, sort = true) {
|
||||
if (sort) {
|
||||
return array.sort((a, b) => (typeof a[property] === 'string' ? a[property].localeCompare(b[property]) : a[property] - b[property]));
|
||||
}
|
||||
|
||||
return array.sort((a, b) => (typeof a[property] === 'string' ? b[property].localeCompare(a[property]) : b[property] - a[property]));
|
||||
}
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: localStorage.getItem('lang') || 'en',
|
||||
fallbackLocale: 'en',
|
||||
|
|
@ -158,6 +174,9 @@ new Vue({
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
enableSortClient: true,
|
||||
sortClient: true, // Sort clients by name, true = asc, false = desc
|
||||
},
|
||||
methods: {
|
||||
dateTime: (value) => {
|
||||
|
|
@ -232,6 +251,10 @@ new Vue({
|
|||
|
||||
return client;
|
||||
});
|
||||
|
||||
if (enableSortClient) {
|
||||
this.clients = sortByProperty(this.clients, 'name', this.sortClient);
|
||||
}
|
||||
},
|
||||
login(e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -408,6 +431,8 @@ new Vue({
|
|||
i18n.locale = lang;
|
||||
}
|
||||
|
||||
this.enableSortClient = await this.api.getUiSortClients();
|
||||
|
||||
const currentRelease = await this.api.getRelease();
|
||||
const latestRelease = await fetch('https://wg-easy.github.io/wg-easy/changelog.json')
|
||||
.then((res) => res.json())
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ const messages = { // eslint-disable-line no-unused-vars
|
|||
titleBackupConfig: 'Backup your configuration',
|
||||
rememberMe: 'Remember me',
|
||||
titleRememberMe: 'Stay logged after closing the browser',
|
||||
sort: 'Sort',
|
||||
},
|
||||
ua: {
|
||||
name: 'Ім`я',
|
||||
|
|
@ -349,7 +350,7 @@ const messages = { // eslint-disable-line no-unused-vars
|
|||
titleRestoreConfig: '구성 파일 복원',
|
||||
titleBackupConfig: '구성 파일 백업',
|
||||
},
|
||||
vi: {
|
||||
vi: { // https://github.com/hoangneeee
|
||||
name: 'Tên',
|
||||
password: 'Mật khẩu',
|
||||
signIn: 'Đăng nhập',
|
||||
|
|
@ -375,6 +376,13 @@ const messages = { // eslint-disable-line no-unused-vars
|
|||
downloadConfig: 'Tải xuống cấu hình',
|
||||
madeBy: 'Được tạo bởi',
|
||||
donate: 'Ủng hộ',
|
||||
toggleCharts: 'Mở/Ẩn Biểu đồ',
|
||||
theme: { dark: 'Dark theme', light: 'Light theme', auto: 'Auto theme' },
|
||||
restore: 'Khôi phục',
|
||||
backup: 'Sao lưu',
|
||||
titleRestoreConfig: 'Khôi phục cấu hình của bạn',
|
||||
titleBackupConfig: 'Sao lưu cấu hình của bạn',
|
||||
sort: 'Sắp xếp',
|
||||
},
|
||||
nl: {
|
||||
name: 'Naam',
|
||||
|
|
|
|||
Loading…
Reference in New Issue