desktop/settings.html - main - DATKAI/label_system

desktop/settings.html
74 строки3 KB
DATKAI
Настольное приложение оператора (Electron): трей + настройки сервера
18 июл 2026, 16:51
18 июл 2026, 16:51b1a12f4
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Настройки</title>
<style>
  body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:#f4f6f5;color:#1c2620;padding:22px;}
  h1{font-size:18px;color:#1d7a3a;margin:0 0 4px;}
  p.sub{margin:0 0 18px;color:#6b7a72;font-size:12px;}
  label{display:block;font-size:12px;font-weight:700;color:#6b7a72;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 4px;}
  input[type=text],input[type=number]{width:100%;box-sizing:border-box;padding:10px;border:1px solid #cfd8d2;border-radius:6px;font-size:14px;}
  .row{display:flex;gap:12px;}
  .row .col{flex:1;}
  .chk{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;cursor:pointer;}
  .btns{display:flex;gap:8px;margin-top:22px;}
  button{flex:1;padding:12px;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;}
  .save{background:#1d7a3a;color:#fff;}
  .cancel{background:#e6ebe8;color:#1c2620;}
  .test{margin-top:10px;font-size:12px;color:#6b7a72;min-height:16px;}
  code{background:#e9efeb;padding:1px 5px;border-radius:4px;}
</style>
</head>
<body>
  <h1>⚙ Настройки сервера</h1>
  <p class="sub">Адрес сервера системы этикеток. Меняйте, если сервер переехал.</p>

  <div class="row">
    <div class="col" style="flex:2">
      <label>IP или имя сервера</label>
      <input type="text" id="host" placeholder="192.168.10.2">
    </div>
    <div class="col">
      <label>Порт</label>
      <input type="number" id="port" placeholder="3000">
    </div>
  </div>

  <label class="chk"><input type="checkbox" id="autostart"> Запускать при включении компьютера</label>

  <div class="test" id="test"></div>

  <div class="btns">
    <button class="save" onclick="save()">Сохранить</button>
    <button class="cancel" onclick="window.close()">Отмена</button>
  </div>

<script>
  async function load(){
    const c = await window.electronAPI.getConfig();
    document.getElementById('host').value = c.host || '';
    document.getElementById('port').value = c.port || 3000;
    document.getElementById('autostart').checked = !!c.autostart;
  }
  async function save(){
    const host = document.getElementById('host').value.trim();
    const port = parseInt(document.getElementById('port').value, 10) || 3000;
    const autostart = document.getElementById('autostart').checked;
    const t = document.getElementById('test');
    t.textContent = 'Проверка связи…';
    // пробуем достучаться до /api/health
    try{
      const r = await fetch(`http://${host}:${port}/api/health`, { signal: AbortSignal.timeout(4000) });
      const j = await r.json();
      t.innerHTML = '✅ Сервер найден, версия <code>' + (j.version||'?') + '</code>. Сохраняю…';
    }catch(e){
      t.innerHTML = '⚠ Сервер не ответил, но настройки сохранены. Проверьте, что сервер запущен.';
    }
    await window.electronAPI.saveConfig({ host, port, autostart });
    setTimeout(() => window.close(), 900);
  }
  load();
</script>
</body>
</html>