67 lines
1.9 KiB
Plaintext
67 lines
1.9 KiB
Plaintext
package templates
|
|
|
|
import "mal/internal/jikan"
|
|
import "fmt"
|
|
|
|
templ Discover() {
|
|
@Layout("mal - discover") {
|
|
<div class="discover-container">
|
|
<div class="tabs">
|
|
<button
|
|
class="tab active"
|
|
hx-get="/api/discover/airing?page=1"
|
|
hx-target="#discover-content"
|
|
hx-trigger="click"
|
|
onclick="document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); this.classList.add('active');"
|
|
>
|
|
airing now
|
|
</button>
|
|
<button
|
|
class="tab"
|
|
hx-get="/api/discover/upcoming?page=1"
|
|
hx-target="#discover-content"
|
|
hx-trigger="click"
|
|
onclick="document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); this.classList.add('active');"
|
|
>
|
|
upcoming
|
|
</button>
|
|
</div>
|
|
<div class="catalog-grid" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
|
|
<div class="loading-indicator" style="grid-column: 1 / -1;">
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<span>Loading discover</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
|
|
for _, anime := range animes {
|
|
<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
|
|
@CatalogItem(anime)
|
|
</div>
|
|
}
|
|
if hasNext {
|
|
<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
|
|
}
|
|
<script>
|
|
(function() {
|
|
const items = document.querySelectorAll('#discover-content .catalog-item[data-id]');
|
|
const seen = new Set();
|
|
items.forEach(item => {
|
|
const id = item.getAttribute('data-id');
|
|
if (id) {
|
|
if (seen.has(id)) {
|
|
item.remove();
|
|
} else {
|
|
seen.add(id);
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
}
|