LogBoard/REFRESH_BUTTON_VISIBILITY.md

# Управление кнопками Refresh и Update

## Описание изменений

Реализована функциональность автоматического управления кнопками "Refresh" и "Update" в header в зависимости от состояния AJAX autoupdate.

### Основные изменения:
1. **AJAX autoupdate по умолчанию включен** - изменено значение `ajaxUpdateEnabled` с `false` на `true`
2. **Добавлена кнопка Update** - новая кнопка справа от кнопки WebSocket состояния
3. **Улучшено управление кнопками** - кнопка refresh скрывается, кнопка update показывает состояние

## Логика работы

### Кнопка Refresh
- **AJAX autoupdate включен** → Кнопка refresh **скрыта**
- **AJAX autoupdate выключен** → Кнопка refresh **показана**

### Кнопка Update
- **AJAX autoupdate включен** → Кнопка update **зеленая**
- **AJAX autoupdate выключен** → Кнопка update **красная**
- **Клик по кнопке** → Переключает состояние AJAX autoupdate

## Реализованные функции

### updateRefreshButtonVisibility()
Основная функция для управления видимостью кнопки refresh и состоянием кнопки update:

```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);
}
```

### setAjaxUpdateState(enabled)
Функция для управления визуальным состоянием кнопки update:

```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()` вызывается в следующих местах:

1. **updateAjaxUpdateCheckbox()** - при обновлении состояния чекбокса
2. **enableAjaxLogUpdate()** - при включении AJAX обновления
3. **disableAjaxLogUpdate()** - при выключении AJAX обновления
4. **toggleAjaxLogUpdate()** - при переключении состояния
5. **initAjaxUpdateCheckbox()** - при инициализации чекбокса
6. **initAjaxUpdate()** - при инициализации AJAX update
7. **Обработчик изменения чекбокса** - при изменении состояния пользователем

## CSS стили

### Кнопка Refresh
Кнопка refresh использует класс `.log-refresh-btn` и стили:

```css
.log-refresh-btn {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 6px;
  transition: all 0.2s ease;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
```

### Кнопка Update
Кнопка update использует класс `.ajax-update-btn` и стили:

```css
.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 структура

### Кнопка Refresh
Кнопка refresh находится в header:

```html
<button class="btn btn-small log-refresh-btn" title="Обновить логи и счетчики">
  <i class="fas fa-sync-alt"></i> Refresh
</button>
```

### Кнопка Update
Кнопка update находится в header справа от кнопки WebSocket состояния:

```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>
```

## Автоматическое обновление видимости

Видимость кнопки refresh автоматически обновляется в следующих случаях:

1. **При инициализации AJAX update** - устанавливается начальное состояние
2. **При изменении состояния чекбокса "Auto-update logs"** - пользователь включает/выключает autoupdate
3. **При программном включении/выключении AJAX update** - через функции enable/disable
4. **При переключении состояния через функцию toggleAjaxLogUpdate** - программное переключение

## Преимущества реализации

1. **Улучшенный UX** - пользователь видит только актуальные элементы управления
2. **Логическая связность** - кнопка refresh скрыта, когда она не нужна (при включенном autoupdate)
3. **Автоматическое управление** - не требует ручного вмешательства пользователя
4. **Совместимость** - работает с существующим кодом без нарушений

## Тестирование

Для тестирования функциональности:

1. Откройте приложение в браузере
2. Проверьте, что при включенном чекбоксе "Auto-update logs" кнопка refresh скрыта
3. Отключите чекбокс "Auto-update logs" - кнопка refresh должна появиться
4. Включите чекбокс обратно - кнопка refresh должна скрыться

## Автор

Сергей Антропов  
Сайт: https://devops.org.ru

## Дата реализации

2024 год