dynamicweb/hosting/templates/hosting/order_detail.html

224 lines
10 KiB
HTML

{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 %}
{% load i18n %}
{% load custom_tags %}
{% block content %}
<div id="order-detail{{order.pk}}" class="order-detail-container">
{% if messages %}
<div class="alert alert-warning">
{% for message in messages %}
<span>{{ message }}</span>
{% endfor %}
</div>
{% endif %}
{% if not error %}
<div class="dashboard-container-head">
<h1 class="dashboard-title-thin">
<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>
{% if order %}
<div class="dashboard-container-options">
<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>
{% endif %}
</div>
<div class="order-details">
{% if order %}
<p>
<strong>{% trans "Order #" %} {{order.id}}</strong>
</p>
{% endif %}
<p>
<strong>{% trans "Date" %}:</strong>
<span class="locale_date">
{% if order %}
{{order.created_at|date:'Y-m-d h:i a'}}
{% else %}
{% now "Y-m-d h:i a" %}
{% endif %}
</span>
</p>
{% if order %}
<p>
<strong>{% trans "Status" %}: </strong>
<strong>
{% if vm.terminated_at %}
<span class="vm-color-failed">{% trans "Terminated" %}</span>
{% elif order.status == 'Approved' %}
<span class="vm-color-online">{% trans "Approved" %}</span>
{% else %}
<span class="vm-status-failed">{% trans "Declined" %}</span>
{% endif %}
</strong>
</p>
{% endif %}
<hr>
<div>
<address>
<h4>{% trans "Billed to" %}:</h4>
<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}}
{% 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}}
{% endwith %}
{% endif %}
</p>
</address>
</div>
<hr>
<div>
<h4>{% trans "Payment method" %}:</h4>
<p>
{% if order %}
{{order.cc_brand}} {% trans "ending in" %} ****
{{order.last4}}<br>
{{user.email}}
{% else %}
{{cc_brand|default:_('Credit Card')}} {% trans "ending in" %} ****{{cc_last4}}<br>
{% if request.user.is_authenticated %}
{{request.user.email}}
{% else %}
{{request.session.user.email}}
{% endif %}
{% endif %}
</p>
</div>
<hr>
<div>
<h4>{% trans "Order summary" %}</h4>
<p>
<strong>{% trans "Product" %}:</strong>&nbsp;
{% if vm.name %}
{{ vm.name }}
{% else %}
{{ request.session.template.name }}
{% endif %}
</p>
<div class="row">
<div class="col-sm-6">
{% if vm.created_at %}
<p>
<span>{% trans "Period" %}: </span>
<span>
<span class="locale_date" data-format="YYYY/MM/DD">{{ vm.created_at|date:'Y-m-d h:i a' }}</span> - <span class="locale_date" data-format="YYYY/MM/DD">{{ subscription_end_date|date:'Y-m-d h:i a' }}</span>
</span>
</p>
{% endif %}
<p>
<span>{% trans "Cores" %}: </span>
{% if vm.cores %}
<span class="pull-right">{{vm.cores|floatformat}}</span>
{% else %}
<span class="pull-right">{{vm.cpu|floatformat}}</span>
{% endif %}
</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>
<hr>
</div>
{% if not order %}
{% block submit_btn %}
<form method="post" id="virtual_machine_create_form">
{% csrf_token %}
<div class="row">
<div class="col-sm-8">
<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 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>
</form>
{% endblock submit_btn %}
{% else %}
<div class="order_detail_footer">
<strong>ungleich glarus ag</strong>&nbsp;&nbsp;Bahnhofstrasse 1, 8783 Linthal, Switzerland<br>
www.datacenterlight.ch&nbsp;&nbsp;|&nbsp;&nbsp;info@datacenterlight.ch
</div>
{% endif %}
{% endif %}
</div>
{% if order %}
<div class="text-center" style="margin-bottom: 50px;">
<a class="btn btn-vm-back" href="{% url 'hosting:orders' %}">{% trans "BACK TO LIST" %}</a>
</div>
{% 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">
</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>
<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">
<a id="createvm-modal-done-btn" class="btn btn-success btn-ok btn-wide hide" href="{% url 'hosting:virtual_machines' %}">{% trans "OK" %}</a>
<button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide hide" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
</div>
</div>
</div>
</div>
</div>
<!-- / Create VM Modal -->
{% endif %}
<script type="text/javascript">
{% trans "Some problem encountered. Please try again later." as err_msg %}
var create_vm_error_message = '{{err_msg|safe}}';
window.onload = function () {
var locale_dates = document.getElementsByClassName("locale_date");
var formats = ['YYYY-MM-DD hh:mm a']
var i;
for (i = 0; i < locale_dates.length; i++) {
var oldDate = moment.utc(locale_dates[i].textContent, formats);
var outputFormat = locale_dates[i].getAttribute('data-format') || oldDate._f;
locale_dates[i].innerHTML = oldDate.local().format(outputFormat);
locale_dates[i].className += ' done';
}
};
</script>
{%endblock%}
{% block js_extra %}
{% if order %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="{% static 'hosting/js/html2canvas.min.js' %}"></script>
<script src="{% static 'hosting/js/html2pdf.min.js' %}"></script>
<script src="{% static 'hosting/js/order.js' %}"></script>
{% endif %}
{% endblock js_extra %}