[feature] filter inbound clients #301

web/html/xui/inbounds.html

@@ -104,7 +104,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 }"
@@ -319,6 +329,8 @@
             inbounds: [],
             dbInbounds: [],
             searchKey: '',
+            enableFilter: false,
+            filterBy: '',
             searchedInbounds: [],
             expireDiff: 0,
             trafficDiff: 0,
@@ -327,7 +339,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) {
@@ -362,11 +374,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 = [];
@@ -424,6 +440,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":

web/translation/translate.en_US.toml

@@ -11,6 +11,7 @@
 "enable" = "Enable"
 "protocol" = "Protocol"
 "search" = "Search"
+"filter" = "Filter"
 
 "loading" = "Loading"
 "second" = "Second"

web/translation/translate.fa_IR.toml

@@ -11,6 +11,7 @@
 "enable" = "فعال"
 "protocol" = "پروتکل"
 "search" = "جستجو"
+"filter" = "فیلتر"
 
 "loading" = "در حال بروزرسانی.."
 "second" = "ثانیه"

web/translation/translate.ru_RU.toml

@@ -11,6 +11,7 @@
 "enable" = "включить"
 "protocol" = "протокол"
 "search" = "поиск"
+"filter" = "Фильтр"
 
 "loading" = "загрузка"
 "second" = "секунда"

web/translation/translate.zh_Hans.toml

@@ -11,6 +11,7 @@
 "enable" = "启用"
 "protocol" = "协议"
 "search" = "搜尋"
+"filter" = "过滤器"
 
 "loading" = "加载中"
 "second" = "秒"