Change tickets to use Ajax over Template Syntax
The tickets are now loaded dynamically using ajax, instead of when the page loads using django template syntax. This allows for dynamic reloading.
This commit is contained in:
parent
278d990bd0
commit
46fb0580b9
@ -13,7 +13,10 @@ urlpatterns = [
|
||||
path('tickets/', include([
|
||||
path('', views.tickets, name="tickets"),
|
||||
path('new/', views.new_ticket, name="ticket-new"),
|
||||
path('get/', views.get_ticket, name="ticket-get"),
|
||||
path('get/', include([
|
||||
path('one/', views.get_ticket, name="ticket-getone"),
|
||||
path('many/', views.get_tickets, name="ticket-getmany"),
|
||||
])),
|
||||
])),
|
||||
|
||||
# Matches any html file
|
||||
|
||||
@ -48,13 +48,20 @@ def get_ticket(request):
|
||||
|
||||
@login_required
|
||||
@require_POST
|
||||
def get_tickets(request, filters: dict):
|
||||
pass
|
||||
def get_tickets(request):
|
||||
|
||||
filters = dict(request.POST.get("filters", {}))
|
||||
|
||||
tickets = Ticket.objects.filter(**filters).order_by("-create_timestamp")
|
||||
data = {"tickets": [ticket.serialize() for ticket in tickets]}
|
||||
|
||||
return JsonResponse(data)
|
||||
|
||||
|
||||
@login_required()
|
||||
@require_POST
|
||||
def new_ticket(request):
|
||||
return render(request, "home/newticket.html")
|
||||
return JsonResponse({"placeholder": "nothing here yet"})
|
||||
|
||||
|
||||
@login_required()
|
||||
|
||||
@ -203,15 +203,11 @@
|
||||
<input type="text" class="form-control m-0 bdw-0 pY-15 pX-20 bdrs-0" placeholder="Search...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 fxg-1 scrollable pos-r">
|
||||
{% for ticket in tickets %}
|
||||
<div id="ticketsContainer" class="layer w-100 fxg-1 scrollable pos-r">
|
||||
<!-- {% for ticket in tickets %}
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p" data-ticket-id="{{ ticket.id }}" data-author-icon="{{ ticket.author.icon.url }}">
|
||||
<div class="peer mR-10">
|
||||
<img src="{{ ticket.author.icon.url }}" alt="" class="w-2r bdrs-50p me-2">
|
||||
<!-- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
@ -235,7 +231,7 @@
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b ticket-desc">{{ ticket.description|safe }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %} -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-content h-100">
|
||||
@ -350,7 +346,7 @@
|
||||
|
||||
<div id="ticketModal" class="modal fade" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<form method="post">
|
||||
<form method="post" action="{% url 'ticket-new' %}">
|
||||
|
||||
{% csrf_token %}
|
||||
|
||||
@ -412,14 +408,81 @@
|
||||
});
|
||||
|
||||
ClassicEditor
|
||||
.create( document.getElementById("newDesc"), {
|
||||
|
||||
})
|
||||
.create( document.getElementById("newDesc"), {})
|
||||
.catch( error => {
|
||||
console.error(error)
|
||||
});
|
||||
|
||||
loadAllTickets();
|
||||
});
|
||||
|
||||
function loadAllTickets() {
|
||||
$("#ticketsContainer").empty();
|
||||
|
||||
$.ajax({
|
||||
url: "{% url 'ticket-getmany' %}",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
data: {
|
||||
csrfmiddlewaretoken: "{{ csrf_token }}",
|
||||
filters: {}
|
||||
},
|
||||
success: function(data) {
|
||||
console.log(JSON.stringify(data, null, 4))
|
||||
|
||||
data.tickets.forEach(function(ticket) {
|
||||
var timestamp = new Date(ticket.timestamp);
|
||||
var formattedTime;
|
||||
|
||||
if (ticket.is_older_than_day) {
|
||||
var options = { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' };
|
||||
formattedTime = timestamp.toLocaleDateString('en-GB', options);
|
||||
}
|
||||
else {
|
||||
var hours = timestamp.getUTCHours();
|
||||
var minutes = timestamp.getUTCMinutes();
|
||||
formattedTime = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
|
||||
}
|
||||
|
||||
if (ticket.is_edited) {
|
||||
formattedTime += " • edited";
|
||||
}
|
||||
|
||||
var item = $(`
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p" data-ticket-id="${ticket.id}" data-author-icon="${ticket.author.icon}">
|
||||
<div class="peer mR-10">
|
||||
<img src="${ticket.author.icon}" alt="" class="w-2r bdrs-50p me-2">
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6 class="ticket-author">${ticket.author.forename} ${ticket.author.surname}</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small class="ticket-timestamp">${formattedTime}</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900 ticket-title">${ticket.title}</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b ticket-desc">${ticket.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
|
||||
$("#ticketsContainer").append(item);
|
||||
});
|
||||
|
||||
$(".email-list-item").on("click", function() {
|
||||
displayTicket(this);
|
||||
});
|
||||
},
|
||||
error: function(data) {
|
||||
alert(JSON.stringify(data, null, 4))
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function displayTicket(ticketElement) {
|
||||
ticket = $(ticketElement);
|
||||
ticketID = ticket.data("ticket-id");
|
||||
@ -447,7 +510,7 @@
|
||||
displayedTicketID = ticketID;
|
||||
|
||||
$.ajax({
|
||||
url: `/tickets/get/`,
|
||||
url: `{% url 'ticket-getone' %}`,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user