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:

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:

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 и стили:

.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 и стили:

.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:

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

Кнопка Update

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

<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 год