feat(account): #49 add design for accounts
This commit is contained in:
18
input.css
18
input.css
@@ -28,33 +28,25 @@ input:focus {
|
|||||||
/* Button */
|
/* Button */
|
||||||
.button {
|
.button {
|
||||||
transition: all 150ms linear;
|
transition: all 150ms linear;
|
||||||
border-radius: 0.5rem;
|
@apply cursor-pointer border-2 rounded-lg border-transparent;
|
||||||
@apply inline-block cursor-pointer bg-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover {
|
|
||||||
box-shadow: 3px 3px 3px var(--color-gray-200);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-primary:hover,
|
.button-primary:hover,
|
||||||
.button-normal:hover {
|
.button-normal:hover {
|
||||||
transform: translate(-0.25rem, -0.25rem);
|
transform: translate(-0.25rem, -0.25rem);
|
||||||
|
box-shadow: 3px 3px 3px var(--color-gray-200);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-primary {
|
.button-primary {
|
||||||
border: 2px solid var(--color-gray-400);
|
@apply border-gray-400
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-normal {
|
.button-normal {
|
||||||
border: 2px solid var(--color-gray-200);
|
@apply border-gray-200
|
||||||
}
|
|
||||||
|
|
||||||
.button-neglect {
|
|
||||||
border: 2px solid white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-neglect:hover {
|
.button-neglect:hover {
|
||||||
border-color: var(--color-gray-200);
|
@apply border-gray-200;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Input */
|
/* Input */
|
||||||
|
|||||||
@@ -1,12 +1,19 @@
|
|||||||
package account
|
package account
|
||||||
|
|
||||||
import "fmt"
|
import "fmt"
|
||||||
|
import "spend-sparrow/template/svg"
|
||||||
|
|
||||||
templ Account() {
|
templ Account() {
|
||||||
<div class="mt-10 flex flex-col items-center">
|
<div class="max-w-6xl mt-10 mx-auto">
|
||||||
@accountItem("Sparkasse", 51268)
|
<button class="ml-auto button button-primary px-2 flex-1 flex items-center gap-2 justify-center">
|
||||||
@accountItem("Bargeld", 11822)
|
@svg.Plus()
|
||||||
@accountItem("Bargeld Milch", 8200)
|
<p class="">New Account</p>
|
||||||
|
</button>
|
||||||
|
<div class="my-6 flex flex-col items-center">
|
||||||
|
@accountItem("Sparkasse", 51268)
|
||||||
|
@accountItem("Bargeld", 11822)
|
||||||
|
@accountItem("Bargeld Milch", 8200)
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -17,11 +24,26 @@ func displayBalance(balance int) string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
templ accountItem(name string, balance int) {
|
templ accountItem(name string, balance int) {
|
||||||
<div class="border-1 border-gray-300 w-full max-w-6xl m-4 p-4 bg-gray-50 rounded-lg text-xl flex justify-end gap-4">
|
<div class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg text-xl flex justify-end gap-4">
|
||||||
<p class="mr-auto">{ name }</p>
|
<p class="mr-auto">{ name }</p>
|
||||||
<p class="mr-20 text-green-700">{ displayBalance(balance) }</p>
|
<p class="mr-20 text-green-700">{ displayBalance(balance) }</p>
|
||||||
<button class="button button-neglect px-1">Edit</button>
|
<button class="button button-neglect px-1 flex items-center gap-2">
|
||||||
<button class="button button-neglect px-1">Delete</button>
|
@svg.Edit()
|
||||||
<button class="button button-neglect px-1">Transaction</button>
|
<span>
|
||||||
|
Edit
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button class="button button-neglect px-1 flex items-center gap-2">
|
||||||
|
@svg.Delete()
|
||||||
|
<span>
|
||||||
|
Delete
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button title="View Account Transactions" class="button button-neglect px-1 flex items-center gap-2">
|
||||||
|
@svg.Eye()
|
||||||
|
<span>
|
||||||
|
View
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,68 +1,90 @@
|
|||||||
package auth
|
package auth
|
||||||
|
|
||||||
templ SignInOrUpComp(isSignIn bool) {
|
templ SignInOrUpComp(isSignIn bool) {
|
||||||
{{
|
{{
|
||||||
var postUrl string
|
var postUrl string
|
||||||
if isSignIn {
|
if isSignIn {
|
||||||
postUrl = "/api/auth/signin"
|
postUrl = "/api/auth/signin"
|
||||||
} else {
|
} else {
|
||||||
postUrl = "/api/auth/signup"
|
postUrl = "/api/auth/signup"
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
<form class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center" hx-target="#sign-in-or-up-error" hx-post={
|
<form
|
||||||
postUrl }>
|
class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center"
|
||||||
<h2 class="text-4xl mb-4">
|
hx-target="#sign-in-or-up-error"
|
||||||
if isSignIn {
|
hx-post={ postUrl }
|
||||||
Sign In
|
>
|
||||||
} else {
|
<h2 class="text-4xl mb-4">
|
||||||
Sign Up
|
if isSignIn {
|
||||||
}
|
Sign In
|
||||||
</h2>
|
} else {
|
||||||
<label class="input flex items-center gap-2">
|
Sign Up
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
|
}
|
||||||
<path
|
</h2>
|
||||||
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z">
|
<label class="input flex items-center gap-2">
|
||||||
</path>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
|
||||||
<path
|
<path
|
||||||
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z">
|
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
|
||||||
</path>
|
></path>
|
||||||
</svg>
|
<path
|
||||||
<input type="text" class="grow" placeholder="Email" name="email" spellcheck="false" autocomplete="off"
|
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
|
||||||
autocorrect="off" autocapitalize="off" />
|
></path>
|
||||||
</label>
|
</svg>
|
||||||
<label class="input input-bordered flex items-center gap-2">
|
<input
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
|
type="text"
|
||||||
<path fill-rule="evenodd"
|
class="grow"
|
||||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
placeholder="Email"
|
||||||
clip-rule="evenodd"></path>
|
name="email"
|
||||||
</svg>
|
spellcheck="false"
|
||||||
<input type="password" class="grow" placeholder="Password" name="password" spellcheck="false" autocomplete="off"
|
autocomplete="off"
|
||||||
autocorrect="off" autocapitalize="off" />
|
autocorrect="off"
|
||||||
</label>
|
autocapitalize="off"
|
||||||
<div class="flex justify-end items-center gap-3 h-14">
|
autofocus
|
||||||
if isSignIn {
|
/>
|
||||||
<a href="/auth/forgot-password" class="text-gray-500 text-sm px-1 button button-neglect">
|
</label>
|
||||||
Forgot
|
<label class="input input-bordered flex items-center gap-2">
|
||||||
Password?
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
|
||||||
</a>
|
<path
|
||||||
<a href="/auth/signup" class="ml-auto text-gray-500 text-sm px-1 button button-neglect">
|
fill-rule="evenodd"
|
||||||
Don't have an account?
|
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||||
Sign Up
|
clip-rule="evenodd"
|
||||||
</a>
|
></path>
|
||||||
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">Sign In</button>
|
</svg>
|
||||||
} else {
|
<input
|
||||||
<a href="/auth/signin" class="text-gray-500 text-sm px-1 button button-neglect">Already have an account? Sign In</a>
|
type="password"
|
||||||
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">
|
class="grow"
|
||||||
Sign Up
|
placeholder="Password"
|
||||||
</button>
|
name="password"
|
||||||
}
|
spellcheck="false"
|
||||||
</div>
|
autocomplete="off"
|
||||||
@Error("")
|
autocorrect="off"
|
||||||
</form>
|
autocapitalize="off"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="flex justify-end items-center gap-3 h-14">
|
||||||
|
if isSignIn {
|
||||||
|
<a href="/auth/forgot-password" class="text-gray-500 text-sm px-1 button button-neglect">
|
||||||
|
Forgot
|
||||||
|
Password?
|
||||||
|
</a>
|
||||||
|
<a href="/auth/signup" class="ml-auto text-gray-500 text-sm px-1 button button-neglect">
|
||||||
|
Don't have an account?
|
||||||
|
Sign Up
|
||||||
|
</a>
|
||||||
|
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">Sign In</button>
|
||||||
|
} else {
|
||||||
|
<a href="/auth/signin" class="text-gray-500 text-sm px-1 button button-neglect">Already have an account? Sign In</a>
|
||||||
|
<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">
|
||||||
|
Sign Up
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
@Error("")
|
||||||
|
</form>
|
||||||
}
|
}
|
||||||
|
|
||||||
templ Error(message string) {
|
templ Error(message string) {
|
||||||
<p class="text-error text-right" id="sign-in-or-up-error">
|
<p class="text-error text-right" id="sign-in-or-up-error">
|
||||||
{ message }
|
{ message }
|
||||||
</p>
|
</p>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,36 +1,36 @@
|
|||||||
package auth
|
package auth
|
||||||
|
|
||||||
templ UserComp(user string) {
|
templ UserComp(user string) {
|
||||||
<div id="user-info" class="flex gap-5 items-center">
|
<div id="user-info" class="flex gap-5 items-center">
|
||||||
if user != "" {
|
if user != "" {
|
||||||
<div class="inline-block group relative">
|
<div class="inline-block group relative">
|
||||||
<button class="font-semibold py-2 px-4 inline-flex items-center">
|
<button class="font-semibold py-2 px-4 inline-flex items-center">
|
||||||
<span class="mr-1">{ user }</span>
|
<span class="mr-1">{ user }</span>
|
||||||
<!-- SVG is arrow down -->
|
<!-- SVG is arrow down -->
|
||||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
|
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div class="absolute hidden group-has-hover:block w-full">
|
<div class="absolute hidden group-has-hover:block w-full">
|
||||||
<ul class="w-fit float-right mr-4 p-3 border-2 border-gray-200 rounded-lg">
|
<ul class="w-fit float-right mr-4 p-3 border-2 border-gray-200 rounded-lg bg-white shadow-lg">
|
||||||
<li class="mb-1">
|
<li class="mb-1">
|
||||||
<a class="button w-full px-1 button-neglect" hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
|
<a class="button w-full px-1 button-neglect block" hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-1">
|
<li class="mb-1">
|
||||||
<a class="button w-full px-1 button-neglect" href="/auth/change-password">Change Password</a>
|
<a class="button w-full px-1 button-neglect block" href="/auth/change-password">Change Password</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button w-full px-1 button-neglect text-gray-400 mt-4" href="/auth/delete-account" class="">
|
<a class="button w-full px-1 button-neglect text-gray-400 mt-4 block" href="/auth/delete-account" class="">
|
||||||
Delete
|
Delete
|
||||||
Account
|
Account
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
} else {
|
||||||
|
<a href="/auth/signup" class="font-pirata text-xl button px-1 button-neglect">Sign Up</a>
|
||||||
|
<a href="/auth/signin" class="font-pirata text-xl button px-1 button-neglect">Sign In</a>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
} else {
|
|
||||||
<a href="/auth/signup" class="font-pirata text-xl button px-1 button-neglect">Sign Up</a>
|
|
||||||
<a href="/auth/signin" class="font-pirata text-xl button px-1 button-neglect">Sign In</a>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,21 +1,25 @@
|
|||||||
package auth
|
package auth
|
||||||
|
|
||||||
templ VerifyComp() {
|
templ VerifyComp() {
|
||||||
<main class="h-full">
|
<main class="h-full">
|
||||||
<div class=" flex flex-col items-center justify-center h-full">
|
<div class=" flex flex-col items-center justify-center h-full">
|
||||||
<h2 class="text-6xl mb-10">
|
<h2 class="text-6xl mb-10">
|
||||||
Verify your email
|
Verify your email
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-lg text-center">
|
<p class="text-lg text-center">
|
||||||
We have sent you an email with a link to verify your account.
|
We have sent you an email with a link to verify your account.
|
||||||
</p>
|
</p>
|
||||||
<p class="text-lg text-center">
|
<p class="text-lg text-center">
|
||||||
Please check your inbox/spam and click on the link to verify your account.
|
Please check your inbox/spam and click on the link to verify your account.
|
||||||
</p>
|
</p>
|
||||||
<button class="mt-8 button button-normal px-2 text-gray-500 text-xl" hx-get="/api/auth/verify-resend"
|
<button
|
||||||
hx-sync="this:drop" hx-swap="outerHTML">
|
class="mt-8 button button-normal px-2 text-gray-500 text-xl"
|
||||||
resend verification email
|
hx-get="/api/auth/verify-resend"
|
||||||
</button>
|
hx-sync="this:drop"
|
||||||
</div>
|
hx-swap="outerHTML"
|
||||||
</main>
|
>
|
||||||
|
resend verification email
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path str
|
|||||||
<script src="/static/js/toast.js"></script>
|
<script src="/static/js/toast.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
|
<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
|
||||||
<div class="h-screen flex flex-col">
|
<div class="min-h-screen flex flex-col">
|
||||||
// Header
|
// Header
|
||||||
<div class="sticky top-0">
|
<div class="sticky top-0">
|
||||||
<nav class="flex bg-white items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2">
|
<nav class="flex bg-white items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2">
|
||||||
|
|||||||
@@ -3,21 +3,20 @@ package mail;
|
|||||||
import "net/url"
|
import "net/url"
|
||||||
|
|
||||||
templ Register(baseUrl string, token string) {
|
templ Register(baseUrl string, token string) {
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta charset="UTF-8"/>
|
||||||
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>Welcome</title>
|
||||||
<title>Welcome</title>
|
</head>
|
||||||
</head>
|
<body>
|
||||||
|
<h4>Thank you for Sign Up!</h4>
|
||||||
<body>
|
<p>
|
||||||
<h4>Thank you for Sign Up!</h4>
|
Click <a href={ templ.URL(baseUrl + "/auth/verify-email?token=" + url.QueryEscape(token)) }>here</a> to finalize
|
||||||
<p>Click <a href={ templ.URL(baseUrl + "/auth/verify-email?token=" + url.QueryEscape(token)) }>here</a> to finalize
|
your registration.
|
||||||
your registration.</p>
|
</p>
|
||||||
<p>Kind regards</p>
|
<p>Kind regards</p>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
</html>
|
|
||||||
}
|
}
|
||||||
|
|||||||
25
template/svg/default.templ
Normal file
25
template/svg/default.templ
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
package svg
|
||||||
|
|
||||||
|
templ Edit() {
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 384" class="h-4 w-4 text-gray-500">
|
||||||
|
<path fill="currentColor" d="M0 304L236 68l80 80L80 384H0v-80zM378 86l-39 39l-80-80l39-39q6-6 15-6t15 6l50 50q6 6 6 15t-6 15z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ Delete() {
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 384" class="h-4 w-4 text-gray-500">
|
||||||
|
<path fill="currentColor" d="M21 341V85h256v256q0 18-12.5 30.5T235 384H64q-18 0-30.5-12.5T21 341zM299 21v43H0V21h75L96 0h107l21 21h75z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ Eye() {
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 472 384" class="h-4 w-4 text-gray-500">
|
||||||
|
<path fill="currentColor" d="M235 32q79 0 142.5 44.5T469 192q-28 71-91.5 115.5T235 352T92 307.5T0 192q28-71 92-115.5T235 32zm0 267q44 0 75-31.5t31-75.5t-31-75.5T235 85t-75.5 31.5T128 192t31.5 75.5T235 299zm-.5-171q26.5 0 45.5 18.5t19 45.5t-19 45.5t-45.5 18.5t-45-18.5T171 192t18.5-45.5t45-18.5z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ Plus() {
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 384" class="h-4 w-4 text-gray-500">
|
||||||
|
<path fill="currentColor" d="M299 213H171v128h-43V213H0v-42h128V43h43v128h128v42z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
@@ -1 +0,0 @@
|
|||||||
package workout
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
package workout
|
|
||||||
|
|
||||||
templ WorkoutComp(currentDate string) {
|
|
||||||
<main class="mx-2">
|
|
||||||
<form
|
|
||||||
class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-10"
|
|
||||||
hx-post="/api/workout"
|
|
||||||
hx-target="#workout-placeholder"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
>
|
|
||||||
<h2 class="text-4xl mb-8">Track your workout</h2>
|
|
||||||
<input id="date" type="date" class="" value={ currentDate } name="date"/>
|
|
||||||
<select class="w-full" name="type">
|
|
||||||
<option>Push Ups</option>
|
|
||||||
<option>Pull Ups</option>
|
|
||||||
</select>
|
|
||||||
<input type="number" class="" placeholder="Sets" name="sets"/>
|
|
||||||
<input type="number" class="" placeholder="Reps" name="reps"/>
|
|
||||||
<button class="self-end">Save</button>
|
|
||||||
</form>
|
|
||||||
<div hx-get="/api/workout" hx-trigger="load"></div>
|
|
||||||
</main>
|
|
||||||
}
|
|
||||||
|
|
||||||
type Workout struct {
|
|
||||||
Id string
|
|
||||||
Date string
|
|
||||||
Type string
|
|
||||||
Sets string
|
|
||||||
Reps string
|
|
||||||
}
|
|
||||||
|
|
||||||
templ WorkoutListComp(workouts []Workout) {
|
|
||||||
<div class="overflow-x-auto mx-auto max-w-lg">
|
|
||||||
<h2 class="text-4xl mt-14 mb-8">Workout history</h2>
|
|
||||||
<table class="table table-auto max-w-full">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Date</th>
|
|
||||||
<th>Type</th>
|
|
||||||
<th>Sets</th>
|
|
||||||
<th>Reps</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr class="hidden" id="workout-placeholder"></tr>
|
|
||||||
for _,w := range workouts {
|
|
||||||
@WorkoutItemComp(w, false)
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
templ WorkoutItemComp(w Workout, includePlaceholder bool) {
|
|
||||||
if includePlaceholder {
|
|
||||||
<tr class="hidden" id="workout-placeholder"></tr>
|
|
||||||
}
|
|
||||||
<tr>
|
|
||||||
<th>{ w.Date }</th>
|
|
||||||
<th>{ w.Type }</th>
|
|
||||||
<th>{ w.Sets }</th>
|
|
||||||
<th>{ w.Reps }</th>
|
|
||||||
<th>
|
|
||||||
<div class="tooltip" data-tip="Delete Entry">
|
|
||||||
<button hx-delete={ "api/workout/" + w.Id } hx-target="closest tr" type="submit">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user