feat: улучшения UI/UX LogBoard+
- Добавлена кнопка Update для управления AJAX auto-update - AJAX auto-update включен по умолчанию - Улучшено управление видимостью кнопки Refresh - Переупорядочены кнопки в header (Update, Refresh) - Унифицированы стили кнопок (высота, шрифт, границы) - Добавлен hover эффект для кнопки options с цветом warning - Позиционирование help-btn в свернутом sidebar - Уменьшена ширина свернутого sidebar на 30% - Добавлена логика разворачивания sidebar при клике на options - Отображение внешнего порта в статусе контейнера - Показ 'standalone' для контейнеров без проекта - Обновлена документация Автор: Сергей Антропов Сайт: https://devops.org.ru
This commit is contained in:
217
AJAX_UPDATE_ENHANCEMENTS.md
Normal file
217
AJAX_UPDATE_ENHANCEMENTS.md
Normal file
@@ -0,0 +1,217 @@
|
||||
# Улучшения AJAX Auto-update
|
||||
|
||||
## Описание изменений
|
||||
|
||||
Реализованы значительные улучшения системы AJAX auto-update для LogBoard+.
|
||||
|
||||
## Основные изменения
|
||||
|
||||
### 1. AJAX autoupdate по умолчанию включен
|
||||
|
||||
**Изменение:** Значение `ajaxUpdateEnabled` изменено с `false` на `true`
|
||||
|
||||
**Файл:** `templates/index.html`
|
||||
```javascript
|
||||
// Было:
|
||||
let ajaxUpdateEnabled = false;
|
||||
|
||||
// Стало:
|
||||
let ajaxUpdateEnabled = true; // По умолчанию включен
|
||||
```
|
||||
|
||||
**Преимущества:**
|
||||
- Пользователи сразу получают автоматическое обновление логов
|
||||
- Не нужно вручную включать функцию при каждом запуске
|
||||
- Улучшенный пользовательский опыт
|
||||
|
||||
### 2. Добавлена кнопка Update
|
||||
|
||||
**Новая функциональность:** Кнопка update в header для управления AJAX autoupdate
|
||||
|
||||
**Расположение:** Справа от кнопки WebSocket состояния
|
||||
|
||||
**Визуальные состояния:**
|
||||
- **Зеленая** - AJAX autoupdate включен
|
||||
- **Красная** - AJAX autoupdate выключен
|
||||
|
||||
**Функциональность:**
|
||||
- Клик по кнопке переключает состояние AJAX autoupdate
|
||||
- Автоматическое обновление цвета при изменении состояния
|
||||
- Интуитивно понятное управление
|
||||
|
||||
### 3. Улучшенное управление кнопками
|
||||
|
||||
**Логика работы:**
|
||||
- **AJAX autoupdate включен** → Кнопка refresh скрыта, кнопка update зеленая
|
||||
- **AJAX autoupdate выключен** → Кнопка refresh показана, кнопка update красная
|
||||
|
||||
## Техническая реализация
|
||||
|
||||
### CSS стили
|
||||
|
||||
```css
|
||||
/* Кнопка состояния AJAX Update */
|
||||
.ajax-update-btn {
|
||||
background: var(--chip);
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-family: inherit;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.ajax-update-btn.ajax-on {
|
||||
background: #7ea855; /* Зеленый цвет */
|
||||
color: white;
|
||||
border-color: #7ea855;
|
||||
}
|
||||
|
||||
.ajax-update-btn.ajax-off {
|
||||
background: #f7768e; /* Красный цвет */
|
||||
color: white;
|
||||
border-color: #f7768e;
|
||||
}
|
||||
|
||||
.ajax-update-btn:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
```
|
||||
|
||||
### HTML структура
|
||||
|
||||
```html
|
||||
<button id="wsstate" class="ws-status-btn">ws: off</button>
|
||||
<button id="ajaxUpdateBtn" class="ajax-update-btn" title="AJAX Auto-update">update</button>
|
||||
<button class="btn btn-small log-refresh-btn" title="Обновить логи и счетчики">
|
||||
<i class="fas fa-sync-alt"></i> Refresh
|
||||
</button>
|
||||
```
|
||||
|
||||
### JavaScript функции
|
||||
|
||||
#### setAjaxUpdateState(enabled)
|
||||
```javascript
|
||||
function setAjaxUpdateState(enabled) {
|
||||
if (els.ajaxUpdateBtn) {
|
||||
// Удаляем все классы состояний
|
||||
els.ajaxUpdateBtn.classList.remove('ajax-on', 'ajax-off');
|
||||
|
||||
// Добавляем соответствующий класс
|
||||
if (enabled) {
|
||||
els.ajaxUpdateBtn.classList.add('ajax-on');
|
||||
els.ajaxUpdateBtn.textContent = 'update';
|
||||
} else {
|
||||
els.ajaxUpdateBtn.classList.add('ajax-off');
|
||||
els.ajaxUpdateBtn.textContent = 'update';
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Обновленная updateRefreshButtonVisibility()
|
||||
```javascript
|
||||
function updateRefreshButtonVisibility() {
|
||||
const refreshButtons = document.querySelectorAll('.log-refresh-btn');
|
||||
refreshButtons.forEach(btn => {
|
||||
if (ajaxUpdateEnabled) {
|
||||
// Если ajax autoupdate включен, скрываем кнопку refresh
|
||||
btn.style.display = 'none';
|
||||
} else {
|
||||
// Если ajax autoupdate выключен, показываем кнопку refresh
|
||||
btn.style.display = 'inline-flex';
|
||||
}
|
||||
});
|
||||
|
||||
// Обновляем состояние кнопки update
|
||||
setAjaxUpdateState(ajaxUpdateEnabled);
|
||||
}
|
||||
```
|
||||
|
||||
#### Обработчик клика
|
||||
```javascript
|
||||
// Обработчик для кнопки update (AJAX autoupdate toggle)
|
||||
if (els.ajaxUpdateBtn) {
|
||||
els.ajaxUpdateBtn.addEventListener('click', () => {
|
||||
toggleAjaxLogUpdate();
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Интеграция с существующим кодом
|
||||
|
||||
### Обновленные функции
|
||||
1. **enableAjaxLogUpdate()** - обновляет состояние кнопки update
|
||||
2. **disableAjaxLogUpdate()** - обновляет состояние кнопки update
|
||||
3. **toggleAjaxLogUpdate()** - обновляет состояние кнопки update
|
||||
4. **initAjaxUpdateCheckbox()** - устанавливает правильное начальное состояние
|
||||
5. **initAjaxUpdate()** - инициализирует состояние кнопки update
|
||||
|
||||
### Автоматическое обновление состояния
|
||||
Состояние кнопки update автоматически обновляется в следующих случаях:
|
||||
- При инициализации AJAX update
|
||||
- При изменении состояния чекбокса "Auto-update logs"
|
||||
- При программном включении/выключении AJAX update
|
||||
- При переключении состояния через функцию toggleAjaxLogUpdate
|
||||
- При клике по кнопке update
|
||||
|
||||
## Преимущества реализации
|
||||
|
||||
### 1. Улучшенный UX
|
||||
- Интуитивно понятное управление AJAX autoupdate
|
||||
- Визуальная обратная связь о состоянии системы
|
||||
- Быстрый доступ к управлению через кнопку в header
|
||||
|
||||
### 2. Логическая связность
|
||||
- Кнопка refresh скрыта, когда она не нужна
|
||||
- Кнопка update показывает актуальное состояние
|
||||
- Единообразное поведение всех элементов управления
|
||||
|
||||
### 3. Автоматическое управление
|
||||
- Не требует ручного вмешательства пользователя
|
||||
- Состояние синхронизировано между всеми элементами
|
||||
- Корректная работа при всех сценариях использования
|
||||
|
||||
### 4. Совместимость
|
||||
- Работает с существующим кодом без нарушений
|
||||
- Поддерживает все режимы просмотра (single-view, multi-view)
|
||||
- Совместимо с фильтрацией и настройками уровней логирования
|
||||
|
||||
## Тестирование
|
||||
|
||||
### Сценарии тестирования
|
||||
|
||||
1. **Начальное состояние**
|
||||
- При загрузке страницы AJAX autoupdate должен быть включен
|
||||
- Кнопка update должна быть зеленой
|
||||
- Кнопка refresh должна быть скрыта
|
||||
|
||||
2. **Переключение через кнопку update**
|
||||
- Клик по кнопке update должен переключить состояние
|
||||
- Цвет кнопки должен измениться (зеленый ↔ красный)
|
||||
- Видимость кнопки refresh должна измениться
|
||||
|
||||
3. **Переключение через чекбокс**
|
||||
- Изменение состояния чекбокса "Auto-update logs" должно обновить кнопку update
|
||||
- Состояние должно синхронизироваться между всеми элементами
|
||||
|
||||
4. **Программное управление**
|
||||
- Вызов функций enable/disable должен обновить UI
|
||||
- Состояние должно корректно отображаться
|
||||
|
||||
## Автор
|
||||
|
||||
Сергей Антропов
|
||||
Сайт: https://devops.org.ru
|
||||
|
||||
## Дата реализации
|
||||
|
||||
2024 год
|
||||
Reference in New Issue
Block a user