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
|
|
@ -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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue