rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve admin chat controls

Browse Source
This commit is contained in:
rajchales-monito
2026-07-23 22:35:36 +02:00
parent f2b388779d
commit 8c71dbf1bf
4 changed files with 211 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+75 -5
View File
@@ -55,7 +55,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
border-right: 1px solid var(--line);
background: var(--panel);
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
grid-template-rows: auto auto auto minmax(0, 1fr);
}
.brand, .sitebar {
display: flex;
@@ -69,22 +69,40 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.brand button, .sitebar button { background: #edf3ef; color: var(--ink); }
.switch { display: flex; align-items: center; gap: 8px; }
.switch input { width: auto; }
.list-tools {
padding: 10px 14px;
border-bottom: 1px solid var(--line);
background: #fbfdfb;
}
.list-tools label { color: var(--muted); }
.conversation-list { overflow: auto; }
.conversation-item {
width: 100%;
text-align: left;
border: 0;
border-bottom: 1px solid var(--line);
background: white;
color: var(--ink);
border-radius: 0;
padding: 12px 14px;
padding: 10px;
display: grid;
gap: 5px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: start;
}
.conversation-item.active { background: #eaf6f1; }
.conversation-item.fresh { animation: pulse 1.2s ease-in-out 4; }
.conversation-open {
min-width: 0;
text-align: left;
display: grid;
gap: 5px;
border: 0;
background: transparent;
color: var(--ink);
border-radius: 6px;
padding: 2px;
}
.conversation-open:hover { filter: none; background: #f3f7f4; }
.row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.status {
font-size: 12px;
@@ -93,7 +111,59 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
border-radius: 999px;
padding: 2px 8px;
}
.photo-count {
flex: 0 0 auto;
color: var(--brand);
font-size: 12px;
}
.snippet, .preview, .meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-photo {
grid-column: 1 / -1;
width: 100%;
height: 74px;
padding: 0;
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
background: #edf3ef;
}
.list-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.conversation-actions {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
gap: 8px;
}
.status-select {
height: 34px;
padding: 5px 8px;
font-size: 12px;
}
.status-select.new { border-color: #2f9e44; background: #effaf2; }
.status-select.open { border-color: #2f80ed; background: #eef5ff; }
.status-select.resolved { border-color: #87908a; background: #f3f5f3; }
.status-select.spam { border-color: #d92d20; background: #fff1f0; }
.delete-chat {
width: 34px;
height: 34px;
padding: 0;
display: grid;
place-items: center;
background: #fff1f0;
color: #b42318;
}
.delete-chat svg { width: 18px; height: 18px; fill: currentColor; }
.empty-list {
margin: 0;
padding: 18px 14px;
color: var(--muted);
font-size: 13px;
}
.conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; }
.conversation-header {
public/admin.html
+12 -6
View File
@@ -32,6 +32,18 @@
</label>
<button id="settingsButton" type="button">Nastaveni</button>
</div>
<div class="list-tools">
<label>Filtr
<select id="conversationFilter">
<option value="active">aktivni</option>
<option value="all">vse</option>
<option value="new">nove</option>
<option value="open">otevrene</option>
<option value="resolved">vyresene</option>
<option value="spam">spam</option>
</select>
</label>
</div>
<div id="conversationList" class="conversation-list"></div>
</aside>
@@ -41,12 +53,6 @@
<h2>Vyber konverzaci</h2>
<p>Nova konverzace se tady zvyrazni a pusti zvuk.</p>
</div>
<select id="statusSelect" class="hidden">
<option value="new">nove</option>
<option value="open">otevrene</option>
<option value="resolved">vyresene</option>
<option value="spam">spam</option>
</select>
</header>
<div id="messages" class="messages"></div>
<div id="typingNotice" class="typing hidden">Zakaznik pise...</div>
public/admin.js
+96 -20
View File
@@ -4,7 +4,8 @@ const state = {
conversations: [],
activeId: null,
active: null,
events: null
events: null,
statusFilter: "active"
};
const $ = (selector) => document.querySelector(selector);
@@ -78,13 +79,30 @@ $("#replyForm textarea").addEventListener("input", debounce(() => {
api(`/api/admin/conversations/${state.activeId}/typing`, { method: "POST" }).catch(() => {});
}, 600));
$("#statusSelect").addEventListener("change", async () => {
if (!state.activeId) return;
await api(`/api/admin/conversations/${state.activeId}/status`, {
method: "PATCH",
body: { status: $("#statusSelect").value }
});
await loadConversations();
$("#conversationFilter").addEventListener("change", () => {
state.statusFilter = $("#conversationFilter").value;
renderConversations();
});
$("#conversationList").addEventListener("click", async (event) => {
const photoButton = event.target.closest("[data-photo-url]");
const openButton = event.target.closest("[data-open]");
const deleteButton = event.target.closest("[data-delete]");
if (photoButton) {
openPhotoPreview(photoButton.dataset.photoUrl, photoButton.dataset.photoName);
return;
}
if (deleteButton) {
await deleteConversation(deleteButton.dataset.delete);
return;
}
if (openButton) await openConversation(openButton.dataset.open);
});
$("#conversationList").addEventListener("change", async (event) => {
const statusSelect = event.target.closest("[data-status-for]");
if (!statusSelect) return;
await updateConversationStatus(statusSelect.dataset.statusFor, statusSelect.value);
});
$("#messages").addEventListener("click", (event) => {
@@ -140,7 +158,11 @@ function connectEvents() {
return;
}
await loadConversations();
if (state.activeId) await openConversation(state.activeId);
if (data.type === "conversation:delete" && data.conversationId === state.activeId) {
clearActiveConversation();
return;
}
if (state.activeId) await openConversation(state.activeId).catch(() => clearActiveConversation());
if (data.type === "conversation:new" || data.type === "message:new") notify();
});
}
@@ -164,21 +186,29 @@ function renderSite() {
}
function renderConversations() {
$("#conversationList").innerHTML = state.conversations.map((item) => `
<button class="conversation-item ${item.id === state.activeId ? "active" : ""} ${item.status === "new" ? "fresh" : ""}" data-id="${item.id}">
<span class="row"><strong>${escapeHtml(item.visitor.name || item.visitor.email || "Navstevnik")}</strong><span class="status">${item.status}</span></span>
const conversations = filteredConversations();
$("#conversationList").innerHTML = conversations.length ? conversations.map((item) => `
<article class="conversation-item ${item.id === state.activeId ? "active" : ""} ${item.status === "new" ? "fresh" : ""}">
<button class="conversation-open" type="button" data-open="${item.id}">
<span class="row"><strong>${escapeHtml(item.visitor.name || item.visitor.email || "Navstevnik")}</strong>${item.imageCount ? `<span class="photo-count">foto ${item.imageCount}</span>` : ""}</span>
<span class="preview">${escapeHtml(item.lastBody || "")}</span>
<span class="meta">${flag(item.countryCode)} ${escapeHtml(item.language || "")} ${escapeHtml(item.currentUrl || "")}</span>
</button>
`).join("");
for (const button of document.querySelectorAll(".conversation-item")) {
button.addEventListener("click", () => openConversation(button.dataset.id));
}
${item.firstImageUrl ? `<button class="list-photo" type="button" data-photo-url="${escapeHtml(item.firstImageUrl)}" data-photo-name="Fotka v chatu"><img src="${escapeHtml(item.firstImageUrl)}" alt="Fotka v chatu"></button>` : ""}
<div class="conversation-actions">
<select class="status-select ${item.status}" data-status-for="${item.id}" aria-label="Zmenit stav chatu">
${statusOptions(item.status)}
</select>
<button class="delete-chat" type="button" data-delete="${item.id}" aria-label="Smazat chat" title="Smazat chat">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11H7.7L7 9Zm3 2 .2 7h1.6l-.2-7H10Zm4 0-.2 7h1.6l.2-7H14Z"></path></svg>
</button>
</div>
</article>
`).join("") : `<p class="empty-list">Zadny chat pro vybrany filtr.</p>`;
}
function renderActive() {
const { conversation, messages } = state.active;
const statusSelect = $("#statusSelect");
$("#conversationHeader").innerHTML = `
<div>
<h2>${escapeHtml(conversation.visitor.name || conversation.visitor.email || "Navstevnik")}</h2>
@@ -186,9 +216,6 @@ function renderActive() {
<p>${escapeHtml(conversation.device.userAgent || "")}</p>
</div>
`;
$("#conversationHeader").append(statusSelect);
statusSelect.classList.remove("hidden");
statusSelect.value = conversation.status;
$("#replyForm").classList.remove("hidden");
$("#messages").innerHTML = messages.map((message) => `
<article class="message ${message.senderType}">
@@ -200,6 +227,55 @@ function renderActive() {
$("#messages").scrollTop = $("#messages").scrollHeight;
}
function filteredConversations() {
if (state.statusFilter === "all") return state.conversations;
if (state.statusFilter === "active") return state.conversations.filter((item) => item.status === "new" || item.status === "open");
return state.conversations.filter((item) => item.status === state.statusFilter);
}
function statusOptions(currentStatus) {
return [
["new", "nove"],
["open", "otevrene"],
["resolved", "vyresene"],
["spam", "spam"]
].map(([value, label]) => `<option value="${value}" ${value === currentStatus ? "selected" : ""}>${label}</option>`).join("");
}
async function updateConversationStatus(id, status) {
await api(`/api/admin/conversations/${id}/status`, {
method: "PATCH",
body: { status }
});
const item = state.conversations.find((conversation) => conversation.id === id);
if (item) item.status = status;
if (state.active?.conversation?.id === id) state.active.conversation.status = status;
renderConversations();
}
async function deleteConversation(id) {
const item = state.conversations.find((conversation) => conversation.id === id);
const label = item?.visitor?.name || item?.lastBody || "tento chat";
if (!confirm(`Smazat ${label}? Tahle akce nejde vratit.`)) return;
await api(`/api/admin/conversations/${id}`, { method: "DELETE" });
state.conversations = state.conversations.filter((conversation) => conversation.id !== id);
if (state.activeId === id) clearActiveConversation();
renderConversations();
}
function clearActiveConversation() {
state.activeId = null;
state.active = null;
$("#conversationHeader").innerHTML = `
<div>
<h2>Vyber konverzaci</h2>
<p>Nova konverzace se tady zvyrazni a pusti zvuk.</p>
</div>
`;
$("#messages").innerHTML = "";
$("#replyForm").classList.add("hidden");
}
function renderAttachments(attachments) {
if (!attachments.length) return "";
return `<div class="attachments">${attachments.map((attachment) => {
server.js
+25 -2
View File
@@ -77,6 +77,7 @@ async function adminApi(req, res, url) {
if (url.pathname === "/api/admin/site" && req.method === "PATCH") return updateSite(req, res);
if (url.pathname === "/api/admin/conversations" && req.method === "GET") return adminConversations(res);
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+$/) && req.method === "GET") return adminConversation(res, url);
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+$/) && req.method === "DELETE") return deleteConversation(res, url);
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+\/messages$/) && req.method === "POST") return createAdminMessage(req, res, url);
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+\/status$/) && req.method === "PATCH") return updateConversationStatus(req, res, url);
if (url.pathname.match(/^\/api\/admin\/conversations\/[^/]+\/typing$/) && req.method === "POST") return adminTyping(req, res, url);
@@ -256,7 +257,9 @@ function adminConversations(res) {
const rows = db.prepare(`
SELECT c.*, s.site_key,
(SELECT body FROM messages WHERE conversation_id = c.id ORDER BY id DESC LIMIT 1) AS last_body,
(SELECT COUNT(*) FROM messages WHERE conversation_id = c.id) AS message_count
(SELECT COUNT(*) FROM messages WHERE conversation_id = c.id) AS message_count,
(SELECT COUNT(*) FROM attachments WHERE conversation_id = c.id AND mime_type LIKE 'image/%') AS image_count,
(SELECT public_url FROM attachments WHERE conversation_id = c.id AND mime_type LIKE 'image/%' ORDER BY id DESC LIMIT 1) AS first_image_url
FROM conversations c
JOIN sites s ON s.id = c.site_id
ORDER BY datetime(c.last_message_at) DESC, c.id DESC
@@ -297,6 +300,24 @@ async function updateConversationStatus(req, res, url) {
return json(res, 200, { conversation: formatConversationSummary(updated) });
}
function deleteConversation(res, url) {
const conversation = findConversation(publicIdFrom(url));
if (!conversation) return json(res, 404, { error: "conversation_not_found" });
const attachments = db.prepare("SELECT storage_path FROM attachments WHERE conversation_id = ?").all(conversation.id);
db.transaction(() => {
db.prepare("DELETE FROM attachments WHERE conversation_id = ?").run(conversation.id);
db.prepare("DELETE FROM messages WHERE conversation_id = ?").run(conversation.id);
db.prepare("DELETE FROM conversations WHERE id = ?").run(conversation.id);
})();
for (const attachment of attachments) {
if (attachment.storage_path && path.resolve(attachment.storage_path).startsWith(path.resolve(UPLOAD_DIR))) {
fs.rmSync(attachment.storage_path, { force: true });
}
}
publish("admin", { type: "conversation:delete", conversationId: conversation.public_id });
return json(res, 200, { ok: true });
}
function widgetConfig(res, url) {
const siteKey = url.searchParams.get("siteKey") || process.env.DEFAULT_SITE_KEY || "9b-plus";
const site = db.prepare("SELECT * FROM sites WHERE site_key = ?").get(siteKey);
@@ -501,6 +522,8 @@ function formatConversationSummary(row) {
vpnRisk: Boolean(row.vpn_risk),
lastBody: row.last_body,
messageCount: row.message_count,
imageCount: row.image_count || 0,
firstImageUrl: row.first_image_url,
lastMessageAt: row.last_message_at,
createdAt: row.created_at
};
@@ -582,7 +605,7 @@ function json(res, status, payload) {
function setCommonHeaders(res) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
res.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,OPTIONS");
res.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,OPTIONS");
}
function endCors(res) {