save mission
This commit is contained in:
322
www/dashboard.js
Normal file
322
www/dashboard.js
Normal file
@@ -0,0 +1,322 @@
|
||||
(() => {
|
||||
const el = (id) => document.getElementById(id);
|
||||
const canvasEl = el("dashboardCanvas");
|
||||
const saveBtn = el("dashboardSaveBtn");
|
||||
const modeSelectEl = el("dashboardModeSelect");
|
||||
|
||||
const store = {
|
||||
widgets: [],
|
||||
pollTimer: null,
|
||||
};
|
||||
|
||||
async function api(path, opts = {}) {
|
||||
if (window.MissionsApp?.missionsApi) return window.MissionsApp.missionsApi(path, opts);
|
||||
const res = await fetch(path, { headers: { "Content-Type": "application/json" }, ...opts });
|
||||
if (res.status === 204) return null;
|
||||
const data = res.ok ? await res.json() : null;
|
||||
if (!res.ok) throw new Error(data?.error || `HTTP ${res.status}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
function newWidgetId() {
|
||||
return `w_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 6)}`;
|
||||
}
|
||||
|
||||
async function loadDashboard() {
|
||||
const data = await api("/api/dashboard");
|
||||
store.widgets = Array.isArray(data.widgets) ? data.widgets : [];
|
||||
if (!store.widgets.length) {
|
||||
store.widgets = [
|
||||
{ id: newWidgetId(), type: "mission_queue" },
|
||||
{ id: newWidgetId(), type: "pause_continue" },
|
||||
{ id: newWidgetId(), type: "action_log" },
|
||||
];
|
||||
}
|
||||
renderCanvas();
|
||||
}
|
||||
|
||||
async function saveDashboard() {
|
||||
await api("/api/dashboard", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({ widgets: store.widgets }),
|
||||
});
|
||||
}
|
||||
|
||||
function missions() {
|
||||
return window.MissionsApp?.getMissions?.() || [];
|
||||
}
|
||||
|
||||
function groups() {
|
||||
const g = new Set();
|
||||
missions().forEach((m) => g.add(m.group || "Missions"));
|
||||
return [...g].sort();
|
||||
}
|
||||
|
||||
function renderCanvas() {
|
||||
if (!canvasEl) return;
|
||||
canvasEl.innerHTML = "";
|
||||
if (!store.widgets.length) {
|
||||
const empty = document.createElement("p");
|
||||
empty.className = "mutedNote";
|
||||
empty.textContent = "Thêm widget từ panel trái.";
|
||||
canvasEl.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
store.widgets.forEach((widget) => {
|
||||
canvasEl.appendChild(buildWidget(widget));
|
||||
});
|
||||
}
|
||||
|
||||
function buildWidget(widget) {
|
||||
const box = document.createElement("div");
|
||||
box.className = "dashboardWidget";
|
||||
box.dataset.widgetId = widget.id;
|
||||
|
||||
const head = document.createElement("div");
|
||||
head.className = "dashboardWidgetHead";
|
||||
head.innerHTML = `<span class="dashboardWidgetTitle">${widget.type.replace(/_/g, " ")}</span>`;
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.type = "button";
|
||||
removeBtn.className = "dashboardWidgetRemove";
|
||||
removeBtn.textContent = "×";
|
||||
removeBtn.addEventListener("click", () => {
|
||||
store.widgets = store.widgets.filter((w) => w.id !== widget.id);
|
||||
renderCanvas();
|
||||
});
|
||||
head.appendChild(removeBtn);
|
||||
box.appendChild(head);
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "dashboardWidgetBody";
|
||||
|
||||
switch (widget.type) {
|
||||
case "mission_button":
|
||||
renderMissionButton(body, widget);
|
||||
break;
|
||||
case "mission_group":
|
||||
renderMissionGroup(body, widget);
|
||||
break;
|
||||
case "mission_queue":
|
||||
renderMissionQueue(body);
|
||||
break;
|
||||
case "pause_continue":
|
||||
renderPauseContinue(body);
|
||||
break;
|
||||
case "action_log":
|
||||
renderActionLog(body);
|
||||
break;
|
||||
default:
|
||||
body.textContent = "Unknown widget";
|
||||
}
|
||||
box.appendChild(body);
|
||||
return box;
|
||||
}
|
||||
|
||||
function renderMissionButton(container, widget) {
|
||||
const select = document.createElement("select");
|
||||
missions().forEach((m) => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = m.id;
|
||||
opt.textContent = m.name;
|
||||
if (m.id === widget.mission_id) opt.selected = true;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
select.addEventListener("change", () => {
|
||||
widget.mission_id = select.value;
|
||||
});
|
||||
container.appendChild(select);
|
||||
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "dashboardMissionBtn";
|
||||
btn.textContent = "Start mission";
|
||||
btn.addEventListener("click", async () => {
|
||||
try {
|
||||
if (window.MissionsApp?.queueMission) {
|
||||
await window.MissionsApp.queueMission(select.value, {});
|
||||
} else {
|
||||
await api("/api/mission_queue", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ mission_id: select.value, parameters: {} }),
|
||||
});
|
||||
}
|
||||
await refreshWidgetsDynamic();
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
}
|
||||
});
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
function renderMissionGroup(container, widget) {
|
||||
const select = document.createElement("select");
|
||||
groups().forEach((g) => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = g;
|
||||
opt.textContent = g;
|
||||
if (g === (widget.group || "Missions")) opt.selected = true;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
select.addEventListener("change", () => {
|
||||
widget.group = select.value;
|
||||
renderCanvas();
|
||||
});
|
||||
container.appendChild(select);
|
||||
|
||||
const list = document.createElement("div");
|
||||
list.className = "dashboardMissionGroup";
|
||||
missions()
|
||||
.filter((m) => (m.group || "Missions") === (widget.group || select.value))
|
||||
.forEach((m) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "btn subtle btnBlock";
|
||||
btn.textContent = m.name;
|
||||
btn.addEventListener("click", async () => {
|
||||
try {
|
||||
await window.MissionsApp.queueMission(m.id, {});
|
||||
await refreshWidgetsDynamic();
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
}
|
||||
});
|
||||
list.appendChild(btn);
|
||||
});
|
||||
container.appendChild(list);
|
||||
}
|
||||
|
||||
function renderMissionQueue(container) {
|
||||
const wrap = document.createElement("div");
|
||||
wrap.className = "dashboardQueueMini";
|
||||
wrap.dataset.dynamic = "queue";
|
||||
container.appendChild(wrap);
|
||||
updateQueueMini(wrap);
|
||||
}
|
||||
|
||||
function renderPauseContinue(container) {
|
||||
const play = document.createElement("button");
|
||||
play.type = "button";
|
||||
play.className = "btn primary dashboardPauseBtn";
|
||||
play.textContent = "▶ Continue";
|
||||
play.addEventListener("click", async () => {
|
||||
await api("/api/mission_runner/state", { method: "PUT", body: JSON.stringify({ state_id: 3 }) });
|
||||
await refreshWidgetsDynamic();
|
||||
});
|
||||
const pause = document.createElement("button");
|
||||
pause.type = "button";
|
||||
pause.className = "btn subtle dashboardPauseBtn";
|
||||
pause.textContent = "⏸ Pause";
|
||||
pause.addEventListener("click", async () => {
|
||||
await api("/api/mission_runner/state", { method: "PUT", body: JSON.stringify({ state_id: 4 }) });
|
||||
await refreshWidgetsDynamic();
|
||||
});
|
||||
container.appendChild(play);
|
||||
container.appendChild(pause);
|
||||
}
|
||||
|
||||
function renderActionLog(container) {
|
||||
const wrap = document.createElement("div");
|
||||
wrap.className = "dashboardQueueMini";
|
||||
wrap.dataset.dynamic = "log";
|
||||
container.appendChild(wrap);
|
||||
updateActionLogMini(wrap);
|
||||
}
|
||||
|
||||
function updateQueueMini(node) {
|
||||
const status = window.MissionsApp?.getRunnerStatus?.();
|
||||
const queue = status?.queue || [];
|
||||
node.innerHTML = queue.length
|
||||
? queue
|
||||
.map(
|
||||
(q) =>
|
||||
`<div><strong>${q.mission_name || q.mission_id}</strong> <span class="mutedNote">${q.state}</span></div>`
|
||||
)
|
||||
.join("")
|
||||
: `<span class="mutedNote">Queue trống</span>`;
|
||||
}
|
||||
|
||||
function updateActionLogMini(node) {
|
||||
const status = window.MissionsApp?.getRunnerStatus?.();
|
||||
const log = status?.action_log || [];
|
||||
node.innerHTML = [...log]
|
||||
.reverse()
|
||||
.slice(0, 12)
|
||||
.map((row) => `<div>${row.message || ""}</div>`)
|
||||
.join("") || `<span class="mutedNote">—</span>`;
|
||||
}
|
||||
|
||||
async function refreshWidgetsDynamic() {
|
||||
if (window.MissionsApp?.refreshRunnerStatus) await window.MissionsApp.refreshRunnerStatus();
|
||||
canvasEl?.querySelectorAll("[data-dynamic=queue]").forEach(updateQueueMini);
|
||||
canvasEl?.querySelectorAll("[data-dynamic=log]").forEach(updateActionLogMini);
|
||||
}
|
||||
|
||||
function addWidget(type) {
|
||||
const widget = { id: newWidgetId(), type };
|
||||
if (type === "mission_button") {
|
||||
widget.mission_id = missions()[0]?.id || "";
|
||||
}
|
||||
if (type === "mission_group") {
|
||||
widget.group = groups()[0] || "Missions";
|
||||
}
|
||||
store.widgets.push(widget);
|
||||
renderCanvas();
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
document.querySelectorAll(".dashboardAddWidget").forEach((btn) => {
|
||||
btn.addEventListener("click", () => addWidget(btn.dataset.widget));
|
||||
});
|
||||
saveBtn?.addEventListener("click", async () => {
|
||||
try {
|
||||
await saveDashboard();
|
||||
alert("Đã lưu dashboard.");
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
}
|
||||
});
|
||||
modeSelectEl?.addEventListener("change", async () => {
|
||||
try {
|
||||
await api("/api/mission_runner/mode", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({ mode: modeSelectEl.value }),
|
||||
});
|
||||
await refreshWidgetsDynamic();
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
if (store.pollTimer) clearInterval(store.pollTimer);
|
||||
store.pollTimer = setInterval(() => {
|
||||
const page = el("pageDashboard");
|
||||
if (page && !page.hidden) refreshWidgetsDynamic();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
async function init() {
|
||||
bindEvents();
|
||||
try {
|
||||
await loadDashboard();
|
||||
} catch {
|
||||
store.widgets = [
|
||||
{ id: newWidgetId(), type: "mission_queue" },
|
||||
{ id: newWidgetId(), type: "pause_continue" },
|
||||
];
|
||||
renderCanvas();
|
||||
}
|
||||
startPolling();
|
||||
}
|
||||
|
||||
window.DashboardApp = {
|
||||
init,
|
||||
onPageShow() {
|
||||
loadDashboard().catch(() => renderCanvas());
|
||||
refreshWidgetsDynamic();
|
||||
},
|
||||
};
|
||||
|
||||
init();
|
||||
})();
|
||||
Reference in New Issue
Block a user