chore: prep 0.1.2 release, tidy repo
This commit is contained in:
Aaron
@@ -1,12 +1,21 @@
|
||||
// Entry point for the dashboard: wires UI events, pulls status, and initializes
|
||||
// feature modules (services, settings, stats).
|
||||
import { getStatus, triggerReset } from "./api.js";
|
||||
import { initServiceControls } from "./services.js";
|
||||
import { placeholderStatus, renderStats } from "./status.js";
|
||||
import { initServiceControls, renderServices } from "./services.js";
|
||||
import { initSettings } from "./settings.js";
|
||||
import { initUpdateSettings, isUpdatesDirty } from "./update-settings.js";
|
||||
import { initReleaseUI } from "./releases.js?v=20251213h";
|
||||
import { initDiagUI, logUi } from "./diaglog.js?v=20251213j";
|
||||
import { createToastManager } from "./toast.js?v=20251213a";
|
||||
import {
|
||||
applyTooltips,
|
||||
wireModalPairs,
|
||||
wireAccordions,
|
||||
createBusyOverlay,
|
||||
createConfirmModal,
|
||||
} from "./ui.js";
|
||||
import { createStatusController } from "./status-controller.js";
|
||||
|
||||
const servicesGrid = document.getElementById("servicesGrid");
|
||||
const heroStats = document.getElementById("heroStats");
|
||||
@@ -32,6 +41,7 @@ const toastPosSelect = document.getElementById("toastPosSelect");
|
||||
const toastAnimSelect = document.getElementById("toastAnimSelect");
|
||||
const toastSpeedInput = document.getElementById("toastSpeedInput");
|
||||
const toastDurationInput = document.getElementById("toastDurationInput");
|
||||
const toastTestBtn = document.getElementById("toastTestBtn");
|
||||
const fontSelect = document.getElementById("fontSelect");
|
||||
const updatesScope = document.getElementById("updatesScope");
|
||||
const updateTimeInput = document.getElementById("updateTimeInput");
|
||||
@@ -111,194 +121,141 @@ const diagModal = document.getElementById("diagModal");
|
||||
const diagClose = document.getElementById("diagClose");
|
||||
const diagStatusModal = document.getElementById("diagStatusModal");
|
||||
|
||||
const TOAST_POS_KEY = "pikit-toast-pos";
|
||||
const TOAST_ANIM_KEY = "pikit-toast-anim";
|
||||
const TOAST_SPEED_KEY = "pikit-toast-speed";
|
||||
const TOAST_DURATION_KEY = "pikit-toast-duration";
|
||||
const FONT_KEY = "pikit-font";
|
||||
const ALLOWED_TOAST_POS = [
|
||||
"bottom-center",
|
||||
"bottom-right",
|
||||
"bottom-left",
|
||||
"top-right",
|
||||
"top-left",
|
||||
"top-center",
|
||||
];
|
||||
const ALLOWED_TOAST_ANIM = ["slide-in", "fade", "pop", "bounce", "drop", "grow"];
|
||||
const ALLOWED_FONTS = ["redhat", "space", "manrope", "dmsans", "sora", "chivo", "atkinson", "plex"];
|
||||
|
||||
let toastPosition = "bottom-center";
|
||||
let toastAnimation = "slide-in";
|
||||
let toastDurationMs = 5000;
|
||||
let toastSpeedMs = 300;
|
||||
let fontChoice = "redhat";
|
||||
const toastController = createToastManager({
|
||||
container: toastContainer,
|
||||
posSelect: toastPosSelect,
|
||||
animSelect: toastAnimSelect,
|
||||
speedInput: toastSpeedInput,
|
||||
durationInput: toastDurationInput,
|
||||
fontSelect,
|
||||
testBtn: toastTestBtn,
|
||||
});
|
||||
const showToast = toastController.showToast;
|
||||
let releaseUI = null;
|
||||
let lastStatusData = null;
|
||||
const { showBusy, hideBusy } = createBusyOverlay({
|
||||
overlay: busyOverlay,
|
||||
titleEl: busyTitle,
|
||||
textEl: busyText,
|
||||
});
|
||||
const confirmAction = createConfirmModal({
|
||||
modal: confirmModal,
|
||||
titleEl: confirmTitle,
|
||||
bodyEl: confirmBody,
|
||||
okBtn: confirmOk,
|
||||
cancelBtn: confirmCancel,
|
||||
});
|
||||
const collapseAccordions = () => document.querySelectorAll(".accordion").forEach((a) => a.classList.remove("open"));
|
||||
|
||||
function applyToastSettings() {
|
||||
if (!toastContainer) return;
|
||||
toastContainer.className = `toast-container pos-${toastPosition}`;
|
||||
document.documentElement.style.setProperty("--toast-speed", `${toastSpeedMs}ms`);
|
||||
const dir = toastPosition.startsWith("top") ? -1 : 1;
|
||||
const isLeft = toastPosition.includes("left");
|
||||
const isRight = toastPosition.includes("right");
|
||||
const slideX = isLeft ? -26 : isRight ? 26 : 0;
|
||||
const slideY = isLeft || isRight ? 0 : dir * 24;
|
||||
document.documentElement.style.setProperty("--toast-slide-offset", `${dir * 24}px`);
|
||||
document.documentElement.style.setProperty("--toast-dir", `${dir}`);
|
||||
document.documentElement.style.setProperty("--toast-slide-x", `${slideX}px`);
|
||||
document.documentElement.style.setProperty("--toast-slide-y", `${slideY}px`);
|
||||
if (toastDurationInput) toastDurationInput.value = toastDurationMs;
|
||||
}
|
||||
const statusController = createStatusController({
|
||||
heroStats,
|
||||
servicesGrid,
|
||||
updatesFlagTop,
|
||||
updatesNoteTop,
|
||||
tempFlagTop,
|
||||
readyOverlay,
|
||||
logUi,
|
||||
getStatus,
|
||||
isUpdatesDirty,
|
||||
setUpdatesUI,
|
||||
updatesFlagEl: setUpdatesFlag,
|
||||
releaseUIGetter: () => releaseUI,
|
||||
onReadyWait: () => setTimeout(() => statusController.loadStatus(), 3000),
|
||||
});
|
||||
const { loadStatus } = statusController;
|
||||
|
||||
function applyFontSetting() {
|
||||
document.documentElement.setAttribute("data-font", fontChoice);
|
||||
if (fontSelect) fontSelect.value = fontChoice;
|
||||
}
|
||||
|
||||
function loadToastSettings() {
|
||||
try {
|
||||
const posSaved = localStorage.getItem(TOAST_POS_KEY);
|
||||
if (ALLOWED_TOAST_POS.includes(posSaved)) toastPosition = posSaved;
|
||||
const animSaved = localStorage.getItem(TOAST_ANIM_KEY);
|
||||
const migrated =
|
||||
animSaved === "slide-up" || animSaved === "slide-left" || animSaved === "slide-right"
|
||||
? "slide-in"
|
||||
: animSaved;
|
||||
if (migrated && ALLOWED_TOAST_ANIM.includes(migrated)) toastAnimation = migrated;
|
||||
const savedSpeed = Number(localStorage.getItem(TOAST_SPEED_KEY));
|
||||
if (!Number.isNaN(savedSpeed) && savedSpeed >= 100 && savedSpeed <= 3000) {
|
||||
toastSpeedMs = savedSpeed;
|
||||
function wireDialogs() {
|
||||
wireModalPairs([
|
||||
{ openBtn: aboutBtn, modal: aboutModal, closeBtn: aboutClose },
|
||||
{ openBtn: helpBtn, modal: helpModal, closeBtn: helpClose },
|
||||
]);
|
||||
// Settings modal keeps custom accordion collapse on close
|
||||
advBtn?.addEventListener("click", () => {
|
||||
if (window.__pikitTest?.forceServiceFormVisible) {
|
||||
// For tests: avoid opening any modal; just ensure form controls are visible
|
||||
addServiceModal?.classList.add("hidden");
|
||||
addServiceModal?.setAttribute("style", "display:none;");
|
||||
window.__pikitTest.forceServiceFormVisible();
|
||||
return;
|
||||
}
|
||||
const savedDur = Number(localStorage.getItem(TOAST_DURATION_KEY));
|
||||
if (!Number.isNaN(savedDur) && savedDur >= 1000 && savedDur <= 15000) {
|
||||
toastDurationMs = savedDur;
|
||||
}
|
||||
const savedFont = localStorage.getItem(FONT_KEY);
|
||||
if (ALLOWED_FONTS.includes(savedFont)) fontChoice = savedFont;
|
||||
} catch (e) {
|
||||
console.warn("Toast settings load failed", e);
|
||||
}
|
||||
if (toastPosSelect) toastPosSelect.value = toastPosition;
|
||||
if (toastAnimSelect) toastAnimSelect.value = toastAnimation;
|
||||
if (toastSpeedInput) toastSpeedInput.value = toastSpeedMs;
|
||||
if (toastDurationInput) toastDurationInput.value = toastDurationMs;
|
||||
if (fontSelect) fontSelect.value = fontChoice;
|
||||
applyToastSettings();
|
||||
applyFontSetting();
|
||||
}
|
||||
|
||||
function persistToastSettings() {
|
||||
try {
|
||||
localStorage.setItem(TOAST_POS_KEY, toastPosition);
|
||||
localStorage.setItem(TOAST_ANIM_KEY, toastAnimation);
|
||||
localStorage.setItem(TOAST_SPEED_KEY, String(toastSpeedMs));
|
||||
localStorage.setItem(TOAST_DURATION_KEY, String(toastDurationMs));
|
||||
localStorage.setItem(FONT_KEY, fontChoice);
|
||||
} catch (e) {
|
||||
console.warn("Toast settings save failed", e);
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(message, type = "info") {
|
||||
if (!toastContainer || !message) return;
|
||||
const t = document.createElement("div");
|
||||
t.className = `toast ${type} anim-${toastAnimation}`;
|
||||
t.textContent = message;
|
||||
toastContainer.appendChild(t);
|
||||
const animOn = document.documentElement.getAttribute("data-anim") !== "off";
|
||||
if (!animOn) {
|
||||
t.classList.add("show");
|
||||
} else {
|
||||
requestAnimationFrame(() => t.classList.add("show"));
|
||||
}
|
||||
const duration = toastDurationMs;
|
||||
setTimeout(() => {
|
||||
const all = Array.from(toastContainer.querySelectorAll(".toast"));
|
||||
const others = all.filter((el) => el !== t && !el.classList.contains("leaving"));
|
||||
const first = new Map(
|
||||
others.map((el) => [el, el.getBoundingClientRect()]),
|
||||
);
|
||||
|
||||
t.classList.add("leaving");
|
||||
// force layout
|
||||
void t.offsetHeight;
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const second = new Map(
|
||||
others.map((el) => [el, el.getBoundingClientRect()]),
|
||||
);
|
||||
others.forEach((el) => {
|
||||
const dy = first.get(el).top - second.get(el).top;
|
||||
if (Math.abs(dy) > 0.5) {
|
||||
el.style.transition = "transform var(--toast-speed, 0.28s) ease";
|
||||
el.style.transform = `translateY(${dy}px)`;
|
||||
requestAnimationFrame(() => {
|
||||
el.style.transform = "";
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const removeDelay = animOn ? toastSpeedMs : 0;
|
||||
setTimeout(() => {
|
||||
t.classList.remove("show");
|
||||
t.remove();
|
||||
// clear transition styling
|
||||
others.forEach((el) => (el.style.transition = ""));
|
||||
}, removeDelay);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
function applyTooltips() {
|
||||
const tips = {
|
||||
updatesFlagTop: "Auto updates status; configure in Settings → Automatic updates.",
|
||||
refreshFlagTop: "Auto-refresh interval; change in Settings → Refresh interval.",
|
||||
tempFlagTop: "CPU temperature status; see details in the hero stats below.",
|
||||
releaseFlagTop: "Pi-Kit release status; open Settings → Updates to install.",
|
||||
themeToggle: "Toggle light or dark theme",
|
||||
helpBtn: "Open quick help",
|
||||
advBtn: "Open settings",
|
||||
animToggle: "Enable or disable dashboard animations",
|
||||
refreshIntervalInput: "Seconds between automatic refreshes (5-120)",
|
||||
refreshIntervalSave: "Save refresh interval",
|
||||
svcName: "Display name for the service card",
|
||||
svcPort: "Port number the service listens on",
|
||||
svcPath: "Optional path like /admin",
|
||||
svcScheme: "Choose HTTP or HTTPS link",
|
||||
svcSelfSigned: "Mark service as using a self-signed certificate",
|
||||
svcNotice: "Optional note shown on the service card",
|
||||
svcNoticeLink: "Optional link for more info about the service",
|
||||
svcAddBtn: "Add the service to the dashboard",
|
||||
updatesToggle: "Turn unattended upgrades on or off",
|
||||
updatesScope: "Select security-only or all updates",
|
||||
updateTimeInput: "Time to download updates (24h)",
|
||||
upgradeTimeInput: "Time to install updates (24h)",
|
||||
updatesCleanup: "Remove unused dependencies after upgrades",
|
||||
updatesBandwidth: "Limit download bandwidth in KB/s (0 = unlimited)",
|
||||
updatesRebootToggle: "Auto-reboot if required by updates",
|
||||
updatesRebootTime: "Scheduled reboot time when auto-reboot is on",
|
||||
updatesRebootUsers: "Allow reboot even if users are logged in",
|
||||
updatesSaveBtn: "Save unattended-upgrades settings",
|
||||
resetConfirm: "Type YES to enable factory reset",
|
||||
resetBtn: "Factory reset this Pi-Kit",
|
||||
menuRename: "Change the service display name",
|
||||
menuPort: "Change the service port",
|
||||
menuPath: "Optional service path",
|
||||
menuScheme: "Switch between HTTP and HTTPS",
|
||||
menuSelfSigned: "Mark the service as self-signed",
|
||||
menuNotice: "Edit the notice text shown on the card",
|
||||
menuNoticeLink: "Optional link for the notice",
|
||||
menuSaveBtn: "Save service changes",
|
||||
menuCancelBtn: "Cancel changes",
|
||||
menuRemoveBtn: "Remove this service",
|
||||
};
|
||||
Object.entries(tips).forEach(([id, text]) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.title = text;
|
||||
advModal.classList.remove("hidden");
|
||||
});
|
||||
advClose?.addEventListener("click", () => {
|
||||
advModal.classList.add("hidden");
|
||||
collapseAccordions();
|
||||
});
|
||||
menuClose.onclick = () => menuModal.classList.add("hidden");
|
||||
addServiceOpen?.addEventListener("click", openAddService);
|
||||
addSvcClose?.addEventListener("click", () => addServiceModal?.classList.add("hidden"));
|
||||
addServiceModal?.addEventListener("click", (e) => {
|
||||
if (e.target === addServiceModal) addServiceModal.classList.add("hidden");
|
||||
});
|
||||
}
|
||||
|
||||
// Testing hook
|
||||
if (typeof window !== "undefined") {
|
||||
window.__pikitTest = window.__pikitTest || {};
|
||||
window.__pikitTest.showBusy = showBusy;
|
||||
window.__pikitTest.hideBusy = hideBusy;
|
||||
window.__pikitTest.exposeServiceForm = () => {
|
||||
if (!addServiceModal) return;
|
||||
const card = addServiceModal.querySelector(".modal-card");
|
||||
if (!card) return;
|
||||
addServiceModal.classList.add("hidden"); // keep overlay out of the way
|
||||
card.style.position = "static";
|
||||
card.style.background = "transparent";
|
||||
card.style.boxShadow = "none";
|
||||
card.style.border = "none";
|
||||
card.style.padding = "0";
|
||||
card.style.margin = "12px auto";
|
||||
card.style.maxWidth = "720px";
|
||||
// Move the form inline so Playwright can see it without the overlay
|
||||
document.body.appendChild(card);
|
||||
};
|
||||
}
|
||||
|
||||
const TOOLTIP_MAP = {
|
||||
updatesFlagTop: "Auto updates status; configure in Settings → Automatic updates.",
|
||||
refreshFlagTop: "Auto-refresh interval; change in Settings → Refresh interval.",
|
||||
tempFlagTop: "CPU temperature status; see details in the hero stats below.",
|
||||
releaseFlagTop: "Pi-Kit release status; open Settings → Updates to install.",
|
||||
themeToggle: "Toggle light or dark theme",
|
||||
helpBtn: "Open quick help",
|
||||
advBtn: "Open settings",
|
||||
animToggle: "Enable or disable dashboard animations",
|
||||
refreshIntervalInput: "Seconds between automatic refreshes (5-120)",
|
||||
refreshIntervalSave: "Save refresh interval",
|
||||
svcName: "Display name for the service card",
|
||||
svcPort: "Port number the service listens on",
|
||||
svcPath: "Optional path like /admin",
|
||||
svcScheme: "Choose HTTP or HTTPS link",
|
||||
svcSelfSigned: "Mark service as using a self-signed certificate",
|
||||
svcNotice: "Optional note shown on the service card",
|
||||
svcNoticeLink: "Optional link for more info about the service",
|
||||
svcAddBtn: "Add the service to the dashboard",
|
||||
updatesToggle: "Turn unattended upgrades on or off",
|
||||
updatesScope: "Select security-only or all updates",
|
||||
updateTimeInput: "Time to download updates (24h)",
|
||||
upgradeTimeInput: "Time to install updates (24h)",
|
||||
updatesCleanup: "Remove unused dependencies after upgrades",
|
||||
updatesBandwidth: "Limit download bandwidth in KB/s (0 = unlimited)",
|
||||
updatesRebootToggle: "Auto-reboot if required by updates",
|
||||
updatesRebootTime: "Scheduled reboot time when auto-reboot is on",
|
||||
updatesRebootUsers: "Allow reboot even if users are logged in",
|
||||
updatesSaveBtn: "Save unattended-upgrades settings",
|
||||
resetConfirm: "Type YES to enable factory reset",
|
||||
resetBtn: "Factory reset this Pi-Kit",
|
||||
menuRename: "Change the service display name",
|
||||
menuPort: "Change the service port",
|
||||
menuPath: "Optional service path",
|
||||
menuScheme: "Switch between HTTP and HTTPS",
|
||||
menuSelfSigned: "Mark the service as self-signed",
|
||||
menuNotice: "Edit the notice text shown on the card",
|
||||
menuNoticeLink: "Optional link for the notice",
|
||||
menuSaveBtn: "Save service changes",
|
||||
menuCancelBtn: "Cancel changes",
|
||||
menuRemoveBtn: "Remove this service",
|
||||
};
|
||||
|
||||
// Clamp name inputs to 30 chars
|
||||
[svcName, menuRename].forEach((el) => {
|
||||
if (!el) return;
|
||||
@@ -316,79 +273,7 @@ function setUpdatesUI(enabled) {
|
||||
updatesStatus.classList.toggle("chip-off", !on);
|
||||
}
|
||||
|
||||
async function loadStatus() {
|
||||
try {
|
||||
const data = await getStatus();
|
||||
lastStatusData = data;
|
||||
renderStats(heroStats, data);
|
||||
renderServices(servicesGrid, data.services, { openAddService });
|
||||
const updatesEnabled =
|
||||
data?.auto_updates?.enabled ?? data.auto_updates_enabled;
|
||||
if (updatesEnabled !== undefined && !isUpdatesDirty()) {
|
||||
setUpdatesUI(updatesEnabled);
|
||||
}
|
||||
|
||||
// Updates chip + reboot note
|
||||
updatesFlagEl(
|
||||
updatesEnabled === undefined ? null : updatesEnabled === true,
|
||||
);
|
||||
const cfg = data.updates_config || {};
|
||||
const rebootReq = data.reboot_required;
|
||||
setTempFlag(data.cpu_temp_c);
|
||||
if (updatesNoteTop) {
|
||||
updatesNoteTop.textContent = "";
|
||||
updatesNoteTop.classList.remove("note-warn");
|
||||
if (rebootReq) {
|
||||
if (cfg.auto_reboot) {
|
||||
updatesNoteTop.textContent = `Reboot scheduled at ${cfg.reboot_time || "02:00"}.`;
|
||||
} else {
|
||||
updatesNoteTop.textContent = "Reboot required. Please reboot when you can.";
|
||||
updatesNoteTop.classList.add("note-warn");
|
||||
}
|
||||
}
|
||||
}
|
||||
if (readyOverlay) {
|
||||
if (data.ready) {
|
||||
readyOverlay.classList.add("hidden");
|
||||
} else {
|
||||
readyOverlay.classList.remove("hidden");
|
||||
// When not ready, retry periodically until API reports ready
|
||||
setTimeout(loadStatus, 3000);
|
||||
}
|
||||
}
|
||||
// Pull Pi-Kit release status after core status
|
||||
releaseUI?.refreshStatus();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
logUi(`Status refresh failed: ${e?.message || e}`, "error");
|
||||
if (!lastStatusData) {
|
||||
renderStats(heroStats, placeholderStatus);
|
||||
}
|
||||
setTimeout(loadStatus, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
function setTempFlag(tempC) {
|
||||
if (!tempFlagTop) return;
|
||||
const t = typeof tempC === "number" ? tempC : null;
|
||||
let label = "Temp: n/a";
|
||||
tempFlagTop.classList.remove("chip-on", "chip-warm", "chip-off");
|
||||
if (t !== null) {
|
||||
if (t < 55) {
|
||||
label = "Temp: OK";
|
||||
tempFlagTop.classList.add("chip-on");
|
||||
} else if (t < 70) {
|
||||
label = "Temp: Warm";
|
||||
tempFlagTop.classList.add("chip-warm");
|
||||
} else {
|
||||
label = "Temp: Hot";
|
||||
tempFlagTop.classList.add("chip-off");
|
||||
}
|
||||
}
|
||||
tempFlagTop.textContent = label;
|
||||
}
|
||||
|
||||
function updatesFlagEl(enabled) {
|
||||
function setUpdatesFlag(enabled) {
|
||||
if (!updatesFlagTop) return;
|
||||
const labelOn = "System updates: On";
|
||||
const labelOff = "System updates: Off";
|
||||
@@ -398,61 +283,6 @@ function updatesFlagEl(enabled) {
|
||||
if (enabled === false) updatesFlagTop.classList.add("chip-off");
|
||||
}
|
||||
|
||||
function wireModals() {
|
||||
advBtn.onclick = () => advModal.classList.remove("hidden");
|
||||
advClose.onclick = () => advModal.classList.add("hidden");
|
||||
helpBtn.onclick = () => helpModal.classList.remove("hidden");
|
||||
helpClose.onclick = () => helpModal.classList.add("hidden");
|
||||
aboutBtn.onclick = () => aboutModal.classList.remove("hidden");
|
||||
aboutClose.onclick = () => aboutModal.classList.add("hidden");
|
||||
menuClose.onclick = () => menuModal.classList.add("hidden");
|
||||
addServiceOpen?.addEventListener("click", openAddService);
|
||||
addSvcClose?.addEventListener("click", () => addServiceModal?.classList.add("hidden"));
|
||||
addServiceModal?.addEventListener("click", (e) => {
|
||||
if (e.target === addServiceModal) addServiceModal.classList.add("hidden");
|
||||
});
|
||||
}
|
||||
|
||||
function showBusy(title = "Working…", text = "This may take a few seconds.") {
|
||||
if (!busyOverlay) return;
|
||||
busyTitle.textContent = title;
|
||||
busyText.textContent = text || "";
|
||||
busyText.classList.toggle("hidden", !text);
|
||||
busyOverlay.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function hideBusy() {
|
||||
busyOverlay?.classList.add("hidden");
|
||||
}
|
||||
|
||||
function confirmAction(title, body) {
|
||||
return new Promise((resolve) => {
|
||||
if (!confirmModal) {
|
||||
const ok = window.confirm(body || title || "Are you sure?");
|
||||
resolve(ok);
|
||||
return;
|
||||
}
|
||||
confirmTitle.textContent = title || "Are you sure?";
|
||||
confirmBody.textContent = body || "";
|
||||
confirmModal.classList.remove("hidden");
|
||||
const done = (val) => {
|
||||
confirmModal.classList.add("hidden");
|
||||
resolve(val);
|
||||
};
|
||||
const okHandler = () => done(true);
|
||||
const cancelHandler = () => done(false);
|
||||
confirmOk.onclick = okHandler;
|
||||
confirmCancel.onclick = cancelHandler;
|
||||
});
|
||||
}
|
||||
|
||||
// Testing hook
|
||||
if (typeof window !== "undefined") {
|
||||
window.__pikitTest = window.__pikitTest || {};
|
||||
window.__pikitTest.showBusy = showBusy;
|
||||
window.__pikitTest.hideBusy = hideBusy;
|
||||
}
|
||||
|
||||
function wireResetAndUpdates() {
|
||||
resetBtn.onclick = async () => {
|
||||
resetBtn.disabled = true;
|
||||
@@ -471,31 +301,6 @@ function wireResetAndUpdates() {
|
||||
});
|
||||
}
|
||||
|
||||
function wireAccordions() {
|
||||
const forceOpen = typeof window !== "undefined" && window.__pikitTest?.forceAccordionsOpen;
|
||||
const accordions = document.querySelectorAll(".accordion");
|
||||
if (forceOpen) {
|
||||
accordions.forEach((a) => a.classList.add("open"));
|
||||
return;
|
||||
}
|
||||
document.querySelectorAll(".accordion-toggle").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const acc = btn.closest(".accordion");
|
||||
if (acc.classList.contains("open")) {
|
||||
acc.classList.remove("open");
|
||||
} else {
|
||||
// Keep a single accordion expanded at a time for readability
|
||||
accordions.forEach((a) => a.classList.remove("open"));
|
||||
acc.classList.add("open");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function collapseAccordions() {
|
||||
document.querySelectorAll(".accordion").forEach((a) => a.classList.remove("open"));
|
||||
}
|
||||
|
||||
function openAddService() {
|
||||
if (addServiceModal) addServiceModal.classList.remove("hidden");
|
||||
document.getElementById("svcName")?.focus();
|
||||
@@ -505,10 +310,17 @@ if (typeof window !== "undefined") {
|
||||
}
|
||||
|
||||
function main() {
|
||||
applyTooltips();
|
||||
wireModals();
|
||||
applyTooltips(TOOLTIP_MAP);
|
||||
// Test convenience: ensure service form elements are visible when hook is set
|
||||
if (window.__pikitTest?.forceServiceFormVisible) {
|
||||
window.__pikitTest.forceServiceFormVisible();
|
||||
window.__pikitTest.exposeServiceForm?.();
|
||||
}
|
||||
wireDialogs();
|
||||
wireResetAndUpdates();
|
||||
wireAccordions();
|
||||
wireAccordions({
|
||||
forceOpen: typeof window !== "undefined" && window.__pikitTest?.forceAccordionsOpen,
|
||||
});
|
||||
releaseUI = initReleaseUI({
|
||||
showToast,
|
||||
showBusy,
|
||||
@@ -516,14 +328,6 @@ function main() {
|
||||
confirmAction,
|
||||
logUi,
|
||||
});
|
||||
loadToastSettings();
|
||||
|
||||
if (advClose) {
|
||||
advClose.onclick = () => {
|
||||
advModal.classList.add("hidden");
|
||||
collapseAccordions();
|
||||
};
|
||||
}
|
||||
|
||||
initServiceControls({
|
||||
gridEl: servicesGrid,
|
||||
@@ -598,98 +402,6 @@ function main() {
|
||||
console.error("Diag init failed", e);
|
||||
});
|
||||
|
||||
// Toast controls
|
||||
toastPosSelect?.addEventListener("change", () => {
|
||||
const val = toastPosSelect.value;
|
||||
if (ALLOWED_TOAST_POS.includes(val)) {
|
||||
toastPosition = val;
|
||||
applyToastSettings();
|
||||
persistToastSettings();
|
||||
} else {
|
||||
toastPosSelect.value = toastPosition;
|
||||
showToast("Invalid toast position", "error");
|
||||
}
|
||||
});
|
||||
toastAnimSelect?.addEventListener("change", () => {
|
||||
let val = toastAnimSelect.value;
|
||||
if (val === "slide-up" || val === "slide-left" || val === "slide-right") val = "slide-in"; // migrate old label if cached
|
||||
if (ALLOWED_TOAST_ANIM.includes(val)) {
|
||||
toastAnimation = val;
|
||||
persistToastSettings();
|
||||
} else {
|
||||
toastAnimSelect.value = toastAnimation;
|
||||
showToast("Invalid toast animation", "error");
|
||||
}
|
||||
});
|
||||
const clampSpeed = (val) => Math.min(3000, Math.max(100, val));
|
||||
const clampDuration = (val) => Math.min(15000, Math.max(1000, val));
|
||||
|
||||
toastSpeedInput?.addEventListener("input", () => {
|
||||
const raw = toastSpeedInput.value;
|
||||
if (raw === "") return; // allow typing
|
||||
const val = Number(raw);
|
||||
if (Number.isNaN(val) || val < 100 || val > 3000) return; // wait until valid
|
||||
toastSpeedMs = val;
|
||||
applyToastSettings();
|
||||
persistToastSettings();
|
||||
});
|
||||
toastSpeedInput?.addEventListener("blur", () => {
|
||||
const raw = toastSpeedInput.value;
|
||||
if (raw === "") {
|
||||
toastSpeedInput.value = toastSpeedMs;
|
||||
return;
|
||||
}
|
||||
const val = Number(raw);
|
||||
if (Number.isNaN(val) || val < 100 || val > 3000) {
|
||||
toastSpeedMs = clampSpeed(toastSpeedMs);
|
||||
toastSpeedInput.value = toastSpeedMs;
|
||||
showToast("Toast speed must be 100-3000 ms", "error");
|
||||
return;
|
||||
}
|
||||
toastSpeedMs = val;
|
||||
toastSpeedInput.value = toastSpeedMs;
|
||||
applyToastSettings();
|
||||
persistToastSettings();
|
||||
});
|
||||
|
||||
toastDurationInput?.addEventListener("input", () => {
|
||||
const raw = toastDurationInput.value;
|
||||
if (raw === "") return; // allow typing
|
||||
const val = Number(raw);
|
||||
if (Number.isNaN(val) || val < 1000 || val > 15000) return; // wait until valid
|
||||
toastDurationMs = val;
|
||||
persistToastSettings();
|
||||
});
|
||||
toastDurationInput?.addEventListener("blur", () => {
|
||||
const raw = toastDurationInput.value;
|
||||
if (raw === "") {
|
||||
toastDurationInput.value = toastDurationMs;
|
||||
return;
|
||||
}
|
||||
const val = Number(raw);
|
||||
if (Number.isNaN(val) || val < 1000 || val > 15000) {
|
||||
toastDurationMs = clampDuration(toastDurationMs);
|
||||
toastDurationInput.value = toastDurationMs;
|
||||
showToast("Toast duration must be 1000-15000 ms", "error");
|
||||
return;
|
||||
}
|
||||
toastDurationMs = val;
|
||||
toastDurationInput.value = toastDurationMs;
|
||||
persistToastSettings();
|
||||
});
|
||||
fontSelect?.addEventListener("change", () => {
|
||||
const val = fontSelect.value;
|
||||
if (!ALLOWED_FONTS.includes(val)) {
|
||||
fontSelect.value = fontChoice;
|
||||
showToast("Invalid font choice", "error");
|
||||
return;
|
||||
}
|
||||
fontChoice = val;
|
||||
applyFontSetting();
|
||||
persistToastSettings();
|
||||
});
|
||||
toastTestBtn?.addEventListener("click", () => showToast("This is a test toast", "info"));
|
||||
|
||||
initUpdateSettings({
|
||||
elements: {
|
||||
updatesStatus,
|
||||
|
||||
Reference in New Issue
Block a user