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
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m1s
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user