invoice page redesigned
This commit is contained in:
Arvind Tiwari
parent
6dfbf67d7d
commit
6c381dd3fb
7 changed files with 157 additions and 125 deletions
|
|
@ -580,9 +580,9 @@ a.unlink:hover {
|
|||
}
|
||||
|
||||
.dcl-place-order-text{
|
||||
font-size: 13px;
|
||||
/* font-size: 13px; */
|
||||
color: #808080;
|
||||
margin-bottom: 15px;
|
||||
/* margin-bottom: 15px; */
|
||||
}
|
||||
|
||||
.dcl-order-table-total .tbl-total {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.order-detail-container {
|
||||
max-width: 600px;
|
||||
margin: 100px auto;
|
||||
margin: 100px auto 40px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
.order-detail-container .dashboard-title-thin {
|
||||
margin-top: 0;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.order-detail-container .dashboard-title-thin .un-icon {
|
||||
|
|
@ -32,6 +33,7 @@
|
|||
.order-detail-container .dashboard-container-head {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.order-detail-container .dashboard-container-options {
|
||||
|
|
@ -43,4 +45,34 @@
|
|||
height: 20px;
|
||||
/* margin-right: 5px; */
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.order-detail-container .order-details {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.order-detail-container .order-details strong {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.order-detail-container h4 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.order-detail-container p {
|
||||
margin-bottom: 5px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.order-detail-container hr {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.order-confirm-btn {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
15
hosting/static/hosting/js/order.js
Normal file
15
hosting/static/hosting/js/order.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
$(document).ready(function() {
|
||||
$('.btn-pdf').click(function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $($(this).attr('data-target')) || $('body');
|
||||
var fileName = $target.attr('id') + '.pdf';
|
||||
html2pdf($target[0], {
|
||||
filename: fileName,
|
||||
});
|
||||
});
|
||||
$('.btn-print').click(function(e) {
|
||||
e.preventDefault();
|
||||
console.log('a');
|
||||
window.print();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
$(document).ready(function () {
|
||||
$('.modal-text').removeClass('hide');
|
||||
var create_vm_form = $('#virtual_machine_create_form');
|
||||
create_vm_form.submit(function () {
|
||||
$('#btn-create-vm').prop('disabled', true);
|
||||
|
|
@ -22,6 +23,7 @@ $(document).ready(function () {
|
|||
fa_icon = $('.modal-icon > .fa');
|
||||
fa_icon.attr('class', 'fa fa-times');
|
||||
$('.modal-header > .close').attr('class', 'close');
|
||||
$('.modal-text').addClass('hide');
|
||||
if (typeof(create_vm_error_message) !== 'undefined') {
|
||||
$('#createvm-modal-title').text(create_vm_error_message);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,6 +94,13 @@
|
|||
<!-- Init JavaScript -->
|
||||
<script src="{% static 'hosting/js/initial.js' %}"></script>
|
||||
|
||||
{% block js_extra %}
|
||||
{% comment %}
|
||||
this block is above some files, because on stripe error scripts below the stripe
|
||||
script are not properly executed.
|
||||
{% endcomment %}
|
||||
{% endblock js_extra %}
|
||||
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
<script src="https://js.stripe.com/v2/"></script>
|
||||
<!-- Stripe Lib -->
|
||||
|
|
@ -108,8 +115,6 @@
|
|||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.js"></script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<div id="order-detail" class="order-detail-container">
|
||||
<div id="order-detail{{order.pk}}" class="order-detail-container">
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
|
|
@ -19,18 +19,18 @@
|
|||
<img src="{% static 'hosting/img/billing.svg' %}" class="un-icon">{% blocktrans with page_header_text=page_header_text|default:"Invoice" %}{{page_header_text}}{% endblocktrans %}
|
||||
</h1>
|
||||
<div class="dashboard-container-options">
|
||||
<button class="btn-plain"><img src="{% static 'hosting/img/icon-pdf.svg' %}" class="svg-img"></button>
|
||||
<button class="btn-plain"><img src="{% static 'hosting/img/icon-print.svg' %}" class="svg-img"></button>
|
||||
<button type="button" class="btn-plain btn-pdf" data-target="#order-detail{{order.pk}}"><img src="{% static 'hosting/img/icon-pdf.svg' %}" class="svg-img"></button>
|
||||
<button type="button" class="btn-plain btn-print"><img src="{% static 'hosting/img/icon-print.svg' %}" class="svg-img"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-details">
|
||||
{% if order %}
|
||||
<div>
|
||||
<strong>{% trans "Order #"%} {{order.id}}</strong>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<strong>{% trans "Invoice Date"%}:</strong>
|
||||
<p>
|
||||
<strong>{% trans "Order #" %} {{order.id}}</strong>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{% trans "Invoice Date" %}:</strong>
|
||||
<span id="order-created_at">
|
||||
{% if order %}
|
||||
{{order.created_at|date:'Y-m-d H:i'}}
|
||||
|
|
@ -38,46 +38,43 @@
|
|||
{% now "Y-m-d H:i" %}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
{% if order %}
|
||||
|
||||
{% endif %}
|
||||
<div>
|
||||
<p>
|
||||
<strong>{% trans "Status" %}: </strong>
|
||||
<strong>
|
||||
{% if order.status == 'Approved' %}
|
||||
<span class="vm-status-active">{% trans "Approved" %}</span>
|
||||
<span class="vm-color-online">{% trans "Approved" %}</span>
|
||||
{% else %}
|
||||
<span class="vm-status-failed">{% trans "Declined" %}</span>
|
||||
{% endif %}
|
||||
</strong>
|
||||
</div>
|
||||
</p>
|
||||
<hr>
|
||||
<div>
|
||||
<address>
|
||||
<h4>{% trans "Billed to" %}:</h4>
|
||||
<div>
|
||||
<p>
|
||||
{% if order %}
|
||||
{{user.name}}<br>
|
||||
{{order.billing_address.street_address}},{{order.billing_address.postal_code}}<br>
|
||||
{{order.billing_address.city}},
|
||||
{{order.billing_address.country}}.
|
||||
{{order.billing_address.street_address}}, {{order.billing_address.postal_code}}<br>
|
||||
{{order.billing_address.city}}, {{order.billing_address.country}}
|
||||
{% else %}
|
||||
{% with request.session.billing_address_data as billing_address %}
|
||||
{{billing_address.cardholder_name}}<br>
|
||||
{{billing_address.street_address}},
|
||||
{{billing_address.postal_code}}<br>
|
||||
{{billing_address.city}},
|
||||
{{billing_address.country}}.
|
||||
{{billing_address.cardholder_name}}<br>
|
||||
{{billing_address.street_address}}, {{billing_address.postal_code}}<br>
|
||||
{{billing_address.city}}, {{billing_address.country}}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</p>
|
||||
</address>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h4>{% trans "Payment method" %}:</h4>
|
||||
<div>
|
||||
<p>
|
||||
{% if order %}
|
||||
{{order.cc_brand}} {% trans "ending in" %} ****
|
||||
{{order.last4}}<br>
|
||||
|
|
@ -87,82 +84,55 @@
|
|||
{{cc_last4}}<br>
|
||||
{{request.session.user.email}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>{% trans "Order summary"%}</h4>
|
||||
<div>
|
||||
{% if request.session.specs %}
|
||||
{% request.session.specs as vm %}
|
||||
{% endif %}
|
||||
<strong>{% trans "Product" %}:</strong> {{request.session.template.name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3><b></b></h3>
|
||||
<hr>
|
||||
<div class="content">
|
||||
|
||||
<p><b>{% trans "Cores"%}</b>
|
||||
<span class="pull-right">{{vm.cpu}}</span>
|
||||
</p>
|
||||
<hr>
|
||||
<p><b>{% trans "Memory"%}</b>
|
||||
<span class="pull-right">{{vm.memory}} GB</span>
|
||||
</p>
|
||||
<hr>
|
||||
<p><b>{% trans "Disk space"%}</b>
|
||||
<span class="pull-right">{{vm.disk_size}} GB</span>
|
||||
</p>
|
||||
<hr>
|
||||
<p><b>{% trans "Configuration"%}</b>
|
||||
<span class="pull-right">{{request.session.template.name}}</span>
|
||||
</p>
|
||||
<hr>
|
||||
<h4>{% trans "Total"%}
|
||||
<p class="pull-right">
|
||||
<b>{{vm.price}} CHF</b>
|
||||
<span class="dcl-price-month"> /{% trans "Month" %}
|
||||
</span>
|
||||
</p>
|
||||
</h4>
|
||||
{% endwith %}
|
||||
{% else %}
|
||||
<p><b>{% trans "Cores"%}</b>
|
||||
<span class="pull-right">{{vm.cores}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<p><b>{% trans "Memory"%}</b>
|
||||
<span class="pull-right">{{vm.memory}} GB</span>
|
||||
</p>
|
||||
<hr>
|
||||
<p><b>{% trans "Disk space"%}</b>
|
||||
<span class="pull-right">{{vm.disk_size}} GB</span>
|
||||
</p>
|
||||
<hr>
|
||||
<h4>{% trans "Total"%}<p class="pull-right"><b>{{vm.price}}
|
||||
CHF</b><span
|
||||
class="dcl-price-month"> /{% trans "Month" %}</span>
|
||||
</p></h4>
|
||||
<div>
|
||||
<h4>{% trans "Order summary" %}</h4>
|
||||
<p>
|
||||
<strong>{% trans "Product" %}:</strong> {{vm.name}}
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
{% comment %}
|
||||
<p>
|
||||
<span>{% trans "Period" %}</span>
|
||||
<span class="pull-right">{{vm.cpu}}</span>
|
||||
</p>
|
||||
{% endcomment %}
|
||||
<p>
|
||||
<span>{% trans "Cores" %}</span>
|
||||
<span class="pull-right">{{vm.cpu}}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{% trans "Memory" %}</span>
|
||||
<span class="pull-right">{{vm.memory}} GB</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{% trans "Disk space" %}</span>
|
||||
<span class="pull-right">{{vm.disk_size}} GB</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{% trans "Total" %}</span>
|
||||
<span class="pull-right">{{vm.price}} CHF</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if not order %}
|
||||
<hr>
|
||||
{% endif %}
|
||||
</div>
|
||||
<br/>
|
||||
{% if not order %}
|
||||
<form method="post" id="virtual_machine_create_form">
|
||||
{% csrf_token %}
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<p class="dcl-place-order-text">{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.</p>
|
||||
<div class="dcl-place-order-text">{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.</div>
|
||||
</div>
|
||||
<div class="col-sm-4 content">
|
||||
<button class="btn btn-info pull-right"
|
||||
id="btn-create-vm"
|
||||
data-href="{% url 'hosting:order-confirmation' %}"
|
||||
data-toggle="modal"
|
||||
data-target="#createvm-modal">
|
||||
{% trans "Place order"%}
|
||||
<div class="col-sm-4 order-confirm-btn text-right">
|
||||
<button class="btn choice-btn" id="btn-create-vm" data-href="{% url 'hosting:order-confirmation' %}" data-toggle="modal" data-target="#createvm-modal">
|
||||
{% trans "Place order" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,35 +140,43 @@
|
|||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- Create VM Modal -->
|
||||
<div class="modal fade" id="createvm-modal" tabindex="-1" role="dialog"
|
||||
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close hidden" data-dismiss="modal"
|
||||
aria-label="create-vm-close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-icon">
|
||||
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">{% trans "Processing..." %}</span>
|
||||
|
||||
<div class="text-center" style="margin-bottom: 50px;">
|
||||
<a class="btn btn-vm-back" href="{% url 'hosting:orders' %}">{% trans "BACK TO LIST" %}</a>
|
||||
</div>
|
||||
{% if order %}
|
||||
{% endif %}
|
||||
|
||||
{% if not order %}
|
||||
<!-- Create VM Modal -->
|
||||
<div class="modal fade" id="createvm-modal" tabindex="-1" role="dialog"
|
||||
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close hidden" data-dismiss="modal"
|
||||
aria-label="create-vm-close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<h4 class="modal-title" id="createvm-modal-title">
|
||||
</h4>
|
||||
<div class="modal-text" id="createvm-modal-body">
|
||||
{% trans "Hold tight, we are processing your request" %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-body">
|
||||
<div class="modal-icon">
|
||||
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">{% trans "Processing..." %}</span>
|
||||
</div>
|
||||
<h4 class="modal-title" id="createvm-modal-title">
|
||||
</h4>
|
||||
<div class="modal-text" id="createvm-modal-body">
|
||||
{% trans "Hold tight, we are processing your request" %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / Create VM Modal -->
|
||||
|
||||
<!-- / Create VM Modal -->
|
||||
{% endif %}
|
||||
|
||||
<script type="text/javascript">
|
||||
{% trans "Some problem encountered. Please try again later." as err_msg %}
|
||||
|
|
@ -210,13 +188,12 @@
|
|||
document.getElementById('order-created_at').innerHTML = locale_date;
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
|
||||
<script src="{% static 'hosting/js/html2pdf.js' %}"></script>
|
||||
<script>
|
||||
html2pdf(document.getElementById('order-detail'));
|
||||
</script>
|
||||
{%endblock%}
|
||||
|
||||
{% block js_extra %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
|
||||
<script src="{% static 'hosting/js/html2pdf.js' %}"></script>
|
||||
<script src="{% static 'hosting/js/order.js' %}"></script>
|
||||
{% endblock js_extra %}
|
||||
|
|
@ -698,6 +698,7 @@ class OrdersHostingDetailView(LoginRequiredMixin,
|
|||
'last4')
|
||||
context['cc_brand'] = card_details.get('response_object').get(
|
||||
'cc_brand')
|
||||
context['vm'] = request.session.get('specs')
|
||||
return context
|
||||
|
||||
def post(self, request):
|
||||
|
|
|
|||
Loading…
Reference in a new issue