Show notices for server errors

This commit is contained in:
Cadence Ember 2025-04-10 15:07:39 +12:00
parent 62e7ccf17b
commit b1ab998a4b
4 changed files with 38 additions and 9 deletions

View file

@ -62,3 +62,11 @@ function setupTogglePlayerButton(event) {
}
setupTogglePlayerButton()
document.body.addEventListener("htmx:load", setupTogglePlayerButton)
function hideError() {
document.getElementById("server-error").setAttribute("aria-hidden", "true")
}
document.body.addEventListener("htmx:responseError", event => {
document.getElementById("server-error").setAttribute("aria-hidden", "false")
document.getElementById("server-error-content").textContent = event.detail.xhr.responseText
})

View file

@ -1,6 +1,13 @@
#collection-sync.s-notice.s-notice__success
.d-flex.ai-center.gx16
!= icons.get("check-circle")
.fl-grow1 Imported #{storedItemCount}/#{count} purchases and #{storedTrackCount} tracks.
.mt16
a.s-link(href=`/${account}/`) Check it out
if !error
#collection-sync.s-notice.s-notice__success
.d-flex.ai-center.gx16
!= icons.get("check-circle")
.fl-grow1 Imported #{storedItemCount}/#{count} purchases and #{storedTrackCount} tracks.
.mt16
a.s-link(href=`/${account}/`) Check it out
else
#collection-sync.s-notice.s-notice__danger
.d-flex.ai-center.gx16
!= icons.get("xmark-circle")
.fl-grow1= error.toString()

View file

@ -158,3 +158,12 @@ html
#player-container.ps-fixed.r16.ws340.z-modal(class="md:t64 md:l16 md:r16 md:b16" hx-preserve="true")
#player
aside.s-modal#server-error(aria-hidden="true")
.s-modal--dialog
h1.s-modal--header Server error
pre.overflow-auto#server-error-content
p If you know what causes this error, #[a(href="https://cadence.moe/contact") please tell Cadence about it!]
button.s-modal--close.s-btn.s-btn__muted(aria-label="Close" type="button" onclick="hideError()")!= icons.get("xmark")
.s-modal--footer
button.s-btn.s-btn__outlined.s-btn__muted(type="button" onclick="hideError()") OK

View file

@ -21,6 +21,7 @@ async function loadCollection(inputUsername) {
const doc = domino.createDocument(html)
const first = doc.querySelector(".collection-item-container[data-token]")
if (!first) throw new Error("Account does not exist. Please check the username - it's easy to mix it up with the display name, which is different.")
assert(first)
const token = first.getAttribute("data-token")
assert(token)
@ -94,7 +95,11 @@ async function loadCollection(inputUsername) {
router.post("/api/load-collection", defineEventHandler(async event => {
const {account} = await readValidatedBody(event, schema.schema.account.parse)
const result = await loadCollection(account)
setCookie(event, "accounts", (getCookie(event, "accounts") || "").split("|").concat(account).join("|"))
return pugSync.render(event, "collection-loaded.pug", result)
try {
const result = await loadCollection(account)
setCookie(event, "accounts", (getCookie(event, "accounts") || "").split("|").concat(account).join("|"))
return pugSync.render(event, "collection-loaded.pug", result)
} catch (error) {
return pugSync.render(event, "collection-loaded.pug", {error})
}
}))