86 lines
2.7 KiB
Plaintext
86 lines
2.7 KiB
Plaintext
package templates
|
|
|
|
import "mal/internal/jikan"
|
|
import "fmt"
|
|
import "strings"
|
|
|
|
templ Schedule() {
|
|
@Layout("mal - schedule") {
|
|
<div class="schedule-page">
|
|
<h1>weekly schedule</h1>
|
|
<p class="schedule-subtitle">airing times in JST</p>
|
|
|
|
<div class="schedule-tabs">
|
|
<button class="schedule-tab active" data-day="monday" onclick="loadDay('monday', this)">mon</button>
|
|
<button class="schedule-tab" data-day="tuesday" onclick="loadDay('tuesday', this)">tue</button>
|
|
<button class="schedule-tab" data-day="wednesday" onclick="loadDay('wednesday', this)">wed</button>
|
|
<button class="schedule-tab" data-day="thursday" onclick="loadDay('thursday', this)">thu</button>
|
|
<button class="schedule-tab" data-day="friday" onclick="loadDay('friday', this)">fri</button>
|
|
<button class="schedule-tab" data-day="saturday" onclick="loadDay('saturday', this)">sat</button>
|
|
<button class="schedule-tab" data-day="sunday" onclick="loadDay('sunday', this)">sun</button>
|
|
</div>
|
|
|
|
<div id="schedule-content" hx-get="/api/schedule?day=monday" hx-trigger="load">
|
|
<div class="loading-indicator">
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<span>loading schedule</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function loadDay(day, btn) {
|
|
document.querySelectorAll('.schedule-tab').forEach(t => t.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
htmx.ajax('GET', '/api/schedule?day=' + day, '#schedule-content');
|
|
}
|
|
</script>
|
|
}
|
|
}
|
|
|
|
templ ScheduleDay(day string, animes []jikan.Anime) {
|
|
<div class="schedule-day">
|
|
<h2>{ strings.Title(day) }</h2>
|
|
if len(animes) == 0 {
|
|
<p class="no-anime">no anime scheduled</p>
|
|
} else {
|
|
<div class="schedule-grid">
|
|
for _, anime := range animes {
|
|
@ScheduleAnimeCard(anime)
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ ScheduleAnimeCard(anime jikan.Anime) {
|
|
<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) } class="schedule-card">
|
|
<div class="schedule-card-image">
|
|
if anime.ImageURL() != "" {
|
|
<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } loading="lazy"/>
|
|
} else {
|
|
<div class="no-image">no image</div>
|
|
}
|
|
</div>
|
|
<div class="schedule-card-info">
|
|
<div class="schedule-card-title">{ anime.DisplayTitle() }</div>
|
|
<div class="schedule-card-meta">
|
|
if anime.Broadcast.Time != "" {
|
|
<span class="schedule-time">{ anime.Broadcast.Time }</span>
|
|
}
|
|
if anime.Type != "" {
|
|
<span class="schedule-type">{ anime.Type }</span>
|
|
}
|
|
if anime.Episodes > 0 {
|
|
<span class="schedule-eps">{ fmt.Sprintf("%d ep", anime.Episodes) }</span>
|
|
}
|
|
</div>
|
|
if anime.Score > 0 {
|
|
<div class="schedule-card-score">★ { fmt.Sprintf("%.1f", anime.Score) }</div>
|
|
}
|
|
</div>
|
|
</a>
|
|
}
|