Introduce tabs in the invoice list
This commit is contained in:
PCoder
parent
d0455fbafb
commit
246292135d
1 changed files with 77 additions and 63 deletions
|
|
@ -2,70 +2,84 @@
|
||||||
{% load staticfiles bootstrap3 humanize i18n custom_tags %}
|
{% load staticfiles bootstrap3 humanize i18n custom_tags %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="dashboard-container">
|
<div class="container">
|
||||||
<div class="dashboard-container-head">
|
<ul class="nav nav-tabs">
|
||||||
<h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Bills" %}</h3>
|
<li class="active"><a data-toggle="tab" href="#recurring">{% trans "Recurring" %}</a></li>
|
||||||
{% if messages %}
|
<li><a data-toggle="tab" href="#one_off">{% trans "One-off payments" %}</a></li>
|
||||||
<div class="alert alert-warning">
|
|
||||||
{% for message in messages %}
|
|
||||||
<span>{{ message }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<div class="dashboard-subtitle"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table class="table table-switch">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>{% trans "VM ID" %}</th>
|
|
||||||
<th>{% trans "IP Address" %}/{% trans "Product" %}</th>
|
|
||||||
<th>{% trans "Period" %}</th>
|
|
||||||
<th>{% trans "Amount" %}</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for inv_data in invs %}
|
|
||||||
<tr>
|
|
||||||
{{ inv_data | get_line_item_from_stripe_invoice }}
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
{% if invs.has_other_pages %}
|
|
||||||
<ul class="pagination">
|
|
||||||
{% if invs.has_previous %}
|
|
||||||
{% if user_email %}
|
|
||||||
<li><a href="?page={{ invs.previous_page_number }}&user_email={{user_email}}">«</a></li>
|
|
||||||
{% else %}
|
|
||||||
<li><a href="?page={{ invs.previous_page_number }}">«</a></li>
|
|
||||||
{% endif %}
|
|
||||||
{% else %}
|
|
||||||
<li class="disabled"><span>«</span></li>
|
|
||||||
{% endif %}
|
|
||||||
{% for i in invs.paginator.page_range %}
|
|
||||||
{% if invs.number == i %}
|
|
||||||
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
|
|
||||||
{% else %}
|
|
||||||
{% if user_email %}
|
|
||||||
<li><a href="?page={{ i }}&user_email={{user_email}}">{{ i }}</a></li>
|
|
||||||
{% else %}
|
|
||||||
<li><a href="?page={{ i }}">{{ i }}</a></li>
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% if invs.has_next %}
|
|
||||||
{% if user_email %}
|
|
||||||
<li><a href="?page={{ invs.next_page_number }}&user_email={{user_email}}">»</a></li>
|
|
||||||
{% else %}
|
|
||||||
<li><a href="?page={{ invs.next_page_number }}">»</a></li>
|
|
||||||
{% endif %}
|
|
||||||
{% else %}
|
|
||||||
<li class="disabled"><span>»</span></li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
|
<div class="tab-content">
|
||||||
|
<div id="recurring" class="tab-pane fade in active">
|
||||||
|
<div class="dashboard-container">
|
||||||
|
<div class="dashboard-container-head">
|
||||||
|
<h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Bills" %}</h3>
|
||||||
|
{% if messages %}
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
{% for message in messages %}
|
||||||
|
<span>{{ message }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="dashboard-subtitle"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table table-switch">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{% trans "VM ID" %}</th>
|
||||||
|
<th>{% trans "IP Address" %}/{% trans "Product" %}</th>
|
||||||
|
<th>{% trans "Period" %}</th>
|
||||||
|
<th>{% trans "Amount" %}</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for inv_data in invs %}
|
||||||
|
<tr>
|
||||||
|
{{ inv_data | get_line_item_from_stripe_invoice }}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{% if invs.has_other_pages %}
|
||||||
|
<ul class="pagination">
|
||||||
|
{% if invs.has_previous %}
|
||||||
|
{% if user_email %}
|
||||||
|
<li><a href="?page={{ invs.previous_page_number }}&user_email={{user_email}}">«</a></li>
|
||||||
|
{% else %}
|
||||||
|
<li><a href="?page={{ invs.previous_page_number }}">«</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<li class="disabled"><span>«</span></li>
|
||||||
|
{% endif %}
|
||||||
|
{% for i in invs.paginator.page_range %}
|
||||||
|
{% if invs.number == i %}
|
||||||
|
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
|
||||||
|
{% else %}
|
||||||
|
{% if user_email %}
|
||||||
|
<li><a href="?page={{ i }}&user_email={{user_email}}">{{ i }}</a></li>
|
||||||
|
{% else %}
|
||||||
|
<li><a href="?page={{ i }}">{{ i }}</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% if invs.has_next %}
|
||||||
|
{% if user_email %}
|
||||||
|
<li><a href="?page={{ invs.next_page_number }}&user_email={{user_email}}">»</a></li>
|
||||||
|
{% else %}
|
||||||
|
<li><a href="?page={{ invs.next_page_number }}">»</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<li class="disabled"><span>»</span></li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="one_off" class="tab-pane fade">
|
||||||
|
<h3>One-off payments</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue