1159 lines
45 KiB
JavaScript
1159 lines
45 KiB
JavaScript
import {
|
|
startNotificationClient,
|
|
subscribeNotifications,
|
|
subscribeClientEvents,
|
|
subscribeNotificationsCleared,
|
|
subscribeReady,
|
|
subscribeStatus,
|
|
markAllNotificationsRead,
|
|
getClientEventNotificationEnabled,
|
|
setClientEventNotificationEnabled,
|
|
requestDesktopNotificationPermission,
|
|
setDesktopNotificationsEnabled,
|
|
} from "./notify-client.js";
|
|
import { createMonacoEditorAdapter, loadMonaco } from "./monaco-loader.js";
|
|
import { TabulatorFull as Tabulator } from "/vendor/tabulator/tabulator_esm.min.js";
|
|
|
|
// ── DOM refs ──────────────────────────────────────────────────────────────────
|
|
const wsStatus = document.getElementById("ws-status");
|
|
const tableEl = document.getElementById("notification-table");
|
|
const emptyState = document.getElementById("empty-state");
|
|
const notificationScopeHint = document.getElementById("notification-scope-hint");
|
|
const searchInput = document.getElementById("notification-search");
|
|
const resultHint = document.getElementById("notification-result-hint");
|
|
|
|
// Keyword section
|
|
const keywordSection = document.getElementById("keyword-section");
|
|
const keywordInput = document.getElementById("keyword-input");
|
|
const clipboardEnabledInput = document.getElementById("clipboard-enabled");
|
|
const saveKeywordsBtn = document.getElementById("save-keywords");
|
|
const keywordHint = document.getElementById("keyword-hint");
|
|
const antiSpamMaxHitsInput = document.getElementById("antispam-max-hits");
|
|
const antiSpamWindowInput = document.getElementById("antispam-window");
|
|
const antiSpamCooldownInput = document.getElementById("antispam-cooldown");
|
|
|
|
// Webhook section
|
|
const webhookEnabledInput = document.getElementById("webhook-enabled");
|
|
const webhookUrlInput = document.getElementById("webhook-url");
|
|
const webhookTemplateInput = document.getElementById("webhook-template");
|
|
const saveWebhookBtn = document.getElementById("save-webhook");
|
|
const webhookUrlToggle = document.getElementById("webhook-url-toggle");
|
|
const resetWebhookTemplateBtn = document.getElementById("reset-webhook-template");
|
|
const formatWebhookTemplateBtn = document.getElementById("format-webhook-template");
|
|
const previewWebhookTemplateBtn = document.getElementById("preview-webhook-template");
|
|
const webhookTemplatePreview = document.getElementById("webhook-template-preview");
|
|
|
|
// Telegram section
|
|
const telegramEnabledInput = document.getElementById("telegram-enabled");
|
|
const telegramBotTokenInput = document.getElementById("telegram-bot-token");
|
|
const telegramChatIdInput = document.getElementById("telegram-chat-id");
|
|
const telegramTemplateInput = document.getElementById("telegram-template");
|
|
const saveTelegramBtn = document.getElementById("save-telegram");
|
|
const telegramTokenToggle = document.getElementById("telegram-token-toggle");
|
|
const telegramChatidToggle = document.getElementById("telegram-chatid-toggle");
|
|
const resetTelegramTemplateBtn = document.getElementById("reset-telegram-template");
|
|
const previewTelegramTemplateBtn = document.getElementById("preview-telegram-template");
|
|
const telegramTemplatePreview = document.getElementById("telegram-template-preview");
|
|
|
|
const eventNotifOnlineInput = document.getElementById("event-notif-online");
|
|
const eventNotifOfflineInput = document.getElementById("event-notif-offline");
|
|
const eventNotifPurgatoryInput = document.getElementById("event-notif-purgatory");
|
|
const saveEventNotifsBtn = document.getElementById("save-event-notifs");
|
|
|
|
const clientEventWebhookInput = document.getElementById("client-event-webhook");
|
|
const clientEventTelegramInput = document.getElementById("client-event-telegram");
|
|
const clientEventPushInput = document.getElementById("client-event-push");
|
|
const saveEventChannelsBtn = document.getElementById("save-event-channels");
|
|
|
|
// Browser permission status bar
|
|
const desktopNotifStatusBar = document.getElementById("desktop-notif-status-bar");
|
|
const desktopNotifStatusIcon = document.getElementById("desktop-notif-status-icon");
|
|
const desktopNotifStatusText = document.getElementById("desktop-notif-status-text");
|
|
const desktopNotifEnableBtn = document.getElementById("desktop-notif-enable-btn");
|
|
const desktopNotifDeniedHint = document.getElementById("desktop-notif-denied-hint");
|
|
|
|
// Preview modal
|
|
const panel = document.getElementById("notification-panel");
|
|
const previewModal = document.getElementById("notification-preview-modal");
|
|
const previewModalImg = document.getElementById("notification-preview-image");
|
|
const previewModalClose = document.getElementById("notification-preview-close");
|
|
|
|
const MAX_ROWS = 200;
|
|
|
|
// Defaults loaded from /api/notifications/my-settings
|
|
let defaultWebhookTemplate = "";
|
|
let defaultTelegramTemplate = "";
|
|
let webhookTemplateEditor = null;
|
|
let notificationTable = null;
|
|
|
|
function tryFormatJsonText(text) {
|
|
const source = String(text || "").trim();
|
|
if (!source) return "";
|
|
try {
|
|
return JSON.stringify(JSON.parse(source), null, 2);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function initWebhookTemplateEditor() {
|
|
if (!webhookTemplateInput) return;
|
|
try {
|
|
const monaco = await loadMonaco();
|
|
const host = document.createElement("div");
|
|
host.className = "w-full rounded-lg border border-slate-800 overflow-hidden";
|
|
host.style.height = "180px";
|
|
webhookTemplateInput.classList.add("hidden");
|
|
webhookTemplateInput.insertAdjacentElement("afterend", host);
|
|
|
|
monaco.editor.defineTheme("overlord-json", {
|
|
base: "vs-dark",
|
|
inherit: true,
|
|
rules: [],
|
|
colors: {
|
|
"editor.background": "#020617",
|
|
"editor.foreground": "#e2e8f0",
|
|
"editor.lineHighlightBackground": "#0f172a",
|
|
"editorCursor.foreground": "#38bdf8",
|
|
"editor.selectionBackground": "#2563eb66",
|
|
"editorGutter.background": "#020617",
|
|
},
|
|
});
|
|
|
|
const editor = monaco.editor.create(host, {
|
|
value: webhookTemplateInput.value || "",
|
|
language: "json",
|
|
theme: "overlord-json",
|
|
automaticLayout: true,
|
|
fontFamily: '"JetBrains Mono", Consolas, "Courier New", monospace',
|
|
fontSize: 12,
|
|
minimap: { enabled: false },
|
|
scrollBeyondLastLine: false,
|
|
tabSize: 2,
|
|
insertSpaces: true,
|
|
wordWrap: "on",
|
|
padding: { top: 8, bottom: 8 },
|
|
});
|
|
|
|
webhookTemplateEditor = createMonacoEditorAdapter(editor, monaco);
|
|
editor.onDidBlurEditorWidget(() => {
|
|
const current = webhookTemplateEditor.getValue();
|
|
const formatted = tryFormatJsonText(current);
|
|
if (formatted !== null && formatted !== current) {
|
|
const position = editor.getPosition();
|
|
webhookTemplateEditor.setValue(formatted);
|
|
if (position) editor.setPosition(position);
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.warn("Monaco webhook editor unavailable; falling back to textarea", err);
|
|
webhookTemplateEditor = null;
|
|
}
|
|
}
|
|
|
|
function getWebhookTemplateValue() {
|
|
if (webhookTemplateEditor) return webhookTemplateEditor.getValue();
|
|
return webhookTemplateInput?.value || "";
|
|
}
|
|
|
|
function setWebhookTemplateValue(text) {
|
|
const value = text || "";
|
|
const formatted = tryFormatJsonText(value);
|
|
const nextValue = formatted ?? value;
|
|
if (webhookTemplateEditor) {
|
|
webhookTemplateEditor.setValue(nextValue, -1);
|
|
return;
|
|
}
|
|
if (webhookTemplateInput) webhookTemplateInput.value = nextValue;
|
|
}
|
|
|
|
function focusWebhookTemplateEditor() {
|
|
if (webhookTemplateEditor) webhookTemplateEditor.focus();
|
|
}
|
|
|
|
// ── Sample data for template previews ────────────────────────────────────────
|
|
const SAMPLE_RECORD = {
|
|
title: "Online Banking — Secure Login",
|
|
keyword: "bank",
|
|
clientId: "abc123def456",
|
|
user: "john.doe",
|
|
host: "DESKTOP-7G2ABK1",
|
|
process: "chrome.exe",
|
|
os: "windows",
|
|
pid: "4392",
|
|
ts: String(Date.now()),
|
|
};
|
|
|
|
function renderSampleTemplate(template, defaultTpl) {
|
|
const tpl = template && template.trim() ? template : defaultTpl;
|
|
return Object.entries(SAMPLE_RECORD).reduce(
|
|
(s, [k, v]) => s.replaceAll(`{${k}}`, v),
|
|
tpl,
|
|
);
|
|
}
|
|
|
|
// ── Status indicator ──────────────────────────────────────────────────────────
|
|
function setStatus(text, tone = "neutral") {
|
|
if (!wsStatus) return;
|
|
const icon = wsStatus.querySelector("i");
|
|
const label = wsStatus.querySelector("span");
|
|
if (label) label.textContent = text;
|
|
if (icon) {
|
|
icon.className = "fa-solid fa-circle-dot";
|
|
icon.classList.remove("text-green-400", "text-red-400", "text-yellow-400", "text-slate-400");
|
|
if (tone === "ok") icon.classList.add("text-green-400");
|
|
else if (tone === "error") icon.classList.add("text-red-400");
|
|
else if (tone === "warn") icon.classList.add("text-yellow-400");
|
|
else icon.classList.add("text-slate-400");
|
|
}
|
|
}
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
function formatTime(ts) {
|
|
if (ts == null) return "-";
|
|
let normalized = typeof ts === "bigint" ? Number(ts) : Number(ts);
|
|
if (!Number.isFinite(normalized)) return "-";
|
|
const date = new Date(normalized);
|
|
if (Number.isNaN(date.getTime())) return "-";
|
|
return date.toLocaleString();
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement("div");
|
|
div.textContent = text == null ? "" : String(text);
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function wireToggle(inputEl, btnEl) {
|
|
if (!inputEl || !btnEl) return;
|
|
btnEl.addEventListener("click", () => {
|
|
const show = inputEl.type === "password";
|
|
inputEl.type = show ? "text" : "password";
|
|
const icon = btnEl.querySelector("i");
|
|
if (icon) {
|
|
icon.className = show ? "fa-solid fa-eye-slash" : "fa-solid fa-eye";
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Unified table state (notifications + client events) ──────────────────────
|
|
const tableState = {
|
|
entries: new Map(),
|
|
search: "",
|
|
sortBy: "ts",
|
|
sortDir: "desc",
|
|
};
|
|
|
|
let clientEventCounter = 0;
|
|
|
|
function getEntryUid(item, kind) {
|
|
if (kind === "event") {
|
|
return `event:${item.clientId || ""}:${item.event || ""}:${item.ts || 0}:${++clientEventCounter}`;
|
|
}
|
|
return `notification:${item.id || `${item.clientId || ""}:${item.ts || ""}:${item.title || ""}`}`;
|
|
}
|
|
|
|
function getSortValue(entry, key) {
|
|
const item = entry.item;
|
|
if (key === "ts") return Number(item.ts) || 0;
|
|
if (key === "source") {
|
|
if (entry.kind === "event") return `event:${item.event || ""}`;
|
|
return `notif:${item.category || ""}`;
|
|
}
|
|
const value = item[key];
|
|
return value == null ? "" : String(value).toLowerCase();
|
|
}
|
|
|
|
function compareEntries(a, b) {
|
|
const key = tableState.sortBy;
|
|
const av = getSortValue(a, key);
|
|
const bv = getSortValue(b, key);
|
|
let cmp;
|
|
if (typeof av === "number" && typeof bv === "number") {
|
|
cmp = av - bv;
|
|
} else {
|
|
cmp = String(av).localeCompare(String(bv));
|
|
}
|
|
if (cmp === 0) {
|
|
cmp = (Number(a.item.ts) || 0) - (Number(b.item.ts) || 0);
|
|
}
|
|
return tableState.sortDir === "asc" ? cmp : -cmp;
|
|
}
|
|
|
|
function sourceHtml(entry) {
|
|
if (entry.kind === "event") {
|
|
return CLIENT_EVENT_BADGE[entry.item.event] ||
|
|
`<span class="text-xs text-slate-400">${escapeHtml(entry.item.event)}</span>`;
|
|
}
|
|
const isClipboard = entry.item.category === "clipboard";
|
|
return isClipboard
|
|
? `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-violet-900/60 text-violet-300 border border-violet-700/50"><i class="fa-solid fa-clipboard text-xs"></i> clipboard</span>`
|
|
: `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-blue-900/60 text-blue-300 border border-blue-700/50"><i class="fa-solid fa-desktop text-xs"></i> window</span>`;
|
|
}
|
|
|
|
function entryToRow(entry) {
|
|
const item = entry.item;
|
|
return {
|
|
uid: entry.uid,
|
|
kind: entry.kind,
|
|
item,
|
|
isLive: entry.isLive,
|
|
ts: Number(item.ts) || 0,
|
|
clientId: item.clientId || "",
|
|
user: item.user || "-",
|
|
title: entry.kind === "event" ? "client event" : (item.title || "-"),
|
|
process: entry.kind === "event" ? (item.os || "-") : (item.process || "-"),
|
|
keyword: entry.kind === "event" ? "-" : (item.keyword || "-"),
|
|
source: entry.kind === "event" ? (item.event || "") : (item.category || "window"),
|
|
sourceHtml: sourceHtml(entry),
|
|
};
|
|
}
|
|
|
|
function entryMatchesSearch(entry, query) {
|
|
if (!query) return true;
|
|
const item = entry.item;
|
|
const haystack = [
|
|
item.clientId,
|
|
item.user,
|
|
item.host,
|
|
item.title,
|
|
item.process,
|
|
item.processPath,
|
|
item.keyword,
|
|
entry.kind === "event" ? item.event : item.category,
|
|
item.os,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")
|
|
.toLowerCase();
|
|
return haystack.includes(query);
|
|
}
|
|
|
|
function applyTableView() {
|
|
const q = tableState.search.trim().toLowerCase();
|
|
const all = Array.from(tableState.entries.values());
|
|
const filtered = q ? all.filter((entry) => entryMatchesSearch(entry, q)) : all;
|
|
filtered.sort(compareEntries);
|
|
const rows = filtered.map(entryToRow);
|
|
if (notificationTable) notificationTable.replaceData(rows);
|
|
|
|
if (emptyState) {
|
|
if (all.length === 0) {
|
|
emptyState.textContent = "No notifications yet.";
|
|
emptyState.classList.remove("hidden");
|
|
} else if (filtered.length === 0) {
|
|
emptyState.textContent = "No notifications match the current search.";
|
|
emptyState.classList.remove("hidden");
|
|
} else {
|
|
emptyState.classList.add("hidden");
|
|
}
|
|
}
|
|
|
|
if (resultHint) {
|
|
if (q) {
|
|
resultHint.textContent = `${filtered.length} of ${all.length}`;
|
|
} else {
|
|
resultHint.textContent = all.length > 0 ? `${all.length} total` : "";
|
|
}
|
|
}
|
|
}
|
|
|
|
function trimEntries() {
|
|
if (tableState.entries.size <= MAX_ROWS) return;
|
|
const ordered = Array.from(tableState.entries.entries())
|
|
.sort((a, b) => (Number(b[1].item.ts) || 0) - (Number(a[1].item.ts) || 0));
|
|
const keep = new Set(ordered.slice(0, MAX_ROWS).map(([uid]) => uid));
|
|
for (const uid of tableState.entries.keys()) {
|
|
if (!keep.has(uid)) tableState.entries.delete(uid);
|
|
}
|
|
}
|
|
|
|
function upsertEntry(item, kind, isLive) {
|
|
const uid = getEntryUid(item, kind);
|
|
const existing = tableState.entries.get(uid);
|
|
if (existing) {
|
|
existing.item = { ...existing.item, ...item };
|
|
return existing;
|
|
}
|
|
const entry = { uid, item, kind, isLive };
|
|
tableState.entries.set(uid, entry);
|
|
trimEntries();
|
|
return entry;
|
|
}
|
|
|
|
function addNotification(item, isLive) {
|
|
upsertEntry(item, "notification", isLive);
|
|
applyTableView();
|
|
}
|
|
|
|
function addClientEvent(item) {
|
|
upsertEntry(item, "event", true);
|
|
applyTableView();
|
|
}
|
|
|
|
function clearTable() {
|
|
tableState.entries.clear();
|
|
applyTableView();
|
|
}
|
|
|
|
function removeEntriesForClient(clientId) {
|
|
if (!clientId) return;
|
|
let removed = false;
|
|
for (const [uid, entry] of tableState.entries) {
|
|
if (entry.item?.clientId === clientId) {
|
|
tableState.entries.delete(uid);
|
|
removed = true;
|
|
}
|
|
}
|
|
if (removed) applyTableView();
|
|
}
|
|
|
|
// ── Client ID cell (collapsed by default, click to expand) ──────────────────
|
|
const CLIENT_ID_SHORT_LEN = 8;
|
|
|
|
function clientIdCellHtml(clientId) {
|
|
const id = String(clientId || "");
|
|
if (!id) {
|
|
return `<td class="py-2 pr-4 whitespace-nowrap text-slate-500">-</td>`;
|
|
}
|
|
if (id.length <= CLIENT_ID_SHORT_LEN) {
|
|
return `<td class="py-2 pr-4 whitespace-nowrap font-mono text-xs text-slate-300">${escapeHtml(id)}</td>`;
|
|
}
|
|
const safeFull = escapeHtml(id);
|
|
const safeShort = escapeHtml(id.slice(0, CLIENT_ID_SHORT_LEN));
|
|
return `<td class="py-2 pr-4 whitespace-nowrap"><button type="button" class="client-id-toggle inline-flex items-center gap-1 font-mono text-xs px-2 py-0.5 rounded border border-slate-700 bg-slate-900/80 hover:bg-slate-800 hover:border-slate-600 text-slate-300" data-full="${safeFull}" data-short="${safeShort}" title="${safeFull} (click to expand)"><span class="client-id-text">${safeShort}<span class="text-slate-500">…</span></span><i class="fa-solid fa-chevron-right text-[10px] text-slate-500"></i></button></td>`;
|
|
}
|
|
|
|
function clientIdFormatter(cell) {
|
|
const id = String(cell.getValue() || "");
|
|
if (!id) return `<span class="text-slate-500">-</span>`;
|
|
if (id.length <= CLIENT_ID_SHORT_LEN) {
|
|
return `<span class="font-mono text-xs text-slate-300">${escapeHtml(id)}</span>`;
|
|
}
|
|
const safeFull = escapeHtml(id);
|
|
const safeShort = escapeHtml(id.slice(0, CLIENT_ID_SHORT_LEN));
|
|
return `<button type="button" class="client-id-toggle inline-flex items-center gap-1 font-mono text-xs px-2 py-0.5 rounded border border-slate-700 bg-slate-900/80 hover:bg-slate-800 hover:border-slate-600 text-slate-300" data-full="${safeFull}" data-short="${safeShort}" title="${safeFull} (click to expand)"><span class="client-id-text">${safeShort}<span class="text-slate-500">...</span></span><i class="fa-solid fa-chevron-right text-[10px] text-slate-500"></i></button>`;
|
|
}
|
|
|
|
function previewFormatter(cell) {
|
|
const row = cell.getRow().getData();
|
|
const item = row.item || {};
|
|
const wrapper = document.createElement("div");
|
|
if (row.kind === "event") {
|
|
wrapper.textContent = "";
|
|
return wrapper;
|
|
}
|
|
|
|
const notificationId = item?.id || "";
|
|
const skipFetch = !notificationId || (!row.isLive && !item?.screenshotId);
|
|
if (skipFetch) {
|
|
wrapper.textContent = "-";
|
|
wrapper.className = "text-slate-500";
|
|
return wrapper;
|
|
}
|
|
|
|
if (item._previewObjectUrl) {
|
|
const img = createPreviewImage(item._previewObjectUrl);
|
|
wrapper.appendChild(img);
|
|
return wrapper;
|
|
}
|
|
|
|
wrapper.textContent = "Loading...";
|
|
wrapper.className = "text-slate-500";
|
|
let attempts = 0;
|
|
const maxAttempts = 5;
|
|
const fetchPreview = async () => {
|
|
attempts += 1;
|
|
try {
|
|
const url = `/api/notifications/${encodeURIComponent(notificationId)}/screenshot?ts=${Date.now()}`;
|
|
const res = await fetch(url, { cache: "no-store" });
|
|
if (!res.ok) {
|
|
if (res.status === 404 && attempts < maxAttempts) {
|
|
setTimeout(fetchPreview, 1000 * attempts);
|
|
return;
|
|
}
|
|
wrapper.textContent = "-";
|
|
wrapper.className = "text-slate-500";
|
|
return;
|
|
}
|
|
const blob = await res.blob();
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
item._previewObjectUrl = objectUrl;
|
|
wrapper.innerHTML = "";
|
|
wrapper.className = "";
|
|
wrapper.appendChild(createPreviewImage(objectUrl));
|
|
} catch {
|
|
if (attempts < maxAttempts) {
|
|
setTimeout(fetchPreview, 1000 * attempts);
|
|
return;
|
|
}
|
|
wrapper.textContent = "-";
|
|
wrapper.className = "text-slate-500";
|
|
}
|
|
};
|
|
fetchPreview();
|
|
return wrapper;
|
|
}
|
|
|
|
function createPreviewImage(objectUrl) {
|
|
const img = document.createElement("img");
|
|
img.className = "max-h-32 w-auto rounded border border-slate-800/80 cursor-zoom-in opacity-0";
|
|
img.loading = "lazy";
|
|
img.alt = "Notification screenshot";
|
|
img.src = objectUrl;
|
|
img.dataset.previewUrl = objectUrl;
|
|
img.addEventListener("load", () => img.classList.remove("opacity-0"));
|
|
img.addEventListener("click", () => {
|
|
if (!previewModal || !previewModalImg) return;
|
|
previewModalImg.src = img.dataset.previewUrl || objectUrl;
|
|
previewModal.classList.remove("hidden");
|
|
previewModal.classList.add("flex");
|
|
});
|
|
if (img.decode) img.decode().catch(() => {});
|
|
return img;
|
|
}
|
|
|
|
// ── Notification row factory ─────────────────────────────────────────────────
|
|
function createNotificationRowElement(item, isLive) {
|
|
const isClipboard = item.category === "clipboard";
|
|
const sourceBadge = isClipboard
|
|
? `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-violet-900/60 text-violet-300 border border-violet-700/50"><i class="fa-solid fa-clipboard text-xs"></i> clipboard</span>`
|
|
: `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-blue-900/60 text-blue-300 border border-blue-700/50"><i class="fa-solid fa-desktop text-xs"></i> window</span>`;
|
|
const row = document.createElement("tr");
|
|
row.className = "border-t border-slate-800/60";
|
|
row.innerHTML = `
|
|
<td class="py-2 pr-4 whitespace-nowrap text-slate-400">${formatTime(item.ts)}</td>
|
|
${clientIdCellHtml(item.clientId)}
|
|
<td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.user || "-")}</td>
|
|
<td class="py-2 pr-4 max-w-xl truncate" title="${escapeHtml(item.title || "")}">${escapeHtml(item.title || "-")}</td>
|
|
<td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.process || "-")}</td>
|
|
<td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.keyword || "-")}</td>
|
|
<td class="py-2 pr-4 whitespace-nowrap">${sourceBadge}</td>
|
|
<td class="py-2 pr-4"><div class="preview-slot"></div></td>
|
|
`;
|
|
|
|
const preview = row.querySelector(".preview-slot");
|
|
if (preview) {
|
|
const notificationId = item?.id || "";
|
|
const skipFetch = !notificationId || (!isLive && !item?.screenshotId);
|
|
if (skipFetch) {
|
|
preview.textContent = "-";
|
|
preview.className = "text-slate-500";
|
|
} else {
|
|
preview.textContent = "Loading...";
|
|
preview.className = "text-slate-500";
|
|
const img = document.createElement("img");
|
|
img.className = "max-h-32 w-auto rounded border border-slate-800/80 cursor-zoom-in";
|
|
img.loading = "lazy";
|
|
img.alt = "Notification screenshot";
|
|
|
|
let attempts = 0;
|
|
const maxAttempts = 5;
|
|
const fetchPreview = async () => {
|
|
attempts += 1;
|
|
try {
|
|
const url = `/api/notifications/${encodeURIComponent(notificationId)}/screenshot?ts=${Date.now()}`;
|
|
const res = await fetch(url, { cache: "no-store" });
|
|
if (!res.ok) {
|
|
if (res.status === 404 && attempts < maxAttempts) {
|
|
setTimeout(fetchPreview, 1000 * attempts);
|
|
return;
|
|
}
|
|
preview.textContent = "-";
|
|
preview.className = "text-slate-500";
|
|
return;
|
|
}
|
|
const blob = await res.blob();
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
img.classList.add("opacity-0");
|
|
preview.innerHTML = "";
|
|
preview.className = "";
|
|
preview.appendChild(img);
|
|
img.addEventListener("load", () => img.classList.remove("opacity-0"));
|
|
img.addEventListener("error", () => {
|
|
preview.textContent = "-";
|
|
preview.className = "text-slate-500";
|
|
URL.revokeObjectURL(objectUrl);
|
|
});
|
|
img.src = objectUrl;
|
|
img.dataset.previewUrl = objectUrl;
|
|
if (img.decode) img.decode().catch(() => {});
|
|
img.addEventListener("click", () => {
|
|
if (!previewModal || !previewModalImg) return;
|
|
previewModalImg.src = img.dataset.previewUrl || objectUrl;
|
|
previewModal.classList.remove("hidden");
|
|
previewModal.classList.add("flex");
|
|
});
|
|
} catch {
|
|
if (attempts < maxAttempts) {
|
|
setTimeout(fetchPreview, 1000 * attempts);
|
|
return;
|
|
}
|
|
preview.textContent = "-";
|
|
preview.className = "text-slate-500";
|
|
}
|
|
};
|
|
fetchPreview();
|
|
}
|
|
}
|
|
|
|
return row;
|
|
}
|
|
|
|
// ── Keyword section ───────────────────────────────────────────────────────────
|
|
function parseKeywords(text) {
|
|
return text.split(/\r?\n/).map((k) => k.trim()).filter(Boolean);
|
|
}
|
|
|
|
function renderKeywordHint(count) {
|
|
if (!keywordHint) return;
|
|
keywordHint.textContent = `${count} keyword${count === 1 ? "" : "s"}`;
|
|
}
|
|
|
|
async function loadKeywords() {
|
|
if (!keywordInput) return;
|
|
try {
|
|
const res = await fetch("/api/notifications/config");
|
|
if (!res.ok) return;
|
|
const data = await res.json();
|
|
const keywords = data?.notifications?.keywords || [];
|
|
keywordInput.value = keywords.join("\n");
|
|
renderKeywordHint(keywords.length);
|
|
if (clipboardEnabledInput) {
|
|
clipboardEnabledInput.checked = data?.notifications?.clipboardEnabled === true;
|
|
}
|
|
if (antiSpamMaxHitsInput) {
|
|
antiSpamMaxHitsInput.value = data?.notifications?.antiSpamMaxHits ?? 15;
|
|
}
|
|
if (antiSpamWindowInput) {
|
|
antiSpamWindowInput.value = Math.round((data?.notifications?.antiSpamWindowMs ?? 600000) / 60000);
|
|
}
|
|
if (antiSpamCooldownInput) {
|
|
antiSpamCooldownInput.value = Math.round((data?.notifications?.antiSpamCooldownMs ?? 600000) / 60000);
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
function wireKeywordSave() {
|
|
if (!saveKeywordsBtn || !keywordInput) return;
|
|
saveKeywordsBtn.addEventListener("click", async () => {
|
|
const keywords = parseKeywords(keywordInput.value);
|
|
const clipboardEnabled = clipboardEnabledInput ? clipboardEnabledInput.checked : false;
|
|
const payload = { keywords, clipboardEnabled };
|
|
if (antiSpamMaxHitsInput) {
|
|
payload.antiSpamMaxHits = Math.max(1, parseInt(antiSpamMaxHitsInput.value, 10) || 15);
|
|
}
|
|
if (antiSpamWindowInput) {
|
|
payload.antiSpamWindowMs = Math.max(1, parseInt(antiSpamWindowInput.value, 10) || 10) * 60000;
|
|
}
|
|
if (antiSpamCooldownInput) {
|
|
payload.antiSpamCooldownMs = Math.max(1, parseInt(antiSpamCooldownInput.value, 10) || 10) * 60000;
|
|
}
|
|
try {
|
|
const res = await fetch("/api/notifications/config", {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
if (!res.ok) {
|
|
window.showToast?.("Failed to save keywords", "error", 4000);
|
|
return;
|
|
}
|
|
const data = await res.json();
|
|
const updated = data?.notifications?.keywords || keywords;
|
|
keywordInput.value = updated.join("\n");
|
|
renderKeywordHint(updated.length);
|
|
if (clipboardEnabledInput && typeof data?.notifications?.clipboardEnabled === "boolean") {
|
|
clipboardEnabledInput.checked = data.notifications.clipboardEnabled;
|
|
}
|
|
if (antiSpamMaxHitsInput && data?.notifications?.antiSpamMaxHits) {
|
|
antiSpamMaxHitsInput.value = data.notifications.antiSpamMaxHits;
|
|
}
|
|
if (antiSpamWindowInput && data?.notifications?.antiSpamWindowMs) {
|
|
antiSpamWindowInput.value = Math.round(data.notifications.antiSpamWindowMs / 60000);
|
|
}
|
|
if (antiSpamCooldownInput && data?.notifications?.antiSpamCooldownMs) {
|
|
antiSpamCooldownInput.value = Math.round(data.notifications.antiSpamCooldownMs / 60000);
|
|
}
|
|
window.showToast?.("Keywords updated", "success", 3000);
|
|
} catch {
|
|
window.showToast?.("Failed to save keywords", "error", 4000);
|
|
}
|
|
});
|
|
|
|
keywordInput.addEventListener("input", () => {
|
|
renderKeywordHint(parseKeywords(keywordInput.value).length);
|
|
});
|
|
}
|
|
|
|
// ── Per-user settings ─────────────────────────────────────────────────────────
|
|
function applyMySettings(settings) {
|
|
if (webhookEnabledInput) webhookEnabledInput.checked = !!settings.webhook_enabled;
|
|
if (webhookUrlInput) webhookUrlInput.value = settings.webhook_url || "";
|
|
setWebhookTemplateValue(settings.webhook_template || "");
|
|
if (telegramEnabledInput) telegramEnabledInput.checked = !!settings.telegram_enabled;
|
|
if (telegramBotTokenInput) telegramBotTokenInput.value = settings.telegram_bot_token || "";
|
|
if (telegramChatIdInput) telegramChatIdInput.value = settings.telegram_chat_id || "";
|
|
if (telegramTemplateInput) telegramTemplateInput.value = settings.telegram_template || "";
|
|
if (clientEventWebhookInput) clientEventWebhookInput.checked = settings.client_event_webhook !== 0;
|
|
if (clientEventTelegramInput) clientEventTelegramInput.checked = settings.client_event_telegram !== 0;
|
|
if (clientEventPushInput) clientEventPushInput.checked = settings.client_event_push !== 0;
|
|
}
|
|
|
|
async function loadMySettings() {
|
|
try {
|
|
const res = await fetch("/api/notifications/my-settings");
|
|
if (!res.ok) return;
|
|
const data = await res.json();
|
|
if (data.defaults) {
|
|
defaultWebhookTemplate = data.defaults.webhookTemplate || "";
|
|
defaultTelegramTemplate = data.defaults.telegramTemplate || "";
|
|
if (telegramTemplateInput) telegramTemplateInput.placeholder = `Premade template:\n${defaultTelegramTemplate}`;
|
|
}
|
|
if (data.settings) {
|
|
applyMySettings(data.settings);
|
|
if (!getWebhookTemplateValue().trim()) {
|
|
setWebhookTemplateValue(defaultWebhookTemplate);
|
|
}
|
|
if (telegramTemplateInput && !telegramTemplateInput.value.trim()) {
|
|
telegramTemplateInput.value = defaultTelegramTemplate;
|
|
}
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
async function saveMySettings(patch) {
|
|
const res = await fetch("/api/notifications/my-settings", {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(patch),
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({}));
|
|
throw new Error(err?.error || "Failed to save settings");
|
|
}
|
|
const data = await res.json();
|
|
if (data.settings) applyMySettings(data.settings);
|
|
}
|
|
|
|
async function postWebhookPreview(webhookUrl, webhookTemplate) {
|
|
const res = await fetch("/api/notifications/my-settings/preview/webhook", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ webhookUrl, webhookTemplate }),
|
|
});
|
|
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
throw new Error(data?.error || "Failed to send preview webhook");
|
|
}
|
|
if (!data?.ok) {
|
|
const details = data?.responseBody ? `: ${String(data.responseBody).slice(0, 120)}` : "";
|
|
throw new Error(`Webhook responded with ${data?.status || "unknown status"}${details}`);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function wireWebhookSave() {
|
|
wireToggle(webhookUrlInput, webhookUrlToggle);
|
|
|
|
if (resetWebhookTemplateBtn) {
|
|
resetWebhookTemplateBtn.addEventListener("click", () => {
|
|
setWebhookTemplateValue(defaultWebhookTemplate);
|
|
focusWebhookTemplateEditor();
|
|
if (webhookTemplatePreview) {
|
|
webhookTemplatePreview.textContent = renderSampleTemplate(defaultWebhookTemplate, defaultWebhookTemplate);
|
|
webhookTemplatePreview.classList.remove("hidden");
|
|
}
|
|
});
|
|
}
|
|
|
|
if (formatWebhookTemplateBtn) {
|
|
formatWebhookTemplateBtn.addEventListener("click", () => {
|
|
const current = getWebhookTemplateValue().trim();
|
|
if (!current) {
|
|
setWebhookTemplateValue(defaultWebhookTemplate);
|
|
return;
|
|
}
|
|
const formatted = tryFormatJsonText(current);
|
|
if (formatted !== null) {
|
|
setWebhookTemplateValue(formatted);
|
|
} else {
|
|
window.showToast?.("Template JSON is invalid. Fix syntax before formatting.", "error", 3500);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (previewWebhookTemplateBtn && webhookTemplatePreview && webhookTemplateInput) {
|
|
previewWebhookTemplateBtn.addEventListener("click", async () => {
|
|
const webhookTemplateText = getWebhookTemplateValue();
|
|
const rendered = renderSampleTemplate(webhookTemplateText, defaultWebhookTemplate);
|
|
webhookTemplatePreview.textContent = rendered;
|
|
webhookTemplatePreview.classList.remove("hidden");
|
|
|
|
const webhookUrl = webhookUrlInput?.value?.trim() || "";
|
|
const webhookTemplate = webhookTemplateText.trim() || defaultWebhookTemplate;
|
|
if (!webhookUrl) {
|
|
window.showToast?.("Enter a webhook URL first", "error", 3500);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await postWebhookPreview(webhookUrl, webhookTemplate);
|
|
const modeHint = result.mode === "discord" ? " (Discord mode)" : "";
|
|
window.showToast?.(`Preview sent to webhook (HTTP ${result.status})${modeHint}`, "success", 3500);
|
|
} catch (err) {
|
|
window.showToast?.(err?.message || "Failed to send preview webhook", "error", 4000);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!saveWebhookBtn) return;
|
|
saveWebhookBtn.addEventListener("click", async () => {
|
|
try {
|
|
const templateText = getWebhookTemplateValue().trim() || defaultWebhookTemplate;
|
|
await saveMySettings({
|
|
webhook_enabled: webhookEnabledInput?.checked ?? false,
|
|
webhook_url: webhookUrlInput?.value?.trim() || "",
|
|
webhook_template: templateText,
|
|
});
|
|
window.showToast?.("Webhook settings saved", "success", 3000);
|
|
} catch (err) {
|
|
window.showToast?.(err?.message || "Failed to save webhook", "error", 4000);
|
|
}
|
|
});
|
|
}
|
|
|
|
function wireTelegramSave() {
|
|
wireToggle(telegramBotTokenInput, telegramTokenToggle);
|
|
wireToggle(telegramChatIdInput, telegramChatidToggle);
|
|
|
|
if (resetTelegramTemplateBtn) {
|
|
resetTelegramTemplateBtn.addEventListener("click", () => {
|
|
if (telegramTemplateInput) telegramTemplateInput.value = defaultTelegramTemplate;
|
|
if (telegramTemplatePreview) {
|
|
telegramTemplatePreview.textContent = renderSampleTemplate(defaultTelegramTemplate, defaultTelegramTemplate);
|
|
telegramTemplatePreview.classList.remove("hidden");
|
|
}
|
|
});
|
|
}
|
|
|
|
if (previewTelegramTemplateBtn && telegramTemplatePreview && telegramTemplateInput) {
|
|
previewTelegramTemplateBtn.addEventListener("click", () => {
|
|
const rendered = renderSampleTemplate(telegramTemplateInput.value, defaultTelegramTemplate);
|
|
telegramTemplatePreview.textContent = rendered;
|
|
telegramTemplatePreview.classList.remove("hidden");
|
|
});
|
|
}
|
|
|
|
if (!saveTelegramBtn) return;
|
|
saveTelegramBtn.addEventListener("click", async () => {
|
|
try {
|
|
const templateText = telegramTemplateInput?.value?.trim() || defaultTelegramTemplate;
|
|
await saveMySettings({
|
|
telegram_enabled: telegramEnabledInput?.checked ?? false,
|
|
telegram_bot_token: telegramBotTokenInput?.value?.trim() || "",
|
|
telegram_chat_id: telegramChatIdInput?.value?.trim() || "",
|
|
telegram_template: templateText,
|
|
});
|
|
window.showToast?.("Telegram settings saved", "success", 3000);
|
|
} catch (err) {
|
|
window.showToast?.(err?.message || "Failed to save Telegram settings", "error", 4000);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Init role-based UI ────────────────────────────────────────────────────────
|
|
async function initRoleUi() {
|
|
try {
|
|
const res = await fetch("/api/auth/me");
|
|
if (!res.ok) return;
|
|
const data = await res.json();
|
|
const role = data?.role || "";
|
|
if ((role === "admin" || role === "operator") && keywordSection) {
|
|
keywordSection.classList.remove("hidden");
|
|
loadKeywords();
|
|
}
|
|
if (notificationScopeHint) {
|
|
notificationScopeHint.textContent =
|
|
role === "admin"
|
|
? "Showing all notifications (admin)."
|
|
: "Showing notifications for your accessible clients.";
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
// ── WebSocket connection ──────────────────────────────────────────────────────
|
|
function connect() {
|
|
startNotificationClient();
|
|
if (panel) markAllNotificationsRead();
|
|
|
|
subscribeStatus((status) => {
|
|
if (status === "connected") setStatus("Connected", "ok");
|
|
if (status === "error") setStatus("Error", "error");
|
|
if (status === "disconnected") setStatus("Disconnected", "warn");
|
|
});
|
|
|
|
subscribeReady((history) => {
|
|
clearTable();
|
|
for (const item of history) {
|
|
upsertEntry(item, "notification", false);
|
|
}
|
|
applyTableView();
|
|
markAllNotificationsRead();
|
|
});
|
|
|
|
subscribeNotifications((item) => addNotification(item, true));
|
|
subscribeClientEvents((item) => addClientEvent(item));
|
|
subscribeNotificationsCleared((clientId) => removeEntriesForClient(clientId));
|
|
}
|
|
|
|
const CLIENT_EVENT_BADGE = {
|
|
client_online: `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-emerald-900/60 text-emerald-300 border border-emerald-700/50"><i class="fa-solid fa-circle text-xs"></i> online</span>`,
|
|
client_offline: `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-rose-900/60 text-rose-300 border border-rose-700/50"><i class="fa-solid fa-circle text-xs"></i> offline</span>`,
|
|
client_purgatory: `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-amber-900/60 text-amber-300 border border-amber-700/50"><i class="fa-solid fa-hourglass-half text-xs"></i> purgatory</span>`,
|
|
};
|
|
|
|
function createClientEventRowElement(item) {
|
|
const badge = CLIENT_EVENT_BADGE[item.event] ||
|
|
`<span class="text-xs text-slate-400">${escapeHtml(item.event)}</span>`;
|
|
const row = document.createElement("tr");
|
|
row.className = "border-t border-slate-800/60";
|
|
row.innerHTML = `
|
|
<td class="py-2 pr-4 whitespace-nowrap text-slate-400">${formatTime(item.ts)}</td>
|
|
${clientIdCellHtml(item.clientId)}
|
|
<td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.user || "-")}</td>
|
|
<td class="py-2 pr-4 max-w-xl truncate italic text-slate-400">client event</td>
|
|
<td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.os || "-")}</td>
|
|
<td class="py-2 pr-4 whitespace-nowrap">-</td>
|
|
<td class="py-2 pr-4 whitespace-nowrap">${badge}</td>
|
|
<td class="py-2 pr-4"></td>
|
|
`;
|
|
return row;
|
|
}
|
|
|
|
// ── Preview modal ─────────────────────────────────────────────────────────────
|
|
if (previewModal && previewModalClose && previewModalImg) {
|
|
const closePreview = () => {
|
|
previewModal.classList.add("hidden");
|
|
previewModal.classList.remove("flex");
|
|
previewModalImg.src = "";
|
|
};
|
|
previewModalClose.addEventListener("click", closePreview);
|
|
previewModal.addEventListener("click", (event) => {
|
|
if (event.target === previewModal) closePreview();
|
|
});
|
|
}
|
|
|
|
// ── Clear unread badge when tab is visible ────────────────────────────────────
|
|
const clearIfActive = () => {
|
|
if (document.visibilityState === "visible") markAllNotificationsRead();
|
|
};
|
|
document.addEventListener("visibilitychange", clearIfActive);
|
|
window.addEventListener("focus", clearIfActive);
|
|
clearIfActive();
|
|
|
|
function updateDesktopPermissionUi() {
|
|
if (!desktopNotifStatusBar) return;
|
|
const perm = (typeof Notification !== "undefined") ? Notification.permission : "denied";
|
|
|
|
desktopNotifEnableBtn?.classList.add("hidden");
|
|
desktopNotifDeniedHint?.classList.add("hidden");
|
|
|
|
if (perm === "granted") {
|
|
desktopNotifStatusBar.className = desktopNotifStatusBar.className
|
|
.replace(/border-\S+/g, "").replace(/bg-\S+/g, "").trimEnd();
|
|
desktopNotifStatusBar.classList.add("border-emerald-700/50", "bg-emerald-900/10");
|
|
if (desktopNotifStatusIcon) {
|
|
desktopNotifStatusIcon.className = "fa-solid fa-circle-dot text-base text-emerald-400";
|
|
}
|
|
if (desktopNotifStatusText) desktopNotifStatusText.textContent = "Browser notifications are enabled";
|
|
} else if (perm === "denied") {
|
|
desktopNotifStatusBar.className = desktopNotifStatusBar.className
|
|
.replace(/border-\S+/g, "").replace(/bg-\S+/g, "").trimEnd();
|
|
desktopNotifStatusBar.classList.add("border-red-700/50", "bg-red-900/10");
|
|
if (desktopNotifStatusIcon) {
|
|
desktopNotifStatusIcon.className = "fa-solid fa-circle-dot text-base text-red-400";
|
|
}
|
|
if (desktopNotifStatusText) desktopNotifStatusText.textContent = "Browser notifications are blocked";
|
|
desktopNotifDeniedHint?.classList.remove("hidden");
|
|
} else {
|
|
desktopNotifStatusBar.className = desktopNotifStatusBar.className
|
|
.replace(/border-\S+/g, "").replace(/bg-\S+/g, "").trimEnd();
|
|
desktopNotifStatusBar.classList.add("border-slate-700", "bg-slate-900/40");
|
|
if (desktopNotifStatusIcon) {
|
|
desktopNotifStatusIcon.className = "fa-solid fa-circle-dot text-base text-slate-400";
|
|
}
|
|
if (desktopNotifStatusText) desktopNotifStatusText.textContent = "Browser notifications not yet enabled";
|
|
desktopNotifEnableBtn?.classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
function wireDesktopPermissionBtn() {
|
|
if (!desktopNotifEnableBtn) return;
|
|
desktopNotifEnableBtn.addEventListener("click", async () => {
|
|
desktopNotifEnableBtn.disabled = true;
|
|
const result = await requestDesktopNotificationPermission();
|
|
if (result === "granted") {
|
|
setDesktopNotificationsEnabled(true);
|
|
}
|
|
desktopNotifEnableBtn.disabled = false;
|
|
updateDesktopPermissionUi();
|
|
});
|
|
}
|
|
|
|
// ── Event notification toggles ───────────────────────────────────────────────
|
|
function loadEventNotifPrefs() {
|
|
if (eventNotifOnlineInput) eventNotifOnlineInput.checked = getClientEventNotificationEnabled("client_online");
|
|
if (eventNotifOfflineInput) eventNotifOfflineInput.checked = getClientEventNotificationEnabled("client_offline");
|
|
if (eventNotifPurgatoryInput) eventNotifPurgatoryInput.checked = getClientEventNotificationEnabled("client_purgatory");
|
|
}
|
|
|
|
function wireEventNotifSave() {
|
|
if (!saveEventNotifsBtn) return;
|
|
saveEventNotifsBtn.addEventListener("click", () => {
|
|
if (eventNotifOnlineInput) setClientEventNotificationEnabled("client_online", eventNotifOnlineInput.checked);
|
|
if (eventNotifOfflineInput) setClientEventNotificationEnabled("client_offline", eventNotifOfflineInput.checked);
|
|
if (eventNotifPurgatoryInput) setClientEventNotificationEnabled("client_purgatory", eventNotifPurgatoryInput.checked);
|
|
window.showToast?.("Event notification preferences saved", "success", 3000);
|
|
});
|
|
}
|
|
|
|
function wireEventChannelsSave() {
|
|
if (!saveEventChannelsBtn) return;
|
|
saveEventChannelsBtn.addEventListener("click", async () => {
|
|
try {
|
|
await saveMySettings({
|
|
client_event_webhook: clientEventWebhookInput?.checked ?? true,
|
|
client_event_telegram: clientEventTelegramInput?.checked ?? true,
|
|
client_event_push: clientEventPushInput?.checked ?? true,
|
|
});
|
|
window.showToast?.("Event delivery channel settings saved", "success", 3000);
|
|
} catch (err) {
|
|
window.showToast?.(err?.message || "Failed to save event channel settings", "error", 4000);
|
|
}
|
|
});
|
|
}
|
|
|
|
function wireClientIdToggle() {
|
|
if (!tableEl) return;
|
|
tableEl.addEventListener("click", (event) => {
|
|
const btn = event.target.closest(".client-id-toggle");
|
|
if (!btn) return;
|
|
const textEl = btn.querySelector(".client-id-text");
|
|
const icon = btn.querySelector("i");
|
|
if (!textEl) return;
|
|
const expanded = btn.classList.toggle("expanded");
|
|
if (expanded) {
|
|
textEl.textContent = btn.dataset.full || "";
|
|
if (icon) icon.className = "fa-solid fa-chevron-left text-[10px] text-slate-500";
|
|
btn.title = `${btn.dataset.full} (click to collapse)`;
|
|
} else {
|
|
textEl.innerHTML = `${escapeHtml(btn.dataset.short || "")}<span class="text-slate-500">…</span>`;
|
|
if (icon) icon.className = "fa-solid fa-chevron-right text-[10px] text-slate-500";
|
|
btn.title = `${btn.dataset.full} (click to expand)`;
|
|
}
|
|
});
|
|
}
|
|
|
|
function wireTableControls() {
|
|
if (searchInput) {
|
|
let debounce = null;
|
|
searchInput.addEventListener("input", () => {
|
|
if (debounce) clearTimeout(debounce);
|
|
debounce = setTimeout(() => {
|
|
tableState.search = searchInput.value || "";
|
|
applyTableView();
|
|
}, 100);
|
|
});
|
|
}
|
|
}
|
|
|
|
function initNotificationTable() {
|
|
if (!tableEl) return;
|
|
notificationTable = new Tabulator(tableEl, {
|
|
data: [],
|
|
height: "24rem",
|
|
layout: "fitDataStretch",
|
|
reactiveData: false,
|
|
placeholder: "No notifications yet.",
|
|
virtualDom: true,
|
|
index: "uid",
|
|
initialSort: [{ column: "ts", dir: "desc" }],
|
|
columns: [
|
|
{
|
|
title: "Time",
|
|
field: "ts",
|
|
width: 190,
|
|
sorter: "number",
|
|
formatter: (cell) => `<span class="text-slate-400">${formatTime(cell.getValue())}</span>`,
|
|
},
|
|
{
|
|
title: "Client",
|
|
field: "clientId",
|
|
width: 150,
|
|
formatter: clientIdFormatter,
|
|
},
|
|
{
|
|
title: "User",
|
|
field: "user",
|
|
width: 130,
|
|
formatter: "plaintext",
|
|
},
|
|
{
|
|
title: "Title / Content",
|
|
field: "title",
|
|
minWidth: 240,
|
|
formatter: (cell) => {
|
|
const row = cell.getRow().getData();
|
|
const value = escapeHtml(cell.getValue() || "-");
|
|
const tone = row.kind === "event" ? "italic text-slate-400" : "text-slate-100";
|
|
return `<span class="${tone}" title="${value}">${value}</span>`;
|
|
},
|
|
},
|
|
{
|
|
title: "Process",
|
|
field: "process",
|
|
width: 160,
|
|
formatter: "plaintext",
|
|
},
|
|
{
|
|
title: "Keyword",
|
|
field: "keyword",
|
|
width: 130,
|
|
formatter: "plaintext",
|
|
},
|
|
{
|
|
title: "Source",
|
|
field: "source",
|
|
width: 140,
|
|
formatter: (cell) => cell.getRow().getData().sourceHtml || "",
|
|
},
|
|
{
|
|
title: "Preview",
|
|
field: "uid",
|
|
width: 180,
|
|
headerSort: false,
|
|
formatter: previewFormatter,
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
// ── Bootstrap ─────────────────────────────────────────────────────────────────
|
|
initWebhookTemplateEditor();
|
|
initNotificationTable();
|
|
wireKeywordSave();
|
|
wireWebhookSave();
|
|
wireTelegramSave();
|
|
loadMySettings();
|
|
loadEventNotifPrefs();
|
|
wireEventNotifSave();
|
|
wireEventChannelsSave();
|
|
updateDesktopPermissionUi();
|
|
wireDesktopPermissionBtn();
|
|
wireTableControls();
|
|
wireClientIdToggle();
|
|
initRoleUi();
|
|
connect();
|