# ФУТЕР - ОБЩАЯ ДОКУМЕНТАЦИЯ

## 📋 Оглавление
1. [Архитектура футера](#архитектура-футера)
2. [Структура компонентов](#структура-компонентов)
3. [Визуальная структура](#визуальная-структура)
4. [Зависимости](#зависимости)
5. [Адаптивность](#адаптивность)

---

## Архитектура футера

### Местоположение
- **Файл**: `client/src/components/Layout/Footer.tsx`
- **Используется в**: `MainLayout.tsx`
- **Высота**: Фиксированная 40px
- **Позиционирование**: Нижняя часть экрана, всегда видима

### Назначение
Футер предоставляет пользователю важную системную информацию и статистику в реальном времени:
- Статус подключений к серверам
- Системная информация (CPU, RAM, Disk)
- Информация о текущем пользователе
- Время работы приложения (uptime)
- Версия и копирайт

---

## Структура компонентов

### Основные компоненты футера

#### 1. **ConnectionIndicator** (Индикатор подключения)
- **Назначение**: Отображает статус подключения к серверу
- **Расположение**: Левая часть футера
- **Типы соединений**:
  - **Локальный сервер** - основной WebSocket
  - **Внешний сервер** - внешний сервер авторизации

#### 2. **SystemInfo** (Системная информация)
- **Назначение**: Отображает загрузку системы
- **Расположение**: Левая часть футера (скрыта на мобильных)
- **Показатели**:
  - CPU загрузка (%)
  - RAM использование (%)
  - Disk использование (%)

#### 3. **UserInfo** (Информация о пользователе)
- **Назначение**: Показывает данные текущего пользователя
- **Расположение**: Центральная часть футера
- **Данные**:
  - ID пульта
  - Имя администратора
  - Время работы (uptime)

#### 4. **VersionInfo** (Информация о версии)
- **Назначение**: Копирайт и версия приложения  
- **Расположение**: Правая часть футера
- **Содержимое**:
  - Копирайт "© 2024 NEWPULT"
  - Версия приложения "v1.0.0"

---

## Визуальная структура

```
┌─────────────────────────────────────────────────────────────────────────┐
│                               ФУТЕР (40px)                              │
├─────────────────────────┬─────────────────────────┬─────────────────────┤
│      ЛЕВАЯ ЧАСТЬ        │      ЦЕНТРАЛЬНАЯ        │      ПРАВАЯ         │
│                         │         ЧАСТЬ           │       ЧАСТЬ         │
│ • Подключения:          │ • Пульт: #8             │ • © 2024 NEWPULT    │
│   ✓ Локальный (25ms)    │ • Админ: Иванов И.      │ • v1.0.0            │
│   ✓ Внешний             │ • Uptime: 02:15:30      │                     │
│ • Система:              │                         │                     │
│   CPU: 35% RAM: 45%     │                         │                     │
│   Disk: 75%             │                         │                     │
└─────────────────────────┴─────────────────────────┴─────────────────────┘
```

---

## Зависимости

### Внешние зависимости
```typescript
// React и хуки
import React, { useEffect, useState } from 'react';

// Иконки Lucide
import { Wifi, WifiOff, Activity, HardDrive, Cpu } from 'lucide-react';

// Контексты приложения
import { useWebSocketContext } from '../../contexts/WebSocketContext';
import { useAuth } from '../../hooks/useAuth';

// Внешний WebSocket менеджер
import { externalWsManager } from '../../lib/externalWebSocket';
```

### Используемые данные
- **WebSocketContext**: статус подключения к основному серверу
- **AuthContext**: данные текущего пользователя (ID, имя)
- **ExternalWebSocket**: статус подключения к внешнему серверу
- **Локальное состояние**: пинг, системная информация, uptime

---

## Адаптивность

### Breakpoints и видимость компонентов

#### Mobile (< 768px)
```typescript
// Видимые элементы:
- Индикаторы подключения
- Версия (только "v1.0.0")

// Скрытые элементы:
- Системная информация (CPU, RAM, Disk)
- Информация о пользователе
- Копирайт "© 2024 NEWPULT"
```

#### Tablet (768px - 1024px)
```typescript
// Видимые элементы:
- Индикаторы подключения
- Информация о пользователе (центр)
- Полная правая часть (копирайт + версия)

// Скрытые элементы:
- Системная информация (CPU, RAM, Disk)
```

#### Desktop (> 1024px)
```typescript
// Все элементы видимы:
- Индикаторы подключения
- Системная информация (CPU, RAM, Disk)
- Информация о пользователе
- Копирайт и версия
```

### CSS классы адаптивности
```css
/* Системная информация - только на больших экранах */
.hidden.lg:flex

/* Информация о пользователе - от планшета и выше */
.hidden.md:flex

/* Копирайт - от небольших экранов */
.hidden.sm:inline
```

---

## Особенности реализации

### 1. Обновление данных в реальном времени
- **Пинг**: обновляется каждые 5 секунд
- **Системная информация**: обновляется каждые 10 секунд  
- **Uptime**: обновляется каждую секунду
- **Статусы подключений**: реагируют на изменения в реальном времени

### 2. Эмуляция данных
```typescript
// Пинг (10-50ms)
setPing(Math.floor(Math.random() * 40) + 10);

// CPU загрузка (20-50%)
cpu: Math.floor(Math.random() * 30) + 20

// RAM использование (30-70%)
memory: Math.floor(Math.random() * 40) + 30

// Disk - фиксированное значение
disk: 75
```

### 3. Форматирование времени
```typescript
// Uptime в формате HH:MM:SS
const hours = Math.floor(elapsed / 3600000);
const minutes = Math.floor((elapsed % 3600000) / 60000);
const seconds = Math.floor((elapsed % 60000) / 1000);
setUptime(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
```

### 4. Индикаторы состояния
```typescript
// Подключен: зеленая иконка WiFi
<Wifi className="w-3 h-3 text-green-500" />

// Отключен: красная иконка WiFi с крестом
<WifiOff className="w-3 h-3 text-red-500" />
```

---

## Интеграция с системой

### В MainLayout
```typescript
// Футер размещается внизу layout с фиксированной высотой
<footer className="h-[40px] bg-gray-900 border-t border-gray-700 px-4 flex-shrink-0">
  {/* Футер никогда не сжимается и всегда видим */}
</footer>
```

### Стили
- **Фон**: `bg-gray-900` (темный)
- **Граница**: `border-t border-gray-700` (тонкая серая линия сверху)
- **Отступы**: `px-4` (горизонтальные отступы)
- **Флексбокс**: `flex items-center justify-between` (элементы распределены по краям)

---

## Заключение

Футер является важной частью пользовательского интерфейса, предоставляя:
- **Системную диагностику** в реальном времени
- **Статус подключений** для мониторинга работоспособности
- **Контекстную информацию** о текущем сеансе работы
- **Идентификационные данные** приложения

Компонент спроектирован с учетом адаптивности и оптимально использует ограниченное пространство для отображения максимально полезной информации.

---

**Дата создания**: 2025-01-09  
**Версия документации**: 1.0  
**Компонент**: Footer.tsx