x/spend-sparrow
2
0
Fork 0
Code Issues 7 Pull Requests Actions 1 Packages Projects 1 Releases Wiki Activity

feat(budget): further improvements
Some checks failed
Build and Push Docker Image / Build-And-Push-Docker-Image (push) Failing after 1m11s
Details

Browse Source
This commit is contained in:
Tim Wundenberg
2026-01-03 20:53:56 +01:00
parent cee01c9a29
commit 029c01cd32
5 changed files with 155 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
internal/budget/template.templ
View File

@@ -1,9 +1,12 @@
package budget
import "spend-sparrow/internal/template/svg"
import (
"spend-sparrow/internal/core"
"spend-sparrow/internal/template/svg"
)
templ page(budgets []Budget) {
<!-- for _,name:=range([]string{"Lebensmittel", "Tanken", "Drogerie", "Milch", "Parken"}) { -->
@core.Breadcrumb([]string{"Home", "Budget"}, []string{"/", "/budget"})
<div class="flex flex-wrap gap-20 text-xl mt-10 justify-center">
@newItem()
for _,budget:=range(budgets ) {
@@ -13,64 +16,110 @@ templ page(budgets []Budget) {
}
templ editNew() {
<dialog id="newBudget" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg openDialogModal">
<form
hx-post={ "/transaction/new" }
class="flex justify-end gap-4 items-center "
>
<div class="grid grid-cols-[auto_auto] items-center gap-4 mr-auto">
<div class="flex flex-col">
@core.Breadcrumb([]string{"Home", "Budget", "New"}, []string{"/", "/budget", "/budget/new"})
<div class="flex justify-center items-center flex-1">
<form
hx-post={ "/budget/new" }
class="grid grid-cols-4 items-center gap-4 mr-auto max-w-2xl h-full"
>
<label for="timestamp" class="text-sm text-gray-500">Name</label>
<input
autofocus
name="name"
type="text"
class="bg-white input datetime"
class="bg-white input datetime col-span-3"
/>
<label for="value" class="text-sm text-gray-500">Value</label>
<input
name="value"
type="number"
class="mr-auto bg-white input"
class="bg-white input col-span-3"
/>
</div>
<button type="submit" class="button button-neglect px-1 flex items-center gap-2">
@svg.Save()
<span>
Save
</span>
</button>
<button commandfor="newBudget" command="close" class="button button-neglect px-1 flex items-center gap-2">
<span class="h-4 w-4">
@svg.Cancel()
</span>
<span>
Cancel
</span>
</button>
</form>
</dialog>
<div class="flex gap-6 justify-end col-span-4">
<a href="/budget" class="col-start-3 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg hover:underline flex items-center gap-2 justify-center">
<span class="h-4 w-4">
@svg.Cancel()
</span>
<span>
Cancel
</span>
</a>
<button type="submit" class="col-start-4 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg hover:underline flex items-center gap-2 justify-center">
@svg.Save()
<span>
Save
</span>
</button>
</div>
</form>
</div>
</div>
}
templ edit(budget Budget) {
<div class="flex flex-col">
@core.Breadcrumb([]string{"Home", "Budget", budget.Description}, []string{"/", "/budget", "/budget/" + budget.Id.String()})
<div class="flex justify-center items-center flex-1">
<form
hx-post={ "/budget/new" }
class="grid grid-cols-4 items-center gap-4 mr-auto max-w-2xl h-full"
>
<label for="timestamp" class="text-sm text-gray-500">Name</label>
<input
autofocus
name="name"
type="text"
value={ budget.Description }
class="bg-white input datetime col-span-3"
/>
<label for="value" class="text-sm text-gray-500">Value</label>
<input
name="value"
type="number"
value={ budget.Value / 100 }
class="bg-white input col-span-3"
/>
<div class="flex gap-6 justify-end col-span-4">
<a href="/budget" class="col-start-3 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg hover:underline flex items-center gap-2 justify-center">
<span class="h-4 w-4">
@svg.Cancel()
</span>
<span>
Cancel
</span>
</a>
<button type="submit" class="col-start-4 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg hover:underline flex items-center gap-2 justify-center">
@svg.Save()
<span>
Save
</span>
</button>
</div>
</form>
</div>
</div>
}
templ newItem() {
<button
hx-get="/budget/new"
hx-target="#dialogContainer"
<a
href="/budget/new"
class="p-5 w-64 h-64 flex gap-10 active:bg-gray-200 flex-col justify-center items-center hover:bg-gray-100 transition-all cursor-pointer rounded-lg bg-gray-50 border-1 border-gray-300"
>
New Budget
<div class="w-10">
@svg.Plus()
</div>
</button>
</a>
}
templ item(budget Budget) {
<section class="flex flex-col w-64 h-64 p-5 rounded-lg bg-gray-50 border-1 border-gray-300 ">
<a href={ "/budget/" + budget.Id.String() } class="flex flex-col w-64 h-64 p-5 rounded-lg bg-gray-50 border-1 border-gray-300 ">
<span>
{ budget.Description }
</span>
<span>
{ 200 }€
</span>
</section>
</a>
}