feat: Enhance hook management and session handling
- Update hook model to include last_triggered_at field. - Modify API endpoints to support updating hooks with new fields. - Implement session management UI improvements with toggle functionality. - Add new JavaScript functions for better session detail visibility. - Refactor hook storage logic to handle last triggered timestamps. - Introduce new favicon and logo for branding. - Update styles for improved layout and user experience. - Enhance tests to cover new functionality and ensure reliability.
This commit is contained in:
Andre Beging
@@ -1,6 +1,9 @@
|
||||
const sessionStatusEl = document.querySelector("#session-status");
|
||||
const sessionUserEl = document.querySelector("#session-user");
|
||||
const loginFeedbackEl = document.querySelector("#login-feedback");
|
||||
const sessionSummaryTextEl = document.querySelector("#session-summary-text");
|
||||
const sessionDetailsEl = document.querySelector("#session-details");
|
||||
const toggleSessionBtn = document.querySelector("#toggle-session");
|
||||
const startLoginForm = document.querySelector("#start-login-form");
|
||||
const verifyLoginForm = document.querySelector("#verify-login-form");
|
||||
const logoutButton = document.querySelector("#logout-button");
|
||||
@@ -10,9 +13,22 @@ const hookTemplate = document.querySelector("#hook-template");
|
||||
const createHookForm = document.querySelector("#create-hook-form");
|
||||
const toggleCreateBtn = document.querySelector("#toggle-create");
|
||||
|
||||
let sessionDetailsVisible = false;
|
||||
let sessionDetailsTouched = false;
|
||||
let createFormVisible = false;
|
||||
let createFormTouched = false;
|
||||
|
||||
function setSessionDetailsVisibility(show, { fromUser = false } = {}) {
|
||||
if (!toggleSessionBtn || !sessionDetailsEl) return;
|
||||
sessionDetailsVisible = show;
|
||||
if (fromUser) {
|
||||
sessionDetailsTouched = true;
|
||||
}
|
||||
sessionDetailsEl.classList.toggle("hidden", !show);
|
||||
toggleSessionBtn.setAttribute("aria-expanded", String(show));
|
||||
toggleSessionBtn.textContent = show ? "Hide session controls" : "Manage session";
|
||||
}
|
||||
|
||||
function setCreateFormVisibility(show, { fromUser = false } = {}) {
|
||||
if (!toggleCreateBtn) return;
|
||||
createFormVisible = show;
|
||||
@@ -37,6 +53,13 @@ if (toggleCreateBtn) {
|
||||
setCreateFormVisibility(false);
|
||||
}
|
||||
|
||||
if (toggleSessionBtn) {
|
||||
toggleSessionBtn.addEventListener("click", () => {
|
||||
setSessionDetailsVisibility(!sessionDetailsVisible, { fromUser: true });
|
||||
});
|
||||
setSessionDetailsVisibility(false);
|
||||
}
|
||||
|
||||
async function fetchJSON(url, options = {}) {
|
||||
const response = await fetch(url, {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
@@ -54,6 +77,9 @@ function updateSessionUI(status) {
|
||||
sessionStatusEl.textContent = "Authorized";
|
||||
sessionStatusEl.style.background = "rgba(100, 221, 155, 0.12)";
|
||||
sessionStatusEl.style.color = "#64dd9b";
|
||||
if (sessionSummaryTextEl) {
|
||||
sessionSummaryTextEl.textContent = status.user ? `Logged in as ${status.user}` : "Session ready";
|
||||
}
|
||||
sessionUserEl.textContent = `Logged in as ${status.user}`;
|
||||
loginFeedbackEl.textContent = "Session ready. You can trigger hooks.";
|
||||
startLoginForm.classList.add("hidden");
|
||||
@@ -63,6 +89,11 @@ function updateSessionUI(status) {
|
||||
sessionStatusEl.textContent = status.code_sent ? "Awaiting code" : "Not authorized";
|
||||
sessionStatusEl.style.background = "rgba(79, 140, 255, 0.15)";
|
||||
sessionStatusEl.style.color = "#4f8cff";
|
||||
if (sessionSummaryTextEl) {
|
||||
sessionSummaryTextEl.textContent = status.code_sent
|
||||
? "Waiting for verification"
|
||||
: "Login required";
|
||||
}
|
||||
sessionUserEl.textContent = status.phone_number
|
||||
? `Phone number: ${status.phone_number}`
|
||||
: "Set a phone number to begin";
|
||||
@@ -78,6 +109,13 @@ function updateSessionUI(status) {
|
||||
|
||||
startLoginForm.classList.remove("hidden");
|
||||
}
|
||||
|
||||
const shouldShowDetails = !status.authorized || status.code_sent;
|
||||
if (!sessionDetailsTouched) {
|
||||
setSessionDetailsVisibility(shouldShowDetails);
|
||||
} else if (shouldShowDetails && !sessionDetailsVisible) {
|
||||
setSessionDetailsVisibility(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
@@ -110,82 +148,110 @@ async function loadHooks() {
|
||||
const node = hookTemplate.content.cloneNode(true);
|
||||
node.querySelector("h3").textContent = hook.chat_id;
|
||||
node.querySelector(".hook-date").textContent = new Date(hook.created_at).toLocaleString();
|
||||
const lastRunEl = node.querySelector(".hook-last-run");
|
||||
if (lastRunEl) {
|
||||
lastRunEl.textContent = hook.last_triggered_at
|
||||
? `Last triggered ${new Date(hook.last_triggered_at).toLocaleString()}`
|
||||
: "Never triggered yet";
|
||||
}
|
||||
node.querySelector(".hook-message").textContent = hook.message;
|
||||
node.querySelector(".hook-url").textContent = hook.action_url;
|
||||
node.querySelector(".hook-id").textContent = hook.hook_id;
|
||||
const feedbackEl = node.querySelector(".hook-feedback");
|
||||
const editForm = node.querySelector(".edit-hook-form");
|
||||
const editIdInput = editForm.querySelector(".edit-id");
|
||||
const editChatInput = editForm.querySelector(".edit-chat");
|
||||
const editMessageInput = editForm.querySelector(".edit-message");
|
||||
const saveEditBtn = editForm.querySelector(".save-edit");
|
||||
const cancelEditBtn = editForm.querySelector(".cancel-edit");
|
||||
const editDetailsBtn = node.querySelector(".edit-details");
|
||||
|
||||
const setFeedback = (text = "", color = "") => {
|
||||
feedbackEl.textContent = text;
|
||||
feedbackEl.style.color = color;
|
||||
};
|
||||
|
||||
const toggleEditForm = (show) => {
|
||||
editForm.classList.toggle("hidden", !show);
|
||||
editDetailsBtn.disabled = show;
|
||||
if (show) {
|
||||
editIdInput.value = hook.hook_id;
|
||||
editChatInput.value = hook.chat_id;
|
||||
editMessageInput.value = hook.message;
|
||||
requestAnimationFrame(() => {
|
||||
editIdInput.focus();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
editDetailsBtn.addEventListener("click", () => {
|
||||
toggleEditForm(true);
|
||||
});
|
||||
|
||||
cancelEditBtn.addEventListener("click", () => {
|
||||
toggleEditForm(false);
|
||||
setFeedback();
|
||||
});
|
||||
|
||||
const copyBtn = node.querySelector(".copy");
|
||||
copyBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(hook.action_url);
|
||||
copyBtn.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
copyBtn.textContent = "Copy URL";
|
||||
}, 2000);
|
||||
setFeedback("Hook URL copied to clipboard.", "#64dd9b");
|
||||
setTimeout(() => setFeedback(), 2000);
|
||||
} catch (err) {
|
||||
copyBtn.textContent = "Copy failed";
|
||||
setTimeout(() => {
|
||||
copyBtn.textContent = "Copy URL";
|
||||
}, 2000);
|
||||
setFeedback(`Copy failed: ${err.message}`, "#ffbac7");
|
||||
setTimeout(() => setFeedback(), 2500);
|
||||
}
|
||||
});
|
||||
|
||||
const triggerBtn = node.querySelector(".trigger");
|
||||
triggerBtn.addEventListener("click", async () => {
|
||||
const originalText = triggerBtn.textContent;
|
||||
triggerBtn.disabled = true;
|
||||
triggerBtn.textContent = "Sending…";
|
||||
feedbackEl.textContent = "";
|
||||
setFeedback("Sending message…");
|
||||
try {
|
||||
const result = await fetchJSON(`/action/${hook.hook_id}`);
|
||||
triggerBtn.textContent = "Sent";
|
||||
feedbackEl.textContent = `Status: ${result.status}`;
|
||||
feedbackEl.style.color = "#64dd9b";
|
||||
setFeedback(`Status: ${result.status}`, "#64dd9b");
|
||||
} catch (err) {
|
||||
triggerBtn.textContent = "Retry";
|
||||
feedbackEl.textContent = `Failed: ${err.message}`;
|
||||
feedbackEl.style.color = "#ffbac7";
|
||||
setFeedback(`Failed: ${err.message}`, "#ffbac7");
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
triggerBtn.textContent = originalText;
|
||||
triggerBtn.disabled = false;
|
||||
feedbackEl.style.color = "";
|
||||
}, 2000);
|
||||
setFeedback();
|
||||
}, 2500);
|
||||
}
|
||||
});
|
||||
|
||||
const editIdBtn = node.querySelector(".edit-id");
|
||||
const editIconMarkup = editIdBtn.innerHTML;
|
||||
editIdBtn.addEventListener("click", async () => {
|
||||
const newId = prompt("Enter new hook ID", hook.hook_id);
|
||||
if (newId === null) {
|
||||
editForm.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const updatedId = editIdInput.value.trim();
|
||||
const updatedChat = editChatInput.value.trim();
|
||||
const updatedMessage = editMessageInput.value.trim();
|
||||
if (!updatedId || !updatedChat || !updatedMessage) {
|
||||
setFeedback("Hook ID, chat ID, and message are required.", "#ffbac7");
|
||||
return;
|
||||
}
|
||||
const sanitized = newId.trim();
|
||||
if (!sanitized || sanitized === hook.hook_id) {
|
||||
return;
|
||||
}
|
||||
editIdBtn.disabled = true;
|
||||
editIdBtn.textContent = "Saving…";
|
||||
feedbackEl.textContent = "";
|
||||
saveEditBtn.disabled = true;
|
||||
cancelEditBtn.disabled = true;
|
||||
const originalSaveText = saveEditBtn.textContent;
|
||||
saveEditBtn.textContent = "Saving…";
|
||||
setFeedback();
|
||||
try {
|
||||
await fetchJSON(`/api/hooks/${hook.hook_id}`, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify({ hook_id: sanitized }),
|
||||
body: JSON.stringify({ hook_id: updatedId, chat_id: updatedChat, message: updatedMessage }),
|
||||
});
|
||||
feedbackEl.textContent = "Hook ID updated.";
|
||||
feedbackEl.style.color = "#64dd9b";
|
||||
setFeedback("Hook updated.", "#64dd9b");
|
||||
toggleEditForm(false);
|
||||
await loadHooks();
|
||||
} catch (err) {
|
||||
feedbackEl.textContent = `Update failed: ${err.message}`;
|
||||
feedbackEl.style.color = "#ffbac7";
|
||||
setFeedback(`Update failed: ${err.message}`, "#ffbac7");
|
||||
} finally {
|
||||
editIdBtn.disabled = false;
|
||||
editIdBtn.innerHTML = editIconMarkup;
|
||||
saveEditBtn.disabled = false;
|
||||
cancelEditBtn.disabled = false;
|
||||
saveEditBtn.textContent = originalSaveText;
|
||||
setTimeout(() => {
|
||||
feedbackEl.textContent = "";
|
||||
feedbackEl.style.color = "";
|
||||
setFeedback();
|
||||
}, 2500);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user