990 lines
44 KiB
JavaScript
990 lines
44 KiB
JavaScript
import {
|
|
formatAgo,
|
|
formatPing,
|
|
countryToFlag,
|
|
osBadge,
|
|
archBadge,
|
|
versionBadge,
|
|
monitorsBadge,
|
|
shortId,
|
|
} from "./viewUtils.js";
|
|
import { applyImageSrcSmooth } from "./thumbnail-loader.js";
|
|
|
|
function wireThumbImg(img) {
|
|
if (!(img instanceof HTMLImageElement) || img.dataset.thumbErrWired === "1") return;
|
|
img.dataset.thumbErrWired = "1";
|
|
const handleError = () => {
|
|
img.style.display = "none";
|
|
img.removeAttribute("src");
|
|
img.removeAttribute("data-thumb-url");
|
|
};
|
|
img.addEventListener("error", handleError);
|
|
if (img.complete && img.src && !img.naturalWidth) handleError();
|
|
}
|
|
|
|
if (typeof document !== "undefined" && typeof MutationObserver !== "undefined") {
|
|
const observer = new MutationObserver((mutations) => {
|
|
for (const m of mutations) {
|
|
m.addedNodes.forEach((n) => {
|
|
if (!(n instanceof HTMLElement)) return;
|
|
if (n.matches?.("img[data-thumb-img]")) wireThumbImg(n);
|
|
n.querySelectorAll?.("img[data-thumb-img]").forEach(wireThumbImg);
|
|
});
|
|
}
|
|
});
|
|
const start = () => {
|
|
if (!document.body) return;
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
document.querySelectorAll("img[data-thumb-img]").forEach(wireThumbImg);
|
|
};
|
|
if (document.body) start();
|
|
else document.addEventListener("DOMContentLoaded", start, { once: true });
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement("div");
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
const ROW_SELECTOR = "[data-client-row]";
|
|
|
|
function pingTone(ms) {
|
|
if (ms === null || ms === undefined) return "ping-unknown";
|
|
if (ms < 30) return "ping-good";
|
|
if (ms < 80) return "ping-mid";
|
|
return "ping-bad";
|
|
}
|
|
|
|
function metaSeparator() {
|
|
return `<span class="cv-mid" aria-hidden="true">·</span>`;
|
|
}
|
|
|
|
const FAUX_PALETTES = [
|
|
["#1e3a8a", "#0ea5e9", "#22d3ee"],
|
|
["#0f172a", "#475569", "#94a3b8"],
|
|
["#3b0764", "#a21caf", "#f472b6"],
|
|
["#064e3b", "#10b981", "#bbf7d0"],
|
|
["#7c2d12", "#ea580c", "#fdba74"],
|
|
["#082f49", "#0284c7", "#7dd3fc"],
|
|
];
|
|
|
|
function paletteFor(id) {
|
|
const s = String(id || "");
|
|
let h = 0;
|
|
for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
|
|
return FAUX_PALETTES[h % FAUX_PALETTES.length];
|
|
}
|
|
|
|
function fauxDesktopHtml(client, opts = {}) {
|
|
const palette = paletteFor(client.id);
|
|
const op = !client.online ? 0.3 : 1.0;
|
|
const small = !!opts.small;
|
|
const dotR = small ? 4 : 6;
|
|
return `
|
|
<div class="cv-faux" style="--p1:${palette[0]};--p2:${palette[1]};--p3:${palette[2]};--op:${op}">
|
|
<div class="cv-faux-dots">
|
|
<i style="width:${dotR}px;height:${dotR}px"></i>
|
|
<i style="width:${dotR}px;height:${dotR}px"></i>
|
|
<i style="width:${dotR}px;height:${dotR}px"></i>
|
|
</div>
|
|
<div class="cv-faux-window">
|
|
<span style="width:78%"></span>
|
|
<span style="width:62%"></span>
|
|
<span style="width:48%"></span>
|
|
<span style="width:36%"></span>
|
|
<span style="width:24%"></span>
|
|
</div>
|
|
<div class="cv-faux-bar">
|
|
<i></i><i></i><i></i><i></i><i></i>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function thumbHtml(client, { width, height, small = false } = {}) {
|
|
const hasThumb = !!client.hasThumbnail;
|
|
const version = Number(client.thumbnailVersion) || 0;
|
|
const opacityStyle = client.online ? "" : "opacity:0.35";
|
|
const idAttr = escapeHtml(client.id);
|
|
const initialSrc = hasThumb
|
|
? `/api/clients/${encodeURIComponent(client.id)}/thumbnail${version ? `?v=${version}` : ""}`
|
|
: "";
|
|
const initialDisplay = hasThumb ? "display:block" : "display:none";
|
|
return `
|
|
<div class="cv-thumb cv-thumb-host"
|
|
data-thumb-host
|
|
data-thumb-client="${idAttr}"
|
|
data-thumb-version="${version}"
|
|
data-thumb-online="${client.online ? "1" : "0"}"
|
|
style="width:${width}px;height:${height}px;${opacityStyle}">
|
|
${fauxDesktopHtml(client, { small })}
|
|
<img class="thumb-img cv-thumb-img cv-thumb-overlay"
|
|
data-thumb-img
|
|
alt=""
|
|
loading="lazy"
|
|
decoding="async"
|
|
${initialSrc ? `src="${initialSrc}" data-thumb-url="${initialSrc}"` : ""}
|
|
style="${initialDisplay}">
|
|
</div>`;
|
|
}
|
|
|
|
function statusDot(client) {
|
|
return `<span class="cv-dot ${client.online ? "is-online" : "is-offline"}"></span>`;
|
|
}
|
|
|
|
function groupPillHtml(client) {
|
|
const name = String(client.groupName || "").trim();
|
|
if (!name) return "";
|
|
const color = String(client.groupColor || "").trim() || "#64748b";
|
|
return `<span class="cv-group" style="--gc:${escapeHtml(color)}">${escapeHtml(name)}</span>`;
|
|
}
|
|
|
|
function shortenCpu(raw = "") {
|
|
return String(raw)
|
|
.replace(/\(R\)|\(TM\)|\(tm\)|\(r\)/g, "")
|
|
.replace(/\b(CPU|Processor|Genuine|Intel|AMD)\b/gi, (m) => (m.toUpperCase() === "INTEL" || m.toUpperCase() === "AMD" ? m : ""))
|
|
.replace(/@\s*[\d.]+\s*GHz.*$/i, "")
|
|
.replace(/\s+/g, " ")
|
|
.trim()
|
|
.slice(0, 38);
|
|
}
|
|
|
|
function cpuBrand(raw = "") {
|
|
const text = String(raw).toLowerCase();
|
|
const appleMatch = text.match(/\bapple\s+(m\d+(?:\s*(?:pro|max|ultra))?)\b/i);
|
|
if (appleMatch) {
|
|
return { vendor: "apple", chip: appleMatch[1].replace(/\s+/g, " ").toUpperCase() };
|
|
}
|
|
const intelMatch = text.match(/\b(?:intel(?:\(r\))?\s+)?(?:core\(tm\)\s+)?(i[3579]-\d{3,5}[a-z0-9]*)\b/i);
|
|
if (text.includes("intel") || intelMatch) {
|
|
return { vendor: "intel", chip: intelMatch ? intelMatch[1].toUpperCase() : "CPU" };
|
|
}
|
|
const amdMatch = text.match(/\b(?:amd\s+)?(?:ryzen\s+)?([3579]\s+\d{4}[a-z0-9]*)\b/i);
|
|
if (text.includes("amd") || text.includes("ryzen")) {
|
|
return { vendor: "amd", chip: amdMatch ? amdMatch[1].replace(/\s+/g, " ").toUpperCase() : "RYZEN" };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function cpuBadgeHtml(raw = "", { compact = false } = {}) {
|
|
const brand = cpuBrand(raw);
|
|
const label = shortenCpu(raw) || "CPU";
|
|
if (!brand) {
|
|
return `<span class="cv-cpu-badge cv-cpu-generic" title="${escapeHtml(raw || label)}"><i class="fa-solid fa-microchip"></i><span>${escapeHtml(label)}</span></span>`;
|
|
}
|
|
if (brand.vendor === "apple") {
|
|
return `<span class="cv-cpu-badge cv-cpu-apple" title="${escapeHtml(raw)}"><i class="fa-brands fa-apple"></i><strong>${escapeHtml(brand.chip)}</strong></span>`;
|
|
}
|
|
if (brand.vendor === "intel") {
|
|
return `<span class="cv-cpu-badge cv-cpu-intel" title="${escapeHtml(raw)}"><strong>intel</strong>${compact ? "" : `<span>${escapeHtml(brand.chip)}</span>`}</span>`;
|
|
}
|
|
return `<span class="cv-cpu-badge cv-cpu-amd" title="${escapeHtml(raw)}"><strong>AMD</strong>${compact ? "" : `<span>${escapeHtml(brand.chip)}</span>`}</span>`;
|
|
}
|
|
|
|
function batteryInfo(client) {
|
|
const n = Number(client.batteryPercent);
|
|
if (!Number.isFinite(n) || n <= 0 || n > 100) return null;
|
|
return { percent: Math.round(n), charging: client.batteryCharging === true };
|
|
}
|
|
|
|
function batteryHtml(client, { compact = false } = {}) {
|
|
const battery = batteryInfo(client);
|
|
if (!battery) return "";
|
|
const tone = battery.percent < 20 ? "is-low" : battery.percent <= 35 ? "is-mid" : "is-good";
|
|
const title = `Battery ${battery.percent}%${battery.charging ? " charging" : ""}`;
|
|
return `<span class="cv-battery ${tone} ${battery.charging ? "is-charging" : ""}" title="${escapeHtml(title)}">
|
|
<span class="cv-battery-shell"><span class="cv-battery-fill" style="width:${battery.percent}%"></span></span>
|
|
<span class="cv-battery-text">${battery.percent}%${battery.charging ? ` <i class="fa-solid fa-bolt"></i>` : ""}</span>
|
|
${compact ? "" : `<span class="cv-battery-label">${battery.charging ? "Charging" : "Battery"}</span>`}
|
|
</span>`;
|
|
}
|
|
|
|
function shortOsLabel(osRaw = "") {
|
|
const badge = osBadge(osRaw || "");
|
|
if (badge?.label && badge.label !== "Linux" && badge.label !== "Windows") return badge.label;
|
|
const o = String(osRaw).toLowerCase();
|
|
const winVersion = o.match(/\bwindows\s+(10|11)\b/i);
|
|
if (winVersion) return `W${winVersion[1]}`;
|
|
if (o.includes("windows 11")) return "W11";
|
|
if (o.includes("windows 10")) return "W10";
|
|
if (o.includes("windows")) return "Win";
|
|
if (o.includes("ubuntu")) return "Ubuntu";
|
|
if (o.includes("debian")) return "Debian";
|
|
if (o.includes("arch")) return "Arch";
|
|
if (o.includes("kali")) return "Kali";
|
|
if (o.includes("fedora")) return "Fedora";
|
|
if (o.includes("mac") || o.includes("darwin")) return "macOS";
|
|
if (o.includes("linux")) return "Linux";
|
|
return osRaw || "?";
|
|
}
|
|
|
|
export function createRenderer({
|
|
grid,
|
|
totalPill,
|
|
pageLabel,
|
|
openMenu,
|
|
openModal,
|
|
requestPreview,
|
|
requestThumbnail,
|
|
pingClient,
|
|
userRole,
|
|
getDisplayFields,
|
|
}) {
|
|
const isViewer = userRole === "viewer";
|
|
const LARGE_CLIENT_THRESHOLD = 50_000;
|
|
const MAX_ANIMATED_CARDS = 0;
|
|
const INSERT_BATCH_SIZE = 40;
|
|
const TOUCH_LONG_PRESS_MS = 520;
|
|
const TOUCH_MOVE_CANCEL_PX = 10;
|
|
let renderToken = 0;
|
|
let gridDelegated = false;
|
|
let currentLayout = (grid?.dataset.layout || "rows").toLowerCase();
|
|
let tableScaffoldDigest = "";
|
|
let currentDisplayDigest = "";
|
|
|
|
function displayFields() {
|
|
return typeof getDisplayFields === "function" ? getDisplayFields() || {} : {};
|
|
}
|
|
|
|
function showField(name) {
|
|
return displayFields()[name] !== false;
|
|
}
|
|
|
|
function displayDigest() {
|
|
return JSON.stringify(displayFields());
|
|
}
|
|
|
|
function getCardContainer() {
|
|
if (currentLayout === "table") {
|
|
return grid.querySelector("tbody.clients-table-body") || grid;
|
|
}
|
|
return grid;
|
|
}
|
|
|
|
function ensureLayoutScaffold() {
|
|
if (currentLayout === "table") {
|
|
const prefs = displayFields();
|
|
const scaffoldDigest = displayDigest();
|
|
if (grid.querySelector("table.clients-table") && tableScaffoldDigest === scaffoldDigest) return;
|
|
tableScaffoldDigest = scaffoldDigest;
|
|
grid.innerHTML = `
|
|
<table class="clients-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="cv-th-check"></th>
|
|
<th class="cv-th-star"></th>
|
|
<th class="cv-th-thumb"></th>
|
|
<th>Client</th>
|
|
<th class="cv-th-status">Status</th>
|
|
<th class="cv-th-last">Last seen</th>
|
|
${prefs.system !== false ? `<th class="cv-th-system">System</th>` : ""}
|
|
<th class="cv-th-ping">Ping</th>
|
|
${prefs.group !== false ? `<th class="cv-th-group">Group</th>` : ""}
|
|
<th class="cv-th-actions">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="clients-table-body"></tbody>
|
|
</table>
|
|
`;
|
|
} else {
|
|
tableScaffoldDigest = "";
|
|
const t = grid.querySelector("table.clients-table");
|
|
if (t) t.remove();
|
|
}
|
|
}
|
|
|
|
function setLayout(layout) {
|
|
const next = ["rows", "table", "cards"].includes(layout) ? layout : "rows";
|
|
if (currentLayout === next && grid.dataset.layout === next) return;
|
|
currentLayout = next;
|
|
grid.dataset.layout = next;
|
|
grid.innerHTML = "";
|
|
ensureLayoutScaffold();
|
|
}
|
|
|
|
/* ── Event delegation ─────────────────────────────────────────── */
|
|
|
|
function setupGridDelegation() {
|
|
if (gridDelegated) return;
|
|
gridDelegated = true;
|
|
|
|
grid.addEventListener("click", (e) => {
|
|
const card = e.target.closest(ROW_SELECTOR);
|
|
if (!card) return;
|
|
const clientId = card.dataset.id;
|
|
|
|
if (e.target.closest(".client-checkbox")) {
|
|
e.stopPropagation();
|
|
if (window.toggleClientSelection) window.toggleClientSelection(clientId);
|
|
return;
|
|
}
|
|
|
|
const bookmarkBtn = e.target.closest(".bookmark-btn");
|
|
if (bookmarkBtn) {
|
|
e.stopPropagation();
|
|
handleBookmarkClick(card, bookmarkBtn);
|
|
return;
|
|
}
|
|
|
|
const copyBtn = e.target.closest(".copy-id-btn");
|
|
if (copyBtn) {
|
|
e.stopPropagation();
|
|
const fullId = copyBtn.dataset.copy;
|
|
if (fullId) {
|
|
navigator.clipboard.writeText(fullId).then(() => {
|
|
const icon = copyBtn.querySelector(".copy-id-icon");
|
|
if (icon) { icon.className = "fa-solid fa-check copy-id-icon"; setTimeout(() => { icon.className = "fa-regular fa-copy copy-id-icon"; }, 1200); }
|
|
}).catch(() => {});
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest(".command-btn")) {
|
|
e.stopPropagation();
|
|
const rect = e.target.closest(".command-btn").getBoundingClientRect();
|
|
openMenu(clientId, rect.right, rect.bottom);
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest(".ban-btn")) {
|
|
e.stopPropagation();
|
|
if (window.banClient) window.banClient(clientId);
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest(".kebab-btn")) {
|
|
e.stopPropagation();
|
|
const rect = e.target.closest(".kebab-btn").getBoundingClientRect();
|
|
openMenu(clientId, rect.right, rect.bottom);
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest(".cv-ping-btn")) {
|
|
e.stopPropagation();
|
|
if (pingClient) pingClient(clientId);
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest(".client-tag-toggle")) {
|
|
e.stopPropagation();
|
|
handleTagToggle(card);
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest(".hw-toggle")) {
|
|
e.stopPropagation();
|
|
handleHwToggle(card);
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest(".cv-expand-btn")) {
|
|
e.stopPropagation();
|
|
handleExpandToggle(card);
|
|
return;
|
|
}
|
|
|
|
const thumbImg = e.target.closest(".thumb-img");
|
|
if (thumbImg) {
|
|
if (thumbImg.src) openModal(thumbImg.src);
|
|
return;
|
|
}
|
|
|
|
if (card._longPressTriggered) {
|
|
card._longPressTriggered = false;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return;
|
|
}
|
|
if (e.target.closest("button")) return;
|
|
if (e.target.closest(".client-checkbox")) return;
|
|
const checkbox = card.querySelector(".client-checkbox");
|
|
if (e.ctrlKey || e.metaKey || e.shiftKey) {
|
|
if (checkbox && !checkbox.disabled) {
|
|
checkbox.checked = !checkbox.checked;
|
|
if (window.toggleClientSelection) window.toggleClientSelection(clientId);
|
|
}
|
|
return;
|
|
}
|
|
if (card.dataset.online !== "true") return;
|
|
if (pingClient) pingClient(clientId);
|
|
requestThumbnail(clientId);
|
|
});
|
|
|
|
grid.addEventListener("contextmenu", (e) => {
|
|
const card = e.target.closest(ROW_SELECTOR);
|
|
if (!card || isViewer) return;
|
|
e.preventDefault();
|
|
openMenu(card.dataset.id, e.clientX, e.clientY);
|
|
});
|
|
|
|
grid.addEventListener("pointerdown", (e) => {
|
|
if (isViewer || e.pointerType !== "touch") return;
|
|
if (e.target.closest("button") || e.target.closest(".client-checkbox")) return;
|
|
const card = e.target.closest(ROW_SELECTOR);
|
|
if (!card) return;
|
|
card._longPressTriggered = false;
|
|
card._pointerStartX = e.clientX;
|
|
card._pointerStartY = e.clientY;
|
|
clearTimeout(card._longPressTimer);
|
|
card._longPressTimer = setTimeout(() => {
|
|
card._longPressTriggered = true;
|
|
openMenu(card.dataset.id, e.clientX, e.clientY);
|
|
}, TOUCH_LONG_PRESS_MS);
|
|
});
|
|
|
|
grid.addEventListener("pointermove", (e) => {
|
|
if (e.pointerType !== "touch") return;
|
|
const card = e.target.closest(ROW_SELECTOR);
|
|
if (!card || !card._longPressTimer) return;
|
|
if (
|
|
Math.abs(e.clientX - card._pointerStartX) > TOUCH_MOVE_CANCEL_PX ||
|
|
Math.abs(e.clientY - card._pointerStartY) > TOUCH_MOVE_CANCEL_PX
|
|
) {
|
|
clearTimeout(card._longPressTimer);
|
|
card._longPressTimer = null;
|
|
}
|
|
});
|
|
|
|
const clearLongPress = (e) => {
|
|
if (e.pointerType !== "touch") return;
|
|
const card = e.target.closest(ROW_SELECTOR);
|
|
if (card) { clearTimeout(card._longPressTimer); card._longPressTimer = null; }
|
|
};
|
|
grid.addEventListener("pointerup", clearLongPress);
|
|
grid.addEventListener("pointercancel", clearLongPress);
|
|
grid.addEventListener("pointerleave", clearLongPress, true);
|
|
}
|
|
|
|
async function handleBookmarkClick(card, btn) {
|
|
const id = card.dataset.id;
|
|
const isBookmarked = card.dataset.bookmarked === "true";
|
|
try {
|
|
const res = await fetch(`/api/clients/${id}/bookmark`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ bookmarked: !isBookmarked }),
|
|
});
|
|
if (res.ok) {
|
|
card.dataset.bookmarked = String(!isBookmarked);
|
|
const icon = btn.querySelector("i");
|
|
if (icon) {
|
|
icon.classList.toggle("fa-solid", !isBookmarked);
|
|
icon.classList.toggle("fa-regular", isBookmarked);
|
|
}
|
|
btn.classList.toggle("is-on", !isBookmarked);
|
|
btn.title = !isBookmarked ? "Remove bookmark" : "Bookmark";
|
|
}
|
|
} catch (err) {
|
|
console.error("bookmark toggle failed", err);
|
|
}
|
|
}
|
|
|
|
function handleTagToggle(card) {
|
|
const notePanel = card.querySelector(".client-tag-note");
|
|
if (!notePanel) return;
|
|
const expanded = notePanel.classList.toggle("hidden") === false;
|
|
card.dataset.tagNoteExpanded = expanded ? "true" : "false";
|
|
const tagToggle = card.querySelector(".client-tag-toggle");
|
|
tagToggle?.setAttribute("aria-expanded", expanded ? "true" : "false");
|
|
const chevron = tagToggle?.querySelector(".fa-chevron-up, .fa-chevron-down");
|
|
if (chevron) {
|
|
chevron.classList.toggle("fa-chevron-up", expanded);
|
|
chevron.classList.toggle("fa-chevron-down", !expanded);
|
|
}
|
|
}
|
|
|
|
function handleHwToggle(card) {
|
|
const hwPanel = card.querySelector(".hw-panel");
|
|
if (!hwPanel) return;
|
|
const expanded = hwPanel.classList.toggle("hidden") === false;
|
|
card.dataset.hwExpanded = expanded ? "true" : "false";
|
|
const hwToggle = card.querySelector(".hw-toggle");
|
|
hwToggle?.setAttribute("aria-expanded", expanded ? "true" : "false");
|
|
const chevron = hwToggle?.querySelector(".fa-chevron-up, .fa-chevron-down");
|
|
if (chevron) {
|
|
chevron.classList.toggle("fa-chevron-up", expanded);
|
|
chevron.classList.toggle("fa-chevron-down", !expanded);
|
|
}
|
|
}
|
|
|
|
function handleExpandToggle(card) {
|
|
const panel = card.querySelector(".cv-expand-panel");
|
|
if (!panel) return;
|
|
const expanded = panel.classList.toggle("hidden") === false;
|
|
card.dataset.expanded = expanded ? "true" : "false";
|
|
const btn = card.querySelector(".cv-expand-btn");
|
|
btn?.setAttribute("aria-expanded", expanded ? "true" : "false");
|
|
}
|
|
|
|
function reorderCards(items) {
|
|
const container = getCardContainer();
|
|
const cards = container.querySelectorAll(ROW_SELECTOR);
|
|
let needsReorder = cards.length !== items.length;
|
|
if (!needsReorder) {
|
|
for (let i = 0; i < items.length; i++) {
|
|
if (cards[i]?.dataset?.id !== items[i].id) { needsReorder = true; break; }
|
|
}
|
|
}
|
|
if (!needsReorder) return;
|
|
const byId = new Map();
|
|
cards.forEach((card) => byId.set(card.dataset.id, card));
|
|
items.forEach((client) => {
|
|
const card = byId.get(client.id);
|
|
if (card) container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function cardDigest(c) {
|
|
return `${currentDisplayDigest}|${currentLayout}|${c.id}|${!!c.online}|${c.lastSeen}|${c.pingMs}|${c.host}|${c.user}|${c.os}|${c.arch}|${c.version}|${c.monitors}|${c.country}|${c.nickname}|${c.customTag}|${c.customTagNote}|${!!c.bookmarked}|${!!c.isAdmin}|${c.elevation}|${c.cpu}|${c.gpu}|${c.ram}|${c.batteryPercent}|${c.batteryCharging}|${c.hwid}|${c.disconnectReason}|${c.disconnectDetail}|${c.groupId}|${c.groupName}|${c.groupColor}|${!!c.notificationsMuted}`;
|
|
}
|
|
|
|
function cardThumbDigest(c) {
|
|
return `${!!c.hasThumbnail}|${Number(c.thumbnailVersion) || 0}`;
|
|
}
|
|
|
|
function softThumbUpdate(card, client) {
|
|
const host = card.querySelector("[data-thumb-host]");
|
|
if (!host) return;
|
|
const newVersion = Number(client.thumbnailVersion) || 0;
|
|
host.dataset.thumbVersion = String(newVersion);
|
|
host.dataset.thumbOnline = client.online ? "1" : "0";
|
|
if (!client.hasThumbnail) return;
|
|
const img = host.querySelector("img[data-thumb-img]");
|
|
if (!img) return;
|
|
const url = `/api/clients/${encodeURIComponent(client.id)}/thumbnail${newVersion ? `?v=${newVersion}` : ""}`;
|
|
applyImageSrcSmooth(img, url);
|
|
}
|
|
|
|
function renderMerge(data, options = {}) {
|
|
setupGridDelegation();
|
|
currentDisplayDigest = displayDigest();
|
|
ensureLayoutScaffold();
|
|
const container = getCardContainer();
|
|
const { reorder = false } = options;
|
|
totalPill.textContent = `${data.online ?? data.total} online / ${data.total} total`;
|
|
const totalPages = Math.max(1, Math.ceil(data.total / data.pageSize));
|
|
if (pageLabel) pageLabel.textContent = "Page";
|
|
if (typeof window.setDashboardPageBounds === "function") {
|
|
window.setDashboardPageBounds(data.page, totalPages);
|
|
}
|
|
prevBtnState(data.page, totalPages);
|
|
|
|
const items = data.items || [];
|
|
const seen = new Set();
|
|
const newClients = [];
|
|
const renderId = ++renderToken;
|
|
const largeClientSet = (Number(data.total) || 0) >= LARGE_CLIENT_THRESHOLD;
|
|
document.documentElement.classList.toggle("large-client-set", largeClientSet);
|
|
const prefersReducedMotion =
|
|
typeof window !== "undefined" &&
|
|
window.matchMedia &&
|
|
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
const existingCards = container.querySelectorAll(ROW_SELECTOR);
|
|
const hadCards = existingCards.length > 0;
|
|
const existingById = new Map();
|
|
existingCards.forEach((card) => existingById.set(card.dataset.id, card));
|
|
|
|
const uninstallingIds = window.__uninstallingClientIds;
|
|
|
|
items.forEach((client) => {
|
|
seen.add(client.id);
|
|
if (uninstallingIds && uninstallingIds.has(client.id)) return;
|
|
const existing = existingById.get(client.id);
|
|
if (existing) {
|
|
if (existing.classList.contains("card-uninstalling")) return;
|
|
const digest = cardDigest(client);
|
|
const thumbDigest = cardThumbDigest(client);
|
|
const structureChanged = existing._cardDigest !== digest;
|
|
const thumbChanged = existing._thumbDigest !== thumbDigest;
|
|
if (!structureChanged && !thumbChanged) return;
|
|
if (structureChanged) {
|
|
existing._cardDigest = digest;
|
|
existing._thumbDigest = thumbDigest;
|
|
updateCard(existing, client);
|
|
} else {
|
|
existing._thumbDigest = thumbDigest;
|
|
softThumbUpdate(existing, client);
|
|
}
|
|
return;
|
|
}
|
|
newClients.push(client);
|
|
});
|
|
|
|
Array.from(existingCards)
|
|
.filter((el) => !seen.has(el.dataset.id) && !el.classList.contains("card-uninstalling"))
|
|
.forEach((el) => el.remove());
|
|
|
|
if (reorder) {
|
|
reorderCards(items);
|
|
}
|
|
|
|
if (newClients.length === 0) return;
|
|
|
|
const allowAnimation = MAX_ANIMATED_CARDS > 0 && !largeClientSet && !hadCards && !prefersReducedMotion && items.length <= 1000 && currentLayout !== "table";
|
|
const animateLimit = Math.min(newClients.length, MAX_ANIMATED_CARDS);
|
|
|
|
let idx = 0;
|
|
const insertBatch = () => {
|
|
if (renderId !== renderToken) return;
|
|
const fragment = document.createDocumentFragment();
|
|
for (
|
|
let batch = 0;
|
|
batch < INSERT_BATCH_SIZE && idx < newClients.length;
|
|
batch++, idx++
|
|
) {
|
|
const client = newClients[idx];
|
|
const shouldAnimate = allowAnimation && idx < animateLimit;
|
|
const card = buildCard(client, {
|
|
animate: shouldAnimate,
|
|
delayIndex: idx,
|
|
});
|
|
fragment.appendChild(card);
|
|
}
|
|
container.appendChild(fragment);
|
|
if (idx < newClients.length) {
|
|
requestAnimationFrame(insertBatch);
|
|
return;
|
|
}
|
|
reorderCards(items);
|
|
};
|
|
|
|
insertBatch();
|
|
}
|
|
|
|
function prevBtnState(currentPage, totalPages) {
|
|
const prevBtn = document.getElementById("prev");
|
|
const nextBtn = document.getElementById("next");
|
|
if (prevBtn) prevBtn.disabled = currentPage <= 1;
|
|
if (nextBtn) nextBtn.disabled = currentPage >= totalPages;
|
|
}
|
|
|
|
function setSharedDataset(el, client) {
|
|
el.dataset.clientRow = currentLayout;
|
|
el.dataset.id = client.id;
|
|
el.dataset.hwid = client.hwid || "";
|
|
el.dataset.online = String(!!client.online);
|
|
el.dataset.os = String(client.os || "").toLowerCase();
|
|
el.dataset.nickname = String(client.nickname || "");
|
|
el.dataset.customTag = String(client.customTag || "");
|
|
el.dataset.bookmarked = String(!!client.bookmarked);
|
|
el.dataset.notificationsMuted = String(!!client.notificationsMuted);
|
|
el.dataset.admin = String(!!client.isAdmin);
|
|
el.dataset.groupId = String(client.groupId || "");
|
|
el.dataset.groupName = String(client.groupName || "");
|
|
el.dataset.groupColor = String(client.groupColor || "");
|
|
el._customTagNote = String(client.customTagNote || "");
|
|
if (!client.bookmarked && client.groupColor) {
|
|
el.style.setProperty("--group-color", client.groupColor);
|
|
} else {
|
|
el.style.removeProperty("--group-color");
|
|
}
|
|
}
|
|
|
|
function buildCard(client, options = {}) {
|
|
const node =
|
|
currentLayout === "table"
|
|
? buildRowB(client, options)
|
|
: currentLayout === "cards"
|
|
? buildCardC(client, options)
|
|
: buildRowA(client, options);
|
|
|
|
node._cardDigest = cardDigest(client);
|
|
node._thumbDigest = cardThumbDigest(client);
|
|
|
|
if (options.animate && currentLayout !== "table") {
|
|
node.classList.add("card-animate");
|
|
node.style.animationDelay = `${(options.delayIndex || 0) * 0.05}s`;
|
|
node.style.opacity = "0";
|
|
node.style.transform = "translateY(10px)";
|
|
if (typeof anime !== "undefined") {
|
|
requestAnimationFrame(() => {
|
|
anime({
|
|
targets: node,
|
|
opacity: [0, 1],
|
|
translateY: [10, 0],
|
|
duration: 400,
|
|
easing: "easeOutQuad",
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
return node;
|
|
}
|
|
|
|
function updateCard(card, client) {
|
|
const wasChecked = card.querySelector(".client-checkbox")?.checked || false;
|
|
const wasTagNoteExpanded = card.dataset.tagNoteExpanded === "true";
|
|
const wasHwExpanded = card.dataset.hwExpanded === "true";
|
|
const wasExpanded = card.dataset.expanded === "true";
|
|
|
|
const fresh = buildCard(client, { animate: false });
|
|
|
|
fresh.dataset.tagNoteExpanded = wasTagNoteExpanded ? "true" : "false";
|
|
fresh.dataset.hwExpanded = wasHwExpanded ? "true" : "false";
|
|
fresh.dataset.expanded = wasExpanded ? "true" : "false";
|
|
if (wasTagNoteExpanded) fresh.querySelector(".client-tag-note")?.classList.remove("hidden");
|
|
if (wasHwExpanded) fresh.querySelector(".hw-panel")?.classList.remove("hidden");
|
|
if (wasExpanded) fresh.querySelector(".cv-expand-panel")?.classList.remove("hidden");
|
|
|
|
const cb = fresh.querySelector(".client-checkbox");
|
|
if (cb) {
|
|
const isSelected = typeof window.isClientSelected === "function"
|
|
? window.isClientSelected(client.id)
|
|
: false;
|
|
if ((wasChecked || isSelected) && client.online) cb.checked = true;
|
|
}
|
|
|
|
card.replaceWith(fresh);
|
|
}
|
|
|
|
/* ── VARIANT A: Row cards ─────────────────────────────────────── */
|
|
|
|
function buildRowA(client, _options) {
|
|
const article = document.createElement("article");
|
|
article.className = `cv-row ${client.online ? "" : "cv-offline"} ${client.bookmarked ? "is-bookmarked" : ""}`;
|
|
setSharedDataset(article, client);
|
|
|
|
const os = osBadge(client.os || "unknown");
|
|
const arch = archBadge(client.arch || "");
|
|
const ver = versionBadge(client.version || "");
|
|
const mons = monitorsBadge(client.monitors);
|
|
const deviceId = shortId(client.id);
|
|
const hwid = shortId(client.hwid || "");
|
|
const nickname = String(client.nickname || "").trim();
|
|
const customTag = String(client.customTag || "").trim();
|
|
const customTagNote = String(client.customTagNote || "");
|
|
const displayName = nickname || client.host || deviceId;
|
|
const userLine = client.user || client.host || deviceId;
|
|
const hasTagNote = customTag.length > 0 && customTagNote.length > 0;
|
|
const showHardware = showField("hardware");
|
|
const showBattery = showField("battery");
|
|
const cpuHtml = client.cpu ? cpuBadgeHtml(client.cpu) : "—";
|
|
const batteryIndicator = showBattery ? batteryHtml(client) : "";
|
|
const verLatest = String(client.version || "").startsWith("2.0.");
|
|
|
|
const metaParts = [
|
|
showField("system") ? `<span class="cv-os cv-tone-${os.tone}"><i class="fa ${os.icon}"></i> ${escapeHtml(shortOsLabel(client.os))}</span>` : "",
|
|
showField("system") ? `<span class="cv-arch cv-tone-${arch.tone}">${escapeHtml(arch.label)}</span>` : "",
|
|
showField("version") ? `<span class="cv-ver"><i class="fa ${ver.icon}"></i> ${escapeHtml(ver.label)}</span>` : "",
|
|
showField("monitors") ? `<span class="cv-mons"><i class="fa fa-display"></i> ${client.monitors || 1}</span>` : "",
|
|
nickname && client.host && nickname !== client.host ? `<span class="cv-host"><i class="fa-solid fa-laptop"></i> ${escapeHtml(client.host)}</span>` : "",
|
|
showField("ip") && client.ip ? `<span class="cv-ip cv-mono"><i class="fa-solid fa-network-wired"></i> ${escapeHtml(client.ip)}</span>` : "",
|
|
showField("hwid") && hwid ? `<span class="cv-hwid cv-mono" title="HWID ${escapeHtml(client.hwid || "")}"><i class="fa-solid fa-fingerprint"></i> ${escapeHtml(hwid)}</span>` : "",
|
|
batteryIndicator,
|
|
].filter(Boolean);
|
|
const meta = metaParts.join(metaSeparator());
|
|
|
|
article.innerHTML = `
|
|
<span class="cv-edge"></span>
|
|
<label class="cv-checkbox">
|
|
<input type="checkbox" class="client-checkbox" data-id="${escapeHtml(client.id)}" ${client.online ? "" : "disabled"}>
|
|
<span class="cv-checkbox-box"><i class="fa-solid fa-check"></i></span>
|
|
</label>
|
|
<button class="bookmark-btn cv-star ${client.bookmarked ? "is-on" : ""}" data-id="${escapeHtml(client.id)}" title="${client.bookmarked ? "Remove bookmark" : "Bookmark"}">
|
|
<i class="fa-${client.bookmarked ? "solid" : "regular"} fa-star"></i>
|
|
</button>
|
|
<div class="cv-thumb-wrap">${thumbHtml(client, { width: 168, height: 96, small: false })}</div>
|
|
<div class="cv-primary">
|
|
<div class="cv-name-line">
|
|
${statusDot(client)}
|
|
<span class="cv-flag">${countryToFlag(client.country)}</span>
|
|
<span class="cv-name">${escapeHtml(displayName)}</span>
|
|
${client.isAdmin ? `<span class="cv-mini-pill cv-pill-admin" title="Admin"><i class="fa-solid fa-shield-halved"></i></span>` : ""}
|
|
${client.elevation === "system" ? `<span class="cv-mini-pill cv-pill-system" title="SYSTEM"><i class="fa-solid fa-gear"></i></span>` : ""}
|
|
${client.elevation === "trustedinstaller" ? `<span class="cv-mini-pill cv-pill-ti" title="TrustedInstaller"><i class="fa-solid fa-lock"></i></span>` : ""}
|
|
${client.notificationsMuted ? `<span class="cv-mini-pill cv-pill-muted" title="Notifications muted"><i class="fa-solid fa-bell-slash"></i></span>` : ""}
|
|
</div>
|
|
${showField("user") ? `<div class="cv-user-line"><i class="fa-solid fa-user"></i> ${escapeHtml(userLine)}</div>` : ""}
|
|
${meta ? `<div class="cv-meta-line">${meta}</div>` : ""}
|
|
${customTag ? `<button type="button" class="client-tag-toggle cv-tag ${hasTagNote ? "has-note" : ""}" ${hasTagNote ? `aria-expanded="false"` : `disabled aria-disabled="true"`}><i class="fa-solid fa-tag"></i> ${escapeHtml(customTag)}${hasTagNote ? ` <i class="fa-solid fa-chevron-down"></i>` : ""}</button>` : ""}
|
|
${hasTagNote ? `<div class="client-tag-note hidden">${escapeHtml(customTagNote)}</div>` : ""}
|
|
</div>
|
|
<div class="cv-time">
|
|
<span class="cv-time-line"><i class="fa-regular fa-clock"></i> ${formatAgo(client.lastSeen)}</span>
|
|
<span class="cv-ping-line ${pingTone(client.pingMs)}"><i class="fa-solid fa-satellite-dish"></i> ${formatPing(client.pingMs)}</span>
|
|
</div>
|
|
${showField("group") ? `<div class="cv-group-cell">${groupPillHtml(client) || `<span class="cv-group-empty">—</span>`}</div>` : ""}
|
|
<div class="cv-spacer"></div>
|
|
<div class="cv-actions">
|
|
${isViewer ? "" : `<button class="command-btn cv-btn-primary" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-terminal"></i><span>Commands</span></button>`}
|
|
<button class="cv-icon-btn cv-ping-btn" title="Ping" ${client.online ? "" : "disabled"}><i class="fa-solid fa-satellite-dish"></i></button>
|
|
${isViewer ? "" : `<button class="cv-icon-btn cv-icon-danger ban-btn" title="Ban IP" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ban"></i></button>`}
|
|
<button class="cv-icon-btn cv-expand-btn" title="More info" aria-expanded="false"><i class="fa-solid fa-chevron-down"></i></button>
|
|
</div>
|
|
<div class="cv-expand-panel hidden">
|
|
<div class="cv-expand-grid">
|
|
<div class="cv-field"><span class="cv-field-label">ID</span><span class="cv-field-value cv-mono copy-id-btn" data-copy="${escapeHtml(client.id)}" title="Copy full ID">${escapeHtml(deviceId)} <i class="fa-regular fa-copy copy-id-icon"></i></span></div>
|
|
${showField("hwid") ? `<div class="cv-field"><span class="cv-field-label">Hardware ID</span><span class="cv-field-value cv-mono">${escapeHtml(hwid || "—")}</span></div>` : ""}
|
|
${showField("ip") ? `<div class="cv-field"><span class="cv-field-label">IP</span><span class="cv-field-value cv-mono">${escapeHtml(client.ip || "—")}</span></div>` : ""}
|
|
${showField("system") ? `<div class="cv-field"><span class="cv-field-label">OS</span><span class="cv-field-value">${escapeHtml(client.os || "Unknown")} ${escapeHtml(arch.label)}</span></div>` : ""}
|
|
${showHardware ? `<div class="cv-field"><span class="cv-field-label">CPU</span><span class="cv-field-value">${cpuHtml}</span></div>` : ""}
|
|
${showHardware ? `<div class="cv-field"><span class="cv-field-label">RAM</span><span class="cv-field-value">${escapeHtml(client.ram || "—")}</span></div>` : ""}
|
|
${batteryIndicator ? `<div class="cv-field"><span class="cv-field-label">Battery</span><span class="cv-field-value">${batteryIndicator}</span></div>` : ""}
|
|
${showHardware && client.gpu ? `<div class="cv-field cv-field-wide"><span class="cv-field-label">GPU</span><span class="cv-field-value">${escapeHtml(client.gpu)}</span></div>` : ""}
|
|
${showField("version") && !verLatest && client.version ? `<div class="cv-field"><span class="cv-field-label">Version</span><span class="cv-field-value cv-warn">v${escapeHtml(client.version)} (outdated)</span></div>` : ""}
|
|
</div>
|
|
</div>
|
|
`;
|
|
return article;
|
|
}
|
|
|
|
/* ── VARIANT B: Dense table ───────────────────────────────────── */
|
|
|
|
function buildRowB(client, _options) {
|
|
const tr = document.createElement("tr");
|
|
tr.className = `cv-trow ${client.online ? "" : "cv-offline"} ${client.bookmarked ? "is-bookmarked" : ""}`;
|
|
setSharedDataset(tr, client);
|
|
|
|
const os = osBadge(client.os || "unknown");
|
|
const arch = archBadge(client.arch || "");
|
|
const deviceId = shortId(client.id);
|
|
const nickname = String(client.nickname || "").trim();
|
|
const displayName = nickname || client.host || deviceId;
|
|
const userLine = client.user || client.host || deviceId;
|
|
const userMeta = [
|
|
showField("user") ? `<i class="fa-solid fa-user"></i> ${escapeHtml(userLine)}` : "",
|
|
showField("ip") && client.ip ? `<span class="cv-mid">·</span><i class="fa-solid fa-network-wired"></i> ${escapeHtml(client.ip)}` : "",
|
|
showField("hwid") && client.hwid ? `<span class="cv-mid">·</span><i class="fa-solid fa-fingerprint"></i> ${escapeHtml(shortId(client.hwid))}` : "",
|
|
].filter(Boolean).join("");
|
|
|
|
tr.innerHTML = `
|
|
<td class="cv-td-check">
|
|
<label class="cv-checkbox">
|
|
<input type="checkbox" class="client-checkbox" data-id="${escapeHtml(client.id)}" ${client.online ? "" : "disabled"}>
|
|
<span class="cv-checkbox-box"><i class="fa-solid fa-check"></i></span>
|
|
</label>
|
|
</td>
|
|
<td class="cv-td-star">
|
|
<button class="bookmark-btn cv-star ${client.bookmarked ? "is-on" : ""}" data-id="${escapeHtml(client.id)}" title="${client.bookmarked ? "Remove bookmark" : "Bookmark"}">
|
|
<i class="fa-${client.bookmarked ? "solid" : "regular"} fa-star"></i>
|
|
</button>
|
|
</td>
|
|
<td class="cv-td-thumb">${thumbHtml(client, { width: 80, height: 50, small: true })}</td>
|
|
<td class="cv-td-client">
|
|
<div class="cv-tcell-client">
|
|
<span class="cv-flag">${countryToFlag(client.country)}</span>
|
|
<div class="cv-tcell-stack">
|
|
<span class="cv-tcell-name-row">
|
|
<span class="cv-name">${escapeHtml(displayName)}</span>
|
|
${client.isAdmin ? `<span class="cv-mini-pill cv-pill-admin" title="Admin"><i class="fa-solid fa-shield-halved"></i></span>` : ""}
|
|
${client.elevation === "system" ? `<span class="cv-mini-pill cv-pill-system" title="SYSTEM"><i class="fa-solid fa-gear"></i></span>` : ""}
|
|
${client.elevation === "trustedinstaller" ? `<span class="cv-mini-pill cv-pill-ti" title="TI"><i class="fa-solid fa-lock"></i></span>` : ""}
|
|
${client.notificationsMuted ? `<span class="cv-mini-pill cv-pill-muted" title="Notifications muted"><i class="fa-solid fa-bell-slash"></i></span>` : ""}
|
|
</span>
|
|
${userMeta ? `<span class="cv-user-line cv-mono">${userMeta}</span>` : ""}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="cv-td-status">
|
|
<span class="cv-status-cell">${statusDot(client)} ${client.online ? "Online" : "Offline"}</span>
|
|
</td>
|
|
<td class="cv-td-last cv-tab-num">${formatAgo(client.lastSeen)}</td>
|
|
${showField("system") ? `<td class="cv-td-system">
|
|
<span class="cv-system-cell"><span class="cv-os cv-tone-${os.tone}"><i class="fa ${os.icon}"></i> ${escapeHtml(shortOsLabel(client.os))}</span> <span class="cv-arch-chip cv-tone-${arch.tone}">${escapeHtml(arch.label)}</span></span>
|
|
</td>` : ""}
|
|
<td class="cv-td-ping cv-tab-num cv-mono ${pingTone(client.pingMs)}">${formatPing(client.pingMs)}</td>
|
|
${showField("group") ? `<td class="cv-td-group">${groupPillHtml(client) || `<span class="cv-group-empty">—</span>`}</td>` : ""}
|
|
<td class="cv-td-actions">
|
|
<div class="cv-actions cv-actions-table">
|
|
${isViewer ? "" : `<button class="command-btn cv-btn-primary cv-btn-sm" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-terminal"></i><span>Commands</span></button>`}
|
|
${isViewer ? "" : `<button class="cv-icon-btn cv-icon-sm kebab-btn" title="More" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ellipsis-vertical"></i></button>`}
|
|
</div>
|
|
</td>
|
|
`;
|
|
return tr;
|
|
}
|
|
|
|
/* ── VARIANT C: Card wall ─────────────────────────────────────── */
|
|
|
|
function buildCardC(client, _options) {
|
|
const article = document.createElement("article");
|
|
article.className = `cv-card ${client.online ? "" : "cv-offline"} ${client.bookmarked ? "is-bookmarked" : ""}`;
|
|
setSharedDataset(article, client);
|
|
|
|
const os = osBadge(client.os || "unknown");
|
|
const arch = archBadge(client.arch || "");
|
|
const ver = versionBadge(client.version || "");
|
|
const deviceId = shortId(client.id);
|
|
const hwidShort = shortId(client.hwid || "");
|
|
const nickname = String(client.nickname || "").trim();
|
|
const customTag = String(client.customTag || "").trim();
|
|
const displayName = nickname || client.host || deviceId;
|
|
const userLine = client.user || "unknown";
|
|
const verLatest = String(client.version || "").startsWith("2.0.");
|
|
const hasGroup = !!String(client.groupName || "").trim();
|
|
const showHost = nickname && client.host && nickname !== client.host;
|
|
const showHardware = showField("hardware");
|
|
const cpuHtml = showHardware && client.cpu ? cpuBadgeHtml(client.cpu) : "";
|
|
const batteryIndicator = showField("battery") ? batteryHtml(client, { compact: true }) : "";
|
|
|
|
const metaParts = [
|
|
showField("system") ? `<span class="cv-card-meta-bit cv-tone-${os.tone}"><i class="fa ${os.icon}"></i> ${escapeHtml(shortOsLabel(client.os))}</span>` : "",
|
|
showField("system") ? `<span class="cv-card-meta-bit cv-tone-${arch.tone}">${escapeHtml(arch.label)}</span>` : "",
|
|
showField("monitors") ? `<span class="cv-card-meta-bit"><i class="fa fa-display"></i> ${client.monitors || 1}</span>` : "",
|
|
showField("version") && client.version ? `<span class="cv-card-meta-bit ${verLatest ? "" : "cv-warn"}"><i class="fa fa-tag"></i> v${escapeHtml(client.version)}</span>` : "",
|
|
].filter(Boolean).join("");
|
|
|
|
const elevationBadges = [
|
|
client.isAdmin ? `<span class="cv-mini-pill cv-pill-admin" title="Admin"><i class="fa-solid fa-shield-halved"></i></span>` : "",
|
|
client.elevation === "system" ? `<span class="cv-mini-pill cv-pill-system" title="SYSTEM"><i class="fa-solid fa-gear"></i></span>` : "",
|
|
client.elevation === "trustedinstaller" ? `<span class="cv-mini-pill cv-pill-ti" title="TrustedInstaller"><i class="fa-solid fa-lock"></i></span>` : "",
|
|
client.notificationsMuted ? `<span class="cv-mini-pill cv-pill-muted" title="Notifications muted"><i class="fa-solid fa-bell-slash"></i></span>` : "",
|
|
].join("");
|
|
|
|
article.innerHTML = `
|
|
<header class="cv-card-header">
|
|
${thumbHtml(client, { width: 290, height: 130, small: false })}
|
|
<label class="cv-checkbox cv-card-check">
|
|
<input type="checkbox" class="client-checkbox" data-id="${escapeHtml(client.id)}" ${client.online ? "" : "disabled"}>
|
|
<span class="cv-checkbox-box"><i class="fa-solid fa-check"></i></span>
|
|
</label>
|
|
<div class="cv-card-chips">
|
|
<button class="bookmark-btn cv-chip-btn ${client.bookmarked ? "is-on" : ""}" data-id="${escapeHtml(client.id)}" title="${client.bookmarked ? "Remove bookmark" : "Bookmark"}">
|
|
<i class="fa-${client.bookmarked ? "solid" : "regular"} fa-star"></i>
|
|
</button>
|
|
${isViewer ? "" : `<button class="cv-chip-btn kebab-btn" title="More" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ellipsis-vertical"></i></button>`}
|
|
</div>
|
|
<div class="cv-card-status">
|
|
${statusDot(client)} <span>${client.online ? "Online" : "Offline"}</span> <span class="cv-mid">·</span> <span class="cv-card-ago">${formatAgo(client.lastSeen)}</span>
|
|
</div>
|
|
<div class="cv-card-ping ${pingTone(client.pingMs)}">
|
|
<i class="fa-solid fa-satellite-dish"></i> <span class="cv-mono">${formatPing(client.pingMs)}</span>
|
|
</div>
|
|
</header>
|
|
<div class="cv-card-body">
|
|
<div class="cv-name-line">
|
|
<span class="cv-flag">${countryToFlag(client.country)}</span>
|
|
<span class="cv-name">${escapeHtml(displayName)}</span>
|
|
${elevationBadges}
|
|
</div>
|
|
${showField("user") ? `<div class="cv-user-line cv-mono"><i class="fa-solid fa-user"></i> ${escapeHtml(userLine)}${showHost ? ` <span class="cv-text-dim">@ ${escapeHtml(client.host)}</span>` : ""}</div>` : ""}
|
|
${customTag ? `<div class="cv-card-tag"><i class="fa-solid fa-tag"></i> ${escapeHtml(customTag)}</div>` : ""}
|
|
<div class="cv-card-net">
|
|
${showField("ip") && client.ip ? `<span class="cv-card-net-bit"><i class="fa-solid fa-network-wired"></i> <span class="cv-mono">${escapeHtml(client.ip)}</span></span>` : ""}
|
|
${showField("hwid") && hwidShort ? `<span class="cv-card-net-bit"><i class="fa-solid fa-fingerprint"></i> <span class="cv-mono">${escapeHtml(hwidShort)}</span></span>` : ""}
|
|
</div>
|
|
${metaParts || (showField("group") && hasGroup) ? `<div class="cv-card-meta">
|
|
${metaParts}
|
|
${showField("group") && hasGroup ? `<span class="cv-group-spacer">${groupPillHtml(client)}</span>` : ""}
|
|
</div>` : ""}
|
|
${cpuHtml || (showHardware && client.ram) || batteryIndicator ? `<div class="cv-card-hw">
|
|
${cpuHtml}
|
|
${showHardware && client.ram ? `<span class="cv-card-hw-bit"><i class="fa-solid fa-memory"></i> ${escapeHtml(client.ram)}</span>` : ""}
|
|
${batteryIndicator}
|
|
</div>` : ""}
|
|
<div class="cv-card-actions">
|
|
${isViewer ? "" : `<button class="command-btn cv-btn-primary cv-btn-flex" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-terminal"></i><span>Commands</span></button>`}
|
|
<button class="cv-icon-btn cv-ping-btn" title="Ping" ${client.online ? "" : "disabled"}><i class="fa-solid fa-satellite-dish"></i></button>
|
|
${isViewer ? "" : `<button class="cv-icon-btn cv-icon-danger ban-btn" title="Ban IP" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ban"></i></button>`}
|
|
</div>
|
|
</div>
|
|
`;
|
|
return article;
|
|
}
|
|
|
|
return { renderMerge, setLayout };
|
|
}
|