1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
// The shell: discover modules, mount each panel, poll its state.
// A module is static/modules/<name>.js exporting default {title, interval,
// mount(el), update(state, el)}. A missing or broken panel is skipped.
// Panel order and width are kept in this browser's localStorage.
const grid = document.getElementById("grid");
const refreshers = [];
const LAYOUT_KEY = "deckit.layout";
function loadLayout() {
try {
return JSON.parse(localStorage.getItem(LAYOUT_KEY)) || {};
} catch {
return {};
}
}
function saveLayout(layout) {
try {
localStorage.setItem(LAYOUT_KEY, JSON.stringify(layout));
} catch {
// private mode or storage full: the layout just won't persist
}
}
function panelOrder() {
return [...grid.querySelectorAll(".panel")].map((p) => p.dataset.module);
}
function enableDrag(el) {
const handle = el.querySelector(".drag-handle");
handle.addEventListener("pointerdown", (start) => {
start.preventDefault();
el.classList.add("dragging");
handle.setPointerCapture(start.pointerId);
const move = (ev) => {
const target = [...grid.querySelectorAll(".panel")].find((p) => {
if (p === el) return false;
const r = p.getBoundingClientRect();
return ev.clientX >= r.left && ev.clientX <= r.right
&& ev.clientY >= r.top && ev.clientY <= r.bottom;
});
if (!target) return;
const r = target.getBoundingClientRect();
const after = ev.clientY > r.top + r.height / 2;
grid.insertBefore(el, after ? target.nextSibling : target);
};
const end = () => {
el.classList.remove("dragging");
handle.releasePointerCapture(start.pointerId);
handle.removeEventListener("pointermove", move);
handle.removeEventListener("pointerup", end);
handle.removeEventListener("pointercancel", end);
saveLayout({ ...loadLayout(), order: panelOrder() });
};
handle.addEventListener("pointermove", move);
handle.addEventListener("pointerup", end);
handle.addEventListener("pointercancel", end);
});
}
function enableResize(el, name) {
el.querySelector(".resize-handle").addEventListener("click", () => {
el.classList.toggle("wide");
const layout = loadLayout();
layout.spans = { ...(layout.spans ?? {}), [name]: el.classList.contains("wide") ? 2 : 1 };
saveLayout(layout);
});
}
function header(title) {
const head = document.createElement("div");
head.className = "panel-head";
const h = document.createElement("h2");
h.textContent = title;
const drag = document.createElement("button");
drag.className = "drag-handle";
drag.textContent = "≡";
drag.setAttribute("aria-label", "Move panel");
const resize = document.createElement("button");
resize.className = "resize-handle";
resize.textContent = "⤢";
resize.setAttribute("aria-label", "Toggle panel width");
head.append(h, drag, resize);
return head;
}
async function mountModule(name, layout) {
try {
const panel = (await import(`./modules/${name}.js`)).default;
const el = document.createElement("section");
el.className = "panel";
el.dataset.module = name;
if ((layout.spans ?? {})[name] >= 2) el.classList.add("wide");
el.append(header(panel.title ?? name));
grid.append(el);
panel.mount?.(el);
enableDrag(el);
enableResize(el, name);
const poll = async () => {
try {
const r = await fetch(`/api/${name}`);
if (r.ok) panel.update?.(await r.json(), el);
} catch {
// keep the last state; the next tick retries
}
};
refreshers.push(poll);
await poll();
setInterval(poll, (panel.interval ?? 1) * 1000);
} catch {
// a broken panel must not take down the rest of the dashboard
}
}
async function boot() {
const r = await fetch("/api/modules");
if (!r.ok) return;
const layout = loadLayout();
const order = layout.order ?? [];
const mods = await r.json();
mods.sort((a, b) => {
const ia = order.indexOf(a.name);
const ib = order.indexOf(b.name);
if (ia === -1 && ib === -1) return 0;
if (ia === -1) return 1;
if (ib === -1) return -1;
return ia - ib;
});
for (const { name } of mods) await mountModule(name, layout);
}
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") refreshers.forEach((fn) => fn());
});
boot();
|
