implemented tag and priority colour changes
This commit is contained in:
parent
c85c1324fd
commit
f49e7e7702
@ -27,42 +27,55 @@
|
||||
</li>
|
||||
|
||||
{% if priorities %}
|
||||
<li class="nav-item ps-3 mT-15">
|
||||
<li class="nav-item px-3 mt-3">
|
||||
<h6 class="small">Priority</h6>
|
||||
{% for priority in priorities %}
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="priority-{{ priority.id }}" class="form-check-input">
|
||||
<label for="priority-{{ priority.id }}" class="form-check-label">{{ priority.title }}</label>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" id="priority-{{ priority.id }}" class="form-check-input me-3">
|
||||
<label for="priority-{{ priority.id }}" class="form-check-label">
|
||||
<span class="badge rounded-pill" style="color: {{ priority.colour }}; background-color: {{ priority.backgroundcolour }};">
|
||||
{{ priority.title }}
|
||||
<i class="ti-control-record ms-auto"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if departments %}
|
||||
<li class="nav-item ps-3 mT-15">
|
||||
<li class="nav-item px-3 mt-3">
|
||||
<h6 class="small">Department</h6>
|
||||
{% for department in departments %}
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="department-{{ department.id }}" class="form-check-input">
|
||||
<label for="department-{{ department.id }}" class="form-check-label">{{ department.title }}</label>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" id="department-{{ department.id }}" class="form-check-input me-2">
|
||||
<label for="department-{{ department.id }}" class="form-check-label d-flex jc-sb">
|
||||
{{ department.title }}
|
||||
<i class="{{ department.icon }} ms-auto"></i>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if tags %}
|
||||
<li class="nav-item ps-3 mT-15">
|
||||
<li class="nav-item px-3 mt-3">
|
||||
<h6 class="small">Tags</h6>
|
||||
{% for tag in tags %}
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="tag-{{ tag.id }}" class="form-check-input">
|
||||
<label for="tag-{{ tag.id }}" class="form-check-label">{{ tag.title }}</label>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" id="tag-{{ tag.id }}" class="form-check-input me-3">
|
||||
<label for="tag-{{ tag.id }}" class="form-check-label">
|
||||
<span class="badge rounded-pill" style="color: {{ tag.colour }}; background-color: {{ tag.backgroundcolour }};">
|
||||
{{ tag.title }}
|
||||
<i class="ti-tag ms-auto"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- <li class="nav-item mt-5">
|
||||
<!--
|
||||
<li class="nav-item mt-5">
|
||||
<a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
@ -74,8 +87,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
</li> -->
|
||||
<!--<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
@ -203,36 +216,9 @@
|
||||
<input type="text" class="form-control m-0 bdw-0 pY-15 pX-20 bdrs-0" placeholder="Search...">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6 class="ticket-author mb-0">{{ ticket.author.fullname }}</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small class="ticket-timestamp">
|
||||
{% if ticket.is_older_than_day %}
|
||||
{{ ticket.timestamp|date:"D, w M Y" }}
|
||||
{% else %}
|
||||
{{ ticket.timestamp|date:"H:i" }}
|
||||
{% endif %}
|
||||
</small>
|
||||
{% if ticket.is_edited %}
|
||||
<small>• edited</small>
|
||||
{% endif %}
|
||||
</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|safe }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %} -->
|
||||
</div>
|
||||
|
||||
<div id="ticketsContainer" class="layer w-100 fxg-1 scrollable pos-r"></div>
|
||||
|
||||
</div>
|
||||
<div class="email-content h-100">
|
||||
<div class="h-100 scrollable pos-r">
|
||||
@ -291,7 +277,7 @@
|
||||
<div class="peers ai-c jc-sb pX-40 pY-30">
|
||||
<div class="peers peer-greed">
|
||||
<div class="peer mR-20">
|
||||
<img id="ticketAuthorImg" class="bdrs-50p w-3r h-3r" alt="" src="" style="display: none;">
|
||||
<img id="ticketAuthorImg" class="bdrs-50p w-3r h-3r" alt="" src="" style="display: none; object-fit: cover;">
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small id="ticketTimestamp"></small>
|
||||
@ -315,7 +301,7 @@
|
||||
<div class="bdT pX-40 pY-30">
|
||||
|
||||
<h4 id="ticketTitle"></h4>
|
||||
<p id="ticketDesc"></p>
|
||||
<div id="ticketDesc"></div>
|
||||
<!-- <h4>Title of this email goes here</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
@ -346,7 +332,7 @@
|
||||
|
||||
<div id="ticketModal" class="modal fade" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<form method="post" action="{% url 'ticket-new' %}">
|
||||
<form method="post">
|
||||
|
||||
{% csrf_token %}
|
||||
|
||||
@ -403,9 +389,9 @@
|
||||
var displayedTicketID = -1;
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".email-list-item").on("click", function() {
|
||||
displayTicket(this);
|
||||
});
|
||||
// $(".email-list-item").on("click", function() {
|
||||
// displayTicket(this);
|
||||
// });
|
||||
|
||||
ClassicEditor
|
||||
.create( document.getElementById("newDesc"), {})
|
||||
@ -416,6 +402,33 @@
|
||||
loadAllTickets();
|
||||
});
|
||||
|
||||
$("#ticketModal form").on("submit", function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
$.ajax({
|
||||
url: "{% url 'ticket-new' %}",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
data: {
|
||||
csrfmiddlewaretoken: "{{ csrf_token }}",
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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 loadAllTickets() {
|
||||
$("#ticketsContainer").empty();
|
||||
|
||||
@ -434,9 +447,14 @@
|
||||
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);
|
||||
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();
|
||||
@ -451,7 +469,7 @@
|
||||
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">
|
||||
<img src="${ticket.author.icon}" alt="" class="w-2r h-2r bdrs-50p me-2" style="object-fit: cover;">
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
@ -526,28 +544,28 @@
|
||||
var priority = ticket.priority;
|
||||
|
||||
$("#ticketTitle").text(ticket.title);
|
||||
$("#ticketDesc").append($(`<div>${ticket.description}</div>`));
|
||||
$("#ticketDesc").append($(`<div class="w-100">${ticket.description}</div>`));
|
||||
$("#ticketAuthor").text(`${author.forename} ${author.surname}`);
|
||||
$("#ticketAuthorImg").show();
|
||||
$("#ticketAuthorImg").prop("src", author.icon);
|
||||
$("#btnGroupDrop2").show();
|
||||
$("#ticketBadges").show();
|
||||
|
||||
$("#ticketBadges").append($(`<div class="badge me-1" style="background-color: ${priority.colour};">${priority.title} Priority</div>`));
|
||||
$("#ticketBadges").append($(`<div class="badge me-1" style="color: ${priority.colour}; background-color: ${priority.backgroundcolour};">${priority.title} Priority <i class="ti-control-record "></i></div>`));
|
||||
|
||||
if (department != null) {
|
||||
$("#ticketBadges").append($(`<div class="badge bgc-deep-purple-500 me-1">${department.title}</div>`));
|
||||
}
|
||||
|
||||
ticket.tags.forEach(function(tag) {
|
||||
$("#ticketBadges").append($(`<div class="badge me-1" style="background-color: ${tag.colour};">${tag.title}</div>`));
|
||||
$("#ticketBadges").append($(`<div class="badge me-1" style="color: ${tag.colour}; background-color: ${tag.backgroundcolour};">${tag.title} <i class="ti-tag"></i></div>`));
|
||||
});
|
||||
|
||||
// timestamp
|
||||
var timestamp = new Date(ticket.timestamp);
|
||||
var formattedTime;
|
||||
|
||||
if (ticket.is_older_than_day) {
|
||||
if (ticket.was_yesterday) {
|
||||
var options = { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' };
|
||||
formattedTime = timestamp.toLocaleDateString('en-GB', options);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user