98 lines
No EOL
3.7 KiB
HTML
98 lines
No EOL
3.7 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}My Trades{% endblock title %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto max-w-4xl mt-6" x-data="{ allExpanded: false }">
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-start mb-4">
|
|
<a href="{% url 'trade_offer_create' %}" class="btn btn-success">Create New Offer</a>
|
|
<div>
|
|
<form method="get" class="flex flex-wrap justify-end space-x-4 gap-2" x-data>
|
|
<label class="cursor-pointer flex items-center space-x-2 h-10">
|
|
<span x-text="allExpanded ? 'Collapse All' : 'Expand All'"></span>
|
|
<input type="checkbox" name="all_expanded" value="true" class="toggle toggle-primary" @click="allExpanded = !allExpanded; $dispatch('toggle-all', { expanded: allExpanded })">
|
|
</label>
|
|
<label class="cursor-pointer flex items-center space-x-2 h-10">
|
|
<span class="font-medium">Only Closed</span>
|
|
<input type="checkbox" name="show_closed" value="true" class="toggle toggle-primary" @change="$el.form.submit()" {% if show_closed %}checked{% endif %}>
|
|
</label>
|
|
|
|
{% include "trades/_friend_code_select.html" with friend_codes=friend_codes selected_friend_code=selected_friend_code field_name="friend_code" label="" %}
|
|
|
|
<button type="submit" class="btn btn-primary" x-show="false">Apply</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
|
|
<!-- Section: Waiting for Your Response -->
|
|
<section class="mb-12">
|
|
<h2 class="text-2xl font-bold mb-4">Waiting for Your Response</h2>
|
|
<div
|
|
id="waiting-acceptances"
|
|
x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=waiting_acceptances')"
|
|
x-init="init()"
|
|
>
|
|
{% include "trades/_trade_offer_list_paginated.html" with offers=trade_acceptances_waiting_paginated %}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section: Waiting for Their Response -->
|
|
<section class="mb-12">
|
|
<h2 class="text-2xl font-bold mb-4">Waiting for Their Response</h2>
|
|
<div
|
|
id="other-acceptances"
|
|
x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=other_party_acceptances')"
|
|
x-init="init()"
|
|
>
|
|
{% include "trades/_trade_offer_list_paginated.html" with offers=other_party_trade_acceptances_paginated %}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Section: My Trade Offers -->
|
|
<section class="mb-12">
|
|
<h2 class="text-2xl font-bold mb-4">My Trade Offers</h2>
|
|
<div
|
|
id="my-trade-offers"
|
|
x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=my_trade_offers')"
|
|
x-init="init()">
|
|
{% include "trades/_trade_offer_list_paginated.html" with offers=my_trade_offers_paginated %}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
function tradeOffersPagination(baseUrl) {
|
|
return {
|
|
baseUrl: baseUrl,
|
|
loadPage(page) {
|
|
let url = new URL(this.baseUrl, window.location.origin);
|
|
url.searchParams.set("page", page);
|
|
fetch(url, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
this.$el.innerHTML = html;
|
|
// Reinitialize click events after content update.
|
|
this.init();
|
|
});
|
|
},
|
|
init() {
|
|
// Bind click events on pagination links within the component.
|
|
this.$el.querySelectorAll("a.ajax-page-link").forEach(link => {
|
|
link.addEventListener("click", (event) => {
|
|
event.preventDefault();
|
|
let page = link.getAttribute("data-page");
|
|
this.loadPage(page);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock content %} |