From 2d16eabc6e751e6233154a082bb6ccd2f816ec41 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Wed, 17 May 2023 02:01:56 +0330
Subject: [PATCH] [feature] interactive deplete soon
Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>
---
web/assets/js/util/common.js | 17 ++++++++++++++++-
web/html/xui/client_modal.html | 9 ++-------
web/html/xui/inbound_client_table.html | 11 +++--------
web/html/xui/inbound_info_modal.html | 9 +++------
web/html/xui/inbounds.html | 8 ++++----
5 files changed, 28 insertions(+), 26 deletions(-)
diff --git a/web/assets/js/util/common.js b/web/assets/js/util/common.js
index a695f081..20df4f4e 100644
--- a/web/assets/js/util/common.js
+++ b/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;
-}
\ No newline at end of file
+}
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