tigor/Redmage
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

view(subreddits-details): update view to use new components

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-05-29 12:06:21 +07:00
parent d6e8cd96b0
commit 3ce9c2a327
4 changed files with 115 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Makefile
View file

@ -77,11 +77,11 @@ web-dependencies:
web-build: web-dependencies
mkdir -p public
npx tailwindcss -i views/style.css -o public/style.css
npx tailwindcss --minify -i views/style.css -o public/style.css
web-build-docker:
mkdir -p public
npx tailwindcss -i views/style.css -o public/style.css
npx tailwindcss --minify -i views/style.css -o public/style.css
build: web-dependencies build-dependencies prepare
go build -o redmage

11
views/devices/details/data.go
View file

@ -6,11 +6,12 @@ import (
)
type Data struct {
Error string
Device *models.Device
Images models.ImageSlice
TotalImages int64
Params api.ImageListParams
Error string
Device *models.Device
Images models.ImageSlice
TotalImages int64
Params api.ImageListParams
FlashMessageSuccess string
}
type splitBySubredditImages struct {

85
views/devices/details/filter.templ
View file

@ -2,6 +2,7 @@ package details
import "fmt"
import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/api"
templ filter(c *views.Context, data Data) {
<div
@ -9,53 +10,55 @@ templ filter(c *views.Context, data Data) {
hx-get={ fmt.Sprintf("/devices/details/%s", data.Device.Slug) }
hx-include="this"
hx-trigger="change, input delay:500ms"
hx-target="main"
hx-select="main"
hx-target="#image-content"
hx-select="#image-content"
hx-swap="outerHTML"
hx-push-url="true"
class="grid md:grid-cols-2 gap-4 items-center"
class="grid grid-cols-[1fr,4fr] sm:grid-cols-[1fr,4fr,1fr,4fr] gap-4 items-center"
>
<label class="input input-bordered flex items-center gap-2">
<input
id="search"
type="text"
class="grow"
placeholder="Search"
name="q"
value={ data.Params.Q }
/>
<svg
onclick="htmx.trigger('#filter-bar', 'change')"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4 opacity-70"
><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg>
</label>
<div class="grid grid-cols-[1fr,3fr] sm:grid-cols-[1fr,3fr,1fr,3fr] gap-4 items-center">
<label for="limit">Limit</label>
<select id="limit" name="limit" class="select select-bordered w-full">
<option value="25" selected?={ data.Params.Limit == 25 }>25</option>
<option value="50" selected?={ data.Params.Limit == 50 }>50</option>
<option value="75" selected?={ data.Params.Limit == 75 }>75</option>
<option value="100" selected?={ data.Params.Limit == 100 }>100</option>
</select>
<label for="range">Range</label>
<select id="range" name="created_at" class="select select-bordered w-full">
@rangeOption(c, "", "*No Filter")
@rangeOption(c, "-10800", "3 Hours")
@rangeOption(c, "-21600", "6 Hours")
@rangeOption(c, "-43200", "12 Hours")
@rangeOption(c, "-86400", "1 Day")
@rangeOption(c, "-172800", "2 Days")
@rangeOption(c, "-259200", "3 Days")
@rangeOption(c, "-604800", "7 Days")
@rangeOption(c, "-2592000", "30 Days")
</select>
</div>
@searchInput(data.Params)
@limitInput(data.Params)
@rangeInput(c)
</div>
}
templ searchInput(params api.ImageListParams) {
<label for="search" class="label">Search</label>
<input
id="search"
type="text"
class="input input-bordered w-full"
placeholder="Search"
name="q"
value={ params.Q }
/>
}
templ limitInput(params api.ImageListParams) {
<label class="label" for="limit">Limit</label>
<select id="limit" name="limit" class="select select-bordered w-full">
<option value="25" selected?={ params.Limit == 25 }>25</option>
<option value="50" selected?={ params.Limit == 50 }>50</option>
<option value="75" selected?={ params.Limit == 75 }>75</option>
<option value="100" selected?={ params.Limit == 100 }>100</option>
</select>
}
templ rangeInput(c *views.Context) {
<label class="label" for="range">Range</label>
<select id="range" name="created_at" class="select select-bordered w-full">
@rangeOption(c, "", "*No Filter")
@rangeOption(c, "-10800", "3 Hours")
@rangeOption(c, "-21600", "6 Hours")
@rangeOption(c, "-43200", "12 Hours")
@rangeOption(c, "-86400", "1 Day")
@rangeOption(c, "-172800", "2 Days")
@rangeOption(c, "-259200", "3 Days")
@rangeOption(c, "-604800", "7 Days")
@rangeOption(c, "-2592000", "30 Days")
</select>
}
templ rangeOption(c *views.Context, value, display string) {
<option value={ value } selected?={ c.Request.URL.Query().Get("created_at") == value }>{ display }</option>
}

93
views/devices/details/view.templ
View file

@ -16,6 +16,11 @@ templ View(c *views.Context, data Data) {
}
@components.Body(c) {
@Content(c, data)
@components.NotificationContainer() {
if data.FlashMessageSuccess != "" {
@components.SuccessNotification(data.FlashMessageSuccess)
}
}
}
}
}
@ -28,19 +33,32 @@ templ Content(c *views.Context, data Data) {
} else {
<div class="flex justify-between items-center">
<h1 class="my-auto">{ data.Device.Name }</h1>
<div class="tooltip" data-tip="Edit">
<a
href={ templ.SafeURL(fmt.Sprintf("/devices/edit/%s", data.Device.Slug)) }
class="btn btn-primary no-underline"
>
@icons.Gear("w-8 h-8 text-primary-content")
</a>
</div>
@actionButton(data)
</div>
<div class="divider"></div>
@filter(c, data)
<h2>{ strconv.FormatInt(data.TotalImages, 10) } Images</h2>
if data.TotalImages > 0 {
<div id="image-content">
<h2 class="my-4">{ strconv.FormatInt(data.TotalImages, 10) } Images</h2>
if data.TotalImages > 0 {
<div class="flex justify-center mt-4">
@components.Pagination(c, components.PaginationData{
BaseURL: "/devices/details/" + data.Device.Slug,
Limit: data.Params.Limit,
Offset: data.Params.Offset,
Total: data.TotalImages,
})
</div>
<p class="text-center my-4">
Showing from
{ strconv.FormatInt(data.Params.Offset + 1, 10) }
to
{ strconv.FormatInt(min(data.Params.Limit+data.Params.Offset, data.TotalImages), 10) }
</p>
}
for _, group := range data.splitImages() {
<h2 class="my-4">{ group.Subreddit }</h2>
@imageList(group.Images)
}
<div class="flex justify-center mt-4">
@components.Pagination(c, components.PaginationData{
BaseURL: "/devices/details/" + data.Device.Slug,
@ -49,34 +67,49 @@ templ Content(c *views.Context, data Data) {
Total: data.TotalImages,
})
</div>
<p class="text-center my-4">
Showing from
{ strconv.FormatInt(data.Params.Offset + 1, 10) }
to
{ strconv.FormatInt(min(data.Params.Limit+data.Params.Offset, data.TotalImages), 10) }
</p>
}
for _, group := range data.splitImages() {
<h2>{ group.Subreddit }</h2>
@imageList(group.Images)
}
<div class="flex justify-center mt-4">
@components.Pagination(c, components.PaginationData{
BaseURL: "/devices/details/" + data.Device.Slug,
Limit: data.Params.Limit,
Offset: data.Params.Offset,
Total: data.TotalImages,
})
</div>
}
}
</main>
}
templ actionButton(data Data) {
<div class="max-xs:toast max-xs:z-40">
<div class="dropdown dropdown-hover dropdown-top xs:dropdown-bottom dropdown-end">
<div
tabindex="0"
role="button"
class="btn btn-primary max-xs:btn-circle max-lg:btn-square xs:btn-outline m-1 max-xs:border-none"
>
@icons.Kebab("h-8 w-8")
</div>
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 m-0 border-primary border-2"
onclick="document.activeElement.blur()"
>
<li class="m-0 p-0 hover:bg-primary rounded-btn">
<a
href={ templ.SafeURL(fmt.Sprintf("/devices/edit/%s", data.Device.Slug)) }
class="btn btn-ghost btn-sm no-underline m-0"
>Edit</a>
</li>
<div class="xs:hidden divider m-0 p-0"></div>
<li class="xs:hidden m-0 p-0 hover:bg-primary rounded-btn">
<button
class="btn btn-ghost btn-sm m-0"
onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"
>Scroll to Top</button>
</li>
</ul>
</div>
</div>
}
templ imageList(images models.ImageSlice) {
<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full scrollbar-track-base-100 scrollbar-thumb-primary scrollbar-thin hover:scrollbar-thumb-base-300">
@components.HorizontalImageWell() {
for _, data := range images {
@components.ImageCard(data, 0)
}
</div>
}
}