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

Fix missing formatting

This commit is contained in:
ekzyis 2024-09-05 23:11:29 +02:00
parent 9296bd5866
commit 9df7ce8338
4 changed files with 110 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,18 @@
package components package components
import ( import "fmt"
"fmt"
)
templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool, redirectUrl templ.SafeURL) { 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 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 id="close" class="flex justify-end"><button class="w-fit text-muted hitbox hover:text-reset">X</button></div>
<div>Payment Required</div> <div>Payment Required</div>
<div class="my-1">@Qr(bolt11, "lightning:"+bolt11)</div> <div class="my-1">
<div class="my-1">{ format(msats) }</div> @Qr(bolt11, "lightning:"+bolt11)
@InvoiceStatus(hash, expiresIn, paid, redirectUrl) </div>
<div class="none" id="bolt11-data" bolt11-data={ templ.JSONString(bolt11) } hx-preserve></div> <div class="my-1">{ format(msats) }</div>
<script type="text/javascript" id="bolt11-js" hx-preserve> @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) var $ = selector => document.querySelector(selector)
$("#close").addEventListener("click", function () { $("#close").addEventListener("click", function () {
// abort in-flight polls and prevent new polls // 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()) $("#poll").addEventListener("htmx:beforeRequest", e => e.preventDefault())
}) })
</script> </script>
</div> </div>
} }
templ InvoiceStatus(hash string, expiresIn int, paid bool, redirectUrl templ.SafeURL) { templ InvoiceStatus(hash string, expiresIn int, paid bool, redirectUrl templ.SafeURL) {
if paid { if paid {
<div class="font-mono neon success my-1">PAID</div> <div class="font-mono neon success my-1">PAID</div>
<div <div
id="poll" id="poll"
hx-get={ string(redirectUrl) } hx-get={ string(redirectUrl) }
hx-trigger="load delay:3s" hx-trigger="load delay:3s"
hx-target="#content" hx-target="#content"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-select="#content" hx-select="#content"
hx-push-url="true" hx-push-url="true"
hx-select-oob="#modal" /> hx-select-oob="#modal"
} ></div>
else if expiresIn <= 0 { } else if expiresIn <= 0 {
<div class="font-mono neon error my-1">EXPIRED</div> <div class="font-mono neon error my-1">EXPIRED</div>
} else { } else {
<!-- invoice is pending --> <!-- invoice is pending -->
<div class="font-mono my-1" id="countdown" countdown-data={ templ.JSONString(expiresIn) } hx-preserve></div> <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> <script type="text/javascript" id="countdown-js" hx-preserve>
var $ = selector => document.querySelector(selector) var $ = selector => document.querySelector(selector)
var expiresIn = JSON.parse($("#countdown").getAttribute("countdown-data")) var expiresIn = JSON.parse($("#countdown").getAttribute("countdown-data"))
@ -65,20 +65,21 @@ 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="#modal"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-select="#modal" /> hx-select="#modal"
} ></div>
}
} }
func format(msats int) string { func format(msats int) string {
sats := msats / 1000 sats := msats / 1000
if sats == 1 { if sats == 1 {
return fmt.Sprintf("%d sat", sats) return fmt.Sprintf("%d sat", sats)
} }
return fmt.Sprintf("%d sats", sats) return fmt.Sprintf("%d sats", sats)
} }

99
server/router/pages/components/marketForm.templ
View File

@ -1,65 +1,64 @@
package components package components
import ( import (
"git.ekzyis.com/ekzyis/delphi.market/types" "fmt"
"git.ekzyis.com/ekzyis/delphi.market/types"
"fmt" "strconv"
"strconv"
) )
templ MarketForm(m types.Market, outcome int, q types.MarketQuote, uQ int) { templ MarketForm(m types.Market, outcome int, q types.MarketQuote, uQ int) {
<form <form
id={ formId(outcome) } id={ formId(outcome) }
autocomplete="off" autocomplete="off"
class="grid grid-cols-2 gap-3" class="grid grid-cols-2 gap-3"
hx-post={ fmt.Sprintf("/market/%d/order", m.Id) } hx-post={ fmt.Sprintf("/market/%d/order", m.Id) }
hx-target="#modal" hx-target="#modal"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-select="#modal" hx-select="#modal"
> >
<input type="hidden" name="o" value={ fmt.Sprint(outcome) } /> <input type="hidden" name="o" value={ fmt.Sprint(outcome) }/>
<div class="none col-span-2 htmx-request" /> <div class="none col-span-2 htmx-request"></div>
<label for="p">avg price per share:</label> <label for="p">avg price per share:</label>
<div id="p">{formatPrice(q.AvgPrice)}</div> <div id="p">{ formatPrice(q.AvgPrice) }</div>
<label for="q">how many?</label> <label for="q">how many?</label>
<input <input
id={ inputId(outcome) } id={ inputId(outcome) }
name="q" name="q"
class="text-black px-1" class="text-black px-1"
type="number" type="number"
autofocus autofocus
hx-get={ fmt.Sprintf("/market/%d", m.Id) } hx-get={ fmt.Sprintf("/market/%d", m.Id) }
hx-replace-url="true" hx-replace-url="true"
hx-target={ fmt.Sprintf("#%s", formId(outcome)) } hx-target={ fmt.Sprintf("#%s", formId(outcome)) }
hx-swap="outerHTML" hx-swap="outerHTML"
hx-select={ fmt.Sprintf("#%s", formId(outcome)) } hx-select={ fmt.Sprintf("#%s", formId(outcome)) }
hx-trigger="input changed delay:1s" hx-trigger="input changed delay:1s"
hx-preserve hx-preserve
hx-disabled-elt="next button" hx-disabled-elt="next button"
hx-indicator={ hxIndicator(outcome) } hx-indicator={ hxIndicator(outcome) }
/> />
<label for="total">you pay:</label> <label for="total">you pay:</label>
<div id="total">{formatPrice(q.TotalPrice)}</div> <div id="total">{ formatPrice(q.TotalPrice) }</div>
<label for="reward">{ "if you win:" }</label> <label for="reward">{ "if you win:" }</label>
<div id="reward">+{formatPrice(q.Reward)}</div> <div id="reward">+{ formatPrice(q.Reward) }</div>
<label for="uQ">you have:</label> <label for="uQ">you have:</label>
<div id="uQ">{ fmt.Sprint(uQ) }</div> <div id="uQ">{ fmt.Sprint(uQ) }</div>
<button type="submit" class="col-span-2">submit</button> <button type="submit" class="col-span-2">submit</button>
</form> </form>
} }
func formId (outcome int) string { func formId(outcome int) string {
return fmt.Sprintf("outcome-%d-form", outcome) return fmt.Sprintf("outcome-%d-form", outcome)
} }
func inputId (outcome int) string { func inputId(outcome int) string {
return fmt.Sprintf("outcome-%d-q", outcome) return fmt.Sprintf("outcome-%d-q", outcome)
} }
func hxIndicator (outcome int) string { func hxIndicator(outcome int) string {
return fmt.Sprintf( return fmt.Sprintf(
"#%s>#p, #%s>#total, #%s>#reward", "#%s>#p, #%s>#total, #%s>#reward",
formId(outcome), formId(outcome), formId(outcome)) formId(outcome), formId(outcome), formId(outcome))
} }
func formatPrice(p float64) string { func formatPrice(p float64) string {

18
server/router/pages/index.templ
View File

@ -1,10 +1,10 @@
package pages package pages
import ( import (
"fmt"
c "git.ekzyis.com/ekzyis/delphi.market/server/router/context" 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/server/router/pages/components"
"git.ekzyis.com/ekzyis/delphi.market/types" "git.ekzyis.com/ekzyis/delphi.market/types"
"fmt"
"github.com/dustin/go-humanize" "github.com/dustin/go-humanize"
) )
@ -30,14 +30,14 @@ templ Index(markets []types.Market) {
</div> </div>
if ctx.Value(c.ReqPathContextKey).(string) == "/" { if ctx.Value(c.ReqPathContextKey).(string) == "/" {
<div class="grid grid-cols-[auto_fit-content(10%)_fit-content(10%)]"> <div class="grid grid-cols-[auto_fit-content(10%)_fit-content(10%)]">
for _, m := range markets { for _, m := range markets {
<span class="ps-3 border-b border-muted pb-3 mt-3"> <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> <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> <div class="text-small text-muted">{ m.User.Name } / { humanize.Time(m.CreatedAt) } / { humanize.Time(m.EndDate) }</div>
</span> </span>
<span class="px-3 border-b border-muted pb-3 mt-3 flex"><div class="self-center">51%</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> <span class="pe-3 border-b border-muted pb-3 mt-3 flex"><div class="self-center">0</div></span>
} }
</div> </div>
} else { } else {
<form <form

16
server/router/pages/market.templ
View File

@ -1,27 +1,27 @@
package pages package pages
import ( 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" "git.ekzyis.com/ekzyis/delphi.market/types"
"github.com/dustin/go-humanize" "github.com/dustin/go-humanize"
) )
// TODO: Add countdown? Use or at least show somewhere precise timestamps? // 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) { templ Market(m types.Market, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int, uQ1 int) {
<html> <html>
@components.Head() @components.Head()
<body <body
x-data="{ outcome: undefined }" x-data="{ outcome: undefined }"
class="container" class="container"
hx-preserve> hx-preserve
>
@components.Nav() @components.Nav()
<div id="content" class="flex flex-col"> <div id="content" class="flex flex-col">
<small> <small>
@components.Figlet("random", "market") @components.Figlet("random", "market")
</small> </small>
<div class="text-center font-bold my-1">{ m.Question }</div> <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> <div class="text-center text-muted my-1"></div>
<blockquote class="p-4 mb-4 border-s-4 border-muted"> <blockquote class="p-4 mb-4 border-s-4 border-muted">
if m.Description != "" { if m.Description != "" {
@ -29,7 +29,7 @@ templ Market(m types.Market, q0 types.MarketQuote, q1 types.MarketQuote, uQ0 int
} else { } else {
&lt;empty&gt; &lt;empty&gt;
} }
<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> </blockquote>
<div class="flex flex-col justify-center my-1"> <div class="flex flex-col justify-center my-1">
<div class="flex flex-row justify-center"> <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) @components.MarketForm(m, 0, q0, uQ0)
</div> </div>
</div> </div>
</div>
</div>
@components.Modal(nil) @components.Modal(nil)
@components.Footer() @components.Footer()
</body> </body>
</html> </html>
} }