Fix missing formatting
This commit is contained in:
parent
9296bd5866
commit
9df7ce8338
|
|
@ -1,18 +1,18 @@
|
|||
package components
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
)
|
||||
import "fmt"
|
||||
|
||||
templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool, redirectUrl templ.SafeURL) {
|
||||
<div class="p-5 border border-muted bg-background text-center font-mono">
|
||||
<div id="close" class="flex justify-end"><button class="w-fit text-muted hitbox hover:text-reset">X</button></div>
|
||||
<div>Payment Required</div>
|
||||
<div class="my-1">@Qr(bolt11, "lightning:"+bolt11)</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="p-5 border border-muted bg-background text-center font-mono">
|
||||
<div id="close" class="flex justify-end"><button class="w-fit text-muted hitbox hover:text-reset">X</button></div>
|
||||
<div>Payment Required</div>
|
||||
<div class="my-1">
|
||||
@Qr(bolt11, "lightning:"+bolt11)
|
||||
</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>
|
||||
var $ = selector => document.querySelector(selector)
|
||||
$("#close").addEventListener("click", function () {
|
||||
// abort in-flight polls and prevent new polls
|
||||
|
|
@ -20,28 +20,28 @@ templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool, r
|
|||
$("#poll").addEventListener("htmx:beforeRequest", e => e.preventDefault())
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ InvoiceStatus(hash string, expiresIn int, paid bool, redirectUrl templ.SafeURL) {
|
||||
if paid {
|
||||
<div class="font-mono neon success my-1">PAID</div>
|
||||
<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" />
|
||||
}
|
||||
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>
|
||||
if paid {
|
||||
<div class="font-mono neon success my-1">PAID</div>
|
||||
<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 $ = selector => document.querySelector(selector)
|
||||
var expiresIn = JSON.parse($("#countdown").getAttribute("countdown-data"))
|
||||
|
||||
|
|
@ -65,20 +65,21 @@ 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
|
||||
id="poll"
|
||||
hx-get={ string(templ.SafeURL("/invoice/" + hash)) }
|
||||
hx-trigger="load delay:1s"
|
||||
hx-target="#modal"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#modal"
|
||||
></div>
|
||||
}
|
||||
}
|
||||
|
||||
func format(msats int) string {
|
||||
sats := msats / 1000
|
||||
if sats == 1 {
|
||||
return fmt.Sprintf("%d sat", sats)
|
||||
}
|
||||
return fmt.Sprintf("%d sats", sats)
|
||||
}
|
||||
sats := msats / 1000
|
||||
if sats == 1 {
|
||||
return fmt.Sprintf("%d sat", sats)
|
||||
}
|
||||
return fmt.Sprintf("%d sats", sats)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,65 +1,64 @@
|
|||
package components
|
||||
|
||||
import (
|
||||
"git.ekzyis.com/ekzyis/delphi.market/types"
|
||||
|
||||
"fmt"
|
||||
"strconv"
|
||||
"fmt"
|
||||
"git.ekzyis.com/ekzyis/delphi.market/types"
|
||||
"strconv"
|
||||
)
|
||||
|
||||
templ MarketForm(m types.Market, outcome int, q types.MarketQuote, uQ int) {
|
||||
<form
|
||||
id={ formId(outcome) }
|
||||
autocomplete="off"
|
||||
class="grid grid-cols-2 gap-3"
|
||||
hx-post={ fmt.Sprintf("/market/%d/order", m.Id) }
|
||||
hx-target="#modal"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#modal"
|
||||
>
|
||||
<input type="hidden" name="o" value={ fmt.Sprint(outcome) } />
|
||||
<div class="none col-span-2 htmx-request" />
|
||||
<label for="p">avg price per share:</label>
|
||||
<div id="p">{formatPrice(q.AvgPrice)}</div>
|
||||
<label for="q">how many?</label>
|
||||
<input
|
||||
id={ inputId(outcome) }
|
||||
name="q"
|
||||
class="text-black px-1"
|
||||
type="number"
|
||||
autofocus
|
||||
hx-get={ fmt.Sprintf("/market/%d", m.Id) }
|
||||
hx-replace-url="true"
|
||||
hx-target={ fmt.Sprintf("#%s", formId(outcome)) }
|
||||
hx-swap="outerHTML"
|
||||
hx-select={ fmt.Sprintf("#%s", formId(outcome)) }
|
||||
hx-trigger="input changed delay:1s"
|
||||
hx-preserve
|
||||
hx-disabled-elt="next button"
|
||||
hx-indicator={ hxIndicator(outcome) }
|
||||
/>
|
||||
<label for="total">you pay:</label>
|
||||
<div id="total">{formatPrice(q.TotalPrice)}</div>
|
||||
<label for="reward">{ "if you win:" }</label>
|
||||
<div id="reward">+{formatPrice(q.Reward)}</div>
|
||||
<label for="uQ">you have:</label>
|
||||
<div id="uQ">{ fmt.Sprint(uQ) }</div>
|
||||
<button type="submit" class="col-span-2">submit</button>
|
||||
</form>
|
||||
<form
|
||||
id={ formId(outcome) }
|
||||
autocomplete="off"
|
||||
class="grid grid-cols-2 gap-3"
|
||||
hx-post={ fmt.Sprintf("/market/%d/order", m.Id) }
|
||||
hx-target="#modal"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#modal"
|
||||
>
|
||||
<input type="hidden" name="o" value={ fmt.Sprint(outcome) }/>
|
||||
<div class="none col-span-2 htmx-request"></div>
|
||||
<label for="p">avg price per share:</label>
|
||||
<div id="p">{ formatPrice(q.AvgPrice) }</div>
|
||||
<label for="q">how many?</label>
|
||||
<input
|
||||
id={ inputId(outcome) }
|
||||
name="q"
|
||||
class="text-black px-1"
|
||||
type="number"
|
||||
autofocus
|
||||
hx-get={ fmt.Sprintf("/market/%d", m.Id) }
|
||||
hx-replace-url="true"
|
||||
hx-target={ fmt.Sprintf("#%s", formId(outcome)) }
|
||||
hx-swap="outerHTML"
|
||||
hx-select={ fmt.Sprintf("#%s", formId(outcome)) }
|
||||
hx-trigger="input changed delay:1s"
|
||||
hx-preserve
|
||||
hx-disabled-elt="next button"
|
||||
hx-indicator={ hxIndicator(outcome) }
|
||||
/>
|
||||
<label for="total">you pay:</label>
|
||||
<div id="total">{ formatPrice(q.TotalPrice) }</div>
|
||||
<label for="reward">{ "if you win:" }</label>
|
||||
<div id="reward">+{ formatPrice(q.Reward) }</div>
|
||||
<label for="uQ">you have:</label>
|
||||
<div id="uQ">{ fmt.Sprint(uQ) }</div>
|
||||
<button type="submit" class="col-span-2">submit</button>
|
||||
</form>
|
||||
}
|
||||
|
||||
func formId (outcome int) string {
|
||||
return fmt.Sprintf("outcome-%d-form", outcome)
|
||||
func formId(outcome int) string {
|
||||
return fmt.Sprintf("outcome-%d-form", outcome)
|
||||
}
|
||||
|
||||
func inputId (outcome int) string {
|
||||
return fmt.Sprintf("outcome-%d-q", outcome)
|
||||
func inputId(outcome int) string {
|
||||
return fmt.Sprintf("outcome-%d-q", outcome)
|
||||
}
|
||||
|
||||
func hxIndicator (outcome int) string {
|
||||
return fmt.Sprintf(
|
||||
"#%s>#p, #%s>#total, #%s>#reward",
|
||||
formId(outcome), formId(outcome), formId(outcome))
|
||||
func hxIndicator(outcome int) string {
|
||||
return fmt.Sprintf(
|
||||
"#%s>#p, #%s>#total, #%s>#reward",
|
||||
formId(outcome), formId(outcome), formId(outcome))
|
||||
}
|
||||
|
||||
func formatPrice(p float64) string {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
package pages
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
c "git.ekzyis.com/ekzyis/delphi.market/server/router/context"
|
||||
"git.ekzyis.com/ekzyis/delphi.market/server/router/pages/components"
|
||||
"git.ekzyis.com/ekzyis/delphi.market/types"
|
||||
"fmt"
|
||||
"github.com/dustin/go-humanize"
|
||||
)
|
||||
|
||||
|
|
@ -30,14 +30,14 @@ templ Index(markets []types.Market) {
|
|||
</div>
|
||||
if ctx.Value(c.ReqPathContextKey).(string) == "/" {
|
||||
<div class="grid grid-cols-[auto_fit-content(10%)_fit-content(10%)]">
|
||||
for _, m := range markets {
|
||||
<span class="ps-3 border-b border-muted pb-3 mt-3">
|
||||
<a href={ templ.SafeURL(fmt.Sprintf("/market/%d", m.Id)) }>{ m.Question }</a>
|
||||
<div class="text-small text-muted">{m.User.Name} / {humanize.Time(m.CreatedAt)} / {humanize.Time(m.EndDate)}</div>
|
||||
</span>
|
||||
<span class="px-3 border-b border-muted pb-3 mt-3 flex"><div class="self-center">51%</div></span>
|
||||
<span class="pe-3 border-b border-muted pb-3 mt-3 flex"><div class="self-center">0</div></span>
|
||||
}
|
||||
for _, m := range markets {
|
||||
<span class="ps-3 border-b border-muted pb-3 mt-3">
|
||||
<a href={ templ.SafeURL(fmt.Sprintf("/market/%d", m.Id)) }>{ m.Question }</a>
|
||||
<div class="text-small text-muted">{ m.User.Name } / { humanize.Time(m.CreatedAt) } / { humanize.Time(m.EndDate) }</div>
|
||||
</span>
|
||||
<span class="px-3 border-b border-muted pb-3 mt-3 flex"><div class="self-center">51%</div></span>
|
||||
<span class="pe-3 border-b border-muted pb-3 mt-3 flex"><div class="self-center">0</div></span>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<form
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
package pages
|
||||
|
||||
import (
|
||||
"git.ekzyis.com/ekzyis/delphi.market/server/router/pages/components"
|
||||
"git.ekzyis.com/ekzyis/delphi.market/server/router/pages/components"
|
||||
"git.ekzyis.com/ekzyis/delphi.market/types"
|
||||
"github.com/dustin/go-humanize"
|
||||
)
|
||||
|
||||
// TODO: Add countdown? Use or at least show somewhere precise timestamps?
|
||||
|
||||
templ Market(m types.Market, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int, uQ1 int) {
|
||||
<html>
|
||||
<html>
|
||||
@components.Head()
|
||||
<body
|
||||
x-data="{ outcome: undefined }"
|
||||
class="container"
|
||||
hx-preserve>
|
||||
hx-preserve
|
||||
>
|
||||
@components.Nav()
|
||||
<div id="content" class="flex flex-col">
|
||||
<small>
|
||||
@components.Figlet("random", "market")
|
||||
</small>
|
||||
<div class="text-center font-bold my-1">{ m.Question }</div>
|
||||
<div class="text-center text-muted my-1">{humanize.Time(m.EndDate)}</div>
|
||||
<div class="text-center text-muted my-1">{ humanize.Time(m.EndDate) }</div>
|
||||
<div class="text-center text-muted my-1"></div>
|
||||
<blockquote class="p-4 mb-4 border-s-4 border-muted">
|
||||
if m.Description != "" {
|
||||
|
|
@ -29,7 +29,7 @@ templ Market(m types.Market, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int
|
|||
} else {
|
||||
<empty>
|
||||
}
|
||||
<div class="text-muted text-right pt-4">― {m.User.Name}, { humanize.Time(m.CreatedAt) }</div>
|
||||
<div class="text-muted text-right pt-4">― { m.User.Name }, { humanize.Time(m.CreatedAt) }</div>
|
||||
</blockquote>
|
||||
<div class="flex flex-col justify-center my-1">
|
||||
<div class="flex flex-row justify-center">
|
||||
|
|
@ -55,11 +55,9 @@ templ Market(m types.Market, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int
|
|||
@components.MarketForm(m, 0, q0, uQ0)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@components.Modal(nil)
|
||||
@components.Footer()
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue