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

Commenting & segmenting into functions

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-01-23 12:10:42 +00:00
parent 6effc6799e
commit 7c00552714
1 changed files with 91 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
apps/static/js/tickets.js
View File

@ -231,6 +231,13 @@ $("#strictTags").on("change", function() {
loadTicketItems();
});
/**
* Loads the list of ticket items using the current filters.
*
* @function loadTicketItems
* @param {Number} page For pagination, an invalid page will result in an error.
*/
function loadTicketItems(page=1) {
if (global_loadingTickets) {
@ -278,43 +285,7 @@ function loadTicketItems(page=1) {
// Iterate over and handle each ticket
response.results.forEach(function(ticket) {
// Create a copy of the template using the ticket data
var template = $($("#ticketItemTemplate").html());
template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
template.find(".ticket-item-datetime").text(ticket.display_datetime);
template.find(".ticket-item-title").text(ticket.title);
template.find(".ticket-item-desc").html(ticket.short_description);
template.find(".ticket-item-icon").attr("src", ticket.author.icon);
template.attr("data-uuid", ticket.uuid);
// Add tickets using the badge template
ticket.tags.forEach(function(tag) {
var tagTemplate = $($("#ticketContentBadgeTemplate").html());
tagTemplate.find(".ticket-content-badge-text").text(tag.title);
tagTemplate.css({ "color": tag.colour, "background-color": tag.backgroundcolour });
template.find(".ticket-item-tags").append(tagTemplate);
});
var priorityElem = template.find(".ticket-item-priority");
priorityElem.css("color", ticket.priority.colour);
priorityElem.css("background-color", ticket.priority.backgroundcolour);
priorityElem.attr("data-bs-title", ticket.priority.title + " Priority");
priorityElem.tooltip();
var departmentElem = template.find(".ticket-item-department");
if (ticket.author.department === null) {
departmentElem.hide();
}
else {
departmentElem.css("color", ticket.author.department.colour);
departmentElem.css("background-color", ticket.author.department.backgroundcolour);
departmentElem.attr("data-bs-title", ticket.author.department.title + " Department");
departmentElem.tooltip();
}
// Add the content to the interface
$("#ticketsContainer .content").append(template);
$("#ticketsContainer .content").append(createTicketItem(ticket));
});
// Make tickets clickable
@ -325,6 +296,62 @@ function loadTicketItems(page=1) {
});
}
/**
* Returns a jquery object representing an element for a ticket item, constructed using the passed
* ticket and a predefined template.
*
* @function createTicketItem
* @param {Object} ticket An object representing a ticket.
* @return {jQuery} ticketElement to be appeneded as content.
*/
function createTicketItem(ticket) {
// Create a copy of the template using the ticket data
var template = $($("#ticketItemTemplate").html());
template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
template.find(".ticket-item-datetime").text(ticket.display_datetime);
template.find(".ticket-item-title").text(ticket.title);
template.find(".ticket-item-desc").html(ticket.short_description);
template.find(".ticket-item-icon").attr("src", ticket.author.icon);
template.attr("data-uuid", ticket.uuid);
// Add tickets using the badge template
ticket.tags.forEach(function(tag) {
var tagTemplate = $($("#ticketContentBadgeTemplate").html());
tagTemplate.find(".ticket-content-badge-text").text(tag.title);
tagTemplate.css({ "color": tag.colour, "background-color": tag.backgroundcolour });
template.find(".ticket-item-tags").append(tagTemplate);
});
const priority = ticket.priority;
var priorityElem = template.find(".ticket-item-priority");
priorityElem.css("color", priority.colour);
priorityElem.css("background-color", priority.backgroundcolour);
priorityElem.attr("data-bs-title", priority.title + " Priority");
priorityElem.tooltip();
const department = ticket.author.department;
var departmentElem = template.find(".ticket-item-department");
if (department === null) {
departmentElem.hide();
}
else {
departmentElem.css("color", ticket.author.department.colour);
departmentElem.css("background-color", ticket.author.department.backgroundcolour);
departmentElem.attr("data-bs-title", ticket.author.department.title + " Department");
departmentElem.tooltip();
}
return template;
}
/**
* Load the content of a selected ticket.
*
* @function loadTicketContent
* @param {String} uuid A string representation of the ticket's UUID.
*/
function loadTicketContent(uuid) {
updateContentState("loading");
@ -338,32 +365,38 @@ function loadTicketContent(uuid) {
fetchTicketsPromise({uuid: uuid}).then((response) => {
ticket = response.results[0];
// Create a copy of the template using the ticket data
var template = $($("#ticketContentTemplate").html());
template.find(".ticket-content-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
template.find(".ticket-content-datetime").text(ticket.display_datetime);
template.find(".ticket-content-title").text(ticket.title);
template.find(".ticket-content-desc").html(ticket.description);
template.find(".ticket-content-icon").attr("src", ticket.author.icon);
console.debug(ticket.description);
ticket.tags.forEach(function(tag) {
var tagTemplate = $($("#ticketContentBadgeTemplate").html());
tagTemplate.find(".ticket-content-badge-text").text(tag.title);
tagTemplate.css({ "color": tag.colour, "background-color": tag.backgroundcolour });
template.find(".ticket-content-badges").append(tagTemplate);
});
$("#ticketContent .content").append(template);
$("#ticketContent .content").append(createTicketContent(ticket));
updateContentState("content");
global_loadingTickets = false;
});
}
// $("#ticketContent").empty();
/**
* Returns a jquery object representing an element for a ticket content, constructed using the
* passed ticket and a predefined template.
*
* @function createTicketItem
* @param {Object} ticket An object representing a ticket.
* @return {jQuery} ticketElement to be shown as content.
*/
function createTicketContent(ticket) {
// Create a copy of the template using the ticket data
var template = $($("#ticketContentTemplate").html());
template.find(".ticket-content-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
template.find(".ticket-content-datetime").text(ticket.display_datetime);
template.find(".ticket-content-title").text(ticket.title);
template.find(".ticket-content-desc").html(ticket.description);
template.find(".ticket-content-icon").attr("src", ticket.author.icon);
console.debug(ticket.description);
// updateInterfaceState("showing-content");
ticket.tags.forEach(function(tag) {
var tagTemplate = $($("#ticketContentBadgeTemplate").html());
tagTemplate.find(".ticket-content-badge-text").text(tag.title);
tagTemplate.css({ "color": tag.colour, "background-color": tag.backgroundcolour });
template.find(".ticket-content-badges").append(tagTemplate);
});
return template;
}
function fetchTicketsPromise(queryFilters) {