denozord
6a96c368e3
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m50s
426 lines
16 KiB
React
426 lines
16 KiB
React
import { useState, useMemo } from 'react';
|
|
import {
|
|
IconServer,
|
|
IconWorld,
|
|
IconBuildingSkyscraper,
|
|
IconNetwork,
|
|
IconChevronDown,
|
|
IconChevronRight,
|
|
IconX,
|
|
IconSearch,
|
|
IconFilter,
|
|
IconDatabase
|
|
} from '@tabler/icons-react';
|
|
|
|
// Преобразование кода страны в emoji-флаг
|
|
function countryToFlag(isoCode) {
|
|
if (!isoCode) return '';
|
|
const codeMap = {
|
|
'SWE': 'SE',
|
|
'RUS': 'RU',
|
|
'USA': 'US',
|
|
'GER': 'DE',
|
|
'FIN': 'FI',
|
|
'NLD': 'NL'
|
|
};
|
|
const code = codeMap[isoCode?.toUpperCase()] || isoCode?.toUpperCase();
|
|
if (!code || code.length !== 2) return isoCode;
|
|
return code
|
|
.replace(/./g, char =>
|
|
String.fromCodePoint(127397 + char.charCodeAt())
|
|
);
|
|
}
|
|
|
|
export default function ServerSidebar({
|
|
servers = [],
|
|
filters = {},
|
|
onFiltersChange,
|
|
onSearch,
|
|
searchTerm = '',
|
|
onReset
|
|
}) {
|
|
const [expandedSections, setExpandedSections] = useState({
|
|
country: true,
|
|
provider: true,
|
|
type: true,
|
|
tunnel: false
|
|
});
|
|
|
|
// Подсчёт серверов по категориям
|
|
const stats = useMemo(() => {
|
|
const byCountry = {};
|
|
const byProvider = {};
|
|
const byType = {};
|
|
const byTunnel = {};
|
|
|
|
servers.forEach(srv => {
|
|
byCountry[srv.country] = (byCountry[srv.country] || 0) + 1;
|
|
byProvider[srv.provider] = (byProvider[srv.provider] || 0) + 1;
|
|
byType[srv.type] = (byType[srv.type] || 0) + 1;
|
|
byTunnel[srv.tunnel] = (byTunnel[srv.tunnel] || 0) + 1;
|
|
});
|
|
|
|
return { byCountry, byProvider, byType, byTunnel };
|
|
}, [servers]);
|
|
|
|
const toggleSection = (section) => {
|
|
setExpandedSections(prev => ({
|
|
...prev,
|
|
[section]: !prev[section]
|
|
}));
|
|
};
|
|
|
|
const handleFilterClick = (category, value) => {
|
|
const currentValue = filters[category];
|
|
const newValue = currentValue === value ? '' : value;
|
|
onFiltersChange({ ...filters, [category]: newValue });
|
|
};
|
|
|
|
const activeFiltersCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0);
|
|
|
|
const typeLabels = {
|
|
'jumphost': 'Jumphost',
|
|
'exit': 'Выходная нода'
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="server-sidebar d-flex flex-column"
|
|
style={{
|
|
width: '260px',
|
|
minWidth: '260px',
|
|
background: '#fff',
|
|
borderRadius: '12px',
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
|
|
height: 'fit-content',
|
|
maxHeight: 'calc(100vh - 200px)',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
{/* Заголовок */}
|
|
<div
|
|
className="d-flex align-items-center justify-content-between px-3 py-3"
|
|
style={{ borderBottom: '1px solid rgba(0,0,0,0.06)' }}
|
|
>
|
|
<div className="d-flex align-items-center">
|
|
<IconFilter size={18} className="text-primary me-2" />
|
|
<span className="fw-semibold">Фильтры</span>
|
|
{activeFiltersCount > 0 && (
|
|
<span
|
|
className="badge bg-primary ms-2"
|
|
style={{ fontSize: '0.7rem', padding: '3px 6px' }}
|
|
>
|
|
{activeFiltersCount}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{activeFiltersCount > 0 && (
|
|
<button
|
|
className="btn btn-ghost-secondary btn-icon btn-sm"
|
|
onClick={onReset}
|
|
title="Сбросить"
|
|
style={{ width: 28, height: 28 }}
|
|
>
|
|
<IconX size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Поиск */}
|
|
<div className="px-3 py-2" style={{ borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
|
|
<div className="input-icon">
|
|
<span className="input-icon-addon">
|
|
<IconSearch size={14} className="text-muted" />
|
|
</span>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="Поиск..."
|
|
value={searchTerm}
|
|
onChange={(e) => onSearch(e.target.value)}
|
|
style={{
|
|
background: 'rgba(0,0,0,0.02)',
|
|
border: '1px solid rgba(0,0,0,0.06)',
|
|
borderRadius: '8px',
|
|
fontSize: '0.85rem'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Скроллируемый контент */}
|
|
<div style={{ overflowY: 'auto', flex: 1 }}>
|
|
{/* Секция: Страны */}
|
|
<div className="filter-section">
|
|
<div
|
|
className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
|
|
onClick={() => toggleSection('country')}
|
|
style={{
|
|
background: 'rgba(0,0,0,0.02)',
|
|
borderBottom: '1px solid rgba(0,0,0,0.04)'
|
|
}}
|
|
>
|
|
<div className="d-flex align-items-center">
|
|
<IconWorld size={15} className="me-2" style={{ color: '#3b82f6' }} />
|
|
<span className="fw-medium small">Страны</span>
|
|
</div>
|
|
{expandedSections.country ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
|
|
</div>
|
|
{expandedSections.country && (
|
|
<div className="p-2">
|
|
{Object.entries(stats.byCountry)
|
|
.sort((a, b) => b[1] - a[1])
|
|
.map(([country, count]) => (
|
|
<button
|
|
key={country}
|
|
className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
|
|
filters.country === country ? 'btn-primary' : ''
|
|
}`}
|
|
onClick={() => handleFilterClick('country', country)}
|
|
style={{
|
|
background: filters.country === country ? undefined : 'transparent',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
padding: '8px 10px',
|
|
transition: 'background 0.15s'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (filters.country !== country) {
|
|
e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (filters.country !== country) {
|
|
e.currentTarget.style.background = 'transparent';
|
|
}
|
|
}}
|
|
>
|
|
<span className="d-flex align-items-center">
|
|
<span className="me-2" style={{ fontSize: '1.1rem' }}>{countryToFlag(country)}</span>
|
|
<span className={filters.country === country ? 'text-white' : ''}>{country}</span>
|
|
</span>
|
|
<span
|
|
className={`badge ${filters.country === country ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
|
|
style={{ fontSize: '0.7rem', padding: '3px 7px' }}
|
|
>
|
|
{count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Секция: Провайдеры */}
|
|
<div className="filter-section">
|
|
<div
|
|
className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
|
|
onClick={() => toggleSection('provider')}
|
|
style={{
|
|
background: 'rgba(0,0,0,0.02)',
|
|
borderBottom: '1px solid rgba(0,0,0,0.04)'
|
|
}}
|
|
>
|
|
<div className="d-flex align-items-center">
|
|
<IconBuildingSkyscraper size={15} className="me-2" style={{ color: '#8b5cf6' }} />
|
|
<span className="fw-medium small">Провайдеры</span>
|
|
</div>
|
|
{expandedSections.provider ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
|
|
</div>
|
|
{expandedSections.provider && (
|
|
<div className="p-2">
|
|
{Object.entries(stats.byProvider)
|
|
.sort((a, b) => b[1] - a[1])
|
|
.map(([provider, count]) => (
|
|
<button
|
|
key={provider}
|
|
className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
|
|
filters.provider === provider ? 'btn-primary' : ''
|
|
}`}
|
|
onClick={() => handleFilterClick('provider', provider)}
|
|
style={{
|
|
background: filters.provider === provider ? undefined : 'transparent',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
padding: '8px 10px'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (filters.provider !== provider) {
|
|
e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (filters.provider !== provider) {
|
|
e.currentTarget.style.background = 'transparent';
|
|
}
|
|
}}
|
|
>
|
|
<span className={filters.provider === provider ? 'text-white' : ''}>{provider}</span>
|
|
<span
|
|
className={`badge ${filters.provider === provider ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
|
|
style={{ fontSize: '0.7rem', padding: '3px 7px' }}
|
|
>
|
|
{count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Секция: Типы */}
|
|
<div className="filter-section">
|
|
<div
|
|
className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
|
|
onClick={() => toggleSection('type')}
|
|
style={{
|
|
background: 'rgba(0,0,0,0.02)',
|
|
borderBottom: '1px solid rgba(0,0,0,0.04)'
|
|
}}
|
|
>
|
|
<div className="d-flex align-items-center">
|
|
<IconServer size={15} className="me-2" style={{ color: '#10b981' }} />
|
|
<span className="fw-medium small">Тип сервера</span>
|
|
</div>
|
|
{expandedSections.type ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
|
|
</div>
|
|
{expandedSections.type && (
|
|
<div className="p-2">
|
|
{Object.entries(stats.byType)
|
|
.sort((a, b) => b[1] - a[1])
|
|
.map(([type, count]) => (
|
|
<button
|
|
key={type}
|
|
className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
|
|
filters.type === type ? 'btn-primary' : ''
|
|
}`}
|
|
onClick={() => handleFilterClick('type', type)}
|
|
style={{
|
|
background: filters.type === type ? undefined : 'transparent',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
padding: '8px 10px'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (filters.type !== type) {
|
|
e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (filters.type !== type) {
|
|
e.currentTarget.style.background = 'transparent';
|
|
}
|
|
}}
|
|
>
|
|
<span className="d-flex align-items-center">
|
|
<span
|
|
className="rounded-circle me-2"
|
|
style={{
|
|
width: 8,
|
|
height: 8,
|
|
background: type === 'exit' ? '#ef4444' : '#3b82f6'
|
|
}}
|
|
/>
|
|
<span className={filters.type === type ? 'text-white' : ''}>
|
|
{typeLabels[type] || type}
|
|
</span>
|
|
</span>
|
|
<span
|
|
className={`badge ${filters.type === type ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
|
|
style={{ fontSize: '0.7rem', padding: '3px 7px' }}
|
|
>
|
|
{count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Секция: Туннели */}
|
|
<div className="filter-section">
|
|
<div
|
|
className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
|
|
onClick={() => toggleSection('tunnel')}
|
|
style={{
|
|
background: 'rgba(0,0,0,0.02)',
|
|
borderBottom: '1px solid rgba(0,0,0,0.04)'
|
|
}}
|
|
>
|
|
<div className="d-flex align-items-center">
|
|
<IconNetwork size={15} className="me-2" style={{ color: '#f59e0b' }} />
|
|
<span className="fw-medium small">Туннель</span>
|
|
</div>
|
|
{expandedSections.tunnel ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
|
|
</div>
|
|
{expandedSections.tunnel && (
|
|
<div className="p-2">
|
|
{Object.entries(stats.byTunnel)
|
|
.sort((a, b) => b[1] - a[1])
|
|
.map(([tunnel, count]) => (
|
|
<button
|
|
key={tunnel}
|
|
className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
|
|
filters.tunnel === tunnel ? 'btn-primary' : ''
|
|
}`}
|
|
onClick={() => handleFilterClick('tunnel', tunnel)}
|
|
style={{
|
|
background: filters.tunnel === tunnel ? undefined : 'transparent',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
padding: '8px 10px'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (filters.tunnel !== tunnel) {
|
|
e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (filters.tunnel !== tunnel) {
|
|
e.currentTarget.style.background = 'transparent';
|
|
}
|
|
}}
|
|
>
|
|
<span className={filters.tunnel === tunnel ? 'text-white' : ''}>{tunnel}</span>
|
|
<span
|
|
className={`badge ${filters.tunnel === tunnel ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
|
|
style={{ fontSize: '0.7rem', padding: '3px 7px' }}
|
|
>
|
|
{count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Статистика внизу */}
|
|
<div
|
|
className="px-3 py-3"
|
|
style={{
|
|
borderTop: '1px solid rgba(0,0,0,0.06)',
|
|
background: 'rgba(0,0,0,0.01)'
|
|
}}
|
|
>
|
|
<div className="d-flex align-items-center mb-2">
|
|
<IconDatabase size={14} className="text-muted me-2" />
|
|
<span className="text-muted small">Статистика</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-1">
|
|
<span className="small text-muted">Всего серверов</span>
|
|
<span className="small fw-bold">{servers.length}</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-1">
|
|
<span className="small text-muted">Выходных нод</span>
|
|
<span className="small fw-bold" style={{ color: '#ef4444' }}>{stats.byType['exit'] || 0}</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between">
|
|
<span className="small text-muted">Jumphosts</span>
|
|
<span className="small fw-bold" style={{ color: '#3b82f6' }}>{stats.byType['jumphost'] || 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|