corbz/ticket-website
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Ticket Navigation Buttons

Browse Source 
Added buttons to move to the next or prev ticket from the current selected ticket.

Also segmented JS into functions.
This commit is contained in:
Corban-Lee Jones 2024-01-16 13:34:13 +00:00
parent 3ef8cd20d0
commit eb2ae9ce6b
2 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
apps/static/assets/js/tickets.js
View File

@ -172,6 +172,20 @@ function loadFilterCounts() {
});
}
function timestampToHumanDate(timestamp, wasYesterday) {
if (wasYesterday) {
var day = getOrdinalSuffix(timestamp.getDate());
var month = timestamp.toLocaleString('en-GB', { month: 'short' });
var year = timestamp.toLocaleString('en-GB', { year: 'numeric' });
var time = timestamp.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric' });
return time + ', ' + day + ' ' + month + ' ' + year;
}
var hours = timestamp.getUTCHours();
var minutes = timestamp.getUTCMinutes();
return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
}
function loadAllTickets() {
if (loadingTickets === true) {
return;
@ -201,22 +215,7 @@ function loadAllTickets() {
data.forEach(function(ticket) {
var timestamp = new Date(ticket.timestamp);
var formattedTime;
if (ticket.was_yesterday) {
var day = getOrdinalSuffix(timestamp.getDate());
var month = timestamp.toLocaleString('en-GB', { month: 'short' });
var year = timestamp.toLocaleString('en-GB', { year: 'numeric' });
var time = timestamp.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric' });
// Formatting the final result
var formattedTime = time + ', ' + day + ' ' + month + ' ' + year;
}
else {
var hours = timestamp.getUTCHours();
var minutes = timestamp.getUTCMinutes();
formattedTime = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
}
var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
if (ticket.is_edited) {
formattedTime += " • edited";
@ -246,11 +245,7 @@ function loadAllTickets() {
$("#ticketsContainer .content").append(item);
});
$(".email-list-item").on("click", function(e) {
e.preventDefault();
displayTicket(this);
$('.email-content').toggleClass('open');
});
applyTicketClickFunction();
},
error: function(data) {
loadingTickets = false;
@ -260,6 +255,38 @@ function loadAllTickets() {
});
}
function applyTicketClickFunction() {
$(".email-list-item").on("click", function(e) {
e.preventDefault();
displayTicket(this);
$('.email-content').toggleClass('open');
});
}
function reloadCurrentTicket() {
displayTicket($(".email-list-item.bgc-grey-100"));
}
function changeTicket(next=true) {
var selectedTicket = $(".email-list-item.bgc-grey-100");
if (!selectedTicket.length) {
displayTicket($(".email-list-item").first());
return;
}
if (next) {
displayTicket(selectedTicket.next());
}
else {
displayTicket(selectedTicket.prev());
}
if (!$('.email-content').hasClass('open')) {
$('.email-content').addClass('open');
}
}
function displayTicket(ticketElement) {
ticket = $(ticketElement);
ticketID = ticket.data("ticket-id");
@ -326,17 +353,7 @@ function displayTicket(ticketElement) {
// timestamp
var timestamp = new Date(ticket.timestamp);
var formattedTime;
if (ticket.was_yesterday) {
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');
}
var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
if (ticket.is_edited) {
formattedTime += " • edited";

14
apps/templates/home/tickets.html
View File

@ -138,14 +138,14 @@
</div>
<div class="peer">
<!-- <div class="btn-group" role="group">
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
<div class="btn-group" role="group">
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(false);">
<i class="ti-angle-left"></i>
</button>
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(true);">
<i class="ti-angle-right"></i>
</button>
</div> -->
</div>
</div>
</div>
</div>
@ -193,7 +193,7 @@
<button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
<i class="ti-angle-left"></i>
</button>
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:loadAllTickets();">
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:reloadCurrentTicket();">
<i class="fa fa-refresh"></i>
</button>
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
@ -203,10 +203,10 @@
</div>
<div class="peer">
<div class="btn-group" role="group">
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(false);">
<i class="ti-angle-left"></i>
</button>
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(true);">
<i class="ti-angle-right"></i>
</button>
</div>