179 lines
No EOL
9 KiB
HTML
179 lines
No EOL
9 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n static crispy_forms_tags gravatar %}
|
|
|
|
{% block head_title %}{{ _('Dashboard') }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto" x-data="{ activeTab: '{{ active_tab|default:'dash' }}' }">
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="tabs tabs-border mb-8">
|
|
<button type="button" :class="{'tab': true, 'tab-active': activeTab === 'dash'}" @click="activeTab = 'dash'">{{ _('Dash') }}</button>
|
|
<button type="button" :class="{'tab': true, 'tab-active': activeTab === 'dashboard_offers'}" @click="activeTab = 'dashboard_offers'">{{ _('Your Trade Offers') }} ({{ dashboard_offers_paginated.paginator.count }})</button>
|
|
<button type="button" :class="{'tab': true, 'tab-active': activeTab === 'waiting_on_you'}" @click="activeTab = 'waiting_on_you'">{{ _('Waiting on You') }} ({{ trade_acceptances_waiting_paginated.paginator.count }})</button>
|
|
<button type="button" :class="{'tab': true, 'tab-active': activeTab === 'waiting_on_them'}" @click="activeTab = 'waiting_on_them'">{{ _('Waiting on Them') }} ({{ other_party_trade_acceptances_paginated.paginator.count }})</button>
|
|
<button type="button" :class="{'tab': true, 'tab-active': activeTab === 'trade_history'}" @click="activeTab = 'trade_history'">{{ _('Trade History') }}</button>
|
|
<button type="button" :class="{'tab': true, 'tab-active': activeTab === 'profile'}" @click="activeTab = 'profile'">{{ _('Profile') }}</button>
|
|
<button type="button" :class="{'tab': true, 'tab-active': activeTab === 'settings'}" @click="activeTab = 'settings'">{{ _('Settings') }}</button>
|
|
</div>
|
|
|
|
<!-- Tab Panels -->
|
|
|
|
<!-- Dash Tab - Dashboard Summary -->
|
|
<div x-show="activeTab === 'dash'">
|
|
<div class="card bg-base-100 shadow-xl mb-4">
|
|
<div class="card-body">
|
|
<h2 class="card-title">{{ _('Account Summary') }}</h2>
|
|
<p><strong>{{ _('Username:') }}</strong> {{ request.user.username }}</p>
|
|
<p><strong>{{ _('Default Friend Code:') }}</strong> {{ selected_friend_code.friend_code }}</p>
|
|
<p><strong>{{ _('Reputation Score:') }}</strong> {{ request.user.reputation_score }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-base-100 shadow-xl mb-4">
|
|
<div class="card-body">
|
|
<h2 class="card-title">{{ _('Trade Summary') }}</h2>
|
|
<div class="stats shadow">
|
|
<div class="stat">
|
|
<div class="stat-title">{{ _('Your Trade Offers') }}</div>
|
|
<div class="stat-value">{{ dashboard_offers_paginated.paginator.count }}</div>
|
|
<div class="stat-desc">{{ _('Active Offers') }}</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-title">{{ _('Waiting on You') }}</div>
|
|
<div class="stat-value">{{ trade_acceptances_waiting_paginated.paginator.count }}</div>
|
|
<div class="stat-desc">{{ _('Pending Requests') }}</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-title">{{ _('Waiting on Them') }}</div>
|
|
<div class="stat-value">{{ other_party_trade_acceptances_paginated.paginator.count }}</div>
|
|
<div class="stat-desc">{{ _('Pending Responses') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h2 class="card-title">{{ _('Quick Actions') }}</h2>
|
|
<div class="flex space-x-4">
|
|
<a href="{% url 'trade_offer_create' %}" class="btn btn-primary">{{ _('Create New Offer') }}</a>
|
|
<a href="{% url 'trade_offer_list' %}" class="btn btn-secondary">{{ _('View All Offers') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Your Trade Offers Tab -->
|
|
<div x-show="activeTab === 'dashboard_offers'" x-data="tradeOffersPagination('{% url 'dashboard' %}?ajax_section=dashboard_offers')">
|
|
{% include 'trades/_trade_offer_list.html' with offers=dashboard_offers_paginated %}
|
|
</div>
|
|
|
|
<!-- Waiting on You Tab -->
|
|
<div x-show="activeTab === 'waiting_on_you'" x-data="tradeOffersPagination('{% url 'dashboard' %}?ajax_section=waiting_acceptances')">
|
|
{% include 'trades/_trade_offer_list.html' with offers=trade_acceptances_waiting_paginated %}
|
|
</div>
|
|
|
|
<!-- Waiting on Them Tab -->
|
|
<div x-show="activeTab === 'waiting_on_them'" x-data="tradeOffersPagination('{% url 'dashboard' %}?ajax_section=other_party_acceptances')">
|
|
{% include 'trades/_trade_offer_list.html' with offers=other_party_trade_acceptances_paginated %}
|
|
</div>
|
|
|
|
<!-- Trade History Tab -->
|
|
<div x-show="activeTab === 'trade_history'">
|
|
<div class="divider">{{ _('Closed Offers') }} ({{ closed_offers_paginated.paginator.count }})</div>
|
|
<div class="mb-8">
|
|
{% include 'trades/_trade_offer_list.html' with offers=closed_offers_paginated %}
|
|
</div>
|
|
<div class="divider">{{ _('Closed Acceptances') }} ({{ closed_acceptances_paginated.paginator.count }})</div>
|
|
<div class="mb-8">
|
|
{% include 'trades/_trade_offer_list.html' with offers=closed_acceptances_paginated %}
|
|
</div>
|
|
<div class="divider">{{ _('Rejected by Them') }} ({{ rejected_by_them_paginated.paginator.count }})</div>
|
|
<div class="mb-8">
|
|
{% include 'trades/_trade_offer_list.html' with offers=rejected_by_them_paginated %}
|
|
</div>
|
|
<div class="divider">{{ _('Rejected by Me') }} ({{ rejected_by_me_paginated.paginator.count }})</div>
|
|
<div class="mb-8">
|
|
{% include 'trades/_trade_offer_list.html' with offers=rejected_by_me_paginated %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Tab -->
|
|
<div x-show="activeTab === 'profile'">
|
|
<div class="card card-border bg-base-100 shadow-lg mx-auto p-6 mb-4">
|
|
{% with gravatar_profile=request.user.email|gravatar_profile_data %}
|
|
{% if gravatar_profile %}
|
|
<div class="hovercard-profile mb-4 text-center">
|
|
<img src="{{ gravatar_profile.thumbnailUrl }}" alt="{{ gravatar_profile.displayName|default:request.user.username }}" class="rounded-full mb-2 mx-auto" />
|
|
<h3 class="text-xl mb-2">{{ gravatar_profile.displayName|default:request.user.username }}</h3>
|
|
<a href="{{ gravatar_profile.profileUrl }}" target="_blank" class="btn btn-primary">{{ _('View Gravatar Profile') }}</a>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-center">{{ _('No Gravatar profile data available.') }}</p>
|
|
{% endif %}
|
|
{% endwith %}
|
|
<div class="divider"></div>
|
|
<h2 class="text-lg font-semibold">{{ _('What is Gravatar?') }}</h2>
|
|
<p class="mb-4">{{ _('Gravatar (Globally Recognized Avatar) is a free service that links your email address to a profile picture and, optionally, a profile. Many websites use Gravatar to display your avatar automatically.') }}</p>
|
|
<h2 class="text-lg font-semibold">{{ _('How does it work?') }}</h2>
|
|
<p class="mb-4">{{ _('If you have set up a Gravatar, your profile picture will appear whenever you use your email on supported sites. Updates made on Gravatar will reflect here.') }}</p>
|
|
<h2 class="text-lg font-semibold">{{ _('Is it safe? What about privacy?') }}</h2>
|
|
<p class="mb-4">{{ _('Gravatar is optional, and your email is hashed to maintain privacy. Your personal data remains secure.') }}</p>
|
|
<h2 class="text-lg font-semibold">{{ _('Want to update or add a Gravatar?') }}</h2>
|
|
<p class="mb-4">{{ _('Go to Gravatar.com to set up or change your avatar or profile. Your changes will appear here once saved!') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div x-show="activeTab === 'settings'">
|
|
<div class="card card-border bg-base-100 shadow-lg mx-auto p-6 mb-4">
|
|
<form method="post" action="{% url 'dashboard' %}">
|
|
{% csrf_token %}
|
|
{{ settings_form|crispy }}
|
|
<a href="{% url 'list_friend_codes' %}" class="link link-secondary">{{ _('Edit Friend Codes') }}</a>
|
|
<button type="submit" name="update_settings" class="w-full btn btn-success mt-4">{{ _('Save Settings') }}</button>
|
|
</form>
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<a href="{% url 'account_logout' %}" class="btn btn-warning">{{ _('Sign Out') }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function tradeOffersPagination(baseUrl) {
|
|
return {
|
|
baseUrl: baseUrl,
|
|
_hasChangePageListener: false,
|
|
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;
|
|
this.init();
|
|
});
|
|
},
|
|
init() {
|
|
if (!this._hasChangePageListener) {
|
|
this.$el.addEventListener('change-page', event => {
|
|
let page = event.detail.page;
|
|
this.loadPage(page);
|
|
});
|
|
this._hasChangePageListener = true;
|
|
}
|
|
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 %} |