delphi.market/server/router/pages/user.templ

package pages

import (
	"fmt"
	"git.ekzyis.com/ekzyis/delphi.market/server/router/pages/components"
	"git.ekzyis.com/ekzyis/delphi.market/types"
	"strconv"
	"time"
)

templ User(user *types.User, errors *types.UserEditError) {
	<html>
		@components.Head()
		<body class="container">
			@components.Nav()
			<div id="content" class="flex flex-col">
				@components.Figlet("random", "user")
				<div
					class="grid grid-cols-[1fr_3fr_1fr] gap-4 my-3 mx-auto"
					hx-target="#content"
					hx-swap="outerHTML"
					hx-select="#content"
					hx-push-url="true"
					hx-select-oob="#nav"
				>
					<div class="font-bold">id</div>
					<div>{ strconv.Itoa(user.Id) }</div>
					<div class="font-bold col-start-1">name</div>
					<div>
						<div class="flex">
							<span id="name" class={ maybeShow("w-40", errors == nil || errors.Name == "") }>{ user.Name }</span>
							<form
								id="name-form"
								class="hidden flex mb-0"
								hx-put="/user"
								hx-push-url="false"
								hx-target="#name"
								hx-select="#name"
								hx-select-oob="#name-error"
							>
								<input
									name="name"
									type="text"
									value={ user.Name }
									class="w-40 font-mono"
								/>
							</form>
						</div>
						if errors != nil && errors.Name != "" {
							<div id="name-error" class="w-40 text-xs text-error py-1">{ errors.Name }</div>
						} else {
							<div id="name-error" class="hidden"></div>
						}
					</div>
					<div id="name-btns" class="grid grid-cols-2 w-[90px] h-min self-center">
						<button id="name-save" form="name-form" class="h-min hidden px-3 text-xs self-center" type="submit">save</button>
						<button id="name-cancel" class="h-min hidden text-muted hover:text-reset self-center text-xs ms-2">cancel</button>
						<button id="name-edit" class="col-span-2 text-muted hover:text-reset text-xs">edit</button>
					</div>
					<div class="font-bold">joined</div>
					<div>{ user.CreatedAt.Format(time.DateOnly) }</div>
					<div class="font-bold col-start-1">sats</div>
					<!-- TODO: implement withdrawal of sats -->
					<div>{ strconv.Itoa(int(user.Msats) / 1000) }</div>
					<button class="text-muted hover:text-reset text-xs self-center h-min">withdraw</button>
					<!-- TODO: add WebLN and NWC for send+recv -->
					<button hx-post="/logout" class="col-start-2">logout</button>
				</div>
				<script>
					function toggleForm () {
						htmx.toggleClass("#name", "hidden")
						htmx.toggleClass("#name-form", "hidden")
						htmx.toggleClass("#name-save", "hidden")
						htmx.toggleClass("#name-cancel", "hidden")
						htmx.toggleClass("#name-edit", "hidden")
						// make sure buttons don't shift on error
						htmx.toggleClass("#name-btns", "self-center")
						// reset error message on toggle
						htmx.addClass("#name-error", "hidden")
						$("#name-form>input").focus()
					}

					htmx.on("#name-edit", "click", toggleForm)
					htmx.on("#name-cancel", "click", toggleForm)
					htmx.on("#name-form", "htmx:afterRequest", ({ detail }) => {
						// only toggle form if request was successful
						if (detail.successful) toggleForm()
					})
				</script>
			</div>
			@components.Footer()
		</body>
	</html>
}

func maybeShow(class string, show bool) string {
	if show {
		return class
	}
	return fmt.Sprintf("%s %s", class, "hidden")
}
Implement logout 2024-07-14 12:57:40 +02:00			`package pages`

			`import (`
Show form errors 2024-09-11 12:21:58 +02:00			`"fmt"`
Implement logout 2024-07-14 12:57:40 +02:00			`"git.ekzyis.com/ekzyis/delphi.market/server/router/pages/components"`
			`"git.ekzyis.com/ekzyis/delphi.market/types"`
			`"strconv"`
			`"time"`
			`)`

Show form errors 2024-09-11 12:21:58 +02:00			`templ User(user types.User, errors types.UserEditError) {`
Implement logout 2024-07-14 12:57:40 +02:00			`<html>`
			`@components.Head()`
			`<body class="container">`
			`@components.Nav()`
			`<div id="content" class="flex flex-col">`
			`@components.Figlet("random", "user")`
			`<div`
Prettier user grid 2024-09-27 07:18:42 +02:00			`class="grid grid-cols-[1fr_3fr_1fr] gap-4 my-3 mx-auto"`
Implement logout 2024-07-14 12:57:40 +02:00			`hx-target="#content"`
			`hx-swap="outerHTML"`
			`hx-select="#content"`
			`hx-push-url="true"`
			`hx-select-oob="#nav"`
			`>`
			`<div class="font-bold">id</div>`
Add market form + page * market form with question, description and end date * markets cost 1k sats * a goroutine polls pending invoices from the db and checks LND for their status * markets are listed on front page (after paid) * market page contains buttons to bet yes or no * users have names now TODO: * show correct market percentage * show how percentage changed over time in chart * validate end date * implement betting / order form 2024-07-15 12:57:51 +02:00			`<div>{ strconv.Itoa(user.Id) }</div>`
Prettier user grid 2024-09-27 07:18:42 +02:00			`<div class="font-bold col-start-1">name</div>`
Show form errors 2024-09-11 12:21:58 +02:00			`<div>`
			`<div class="flex">`
Prettier user grid 2024-09-27 07:18:42 +02:00			`<span id="name" class={ maybeShow("w-40", errors == nil \|\| errors.Name == "") }>{ user.Name }</span>`
Show form errors 2024-09-11 12:21:58 +02:00			`<form`
Prettier user grid 2024-09-27 07:18:42 +02:00			`id="name-form"`
Show form errors 2024-09-11 12:21:58 +02:00			`class="hidden flex mb-0"`
			`hx-put="/user"`
			`hx-push-url="false"`
			`hx-target="#name"`
			`hx-select="#name"`
Prettier user grid 2024-09-27 07:18:42 +02:00			`hx-select-oob="#name-error"`
Show form errors 2024-09-11 12:21:58 +02:00			`>`
			`<input`
			`name="name"`
			`type="text"`
			`value={ user.Name }`
Prettier user grid 2024-09-27 07:18:42 +02:00			`class="w-40 font-mono"`
Show form errors 2024-09-11 12:21:58 +02:00			`/>`
			`</form>`
			`</div>`
			`if errors != nil && errors.Name != "" {`
Prettier user grid 2024-09-27 07:18:42 +02:00			`<div id="name-error" class="w-40 text-xs text-error py-1">{ errors.Name }</div>`
Show form errors 2024-09-11 12:21:58 +02:00			`} else {`
Prettier user grid 2024-09-27 07:18:42 +02:00			`<div id="name-error" class="hidden"></div>`
Show form errors 2024-09-11 12:21:58 +02:00			`}`
Allow users to edit their name 2024-09-11 11:17:28 +02:00			`</div>`
Prettier user grid 2024-09-27 07:18:42 +02:00			`<div id="name-btns" class="grid grid-cols-2 w-[90px] h-min self-center">`
			`<button id="name-save" form="name-form" class="h-min hidden px-3 text-xs self-center" type="submit">save</button>`
			`<button id="name-cancel" class="h-min hidden text-muted hover:text-reset self-center text-xs ms-2">cancel</button>`
			`<button id="name-edit" class="col-span-2 text-muted hover:text-reset text-xs">edit</button>`
			`</div>`
Implement logout 2024-07-14 12:57:40 +02:00			`<div class="font-bold">joined</div>`
			`<div>{ user.CreatedAt.Format(time.DateOnly) }</div>`
Prettier user grid 2024-09-27 07:18:42 +02:00			`<div class="font-bold col-start-1">sats</div>`
Add TODOs 2024-09-09 00:35:01 +02:00			`<!-- TODO: implement withdrawal of sats -->`
Prettier user grid 2024-09-27 07:18:42 +02:00			`<div>{ strconv.Itoa(int(user.Msats) / 1000) }</div>`
			`<button class="text-muted hover:text-reset text-xs self-center h-min">withdraw</button>`
Add TODOs 2024-09-09 00:35:01 +02:00			`<!-- TODO: add WebLN and NWC for send+recv -->`
Prettier user grid 2024-09-27 07:18:42 +02:00			`<button hx-post="/logout" class="col-start-2">logout</button>`
Implement logout 2024-07-14 12:57:40 +02:00			`</div>`
Allow users to edit their name 2024-09-11 11:17:28 +02:00			`<script>`
			`function toggleForm () {`
			`htmx.toggleClass("#name", "hidden")`
Prettier user grid 2024-09-27 07:18:42 +02:00			`htmx.toggleClass("#name-form", "hidden")`
			`htmx.toggleClass("#name-save", "hidden")`
			`htmx.toggleClass("#name-cancel", "hidden")`
			`htmx.toggleClass("#name-edit", "hidden")`
			`// make sure buttons don't shift on error`
			`htmx.toggleClass("#name-btns", "self-center")`
			`// reset error message on toggle`
			`htmx.addClass("#name-error", "hidden")`
			`$("#name-form>input").focus()`
Allow users to edit their name 2024-09-11 11:17:28 +02:00			`}`

Prettier user grid 2024-09-27 07:18:42 +02:00			`htmx.on("#name-edit", "click", toggleForm)`
			`htmx.on("#name-cancel", "click", toggleForm)`
			`htmx.on("#name-form", "htmx:afterRequest", ({ detail }) => {`
			`// only toggle form if request was successful`
Show form errors 2024-09-11 12:21:58 +02:00			`if (detail.successful) toggleForm()`
			`})`
Allow users to edit their name 2024-09-11 11:17:28 +02:00			`</script>`
Implement logout 2024-07-14 12:57:40 +02:00			`</div>`
			`@components.Footer()`
			`</body>`
			`</html>`
			`}`
Show form errors 2024-09-11 12:21:58 +02:00
			`func maybeShow(class string, show bool) string {`
			`if show {`
			`return class`
			`}`
			`return fmt.Sprintf("%s %s", class, "hidden")`
			`}`