forked from uncloud/uncloud
145 lines
6.4 KiB
HTML
145 lines
6.4 KiB
HTML
{% extends "nextcloud/base.html" %}
|
|
|
|
{% load static i18n compress %}
|
|
|
|
{% block title %} Payments {% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Content -->
|
|
{% csrf_token %}
|
|
<div class="row p-1 mt-4">
|
|
<div class="col-lg-12 bg-white shadow-sm border border-light rounded py-4 mb-4">
|
|
<h3 class="text-5 font-weight-400 d-flex align-items-center px-1 mb-4">{% trans "Orders"%}</h3>
|
|
<!-- Title
|
|
=============================== -->
|
|
<div class="transaction-title py-2 px-1">
|
|
<div class="row">
|
|
<div class="col-1 col-sm-1 text-center"><span class="">{% trans "ID"%}</span></div>
|
|
<div class="col-2 col-sm-2 text-center"><span class="">{% trans "Date"%}</span></div>
|
|
<div class="col-3 col-sm-3">{% trans "Description" %}</div>
|
|
<div class="col-1 col-sm-1 d-none d-sm-block text-center">{% trans "OneTime Price"%}</div>
|
|
<div class="col-1 col-sm-1 text-right">{% trans "Recurring Price"%}</div>
|
|
<div class="col-1 col-sm-1 text-center"><span class="">{% trans "Currency"%}</span></div>
|
|
<div class="col-2 col-sm-2 text-center">{% trans "End Date"%}</div>
|
|
<div class="col-1 col-sm-1 text-center" >{% trans "Active"%}</div>
|
|
</div>
|
|
</div>
|
|
<!-- Title End -->
|
|
|
|
<!-- Transaction List
|
|
=============================== -->
|
|
<div class="transaction-list">
|
|
{% for order in object_list %}
|
|
<div class="transaction-item px-1 py-4" data-id={{order.id}}>
|
|
<div class="row align-items-center flex-row">
|
|
<div class="col-1 col-sm-1 text-center"> <span class="d-block text-3 font-weight-400">#{{order.id}}</span></div>
|
|
<div class="col-2 col-sm-2 text-center"> <span class="d-block text-3 font-weight-300">{{order.starting_date|date:"Y-m-d"}}</span></div>
|
|
<div class="col-3 col-sm-3"> <span class="d-block text-muted text-3">{{order.description}}</span></div>
|
|
<div class="col-1 col-sm-1 d-none d-sm-block text-right text-2"> <span class=" text-uppercase">{{order.one_time_price}}</span> </div>
|
|
<div class="col-1 col-sm-1 d-none d-sm-block text-right text-2"> <span class=" text-uppercase">{{order.recurring_price}}</span> </div>
|
|
<div class="col-1 col-sm-1 text-center text-2"><span class="">{{order.currency}}</span></div>
|
|
<div class="col-2 col-sm-2 d-none d-sm-block text-center text-2"> <span class=" text-uppercase">{{order.ending_date|date:"Y-m-d"}}</span> </div>
|
|
<div class="col-1 col-sm-1 text-center">
|
|
{% if order.is_closed %}
|
|
<span class="text-danger" data-toggle="tooltip" data-original-title="Closed"><i class="text-danger fas fa-times-circle"></i></span>
|
|
{% else %}
|
|
<span class="text-success" data-toggle="tooltip" data-original-title="Active"><i class="fas fa-check-circle"></i></span>
|
|
{% endif %}
|
|
<!-- <span class="float-right" data-toggle="tooltip" data-original-title="See Details"><i class="fas fa-bars"></i></span> -->
|
|
</div>
|
|
</div>
|
|
{% if not order.ending_date %}
|
|
<a href="#" class="cancel-subscription float-right text-1">{% trans "Cancel Subscription"%}</a>
|
|
{% endif %}
|
|
</div>
|
|
{%endfor%}
|
|
</div>
|
|
<!-- Transaction List End -->
|
|
|
|
<!-- Pagination will handled later
|
|
============================================= -->
|
|
<ul class="pagination justify-content-center mt-4 mb-0" style="display: none;">
|
|
<li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1"><i class="fas fa-angle-left"></i></a> </li>
|
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item d-flex align-content-center flex-wrap text-muted text-5 mx-1">......</li>
|
|
<li class="page-item"><a class="page-link" href="#">15</a></li>
|
|
<li class="page-item"> <a class="page-link" href="#"><i class="fas fa-angle-right"></i></a> </li>
|
|
</ul>
|
|
<!-- Paginations end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="modal fade"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="mySmallModalLabel"
|
|
aria-hidden="true"
|
|
id="mi-modal"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel">{% trans "Cancel Subscription"%}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
{% trans "Are you sure that you want to cancel this subscription?."%} </p>
|
|
<p>
|
|
{% blocktrans %} The instance will be active till the end date of the last bill and will be deleted
|
|
after that. {% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" id="modal-btn-yes">
|
|
{% trans "Yes Cancel" %}
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="modal-btn-no">
|
|
{% trans "Close" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert" role="alert" id="result"></div>
|
|
<!-- /.banner -->
|
|
{% endblock %}
|
|
|
|
{% block js_extra %}
|
|
<script type="text/javascript">
|
|
var modalConfirm = function (callback) {
|
|
$(".cancel-subscription").on("click", function (event) {
|
|
$('.selected').removeClass('selected');
|
|
$(event.target).parent().addClass('selected');
|
|
$("#mi-modal").modal("show");
|
|
});
|
|
|
|
$("#modal-btn-yes").on("click", function () {
|
|
callback(true);
|
|
});
|
|
|
|
$("#modal-btn-no").on("click", function () {
|
|
callback(false);
|
|
$("#mi-modal").modal("hide");
|
|
});
|
|
};
|
|
|
|
modalConfirm(function (confirm) {
|
|
if (confirm) {
|
|
var selected_order = $('.selected').data('id');
|
|
$.ajax({
|
|
url: '{% url "nextcloud:orders" %}',
|
|
type: 'POST',
|
|
data: {'order_id': selected_order, 'csrfmiddlewaretoken': '{{ csrf_token }}',},
|
|
success: function (data) {
|
|
$("#mi-modal").modal("hide");
|
|
window.location.reload();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|