ruidy/rentease
1
0
Fork 0
mirror of https://github.com/rjNemo/rentease.git synced 2026-06-12 13:46:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve booking lit design

Browse source
This commit is contained in:
Ruidy 2025-03-02 13:43:09 +01:00
parent 9a6b6ef0c3
commit 5081c66f9e
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
4 changed files with 102 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
internal/view/booking_lines.templ
View file

@ -3,28 +3,45 @@ package view
import () import ()
templ BookingLines(bookings []*ListBookingsViewModel) { templ BookingLines(bookings []*ListBookingsViewModel) {
<tbody> <ul id="booking-cards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 list-none">
for _, b := range bookings { for _, b := range bookings {
<tr> <li class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow duration-200">
<th scope="row"> <article class="card-body">
<a href={ b.Url }> <div class="flex justify-between items-start">
{ b.Id } <h2 class="card-title">
</a> if b.Canceled {
</th> <span class="line-through text-gray-500">{ b.Name }</span>
<td> } else {
<span <span>{ b.Name }</span>
if b.Canceled { }
class="line-through text-gray-500" </h2>
} <div class="badge badge-primary">{ b.Platform }</div>
> </div>
{ b.Name } <div class="grid grid-cols-2 gap-2 my-4">
</span> <div class="text-sm">
</td> <div class="text-gray-500">Check-in</div>
<td>{ b.Total }</td> <div class="font-medium">{ b.From }</div>
<td>{ b.From }</td> </div>
<td>{ b.To }</td> <div class="text-sm">
<td>{ b.Platform }</td> <div class="text-gray-500">Check-out</div>
</tr> <div class="font-medium">{ b.To }</div>
</div>
</div>
<div class="flex justify-between items-center mt-2">
<div class="text-lg font-bold text-primary">
{ b.Total } €
</div>
<div class="text-sm text-gray-500">
ID: { b.Id }
</div>
</div>
<div class="card-actions justify-end mt-4">
<a href={ b.Url } class="btn btn-primary btn-sm">
View Details
</a>
</div>
</article>
</li>
} }
</tbody> </ul>
} }

102
internal/view/booking_lines_templ.go
View file

@ -31,114 +31,132 @@ func BookingLines(bookings []*ListBookingsViewModel) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<tbody>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<ul id=\"booking-cards\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 list-none\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
for _, b := range bookings { for _, b := range bookings {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<tr><th scope=\"row\"><a href=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<li class=\"card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow duration-200\"><article class=\"card-body\"><div class=\"flex justify-between items-start\"><h2 class=\"card-title\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 templ.SafeURL = b.Url
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(b.Id)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 11, Col: 12}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</a></th><td><span")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if b.Canceled { if b.Canceled {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " class=\"line-through text-gray-500\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<span class=\"line-through text-gray-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(b.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 13, Col: 57}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</span>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<span>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(b.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 15, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</span>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, ">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</h2><div class=\"badge badge-primary\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var4 string var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(b.Name) templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(b.Platform)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 20, Col: 14} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 18, Col: 51}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span></td><td>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div><div class=\"grid grid-cols-2 gap-2 my-4\"><div class=\"text-sm\"><div class=\"text-gray-500\">Check-in</div><div class=\"font-medium\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var5 string var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(b.Total) templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(b.From)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 23, Col: 17} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 23, Col: 40}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</td><td>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div></div><div class=\"text-sm\"><div class=\"text-gray-500\">Check-out</div><div class=\"font-medium\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var6 string var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(b.From) templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(b.To)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 24, Col: 16} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 27, Col: 38}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</td><td>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div></div></div><div class=\"flex justify-between items-center mt-2\"><div class=\"text-lg font-bold text-primary\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var7 string var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(b.To) templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(b.Total)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 25, Col: 14} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 32, Col: 16}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</td><td>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " €</div><div class=\"text-sm text-gray-500\">ID: ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var8 string var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(b.Platform) templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(b.Id)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 26, Col: 20} return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/view/booking_lines.templ`, Line: 35, Col: 17}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</td></tr>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div></div><div class=\"card-actions justify-end mt-4\"><a href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 templ.SafeURL = b.Url
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var9)))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"btn btn-primary btn-sm\">View Details</a></div></article></li>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</tbody>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</ul>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

18
internal/view/bookings_list.templ
View file

@ -14,26 +14,12 @@ templ ListBookings(bookings []*ListBookingsViewModel) {
name="search" name="search"
placeholder="Search bookings by name…" placeholder="Search bookings by name…"
hx-get="/bookings" hx-get="/bookings"
hx-target="tbody" hx-target="#booking-cards"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-trigger="keyup changed delay:500ms" hx-trigger="keyup changed delay:500ms"
class="input input-bordered input-primary w-full md:w-96" class="input input-bordered input-primary w-full md:w-96"
/> />
</section> </section>
<div class="overflow-x-auto"> @BookingLines(bookings)
<table class="table table-zebra w-full">
<thead>
<tr>
<th scope="col" class="text-left px-4 py-2 text-primary">ID</th>
<th scope="col" class="text-left px-4 py-2 text-primary">Name</th>
<th scope="col" class="text-left px-4 py-2 text-primary">Total (€)</th>
<th scope="col" class="text-left px-4 py-2 text-primary">From</th>
<th scope="col" class="text-left px-4 py-2 text-primary">To</th>
<th scope="col" class="text-left px-4 py-2 text-primary">Platform</th>
</tr>
</thead>
@BookingLines(bookings)
</table>
</div>
} }
} }

6
internal/view/bookings_list_templ.go
View file

@ -43,7 +43,7 @@ func ListBookings(bookings []*ListBookingsViewModel) templ.Component {
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4 p-4 w-[98%] mx-auto\"><hgroup class=\"flex-shrink-0\"><h1 class=\"text-3xl font-bold text-primary tracking-tight\">Bookings</h1><h2 class=\"text-muted text-lg font-normal\">Overview of the activity</h2></hgroup> <input type=\"search\" name=\"search\" placeholder=\"Search bookings by name…\" hx-get=\"/bookings\" hx-target=\"tbody\" hx-swap=\"outerHTML\" hx-trigger=\"keyup changed delay:500ms\" class=\"input input-bordered input-primary w-full md:w-96\"></section><div class=\"overflow-x-auto\"><table class=\"table table-zebra w-full\"><thead><tr><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">ID</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">Name</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">Total (€)</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">From</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">To</th><th scope=\"col\" class=\"text-left px-4 py-2 text-primary\">Platform</th></tr></thead>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4 p-4 w-[98%] mx-auto\"><hgroup class=\"flex-shrink-0\"><h1 class=\"text-3xl font-bold text-primary tracking-tight\">Bookings</h1><h2 class=\"text-muted text-lg font-normal\">Overview of the activity</h2></hgroup> <input type=\"search\" name=\"search\" placeholder=\"Search bookings by name…\" hx-get=\"/bookings\" hx-target=\"#booking-cards\" hx-swap=\"outerHTML\" hx-trigger=\"keyup changed delay:500ms\" class=\"input input-bordered input-primary w-full md:w-96\"></section>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -51,10 +51,6 @@ func ListBookings(bookings []*ListBookingsViewModel) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</table></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil return nil
}) })
templ_7745c5c3_Err = layout.BaseLayout().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer) templ_7745c5c3_Err = layout.BaseLayout().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)