597 lines
24 KiB
JavaScript
597 lines
24 KiB
JavaScript
// ButtonTask v2 — web configurator client logic
|
|
|
|
const $ = (sel) => document.querySelector(sel);
|
|
const $$ = (sel) => Array.from(document.querySelectorAll(sel));
|
|
|
|
async function api(method, path, body) {
|
|
const opts = { method, headers: {} };
|
|
if (body !== undefined) {
|
|
opts.headers["Content-Type"] = "application/json";
|
|
opts.body = JSON.stringify(body);
|
|
}
|
|
const r = await fetch(path, opts);
|
|
if (r.status === 401) {
|
|
window.location.href = "/login?next=" + encodeURIComponent(window.location.pathname);
|
|
throw new Error("auth required");
|
|
}
|
|
if (!r.ok) {
|
|
let msg = `${method} ${path} -> ${r.status}`;
|
|
try { const j = await r.json(); if (j.error) msg = j.error; } catch (e) {}
|
|
throw new Error(msg);
|
|
}
|
|
return r.headers.get("content-type")?.includes("application/json")
|
|
? r.json() : r.text();
|
|
}
|
|
|
|
function flash(text, isError) {
|
|
const t = document.createElement("div");
|
|
t.className = "toast" + (isError ? " error" : "");
|
|
t.textContent = text;
|
|
document.body.appendChild(t);
|
|
setTimeout(() => t.remove(), 2800);
|
|
}
|
|
|
|
// ---------- Tabs ----------
|
|
$$(".tab").forEach(tab => {
|
|
tab.addEventListener("click", () => {
|
|
$$(".tab").forEach(t => t.classList.remove("active"));
|
|
$$(".panel").forEach(p => p.classList.remove("active"));
|
|
tab.classList.add("active");
|
|
$("#tab-" + tab.dataset.tab).classList.add("active");
|
|
if (tab.dataset.tab === "network") loadNetwork();
|
|
if (tab.dataset.tab === "system") loadSystem();
|
|
if (tab.dataset.tab === "update") { loadUpdateStatus(); loadVersionList(); }
|
|
});
|
|
});
|
|
|
|
// ---------- Layout ----------
|
|
$("#save-layout")?.addEventListener("click", async () => {
|
|
try {
|
|
await api("PUT", "/api/layout", {
|
|
mode: $("#layout-mode").value,
|
|
columns: parseInt($("#layout-columns").value, 10),
|
|
spacing: parseInt($("#layout-spacing").value, 10),
|
|
showLabels: $("#layout-show-labels").checked,
|
|
});
|
|
flash("Расположение сохранено");
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
// ---------- Background ----------
|
|
function toggleBgType() {
|
|
const wrap = $("#bg-form");
|
|
if (!wrap) return;
|
|
const t = $("#bg-type")?.value || "gradient";
|
|
wrap.classList.remove("mode-gradient", "mode-solid", "mode-image");
|
|
wrap.classList.add("mode-" + t);
|
|
}
|
|
$("#bg-type")?.addEventListener("change", toggleBgType);
|
|
toggleBgType();
|
|
|
|
$("#save-bg")?.addEventListener("click", async () => {
|
|
try {
|
|
await api("PUT", "/api/background", {
|
|
type: $("#bg-type").value,
|
|
color1: $("#bg-c1").value,
|
|
color2: $("#bg-c2").value,
|
|
animated: $("#bg-animated").checked,
|
|
imagePath: $("#bg-image").value,
|
|
});
|
|
flash("Фон сохранён");
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
// ---------- Feedback (borders) ----------
|
|
function syncFeedbackPreview() {
|
|
const ok = $("#fb-preview-ok"), err = $("#fb-preview-error");
|
|
if (!ok) return;
|
|
const okColor = $("#fb-ok-color").value;
|
|
const errColor = $("#fb-error-color").value;
|
|
const okW = $("#fb-ok-width").value;
|
|
const errW = $("#fb-error-width").value;
|
|
const glow = $("#fb-glow").value;
|
|
$("#fb-ok-width-val").textContent = okW;
|
|
$("#fb-error-width-val").textContent = errW;
|
|
$("#fb-glow-val").textContent = glow;
|
|
ok.style.boxShadow = `0 0 ${glow}px ${Math.round(glow/2)}px ${okColor}`;
|
|
ok.style.border = `${okW}px solid ${okColor}`;
|
|
err.style.boxShadow = `0 0 ${glow}px ${Math.round(glow/2)}px ${errColor}`;
|
|
err.style.border = `${errW}px solid ${errColor}`;
|
|
}
|
|
["fb-ok-color", "fb-error-color", "fb-ok-width", "fb-error-width", "fb-glow"]
|
|
.forEach(id => $("#" + id)?.addEventListener("input", syncFeedbackPreview));
|
|
syncFeedbackPreview();
|
|
|
|
$("#save-feedback")?.addEventListener("click", async () => {
|
|
try {
|
|
await api("PUT", "/api/feedback", {
|
|
okColor: $("#fb-ok-color").value,
|
|
errorColor: $("#fb-error-color").value,
|
|
okWidth: parseInt($("#fb-ok-width").value, 10),
|
|
errorWidth: parseInt($("#fb-error-width").value, 10),
|
|
glowRadius: parseInt($("#fb-glow").value, 10),
|
|
});
|
|
flash("Обводка сохранена");
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
// ---------- Icons ----------
|
|
$("#upload-icon")?.addEventListener("click", async () => {
|
|
const file = $("#icon-file").files[0];
|
|
if (!file) { flash("Выберите файл", true); return; }
|
|
const fd = new FormData();
|
|
fd.append("file", file);
|
|
const r = await fetch("/api/icons", { method: "POST", body: fd });
|
|
if (!r.ok) { flash("Ошибка загрузки", true); return; }
|
|
location.reload();
|
|
});
|
|
|
|
$$(".icon-tile .del").forEach(btn => {
|
|
btn.addEventListener("click", async (e) => {
|
|
const name = e.target.dataset.name;
|
|
if (!confirm(`Удалить ${name}?`)) return;
|
|
await api("DELETE", `/api/icons/${encodeURIComponent(name)}`);
|
|
location.reload();
|
|
});
|
|
});
|
|
|
|
// ---------- Password ----------
|
|
$("#save-password")?.addEventListener("click", async () => {
|
|
const pwd = $("#new-password").value;
|
|
if (!pwd) { flash("Введите пароль", true); return; }
|
|
await api("PUT", "/api/settings", { password: pwd });
|
|
flash("Пароль сохранён. Действует со следующего входа.");
|
|
$("#new-password").value = "";
|
|
});
|
|
|
|
// ---------- Buttons drag-drop ----------
|
|
const list = $("#buttons-list");
|
|
if (list && window.Sortable) {
|
|
new Sortable(list, {
|
|
handle: ".handle",
|
|
animation: 150,
|
|
onEnd: async () => {
|
|
const order = Array.from(list.children).map(li => li.dataset.id);
|
|
await api("POST", "/api/buttons/reorder", { order });
|
|
flash("Порядок сохранён");
|
|
},
|
|
});
|
|
}
|
|
|
|
// ---------- Buttons CRUD ----------
|
|
const dlg = $("#btn-dialog");
|
|
const form = $("#btn-form");
|
|
|
|
function syncHoldRow() {
|
|
const mode = $("#b-trigger-mode").value;
|
|
$("#b-hold-row").style.display = mode === "click" ? "none" : "";
|
|
$("#b-hold-val").textContent = $("#b-hold").value;
|
|
}
|
|
|
|
function openDialogFor(btn) {
|
|
$("#btn-dialog-title").textContent = btn ? "Редактирование" : "Новая кнопка";
|
|
$("#b-id").value = btn?.id || "";
|
|
$("#b-label").value = btn?.label || "";
|
|
$("#b-icon").value = btn?.iconPath || "";
|
|
$("#b-type").value = btn?.action?.type || "http_get";
|
|
$("#b-url").value = btn?.action?.url || "";
|
|
$("#b-success").value = btn?.feedback?.successText || "";
|
|
$("#b-error").value = btn?.feedback?.errorText || "Ошибка";
|
|
$("#b-pending").value = btn?.feedback?.pendingText ?? "...";
|
|
$("#b-color").value = btn?.color || "#7b007b";
|
|
$("#b-trigger-mode").value = btn?.trigger?.mode || "hold";
|
|
$("#b-hold").value = btn?.trigger?.holdMs || 800;
|
|
syncHoldRow();
|
|
dlg.showModal();
|
|
}
|
|
|
|
$("#b-trigger-mode")?.addEventListener("change", syncHoldRow);
|
|
$("#b-hold")?.addEventListener("input", syncHoldRow);
|
|
|
|
$("#add-btn")?.addEventListener("click", () => openDialogFor(null));
|
|
|
|
$$(".buttons-list .edit").forEach(btn => {
|
|
btn.addEventListener("click", async (e) => {
|
|
const id = e.target.dataset.id;
|
|
const cfg = await api("GET", "/api/config");
|
|
const b = cfg.buttons.find(x => x.id === id);
|
|
if (b) openDialogFor(b);
|
|
});
|
|
});
|
|
|
|
$$(".buttons-list .del").forEach(btn => {
|
|
btn.addEventListener("click", async (e) => {
|
|
const id = e.target.dataset.id;
|
|
if (!confirm("Удалить кнопку?")) return;
|
|
await api("DELETE", `/api/buttons/${encodeURIComponent(id)}`);
|
|
location.reload();
|
|
});
|
|
});
|
|
|
|
form?.addEventListener("submit", async (e) => {
|
|
if (e.submitter && e.submitter.value === "cancel") return;
|
|
e.preventDefault();
|
|
const id = $("#b-id").value;
|
|
const payload = {
|
|
label: $("#b-label").value,
|
|
iconPath: $("#b-icon").value,
|
|
actionType: $("#b-type").value,
|
|
url: $("#b-url").value,
|
|
successText: $("#b-success").value,
|
|
errorText: $("#b-error").value,
|
|
pendingText: $("#b-pending").value || "...",
|
|
color: $("#b-color").value,
|
|
triggerMode: $("#b-trigger-mode").value,
|
|
holdMs: parseInt($("#b-hold").value, 10),
|
|
};
|
|
if (id) await api("PUT", `/api/buttons/${encodeURIComponent(id)}`, payload);
|
|
else await api("POST", "/api/buttons", payload);
|
|
dlg.close();
|
|
location.reload();
|
|
});
|
|
|
|
// ---------- Network ----------
|
|
function toggleStatic() {
|
|
const wrap = $("#net-mode")?.closest(".grid-form");
|
|
if (!wrap) return;
|
|
wrap.classList.toggle("show-static", $("#net-mode").value === "static");
|
|
}
|
|
$("#net-mode")?.addEventListener("change", toggleStatic);
|
|
|
|
async function loadNetwork() {
|
|
const statusEl = $("#net-status");
|
|
const ifaceSel = $("#net-iface");
|
|
if (!statusEl) return;
|
|
statusEl.textContent = "Загрузка состояния…";
|
|
try {
|
|
const data = await api("GET", "/api/network");
|
|
const devs = data.devices || [];
|
|
if (!devs.length) {
|
|
statusEl.innerHTML = "<p class='muted'>Ethernet-интерфейсы не найдены (или nmcli недоступен).</p>";
|
|
} else {
|
|
statusEl.innerHTML = devs.map(d => {
|
|
const up = (d.state || "").includes("connected") && !(d.state || "").includes("dis");
|
|
const badge = up ? "<span class='badge up'>up</span>" : "<span class='badge down'>down</span>";
|
|
const addr = (d.addresses || []).join(", ") || "—";
|
|
return `<div class="net-device">
|
|
<div class="name">${d.device} ${badge}</div>
|
|
<div class="detail">Соединение: ${d.connection || "—"}</div>
|
|
<div class="detail">IP: ${addr}</div>
|
|
<div class="detail">Шлюз: ${d.gateway || "—"} · DNS: ${(d.dns||[]).join(", ") || "—"}</div>
|
|
</div>`;
|
|
}).join("");
|
|
}
|
|
if (ifaceSel) {
|
|
const prev = ifaceSel.value;
|
|
ifaceSel.innerHTML = devs.map(d => `<option value="${d.device}">${d.device}</option>`).join("");
|
|
if (prev) ifaceSel.value = prev;
|
|
}
|
|
} catch (e) {
|
|
statusEl.innerHTML = `<p class='warn'>${e.message}</p>`;
|
|
}
|
|
}
|
|
|
|
$("#net-refresh")?.addEventListener("click", loadNetwork);
|
|
|
|
$("#net-apply")?.addEventListener("click", async () => {
|
|
const mode = $("#net-mode").value;
|
|
const payload = { iface: $("#net-iface").value, mode };
|
|
if (mode === "static") {
|
|
payload.address = $("#net-address").value.trim();
|
|
payload.prefix = parseInt($("#net-prefix").value, 10);
|
|
payload.gateway = $("#net-gateway").value.trim();
|
|
payload.dns = $("#net-dns").value.trim();
|
|
}
|
|
if (!payload.iface) { flash("Выберите интерфейс", true); return; }
|
|
if (!confirm("Применить сетевые настройки? Соединение может прерваться.")) return;
|
|
try {
|
|
await api("PUT", "/api/network", payload);
|
|
flash("Сетевые настройки применены");
|
|
setTimeout(loadNetwork, 1500);
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
// ---------- System ----------
|
|
let systemPollTimer = null;
|
|
|
|
function formatKb(kb) {
|
|
if (kb >= 1 << 20) return (kb / (1 << 20)).toFixed(1) + " ГБ";
|
|
if (kb >= 1 << 10) return (kb / (1 << 10)).toFixed(0) + " МБ";
|
|
return kb + " КБ";
|
|
}
|
|
|
|
function renderSystemStats(s) {
|
|
const el = $("#sys-stats");
|
|
if (!el) return;
|
|
const cpu = s.cpu_percent != null ? s.cpu_percent + "%" : "—";
|
|
const mem = s.memory || {};
|
|
el.innerHTML = `
|
|
<div class="sys-grid">
|
|
<div class="sys-tile"><span>Часы</span><strong>${s.clock || "—"}</strong></div>
|
|
<div class="sys-tile"><span>Аптайм</span><strong>${s.uptime || "—"}</strong></div>
|
|
<div class="sys-tile"><span>CPU</span><strong>${cpu}</strong></div>
|
|
<div class="sys-tile"><span>Память</span><strong>${mem.used_percent ?? "—"}%</strong>
|
|
<small>${formatKb(mem.used_kb || 0)} / ${formatKb(mem.total_kb || 0)}</small></div>
|
|
</div>`;
|
|
const clockEl = $("#sys-clock");
|
|
if (clockEl && s.clock) clockEl.textContent = "Текущее время: " + s.clock;
|
|
}
|
|
|
|
function renderButtonLog(entries) {
|
|
const body = $("#sys-log-body");
|
|
if (!body) return;
|
|
if (!entries || !entries.length) {
|
|
body.innerHTML = '<tr><td colspan="6" class="empty-cell">Нажатий пока нет</td></tr>';
|
|
return;
|
|
}
|
|
body.innerHTML = entries.map(e => {
|
|
const ok = e.ok;
|
|
const result = ok
|
|
? (e.http ? `OK ${e.http}` : "OK") + (e.message ? ` — ${e.message}` : "")
|
|
: (e.http ? `ERR ${e.http}` : "ERR") + (e.message ? ` — ${e.message}` : "");
|
|
return `
|
|
<tr>
|
|
<td>${e.ts || "—"}</td>
|
|
<td>${e.label || "—"}</td>
|
|
<td>${e.method || "—"}</td>
|
|
<td class="log-path" title="${e.url || ""}">${e.url || "—"}</td>
|
|
<td class="${ok ? "log-ok" : "log-err"}">${result}</td>
|
|
<td>${e.ms != null ? e.ms : "—"}</td>
|
|
</tr>`;
|
|
}).join("");
|
|
}
|
|
|
|
function renderAccessStatus(s) {
|
|
const el = $("#access-status");
|
|
if (!el) return;
|
|
el.innerHTML = `
|
|
<div class="sys-grid">
|
|
<div class="sys-tile"><span>Ping / ICMP</span><strong>${s.icmp === "off" ? "отключён" : "включён"}</strong></div>
|
|
<div class="sys-tile"><span>SSH</span><strong>${s.ssh === "on" ? "включён" : "отключён"}</strong></div>
|
|
<div class="sys-tile"><span>Порт SSH</span><strong>${s.sshPort || "—"}</strong></div>
|
|
<div class="sys-tile"><span>Порт веба</span><strong>${s.webPort || "—"}</strong></div>
|
|
</div>`;
|
|
const setIfIdle = (selector, value) => {
|
|
const input = $(selector);
|
|
if (!input || value == null || input.dataset.touched || document.activeElement === input) return;
|
|
input.value = value;
|
|
};
|
|
setIfIdle("#ssh-port", s.sshPort);
|
|
setIfIdle("#web-port", s.webPort);
|
|
}
|
|
|
|
async function loadAccess() {
|
|
try {
|
|
const s = await api("GET", "/api/system/access");
|
|
renderAccessStatus(s);
|
|
} catch (e) {
|
|
const el = $("#access-status");
|
|
if (el) el.innerHTML = `<p class="warn">${e.message}</p>`;
|
|
}
|
|
}
|
|
|
|
async function setAccess(action, value) {
|
|
const r = await api("POST", "/api/system/access", { action, value });
|
|
if (action !== "webPort") renderAccessStatus(r);
|
|
return r;
|
|
}
|
|
|
|
async function loadSystem() {
|
|
try {
|
|
const [stats, blog] = await Promise.all([
|
|
api("GET", "/api/system/stats"),
|
|
api("GET", "/api/system/button-log"),
|
|
]);
|
|
renderSystemStats(stats);
|
|
renderButtonLog(blog.entries);
|
|
const dtInput = $("#sys-datetime");
|
|
if (dtInput && stats.clock && !dtInput.dataset.touched) {
|
|
dtInput.value = stats.clock.replace(" ", "T").slice(0, 16);
|
|
}
|
|
loadAccess();
|
|
} catch (e) {
|
|
const el = $("#sys-stats");
|
|
if (el) el.textContent = e.message;
|
|
}
|
|
if (!systemPollTimer) {
|
|
systemPollTimer = setInterval(() => {
|
|
if ($("#tab-system")?.classList.contains("active")) loadSystem();
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
$("#sys-datetime")?.addEventListener("input", (e) => {
|
|
e.target.dataset.touched = "1";
|
|
});
|
|
$("#ssh-port")?.addEventListener("input", (e) => {
|
|
e.target.dataset.touched = "1";
|
|
});
|
|
$("#web-port")?.addEventListener("input", (e) => {
|
|
e.target.dataset.touched = "1";
|
|
});
|
|
|
|
$("#sys-set-time")?.addEventListener("click", async () => {
|
|
const raw = $("#sys-datetime")?.value;
|
|
if (!raw) { flash("Укажите дату и время", true); return; }
|
|
const dt = raw.replace("T", " ") + ":00";
|
|
try {
|
|
const r = await api("POST", "/api/system/time", { datetime: dt });
|
|
flash("Время установлено: " + r.datetime);
|
|
const dtInput = $("#sys-datetime");
|
|
if (dtInput) delete dtInput.dataset.touched;
|
|
loadSystem();
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
$("#sys-reboot")?.addEventListener("click", async () => {
|
|
if (!confirm("Перезагрузить устройство? Соединение будет разорвано.")) return;
|
|
try {
|
|
await api("POST", "/api/system/reboot");
|
|
flash("Перезагрузка…");
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
$("#access-refresh")?.addEventListener("click", loadAccess);
|
|
$("#icmp-on")?.addEventListener("click", async () => {
|
|
try { await setAccess("icmp", "on"); flash("ICMP включён"); } catch (e) { flash(e.message, true); }
|
|
});
|
|
$("#icmp-off")?.addEventListener("click", async () => {
|
|
if (!confirm("Отключить ответы на ping?")) return;
|
|
try { await setAccess("icmp", "off"); flash("ICMP отключён"); } catch (e) { flash(e.message, true); }
|
|
});
|
|
$("#ssh-on")?.addEventListener("click", async () => {
|
|
try { await setAccess("ssh", "on"); flash("SSH включён"); } catch (e) { flash(e.message, true); }
|
|
});
|
|
$("#ssh-off")?.addEventListener("click", async () => {
|
|
if (!confirm("Отключить SSH? Восстановить доступ можно будет через веб или локально.")) return;
|
|
try { await setAccess("ssh", "off"); flash("SSH отключён"); } catch (e) { flash(e.message, true); }
|
|
});
|
|
$("#save-ssh-port")?.addEventListener("click", async () => {
|
|
const port = parseInt($("#ssh-port").value, 10);
|
|
if (!port || port < 1 || port > 65535) { flash("Некорректный порт SSH", true); return; }
|
|
if (!confirm(`Сменить порт SSH на ${port}?`)) return;
|
|
try {
|
|
await setAccess("sshPort", port);
|
|
delete $("#ssh-port").dataset.touched;
|
|
flash("Порт SSH обновлён");
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
$("#save-web-port")?.addEventListener("click", async () => {
|
|
const port = parseInt($("#web-port").value, 10);
|
|
if (!port || port < 1 || port > 65535) { flash("Некорректный веб-порт", true); return; }
|
|
if (!confirm(`Сменить веб-порт на ${port}? Веб-сервис перезапустится.`)) return;
|
|
try {
|
|
await setAccess("webPort", port);
|
|
delete $("#web-port").dataset.touched;
|
|
flash(`Веб-порт обновлён: ${port}. Откройте страницу на новом порту.`);
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
$("#sys-refresh")?.addEventListener("click", loadSystem);
|
|
|
|
// ---------- Update / OTA ----------
|
|
let updatePollTimer = null;
|
|
|
|
function formatBytes(n) {
|
|
if (n >= 1 << 20) return (n / (1 << 20)).toFixed(1) + " МБ";
|
|
if (n >= 1 << 10) return (n / (1 << 10)).toFixed(0) + " КБ";
|
|
return n + " Б";
|
|
}
|
|
|
|
function renderVersionList(versions) {
|
|
const ul = $("#version-list");
|
|
if (!ul) return;
|
|
if (!versions || !versions.length) {
|
|
ul.innerHTML = '<li class="empty">Версий нет</li>';
|
|
return;
|
|
}
|
|
ul.innerHTML = versions.map(v => {
|
|
const badges = [];
|
|
if (v.current) badges.push('<span class="badge current">текущая</span>');
|
|
if (v.previous) badges.push('<span class="badge prev">откат</span>');
|
|
const canDelete = !v.current && !v.previous;
|
|
const created = v.created ? v.created.replace("T", " ").slice(0, 16) : "";
|
|
return `
|
|
<li class="version-item${v.current ? " is-current" : ""}">
|
|
<div class="version-head">
|
|
<strong>${v.version}</strong>
|
|
${badges.join(" ")}
|
|
</div>
|
|
<small class="version-meta">${v.name}${created ? " · " + created : ""} · ${formatBytes(v.size_bytes || 0)}</small>
|
|
<button class="del icon-only version-del" data-name="${v.name}" ${canDelete ? "" : "disabled"} title="Удалить">✕</button>
|
|
</li>`;
|
|
}).join("");
|
|
ul.querySelectorAll(".version-del").forEach(btn => {
|
|
btn.addEventListener("click", async () => {
|
|
const name = btn.dataset.name;
|
|
if (!name || !confirm(`Удалить версию ${name}?`)) return;
|
|
try {
|
|
await api("DELETE", `/api/update/versions/${encodeURIComponent(name)}`);
|
|
flash(`Версия ${name} удалена`);
|
|
loadVersionList();
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
});
|
|
}
|
|
|
|
async function loadVersionList() {
|
|
try {
|
|
const data = await api("GET", "/api/update/versions");
|
|
renderVersionList(data.versions);
|
|
} catch (e) {
|
|
const ul = $("#version-list");
|
|
if (ul) ul.innerHTML = `<li class="empty">${e.message}</li>`;
|
|
}
|
|
}
|
|
|
|
$("#versions-refresh")?.addEventListener("click", loadVersionList);
|
|
|
|
function renderUpdateStatus(s) {
|
|
const el = $("#update-status");
|
|
if (!el) return;
|
|
const st = (s.status && s.status.state) || "idle";
|
|
const map = {
|
|
idle: ["Статус: готово к обновлению", ""],
|
|
staging: ["Распаковка пакета…", "busy"],
|
|
switching: ["Переключение версии…", "busy"],
|
|
health_check: ["Проверка работоспособности…", "busy"],
|
|
success: ["Обновление успешно применено", "ok"],
|
|
rolledback: ["Запуск новой версии не удался — выполнен откат", "fail"],
|
|
rollback_done: ["Откат выполнен", "ok"],
|
|
error: ["Ошибка обновления", "fail"],
|
|
};
|
|
const [text, cls] = map[st] || [`Статус: ${st}`, ""];
|
|
el.className = "update-status " + cls;
|
|
el.textContent = (s.status && s.status.message) ? `${text} — ${s.status.message}` : text;
|
|
if (s.current) {
|
|
$("#update-version").textContent = s.current.version || "—";
|
|
$("#update-path").textContent = s.current.path || "—";
|
|
}
|
|
if (st === "success" || st === "rollback_done") loadVersionList();
|
|
const busy = ["staging", "switching", "health_check"].includes(st);
|
|
if (busy && !updatePollTimer) {
|
|
updatePollTimer = setInterval(loadUpdateStatus, 2000);
|
|
} else if (!busy && updatePollTimer) {
|
|
clearInterval(updatePollTimer); updatePollTimer = null;
|
|
}
|
|
}
|
|
|
|
async function loadUpdateStatus() {
|
|
try {
|
|
const s = await api("GET", "/api/update/status");
|
|
renderUpdateStatus(s);
|
|
} catch (e) {
|
|
const el = $("#update-status");
|
|
if (el) { el.className = "update-status fail"; el.textContent = e.message; }
|
|
}
|
|
}
|
|
|
|
$("#update-upload")?.addEventListener("click", async () => {
|
|
const file = $("#update-file").files[0];
|
|
if (!file) { flash("Выберите пакет .tar.gz", true); return; }
|
|
if (!confirm("Загрузить и применить обновление? Сервис будет перезапущен.")) return;
|
|
const fd = new FormData();
|
|
fd.append("file", file);
|
|
try {
|
|
const r = await fetch("/api/update", { method: "POST", body: fd });
|
|
if (!r.ok) {
|
|
let msg = "Ошибка загрузки";
|
|
try { const j = await r.json(); if (j.error) msg = j.error; } catch (e) {}
|
|
throw new Error(msg);
|
|
}
|
|
flash("Обновление запущено");
|
|
setTimeout(loadUpdateStatus, 2000);
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
$("#update-rollback")?.addEventListener("click", async () => {
|
|
if (!confirm("Откатить на предыдущую версию?")) return;
|
|
try {
|
|
await api("POST", "/api/update/rollback");
|
|
flash("Откат запущен");
|
|
setTimeout(loadUpdateStatus, 2000);
|
|
} catch (e) { flash(e.message, true); }
|
|
});
|
|
|
|
toggleStatic();
|