feat(www): add sort clients by name

src/www/index.html

@@ -111,6 +111,12 @@
                 </svg>
                 <span class="max-md:hidden text-sm">{{$t("backup")}}</span>
               </a>
+              <!-- Sort client -->
+              <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>
               <!-- 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">

src/www/js/app.js

@@ -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 descending (default) or ascending 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]);
+  } else {
+    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',
@@ -155,6 +171,8 @@ new Vue({
         },
       },
     },
+
+    sortClient: true // Sort clients by name, true = desc, false = asc
   },
   methods: {
     dateTime: (value) => {
@@ -229,6 +247,7 @@ new Vue({
 
         return client;
       });
+      this.clients = sortByProperty(this.clients, 'name', this.sortClient);
     },
     login(e) {
       e.preventDefault();

src/www/js/i18n.js

@@ -34,6 +34,7 @@ const messages = { // eslint-disable-line no-unused-vars
     backup: 'Backup',
     titleRestoreConfig: 'Restore your configuration',
     titleBackupConfig: 'Backup your configuration',
+    sort: 'Sort',
   },
   ua: {
     name: 'Ім`я',
@@ -328,7 +329,7 @@ const messages = { // eslint-disable-line no-unused-vars
     madeBy: '만든 사람',
     donate: '기부',
   },
-  vi: {
+  vi: { // https://github.com/hoangneeee
     name: 'Tên',
     password: 'Mật khẩu',
     signIn: 'Đăng nhập',
@@ -354,6 +355,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',