106 lines
3.1 KiB
Plaintext
106 lines
3.1 KiB
Plaintext
package watchlist
|
|
|
|
import (
|
|
"fmt"
|
|
|
|
"mal/web/shared"
|
|
)
|
|
|
|
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
|
|
type="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
|
|
type="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={ shared.HxVals(map[string]interface{}{
|
|
"anime_id": animeID,
|
|
"anime_title": animeTitle,
|
|
"anime_title_english": animeTitleEnglish,
|
|
"anime_title_japanese": animeTitleJapanese,
|
|
"anime_image": animeImage,
|
|
"status": status,
|
|
"airing": 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
|
|
}
|
|
}
|