From 410c48e8db48adb8b740169ff5700e2c7fe9e506 Mon Sep 17 00:00:00 2001
From: emile <e.emile@ositcom.netm>
Date: Mon, 1 Jul 2024 23:04:49 +0300
Subject: [PATCH] new

---
 osinaweb/db.sqlite3                           | Bin 1409024 -> 1409024 bytes
 .../details_templates/ticket-room.html        | 346 +++++++++++++-----
 2 files changed, 248 insertions(+), 98 deletions(-)

diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index efa7d4ad5e7c4cd6da137d4c92b86f6bb6d4fdbc..a9482e6c5c59c7e9c3ad501aeaca452bb9f2c65f 100644
GIT binary patch
delta 1431
zcmai!e`phD7{}lHo!onOO)pnls>8ZYH|@-Fce$jAR<XKZ?XR`YP}dG>n>3AWV%pkL
z1!tmmWw=4Lu$L;U4P$@o2TWVX+iC|o*cihxkTDpz%?;UbQ|LAdn<(yWuCl=f<Gt_u
zdG6u)zV8e7+?&ZnGMUKOO6tm~Rokg67urv+7v@W{PR628;p=W~M&2M$)ZX!;3X{*3
z3@|2*E<_Y<yrbd_^})=8isv>d!I0?<nSPIHd3^!@@z(fgYn&pYi5Mc5h$G^O1R@8K
zlSss^arpKh)Ir3xOSfqygBRMRa+yk_Qq@_CJSnNUY&EluHoS&!qc^Zox61Ut_cAKI
z7Nw0&r6fF+lB0dhXKWk`H|5_cngsX0mwRaB?NwRy^vhf+9=RnSeV1vW7m+ZgoLxaL
za+7Q=H_Y~NySa^=gZ+V>XAzzqQ>y57Ynghw<8aLA8yYe@)4hiVI(iea&dyXk+BvW<
zb-+pvCk~UHSB@)01$gDS>vkK{Af7?Og6k|Vo)J%qCug$htIjsafK{NJqH9vo1c_IG
zVv63mFP%OV2J_^d2jyfg0L4x_3+B}m%^WCq<_%q4vHn=<AeeKXXd+2_mE~j@%;Ask
zxwcwNP7GtgTUbT$Vw>0`hRMeF9cvufH5_o#6qpM;vSoHSOTyK5h{HG@Dtu${2^YK$
z3g!w96jUfbE1xJ?rCMR+kK`kAg>+MzkoHQ&@H$!X9mrH?H=|6ITC5Kab}Wz0&qNbL
zTONHKuU=+&LtZ0fm>$dW2CX2!HM@xiHAvs8YMw-QcY=)n^yneo@2T|Zl}3QC%7%FG
zY~I7g`ub!2C|9LwZYvlv0v><R@C6NiM>fcV-T4}6=`i{8kZHLz5Hc-tgn;f3@;kGY
zJZR0Ax{}F6BDpjOm#|!Jgsh-P_j?0DAK#b_@F0;dFCIvCMF)~(N=CcLL%0OnCHn#)
zz0zaqhTk9H@sTQZ^l@fdl914@eusuHP!j&JT`h%69mt`PJM8E9+g^2DIXevzKw{c)
z6pfClA3g;y!5R1-d<#xOB(0K)Bt;S=0RM!)!C&Al_znCDegQv)S8?wtwL;v$GZf8(
zc^j8)T(U7|W7Y=7SI?^3zhoK|9tml8BTX1dyX#m*k{`|#o_}60mg&6!03l4baEz0t
zo0p7Xx(T~qa{o%P4e||u7N+?vD4cP(@$wD%ntY8IpOhbSf%&}ELD(WNG!5qH=4CeF
zJFmG*I+z^1i-iR@=}PzjF2cK{hu#!R>>`lMa~4eHiNQI{-FH7UnVb|Mt*jA~6qR0-
zBE%%YqWrl)&c>9DbGT=-HZj2LVr!9bUK^*`T2lNz!>k>#(BwsJh5C<+LN^U_?T9a*
z$FE-0hA)?hY(J2vrB`6P7<9UXpOmlpE8GOzPZo)=>yMQm)42NMd$#@GC4f#{F4WM0
z)7sRo#`^txLUqGEfkTOyQQzIWV`zVOd{=X0U97q`)>1Rr-(yA_8Uu|+-Tw3o=8pPD
Pf6c$|G(0g_6c_&jgvFNk

delta 605
zcmW;JUr19?90%}o?m1^?_s_Z8?!B(z1fx+=BN;3OEenzaY1AmNKp&Q<L)0}}Q7`5!
zZ1f;(4LU4o2tK6bgF5RJ6|}&hcYE-uKLla;u!<ncsDlrmm*4LTKfe63+3sw%J0FB|
zg@z6|x16|pfIbOKs;C)q-#y!@u!9uBc(E=Vb(I4d6jk_gx9Jr7!uR27<!?BCgio(J
z8g6N6jo#`>=6aG)QY0i{iAXMqN^VJ&G|`jP7k<GECkbOyX=@g>gb`ve&+9F<o;Rh8
zv%E2+@6OGp3^AKx{bT4Y9u@Qh`vJxFM>eb!;%?q_n*_wvXEyN&oku}V^X817l<_HY
z9gmT7<PdS=PxuAq${+DGZ?-Gk`_SB%3l>euBZ5WmW-p3qYn;}+GnL6S)BHLDeh`96
zSE_$#aB$%AK<Y{-m=|lmy~mqTSxX8U@wG#l4XGm8=6monps{h_dFHv~37cQdH|C^y
z!bI#f8?X45E;2FRZsqo%MI*v#!g?>hC#-tCm`_JUWW-tz;YGa)xR!QL@Lb+{$>Rm9
z!5A6=0H_iGH^oT73TvD;8eaZx0S6Qq7u6Z7V;#jzo71#?hF?hAF?nm0VcMz0g?+>R
z262pS0bW~i9pjx@yZ5nWon*uf=H-5C+79%gvOxr`**i_DnjqWuzo;Az%X-evaKA2w
zk2<9c>cSaLmz<)kyn)c(sl)vAs<TVTmtTACS4j!572}Sc&{|b5{bFvoUXhZFP7qPL
IT9?%R16+v39RL6T

diff --git a/osinaweb/support/templates/details_templates/ticket-room.html b/osinaweb/support/templates/details_templates/ticket-room.html
index 28febb71..9b653c3e 100644
--- a/osinaweb/support/templates/details_templates/ticket-room.html
+++ b/osinaweb/support/templates/details_templates/ticket-room.html
@@ -117,9 +117,103 @@
     
     
                 <div class="w-full flex flex-col gap-3">
+                    <div class="w-full rounded-md text-black" x-data="app()" x-init="init($refs.wysiwyg)">
+                        <div class="border border-gray-200 overflow-hidden rounded-md">
+                            <div class="w-full border-b border-gray-200 flex flex-wrap text-xl text-gray-600">
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('bold')">
+                                    <i class="mdi mdi-format-bold"></i>
+                                </button>
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('italic')">
+                                    <i class="mdi mdi-format-italic"></i>
+                                </button>
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('underline')">
+                                    <i class="mdi mdi-format-underline"></i>
+                                </button>
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('formatBlock','P')">
+                                    <i class="mdi mdi-format-paragraph"></i>
+                                </button>
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('formatBlock','H1')">
+                                    <i class="mdi mdi-format-header-1"></i>
+                                </button>
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('formatBlock','H2')">
+                                    <i class="mdi mdi-format-header-2"></i>
+                                </button>
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('formatBlock','H3')">
+                                    <i class="mdi mdi-format-header-3"></i>
+                                </button>
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('insertUnorderedList')">
+                                    <i class="mdi mdi-format-list-bulleted"></i>
+                                </button>
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    @click="format('insertOrderedList')">
+                                    <i class="mdi mdi-format-list-numbered"></i>
+                                </button>
+
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    id="rightToLeft" @click="setDirection('rtl')">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                                        class="w-[18px] h-[18px]" fill="none">
+                                        <path d="M15 3.5H21" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M15 9.5H21" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M3 15.5H21" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M3 21.5H21" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                        <path
+                                            d="M3.58579 9.91421C4.17157 10.5 5.11438 10.5 7 10.5C8.88562 10.5 9.82843 10.5 10.4142 9.91421C11 9.32843 11 8.38562 11 6.5C11 4.61438 11 3.67157 10.4142 3.08579C9.82843 2.5 8.88562 2.5 7 2.5C5.11438 2.5 4.17157 2.5 3.58579 3.08579C3 3.67157 3 4.61438 3 6.5C3 8.38562 3 9.32843 3.58579 9.91421Z"
+                                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                            stroke-linejoin="round" />
+                                    </svg>
+                                </button>
+
+                                <button type="button"
+                                    class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
+                                    id="leftToLeft" @click="setDirection('ltr')">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                                        class="w-[18px] h-[18px]" fill="none">
+                                        <path d="M3 3.5H9" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M3 9.5H9" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M3 15.5H21" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M3 21.5H21" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                        <path
+                                            d="M13.5858 9.91421C14.1716 10.5 15.1144 10.5 17 10.5C18.8856 10.5 19.8284 10.5 20.4142 9.91421C21 9.32843 21 8.38562 21 6.5C21 4.61438 21 3.67157 20.4142 3.08579C19.8284 2.5 18.8856 2.5 17 2.5C15.1144 2.5 14.1716 2.5 13.5858 3.08579C13 3.67157 13 4.61438 13 6.5C13 8.38562 13 9.32843 13.5858 9.91421Z"
+                                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                            stroke-linejoin="round" />
+                                    </svg>
+                                </button>
+                            </div>
+                            <div class="w-full">
+                                <iframe x-ref="wysiwyg" class="w-full h-[300px] overflow-y-auto"></iframe>
+                            </div>
+                        </div>
+                    </div>
     
                     <textarea  name="description" rows="8" id="textEditor"
-                        class="w-full bg-white px-3 py-3 border border-gray-200 rounded-b-md outline-none text-gray-500 resize-none"
+                        class="w-full bg-white px-3 py-3 border border-gray-200 rounded-b-md outline-none text-gray-500 resize-none hidden"
                         placeholder="Add Comment..." required></textarea>
     
                     <div class="w-full flex flex-col items-end gap-3">
@@ -153,114 +247,170 @@
                 </div>
             </form>
     
-    
-            
         </div>
-        <script>
-            document.addEventListener('DOMContentLoaded', () => {
-                const ticketId = '{{ticket.id}}';  
-                const wsUrl = `ws://${window.location.host}/ws/ticketroom/${ticketId}/`;
-                const socket = new WebSocket(wsUrl);
-                let typingTimeout = null;
-    
-                socket.onopen = () => {
-                    console.log('WebSocket connection established');
-                };
-    
-                socket.onmessage = (event) => {
-                    const data = JSON.parse(event.data);
-                    if (data.event_type === 'typing') {
-                        const typingDiv = document.getElementById('typing-notification');
-                        typingDiv.innerHTML = data.html;
-                    } else if (data.event_type === 'stop_typing') {
-                        const typingDiv = document.getElementById('typing-notification');
-                        typingDiv.innerHTML = '';
-                    } else if (data.event_type === 'reaction') {
-                        console.log(data.reaction);
-                        const updateElement = document.getElementById(`update-${data.update_id}`);
-                        updateElement.querySelectorAll('.reaction-button').forEach(button => {
-                            button.classList.remove('border-2', 'border-secondosiblue');
-                            if (button.dataset.reaction === data.reaction) {
-                                button.classList.add('border-2', 'border-secondosiblue');
-                            }
-                        });
-                        const submittedReactions = updateElement.querySelector('#submitted-reactions');
-                        submittedReactions.classList.remove('w-full', 'border-t', 'border-gray-200', 'pt-5', 'flex', 'justify-start', 'items-center', 'gap-3', 'p-5');
-                        updateElement.querySelectorAll('.submittedreaction-button').forEach(button => {
-                            button.classList.add('hidden');
-                            if (button.dataset.reaction === data.reaction) {
-                                submittedReactions.classList.add('w-full', 'border-t', 'border-gray-200', 'pt-5', 'flex', 'justify-start', 'items-center', 'gap-3', 'p-5');
-                                button.classList.remove('hidden');
-                            }
-                        });
-                    } else {
-                        const typingDiv = document.getElementById('typing-notification');
-                        const messagesDiv = document.getElementById('messages');
-                        messagesDiv.insertAdjacentHTML('beforeend', data.html);
-                        typingDiv.innerHTML = '';
+
+    <script>
+        function app(socket) {
+            return {
+                wysiwyg: null,
+                socket: socket,
+                typingTimeout: null,
+                init: function (el) {
+                    this.wysiwyg = el;
+                    this.setupWysiwyg();
+                },
+                setupWysiwyg: function() {
+                    this.updateTextarea();
+                    this.wysiwyg.contentDocument.body.addEventListener('input', this.onInput.bind(this));
+                    this.wysiwyg.contentDocument.querySelector('head').innerHTML += `<style>
+                    *, ::after, ::before {box-sizing: border-box;}
+                    :root {tab-size: 4;}
+                    html {line-height: 1.15;text-size-adjust: 100%;}
+                    body {margin: 0px; padding: 1rem 0.5rem;}
+                    body {font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";}
+                    </style>`;
+                    this.wysiwyg.contentDocument.body.innerHTML = '';
+                    this.wysiwyg.contentDocument.designMode = "on";
+                },
+                onInput: function() {
+                    this.updateTextarea();
+                    this.sendTypingEvent();
+                },
+                updateTextarea: function() {
+                    var wrapperDiv = document.createElement('div');
+                    wrapperDiv.className = this.wysiwyg.classList.contains('rtl') ? 'rtl' : 'ltr';
+                    wrapperDiv.innerHTML = this.wysiwyg.contentDocument.body.innerHTML;
+                    document.getElementById('textEditor').value = wrapperDiv.outerHTML;
+                },
+                sendTypingEvent: function() {
+                    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+                        clearTimeout(this.typingTimeout);
+                        const data = { event_type: 'typing' };
+                        this.socket.send(JSON.stringify(data));
+    
+                        this.typingTimeout = setTimeout(() => {
+                            const stopTypingData = { event_type: 'stop_typing' };
+                            this.socket.send(JSON.stringify(stopTypingData));
+                        }, 1500);
                     }
+                },
+                format: function (cmd, param) {
+                    this.wysiwyg.contentDocument.execCommand(cmd, false, param || null);
+                    this.updateTextarea();
+                },
+                setDirection: function(direction) {
+                    this.wysiwyg.classList.remove('rtl', 'ltr');
+                    this.wysiwyg.contentDocument.body.classList.remove('rtl', 'ltr');
+                    document.getElementById('textEditor').classList.remove('rtl', 'ltr');
+    
+                    this.wysiwyg.classList.add(direction);
+                    this.wysiwyg.contentDocument.body.classList.add(direction);
+                    document.getElementById('textEditor').classList.add(direction);
+    
+                    this.wysiwyg.contentDocument.body.style.direction = direction;
+                    this.updateTextarea();
+                }
+            }
+        }
+    
+        function initializeWebSocket() {
+            const ticketId = '{{ticket.id}}';
+            const wsUrl = `ws://${window.location.host}/ws/ticketroom/${ticketId}/`;
+            const socket = new WebSocket(wsUrl);
+    
+            socket.onopen = () => {
+                console.log('WebSocket connection established');
+                const appInstance = app(socket);
+                const wysiwygElement = document.querySelector('iframe'); // Replace with your specific iframe selector
+                appInstance.init(wysiwygElement);
+            };
+    
+            socket.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (data.event_type === 'typing') {
+                    const typingDiv = document.getElementById('typing-notification');
+                    typingDiv.innerHTML = data.html;
+                } else if (data.event_type === 'stop_typing') {
+                    const typingDiv = document.getElementById('typing-notification');
+                    typingDiv.innerHTML = '';
+                } else if (data.event_type === 'reaction') {
+                    const updateElement = document.getElementById(`update-${data.update_id}`);
+                    updateElement.querySelectorAll('.reaction-button').forEach(button => {
+                        button.classList.remove('border-2', 'border-secondosiblue');
+                        if (button.dataset.reaction === data.reaction) {
+                            button.classList.add('border-2', 'border-secondosiblue');
+                        }
+                    });
+                    const submittedReactions = updateElement.querySelector('#submitted-reactions');
+                    submittedReactions.classList.remove('w-full', 'border-t', 'border-gray-200', 'pt-5', 'flex', 'justify-start', 'items-center', 'gap-3', 'p-5');
+                    updateElement.querySelectorAll('.submittedreaction-button').forEach(button => {
+                        button.classList.add('hidden');
+                        if (button.dataset.reaction === data.reaction) {
+                            submittedReactions.classList.add('w-full', 'border-t', 'border-gray-200', 'pt-5', 'flex', 'justify-start', 'items-center', 'gap-3', 'p-5');
+                            button.classList.remove('hidden');
+                        }
+                    });
+                } else {
+                    const typingDiv = document.getElementById('typing-notification');
+                    const messagesDiv = document.getElementById('messages');
+                    messagesDiv.insertAdjacentHTML('beforeend', data.html);
+                    typingDiv.innerHTML = '';
+                }
+            };
+    
+            socket.onclose = () => {
+                console.log('WebSocket connection closed');
+            };
+    
+            socket.onerror = (error) => {
+                console.log('WebSocket error:', error);
+            };
+    
+            const form = document.getElementById('ticketForm');
+            const textEditor = document.getElementById('textEditor');
+            const wysiwygElement = document.querySelector('iframe'); // Replace with your specific iframe selector
+    
+            form.addEventListener('submit', (event) => {
+                event.preventDefault();
+    
+                const formData = new FormData(form);
+                const description = formData.get('description');
+                const filePath = formData.getAll('filePath');
+    
+                const data = {
+                    event_type: 'update',
+                    description: description,
+                    filePath: filePath
                 };
     
-                socket.onclose = () => {
-                    console.log('WebSocket connection closed');
-                };
-    
-                socket.onerror = (error) => {
-                    console.log('WebSocket error:', error);
-                };
-    
-                const form = document.getElementById('ticketForm');
-                const textEditor = document.getElementById('textEditor');
-    
-                textEditor.addEventListener('input', () => {
-                    clearTimeout(typingTimeout);
-                    const data = {
-                        event_type: 'typing'
-                    };
-                    socket.send(JSON.stringify(data));
-    
-                    typingTimeout = setTimeout(() => {
-                        const stopTypingData = {
-                            event_type: 'stop_typing'
-                        };
-                        socket.send(JSON.stringify(stopTypingData));
-                    }, 1500); 
-                });
-    
-                form.addEventListener('submit', (event) => {
-                    event.preventDefault();
+                socket.send(JSON.stringify(data));
+                form.reset();
+                textEditor.value = '';
+                wysiwygElement.contentDocument.body.innerHTML = ''; // Clear the WYSIWYG content
+            });
     
-                    const formData = new FormData(form);
-                    const description = formData.get('description');
-                    const filePath = formData.getAll('filePath');
+            document.addEventListener('click', (event) => {
+                if (event.target.classList.contains('reaction-button')) {
+                    const updateId = event.target.dataset.updateId;
+                    const reaction = event.target.dataset.reaction;
     
                     const data = {
-                        event_type: 'update',
-                        description: description,
-                        filePath: filePath
+                        event_type: 'update_reaction',
+                        update_id: updateId,
+                        reaction: reaction
                     };
     
                     socket.send(JSON.stringify(data));
-                    form.reset();
-                });
-    
-                document.addEventListener('click', (event) => {
-                    if (event.target.classList.contains('reaction-button')) {
-                        const updateId = event.target.dataset.updateId;
-                        const reaction = event.target.dataset.reaction;
-    
-                        const data = {
-                            event_type: 'update_reaction',
-                            update_id: updateId,
-                            reaction: reaction
-                        };
-    
-                        socket.send(JSON.stringify(data));
-                    }
-                });
+                }
             });
+        }
+    
+        document.addEventListener('DOMContentLoaded', () => {
+            initializeWebSocket();
+        });
+    </script>
     
-        </script>
+        
         
         
         
@@ -389,7 +539,7 @@
 <!---------------------- JS SCRIPTS -------------------->
 
 <script type="text/javascript" src="{% static 'js/tickets/ticket-details.js' %}"></script>
-<script type="text/javascript" src="{% static 'js/inputs/text-editor.js' %}"></script>
+
 
 <script type="text/javascript" src='{% static "js/inputs/file-uploader.js" %}'></script>