feat: Add toggle for displaying only configured filters in EasySwitchManager, enhancing user control over community visibility and improving filtering logic for better user experience.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m1s

This commit is contained in:
2025-12-07 04:51:51 +07:00
parent ab8b30fbd4
commit 7204c4045f
+28 -15
View File
@@ -36,6 +36,7 @@ function EasySwitchManager() {
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [selectedRule, setSelectedRule] = useState('all'); // all | by-community const [selectedRule, setSelectedRule] = useState('all'); // all | by-community
const [activeTab, setActiveTab] = useState('proxies'); // proxies | providers const [activeTab, setActiveTab] = useState('proxies'); // proxies | providers
const [showOnlyConfigured, setShowOnlyConfigured] = useState(true); // Показывать только настроенные
// Активные шлюзы для каждого community (ключ: community, значение: gateway name) // Активные шлюзы для каждого community (ключ: community, значение: gateway name)
const [activeGateways, setActiveGateways] = useState({}); const [activeGateways, setActiveGateways] = useState({});
@@ -331,21 +332,22 @@ function EasySwitchManager() {
{/* Панель фильтров */} {/* Панель фильтров */}
<div className="mb-3"> <div className="mb-3">
<div className="row g-2"> <div className="row g-2 align-items-center">
{/* Фильтр по правилу */} {/* Переключатель "Только настроенные" */}
<div className="col-md-3"> <div className="col-auto">
<select <label className="form-check form-switch mb-0">
className="form-select" <input
value={selectedRule} className="form-check-input"
onChange={(e) => setSelectedRule(e.target.value)} type="checkbox"
> checked={showOnlyConfigured}
<option value="all">Правило</option> onChange={(e) => setShowOnlyConfigured(e.target.checked)}
<option value="by-community">По community</option> />
</select> <span className="form-check-label">Только настроенные фильтры</span>
</label>
</div> </div>
{/* Поиск */} {/* Поиск */}
<div className="col-md-6"> <div className="col">
<div className="input-icon"> <div className="input-icon">
<span className="input-icon-addon"> <span className="input-icon-addon">
<IconSearch size={18} /> <IconSearch size={18} />
@@ -370,7 +372,7 @@ function EasySwitchManager() {
</div> </div>
{/* Инструменты */} {/* Инструменты */}
<div className="col-auto ms-auto"> <div className="col-auto">
<button className="btn btn-icon" title="Настройки"> <button className="btn btn-icon" title="Настройки">
<IconSettings size={18} /> <IconSettings size={18} />
</button> </button>
@@ -401,6 +403,17 @@ function EasySwitchManager() {
const country = serverMeta?.country || ''; const country = serverMeta?.country || '';
const flag = countryToFlag(country); const flag = countryToFlag(country);
// Фильтруем communities для этого сервера
const filteredCommunitiesForServer = communitiesDirectory.filter((comm) => {
if (showOnlyConfigured) {
return server.filtersMap.has(comm.value);
}
return true;
});
// Не показываем сервер, если нет отфильтрованных communities
if (filteredCommunitiesForServer.length === 0) return null;
return ( return (
<div key={server.id} className="card mb-3"> <div key={server.id} className="card mb-3">
{/* Заголовок сервера */} {/* Заголовок сервера */}
@@ -413,14 +426,14 @@ function EasySwitchManager() {
<span className="text-muted small">— {server.description}</span> <span className="text-muted small">— {server.description}</span>
)} )}
<span className="badge bg-blue-lt text-blue ms-auto"> <span className="badge bg-blue-lt text-blue ms-auto">
{communitiesDirectory.length} communities • {server.gateways.length} gateways {filteredCommunitiesForServer.length} communities • {server.gateways.length} gateways
</span> </span>
</div> </div>
</div> </div>
<div className="card-body p-3"> <div className="card-body p-3">
{/* ВСЕ Communities для этого сервера */} {/* ВСЕ Communities для этого сервера */}
{communitiesDirectory.map((comm) => { {filteredCommunitiesForServer.map((comm) => {
const activeKey = `${server.id}:${comm.value}`; const activeKey = `${server.id}:${comm.value}`;
const activeGw = activeGateways[activeKey]; const activeGw = activeGateways[activeKey];
const hasFilterForComm = server.filtersMap.has(comm.value); const hasFilterForComm = server.filtersMap.has(comm.value);