# Easy Switch - Быстрое переключение шлюзов

## Описание

Easy Switch - это новая страница для быстрого переключения шлюзов (gateways) внутри серверов на основе communities из фильтров. Интерфейс вдохновлен мобильными VPN приложениями и обеспечивает удобный способ управления маршрутизацией.

## Особенности

### 1. **Визуальный интерфейс**
- Компактные карточки шлюзов (уменьшенный размер)
- Карточки с флагами стран
- Отображение пинга и протокола подключения
- Метка "Fast" для самого быстрого шлюза в группе
- Активный шлюз выделен синим цветом

### 2. **Группировка по Серверам**
- Сервера группируются в отдельные блоки
- Каждый сервер показывает свои communities
- Для каждого community на сервере можно выбрать активный шлюз **этого сервера**
- Переключение происходит между шлюзами **внутри одного сервера**
- Отображается количество communities на каждом сервере

### 3. **Поиск и фильтрация**
- Поиск по community, описанию или имени шлюза
- Фильтрация по правилам
- Вкладки "Прокси" и "Провайдер прокси"

### 4. **Управление изменениями**
- Кнопка "Применить изменения" появляется при выборе нового шлюза
- Возможность обновить данные с сервера
- Отслеживание изменений

## Структура данных

### Источники данных

1. **Server Configs** (`/api/server-configs`)
   - Список серверов с настройками
   - ID сервера для загрузки фильтров

2. **Server Filters** (`/api/server-filters/{serverId}`)
   - Фильтры для каждого сервера
   - Community и gateway для каждого фильтра

3. **Inventory Servers** (`/api/servers`)
   - Метаданные серверов (страна, провайдер)
   - Используется для отображения флагов

### Формат данных фильтра

```json
{
  "community": "65001:100",
  "gateway": "SWE-HIPHOST",
  "description": "Стриминг сервисы"
}
```

### Структура данных в приложении

После загрузки данные организованы следующим образом:

```javascript
servers = [
  {
    id: "server-001",
    name: "SWE-HIPHOST",
    description: "Шведский сервер",
    communities: [
      {
        community: "65001:100",
        description: "Стриминг сервисы",
        gateways: [
          { name: "gateway1" },
          { name: "gateway2" },
          { name: "gateway3" }
        ]
      },
      // ... другие communities
    ]
  },
  // ... другие серверы
]
```

Активные шлюзы хранятся в формате:
```javascript
activeGateways = {
  "server-001:65001:100": "gateway1",
  "server-002:65001:100": "gateway4",
  // ключ: "{serverId}:{community}", значение: "{gatewayName}"
}
```

## Интерфейс

### Заголовок
- Название страницы "Easy Switch"
- Кнопка "Обновить" для перезагрузки данных
- Кнопка "Применить изменения" (появляется при наличии изменений)

### Вкладки
- **Прокси** - основной список communities с шлюзами
- **Провайдер прокси** - дополнительная вкладка (в разработке)

### Панель фильтров
- Dropdown "Правило" - фильтрация по типу правила
- Поле поиска - поиск по ключевым словам
- Кнопки инструментов (настройки, быстрые действия)

### Блоки серверов

Каждый сервер отображается в отдельной карточке с:
- 🏴 **Флаг страны** сервера
- 🖥️ **Иконка сервера**
- **Название** сервера
- **Описание** сервера
- **Количество communities** на этом сервере

### Карточки шлюзов

Каждая карточка шлюза (компактная) содержит:
- ⚡ **Метка Fast** (для первого шлюза в списке)
- **Название** шлюза
- **Протокол** подключения (vless и т.д.)
- **Пинг** в миллисекундах
- ✓ **Галочка** для активного шлюза

Карточки имеют меньший размер (col-6 col-sm-4 col-md-3 col-lg-2) для компактности.

### Состояния карточки шлюза
- **Неактивная** - белый фон, серая рамка
- **Активная** - синий фон, белый текст, тень
- **Hover** - подъем карточки на 1px, легкая тень

## Использование

### Открытие страницы
Навигация: `Управление → Easy Switch`

URL: `/easy-switch`

### Переключение шлюза
1. Найдите нужный **сервер** в списке
2. В этом сервере найдите нужный **community**
3. Нажмите на карточку желаемого **шлюза этого сервера**
4. Карточка станет синей (активной)
5. Нажмите "Применить изменения" для сохранения

**Важно:** Переключение происходит между шлюзами **внутри одного сервера**. Каждый сервер имеет свой набор шлюзов для каждого community.

### Поиск
Введите в поле поиска:
- Название сервера (например, `SWE-HIPHOST`)
- Номер community (например, `65001:100`)
- Описание (например, `Стриминг`)
- Название шлюза (например, `gateway1`)

## Технические детали

### Компоненты
- **EasySwitchManager.jsx** - главный компонент страницы

### Зависимости
- React hooks (useState, useEffect)
- Tabler Icons для иконок
- API клиент для загрузки данных

### API Endpoints
```javascript
GET /api/server-configs          // Список серверов
GET /api/server-filters/{id}     // Фильтры сервера
GET /api/servers                 // Метаданные серверов
```

### Состояния
```javascript
- loading: boolean               // Загрузка данных
- error: string                  // Текст ошибки
- servers: []                    // Список серверов с communities и gateways
- inventoryServers: []           // Метаданные серверов (флаги, провайдеры)
- activeGateways: {}             // Активные шлюзы (ключ: "serverId:community")
- hasChanges: boolean            // Наличие изменений
- searchQuery: string            // Поисковый запрос
- selectedRule: string           // Выбранное правило фильтрации
- activeTab: string              // Активная вкладка (proxies/providers)
```

## Важные изменения (v2)

### ✅ Исправлено в версии 2.0
- **Все communities отображаются для всех серверов** - больше нет различий в количестве communities между серверами
- **Загрузка названий communities** из справочника `/api/communities`
- **Все gateways сервера** отображаются для каждого community, а не только те, что настроены в filters
- **Бейдж "настроен"** показывает, для каких communities уже есть фильтры
- **Активный gateway берется из filters**, если настроен, иначе выбирается первый

### Логика работы v2
1. Загружается справочник communities → **все одинаковые для всех серверов**
2. Для каждого сервера загружаются его gateways (из `/api/servers` или `server-configs`)
3. Для каждого community показываются **все** gateways этого сервера
4. Из filters берется информация только об **активном** gateway для данного community

## Roadmap

### Планируется добавить
- [ ] Реальные метрики пинга (интеграция с мониторингом)
- [ ] Сохранение изменений на сервер
- [ ] История переключений
- [ ] Групповое переключение
- [ ] Автоматический выбор fastest
- [ ] Уведомления о недоступных серверах
- [ ] Статистика использования
- [ ] Экспорт конфигурации

### В разработке
- [ ] Вкладка "Провайдер прокси"
- [ ] Настройки отображения
- [ ] Быстрые действия

## Отладка

### Проверка данных в консоли
```javascript
// В DevTools Console
console.log('Active Gateways:', activeGateways);
console.log('Communities:', communities);
console.log('All Filters:', allFilters);
```

### Частые проблемы

**Карточки не отображаются**
- Проверьте, что есть серверы в `/api/server-configs`
- Убедитесь, что для серверов есть фильтры в `/api/server-filters/{id}`

**Нет флагов стран**
- Проверьте поле `country` в `/api/servers`
- Должно быть двухбуквенным кодом (US, DE, RU и т.д.)

**Изменения не сохраняются**
- Функция `handleApplyChanges` требует доработки
- Пока что изменения только в локальном состоянии

## Стилизация

Страница использует:
- **Tabler Admin** - основной UI framework
- **Bootstrap 5** - сетка и утилиты
- **Custom styles** - для карточек и анимаций

### Цветовая схема
- Синий (`bg-primary`) - активный сервер
- Желтый (`bg-yellow-lt`) - fastest метка
- Зеленый (`text-success`) - пинг
- Синий светлый (`bg-blue-lt`) - badge community

## Производительность

- Загрузка данных выполняется параллельно
- Фильтрация происходит на клиенте
- Минимум перерисовок при взаимодействии

---

**Версия документа:** 1.0  
**Дата создания:** 2025-12-06  
**Автор:** AI Assistant