From 3d10aba9894434bc9ad6c688d47164adf5c1587d Mon Sep 17 00:00:00 2001 From: Sergio Vera Date: Sun, 28 Jan 2024 18:39:36 +0100 Subject: [PATCH 1/2] Reload page when dehighlighting a document --- internal/webserver/embedded/js/actions.js | 83 +++++++++++++++++++ internal/webserver/embedded/js/delete.js | 41 +++++++++ .../webserver/embedded/views/actions.js.html | 81 ------------------ .../webserver/embedded/views/delete.js.html | 43 ---------- .../webserver/embedded/views/document.html | 4 +- internal/webserver/embedded/views/index.html | 9 +- .../embedded/views/partials/actions.html | 4 +- .../embedded/views/partials/delete-modal.html | 2 +- .../embedded/views/partials/docs-list.html | 6 +- 9 files changed, 137 insertions(+), 136 deletions(-) create mode 100644 internal/webserver/embedded/js/actions.js create mode 100644 internal/webserver/embedded/js/delete.js delete mode 100644 internal/webserver/embedded/views/actions.js.html delete mode 100644 internal/webserver/embedded/views/delete.js.html diff --git a/internal/webserver/embedded/js/actions.js b/internal/webserver/embedded/js/actions.js new file mode 100644 index 0000000..b81a3bd --- /dev/null +++ b/internal/webserver/embedded/js/actions.js @@ -0,0 +1,83 @@ +function send(el, successMessage, errorMessage) { + event.preventDefault(); + let form = el.closest(".send-email") + + let submit = form.querySelector('button'); + let sendIcon = document.querySelector('.bi-send-fill'); + let spinner = document.querySelector('.spinner-border'); + + submit.setAttribute("disabled", true); + spinner.classList.remove("visually-hidden"); + sendIcon.classList.add("visually-hidden"); + fetch('/send', { + method: "POST", + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: new URLSearchParams({ + 'email': form.elements[0].value, + 'slug': form.elements[1].value, + }) + }) + .then((response) => { + message = el.querySelector(".send-email-message") + message.classList.remove("visually-hidden"); + if (!response.ok) { + message.innerHTML = errorMessage; + message.classList.remove("text-success"); + message.classList.add("text-danger"); + } else { + message.innerHTML = successMessage; + message.classList.remove("text-danger"); + message.classList.add("text-success"); + } + submit.removeAttribute("disabled"); + sendIcon.classList.remove("visually-hidden"); + spinner.classList.add("visually-hidden"); + }) + .catch(function (error) { + // Catch errors + console.log(error); + }); +} + +function highlightToggle(slug, el, method, onDehighlight = "") { + event.preventDefault(); + let parent = el.closest(".actions") + + let highlightLinkParent = parent.querySelector(".highlight"); + let dehighlightLinkParent = parent.querySelector(".dehighlight"); + fetch( + el.getAttribute("href"), { + method: method, + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + }, + credentials: "same-origin", + body: new URLSearchParams({ + 'slug': slug, + }) + } + ) + .then((response) => { + if (response.ok) { + if (method == "DELETE") { + if (onDehighlight == "remove") { + location.reload(); + return; + } + dehighlightLinkParent.classList.add("visually-hidden"); + highlightLinkParent.classList.remove("visually-hidden"); + } else { + highlightLinkParent.classList.add("visually-hidden"); + dehighlightLinkParent.classList.remove("visually-hidden"); + } + return; + } + console.log(response.body) + }) + .catch(function (error) { + // Catch errors + console.log(error); + }); +} diff --git a/internal/webserver/embedded/js/delete.js b/internal/webserver/embedded/js/delete.js new file mode 100644 index 0000000..3851342 --- /dev/null +++ b/internal/webserver/embedded/js/delete.js @@ -0,0 +1,41 @@ +const deleteModal = document.getElementById('deleteModal'); + +deleteModal.addEventListener('show.bs.modal', event => { + const link = event.relatedTarget; + const slug = link.getAttribute('data-bs-slug'); + const modalInputSlug = deleteModal.querySelector('.slug'); + + modalInputSlug.value = slug; +}) + +deleteModal.addEventListener('hidden.bs.modal', event => { + let message = document.getElementById('delete-document-message'); + message.classList.add("visually-hidden"); +}) + +function remove(errorMessage) { + event.preventDefault(); + form = document.getElementById("delete-form"); + fetch('/delete', { + method: "POST", + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: new URLSearchParams({ + 'slug': form.elements['slug'].value, + }) + }) + .then((response) => { + if (response.ok) { + location.reload(); + } else { + message = document.getElementById("delete-document-message") + message.classList.remove("visually-hidden"); + message.innerHTML = errorMessage; + } + }) + .catch(function (error) { + // Catch errors + console.log(error); + }); +} diff --git a/internal/webserver/embedded/views/actions.js.html b/internal/webserver/embedded/views/actions.js.html deleted file mode 100644 index 35d8b8d..0000000 --- a/internal/webserver/embedded/views/actions.js.html +++ /dev/null @@ -1,81 +0,0 @@ - diff --git a/internal/webserver/embedded/views/delete.js.html b/internal/webserver/embedded/views/delete.js.html deleted file mode 100644 index 1db8277..0000000 --- a/internal/webserver/embedded/views/delete.js.html +++ /dev/null @@ -1,43 +0,0 @@ - diff --git a/internal/webserver/embedded/views/document.html b/internal/webserver/embedded/views/document.html index 3f099f7..828a352 100644 --- a/internal/webserver/embedded/views/document.html +++ b/internal/webserver/embedded/views/document.html @@ -203,7 +203,5 @@

{{t $lang "Other documents with similar subjects"}}

-{{template "partials/delete-modal" .}} - -{{template "actions.js" dict "Lang" $lang}} + diff --git a/internal/webserver/embedded/views/index.html b/internal/webserver/embedded/views/index.html index c7e0b23..933ab62 100644 --- a/internal/webserver/embedded/views/index.html +++ b/internal/webserver/embedded/views/index.html @@ -22,7 +22,7 @@

{{t .Lang "Your highlights" }}

{{$emailFrom := .EmailFrom}} {{range $i, $doc := .Highlights}} -
+
{{template "partials/related" dict "Lang" $lang "Document" $doc}}
@@ -31,13 +31,16 @@

{{t .Lang "Your highlights" }}

{{t $lang "Actions"}} {{ template "partials/actions" dict "Lang" $lang "Document" $doc "EmailSendingConfigured" - $emailSendingConfigured "Index" $i "Session" $session "EmailFrom" $emailFrom}} + $emailSendingConfigured "Index" $i "Session" $session "EmailFrom" $emailFrom "OnDehighlight" "remove"}}
{{end}}
- {{template "actions.js" dict "Lang" $lang}} + {{template "partials/delete-modal" .}} + + + {{else}}

{{t .Lang "You haven't highlighted any document yet."}}

diff --git a/internal/webserver/embedded/views/partials/actions.html b/internal/webserver/embedded/views/partials/actions.html index 5a33cca..144d06f 100644 --- a/internal/webserver/embedded/views/partials/actions.html +++ b/internal/webserver/embedded/views/partials/actions.html @@ -27,7 +27,7 @@
  • - + @@ -40,7 +40,7 @@
  • {{t .Lang "Send to email unavailable, no email service configured"}}
    • {{else}}
  • -
    +