[feature] filter inbound clients

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

1 files changed, 52 insertions, 4 deletions

diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index f11d5a79..6fdf0c43 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -105,7 +105,17 @@
                                 </a-col>
                             </a-row>
                         </div>
-                        <a-input v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus style="max-width: 300px"></a-input>
+                        <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus style="max-width: 300px"></a-input>
+                        <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid">
+                            <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
+                            <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
+                            <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
+                            <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button>
+                        </a-radio-group>
+                        <a-switch v-model="enableFilter"
+                            checked-children='{{ i18n "search" }}' un-checked-children='{{ i18n "filter" }}'
+                            @change="toggleFilter">
+                        </a-switch>
                         <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
                                  :data-source="searchedInbounds"
                                  :loading="spinning" :scroll="{ x: 1300 }"
@@ -323,6 +333,8 @@
             inbounds: [],
             dbInbounds: [],
             searchKey: '',
+            enableFilter: false,
+            filterBy: '',
             searchedInbounds: [],
             expireDiff: 0,
             trafficDiff: 0,
@@ -331,7 +343,7 @@
             clientCount: {},
             isRefreshEnabled: localStorage.getItem("isRefreshEnabled") === "true" ? true : false,
             refreshing: false,
-            refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
+            refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000
         },
         methods: {
             loading(spinning = true) {
@@ -366,11 +378,15 @@
                     to_inbound = dbInbound.toInbound()
                     this.inbounds.push(to_inbound);
                     this.dbInbounds.push(dbInbound);
-                    if ([Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN].includes(inbound.protocol)) {
+                    if ([Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN, Protocols.SHADOWSOCKS].includes(inbound.protocol)) {
                         this.clientCount[inbound.id] = this.getClientCounts(inbound, to_inbound);
                     }
                 }
-                this.searchInbounds(this.searchKey);
+                if(this.enableFilter){
+                    this.filterInbounds();
+                } else {
+                    this.searchInbounds(this.searchKey);
+                }
             },
             getClientCounts(dbInbound, inbound) {
                 let clientCount = 0, active = [], deactive = [], depleted = [], expiring = [];
@@ -428,6 +444,38 @@
                     });
                 }
             },
+            filterInbounds() {
+                if (ObjectUtil.isEmpty(this.filterBy)) {
+                    this.searchedInbounds = this.dbInbounds.slice();
+                } else {
+                    this.searchedInbounds.splice(0, this.searchedInbounds.length);
+                    this.dbInbounds.forEach(inbound => {
+                        const newInbound = new DBInbound(inbound);
+                        const inboundSettings = JSON.parse(inbound.settings);
+                        if (this.clientCount[inbound.id] && this.clientCount[inbound.id].hasOwnProperty(this.filterBy)){
+                            const list = this.clientCount[inbound.id][this.filterBy];
+                            if (list.length > 0) {
+                                const filteredSettings = { "clients": [] };
+                                inboundSettings.clients.forEach(client => {
+                                    if (list.includes(client.email)) {
+                                        filteredSettings.clients.push(client);
+                                    }
+                                });
+                                newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, filteredSettings);
+                                this.searchedInbounds.push(newInbound);
+                            }
+                        }
+                    });
+                }
+            },
+            toggleFilter(){
+                if(this.enableFilter) {
+                    this.searchKey = '';
+                } else {
+                    this.filterBy = '';
+                    this.searchedInbounds = this.dbInbounds.slice();
+                }
+            },
             generalActions(action) {
                 switch (action.key) {
                     case "export":