Hitonabi
68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
// jobs.js — Aktivitaets-Stream ("Incident Stream"): Hintergrund-Jobs mit Live-Log.
|
|
// Exportiert track(id), damit andere Panels einen frisch gestarteten Job auto-aufklappen.
|
|
|
|
import { $, esc } from "../core/ui.js";
|
|
|
|
const tracked = new Set();
|
|
let JOBS = [];
|
|
|
|
export function track(id) {
|
|
tracked.add(id);
|
|
render();
|
|
}
|
|
|
|
function statusBadge(state) {
|
|
if (state === "done") return '<span class="badge b-run">fertig</span>';
|
|
if (state === "failed") return '<span class="badge b-err">fehler</span>';
|
|
return '<span class="badge b-load">läuft…</span>';
|
|
}
|
|
function dotClass(state) {
|
|
if (state === "done") return "on";
|
|
if (state === "failed") return "";
|
|
return "load";
|
|
}
|
|
|
|
function mount() {
|
|
$("#v-activity").innerHTML = `
|
|
<div class="card-h"><h3>Aktivität</h3><span class="meta" id="job-count"></span></div>
|
|
<div id="jobs"></div>
|
|
<div id="jobs-empty" class="empty-c">
|
|
<div class="e-t">Noch nichts losgemacht.</div>
|
|
<div class="e-s">Downloads, Updates & Co. erscheinen hier mit Live-Log.</div>
|
|
</div>`;
|
|
|
|
// Klicks auf Job-Kopf -> auf/zuklappen (Event-Delegation)
|
|
$("#jobs").addEventListener("click", e => {
|
|
const h = e.target.closest(".job-h");
|
|
if (!h) return;
|
|
const id = h.getAttribute("data-id");
|
|
tracked.has(id) ? tracked.delete(id) : tracked.add(id);
|
|
render();
|
|
});
|
|
}
|
|
|
|
function render() {
|
|
const c = $("#jobs");
|
|
if (!c) return;
|
|
$("#jobs-empty").style.display = JOBS.length ? "none" : "flex";
|
|
const failed = JOBS.filter(j => j.state === "failed").length;
|
|
$("#job-count").textContent = JOBS.length ? (failed ? failed + " Fehler" : JOBS.length + " gesamt") : "";
|
|
|
|
c.innerHTML = JOBS.map(j => {
|
|
const open = tracked.has(j.id);
|
|
const log = open ? `<div class="log">${esc((j.log || []).join("\n"))}</div>` : "";
|
|
return `<div class="job">
|
|
<div class="job-h" data-id="${esc(j.id)}">
|
|
<span class="li-dot ${dotClass(j.state)}"></span>
|
|
<span class="mid">${esc(j.label)}</span>${statusBadge(j.state)}
|
|
</div>${log}</div>`;
|
|
}).join("");
|
|
}
|
|
|
|
function onJobs(jobs) {
|
|
JOBS = jobs || [];
|
|
render();
|
|
}
|
|
|
|
export default { id: "jobs", mount, onJobs };
|