From f49e7e7702cd142fdcba6c55abdb2c163cc320be Mon Sep 17 00:00:00 2001
From: corbz <corbz.jones@gmail.com>
Date: Mon, 8 Jan 2024 00:42:08 +0000
Subject: [PATCH] implemented tag and priority colour changes

---
 apps/templates/home/tickets.html | 138 +++++++++++++++++--------------
 1 file changed, 78 insertions(+), 60 deletions(-)

diff --git a/apps/templates/home/tickets.html b/apps/templates/home/tickets.html
index 066b9a1..61853ff 100644
--- a/apps/templates/home/tickets.html
+++ b/apps/templates/home/tickets.html
@@ -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>&bull; 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);
                 }