brakeconf/gui/app.js

'use strict';

const ENABLE_AUTO_CHECK_THEME = true;

// Перечень кнопок переключения окон
const enumWindowButtons = [
  'btnWindowDevice',
  'btnWindowTesting',
  'btnWindowSettings',
  'btnWindowFirmwareUpdate',
  'btnWindowLog',
  'btnWindowAbout',
];

// Перечень окон программы
const enumWindow = [
  'appWindowDevice',
  'appWindowTesting',
  'appWindowSettings',
  'appWindowFirmwareUpdate',
  'appWindowLog',
  'appWindowAbout',
];

/* main */
window.onload = function () {
  /* Автоматически активирует тему в зависимости от настроек системы */
  if (ENABLE_AUTO_CHECK_THEME) {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      switch_theme('dark');
    } else {
      switch_theme('light');
    }
  }

  document.getElementById('btn_theme_switch').addEventListener('click', switch_theme, false);
  enumWindowButtons.forEach((btn) => {
    document.getElementById(btn).addEventListener('click', ui_window_btn_active, false);
  });

  document.getElementById('btn_app_close').addEventListener('click', close_app);
  document.getElementById('btn_port_refresh').addEventListener('click', refresh_ports);
  document.getElementById('btn_device_connect').addEventListener('click', connect_to_device);
};

/**
 * Изменяет тему приложения
 */
function switch_theme() {
  let app = document.documentElement;
  let theme = app.getAttribute('data-bs-theme');

  if (theme == 'auto' || theme == 'light') {
    app.setAttribute('data-bs-theme', 'dark');
  } else {
    app.setAttribute('data-bs-theme', 'light');
  }
}

/**
 * ...
 */
function ui_window_btn_active(clicked_btn) {
  enumWindowButtons.forEach((btn) => {
    const button = document.getElementById(btn);
    button.classList.remove('active');
  });

  clicked_btn.target.classList.add('active');

  ui_show_window(clicked_btn.target.getAttribute('id').replace('btn', 'app'));
}

/**
 * ...
 */
function ui_show_window(window_name) {
  const current_window = document.getElementById(window_name);

  enumWindow.forEach((w) => {
    let each_window = document.getElementById(w);
    each_window.classList.remove('d-flex');
    each_window.classList.add('d-none');
  });

  current_window.classList.remove('d-none');
}

/**
 * Обновляет список портов
 */
function refresh_ports() {
  const port_selector = document.getElementById('port_selector');

  webui.call('webui_refresh_ports').then((response) => {
    // const ports_array = JSON.parse(response);
    const ports_array = response;

    // Проверка длины массива
    if (ports_array.length > 0) {
      port_selector.innerHTML = '';
    } else {
      alert('Отсутсвуют подключённые устройства!');
      return 1;
    }

    ports_array.ports.forEach((port, index) => {
      if (index == 0) {
        const default_option = document.createElement('option');
        default_option.innerText = 'Выберите порт...';
        default_option.value = 'null';
        default_option.selected = true;

        port_selector.appendChild(default_option);
      }

      const option = document.createElement('option');
      option.innerText = port;
      option.value = port;

      port_selector.appendChild(option);
    });
  });
}

/**
 * Подключается к устройству
 */
function connect_to_device() {
  const port_selector = document.getElementById('port_selector');
  const btn_port_refresh = document.getElementById('btn_port_refresh');
  const btn_device_connect = document.getElementById('btn_device_connect');

  if (port_selector.value == 'null') {
    alert('Необходимо выбрать порт!');
    return;
  }

  webui.call('webui_connect_device', port_selector.value);

  if (btn_device_connect.innerText == 'Подключиться') {
    port_selector.disabled = true;
    btn_port_refresh.disabled = true;

    btn_device_connect.classList.add('btn-success');
    btn_device_connect.classList.remove('btn-primary');
    btn_device_connect.innerText = 'Отключиться';
  } else {
    port_selector.disabled = false;
    btn_port_refresh.disabled = false;

    btn_device_connect.classList.add('btn-primary');
    btn_device_connect.classList.remove('btn-success');
    btn_device_connect.innerText = 'Подключиться';
  }
}

/**
 * Добавляет строку в окно лога
 */
function add_line_log(text) {
  const connection_log_console = document.getElementById('connection_log_console');
  connection_log_console.innerHTML += `${text}\n`;

  /* Автоматически прокручивает лог в конец */
  const sw_connection_log_autoscroll = document.getElementById('sw_connection_log_autoscroll');
  if (sw_connection_log_autoscroll.checked) {
    connection_log_console.scrollTop = connection_log_console.scrollHeight;
  }
}

/**
 *
 */
function close_app() {
  webui.call('close_app', 'a').then((response) => {});
}