[feature] interactive deplete soon

Co-Authored-By: Alireza Ahmadi <[email protected]>

web/assets/js/util/common.js

@@ -91,6 +91,21 @@ function setCookie(cname, cvalue, exdays) {
     document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
 }
 
+function usageColor(data, threshold, total) {
+    switch (true) {
+        case data === null:
+            return 'blue';
+        case total <= 0:
+            return 'blue';
+        case data < total - threshold:
+            return 'cyan';
+        case data < total:
+            return 'orange';
+        default:
+            return 'red';
+    }
+}
+
 function doAllItemsExist(array1, array2) {
     for (let i = 0; i < array1.length; i++) {
         if (!array2.includes(array1[i])) {
@@ -98,4 +113,4 @@ function doAllItemsExist(array1, array2) {
         }
     }
     return true;
-}
+}

web/html/xui/client_modal.html

@@ -20,7 +20,6 @@
         oldClientId: "",
         index: null,
         clientIps: null,
-        isExpired: false,
         delayedStart: false,
         ok() {
             if (clientModal.isEdit) {
@@ -38,7 +37,6 @@
             this.inbound = dbInbound.toInbound();
             this.clients = this.getClients(this.inbound.protocol, this.inbound.settings);
             this.index = index === null ? this.clients.length : index;
-            this.isExpired = isEdit ? this.inbound.isExpiry(this.index) : false;
             this.delayedStart = false;
             if (isEdit) {
                 if (this.clients[index].expiryTime < 0) {
@@ -109,13 +107,10 @@
                 return true
             },
             get isExpiry() {
-                return this.clientModal.isExpired
+                return this.clientModal.isEdit && this.client.expiryTime >0 ? (this.client.expiryTime < new Date().getTime()) : false;
             },
             get statsColor() {
-                if (!clientStats) return 'blue'
-                if (clientStats.total <= 0) return 'blue'
-                else if (clientStats.total > 0 && (clientStats.down + clientStats.up) < clientStats.total) return 'cyan'
-                else return 'red'
+                return usageColor(clientStats.up + clientStats.down, app.trafficDiff, this.client.totalGB);
             },
             get delayedExpireDays() {
                 return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;

web/html/xui/inbound_client_table.html

@@ -29,20 +29,15 @@
     <a-tag v-if="!isClientEnabled(record, client.email)" color="red">{{ i18n "depleted" }}</a-tag>
 </template>                                    
 <template slot="traffic" slot-scope="text, client">
-    <a-tag color="blue">
-        [[ sizeFormat(getUpStats(record, client.email)) ]] / [[ sizeFormat(getDownStats(record, client.email)) ]]
-    </a-tag>
+    <a-tag :color="statsColor(record, client.email)" @click="alert(usageColor(0,1024,512))">[[ sizeFormat(getUpStats(record, client.email)) ]] / [[ sizeFormat(getDownStats(record, client.email)) ]]</a-tag>
     <template v-if="client._totalGB > 0">
-        <a-tag v-if="isTrafficExhausted(record, client.email)" color="red">[[client._totalGB]] GB</a-tag>
-        <a-tag v-else color="cyan">[[client._totalGB]] GB</a-tag>
+        <a-tag :color="statsColor(record, client.email)">[[client._totalGB]]GB</a-tag>
     </template>
     <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
 </template>                                    
 <template slot="expiryTime" slot-scope="text, client, index">
     <template v-if="client.expiryTime > 0">
-        <a-tag :color="isExpiry(record, index)? 'red' : 'blue'">
-            [[ DateUtil.formatMillis(client._expiryTime) ]]
-        </a-tag>
+        <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, client.expiryTime)">
     </template>
     <a-tag v-else-if="client.expiryTime < 0" color="cyan">
         [[ client._expiryTime ]] {{ i18n "pages.client.days" }}

web/html/xui/inbound_info_modal.html

@@ -89,7 +89,7 @@
                 <th>{{ i18n "pages.inbounds.expireDate" }}</th>
         <tr>
             <td>
-                <a-tag v-if="infoModal.clientStats" :color="statsColor(infoModal.clientStats)">
+                <a-tag v-if="infoModal.clientStats" color="green">
                     [[ sizeFormat(infoModal.clientStats['up']) ]] / 
                     [[ sizeFormat(infoModal.clientStats['down']) ]]
                     ([[ sizeFormat(infoModal.clientStats['up'] + infoModal.clientStats['down']) ]])
@@ -101,7 +101,7 @@
             </td>
             <td>
                 <template v-if="infoModal.clientSettings.expiryTime > 0">
-                    <a-tag :color="infoModal.isExpired ? 'red' : 'blue'">
+                    <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
                         [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
                     </a-tag>
                 </template>
@@ -266,10 +266,7 @@
                 });
             },
             statsColor(stats) {
-                if (!stats) return 'blue'
-                if (stats['total'] === 0) return 'blue'
-                else if (stats['total'] > 0 && (stats['down'] + stats['up']) < stats['total']) return 'cyan'
-                else return 'red'
+                return usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
             }
         },
     });

web/html/xui/inbounds.html

@@ -790,10 +790,10 @@
                 clientStats = dbInbound.clientStats.find(stats => stats.email === email)
                 return clientStats ? clientStats.down : 0
             },
-            isTrafficExhausted(dbInbound, email) {
-                if (email.length == 0) return false
-                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
-                return clientStats ? clientStats.down + clientStats.up > clientStats.total : false
+            statsColor(dbInbound, email) {
+                if(email.length == 0) return 'blue';
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
+                return usageColor(clientStats.down + clientStats.up, this.trafficDiff, clientStats.total);
             },
             isClientEnabled(dbInbound, email) {
                 clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null