63 lines
No EOL
3.3 KiB
HTML
63 lines
No EOL
3.3 KiB
HTML
{% extends "base.html" %}
|
|
{% load static card_badge %}
|
|
{% block content %}
|
|
<div class="container mx-auto p-4"
|
|
x-data="{
|
|
order: '{{ order }}',
|
|
groupBy: '{{ group_by|default:'none' }}',
|
|
page: 1,
|
|
loadCards() {
|
|
// Construct URL using current pathname and query parameters.
|
|
let groupParam = this.groupBy === 'none' ? '' : this.groupBy;
|
|
let url = window.location.pathname + '?order=' + this.order + '&group_by=' + groupParam + '&page=' + this.page;
|
|
fetch(url, { headers: { 'x-requested-with': 'XMLHttpRequest' } })
|
|
.then(response => response.text())
|
|
.then(html => { this.$refs.cardList.innerHTML = html; });
|
|
}
|
|
}"
|
|
x-init="loadCards()"
|
|
x-on:change-page.window="page = $event.detail.page; loadCards()"
|
|
>
|
|
|
|
<div class="flex flex-wrap items-center justify-between mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">Cards</h1>
|
|
</div>
|
|
<div>
|
|
<!-- Sort Dropdown -->
|
|
<div class="dropdown dropdown-end m-1">
|
|
<div tabindex="0" class="btn">
|
|
Sort by: <span x-text="order === 'absolute' ? 'None' : (order === 'alphabetical' ? 'Alphabetical' : 'Rarity')"></span>
|
|
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li><a href="#" @click.prevent="order = 'absolute'; page = 1; loadCards()">None</a></li>
|
|
<li><a href="#" @click.prevent="order = 'alphabetical'; page = 1; loadCards()">Alphabetical</a></li>
|
|
<li><a href="#" @click.prevent="order = 'rarity'; page = 1; loadCards()">Rarity</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- Grouping Dropdown -->
|
|
<div class="dropdown dropdown-end m-1">
|
|
<div tabindex="0" class="btn">
|
|
Group by: <span x-text="groupBy === 'none' ? 'None' : (groupBy.charAt(0).toUpperCase() + groupBy.slice(1))"></span>
|
|
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li><a href="#" @click.prevent="groupBy = 'none'; page = 1; loadCards()">None</a></li>
|
|
<li><a href="#" @click.prevent="groupBy = 'deck'; page = 1; loadCards()">Deck</a></li>
|
|
<li><a href="#" @click.prevent="groupBy = 'cardset'; page = 1; loadCards()">Cardset</a></li>
|
|
<li><a href="#" @click.prevent="groupBy = 'rarity'; page = 1; loadCards()">Rarity</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Container for the partial card list -->
|
|
<div x-ref="cardList">
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %} |