view: images: better horizontal image well component
Some checks failed
/ push (push) Has been cancelled
Some checks failed
/ push (push) Has been cancelled
This commit is contained in:
parent
17cd952d83
commit
5b1429c1a2
|
@ -4,7 +4,6 @@ import (
|
||||||
"net/http"
|
"net/http"
|
||||||
"time"
|
"time"
|
||||||
|
|
||||||
"github.com/tigorlazuardi/redmage/api"
|
|
||||||
"github.com/tigorlazuardi/redmage/pkg/errs"
|
"github.com/tigorlazuardi/redmage/pkg/errs"
|
||||||
"github.com/tigorlazuardi/redmage/pkg/log"
|
"github.com/tigorlazuardi/redmage/pkg/log"
|
||||||
"github.com/tigorlazuardi/redmage/views"
|
"github.com/tigorlazuardi/redmage/views"
|
||||||
|
@ -19,9 +18,9 @@ func (routes *Routes) PageHome(rw http.ResponseWriter, r *http.Request) {
|
||||||
|
|
||||||
vc := views.NewContext(routes.Config, r)
|
vc := views.NewContext(routes.Config, r)
|
||||||
|
|
||||||
listSubredditParams := parseSubredditListQuery(r)
|
data.ListSubredditParams.FillFromQuery(r.URL.Query())
|
||||||
|
data.ListSubredditParams.Limit = 0
|
||||||
list, err := routes.API.ListSubreddits(ctx, listSubredditParams)
|
list, err := routes.API.ListSubreddits(ctx, data.ListSubredditParams)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
log.New(ctx).Err(err).Error("failed to list subreddits")
|
log.New(ctx).Err(err).Error("failed to list subreddits")
|
||||||
code, message := errs.HTTPMessage(err)
|
code, message := errs.HTTPMessage(err)
|
||||||
|
@ -33,14 +32,13 @@ func (routes *Routes) PageHome(rw http.ResponseWriter, r *http.Request) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
imageListParams := api.ImageListParams{}
|
data.ImageListParams.FillFromQuery(r.URL.Query())
|
||||||
imageListParams.FillFromQuery(r.URL.Query())
|
if data.ImageListParams.CreatedAt.IsZero() {
|
||||||
if imageListParams.CreatedAt.IsZero() {
|
data.ImageListParams.CreatedAt = time.Now().Add(-time.Hour * 24) // images in the last 24 hours
|
||||||
imageListParams.CreatedAt = time.Now().Add(-time.Hour * 24) // images in the last 24 hours
|
|
||||||
}
|
}
|
||||||
imageListParams.Limit = 0
|
data.ImageListParams.Limit = 0
|
||||||
|
|
||||||
imageList, err := routes.API.ImagesListWithDevicesAndSubreddits(ctx, imageListParams)
|
imageList, err := routes.API.ImagesListWithDevicesAndSubreddits(ctx, data.ImageListParams)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
log.New(ctx).Err(err).Error("failed to list subreddits")
|
log.New(ctx).Err(err).Error("failed to list subreddits")
|
||||||
code, message := errs.HTTPMessage(err)
|
code, message := errs.HTTPMessage(err)
|
||||||
|
|
9
views/components/horizontal_image_well.templ
Normal file
9
views/components/horizontal_image_well.templ
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
templ HorizontalImageWell() {
|
||||||
|
<div class="grid">
|
||||||
|
<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl scrollbar-track-base-100 scrollbar-thumb-primary scrollbar-thin hover:scrollbar-thumb-base-300">
|
||||||
|
{ children... }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
|
@ -3,7 +3,6 @@ package homeview
|
||||||
import "github.com/tigorlazuardi/redmage/views/components"
|
import "github.com/tigorlazuardi/redmage/views/components"
|
||||||
import "github.com/tigorlazuardi/redmage/views"
|
import "github.com/tigorlazuardi/redmage/views"
|
||||||
import "github.com/tigorlazuardi/redmage/views/utils"
|
import "github.com/tigorlazuardi/redmage/views/utils"
|
||||||
import "github.com/tigorlazuardi/redmage/models"
|
|
||||||
import "strconv"
|
import "strconv"
|
||||||
import "fmt"
|
import "fmt"
|
||||||
|
|
||||||
|
@ -28,9 +27,8 @@ templ HomeContent(c *views.Context, data Data) {
|
||||||
@components.ErrorToast(data.Error)
|
@components.ErrorToast(data.Error)
|
||||||
} else {
|
} else {
|
||||||
<section class="mb-4 mx-auto">
|
<section class="mb-4 mx-auto">
|
||||||
<h1 class="mb-4">
|
<h1 class="mb-4">Recently Added</h1>
|
||||||
Recently Added
|
@filterBar(c, data)
|
||||||
</h1>
|
|
||||||
<div id="recently-added-images">
|
<div id="recently-added-images">
|
||||||
if data.TotalImages == 0 {
|
if data.TotalImages == 0 {
|
||||||
<h2 class="mt-4">There are no recently added images in the current time range.</h2>
|
<h2 class="mt-4">There are no recently added images in the current time range.</h2>
|
||||||
|
@ -39,20 +37,6 @@ templ HomeContent(c *views.Context, data Data) {
|
||||||
{ strconv.FormatInt(data.TotalImages, 10) } Images
|
{ strconv.FormatInt(data.TotalImages, 10) } Images
|
||||||
</h2>
|
</h2>
|
||||||
}
|
}
|
||||||
<div
|
|
||||||
id="filter-bar"
|
|
||||||
hx-get="/"
|
|
||||||
hx-target="#recently-added-images"
|
|
||||||
hx-select="#recently-added-images"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
hx-trigger="change"
|
|
||||||
hx-include="this"
|
|
||||||
hx-push-url="true"
|
|
||||||
class="flex flex-wrap content-center gap-x-8"
|
|
||||||
>
|
|
||||||
@recentRangeInput(c)
|
|
||||||
@nsfwToggle(c, data)
|
|
||||||
</div>
|
|
||||||
for _, recently := range data.RecentlyAddedImages {
|
for _, recently := range data.RecentlyAddedImages {
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
<h2 class="mt-4">{ recently.Device.Name }</h2>
|
<h2 class="mt-4">{ recently.Device.Name }</h2>
|
||||||
|
@ -63,7 +47,11 @@ templ HomeContent(c *views.Context, data Data) {
|
||||||
</a>
|
</a>
|
||||||
- { strconv.Itoa(len(subreddit.Images)) } images
|
- { strconv.Itoa(len(subreddit.Images)) } images
|
||||||
</h4>
|
</h4>
|
||||||
@RecentlyAddedImageList(subreddit.Images, 0)
|
@components.HorizontalImageWell() {
|
||||||
|
for _, data := range subreddit.Images {
|
||||||
|
@components.ImageCard(data, components.HideDevice)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
@ -82,62 +70,53 @@ templ HomeContent(c *views.Context, data Data) {
|
||||||
</main>
|
</main>
|
||||||
}
|
}
|
||||||
|
|
||||||
templ recentRangeInput(c *views.Context) {
|
templ filterBar(c *views.Context, data Data) {
|
||||||
<div class="form-control">
|
<div
|
||||||
<label class="label gap-4">
|
id="filter-bar"
|
||||||
<span class="label-text">Range</span>
|
hx-get="/"
|
||||||
<select
|
hx-target="#recently-added-images"
|
||||||
id="select-range"
|
hx-select="#recently-added-images"
|
||||||
name="created_at"
|
hx-swap="outerHTML"
|
||||||
class="select select-ghost select-bordered"
|
hx-trigger="change"
|
||||||
>
|
hx-include="this"
|
||||||
@recentlyRangeOption(c, "-10800", "3 Hours")
|
hx-push-url="true"
|
||||||
@recentlyRangeOption(c, "-21600", "6 Hours")
|
class="grid grid-cols-[1fr,4fr] sm:grid-cols-[1fr,4fr,1fr,4fr] items-center gap-4"
|
||||||
@recentlyRangeOption(c, "-43200", "12 Hours")
|
>
|
||||||
@recentlyRangeOption(c, "-86400", "1 Day")
|
@nsfwToggle(data)
|
||||||
@recentlyRangeOption(c, "-172800", "2 Days")
|
@recentRangeInput(c.Query.Get("created_at"))
|
||||||
@recentlyRangeOption(c, "-259200", "3 Days")
|
|
||||||
@recentlyRangeOption(c, "-604800", "7 Days")
|
|
||||||
@recentlyRangeOption(c, "-2592000", "30 Days")
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
templ recentlyRangeOption(c *views.Context, value, text string) {
|
templ recentRangeInput(current string) {
|
||||||
if c.Request.URL.Query().Get("created_at") == "" && value == "-86400" {
|
<label for="range" class="label">Range</label>
|
||||||
<option selected="selected" value={ value }>{ text }</option>
|
<select
|
||||||
} else if c.Request.URL.Query().Get("created_at") == value {
|
id="range"
|
||||||
<option selected="selected" value={ value }>{ text }</option>
|
name="created_at"
|
||||||
} else {
|
class="select select-ghost select-bordered"
|
||||||
<option value={ value }>{ text }</option>
|
>
|
||||||
}
|
@rangeOption("-10800", "3 Hours", current == "-10800")
|
||||||
|
@rangeOption("-21600", "6 Hours", current == "-21600")
|
||||||
|
@rangeOption("-43200", "12 Hours", current == "-43200")
|
||||||
|
@rangeOption("-86400", "1 Day", current == "-86400" || current == "")
|
||||||
|
@rangeOption("-172800", "2 Days", current == "-172800")
|
||||||
|
@rangeOption("-259200", "3 Days", current == "-259200")
|
||||||
|
@rangeOption("-604800", "7 Days", current == "-604800")
|
||||||
|
@rangeOption("-2592000", "7 Days", current == "-2592000")
|
||||||
|
</select>
|
||||||
}
|
}
|
||||||
|
|
||||||
templ nsfwToggle(c *views.Context, data Data) {
|
templ rangeOption(value, text string, selected bool) {
|
||||||
<div class="form-control">
|
<option selected?={ selected } value={ value }>{ text }</option>
|
||||||
<label class="label gap-4">
|
|
||||||
<span class="label-text">NSFW</span>
|
|
||||||
<select
|
|
||||||
name="sfw"
|
|
||||||
class="select select-ghost select-bordered"
|
|
||||||
>
|
|
||||||
if (c.Request.URL.Query().Get("sfw") == "1") || data.SFW {
|
|
||||||
<option value="0">Show</option>
|
|
||||||
<option selected="selected" value="1">Hide</option>
|
|
||||||
} else {
|
|
||||||
<option selected="selected" value="0">Show</option>
|
|
||||||
<option value="1">Hide</option>
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
templ RecentlyAddedImageList(images models.ImageSlice, opts components.ImageCardOption) {
|
templ nsfwToggle(data Data) {
|
||||||
<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">
|
<label for="nsfw" class="label">NSFW</label>
|
||||||
for _, data := range images {
|
<select
|
||||||
@components.ImageCard(data, components.HideDevice)
|
id="nsfw"
|
||||||
}
|
name="sfw"
|
||||||
</div>
|
class="select select-ghost select-bordered"
|
||||||
|
>
|
||||||
|
<option value="0">Show</option>
|
||||||
|
<option selected?={ data.ImageListParams.SFW } value="1">Hide</option>
|
||||||
|
</select>
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,8 @@ type Data struct {
|
||||||
TotalImages int64
|
TotalImages int64
|
||||||
Error string
|
Error string
|
||||||
Now time.Time
|
Now time.Time
|
||||||
SFW bool
|
ListSubredditParams api.ListSubredditsParams
|
||||||
|
ImageListParams api.ImageListParams
|
||||||
}
|
}
|
||||||
|
|
||||||
type RecentlyAddedImages = []RecentlyAddedImage
|
type RecentlyAddedImages = []RecentlyAddedImage
|
||||||
|
|
Loading…
Reference in a new issue