ekzyis
/
delphi.market
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix copy button flicker on poll

This commit is contained in:
ekzyis 2024-09-09 00:46:11 +02:00
parent ed9d6f30c4
commit bdc768cb27
1 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
server/router/pages/components/invoice.templ
View File

@ -11,8 +11,8 @@ templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool, r
</div>
<div class="my-1">{ format(msats) }</div>
@InvoiceStatus(hash, expiresIn, paid, redirectUrl)
<div class="none" id="bolt11-data" bolt11-data={ templ.JSONString(bolt11) } hx-preserve></div>
<script type="text/javascript" id="bolt11-js" hx-preserve>
<div class="none" id="bolt11-data" bolt11-data={ templ.JSONString(bolt11) }></div>
<script type="text/javascript" id="bolt11-js">
htmx.on("#close", "click", function () {
// abort in-flight polls and prevent new polls
htmx.trigger("#poll", "htmx:abort")
@ -23,25 +23,26 @@ templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool, r
}
templ InvoiceStatus(hash string, expiresIn int, paid bool, redirectUrl templ.SafeURL) {
if paid {
<div class="font-mono neon success my-1">PAID</div>
<!-- TODO: show timer for redirect -->
<div
id="poll"
hx-get={ string(redirectUrl) }
hx-trigger="load delay:3s"
hx-target="#content"
hx-swap="outerHTML"
hx-select="#content"
hx-push-url="true"
hx-select-oob="#modal"
></div>
} else if expiresIn <= 0 {
<div class="font-mono neon error my-1">EXPIRED</div>
} else {
<!-- invoice is pending -->
<div class="font-mono my-1" id="countdown" countdown-data={ templ.JSONString(expiresIn) } hx-preserve></div>
<script type="text/javascript" id="countdown-js" hx-preserve>
<div id="status">
if paid {
<div class="font-mono neon success my-1">PAID</div>
<!-- TODO: show timer for redirect -->
<div
id="poll"
hx-get={ string(redirectUrl) }
hx-trigger="load delay:3s"
hx-target="#content"
hx-swap="outerHTML"
hx-select="#content"
hx-push-url="true"
hx-select-oob="#modal"
></div>
} else if expiresIn <= 0 {
<div class="font-mono neon error my-1">EXPIRED</div>
} else {
<!-- invoice is pending -->
<div class="font-mono my-1" id="countdown" countdown-data={ templ.JSONString(expiresIn) } hx-preserve></div>
<script type="text/javascript" id="countdown-js" hx-preserve>
var expiresIn = JSON.parse($("#countdown").getAttribute("countdown-data"))
function pad(num, places) {
@ -64,15 +65,16 @@ templ InvoiceStatus(hash string, expiresIn int, paid bool, redirectUrl templ.Saf
_countdown()
var interval = setInterval(_countdown, 1000)
</script>
<div
id="poll"
hx-get={ string(templ.SafeURL("/invoice/" + hash)) }
hx-trigger="load delay:1s"
hx-target="#modal"
hx-swap="outerHTML"
hx-select="#modal"
></div>
}
<div
id="poll"
hx-get={ string(templ.SafeURL("/invoice/" + hash)) }
hx-trigger="load delay:1s"
hx-target="#status"
hx-swap="outerHTML"
hx-select="#status"
></div>
}
</div>
}
func format(msats int) string {