[feature] interactive deplete soon

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>

4 files changed, 12 insertions, 25 deletions

diff --git a/web/html/xui/client_modal.html b/web/html/xui/client_modal.html
index 25974325..ba9fce31 100644
--- a/web/html/xui/client_modal.html
+++ b/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;
diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/inbound_client_table.html
index 3143fe18..43491c45 100644
--- a/web/html/xui/inbound_client_table.html
+++ b/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" }}
diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html
index d9d0637c..be2bcf4a 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/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);
             }
         },
     });
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index b689a586..f11d5a79 100644
--- a/web/html/xui/inbounds.html
+++ b/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