Load button when send message

HE-Arc · Dec 17, 2024 · 699c859 · 699c859
1 parent 987ad3b
commit 699c859
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 30 deletions.
diff --git a/resources/views/components/messaging/chatbar.blade.php b/resources/views/components/messaging/chatbar.blade.php
@@ -4,8 +4,8 @@
             class="rounded-full secondary-background-app p-2 flex items-center justify-center">
             <img src="{{asset('source/assets/images/add.png')}}" alt="Icone" class="h-6 w-6">
         </button>
-        <input type="text" id="message-content" class="flex-1 secondary-background-app text-white border-none rounded-3xl p-2 ml-2 mr-2" onkeypress="if(event.key === 'Enter') { sendMessage() }">
-        <button id="send-message-btn" onclick="sendMessage()" class="rounded-full secondary-background-app p-2 flex items-center justify-center">
+        <input type="text" id="message-content" class="flex-1 secondary-background-app text-white border-none rounded-3xl p-2 ml-2 mr-2" onkeypress="if(event.key === 'Enter') { sendMessageWithLoader() }">
+        <button id="send-message-btn" onclick="sendMessageWithLoader()" class="rounded-full secondary-background-app p-2 flex items-center justify-center">
             <img src="{{asset('source/assets/images/send.png')}}" alt="Icone" class="h-6 w-6">
         </button>
         <span id="send-message-loader" style="display:none;">

diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -243,36 +243,55 @@ function startAutoRefresh(interval) {
         }, interval);
     }
 
-    /**
-     * Function to send a message
-     * 
-     * @returns {void}
-     */
-    function sendMessage() {
-        const messageContent = document.getElementById('message-content').value;
-        document.getElementById('send-message-btn').style.display = 'none';
-        document.getElementById('send-message-loader').style.display = 'block';
-        if (!messageContent) return;
-
-        // Send the message to the server
-        fetch(`/chat/${currentChatId}/messages`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                },
-                body: JSON.stringify({
-                    message: messageContent
-                })
-            })
-            .then(() => {
-                document.getElementById('message-content').value = '';
+/**
+ * Function to send a message
+ * 
+ * @returns {Promise<void>}
+ */
+async function sendMessage() {
+    const messageContent = document.getElementById('message-content').value;
+    if (!messageContent) return;
+
+    try {
+        await fetch(`/chat/${currentChatId}/messages`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+            },
+            body: JSON.stringify({
+                message: messageContent
             })
-            .catch(error => console.error('Erreur:', error));
-        document.getElementById('send-message-btn').style.display = 'block';
-        document.getElementById('send-message-loader').style.display = 'none';
+        });
+        document.getElementById('message-content').value = '';
+    } catch (error) {
+        console.error('Erreur:', error);
     }
+}
+
+/**
+ * Function to send a message with a loader
+ * 
+ * @returns {void}  
+ */
+async function sendMessageWithLoader() {
+    const sendButton = document.getElementById('send-message-btn');
+    const loader = document.getElementById('send-message-loader');
+    
+    sendButton.style.display = 'none';
+    loader.style.display = 'block';
+
+    try {
+        await sendMessage();
+    } catch (error) {
+        console.error('Erreur lors de l\'envoi du message:', error);
+    } finally {
+        sendButton.style.display = 'block';
+        loader.style.display = 'none';
+    }
+}
+
 
     /**
      * Function to scroll to the bottom of the messages container