252 lines
15 KiB
Plaintext
252 lines
15 KiB
Plaintext
{{define "title"}}Schedule{{end}}
|
|
{{define "scripts"}}<script type="module" src="/dist/static/schedule_board.js" defer></script>{{end}}
|
|
{{define "content"}}
|
|
<div class="flex flex-col gap-12 pb-24">
|
|
<section class="px-1">
|
|
<div class="flex flex-col gap-2">
|
|
<h1 class="text-4xl font-normal tracking-[-0.02em] text-foreground">Schedule</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<div
|
|
data-schedule-loader
|
|
hx-get="/api/schedule?year={{.ScheduleYear}}&week={{.ScheduleWeek}}"
|
|
hx-trigger="load"
|
|
hx-swap="outerHTML"
|
|
>
|
|
{{template "schedule_skeleton"}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "schedule_section"}}
|
|
<section class="flex w-full flex-col gap-8" data-schedule-section>
|
|
{{if eq (len .Animes) 0}}
|
|
<div class="flex flex-col items-center justify-center gap-4 bg-background-surface px-8 py-16 text-center ring-1 ring-(--border)">
|
|
<svg class="h-10 w-10 text-foreground-muted/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
|
<line x1="16" y1="2" x2="16" y2="6"/>
|
|
<line x1="8" y1="2" x2="8" y2="6"/>
|
|
<line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
<div class="flex max-w-md flex-col gap-1.5">
|
|
<h2 class="text-base font-normal text-foreground">Nothing airing yet</h2>
|
|
<p class="text-sm text-foreground-muted">Add currently airing shows to your watchlist to see their weekly broadcast schedule here.</p>
|
|
</div>
|
|
<div class="mt-2 flex flex-wrap items-center justify-center gap-3">
|
|
<a href="/browse?status=airing" class="inline-flex h-9 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Browse airing</a>
|
|
<a href="/discover" class="inline-flex h-9 items-center justify-center bg-transparent px-4 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Discover</a>
|
|
<a href="/watchlist" class="inline-flex h-9 items-center justify-center bg-transparent px-4 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Open watchlist</a>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<div class="inline-flex overflow-hidden bg-background-button">
|
|
<button type="button" data-schedule-setting="timeFormat" data-schedule-value="24" class="h-10 px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover">24H</button>
|
|
<button type="button" data-schedule-setting="timeFormat" data-schedule-value="12" class="h-10 px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover">12H</button>
|
|
</div>
|
|
|
|
<div class="inline-flex overflow-hidden bg-background-button">
|
|
<button type="button" data-schedule-setting="showImages" data-schedule-value="true" class="h-10 px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover">Posters</button>
|
|
<button type="button" data-schedule-setting="showImages" data-schedule-value="false" class="h-10 px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover">Text only</button>
|
|
</div>
|
|
|
|
<select data-schedule-setting="sortBy" class="h-10 bg-background-button px-4 text-sm font-normal text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
|
|
<option value="time">Sort by: Time</option>
|
|
<option value="alpha">Sort by: A-Z</option>
|
|
<option value="score">Sort by: Score</option>
|
|
</select>
|
|
|
|
<select data-schedule-setting="weekStart" class="h-10 bg-background-button px-4 text-sm font-normal text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
|
|
<option value="monday">Week starts: Monday</option>
|
|
<option value="sunday">Week starts: Sunday</option>
|
|
<option value="saturday">Week starts: Saturday</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="button" data-schedule-week-nav="-1" class="inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Previous</button>
|
|
<button type="button" data-schedule-week-nav="1" class="inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto pb-3">
|
|
<div class="grid min-w-350 grid-cols-7 gap-px border border-(--border) bg-(--border)" data-schedule-board>
|
|
{{range (list "Monday" "Tuesday" "Wednesday" "Thursday" "Friday" "Saturday" "Sunday")}}
|
|
{{$day := .}}
|
|
<section class="flex min-w-0 flex-col bg-background-surface" data-schedule-day="{{$day}}">
|
|
<header class="flex min-h-28 items-end justify-between gap-3 border-b border-(--border-light) px-5 py-5">
|
|
<div class="min-w-0">
|
|
<div class="text-xs font-normal uppercase tracking-wide text-foreground-muted" data-schedule-date-label>—</div>
|
|
<h2 class="mt-1 text-xl font-normal tracking-[-0.02em] text-foreground" data-schedule-day-label>{{$day}}</h2>
|
|
</div>
|
|
<span class="shrink-0 text-sm font-normal tabular-nums text-foreground-muted" data-schedule-count>0</span>
|
|
</header>
|
|
<div class="flex min-h-136 flex-col" data-schedule-day-items></div>
|
|
</section>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden" data-schedule-items-source>
|
|
{{range .Animes}}
|
|
{{$anime := .}}
|
|
{{$imageUrl := posterURL $anime.Images.Webp.LargeImageURL $anime.Images.Jpg.LargeImageURL 200 300}}
|
|
<article
|
|
data-schedule-item
|
|
data-mal-id="{{$anime.MalID}}"
|
|
data-title="{{$anime.DisplayTitle}}"
|
|
data-score="{{$anime.Score}}"
|
|
data-broadcast-day="{{$anime.Broadcast.Day}}"
|
|
data-broadcast-time="{{$anime.Broadcast.Time}}"
|
|
data-broadcast-timezone="{{$anime.Broadcast.Timezone}}"
|
|
>
|
|
<div class="flex min-h-124 flex-col gap-4 border-b border-(--border-light) px-5 py-5 transition-colors last:border-b-0 hover:bg-surface-hover">
|
|
<a href="/anime/{{$anime.MalID}}" class="overflow-hidden bg-background-button" data-schedule-poster>
|
|
<img src="{{$imageUrl}}" alt="{{$anime.DisplayTitle}}" class="h-44 w-full object-cover" loading="lazy" />
|
|
</a>
|
|
|
|
<div class="flex min-w-0 flex-1 flex-col gap-3">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<a href="/anime/{{$anime.MalID}}" class="min-w-0">
|
|
<h3 class="line-clamp-3 min-h-18 text-xl font-normal leading-tight tracking-[-0.02em] text-foreground">{{$anime.DisplayTitle}}</h3>
|
|
</a>
|
|
<button
|
|
type="button"
|
|
data-watchlist-toggle
|
|
data-mal-id="{{$anime.MalID}}"
|
|
data-watchlist-title="{{$anime.DisplayTitle}}"
|
|
data-watchlist-state="{{if (index $.WatchlistMap $anime.MalID)}}in{{else}}out{{end}}"
|
|
class="mt-1 shrink-0 text-foreground-muted transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 {{if (index $.WatchlistMap $anime.MalID)}}text-accent!{{end}}"
|
|
aria-label="{{if (index $.WatchlistMap $anime.MalID)}}Remove from Watchlist{{else}}Add to Watchlist{{end}}"
|
|
>
|
|
<svg class="size-5 watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-2 text-sm text-foreground-muted">
|
|
<span class="bg-background-button px-2.5 py-1 text-sm font-normal tabular-nums text-foreground" data-schedule-time>Unknown</span>
|
|
{{if $anime.Score}}
|
|
<span class="flex items-center gap-1.5 bg-background-button px-2.5 py-1 text-sm tabular-nums font-normal text-foreground-muted" title="Score">
|
|
<svg class="h-4 w-4 fill-accent" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<span>{{$anime.Score}}</span>
|
|
</span>
|
|
{{end}}
|
|
</div>
|
|
<span class="mt-auto pt-2 text-sm font-normal text-foreground-muted">View details</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</section>
|
|
{{end}}
|
|
|
|
{{define "schedule_section_scraped"}}
|
|
<section class="flex w-full flex-col gap-8" data-schedule-section>
|
|
{{if eq (len .ScheduleDays) 0}}
|
|
<div class="flex flex-col items-center justify-center gap-4 bg-background-surface px-8 py-16 text-center ring-1 ring-(--border)">
|
|
<svg class="h-10 w-10 text-foreground-muted/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
<div class="flex max-w-md flex-col gap-1.5">
|
|
<h2 class="text-base font-normal text-foreground">No schedule data</h2>
|
|
<p class="text-sm text-foreground-muted">Could not load the schedule feed right now.</p>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<a href="/schedule?year={{.PrevYear}}&week={{.PrevWeek}}" class="inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Previous</a>
|
|
<a href="/schedule?year={{.NextYear}}&week={{.NextWeek}}" class="inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Next</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto pb-3">
|
|
<div class="grid min-w-350 grid-cols-7 gap-px border border-(--border) bg-(--border)">
|
|
{{range .ScheduleDays}}
|
|
<section class="flex min-w-0 flex-col bg-background-surface">
|
|
<header class="flex min-h-28 items-end justify-between gap-3 border-b border-(--border-light) bg-background px-5 py-5">
|
|
<div class="min-w-0">
|
|
<div class="text-xs font-normal uppercase tracking-wide text-foreground-muted">{{.DateLabel}}</div>
|
|
<h2 class="mt-1 text-xl font-normal tracking-[-0.02em] text-foreground">{{.WeekdayLabel}}</h2>
|
|
</div>
|
|
</header>
|
|
<div class="flex min-h-136 flex-col">
|
|
{{if eq (len .Entries) 0}}
|
|
<div class="flex min-h-32 flex-1 items-center justify-center px-6 py-10 text-center text-sm text-foreground-muted">No releases scheduled</div>
|
|
{{else}}
|
|
{{range .Entries}}
|
|
<a href="/browse?q={{urlquery .Title}}" class="group flex min-h-124 flex-col gap-4 border-b border-(--border-light) px-5 py-5 transition-colors last:border-b-0 hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
|
|
<div class="relative aspect-4/5 w-full overflow-hidden bg-background-button">
|
|
{{if .ImageURL}}
|
|
<img src="{{.ImageURL}}" alt="{{.Title}}" class="h-full w-full object-cover" loading="lazy" />
|
|
{{end}}
|
|
<div class="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent opacity-70"></div>
|
|
</div>
|
|
|
|
<div class="flex min-w-0 flex-1 flex-col gap-3">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="bg-background-button px-2.5 py-1 text-sm font-normal tabular-nums text-foreground">{{.LocalTime}}</span>
|
|
<span class="bg-background-button px-2.5 py-1 text-sm font-normal text-foreground-muted">{{.EpisodeText}}</span>
|
|
<span class="bg-background-button px-2.5 py-1 text-sm font-normal text-accent">{{.AirType}}</span>
|
|
</div>
|
|
|
|
<h3 class="line-clamp-3 min-h-18 text-xl font-normal leading-tight tracking-[-0.02em] text-foreground">{{.Title}}</h3>
|
|
<span class="mt-auto pt-2 text-sm font-normal text-foreground-muted transition-colors group-hover:text-foreground">View details</span>
|
|
</div>
|
|
</a>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</section>
|
|
{{end}}
|
|
|
|
{{define "schedule_skeleton"}}
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<div class="flex flex-wrap gap-3">
|
|
{{range (seq 4)}}
|
|
<div class="skeleton h-10 w-32"></div>
|
|
{{end}}
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<div class="skeleton h-10 w-24"></div>
|
|
<div class="skeleton h-10 w-24"></div>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto pb-3">
|
|
<div class="grid min-w-350 grid-cols-7 gap-px border border-(--border) bg-(--border)">
|
|
{{range (seq 7)}}
|
|
<div class="flex flex-col bg-background-surface">
|
|
<div class="flex min-h-28 items-end justify-between border-b border-(--border-light) px-5 py-5">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="skeleton skeleton-subtle h-3 w-20"></div>
|
|
<div class="skeleton h-8 w-28"></div>
|
|
</div>
|
|
<div class="skeleton skeleton-subtle h-8 w-10"></div>
|
|
</div>
|
|
<div class="flex min-h-136 flex-col">
|
|
{{range (seq 3)}}
|
|
<div class="flex flex-col gap-4 border-b border-(--border-light) px-5 py-5 last:border-b-0">
|
|
<div class="skeleton h-44 w-full"></div>
|
|
<div class="flex flex-1 flex-col gap-3">
|
|
<div class="skeleton skeleton-subtle h-7 w-20"></div>
|
|
<div class="skeleton h-6 w-full"></div>
|
|
<div class="skeleton skeleton-subtle h-4 w-2/3"></div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|