[feature] interactive deplete soon

web/assets/js/util/common.js

@@ -56,7 +56,7 @@ function toFixed(num, n) {
     return Math.round(num * n) / n;
 }
 
-function debounce (fn, delay) {
+function debounce(fn, delay) {
     var timeoutID = null
     return function () {
       clearTimeout(timeoutID)
@@ -66,4 +66,19 @@ function debounce (fn, delay) {
         fn.apply(that, args)
       }, delay)
     }
-  }
+}
+
+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';
+    }
+}

web/html/xui/client_modal.html

@@ -19,7 +19,6 @@
         clientStats: [],
         oldClientId: "",
         index: null,
-        isExpired: false,
         delayedStart: false,
         ok() {
             if(clientModal.isEdit){
@@ -37,7 +36,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){
@@ -108,13 +106,10 @@
                 return true
             },
             get isExpiry() {
-                return this.clientModal.isExpired
+                return this.clientModal.isEdit ? (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,16 +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'">
+        <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, client.expiryTime)">
             [[ DateUtil.formatMillis(client._expiryTime) ]]
         </a-tag>
     </template>

web/html/xui/inbound_info_modal.html

@@ -81,7 +81,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']) ]])
@@ -93,7 +93,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>
@@ -258,10 +258,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

@@ -783,10 +783,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