From ab4c82979288f8c76c8bace5efb2d6c57529c3b8 Mon Sep 17 00:00:00 2001
From: emile <e.emile@ositcom.netm>
Date: Thu, 4 Jul 2024 16:30:52 +0300
Subject: [PATCH] new

---
 osinaweb/db.sqlite3                           | Bin 1441792 -> 1445888 bytes
 .../osinacore/templates/customer_index.html   |  97 +++++++++++-------
 osinaweb/osinacore/templates/index.html       |   6 +-
 .../__pycache__/settings.cpython-310.pyc      | Bin 3110 -> 3110 bytes
 osinaweb/static/js/tickets/tickets-room.js    |   2 +-
 .../__pycache__/consumers.cpython-310.pyc     | Bin 7066 -> 7293 bytes
 osinaweb/support/consumers.py                 |  13 ++-
 .../partials/customer-ticket-display.html     |  53 ++++++++++
 ...display.html => staff-ticket-display.html} |  44 +++++---
 9 files changed, 154 insertions(+), 61 deletions(-)
 create mode 100644 osinaweb/support/templates/details_templates/partials/customer-ticket-display.html
 rename osinaweb/support/templates/details_templates/partials/{ticket-display.html => staff-ticket-display.html} (78%)

diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index a57fe75a95c6771611da3b1d82cf2bb6d155d935..3e8ab5a0cd9128c3560fab6fe9f2db7d3237d3d3 100644
GIT binary patch
delta 4157
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
HMbiHVEe#VA

delta 2514
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

diff --git a/osinaweb/osinacore/templates/customer_index.html b/osinaweb/osinacore/templates/customer_index.html
index 9e7adbd5..de85d055 100644
--- a/osinaweb/osinacore/templates/customer_index.html
+++ b/osinaweb/osinacore/templates/customer_index.html
@@ -149,43 +149,11 @@
                 </thead>
 
                 <!-- TABLE BODY -->
-                {% for ticket in customer_open_tickets %}
-                <tbody class="bg-white divide-y divide-gray-200">
-                    <tr data-href="{% url 'ticketroom' ticket.ticket_number %}"
-                        class="hover:bg-gray-100 duration-300 cursor-pointer">
-                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <div class="w-full flex {% if ticket.unread_updates_count > 0 %} justify-between {% else %} justify-center {% endif %} items-center gap-3"> 
-                                <a href="{% url 'ticketroom' ticket.ticket_number %}">
-                                    <p class="text-secondosiblue">{{ticket.title }}</p>
-                                </a>
-
-                                {% if ticket.unread_updates_count > 0 %}
-                                <div>
-                                    <div class="w-[25px] h-[25px] rounded-full bg-green-700 text-white flex justify-center items-center text-sm">
-                                        <p>{{ticket.unread_updates_count}}</p>
-                                    </div>
-                                </div>
-                                {% endif %}
-                            </div>
-                        </td>
-
-                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-secondosiblue">{{ticket.ticket_number}}</p>
-                        </td>
-
-                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-secondosiblue">{{ticket.regarding}}</p>
-                        </td>
-
-                        <td class="px-6 py-4 text-center text-sm">
-                            {% if ticket.ticketupdate_set.all %}
-                                <p class="text-secondosiblue">{{ticket.ticketupdate_set.last.date_added}} <br> by {{ticket.ticketupdate_set.last.added_by.first_name}}</p>
-                            {% endif %}
-
-                        </td>
-                    </tr>
+                <tbody class="bg-white divide-y divide-gray-200" id="tickets">
+                    {% for ticket in customer_open_tickets %}
+                        {% include 'details_templates/partials/customer-ticket-display.html' %}
+                    {% endfor %}
                 </tbody>
-                {% endfor %}
             </table>
         </div>
     </div>
@@ -279,5 +247,62 @@
     });
 </script>
 
+<script>
+    // WebSocket connection for new tickets
+    const newTicketsSocket = new WebSocket('wss://' + window.location.host + '/ws/new-tickets/');
+
+    newTicketsSocket.onopen = () => {
+        console.log('WebSocket connection to new tickets established');
+    };
+
+    newTicketsSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.event_type === 'new_ticket') {
+            const html = data.html;
+            document.getElementById('tickets').insertAdjacentHTML('afterbegin', html);
+        }
+    };
+
+    newTicketsSocket.onclose = () => {
+        console.log('WebSocket connection to new tickets closed');
+    };
+
+    newTicketsSocket.onerror = (error) => {
+        console.log('WebSocket error:', error);
+    };
+
+
+    // WebSocket connection for new ticket updates
+    const newTicketUpdatesSocket = new WebSocket('wss://' + window.location.host + '/ws/new-ticket-updates/');
+
+    newTicketUpdatesSocket.onopen = () => {
+        console.log('WebSocket connection to new ticket updates established');
+    };
+
+    newTicketUpdatesSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.event_type === 'new_ticket_update_group') {
+            const html = data.html;
+            const ticketId = data.ticket_id;
+            console.log(ticketId);
+            
+            // Remove the existing ticket row if it exists
+            const existingTicketRows = document.querySelectorAll(`.ticket-${ticketId}`);
+            existingTicketRows.forEach(row => row.remove());
+
+            // Insert the updated ticket row at the top
+            document.getElementById('tickets').insertAdjacentHTML('afterbegin', html);
+        }
+    };
+
+    newTicketUpdatesSocket.onclose = () => {
+        console.log('WebSocket connection to new ticket updates closed');
+    };
+
+    newTicketUpdatesSocket.onerror = (error) => {
+        console.log('WebSocket error:', error);
+    };
+</script>
+
 <script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
 {% endblock %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/index.html b/osinaweb/osinacore/templates/index.html
index 77c8910b..e82d6522 100644
--- a/osinaweb/osinacore/templates/index.html
+++ b/osinaweb/osinacore/templates/index.html
@@ -42,7 +42,7 @@
 
                 <tbody class="bg-white divide-y divide-gray-200" id="tickets">
                     {% for ticket in open_tickets %}
-                        {% include 'details_templates/partials/ticket-display.html' %}
+                        {% include 'details_templates/partials/staff-ticket-display.html' %}
                     {% endfor %}
                 </tbody>
             </table>
@@ -292,7 +292,7 @@
 <script type="text/javascript" src='{% static "js/tickets/share-ticket.js" %}'></script>
 <script>
     // WebSocket connection for new tickets
-    const newTicketsSocket = new WebSocket('ws://' + window.location.host + '/ws/new-tickets/');
+    const newTicketsSocket = new WebSocket('wss://' + window.location.host + '/ws/new-tickets/');
 
     newTicketsSocket.onopen = () => {
         console.log('WebSocket connection to new tickets established');
@@ -316,7 +316,7 @@
 
 
     // WebSocket connection for new ticket updates
-    const newTicketUpdatesSocket = new WebSocket('ws://' + window.location.host + '/ws/new-ticket-updates/');
+    const newTicketUpdatesSocket = new WebSocket('wss://' + window.location.host + '/ws/new-ticket-updates/');
 
     newTicketUpdatesSocket.onopen = () => {
         console.log('WebSocket connection to new ticket updates established');
diff --git a/osinaweb/osinaweb/__pycache__/settings.cpython-310.pyc b/osinaweb/osinaweb/__pycache__/settings.cpython-310.pyc
index 9f7aba03dc4bf9cb1285c784704fd4cb9f0c3b77..95a58adb8b59defa67ca907bd97e5f425cf363ec 100644
GIT binary patch
delta 19
ZcmZ1`u}p$1pO=@50SGu3Z{(8U0RSn11E~N2

delta 19
ZcmZ1`u}p$1pO=@50SF!?Zsd~T0RSyc1V8`)

diff --git a/osinaweb/static/js/tickets/tickets-room.js b/osinaweb/static/js/tickets/tickets-room.js
index 0a794b5e..8736bd93 100644
--- a/osinaweb/static/js/tickets/tickets-room.js
+++ b/osinaweb/static/js/tickets/tickets-room.js
@@ -63,7 +63,7 @@ function app(socket) {
 
 function initializeWebSocket() {
     const ticketId = document.getElementById('ticketId').textContent.trim();
-    const wsUrl = `ws://${window.location.host}/ws/ticketroom/${ticketId}/`;
+    const wsUrl = `wss://${window.location.host}/ws/ticketroom/${ticketId}/`;
     const socket = new WebSocket(wsUrl);
 
     socket.onopen = () => {
diff --git a/osinaweb/support/__pycache__/consumers.cpython-310.pyc b/osinaweb/support/__pycache__/consumers.cpython-310.pyc
index 162211a152eef202b51637d0c1430c8b0eef8c0e..f332a4d5c1132bcd4becd0d1149077abd61d04c1 100644
GIT binary patch
delta 562
zcmZvZJ!{)g6o!3dJ60rFR#MCH2Xra47?MCCkaP$MWGNl;(F6+4AlzJu%C;i)>N-&O
znhb$#A;aC04DHY#(4q8igp3}tb?wrv;L>w!(y2O}=f1k<gBR}A>UhnLi$x=Y-{|^0
zxPSW9HeDE~y89hk>dyTFiP~)}sLRS2QgyL#Xq(ttz}&)2e=1q7sZupL6_(6&3T*aF
zi+4zM9GUCPb+w@`3+aK>d0*yOo*6gVa8?$0Tg)?4V)xKE&ZD-b8Ydr#@+X%Sr6Kdo
zzR7+DR=NPlu+07>o6h#g5#dqS7hXSMZQ*+%<3)8_U965uNBva9k<Swz2Vu|WT{JmZ
zQ4P1zNJTpcmZp<SEKHML`@`}(5%mVERDba>`o9*Q;+|%fKgWab5iG)Mx~-@uwcs?O
z{|@1p5ED)aZwNDleZnT;0MRu0Gtw^!g0M~~5hlwAs9J8AdQ;02`(ETnZ++gH|99<8
zZEHSPU9+Zs)gG^{;GhmR%wXi83{}uEEUg0CA1iMm^{jyv3k*#MZ4%Bn_gih$x8Wnb
Ww!=B@_(4|Q6S(?TzXFb>SAPLXFOYu#

delta 279
zcmexsG0U7UpO=@50SI!d+tNB!H}Y|dGX9z@CAyvQ*5pf~OD7x2NKEb*`^#85xmP@z
z52TVEh@FAB_`u{E5y{E?5(PFj>_u@kEGeuhoO76JIZ6alxN10>nQA#}7_tOQgcb;=
zaMy6wu%__LVP43X!rRNp$dJMi491##lV3_W@)TtQ4J^t95v7wiN=h+`Og<x-CXfdb
z$N~}hAfjNhkCX&2SCKl1;{hVdCKpNxvsHtbg_AS5WhS4Il4I1G{8~y{h=qlVk&BUo
viHQ*e1^%-9nXDx3$5=DDP+Ee&1gPUFNLMk4D49G%dKO~|P)2;Rmy9t0?mR`(

diff --git a/osinaweb/support/consumers.py b/osinaweb/support/consumers.py
index d549ca91..1e21692d 100644
--- a/osinaweb/support/consumers.py
+++ b/osinaweb/support/consumers.py
@@ -251,14 +251,19 @@ class NewTicketUpdateConsumer(WebsocketConsumer):
             if not TicketRead.objects.filter(ticket_update=ticket_update, user=self.user, read=True).exists():
                 unread_updates_count += 1
             ticket.unread_updates_count = unread_updates_count
-        is_staff_or_superuser = (
+        is_ticketstaff_member = (
             hasattr(self.user, 'staffprofile') and 
             (self.user.staffprofile in ticket.get_all_ticket_staff() or self.user.is_superuser)
         )
-        if is_staff_or_superuser:
+        is_ticket_customer = (
+            hasattr(self.user, 'customerprofile') and 
+            (self.user.customerprofile == ticket.customer))
+        if is_ticketstaff_member or is_ticket_customer:
             context = {'ticket': ticket, 'new': True}
-            html = render_to_string("details_templates/partials/ticket-display.html", context)
-
+            if is_ticketstaff_member:
+                html = render_to_string("details_templates/partials/staff-ticket-display.html", context)
+            else:
+                html = render_to_string("details_templates/partials/customer-ticket-display.html", context)
             self.send(text_data=json.dumps({
                 'event_type': 'new_ticket_update_group',
                 'html': html,
diff --git a/osinaweb/support/templates/details_templates/partials/customer-ticket-display.html b/osinaweb/support/templates/details_templates/partials/customer-ticket-display.html
new file mode 100644
index 00000000..43159cd3
--- /dev/null
+++ b/osinaweb/support/templates/details_templates/partials/customer-ticket-display.html
@@ -0,0 +1,53 @@
+<tr class="ticket-{{ticket.id}} {% if new %}bg-gray-200 fade-in-up{% endif %} hover:bg-gray-100 duration-300 cursor-pointer"
+    data-href="{% url 'ticketroom' ticket.ticket_number %}">
+    <td class="px-6 py-4 text-sm border-r border-gray-300">
+        <div
+            class="w-full flex  {% if ticket.unread_updates_count > 0 %} justify-between {% else %} justify-center text-center {% endif %} items-center gap-3">
+            <p class="text-secondosiblue">{{ticket.title}}</p>
+
+            {% if ticket.unread_updates_count > 0 %}
+            <div>
+                <div
+                    class="w-[25px] h-[25px] rounded-full bg-green-700 text-white flex justify-center items-center text-sm">
+                    <p>{{ticket.unread_updates_count}}</p>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </td>
+
+
+    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+        <p class="text-secondosiblue">{{ticket.ticket_number}}</p>
+    </td>
+
+    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+        <p class="text-secondosiblue">{{ticket.regarding}}</p>
+    </td>
+
+    <td class="px-6 py-4 text-center text-sm ">
+        {% if ticket.ticketupdate_set.all %}
+        <p class="text-secondosiblue">{{ticket.ticketupdate_set.all.last.date_added}} <br> by
+            {{ticket.ticketupdate_set.all.last.added_by.first_name}}</p>
+        {% endif %}
+    </td>
+
+</tr>
+
+<style>
+    @keyframes fadeInAndUp {
+        from {
+            opacity: 0;
+            transform: translateY(12px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0px);
+        }
+    }
+
+    .fade-in-up {
+        animation: fadeInAndUp 0.6s ease;
+    }
+</style>
\ No newline at end of file
diff --git a/osinaweb/support/templates/details_templates/partials/ticket-display.html b/osinaweb/support/templates/details_templates/partials/staff-ticket-display.html
similarity index 78%
rename from osinaweb/support/templates/details_templates/partials/ticket-display.html
rename to osinaweb/support/templates/details_templates/partials/staff-ticket-display.html
index a7ec4c56..0acc9dcc 100644
--- a/osinaweb/support/templates/details_templates/partials/ticket-display.html
+++ b/osinaweb/support/templates/details_templates/partials/staff-ticket-display.html
@@ -1,6 +1,7 @@
-<tr  class="ticket-{{ticket.id}} {% if new %}bg-gray-200 fade-in-up{% endif %}">
+<tr class="ticket-{{ticket.id}} {% if new %}bg-gray-200 fade-in-up{% endif %}">
     <td class="px-6 py-4 text-sm border-r border-gray-300">
-        <div class="w-full flex  {% if ticket.unread_updates_count > 0 %} justify-between {% else %} justify-center text-center {% endif %} items-center gap-3">
+        <div
+            class="w-full flex  {% if ticket.unread_updates_count > 0 %} justify-between {% else %} justify-center text-center {% endif %} items-center gap-3">
             <p class="text-secondosiblue">{{ticket.title}}</p>
 
             {% if ticket.unread_updates_count > 0 %}
@@ -23,9 +24,10 @@
         <p class="text-secondosiblue">{{ticket.regarding}}</p>
     </td>
 
-    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+    <td class="px-6 py-4 text-center text-sm  border-r border-gray-300">
         {% if ticket.ticketupdate_set.all %}
-            <p class="text-secondosiblue">{{ticket.ticketupdate_set.all.last.date_added}} <br> by {{ticket.ticketupdate_set.all.last.added_by.first_name}}</p>
+        <p class="text-secondosiblue">{{ticket.ticketupdate_set.all.last.date_added}} <br> by
+            {{ticket.ticketupdate_set.all.last.added_by.first_name}}</p>
         {% endif %}
     </td>
 
@@ -36,34 +38,33 @@
             <button class="copyButton">
                 <input type="text" class="hidden copyInput"
                     value="https://osina.ositcom.com/my-tickets/{{ticket.ticket_number}}/">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                    stroke-width="1.5" stroke="currentColor"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor"
                     class="w-[16px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
                     <path stroke-linecap="round" stroke-linejoin="round"
                         d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
                 </svg>
             </button>
             <a href="{% url 'ticketroom' ticket.ticket_number %}">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                    stroke-width="1.5" stroke="currentColor"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor"
                     class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
                     <path stroke-linecap="round" stroke-linejoin="round"
                         d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
-                    <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                 </svg>
             </a>
             <a href="">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                    stroke-width="1.5" stroke="currentColor"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor"
                     class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
                     <path stroke-linecap="round" stroke-linejoin="round"
                         d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                 </svg>
             </a>
             <div class="cursor-pointer deleteTicketButton" data-modal-url="">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                    stroke-width="1.5" stroke="currentColor"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor"
                     class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
                     <path stroke-linecap="round" stroke-linejoin="round"
                         d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
@@ -71,14 +72,23 @@
             </div>
         </div>
     </td>
+
 </tr>
 
 <style>
     @keyframes fadeInAndUp {
-        from { opacity: 0; transform: translateY(12px); }
-        to { opacity: 1; transform: translateY(0px); }
+        from {
+            opacity: 0;
+            transform: translateY(12px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0px);
+        }
     }
+
     .fade-in-up {
         animation: fadeInAndUp 0.6s ease;
     }
-</style>
+</style>
\ No newline at end of file