64 lines
2.9 KiB
Plaintext
64 lines
2.9 KiB
Plaintext
package watchlist
|
|
|
|
import "fmt"
|
|
|
|
templ WatchlistDropdown(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, currentStatus string, airing bool) {
|
|
<div class="relative inline-block" id="watchlist-dropdown">
|
|
<button class="inline-flex h-8 cursor-pointer items-center gap-2 bg-(--panel-soft) px-2 text-xs text-(--text)" onclick="toggleDropdown()" data-dropdown-trigger>
|
|
if currentStatus != "" {
|
|
{ formatStatus(currentStatus) }
|
|
} else {
|
|
Add to watchlist
|
|
}
|
|
<span class="text-xs">▾</span>
|
|
</button>
|
|
<div class="invisible absolute left-0 top-full mt-0.5 z-50 min-w-52 bg-(--panel) opacity-0 transition-opacity duration-150" data-dropdown-menu data-dropdown-open-classes="visible opacity-100" data-dropdown-closed-classes="invisible opacity-0">
|
|
@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "watching", currentStatus, airing)
|
|
@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "completed", currentStatus, airing)
|
|
@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "on_hold", currentStatus, airing)
|
|
@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "dropped", currentStatus, airing)
|
|
@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "plan_to_watch", currentStatus, airing)
|
|
if currentStatus != "" {
|
|
<button
|
|
class="flex w-full cursor-pointer items-center justify-between bg-transparent px-2.5 py-2 text-left text-xs text-(--text-muted) hover:bg-(--panel-soft) hover:text-(--danger)"
|
|
hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d", animeID))) }
|
|
hx-target="#watchlist-dropdown"
|
|
hx-swap="outerHTML swap:150ms"
|
|
>Remove from list</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ StatusOption(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, status string, currentStatus string, airing bool) {
|
|
<button
|
|
class={
|
|
"flex w-full cursor-pointer items-center justify-between bg-transparent px-2.5 py-2 text-left text-xs text-(--text-muted) hover:bg-(--panel-soft) hover:text-(--text)",
|
|
templ.KV("bg-(--panel-soft) text-(--text)", status == currentStatus),
|
|
}
|
|
hx-post="/api/watchlist"
|
|
hx-vals={ fmt.Sprintf(`{"anime_id": "%d", "anime_title": "%s", "anime_title_english": "%s", "anime_title_japanese": "%s", "anime_image": "%s", "status": "%s", "airing": "%v"}`, animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, status, airing) }
|
|
hx-target="#watchlist-dropdown"
|
|
hx-swap="outerHTML swap:150ms"
|
|
>
|
|
{ formatStatus(status) }
|
|
</button>
|
|
}
|
|
|
|
func formatStatus(status string) string {
|
|
switch status {
|
|
case "watching":
|
|
return "Watching"
|
|
case "completed":
|
|
return "Completed"
|
|
case "on_hold":
|
|
return "On hold"
|
|
case "dropped":
|
|
return "Dropped"
|
|
case "plan_to_watch":
|
|
return "Plan to watch"
|
|
default:
|
|
return status
|
|
}
|
|
}
|