denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Show server selection cards on initial page load
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m41s
Details

Browse Source
This commit is contained in:
denozord
2025-11-13 16:45:11 +07:00
parent bf6735a470
commit 9b36b7c4f6
1 changed files with 125 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/FilterManager.jsx
+125 -15
View File
@@ -869,29 +869,139 @@ function FilterManager() {
</div>
)}
{/* Пустое состояние - выбор сервера */}
{!selectedServer ? (
<div className="empty">
<div className="empty-icon">
<IconServer size={48} className="text-muted" />
</div>
<p className="empty-title">Выберите сервер</p>
<p className="empty-subtitle text-muted">
Выберите сервер из списка слева для управления его фильтрами
</p>
{servers.length === 0 && (
<div className="empty-action">
{/* Выбор сервера - показываем список когда сервер не выбран */}
{!selectedServer && (
<div className="card">
<div className="card-header">
<h3 className="card-title">
<IconServer className="icon me-2" />
Выберите сервер для работы
</h3>
<div className="card-actions">
<button
className="btn btn-primary"
onClick={() => setServerConfigModalOpen(true)}
>
<IconPlus className="icon" />
Добавить первый сервер
Добавить сервер
</button>
</div>
)}
</div>
<div className="card-body">
{servers.length === 0 ? (
<div className="empty">
<div className="empty-icon">
<IconServer size={48} className="text-muted" />
</div>
<p className="empty-title">Нет серверов</p>
<p className="empty-subtitle text-muted">
Создайте первый сервер для работы с фильтрами
</p>
<div className="empty-action">
<button
className="btn btn-primary"
onClick={() => setServerConfigModalOpen(true)}
>
<IconPlus className="icon" />
Добавить первый сервер
</button>
</div>
</div>
) : (
<>
{/* Поиск */}
<div className="mb-3">
<div className="input-icon">
<input
type="text"
className="form-control"
placeholder="Поиск серверов..."
value={serverSearch}
onChange={(e) => setServerSearch(e.target.value)}
/>
<span className="input-icon-addon">
<IconSearch />
</span>
</div>
</div>
{/* Список серверов */}
<div className="row g-3">
{/* Активные серверы */}
{activeServers.length > 0 && (
<>
<div className="col-12">
<h4 className="text-muted mb-0">Активные серверы</h4>
</div>
{activeServers.map(server => (
<div key={server.id} className="col-md-6 col-lg-4">
<div className="card card-sm card-link" onClick={() => setSelectedServer(server)} style={{ cursor: 'pointer' }}>
<div className="card-body">
<div className="d-flex align-items-center">
<div className="me-3">
<span className="avatar bg-primary-lt">
<IconServer />
</span>
</div>
<div className="flex-grow-1">
<div className="fw-bold">{server.name}</div>
{server.description && (
<div className="text-muted small text-truncate" style={{ maxWidth: '200px' }}>
{server.description}
</div>
)}
</div>
<div className="ms-auto">
<span className="badge bg-green-lt text-green">Активен</span>
</div>
</div>
</div>
</div>
</div>
))}
</>
)}
{/* Неактивные серверы */}
{inactiveServers.length > 0 && (
<>
<div className="col-12 mt-3">
<h4 className="text-muted mb-0">Неактивные серверы</h4>
</div>
{inactiveServers.map(server => (
<div key={server.id} className="col-md-6 col-lg-4">
<div className="card card-sm card-link" onClick={() => setSelectedServer(server)} style={{ cursor: 'pointer' }}>
<div className="card-body">
<div className="d-flex align-items-center">
<div className="me-3">
<span className="avatar bg-secondary-lt">
<IconServer className="text-muted" />
</span>
</div>
<div className="flex-grow-1">
<div className="fw-bold text-muted">{server.name}</div>
{server.description && (
<div className="text-muted small text-truncate" style={{ maxWidth: '200px' }}>
{server.description}
</div>
)}
</div>
<div className="ms-auto">
<span className="badge bg-red-lt text-red">Неактивен</span>
</div>
</div>
</div>
</div>
</div>
))}
</>
)}
</div>
</>
)}
</div>
</div>
) : null}
)}
{/* Секция фильтров выбранного сервера */}
{selectedServer && (