Redmage/views/homeview/homeview.templ

package homeview

import "github.com/tigorlazuardi/redmage/views/components"
import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/utils"
import "strconv"
import "fmt"
import "github.com/tigorlazuardi/redmage/api"

templ Home(c *views.Context, data Data) {
	@components.Doctype() {
		@components.Head(c,
			components.HeadTitle("Redmage - Home"),
		)
		@components.Body(c) {
			@HomeContent(c, data)
		}
	}
}

// HomeContent returns the main content of the home page.
//
// Use this template if request is HX-Boosted.
templ HomeContent(c *views.Context, data Data) {
	<main class="prose min-w-full">
		@components.Container() {
			if data.Error != "" {
				@components.ErrorToast(data.Error)
			} else {
				<section class="mb-4 mx-auto">
					<h1 class="mb-4">Recently Added</h1>
					<div class="divider"></div>
					@filterBar(c, data)
					<div id="recently-added-images">
						if data.TotalImages <= 0 {
							<h2 class="mt-4">There are no recently added images in the current time range.</h2>
						} else {
							<h2 class="mt-4 text-center">
								{ strconv.FormatInt(data.TotalImages, 10) } Images
							</h2>
							@showingImageFromTo(data)
						}
						<div class="grid justify-center">
							@components.Pagination(c, components.PaginationData{
								Limit:   data.ImageListParams.Limit,
								Total:   data.TotalImages,
								Offset:  data.ImageListParams.Offset,
								BaseURL: "/",
							})
						</div>
						for _, recently := range data.RecentlyAddedImages {
							<div class="divider"></div>
							<h2 class="mt-4">{ recently.Device.Name }</h2>
							for _, subreddit := range recently.Subreddits {
								<h4>
									<a class="text-primary" href={ templ.SafeURL(fmt.Sprintf("/subreddits/details/%s?device=%s", subreddit.Subreddit.Name, recently.Device.Slug)) }>
										{ subreddit.Subreddit.Name }
									</a>
									- { strconv.Itoa(len(subreddit.Images)) } images
								</h4>
								@components.HorizontalImageWell() {
									for _, data := range subreddit.Images {
										@components.ImageCard(data, components.HideDevice)
									}
								}
							}
						}
					</div>
				</section>
				<section>
					<h1>Subreddits</h1>
					for _, subreddit := range data.SubredditsList.Data {
						<h3>
							{ subreddit.Name } - 
							@utils.RelativeTimeNode(subreddit.Name, utils.NextScheduleTime(subreddit.Schedule).Unix())
						</h3>
					}
				</section>
			}
		}
	</main>
}

templ showingImageFromTo(data Data) {
	if data.TotalImages > 1 {
		<p class="text-center my-4">{ showingFromToImages(data) }</p>
	}
}

func showingFromToImages(data Data) string {
	params := data.ImageListParams
	start := params.Offset + 1
	end := params.Limit + params.Offset
	if end > data.TotalImages {
		end = data.TotalImages
	}
	return fmt.Sprintf("Showing from %d to %d", start, end)
}

templ filterBar(c *views.Context, data Data) {
	<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="grid grid-cols-[1fr,4fr] sm:grid-cols-[1fr,4fr,1fr,4fr] items-center gap-4"
	>
		@nsfwToggle(data)
		@deviceFilterInput(data)
		@limitInput(data.ImageListParams)
		@recentRangeInput(c.Query.Get("created_at"))
	</div>
}

templ limitInput(params api.ImageListParams) {
	<label for="limit" class="label">Limit</label>
	<select id="limit" name="limit" class="select select-bordered w-full">
		<option value="0" selected?={ params.Limit ==0 }>*No Limit</option>
		<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>
		<option value="200" selected?={ params.Limit == 200 }>200</option>
		<option value="300" selected?={ params.Limit == 300 }>300</option>
	</select>
}

templ recentRangeInput(current string) {
	<label for="range" class="label">Range</label>
	<select
		id="range"
		name="created_at"
		class="select select-ghost select-bordered w-full"
	>
		@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", "30 Days", current == "-2592000")
	</select>
}

templ rangeOption(value, text string, selected bool) {
	<option selected?={ selected } value={ value }>{ text }</option>
}

templ nsfwToggle(data Data) {
	<label for="nsfw" class="label">NSFW</label>
	<select
		id="nsfw"
		name="nsfw"
		class="select select-ghost select-bordered w-full"
	>
		<option value="-1" selected?={ data.ImageListParams.NSFW < 0 }>*No Filter</option>
		<option value="0" selected?={ data.ImageListParams.NSFW == 0 }>Hide</option>
		<option value="1" selected?={ data.ImageListParams.NSFW == 1 }>Show Only</option>
	</select>
}

templ deviceFilterInput(data Data) {
	<label for="device" class="label">Device</label>
	<select
		id="device"
		name="device"
		class="select select-ghost select-bordered w-full"
	>
		<option value="" selected?={ data.ImageListParams.Device == "" }>*All Devices</option>
		for _, device := range data.Devices {
			<option value={ device.Slug } selected?={ data.ImageListParams.Device == device.Slug }>{ device.Name }</option>
		}
	</select>
}