527 lines
20 KiB
JavaScript
527 lines
20 KiB
JavaScript
|
(() => {
|
||
|
|
const menuController = window.WarpBoxUI?.bindMenuBar?.() || {
|
||
|
|
close() {
|
||
|
|
document.querySelectorAll(".menu-item.is-open").forEach((item) => {
|
||
|
|
item.classList.remove("is-open");
|
||
|
|
item.querySelector(".menu-button")?.setAttribute("aria-expanded", "false");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const toastTarget = document.getElementById("toast");
|
||
|
|
const dataNode = document.getElementById("boxes-data");
|
||
|
|
const tableBody = document.getElementById("boxes-table-body");
|
||
|
|
const emptyState = document.getElementById("boxes-empty-state");
|
||
|
|
const searchInput = document.getElementById("boxes-search");
|
||
|
|
const statusFilter = document.getElementById("boxes-status-filter");
|
||
|
|
const flagFilter = document.getElementById("boxes-flag-filter");
|
||
|
|
const sortFilter = document.getElementById("boxes-sort");
|
||
|
|
const pageSizeFilter = document.getElementById("boxes-page-size");
|
||
|
|
const selectAll = document.getElementById("boxes-select-all");
|
||
|
|
const prevPageButton = document.getElementById("boxes-prev-page");
|
||
|
|
const nextPageButton = document.getElementById("boxes-next-page");
|
||
|
|
const pageLabel = document.getElementById("boxes-page-label");
|
||
|
|
const rangeLabel = document.getElementById("boxes-range-label");
|
||
|
|
const selectedLabel = document.getElementById("boxes-selected-label");
|
||
|
|
const footerSummary = document.getElementById("boxes-footer-summary");
|
||
|
|
const detailFileList = document.getElementById("detail-file-list");
|
||
|
|
|
||
|
|
if (!dataNode || !tableBody || !searchInput || !detailFileList) return;
|
||
|
|
|
||
|
|
const statEls = {
|
||
|
|
total: document.querySelector("[data-stat-total]"),
|
||
|
|
ready: document.querySelector("[data-stat-ready]"),
|
||
|
|
uploading: document.querySelector("[data-stat-uploading]"),
|
||
|
|
expired: document.querySelector("[data-stat-expired]")
|
||
|
|
};
|
||
|
|
|
||
|
|
const detailEls = {
|
||
|
|
boxId: document.getElementById("detail-box-id"),
|
||
|
|
status: document.getElementById("detail-status"),
|
||
|
|
created: document.getElementById("detail-created"),
|
||
|
|
expires: document.getElementById("detail-expires"),
|
||
|
|
retention: document.getElementById("detail-retention"),
|
||
|
|
files: document.getElementById("detail-files"),
|
||
|
|
size: document.getElementById("detail-size"),
|
||
|
|
flags: document.getElementById("detail-flags"),
|
||
|
|
open: document.getElementById("detail-open"),
|
||
|
|
zip: document.getElementById("detail-zip")
|
||
|
|
};
|
||
|
|
|
||
|
|
function showToast(message, type = "info", duration = 2200) {
|
||
|
|
if (window.WarpBoxUI) {
|
||
|
|
window.WarpBoxUI.toast(message, type, { target: toastTarget, duration });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!toastTarget) return;
|
||
|
|
toastTarget.textContent = message;
|
||
|
|
toastTarget.classList.add("is-visible");
|
||
|
|
window.setTimeout(() => toastTarget.classList.remove("is-visible"), duration);
|
||
|
|
}
|
||
|
|
|
||
|
|
function parseData() {
|
||
|
|
try {
|
||
|
|
return JSON.parse(dataNode.textContent || "[]");
|
||
|
|
} catch (_) {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const state = {
|
||
|
|
boxes: parseData(),
|
||
|
|
selected: new Set(),
|
||
|
|
activeId: null,
|
||
|
|
page: 1
|
||
|
|
};
|
||
|
|
|
||
|
|
function pageSize() {
|
||
|
|
return Number(pageSizeFilter.value || 10);
|
||
|
|
}
|
||
|
|
|
||
|
|
function allBoxes() {
|
||
|
|
return state.boxes.slice();
|
||
|
|
}
|
||
|
|
|
||
|
|
function sortBoxes(boxes) {
|
||
|
|
const sorted = boxes.slice();
|
||
|
|
switch (sortFilter.value) {
|
||
|
|
case "name":
|
||
|
|
sorted.sort((a, b) => a.id.localeCompare(b.id));
|
||
|
|
break;
|
||
|
|
case "largest":
|
||
|
|
sorted.sort((a, b) => compareSizeLabel(a.total_size_label, b.total_size_label));
|
||
|
|
break;
|
||
|
|
case "expires":
|
||
|
|
sorted.sort((a, b) => compareExpiry(a.expires_at_iso, b.expires_at_iso));
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
sorted.sort((a, b) => (b.created_at_iso || "").localeCompare(a.created_at_iso || ""));
|
||
|
|
}
|
||
|
|
return sorted;
|
||
|
|
}
|
||
|
|
|
||
|
|
function compareSizeLabel(left, right) {
|
||
|
|
return sizeLabelToBytes(right) - sizeLabelToBytes(left);
|
||
|
|
}
|
||
|
|
|
||
|
|
function sizeLabelToBytes(label) {
|
||
|
|
const match = String(label || "").trim().match(/^([\d.]+)\s*([KMGT]?i?B|B)$/i);
|
||
|
|
if (!match) return 0;
|
||
|
|
const value = Number(match[1]);
|
||
|
|
const unit = match[2].toUpperCase();
|
||
|
|
const map = { B: 1, KIB: 1024, MIB: 1024 ** 2, GIB: 1024 ** 3, TIB: 1024 ** 4 };
|
||
|
|
return value * (map[unit] || 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function compareExpiry(left, right) {
|
||
|
|
if (!left && !right) return 0;
|
||
|
|
if (!left) return 1;
|
||
|
|
if (!right) return -1;
|
||
|
|
return left.localeCompare(right);
|
||
|
|
}
|
||
|
|
|
||
|
|
function filteredBoxes() {
|
||
|
|
const query = searchInput.value.trim().toLowerCase();
|
||
|
|
const status = statusFilter.value;
|
||
|
|
const flag = flagFilter.value;
|
||
|
|
|
||
|
|
return sortBoxes(allBoxes().filter((box) => {
|
||
|
|
const matchesSearch = !query || String(box.search_text || "").includes(query);
|
||
|
|
const matchesStatus = status === "all" || box.status === status;
|
||
|
|
const matchesFlag = flag === "all" || (box.flags || []).includes(flag);
|
||
|
|
return matchesSearch && matchesStatus && matchesFlag;
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
function pagedBoxes(boxes) {
|
||
|
|
const size = pageSize();
|
||
|
|
const pages = Math.max(1, Math.ceil(boxes.length / size));
|
||
|
|
if (state.page > pages) state.page = pages;
|
||
|
|
if (state.page < 1) state.page = 1;
|
||
|
|
const start = (state.page - 1) * size;
|
||
|
|
return {
|
||
|
|
items: boxes.slice(start, start + size),
|
||
|
|
start,
|
||
|
|
pages
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function selectedBoxes() {
|
||
|
|
return allBoxes().filter((box) => state.selected.has(box.id));
|
||
|
|
}
|
||
|
|
|
||
|
|
function currentActiveBox() {
|
||
|
|
const boxes = allBoxes();
|
||
|
|
return boxes.find((box) => box.id === state.activeId) || null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function ensureActiveBox(filtered) {
|
||
|
|
if (filtered.length === 0) {
|
||
|
|
state.activeId = null;
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
if (!filtered.some((box) => box.id === state.activeId)) {
|
||
|
|
state.activeId = filtered[0].id;
|
||
|
|
}
|
||
|
|
return filtered.find((box) => box.id === state.activeId) || filtered[0];
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderSummary(filtered) {
|
||
|
|
const total = filtered.length;
|
||
|
|
const ready = filtered.filter((box) => box.status === "ready").length;
|
||
|
|
const uploading = filtered.filter((box) => box.status === "uploading").length;
|
||
|
|
const expired = filtered.filter((box) => box.status === "expired" || box.status === "consumed").length;
|
||
|
|
statEls.total.textContent = String(total);
|
||
|
|
statEls.ready.textContent = String(ready);
|
||
|
|
statEls.uploading.textContent = String(uploading);
|
||
|
|
statEls.expired.textContent = String(expired);
|
||
|
|
footerSummary.textContent = `${allBoxes().length} boxes loaded`;
|
||
|
|
selectedLabel.textContent = `Selected: ${state.selected.size}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderTable() {
|
||
|
|
const filtered = filteredBoxes();
|
||
|
|
const active = ensureActiveBox(filtered);
|
||
|
|
const page = pagedBoxes(filtered);
|
||
|
|
|
||
|
|
tableBody.innerHTML = "";
|
||
|
|
page.items.forEach((box) => tableBody.appendChild(buildRow(box)));
|
||
|
|
emptyState.hidden = page.items.length !== 0;
|
||
|
|
|
||
|
|
const startIndex = filtered.length ? page.start + 1 : 0;
|
||
|
|
const endIndex = page.start + page.items.length;
|
||
|
|
rangeLabel.textContent = `Showing ${startIndex}-${endIndex} of ${filtered.length}`;
|
||
|
|
pageLabel.textContent = `Page ${state.page} / ${page.pages}`;
|
||
|
|
prevPageButton.disabled = state.page <= 1;
|
||
|
|
nextPageButton.disabled = state.page >= page.pages;
|
||
|
|
selectAll.checked = page.items.length > 0 && page.items.every((box) => state.selected.has(box.id));
|
||
|
|
|
||
|
|
renderSummary(filtered);
|
||
|
|
renderDetails(active);
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildRow(box) {
|
||
|
|
const row = document.createElement("tr");
|
||
|
|
if (box.id === state.activeId) row.classList.add("is-selected");
|
||
|
|
|
||
|
|
row.innerHTML = `
|
||
|
|
<td><input type="checkbox" class="boxes-row-check"${state.selected.has(box.id) ? " checked" : ""}></td>
|
||
|
|
<td title="${escapeAttr(box.id)}">${box.id}</td>
|
||
|
|
<td><span class="boxes-status-pill ${box.status}">${box.status_label}</span></td>
|
||
|
|
<td>${box.complete_files}/${box.file_count}</td>
|
||
|
|
<td>${box.total_size_label}</td>
|
||
|
|
<td>${box.retention_label || "Not set"}</td>
|
||
|
|
<td>${box.expires_at_label || "Not set"}</td>
|
||
|
|
<td><div class="boxes-flags-cell">${renderFlags(box.flags)}</div></td>
|
||
|
|
<td><div class="boxes-action-cell">${renderRowActions(box)}</div></td>
|
||
|
|
`;
|
||
|
|
|
||
|
|
row.addEventListener("click", (event) => {
|
||
|
|
if (event.target.closest("button") || event.target.closest("a") || event.target.closest("input")) return;
|
||
|
|
state.activeId = box.id;
|
||
|
|
renderTable();
|
||
|
|
});
|
||
|
|
|
||
|
|
row.querySelector(".boxes-row-check")?.addEventListener("change", (event) => {
|
||
|
|
if (event.target.checked) {
|
||
|
|
state.selected.add(box.id);
|
||
|
|
} else {
|
||
|
|
state.selected.delete(box.id);
|
||
|
|
}
|
||
|
|
selectedLabel.textContent = `Selected: ${state.selected.size}`;
|
||
|
|
syncSelectAllForPage();
|
||
|
|
});
|
||
|
|
|
||
|
|
row.querySelector('[data-row-action="focus"]')?.addEventListener("click", () => {
|
||
|
|
state.activeId = box.id;
|
||
|
|
renderTable();
|
||
|
|
});
|
||
|
|
|
||
|
|
return row;
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderFlags(flags) {
|
||
|
|
if (!flags || !flags.length) return '<span class="boxes-flag">none</span>';
|
||
|
|
return flags.map((flag) => `<span class="boxes-flag">${escapeHtml(flag)}</span>`).join("");
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderRowActions(box) {
|
||
|
|
const parts = [
|
||
|
|
`<a class="win98-button boxes-row-button" href="${escapeAttr(box.open_url)}" target="_blank" rel="noreferrer">Open</a>`,
|
||
|
|
`<button class="win98-button boxes-row-button" type="button" data-row-action="focus">View</button>`
|
||
|
|
];
|
||
|
|
if (box.zip_available && box.zip_url) {
|
||
|
|
parts.push(`<a class="win98-button boxes-row-button" href="${escapeAttr(box.zip_url)}" target="_blank" rel="noreferrer">ZIP</a>`);
|
||
|
|
}
|
||
|
|
return parts.join("");
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderDetails(box) {
|
||
|
|
if (!box) {
|
||
|
|
detailEls.boxId.textContent = "-";
|
||
|
|
detailEls.status.textContent = "-";
|
||
|
|
detailEls.created.textContent = "-";
|
||
|
|
detailEls.expires.textContent = "-";
|
||
|
|
detailEls.retention.textContent = "-";
|
||
|
|
detailEls.files.textContent = "-";
|
||
|
|
detailEls.size.textContent = "-";
|
||
|
|
detailEls.flags.textContent = "-";
|
||
|
|
detailEls.open.href = "#";
|
||
|
|
detailEls.zip.href = "#";
|
||
|
|
detailEls.zip.setAttribute("aria-disabled", "true");
|
||
|
|
detailFileList.innerHTML = '<div class="boxes-file-card">No box selected.</div>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
detailEls.boxId.textContent = box.id;
|
||
|
|
detailEls.status.textContent = box.status_label;
|
||
|
|
detailEls.created.textContent = box.created_at_label || "Not set";
|
||
|
|
detailEls.expires.textContent = box.expires_at_label || "Not set";
|
||
|
|
detailEls.retention.textContent = box.retention_label || "Not set";
|
||
|
|
detailEls.files.textContent = `${box.complete_files}/${box.file_count} complete`;
|
||
|
|
detailEls.size.textContent = box.total_size_label;
|
||
|
|
detailEls.flags.textContent = (box.flags || []).join(", ") || "none";
|
||
|
|
detailEls.open.href = box.open_url || "#";
|
||
|
|
|
||
|
|
if (box.zip_available && box.zip_url) {
|
||
|
|
detailEls.zip.href = box.zip_url;
|
||
|
|
detailEls.zip.removeAttribute("aria-disabled");
|
||
|
|
detailEls.zip.style.pointerEvents = "";
|
||
|
|
detailEls.zip.style.opacity = "";
|
||
|
|
} else {
|
||
|
|
detailEls.zip.href = "#";
|
||
|
|
detailEls.zip.setAttribute("aria-disabled", "true");
|
||
|
|
detailEls.zip.style.pointerEvents = "none";
|
||
|
|
detailEls.zip.style.opacity = ".55";
|
||
|
|
}
|
||
|
|
|
||
|
|
renderFiles(box.files || []);
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderFiles(files) {
|
||
|
|
if (!files.length) {
|
||
|
|
detailFileList.innerHTML = '<div class="boxes-file-card">No file inventory available for this box.</div>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
detailFileList.innerHTML = files.map((file) => `
|
||
|
|
<div class="boxes-file-card">
|
||
|
|
<div class="boxes-file-row">
|
||
|
|
<div class="boxes-file-name" title="${escapeAttr(file.name)}">${escapeHtml(file.name)}</div>
|
||
|
|
<span class="boxes-status-pill ${escapeAttr(file.status || "legacy")}">${escapeHtml(file.status_label || file.status || "Unknown")}</span>
|
||
|
|
</div>
|
||
|
|
<div class="boxes-file-meta">
|
||
|
|
<span>${escapeHtml(file.size_label || "0 B")}</span>
|
||
|
|
<span>${escapeHtml(file.mime_type || "application/octet-stream")}</span>
|
||
|
|
${file.is_complete && file.download_path ? `<a class="boxes-file-link" href="${escapeAttr(file.download_path)}" target="_blank" rel="noreferrer">download</a>` : "<span>pending</span>"}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`).join("");
|
||
|
|
}
|
||
|
|
|
||
|
|
function syncSelectAllForPage() {
|
||
|
|
const filtered = filteredBoxes();
|
||
|
|
const page = pagedBoxes(filtered);
|
||
|
|
selectAll.checked = page.items.length > 0 && page.items.every((box) => state.selected.has(box.id));
|
||
|
|
selectedLabel.textContent = `Selected: ${state.selected.size}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearFilters() {
|
||
|
|
searchInput.value = "";
|
||
|
|
statusFilter.value = "all";
|
||
|
|
flagFilter.value = "all";
|
||
|
|
sortFilter.value = "newest";
|
||
|
|
pageSizeFilter.value = "10";
|
||
|
|
state.page = 1;
|
||
|
|
renderTable();
|
||
|
|
}
|
||
|
|
|
||
|
|
async function runBulkAction(action, ids, deltaSeconds = 0) {
|
||
|
|
if (!ids.length) {
|
||
|
|
showToast("Select one or more boxes first", "warning");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch("/admin/boxes/actions", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ action, box_ids: ids, delta_seconds: deltaSeconds })
|
||
|
|
});
|
||
|
|
const payload = await response.json();
|
||
|
|
if (!response.ok) {
|
||
|
|
const message = payload.error || payload.message || "Action failed";
|
||
|
|
const warning = Array.isArray(payload.warnings) && payload.warnings.length ? ` (${payload.warnings[0]})` : "";
|
||
|
|
showToast(`${message}${warning}`, "error", 3200);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
state.boxes = Array.isArray(payload.boxes) ? payload.boxes : state.boxes;
|
||
|
|
state.selected.clear();
|
||
|
|
if (state.activeId && !state.boxes.some((box) => box.id === state.activeId)) {
|
||
|
|
state.activeId = null;
|
||
|
|
}
|
||
|
|
renderTable();
|
||
|
|
|
||
|
|
let message = payload.message || "Action complete";
|
||
|
|
if (Array.isArray(payload.warnings) && payload.warnings.length) {
|
||
|
|
message += ` (${payload.warnings.length} warning${payload.warnings.length === 1 ? "" : "s"})`;
|
||
|
|
}
|
||
|
|
showToast(message, Array.isArray(payload.warnings) && payload.warnings.length ? "warning" : "success", 2800);
|
||
|
|
} catch (_) {
|
||
|
|
showToast("Network error while updating boxes", "error", 3200);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function selectedIDsOrActive() {
|
||
|
|
if (state.selected.size) return Array.from(state.selected);
|
||
|
|
const active = currentActiveBox();
|
||
|
|
return active ? [active.id] : [];
|
||
|
|
}
|
||
|
|
|
||
|
|
async function runCommand(command) {
|
||
|
|
switch (command) {
|
||
|
|
case "refresh":
|
||
|
|
window.location.reload();
|
||
|
|
return;
|
||
|
|
case "export":
|
||
|
|
exportVisibleCSV();
|
||
|
|
showToast("Visible boxes exported");
|
||
|
|
return;
|
||
|
|
case "status-ready":
|
||
|
|
statusFilter.value = "ready";
|
||
|
|
state.page = 1;
|
||
|
|
renderTable();
|
||
|
|
return;
|
||
|
|
case "status-expired":
|
||
|
|
statusFilter.value = "expired";
|
||
|
|
state.page = 1;
|
||
|
|
renderTable();
|
||
|
|
return;
|
||
|
|
case "clear-filters":
|
||
|
|
clearFilters();
|
||
|
|
showToast("Filters cleared");
|
||
|
|
return;
|
||
|
|
case "expire":
|
||
|
|
case "active-expire":
|
||
|
|
await runBulkAction("expire", selectedIDsOrActive());
|
||
|
|
return;
|
||
|
|
case "extend-day":
|
||
|
|
case "active-extend-day":
|
||
|
|
await runBulkAction("bump", selectedIDsOrActive(), 24 * 60 * 60);
|
||
|
|
return;
|
||
|
|
case "extend-week":
|
||
|
|
case "active-extend-week":
|
||
|
|
await runBulkAction("bump", selectedIDsOrActive(), 7 * 24 * 60 * 60);
|
||
|
|
return;
|
||
|
|
case "delete":
|
||
|
|
case "active-delete":
|
||
|
|
if (!window.confirm("Delete selected boxes? This removes stored files.")) return;
|
||
|
|
await runBulkAction("delete", selectedIDsOrActive());
|
||
|
|
return;
|
||
|
|
case "help-scope":
|
||
|
|
showToast("Ownership filter waits for account + box owner data in backend", "info", 3400);
|
||
|
|
return;
|
||
|
|
case "help-flags":
|
||
|
|
showToast("Flags: protected, one-time, zip off, legacy, consumed", "info", 3200);
|
||
|
|
return;
|
||
|
|
default:
|
||
|
|
showToast(`Unknown command: ${command}`, "warning");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function exportVisibleCSV() {
|
||
|
|
const rows = filteredBoxes().map((box) => ([
|
||
|
|
box.id,
|
||
|
|
box.status_label,
|
||
|
|
box.file_count,
|
||
|
|
box.total_size_label,
|
||
|
|
box.retention_label,
|
||
|
|
box.expires_at_label,
|
||
|
|
(box.flags || []).join("|")
|
||
|
|
]));
|
||
|
|
const csv = [
|
||
|
|
["box_id", "status", "files", "size", "retention", "expires", "flags"],
|
||
|
|
...rows
|
||
|
|
].map((row) => row.map(csvCell).join(",")).join("\n");
|
||
|
|
|
||
|
|
const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
|
||
|
|
const url = URL.createObjectURL(blob);
|
||
|
|
const anchor = document.createElement("a");
|
||
|
|
anchor.href = url;
|
||
|
|
anchor.download = "warpbox-boxes.csv";
|
||
|
|
anchor.click();
|
||
|
|
URL.revokeObjectURL(url);
|
||
|
|
}
|
||
|
|
|
||
|
|
function csvCell(value) {
|
||
|
|
const text = String(value ?? "");
|
||
|
|
if (/[",\n]/.test(text)) return `"${text.replaceAll('"', '""')}"`;
|
||
|
|
return text;
|
||
|
|
}
|
||
|
|
|
||
|
|
function escapeHtml(value) {
|
||
|
|
return String(value ?? "")
|
||
|
|
.replaceAll("&", "&")
|
||
|
|
.replaceAll("<", "<")
|
||
|
|
.replaceAll(">", ">")
|
||
|
|
.replaceAll('"', """);
|
||
|
|
}
|
||
|
|
|
||
|
|
function escapeAttr(value) {
|
||
|
|
return escapeHtml(value).replaceAll("'", "'");
|
||
|
|
}
|
||
|
|
|
||
|
|
[searchInput, statusFilter, flagFilter, sortFilter].forEach((control) => {
|
||
|
|
control.addEventListener(control.tagName === "INPUT" ? "input" : "change", () => {
|
||
|
|
state.page = 1;
|
||
|
|
renderTable();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
pageSizeFilter.addEventListener("change", () => {
|
||
|
|
state.page = 1;
|
||
|
|
renderTable();
|
||
|
|
});
|
||
|
|
|
||
|
|
selectAll?.addEventListener("change", () => {
|
||
|
|
const filtered = filteredBoxes();
|
||
|
|
const page = pagedBoxes(filtered);
|
||
|
|
page.items.forEach((box) => {
|
||
|
|
if (selectAll.checked) state.selected.add(box.id);
|
||
|
|
else state.selected.delete(box.id);
|
||
|
|
});
|
||
|
|
renderTable();
|
||
|
|
});
|
||
|
|
|
||
|
|
prevPageButton?.addEventListener("click", () => {
|
||
|
|
state.page -= 1;
|
||
|
|
renderTable();
|
||
|
|
});
|
||
|
|
|
||
|
|
nextPageButton?.addEventListener("click", () => {
|
||
|
|
state.page += 1;
|
||
|
|
renderTable();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll("[data-command]").forEach((button) => {
|
||
|
|
button.addEventListener("click", async () => {
|
||
|
|
menuController.close();
|
||
|
|
await runCommand(button.dataset.command);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("keydown", async (event) => {
|
||
|
|
if (event.key === "Escape") menuController.close();
|
||
|
|
if (event.key === "F5") {
|
||
|
|
event.preventDefault();
|
||
|
|
await runCommand("refresh");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (state.boxes.length > 0) {
|
||
|
|
state.activeId = state.boxes[0].id;
|
||
|
|
}
|
||
|
|
renderTable();
|
||
|
|
})();
|