diff --git a/apps/static/css/index.css b/apps/static/css/index.css
index f8a9ece..804c10c 100644
--- a/apps/static/css/index.css
+++ b/apps/static/css/index.css
@@ -99,4 +99,18 @@ body {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-}
\ No newline at end of file
+}
+
+
+/* Ticket Content */
+
+.ticket-content .ticket-content-icon {
+ border-radius: 50%;
+ width: 3rem;
+ height: 3rem;
+ object-fit: cover;
+}
+
+.ticket-content .ticket-content.author {
+ margin-bottom: 5px;
+}
diff --git a/apps/static/js/_tickets.js b/apps/static/js/_tickets.js
new file mode 100644
index 0000000..7f39196
--- /dev/null
+++ b/apps/static/js/_tickets.js
@@ -0,0 +1,373 @@
+var displayedTicketID = -1;
+ filters = {"ordering": "-edit_timestamp", "page_size": 100};
+ editor = null;
+ searchTimeout = null;
+ loadingTickets = false;
+
+const formControls = [
+ {
+ id: "newTitle",
+ validation: function(element) {
+ const value = element.val();
+ return (!element.attr("required") || value.trim() !== "")
+ },
+ errorMessage: function(element) {
+ return "This field is required."
+ }
+ }
+];
+
+$(document).ready(function() {
+ ClassicEditor
+ .create( document.getElementById("newDesc"), {})
+ .then( newEditor => {
+ editor = newEditor;
+ })
+ .catch( error => {
+ console.error(error)
+ });
+
+ $("#searchTickets").keyup(() => {
+ $("#ticketsContainer .content").empty();
+ $("#ticketsContainer .none-found").hide();
+ $("#ticketsContainer .loading").show();
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(() => {
+ console.debug("searching");
+ value = $("#searchTickets").val();
+ if (value === "") {
+ console.debug("deleted search filters");
+ delete filters["search"];
+ }
+ else {
+ console.debug("updated search filters");
+ filters["search"] = value;
+ }
+
+ loadAllTickets();
+ }, 500);
+ })
+
+ setupFilter("#filterSidebar .filter-department", "author__department");
+ setupFilter("#filterSidebar .filter-tags", "tags");
+ setupFilter("#filterSidebar .filter-priority", "priority");
+
+ loadFilterCounts();
+ loadAllTickets();
+
+ $(".select2-selection__choice").each(function() {
+ // Work out how to apply the colours of the tags to the selection choices.
+ })
+});
+
+function setupFilter(selector, key) {
+ $(selector).each(function () {
+ var input = $(this).find("input[type=checkbox], input[type=radio]");
+ var uuid = input.val();
+
+ input.on("change", function () {
+
+ if (input.is(":checkbox")) {
+
+ if ($(this).is(":checked")) {
+ filters[key] = filters[key] || [];
+ filters[key].push(uuid);
+ }
+ else {
+ filters[key] = filters[key].filter(id => id !== uuid);
+ if (filters[key].length === 0) {
+ delete filters[key];
+ }
+ }
+ }
+ else if (input.is(":radio") && input.is(":checked")) {
+ if (uuid === "all") {
+ delete filters[key];
+ }
+ else {
+ filters[key] = [uuid];
+ }
+ }
+
+ console.debug(`Filter applied '${key}' as '${uuid}'`)
+ loadAllTickets();
+ });
+ });
+}
+
+function validateForm() {
+
+ $("#ticketModal form").find(".form-control,.form-select").removeClass("is-valid is-invalid");
+ $("#ticketModal form .invalid-feedback").text("");
+
+ var valid = true;
+
+ formControls.forEach(function(control) {
+ var element = $("#" + control.id);
+ if (!control.validation(element)) {
+ element.addClass("is-invalid");
+ element.siblings(".invalid-feedback").text(control.errorMessage(element));
+ valid = false;
+ }
+ else {
+ element.addClass("is-valid");
+ }
+ });
+
+ return valid;
+}
+
+$("#ticketModal form").on("submit", function(event) {
+ event.preventDefault();
+
+ if (!validateForm()) {
+ return;
+ }
+
+ $.ajax({
+ url: URL_NewTicket,
+ type: "POST",
+ dataType: "json",
+ data: {
+ csrfmiddlewaretoken: CSRFMiddlewareToken,
+ title: $("#newTitle").val(),
+ description: editor.getData(),
+ author_id: CurrentUserID,
+ priority_id: $("#newPriority").val(),
+ tag_ids: $("#newTags").val()
+ },
+ success: function(data) {
+ loadAllTickets();
+ loadFilterCounts();
+ },
+ error: function(data) {
+ alert(JSON.stringify(data, null, 4))
+ }
+ });
+});
+
+function getOrdinalSuffix(day) {
+ if (day >= 11 && day <= 13) {
+ return day + 'th';
+ } else {
+ switch (day % 10) {
+ case 1: return day + 'st';
+ case 2: return day + 'nd';
+ case 3: return day + 'rd';
+ default: return day + 'th';
+ }
+ }
+}
+
+function updateFilterCounts(filterType, data) {
+ $("#filterSidebar .filter-" + filterType).each(function() {
+ var uuid = $(this).find("input[type=checkbox],input[type=radio]").val();
+ var count = data[filterType][uuid];
+ $(this).find(".badge").text(count);
+ });
+}
+
+function loadFilterCounts() {
+ $.ajax({
+ url: URL_FilterCounts,
+ type: "GET",
+ success: function(data) {
+ updateFilterCounts('priority', data);
+ updateFilterCounts('tags', data);
+ updateFilterCounts('department', data);
+
+ $("#filterPriorityAll .badge").text(data.tickets);
+ $("#filterDepartmentAll .badge").text(data.tickets)
+ $("#ticketCounts .total").text(data.tickets)
+ },
+ error: function(data) {
+ console.error(JSON.stringify(data, null, 4))
+ }
+ });
+}
+
+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;
+ }
+
+ $("#ticketsContainer .content").empty();
+ $("#ticketsContainer .none-found").hide();
+ $("#ticketsContainer .loading").show();
+
+ loadingTickets = true;
+ // alert(JSON.stringify(filters, null, 4));
+
+ $.ajax({
+ url: URL_Tickets,
+ type: "GET",
+ dataType: "json",
+ data: $.param(filters, true),
+ success: function(data) {
+ loadingTickets = false;
+ // console.log(JSON.stringify(data, null, 4))
+
+ $("#ticketCounts .current").text(data.results.length);
+ $("#ticketsContainer .loading").hide();
+
+ if (data.results.length === 0) $("#ticketsContainer .none-found").show();
+ else $("#ticketsContainer .none-found").hide();
+
+ data.results.forEach(function(ticket) {
+ var timestamp = new Date(ticket.timestamp);
+ var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
+
+ if (ticket.is_edited) {
+ formattedTime += " • edited";
+ }
+
+ var template = $($("#ticketItemTemplate").html());
+ template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
+ template.find(".ticket-item-datetime").text(formattedTime);
+ template.find(".ticket-item-title").text(ticket.title);
+ template.find(".ticket-item-desc").text(ticket.description);
+ template.find(".ticket-item-icon").attr("src", ticket.author.icon);
+ template.attr("data-uuid", ticket.uuid);
+
+ $("#ticketsContainer .content").append(template);
+ });
+
+ applyTicketClickFunction();
+ },
+ error: function(data) {
+ loadingTickets = false;
+ $("#ticketsContainer .content").empty();
+ $("#ticketsContainer .none-found").hide();
+ $("#ticketsContainer .loading").hide();
+
+ if (data.status === 429) {
+ alert(`HTTP ${data.status} - ${data.statusText}\n${data.responseJSON.detail}`)
+ }
+ }
+ });
+}
+
+function applyTicketClickFunction() {
+ $(".ticket-item").on("click", function(e) {
+ e.preventDefault();
+ displayTicket(this);
+ $('.email-app').removeClass('side-active');
+ $('.email-content').toggleClass('open');
+ });
+}
+
+function reloadCurrentTicket() {
+ displayTicket($(".ticket-item.bgc-grey-100"));
+}
+
+function changeTicket(next=true) {
+ var selectedTicket = $(".ticket-item.bgc-grey-100");
+
+ if (!selectedTicket.length) {
+ displayTicket($(".ticket-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("uuid");
+
+ // $(".back-to-mailbox").off("click").on("click", function(event) {
+ // event.preventDefault();
+ // $('.email-content').toggleClass('open');
+ // displayTicket(ticketElement);
+ // });
+
+
+ if (displayedTicketID === ticketID) {
+ // displayedTicketID = -1;
+ return;
+ }
+
+ ticket.siblings().removeClass("bgc-grey-100");
+ ticket.addClass("bgc-grey-100");
+
+ $("#ticketTitle").text("")
+ $("#ticketDesc").empty();
+ $("#ticketAuthor").text("");
+ $("#ticketAuthorImg").hide();
+ $("#ticketAuthorImg").prop("src", "");
+ $("#ticketTimestamp").text("");
+ $("#btnGroupDrop2").hide();
+ $("#ticketBadges").empty().hide();
+
+
+ displayedTicketID = ticketID;
+
+ $.ajax({
+ url: URL_Tickets,
+ type: 'get',
+ dataType: 'json',
+ data: $.param({uuid: ticketID}, true),
+ success: function (data) {
+ console.log(JSON.stringify(data, null, 4));
+
+ var ticket = data.results[0];
+ var author = ticket.author;
+ var department = author.department;
+ var priority = ticket.priority;
+
+ $("#ticketTitle").text(ticket.title);
+ $("#ticketDesc").append($(`${ticket.description}
`));
+ $("#ticketAuthor").text(`${author.forename} ${author.surname}`);
+ $("#ticketAuthorImg").show();
+ $("#ticketAuthorImg").prop("src", author.icon);
+ $("#btnGroupDrop2").show();
+ $("#ticketBadges").show();
+
+ $("#ticketBadges").append($(`${priority.title} Priority
`));
+
+ if (department != null) {
+ $("#ticketBadges").append($(`${department.title}
`));
+ }
+
+ ticket.tags.forEach(function(tag) {
+ $("#ticketBadges").append($(`${tag.title}
`));
+ });
+
+ // timestamp
+ var timestamp = new Date(ticket.timestamp);
+ var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
+
+ if (ticket.is_edited) {
+ formattedTime += " • edited";
+ }
+
+ $("#ticketTimestamp").text(formattedTime);
+ },
+ error: function(message) {
+ alert(JSON.stringify(message, null, 4));
+ }
+ });
+}
\ No newline at end of file
diff --git a/apps/static/js/tickets.js b/apps/static/js/tickets.js
index 7f39196..e16d554 100644
--- a/apps/static/js/tickets.js
+++ b/apps/static/js/tickets.js
@@ -1,36 +1,44 @@
-var displayedTicketID = -1;
- filters = {"ordering": "-edit_timestamp", "page_size": 100};
- editor = null;
+var filters = {"order": "-edit_timestamp"};
+ global_loadingTickets = false;
searchTimeout = null;
- loadingTickets = false;
-
-const formControls = [
- {
- id: "newTitle",
- validation: function(element) {
- const value = element.val();
- return (!element.attr("required") || value.trim() !== "")
- },
- errorMessage: function(element) {
- return "This field is required."
- }
- }
-];
+ pagination = {};
$(document).ready(function() {
- ClassicEditor
- .create( document.getElementById("newDesc"), {})
- .then( newEditor => {
- editor = newEditor;
- })
- .catch( error => {
- console.error(error)
- });
+ initSearchBar();
+ setupFilter("#filterSidebar .filter-department", "author__department");
+ setupFilter("#filterSidebar .filter-tags", "tags");
+ setupFilter("#filterSidebar .filter-priority", "priority");
+
+ loadFilterCounts();
+ loadTicketItems();
+});
+
+function updateInterfaceState(state) {
+ console.debug(`updating interface state to '${state}'`);
+ switch (state) {
+ case "content":
+ $("#ticketsContainer .none-found").hide();
+ $("#ticketsContainer .loading").hide();
+ break;
+ case "loading":
+ $("#ticketsContainer .content").empty();
+ $("#ticketsContainer .none-found").hide();
+ $("#ticketsContainer .loading").show();
+ break;
+ case "no-content":
+ $("#ticketsContainer .content").empty();
+ $("#ticketsContainer .none-found").show();
+ $("#ticketsContainer .loading").hide();
+ break;
+ default:
+ throw new Error(`Invalid Interface State '${state}'`);
+ }
+}
+
+function initSearchBar() {
$("#searchTickets").keyup(() => {
- $("#ticketsContainer .content").empty();
- $("#ticketsContainer .none-found").hide();
- $("#ticketsContainer .loading").show();
+ updateInterfaceState("loading");
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
console.debug("searching");
@@ -44,21 +52,10 @@ $(document).ready(function() {
filters["search"] = value;
}
- loadAllTickets();
+ loadTicketItems();
}, 500);
})
-
- setupFilter("#filterSidebar .filter-department", "author__department");
- setupFilter("#filterSidebar .filter-tags", "tags");
- setupFilter("#filterSidebar .filter-priority", "priority");
-
- loadFilterCounts();
- loadAllTickets();
-
- $(".select2-selection__choice").each(function() {
- // Work out how to apply the colours of the tags to the selection choices.
- })
-});
+}
function setupFilter(selector, key) {
$(selector).each(function () {
@@ -66,86 +63,27 @@ function setupFilter(selector, key) {
var uuid = input.val();
input.on("change", function () {
-
if (input.is(":checkbox")) {
-
if ($(this).is(":checked")) {
filters[key] = filters[key] || [];
filters[key].push(uuid);
}
else {
filters[key] = filters[key].filter(id => id !== uuid);
- if (filters[key].length === 0) {
- delete filters[key];
- }
+ if (filters[key].length === 0) delete filters[key];
}
}
else if (input.is(":radio") && input.is(":checked")) {
- if (uuid === "all") {
- delete filters[key];
- }
- else {
- filters[key] = [uuid];
- }
+ if (uuid === "all") delete filters[key];
+ else filters[key] = [uuid];
}
console.debug(`Filter applied '${key}' as '${uuid}'`)
- loadAllTickets();
+ loadTicketItems();
});
});
}
-function validateForm() {
-
- $("#ticketModal form").find(".form-control,.form-select").removeClass("is-valid is-invalid");
- $("#ticketModal form .invalid-feedback").text("");
-
- var valid = true;
-
- formControls.forEach(function(control) {
- var element = $("#" + control.id);
- if (!control.validation(element)) {
- element.addClass("is-invalid");
- element.siblings(".invalid-feedback").text(control.errorMessage(element));
- valid = false;
- }
- else {
- element.addClass("is-valid");
- }
- });
-
- return valid;
-}
-
-$("#ticketModal form").on("submit", function(event) {
- event.preventDefault();
-
- if (!validateForm()) {
- return;
- }
-
- $.ajax({
- url: URL_NewTicket,
- type: "POST",
- dataType: "json",
- data: {
- csrfmiddlewaretoken: CSRFMiddlewareToken,
- title: $("#newTitle").val(),
- description: editor.getData(),
- author_id: CurrentUserID,
- priority_id: $("#newPriority").val(),
- tag_ids: $("#newTags").val()
- },
- success: function(data) {
- loadAllTickets();
- loadFilterCounts();
- },
- error: function(data) {
- alert(JSON.stringify(data, null, 4))
- }
- });
-});
-
function getOrdinalSuffix(day) {
if (day >= 11 && day <= 13) {
return day + 'th';
@@ -159,6 +97,20 @@ function getOrdinalSuffix(day) {
}
}
+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 updateFilterCounts(filterType, data) {
$("#filterSidebar .filter-" + filterType).each(function() {
var uuid = $(this).find("input[type=checkbox],input[type=radio]").val();
@@ -178,7 +130,7 @@ function loadFilterCounts() {
$("#filterPriorityAll .badge").text(data.tickets);
$("#filterDepartmentAll .badge").text(data.tickets)
- $("#ticketCounts .total").text(data.tickets)
+ // $("#ticketCounts .total").text(data.tickets)
},
error: function(data) {
console.error(JSON.stringify(data, null, 4))
@@ -186,107 +138,36 @@ 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;
- }
-
- $("#ticketsContainer .content").empty();
- $("#ticketsContainer .none-found").hide();
- $("#ticketsContainer .loading").show();
-
- loadingTickets = true;
- // alert(JSON.stringify(filters, null, 4));
-
- $.ajax({
- url: URL_Tickets,
- type: "GET",
- dataType: "json",
- data: $.param(filters, true),
- success: function(data) {
- loadingTickets = false;
- // console.log(JSON.stringify(data, null, 4))
-
- $("#ticketCounts .current").text(data.results.length);
- $("#ticketsContainer .loading").hide();
-
- if (data.results.length === 0) $("#ticketsContainer .none-found").show();
- else $("#ticketsContainer .none-found").hide();
-
- data.results.forEach(function(ticket) {
- var timestamp = new Date(ticket.timestamp);
- var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
-
- if (ticket.is_edited) {
- formattedTime += " • edited";
- }
-
- var template = $($("#ticketItemTemplate").html());
- template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
- template.find(".ticket-item-datetime").text(formattedTime);
- template.find(".ticket-item-title").text(ticket.title);
- template.find(".ticket-item-desc").text(ticket.description);
- template.find(".ticket-item-icon").attr("src", ticket.author.icon);
- template.attr("data-uuid", ticket.uuid);
-
- $("#ticketsContainer .content").append(template);
- });
-
- applyTicketClickFunction();
- },
- error: function(data) {
- loadingTickets = false;
- $("#ticketsContainer .content").empty();
- $("#ticketsContainer .none-found").hide();
- $("#ticketsContainer .loading").hide();
-
- if (data.status === 429) {
- alert(`HTTP ${data.status} - ${data.statusText}\n${data.responseJSON.detail}`)
- }
- }
- });
-}
-
function applyTicketClickFunction() {
$(".ticket-item").on("click", function(e) {
e.preventDefault();
- displayTicket(this);
+ loadTicketContent($(this).data("uuid"));
$('.email-app').removeClass('side-active');
$('.email-content').toggleClass('open');
});
}
function reloadCurrentTicket() {
- displayTicket($(".ticket-item.bgc-grey-100"));
+ loadTicketContent($(".ticket-item.bgc-grey-100").data("uuid"));
}
function changeTicket(next=true) {
var selectedTicket = $(".ticket-item.bgc-grey-100");
+ var uuid;
if (!selectedTicket.length) {
- displayTicket($(".ticket-item").first());
+ uuid = $(".ticket-item").first().data("uuid");
+ loadTicketContent(uuid);
return;
}
if (next) {
- displayTicket(selectedTicket.next());
+ uuid = selectedTicket.next().data("uuid");
+ loadTicketContent(uuid);
}
else {
- displayTicket(selectedTicket.prev());
+ uuid = selectedTicket.prev().data("uuid");
+ loadTicketContent(uuid);
}
if (!$('.email-content').hasClass('open')) {
@@ -294,80 +175,133 @@ function changeTicket(next=true) {
}
}
-function displayTicket(ticketElement) {
- ticket = $(ticketElement);
- ticketID = ticket.data("uuid");
+function changeItemsPage(next) {
+ $("#ticketItemsNextPage").prop("disabled", true);
+ $("#ticketItemsPrevPage").prop("disabled", true);
- // $(".back-to-mailbox").off("click").on("click", function(event) {
- // event.preventDefault();
- // $('.email-content').toggleClass('open');
- // displayTicket(ticketElement);
- // });
+ var page = pagination.page;
+
+ if (next && pagination.next) page ++;
+ else if (!next && pagination.prev) page --;
+ else return;
+
+ filters["page"] = page;
+ loadTicketItems();
+}
+
+function loadTicketItems() {
+ updateInterfaceState("loading");
+
+ fetchTicketsPromise(filters).then((response) => {
+ // Update the counts to show how many tickets were found
+ $("#ticketCounts .current").text(response.results.length);
+ $("#ticketCounts .total").text(response.count);
+ // If there are no tickets
+ if (!response.count) {
+ updateInterfaceState("no-content");
+ return;
+ }
+
+ const ticketHasNextPage = typeof response.next === "string";
+ const ticketHasPrevPage = typeof response.previous === "string";
+ $("#ticketItemsNextPage").prop("disabled", !ticketHasNextPage);
+ $("#ticketItemsPrevPage").prop("disabled", !ticketHasPrevPage);
+ const pageNumber = filters["page"] || 1;
+ pagination = {
+ "page": pageNumber,
+ "next": ticketHasNextPage,
+ "prev": ticketHasPrevPage
+ }
+
+ // Iterate over and handle each ticket
+ response.results.forEach(function(ticket) {
- if (displayedTicketID === ticketID) {
- // displayedTicketID = -1;
+ // Create a formatted version of the ticket's timestamp
+ const timestamp = new Date(ticket.timestamp);
+ var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
+
+ // Mark the ticket if it is edited
+ if (ticket.is_edited) formattedTime += " • edited";
+
+ // 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(formattedTime);
+ template.find(".ticket-item-title").text(ticket.title);
+ template.find(".ticket-item-desc").text(ticket.description);
+ template.find(".ticket-item-icon").attr("src", ticket.author.icon);
+ template.attr("data-uuid", ticket.uuid);
+
+ // Add the content to the interface
+ $("#ticketsContainer .content").append(template);
+ });
+
+ // Make tickets clickable
+ applyTicketClickFunction();
+
+ updateInterfaceState("content");
+ });
+}
+
+function loadTicketContent(uuid) {
+ // updateInterfaceState("loading-content");
+
+ if (global_loadingTickets) {
+ console.debug("Spam prevention\nStopped loadTicketContent because already loading.");
return;
}
- ticket.siblings().removeClass("bgc-grey-100");
- ticket.addClass("bgc-grey-100");
+ $("#ticketContent").empty();
- $("#ticketTitle").text("")
- $("#ticketDesc").empty();
- $("#ticketAuthor").text("");
- $("#ticketAuthorImg").hide();
- $("#ticketAuthorImg").prop("src", "");
- $("#ticketTimestamp").text("");
- $("#btnGroupDrop2").hide();
- $("#ticketBadges").empty().hide();
+ fetchTicketsPromise({uuid: uuid}).then((response) => {
+ ticket = response.results[0];
-
- displayedTicketID = ticketID;
+ // Create a formatted version of the ticket's timestamp
+ const timestamp = new Date(ticket.timestamp);
+ var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
- $.ajax({
- url: URL_Tickets,
- type: 'get',
- dataType: 'json',
- data: $.param({uuid: ticketID}, true),
- success: function (data) {
- console.log(JSON.stringify(data, null, 4));
+ // Mark the ticket if it is edited
+ if (ticket.is_edited) formattedTime += " • edited";
- var ticket = data.results[0];
- var author = ticket.author;
- var department = author.department;
- var priority = ticket.priority;
+ // 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(formattedTime);
+ template.find(".ticket-content-title").text(ticket.title);
+ template.find(".ticket-content-desc").text(ticket.description);
+ template.find(".ticket-content-icon").attr("src", ticket.author.icon);
- $("#ticketTitle").text(ticket.title);
- $("#ticketDesc").append($(`${ticket.description}
`));
- $("#ticketAuthor").text(`${author.forename} ${author.surname}`);
- $("#ticketAuthorImg").show();
- $("#ticketAuthorImg").prop("src", author.icon);
- $("#btnGroupDrop2").show();
- $("#ticketBadges").show();
+ $("#ticketContent").append(template);
+ });
- $("#ticketBadges").append($(`${priority.title} Priority
`));
+ // $("#ticketContent").empty();
- if (department != null) {
- $("#ticketBadges").append($(`${department.title}
`));
+ // updateInterfaceState("showing-content");
+}
+
+function fetchTicketsPromise(queryFilters) {
+ return new Promise(function(resolve, reject) {
+ global_loadingTickets = true;
+ $.ajax({
+ url: URL_Tickets,
+ type: "GET",
+ dataType: "JSON",
+ data: $.param(queryFilters, true),
+ success: function(response) {
+ global_loadingTickets = false;
+ resolve(response);
+ },
+ error: function(response) {
+ global_loadingTickets = false;
+ if (response.status === 429) {
+ alert(`
+ HTTP ${response.status} - ${response.statusText}\n
+ ${response.responseJSON.detail}
+ `);
+ }
+ reject(response);
}
-
- ticket.tags.forEach(function(tag) {
- $("#ticketBadges").append($(`${tag.title}
`));
- });
-
- // timestamp
- var timestamp = new Date(ticket.timestamp);
- var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
-
- if (ticket.is_edited) {
- formattedTime += " • edited";
- }
-
- $("#ticketTimestamp").text(formattedTime);
- },
- error: function(message) {
- alert(JSON.stringify(message, null, 4));
- }
+ });
});
}
\ No newline at end of file
diff --git a/apps/templates/home/tickets.html b/apps/templates/home/tickets.html
index 1ee9587..cbf2117 100644
--- a/apps/templates/home/tickets.html
+++ b/apps/templates/home/tickets.html
@@ -175,24 +175,23 @@
-
-
@@ -313,55 +312,7 @@
-
-
-
-
-
-
![]()
-
-
-
-
-
-
-
-
+