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