add downloading from urls and custom tags to clients.
This commit is contained in:
KingKDot
@@ -15,6 +15,37 @@ const updateBtn = document.getElementById("update-btn");
|
||||
const outputContainer = document.getElementById("output-container");
|
||||
const clearOutputBtn = document.getElementById("clear-output-btn");
|
||||
|
||||
const tabUpload = document.getElementById("tab-upload");
|
||||
const tabUrl = document.getElementById("tab-url");
|
||||
const panelUpload = document.getElementById("panel-upload");
|
||||
const panelUrl = document.getElementById("panel-url");
|
||||
const urlInput = document.getElementById("url-input");
|
||||
const fetchUrlBtn = document.getElementById("fetch-url-btn");
|
||||
|
||||
let activeTab = "upload";
|
||||
|
||||
function switchTab(tab) {
|
||||
activeTab = tab;
|
||||
if (tab === "upload") {
|
||||
tabUpload.classList.add("bg-slate-700", "text-slate-100");
|
||||
tabUpload.classList.remove("text-slate-400");
|
||||
tabUrl.classList.remove("bg-slate-700", "text-slate-100");
|
||||
tabUrl.classList.add("text-slate-400");
|
||||
panelUpload.classList.remove("hidden");
|
||||
panelUrl.classList.add("hidden");
|
||||
} else {
|
||||
tabUrl.classList.add("bg-slate-700", "text-slate-100");
|
||||
tabUrl.classList.remove("text-slate-400");
|
||||
tabUpload.classList.remove("bg-slate-700", "text-slate-100");
|
||||
tabUpload.classList.add("text-slate-400");
|
||||
panelUrl.classList.remove("hidden");
|
||||
panelUpload.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
tabUpload.addEventListener("click", () => switchTab("upload"));
|
||||
tabUrl.addEventListener("click", () => switchTab("url"));
|
||||
|
||||
let allClients = [];
|
||||
let filteredClients = [];
|
||||
const selectedClients = new Set();
|
||||
@@ -338,6 +369,64 @@ async function uploadFile(file) {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchFromUrl() {
|
||||
const rawUrl = urlInput.value.trim();
|
||||
if (!rawUrl) {
|
||||
setUploadStatus("Please enter a URL", "text-red-400");
|
||||
return;
|
||||
}
|
||||
|
||||
setUploadStatus("Downloading from URL...", "text-blue-400");
|
||||
fetchUrlBtn.disabled = true;
|
||||
executeBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/deploy/fetch-url", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ url: rawUrl }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
setUploadStatus(text || "Fetch failed", "text-red-400");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
if (!data.ok) {
|
||||
setUploadStatus(data.error || "Fetch failed", "text-red-400");
|
||||
return;
|
||||
}
|
||||
|
||||
uploaded = data;
|
||||
allowedOs = data.os || "unknown";
|
||||
const sizeBytes = Number(data.size ?? 0);
|
||||
setUploadStatus(`Fetched ${data.name} (${formatBytes(sizeBytes)})`, "text-emerald-400");
|
||||
setOsBadge(allowedOs);
|
||||
|
||||
filterAndRenderClients();
|
||||
Array.from(selectedClients).forEach((clientId) => {
|
||||
const client = allClients.find((c) => c.id === clientId);
|
||||
if (!client || !matchesClientOs(client.os || "", allowedOs)) {
|
||||
selectedClients.delete(clientId);
|
||||
}
|
||||
});
|
||||
renderClients();
|
||||
updateSelectedCount();
|
||||
} catch (error) {
|
||||
console.error("URL fetch failed:", error);
|
||||
setUploadStatus("Fetch failed", "text-red-400");
|
||||
} finally {
|
||||
fetchUrlBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
fetchUrlBtn.addEventListener("click", fetchFromUrl);
|
||||
urlInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") fetchFromUrl();
|
||||
});
|
||||
|
||||
executeBtn.addEventListener("click", async () => {
|
||||
if (selectedClients.size === 0) {
|
||||
alert("Please select at least one client");
|
||||
|
||||
@@ -103,6 +103,62 @@ function getClientCard(clientId) {
|
||||
return document.querySelector(`article[data-id="${selectorId}"]`);
|
||||
}
|
||||
|
||||
function openTagNoteEditor(clientId, currentTag, currentNote) {
|
||||
return new Promise((resolve) => {
|
||||
const overlay = document.createElement("div");
|
||||
overlay.className =
|
||||
"fixed inset-0 z-[10001] bg-black/70 backdrop-blur-sm flex items-center justify-center p-4";
|
||||
overlay.innerHTML = `
|
||||
<div class="w-full max-w-xl rounded-xl border border-slate-700 bg-slate-900 p-5 shadow-2xl">
|
||||
<h3 class="text-lg font-semibold text-slate-100">Custom Tag</h3>
|
||||
<p id="tag-editor-client" class="mt-1 text-sm text-slate-400"></p>
|
||||
<label class="mt-4 block text-sm text-slate-300">Tag</label>
|
||||
<input id="tag-editor-input" type="text" class="mt-1 w-full rounded-lg border border-slate-600 bg-slate-950 px-3 py-2 text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="e.g. VIP, Priority, Finance">
|
||||
<label class="mt-4 block text-sm text-slate-300">Note</label>
|
||||
<textarea id="tag-editor-note" class="mt-1 min-h-[220px] w-full rounded-lg border border-slate-600 bg-slate-950 px-3 py-2 text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="Write as much as you need. No note length limit."></textarea>
|
||||
<div class="mt-4 flex items-center justify-between gap-2">
|
||||
<button id="tag-editor-clear" class="rounded-lg border border-rose-700 bg-rose-900/50 px-3 py-2 text-sm text-rose-100 hover:bg-rose-800">Clear</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="tag-editor-cancel" class="rounded-lg border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-slate-100 hover:bg-slate-700">Cancel</button>
|
||||
<button id="tag-editor-save" class="rounded-lg border border-blue-700 bg-blue-700 px-3 py-2 text-sm text-white hover:bg-blue-600">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const clientLabel = overlay.querySelector("#tag-editor-client");
|
||||
if (clientLabel) clientLabel.textContent = clientId;
|
||||
const tagInput = overlay.querySelector("#tag-editor-input");
|
||||
if (tagInput) tagInput.value = currentTag || "";
|
||||
const textarea = overlay.querySelector("#tag-editor-note");
|
||||
textarea.value = currentNote || "";
|
||||
|
||||
const closeWith = (result) => {
|
||||
overlay.remove();
|
||||
resolve(result);
|
||||
};
|
||||
|
||||
overlay.addEventListener("click", (e) => {
|
||||
if (e.target === overlay) closeWith(null);
|
||||
});
|
||||
|
||||
overlay
|
||||
.querySelector("#tag-editor-cancel")
|
||||
?.addEventListener("click", () => closeWith(null));
|
||||
overlay
|
||||
.querySelector("#tag-editor-clear")
|
||||
?.addEventListener("click", () => closeWith({ tag: "", note: "" }));
|
||||
overlay.querySelector("#tag-editor-save")?.addEventListener("click", () => {
|
||||
const tag = String(overlay.querySelector("#tag-editor-input")?.value || "").trim();
|
||||
const note = String(overlay.querySelector("#tag-editor-note")?.value || "");
|
||||
closeWith({ tag, note });
|
||||
});
|
||||
|
||||
document.body.appendChild(overlay);
|
||||
overlay.querySelector("#tag-editor-input")?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function isClientOnline(clientId) {
|
||||
return getClientCard(clientId)?.dataset.online === "true";
|
||||
}
|
||||
@@ -575,6 +631,27 @@ window.setClientNickname = async (clientId, nickname) => {
|
||||
}
|
||||
};
|
||||
|
||||
window.setClientTag = async (clientId, tag, note) => {
|
||||
if (!clientId) return false;
|
||||
try {
|
||||
const res = await fetch(`/api/clients/${clientId}/tag`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ tag: tag || "", note: note ?? "" }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
alert(data.error || "Failed to update custom tag");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert("Failed to update custom tag");
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
window.banClient = async (clientId) => {
|
||||
if (!clientId) return;
|
||||
if (!confirm(`Ban IP for ${clientId} and block future connections?`)) return;
|
||||
@@ -771,6 +848,26 @@ menu.addEventListener("click", async (e) => {
|
||||
}
|
||||
closeMenu(clearContext);
|
||||
return;
|
||||
} else if (action === "set-custom-tag") {
|
||||
const card = getClientCard(contextCard);
|
||||
const currentTag = (card?.dataset.customTag || "").trim();
|
||||
const currentNote = card?._customTagNote || "";
|
||||
const result = await openTagNoteEditor(contextCard, currentTag, currentNote);
|
||||
if (!result) {
|
||||
closeMenu(clearContext);
|
||||
return;
|
||||
}
|
||||
|
||||
const updated = await window.setClientTag(
|
||||
contextCard,
|
||||
result.tag || "",
|
||||
result.note || "",
|
||||
);
|
||||
if (updated) {
|
||||
setTimeout(() => loadWithOptions({ force: true }), 200);
|
||||
}
|
||||
closeMenu(clearContext);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isClientOnline(contextCard)) {
|
||||
|
||||
@@ -206,10 +206,13 @@ export function createRenderer({
|
||||
function updateCard(card, client) {
|
||||
const oldCheckbox = card.querySelector(".client-checkbox");
|
||||
const wasChecked = oldCheckbox?.checked || false;
|
||||
const wasTagNoteExpanded = card.dataset.tagNoteExpanded === "true";
|
||||
|
||||
card.dataset.online = String(!!client.online);
|
||||
card.dataset.os = String(client.os || "").toLowerCase();
|
||||
card.dataset.nickname = String(client.nickname || "");
|
||||
card.dataset.customTag = String(client.customTag || "");
|
||||
card._customTagNote = String(client.customTagNote || "");
|
||||
const os = osBadge(client.os || "unknown");
|
||||
const arch = archBadge(client.arch || "");
|
||||
const ver = versionBadge(client.version || "");
|
||||
@@ -217,7 +220,12 @@ export function createRenderer({
|
||||
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 hasTagNote = customTag.length > 0 && customTagNote.length > 0;
|
||||
const isTagNoteExpanded = hasTagNote && wasTagNoteExpanded;
|
||||
card.dataset.tagNoteExpanded = isTagNoteExpanded ? "true" : "false";
|
||||
card.className = `card rounded-xl border border-slate-800 bg-slate-900/70 p-4 shadow-lg ${client.online ? "" : "card-offline"} tone-${os.tone}`;
|
||||
const cardThumb = client.thumbnail
|
||||
? (() => {
|
||||
@@ -249,12 +257,14 @@ export function createRenderer({
|
||||
<span class="text-2xl">${countryToFlag(client.country)}</span>
|
||||
<span>${escapeHtml(displayName)}</span>
|
||||
${nickname && client.host ? `<span class="pill pill-ghost text-xs"><i class="fa-solid fa-laptop"></i> ${escapeHtml(client.host)}</span>` : ""}
|
||||
${customTag ? `<button type="button" class="client-tag-toggle pill text-xs border border-amber-700/80 bg-amber-900/30 text-amber-200 ${hasTagNote ? "cursor-pointer hover:bg-amber-800/40" : "cursor-default opacity-90"}" ${hasTagNote ? `aria-expanded="${isTagNoteExpanded ? "true" : "false"}"` : `disabled aria-disabled="true"`}><i class="fa-solid fa-tag"></i> ${escapeHtml(customTag)} ${customTagNote ? `<i class="fa-regular fa-note-sticky"></i><i class="fa-solid ${isTagNoteExpanded ? "fa-chevron-up" : "fa-chevron-down"}"></i>` : ""}</button>` : ""}
|
||||
<span class="text-slate-300 text-lg font-semibold flex items-center gap-1"><i class="fa-solid fa-user"></i> ${escapeHtml(client.user || "unknown")}</span>
|
||||
<span class="pill ${client.online ? "pill-online" : "pill-offline"}">
|
||||
<i class="fa-solid fa-circle"></i>
|
||||
${client.online ? "Online" : "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
${hasTagNote ? `<div class="client-tag-note rounded-lg border border-amber-900/60 bg-amber-950/20 px-3 py-2 text-sm text-amber-100 whitespace-pre-wrap break-words max-h-48 overflow-auto ${isTagNoteExpanded ? "" : "hidden"}">${escapeHtml(customTagNote)}</div>` : ""}
|
||||
<div class="flex items-center gap-2 flex-wrap text-sm text-slate-300">
|
||||
<span class="pill pill-ghost"><i class="fa-regular fa-clock"></i> ${formatAgo(client.lastSeen)}</span>
|
||||
<span class="pill ${os.tone}"><i class="fa ${os.icon}"></i> ${os.label}</span>
|
||||
@@ -313,6 +323,21 @@ export function createRenderer({
|
||||
});
|
||||
}
|
||||
|
||||
card.querySelector(".client-tag-toggle")?.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
card
|
||||
.querySelector(".thumb-img")
|
||||
?.addEventListener("click", () => openModal(client.thumbnail));
|
||||
|
||||
@@ -43,6 +43,7 @@ const MENU_GROUPS = [
|
||||
{ label: "Ping", icon: "fa-solid fa-satellite-dish", icolor: "text-slate-300", action: "ping" },
|
||||
{ label: "Reconnect", icon: "fa-solid fa-rotate", icolor: "text-slate-300", action: "reconnect" },
|
||||
{ label: "Set Nickname", icon: "fa-solid fa-signature", icolor: "text-slate-300", action: "set-nickname" },
|
||||
{ label: "Set Custom Tag", icon: "fa-solid fa-tag", icolor: "text-slate-300", action: "set-custom-tag" },
|
||||
{ divider: true },
|
||||
{ label: "Disconnect", icon: "fa-solid fa-plug-circle-xmark", icolor: "text-red-400", action: "disconnect" },
|
||||
{ label: "Uninstall", icon: "fa-solid fa-trash", icolor: "text-red-300", action: "uninstall" },
|
||||
|
||||
@@ -15,6 +15,8 @@ export function digestData(data, { page, pageSize, searchTerm, sort }) {
|
||||
ping: c.pingMs,
|
||||
host: c.host,
|
||||
user: c.user,
|
||||
customTag: c.customTag,
|
||||
customTagNote: c.customTagNote,
|
||||
thumbnail: c.thumbnail,
|
||||
version: c.version,
|
||||
country: c.country,
|
||||
|
||||
@@ -105,24 +105,54 @@
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-300 mb-2"
|
||||
>Installer Upload</label
|
||||
>
|
||||
<div
|
||||
id="upload-zone"
|
||||
class="border-2 border-dashed border-slate-700 rounded-xl p-6 bg-slate-950/60 hover:border-cyan-500 transition-colors cursor-pointer"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-cyan-900/40 flex items-center justify-center text-cyan-300">
|
||||
<i class="fa-solid fa-cloud-arrow-up"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-slate-100">Drag & drop an installer</div>
|
||||
<div class="text-sm text-slate-400">or click to select a file</div>
|
||||
</div>
|
||||
</div>
|
||||
<input id="upload-input" type="file" class="hidden" />
|
||||
<!-- Source mode tabs -->
|
||||
<div class="flex gap-1 mb-3 p-1 rounded-lg bg-slate-950/60 border border-slate-800 w-fit">
|
||||
<button id="tab-upload" class="px-4 py-1.5 rounded-md text-sm font-medium bg-slate-700 text-slate-100 transition-colors">
|
||||
<i class="fa-solid fa-cloud-arrow-up mr-1"></i> Upload File
|
||||
</button>
|
||||
<button id="tab-url" class="px-4 py-1.5 rounded-md text-sm font-medium text-slate-400 hover:text-slate-100 transition-colors">
|
||||
<i class="fa-solid fa-link mr-1"></i> File URL
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Upload panel -->
|
||||
<div id="panel-upload">
|
||||
<div
|
||||
id="upload-zone"
|
||||
class="border-2 border-dashed border-slate-700 rounded-xl p-6 bg-slate-950/60 hover:border-cyan-500 transition-colors cursor-pointer"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-cyan-900/40 flex items-center justify-center text-cyan-300">
|
||||
<i class="fa-solid fa-cloud-arrow-up"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-slate-100">Drag & drop an installer</div>
|
||||
<div class="text-sm text-slate-400">or click to select a file</div>
|
||||
</div>
|
||||
</div>
|
||||
<input id="upload-input" type="file" class="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- URL panel -->
|
||||
<div id="panel-url" class="hidden">
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
id="url-input"
|
||||
type="text"
|
||||
placeholder="https://example.com/installer.exe"
|
||||
class="flex-1 px-4 py-2 rounded-lg border border-slate-700 bg-slate-950 text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
|
||||
/>
|
||||
<button
|
||||
id="fetch-url-btn"
|
||||
class="px-4 py-2 rounded-lg bg-cyan-700 hover:bg-cyan-600 text-white font-semibold flex items-center gap-2 whitespace-nowrap"
|
||||
>
|
||||
<i class="fa-solid fa-download"></i> Fetch
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500 mt-1">The server will download the file and stage it for dispatch.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 text-sm text-slate-400" id="upload-status">
|
||||
No file uploaded yet.
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user