download usage cost

This commit is contained in:
Setyo Nugroho 2022-05-22 22:16:07 +07:00
parent 8fbcba3976
commit 88a7d39f73
2 changed files with 81 additions and 41 deletions

View file

@ -13,6 +13,9 @@
href="{% url 'horizon:admin:projects_invoice:rollback_to_unpaid' invoice.id %}?next={{ request.path }}">Rollback href="{% url 'horizon:admin:projects_invoice:rollback_to_unpaid' invoice.id %}?next={{ request.path }}">Rollback
to Unpaid</a> to Unpaid</a>
{% endif %} {% endif %}
<button onclick="javascript:downloadPdf();" class="btn btn-default">Download PDF</button>
<br/> <br/>
<br/> <br/>
<div> <div>
@ -57,10 +60,26 @@
{% endblock %} {% endblock %}
{% block js %} {% block js %}
{{ block.super }} {{ block.super }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript"> <script type="text/javascript">
function onInvoiceChange(val) { function onInvoiceChange(val) {
var search = "?invoice_id=" + val; var search = "?invoice_id=" + val;
window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + search; window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + search;
} }
function downloadPdf() {
let opt = {
filename: 'usage_cost.pdf',
margin: [16, 16],
enableLinks: true,
image: {type: 'jpeg', quality: 0.98},
pagebreak: { mode: 'avoid-all', },
jsPDF: {unit: 'mm', format: 'a4', orientation: 'portrait'},
}
html2pdf().set(opt).from(document.getElementById('usage_cost')).save();
}
</script> </script>
{% endblock %} {% endblock %}

View file

@ -2,48 +2,53 @@
{% block title %}{{ page_title }}{% endblock %} {% block title %}{{ page_title }}{% endblock %}
{% block main %} {% block main %}
{% if invoice %} {% if invoice %}
<div> <button onclick="javascript:downloadPdf();" class="btn btn-default">Download PDF</button>
<dl class="dl-horizontal"> <br/>
<dt>Invoice Month</dt> <br/>
<dd> <div id="usage_cost">
<select id="invoice_select" onchange="onInvoiceChange(this.value)"> <div>
{% for i in invoice_list %} <dl class="dl-horizontal">
<option value="{{ i.id }}" {% if i.id == invoice.id %} <dt>Invoice Month</dt>
selected {% endif %}>{{ i.start_date|date:"M Y" }}</option> <dd>
{% endfor %} <select id="invoice_select" onchange="onInvoiceChange(this.value)">
</select> {% for i in invoice_list %}
</dd> <option value="{{ i.id }}" {% if i.id == invoice.id %}
<dt>Invoice State</dt> selected {% endif %}>{{ i.start_date|date:"M Y" }}</option>
<dd>{{ invoice.state_text }}</dd> {% endfor %}
<dt>Subtotal</dt> </select>
<dd>{{ invoice.subtotal_money }}</dd> </dd>
{% if invoice.state != 1 %} <dt>Invoice State</dt>
<dt>Tax</dt> <dd>{{ invoice.state_text }}</dd>
<dd>{{ invoice.tax_money }}</dd> <dt>Subtotal</dt>
<dt>Total</dt> <dd>{{ invoice.subtotal_money }}</dd>
<dd>{{ invoice.total_money }}</dd> {% if invoice.state != 1 %}
{% endif %} <dt>Tax</dt>
</dl> <dd>{{ invoice.tax_money }}</dd>
</div> <dt>Total</dt>
<dd>{{ invoice.total_money }}</dd>
{% endif %}
</dl>
</div>
<div id="instance-cost"> <div id="instance-cost">
{{ instance_cost_table.render }} {{ instance_cost_table.render }}
</div> </div>
<div id="volume-cost"> <div id="volume-cost">
{{ volume_cost_table.render }} {{ volume_cost_table.render }}
</div> </div>
<div id="floating-ip-cost"> <div id="floating-ip-cost">
{{ floating_ip_cost_table.render }} {{ floating_ip_cost_table.render }}
</div> </div>
<div id="router-cost"> <div id="router-cost">
{{ router_cost_table.render }} {{ router_cost_table.render }}
</div> </div>
<div id="snapshot-cost"> <div id="snapshot-cost">
{{ snapshot_cost_table.render }} {{ snapshot_cost_table.render }}
</div> </div>
<div id="image-cost"> <div id="image-cost">
{{ image_cost_table.render }} {{ image_cost_table.render }}
</div>
</div> </div>
{% else %} {% else %}
<h1>Billing not enabled or you don't have any usage yet</h1> <br/> <h1>Billing not enabled or you don't have any usage yet</h1> <br/>
@ -51,10 +56,26 @@
{% endblock %} {% endblock %}
{% block js %} {% block js %}
{{ block.super }} {{ block.super }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript"> <script type="text/javascript">
function onInvoiceChange(val) { function onInvoiceChange(val) {
var search = "?invoice_id=" + val; var search = "?invoice_id=" + val;
window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + search; window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + search;
} }
function downloadPdf() {
let opt = {
filename: 'usage_cost.pdf',
margin: [16, 16],
enableLinks: true,
image: {type: 'jpeg', quality: 0.98},
pagebreak: { mode: 'avoid-all', },
jsPDF: {unit: 'mm', format: 'a4', orientation: 'portrait'},
}
html2pdf().set(opt).from(document.getElementById('usage_cost')).save();
}
</script> </script>
{% endblock %} {% endblock %}