67 lines
1.8 KiB
Plaintext
67 lines
1.8 KiB
Plaintext
package templates
|
|
|
|
import (
|
|
"fmt"
|
|
"mal/internal/jikan"
|
|
"net/url"
|
|
)
|
|
|
|
templ Search(q string) {
|
|
@Layout("mal - search") {
|
|
if q != "" {
|
|
<div class="loading-indicator htmx-indicator" id="loading">
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<span>searching</span>
|
|
</div>
|
|
<div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div>
|
|
} else {
|
|
<div class="empty-state">
|
|
<div class="empty-state-title">search for anime</div>
|
|
<div class="empty-state-text">use the search bar above to find anime to add to your watchlist</div>
|
|
</div>
|
|
}
|
|
}
|
|
}
|
|
|
|
templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
|
|
if len(animes) == 0 {
|
|
<div class="empty-state">
|
|
<div class="empty-state-title">no results found</div>
|
|
<div class="empty-state-text">try a different search term</div>
|
|
</div>
|
|
} else {
|
|
<div class="catalog-grid">
|
|
@SearchItems(query, animes, nextPage, hasNext)
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ SearchItems(query string, animes []jikan.Anime, 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/search?q=%s&page=%d", url.QueryEscape(query), nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
|
|
}
|
|
<script>
|
|
(function() {
|
|
const items = document.querySelectorAll('#results .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>
|
|
}
|