update trade acceptance styling and layout, and also trade acceptance update/details page. fixes #16
This commit is contained in:
parent
1c95ccfff7
commit
5fbe80e83a
14 changed files with 257 additions and 139 deletions
|
|
@ -3,7 +3,7 @@
|
|||
{% if group_by and groups %}
|
||||
{% for group in groups %}
|
||||
<div class="divider">{{ group.group }}</div>
|
||||
<div class="flex justify-center flex-wrap">
|
||||
<div class="flex justify-center flex-wrap gap-2">
|
||||
{% for card in group.cards %}
|
||||
<a href="{% url 'cards:card_detail' card.pk %}">
|
||||
{% card_badge card expanded=True %}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="flex justify-center flex-wrap">
|
||||
<div class="flex justify-center flex-wrap gap-2">
|
||||
{% for card in cards %}
|
||||
<a href="{% url 'cards:card_detail' card.pk %}">
|
||||
{% card_badge card expanded=True %}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,88 @@
|
|||
{% extends 'base.html' %}
|
||||
{% load trade_offer_tags %}
|
||||
{% load trade_offer_tags card_badge %}
|
||||
|
||||
{% block title %}Update Trade{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto max-w-xl mt-6">
|
||||
<h2 class="text-2xl font-bold">Update Trade</h2>
|
||||
<div class="text-center py-8">
|
||||
<ul class="steps">
|
||||
{% if object.is_thanked %}
|
||||
<li class="step step-primary">Accepted</li>
|
||||
<li class="step step-primary">Card Sent</li>
|
||||
<li class="step step-primary">Card Received</li>
|
||||
<li class="step step-primary">Thanks Sent</li>
|
||||
<li class="step step-primary">Thanks Received</li>
|
||||
<li class="step step-primary">Completed</li>
|
||||
{% elif object.is_rejected %}
|
||||
<li class="step step-primary">Accepted</li>
|
||||
<li class="step step-error">
|
||||
<span class="step-icon">X</span>{{ object.get_state_display }}
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="step step-primary">Accepted</li>
|
||||
<li class="step {% if object.get_step_number >= 2 %}step-primary{% endif %}">Card Sent</li>
|
||||
<li class="step {% if object.get_step_number >= 3 %}step-primary{% endif %}">Card Received</li>
|
||||
{% if object.state == 'THANKED_BY_INITIATOR' %}
|
||||
<li class="step step-primary">Thanks Sent</li>
|
||||
<li class="step">Thanks Received</li>
|
||||
<li class="step">Completed</li>
|
||||
{% elif object.state == 'THANKED_BY_ACCEPTOR' %}
|
||||
<li class="step step-primary">Thanks Received</li>
|
||||
<li class="step">Thanks Sent</li>
|
||||
<li class="step">Completed</li>
|
||||
{% elif object.state == 'THANKED_BY_BOTH' %}
|
||||
{% if form and form.errors %}
|
||||
<div class="alert alert-error mt-4">
|
||||
<strong>Please correct the errors below:</strong>
|
||||
<ul>
|
||||
{% for field in form %}
|
||||
{% for error in field.errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for error in form.non_field_errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<h2 class="text-2xl font-bold">Trade Details</h2>
|
||||
|
||||
<div class="card card-border bg-base-100 shadow-lg mx-auto p-6 m-4 text-sm">
|
||||
<div class="text-center mb-4">
|
||||
<ul class="steps">
|
||||
{% if object.is_thanked %}
|
||||
<li class="step step-primary">Accepted</li>
|
||||
<li class="step step-primary">Card Sent</li>
|
||||
<li class="step step-primary">Card Received</li>
|
||||
<li class="step step-primary">Thanks Sent</li>
|
||||
<li class="step step-primary">Thanks Received</li>
|
||||
<li class="step step-primary">Completed</li>
|
||||
{% elif object.is_rejected %}
|
||||
<li class="step step-primary">Accepted</li>
|
||||
<li class="step step-error">
|
||||
<span class="step-icon">X</span>{{ object.get_state_display }}
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="step">Thanks Sent</li>
|
||||
<li class="step">Thanks Received</li>
|
||||
<li class="step">Completed</li>
|
||||
<li class="step step-primary">Accepted</li>
|
||||
<li class="step {% if object.get_step_number >= 2 %}step-primary{% endif %}">Card Sent</li>
|
||||
<li class="step {% if object.get_step_number >= 3 %}step-primary{% endif %}">Card Received</li>
|
||||
{% if object.state == 'THANKED_BY_INITIATOR' %}
|
||||
<li class="step step-primary">Thanks Sent</li>
|
||||
<li class="step">Thanks Received</li>
|
||||
<li class="step">Completed</li>
|
||||
{% elif object.state == 'THANKED_BY_ACCEPTOR' %}
|
||||
<li class="step step-primary">Thanks Received</li>
|
||||
<li class="step">Thanks Sent</li>
|
||||
<li class="step">Completed</li>
|
||||
{% elif object.state == 'THANKED_BY_BOTH' %}
|
||||
<li class="step step-primary">Thanks Sent</li>
|
||||
<li class="step step-primary">Thanks Received</li>
|
||||
<li class="step step-primary">Completed</li>
|
||||
{% else %}
|
||||
<li class="step">Thanks Sent</li>
|
||||
<li class="step">Thanks Received</li>
|
||||
<li class="step">Completed</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="py-8">
|
||||
{% render_trade_acceptance object %}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 card card-border bg-base-100 shadow-lg mx-auto p-6 mb-4">
|
||||
<h3 class="text-xl font-semibold mb-4">Select an action:</h3>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="grid grid-cols-2 justify-items-end items-baseline gap-4">
|
||||
<div class="font-semibold">Initiator:</div>
|
||||
<div class="justify-self-start">{{ object.trade_offer.initiated_by.user.username }}</div>
|
||||
<div class="font-semibold">Initiator's Card:</div>
|
||||
<div class="justify-self-start">{% card_badge object.offered_card %}</div>
|
||||
<div class="font-semibold">Acceptor:</div>
|
||||
<div class="justify-self-start">{{ object.accepted_by.user.username }}</div>
|
||||
<div class="font-semibold">Acceptor's Card:</div>
|
||||
<div class="justify-self-start">{% card_badge object.requested_card %}</div>
|
||||
<div class="font-semibold">State:</div>
|
||||
<div class="justify-self-start">{{ object.get_state_display }}, Waiting on {% if object.is_initiator_state %}{{ object.accepted_by.user.username }}{% else %}{{ object.trade_offer.initiated_by.user.username }}{% endif %} to {{ object.next_action_label }}</div>
|
||||
<div class="font-semibold">ID:</div>
|
||||
<div class="justify-self-start">#{{ object.hash }}</div>
|
||||
<div class="font-semibold">Trade Offer:</div>
|
||||
<div class="justify-self-start"><a class="link link-hover" href="{% url 'trade_offer_detail' object.trade_offer.id %}">#{{ object.trade_offer.hash }}</a></div>
|
||||
<div class="font-semibold">Created At:</div>
|
||||
<div class="justify-self-start">{{ object.created_at }}</div>
|
||||
<div class="font-semibold">Last Updated:</div>
|
||||
<div class="justify-self-start">{{ object.updated_at }}</div>
|
||||
</div>
|
||||
{% if form.fields.state.choices %}
|
||||
<div class="divider"></div>
|
||||
<div class="flex flex-row gap-2">
|
||||
{% for state_value, state_label in form.fields.state.choices %}
|
||||
<form method="post" class="mb-2 flex-1">
|
||||
|
|
@ -63,26 +94,6 @@
|
|||
</form>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No available actions.</p>
|
||||
<!--button class="btn-info"></button-->
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if form and form.errors %}
|
||||
<div class="alert alert-error mt-4">
|
||||
<strong>Please correct the errors below:</strong>
|
||||
<ul>
|
||||
{% for field in form %}
|
||||
{% for error in field.errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for error in form.non_field_errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
@ -1,40 +1,38 @@
|
|||
{% extends 'base.html' %}
|
||||
{% load trade_offer_tags %}
|
||||
{% load trade_offer_tags card_badge %}
|
||||
|
||||
{% block title %}{{title}}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto max-w-2xl mt-6">
|
||||
<div class="container mx-auto mt-6">
|
||||
<h2 class="text-2xl font-bold">Trade Offer Details</h2>
|
||||
<div class="flex justify-center mt-10">
|
||||
{% render_trade_offer object %}
|
||||
</div>
|
||||
{% if acceptance_form %}
|
||||
<div class="w-3/4 mx-auto mt-4">
|
||||
<h3 class="text-xl font-semibold mt-6 mb-2">Accept This Offer</h3>
|
||||
<div class="card card-border bg-base-100 shadow-lg mx-auto p-6 m-4 text-sm">
|
||||
{% if acceptance_form %}
|
||||
<div class="col-span-2 w-3/4 mx-auto card card-border bg-base-200 shadow-lg p-6 mb-8">
|
||||
<h3 class="text-xl font-semibold mb-2">Accept A Trade</h3>
|
||||
<form method="post" action="{% url 'trade_acceptance_create' offer_pk=object.pk %}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="next" value="{% url 'trade_offer_detail' pk=object.pk %}">
|
||||
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="{{ acceptance_form.offered_card.id_for_label }}" class="block text-sm font-medium text-gray-700">I have:</label>
|
||||
<label for="{{ acceptance_form.offered_card.id_for_label }}" class="block text-sm font-medium mb-1">I have:</label>
|
||||
{{ acceptance_form.offered_card }}
|
||||
{% for error in acceptance_form.offered_card.errors %}
|
||||
<p class="mt-1 text-sm text-red-600">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="{{ acceptance_form.requested_card.id_for_label }}" class="block text-sm font-medium text-gray-700">I want:</label>
|
||||
<label for="{{ acceptance_form.requested_card.id_for_label }}" class="block text-sm font-medium mb-1">I want:</label>
|
||||
{{ acceptance_form.requested_card }}
|
||||
{% for error in acceptance_form.requested_card.errors %}
|
||||
<p class="mt-1 text-sm text-red-600">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-4">
|
||||
{% if not acceptance_form.accepted_by.field.widget.is_hidden %}
|
||||
<label for="{{ acceptance_form.accepted_by.id_for_label }}" class="block text-sm font-medium text-gray-700">
|
||||
<label for="{{ acceptance_form.accepted_by.id_for_label }}" class="block text-sm font-medium">
|
||||
Accepted By
|
||||
</label>
|
||||
{% endif %}
|
||||
|
|
@ -43,16 +41,57 @@
|
|||
<p class="mt-1 text-sm text-red-600">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
{% if is_initiator %}
|
||||
<a href="{{ delete_close_url }}" class="btn btn-danger">Delete/Close Trade Offer</a>
|
||||
{% elif request.user.is_authenticated %}
|
||||
<button type="submit" class="btn btn-primary">Accept Trade</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
{% if is_initiator %}
|
||||
<a href="{{ delete_close_url }}" class="btn btn-danger">Delete/Close Trade Offer</a>
|
||||
{% elif request.user.is_authenticated %}
|
||||
<button type="submit" class="btn btn-primary">Accept Trade</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
<div class="grid grid-cols-2 justify-items-end items-baseline gap-4">
|
||||
<div class="font-semibold text-right text-lg">Cards They Have:
|
||||
<div class="flex flex-wrap flex-col gap-2 text-left mt-4">
|
||||
{% for card in object.have_cards_available %}
|
||||
{% card_badge card.card card.qty_available %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-semibold justify-self-start text-lg">Cards They Want:
|
||||
<div class="flex flex-wrap flex-col gap-2 mt-4">
|
||||
{% for card in object.want_cards_available %}
|
||||
{% card_badge card.card card.qty_available %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="grid grid-cols-2 justify-items-end items-baseline gap-4">
|
||||
<div class="font-semibold">Initiator:</div>
|
||||
<div class="justify-self-start">{{ object.initiated_by.user.username }}</div>
|
||||
<div class="font-semibold">ID:</div>
|
||||
<div class="justify-self-start">#{{ object.hash }}</div>
|
||||
<div class="font-semibold">Created At:</div>
|
||||
<div class="justify-self-start">{{ object.created_at }}</div>
|
||||
<div class="font-semibold">Last Updated:</div>
|
||||
<div class="justify-self-start">{{ object.updated_at }}</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="font-semibold text-center text-lg mb-2">Trade History:</div>
|
||||
<div class="flex flex-row flex-wrap justify-start items-baseline w-90 lg:w-181 mx-auto">
|
||||
{% for trade in object.acceptances.all %}
|
||||
<div class="p-2 grid grid-cols-2 justify-items-center items-baseline gap-1 w-90">
|
||||
<div class="">{% card_badge trade.offered_card %}</div>
|
||||
<div class="">{% card_badge trade.requested_card %}</div>
|
||||
<div class="col-span-2 text-center">{{ trade.accepted_by.user.username }} • <a class="link link-hover" href="{% url 'trade_acceptance_update' pk=trade.pk %}">#{{ trade.hash }}</a> • {{ trade.get_state_display }}</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="text-center justify-center w-full text-center">No trades yet.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue