From 0009156483b9e9e93799b1242c81e99d0a25901b Mon Sep 17 00:00:00 2001
From: Naddeo Eddy <eddy@naddeo.ch>
Date: Thu, 12 Dec 2024 11:43:59 +0100
Subject: [PATCH] Adding .mov and reseting file input after sending it

---
 app/Http/Controllers/ChatController.php           | 11 ++++++++---
 .../views/components/messaging/chatbar.blade.php  | 15 +++++++++++----
 resources/views/dashboard.blade.php               |  6 +++---
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index daf3436..f54aabe 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -60,7 +60,7 @@ public function index()
     public function getMessages($chatId)
     {
         $messages = Message::where('chat_id', $chatId)
-            ->orderBy('created_at', 'asc')
+            ->orderBy('opening_date', 'asc')
             ->with('user')
             ->get();
 
@@ -85,8 +85,8 @@ public function storeCapsule(Request $request, $chatId)
     {
         // Validation
         $request->validate([
-            'file' => 'required|file|mimes:jpeg,png,jpg,gif,mp3,mp4|max:1048576',
-            'message' => 'required|string',
+            'file' => 'required|file|mimes:jpeg,png,jpg,gif,mp3,mp4,mov|max:1048576',
+            'message' => 'required|string'
         ]);
 
         // Vérification de la présence du fichier
@@ -104,6 +104,11 @@ public function storeCapsule(Request $request, $chatId)
             $message->message = $request->message;
             $message->media_url = $mediaName;
 
+            // Vérifier que la date d'ouverture est définie
+            if ($request->has('date_time')) {
+                $message->opening_date = $request->date_time;
+            }
+
             $message->save();
 
             return response()->json(['message' => $message]);
diff --git a/resources/views/components/messaging/chatbar.blade.php b/resources/views/components/messaging/chatbar.blade.php
index c934e1a..3b64ccb 100644
--- a/resources/views/components/messaging/chatbar.blade.php
+++ b/resources/views/components/messaging/chatbar.blade.php
@@ -22,7 +22,7 @@ class="rounded-full secondary-background-app p-2 flex items-center justify-cente
                                 <p class="text-blue-400 underline">cliquez pour sélectionner un fichier</p>
                             </div>
                         </label>
-                        <input id="file" name="file" type="file" class="hidden" onchange="updateFileName()">
+                        <input id="file" name="file" type="file" class="hidden" onchange="updateFileName()" x-model="file">
                     </div>
                 </div>
                 <script>
@@ -57,6 +57,10 @@ function handleDrop(event) {
                     <x-input-label for="message" value="Message" />
                     <x-text-input id="message" name="message" type="text" class="block w-full mt-1"
                         x-model="chatMessage" />
+                    <div class="mb-4">
+                        <x-input-label for="date-time" value="Date et heure d'ouverture de la capsule (laisser vide pour ouverture instantanée)" />
+                        <input type="datetime-local" id="date-time" name="date_time" class="block w-full mt-1 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" />
+                    </div>
                 </div>
                 <!-- Boutons d'action -->
                 <div class="mt-6 flex justify-end">
@@ -76,9 +80,9 @@ function handleDrop(event) {
 function capsuleForm() {
     return {
         chatMessage: '',
+        file: null,
         submitForm() {
             event.preventDefault();
-            console.log('Soumettre le formulaire');
             // Récupérer dynamiquement l'ID de la discussion depuis le champ caché
             const discussionId = document.getElementById('discussion-id').value;
 
@@ -97,9 +101,12 @@ function capsuleForm() {
             .then(response => response.json())
             .then(data => {
                 if (data.message.id) {
-                    // Fermer le modal ou réinitialiser le formulaire
+                    // Fermer le modal et réinitialiser le formulaire
                     this.chatMessage = '';
-                    $dispatch('close');
+                    this.file = null;
+                    document.getElementById('file-info').innerHTML = `<p class='text-gray-300 font-medium'>Glissez et déposez votre fichier ici ou</p><p class='text-blue-400 underline'>cliquez pour sélectionner un fichier</p>`;
+                    document.getElementById('date-time').value = '';
+                    this.$dispatch('close');
                 } else {
                     console.log(data)
                     alert('Erreur lors de l\'envoi de la capsule');
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index adf8836..0a48eae 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -77,7 +77,7 @@ function loadChat(chatId, discussionName, discussionPicture, newOpening = true)
                 // Récupérer la position dans le scroll et vérifier si on est tout en bas
                 // Utile pour savoir si on doit défiler jusqu'en bas après l'ajout des nouveaux messages ou si l'utilisateur est entrain de consulter des anciens messages
                 const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop <= messagesContainer.clientHeight + 0.6;
-                
+
                 // Parcourir les messages et les ajouter
                 newMessages.forEach(message => {
                     const isCurrentUser = message.user_id === {{ auth()->id() }};
@@ -97,7 +97,7 @@ function loadChat(chatId, discussionName, discussionPicture, newOpening = true)
                             `
                 <div class="max-w-[45%] ${isCurrentUser ? 'secondary-background-app rounded-tl-lg' : 'tertiary-background-app rounded-tr-lg'} text-white p-2 rounded-bl-lg rounded-br-lg">
                     <span class="text-xs text-white block mb-1 font-bold">${message.user.name}</span>`;
-                        if (message.media_url.endsWith('.mp4')) {
+                        if (message.media_url.endsWith('.mp4') || message.media_url.endsWith('.mov')) {
                             mediaElement += `
                     <video controls preload="none" class="w-full" poster="{{ asset('source/assets/images/') }}/video.png">
                         <source src="{{ asset('source/media/') }}/${message.media_url}" type="video/mp4">
@@ -108,7 +108,7 @@ function loadChat(chatId, discussionName, discussionPicture, newOpening = true)
                         <source src="{{ asset('source/media/') }}/${message.media_url}" type="audio/mpeg">
                         Your browser does not support the audio element.
                     </audio>`;
-                        } else {
+                        }else {
                             mediaElement += `
                     <img src="{{ asset('source/media/') }}/${message.media_url}" class="w-full rounded-lg">`;
                         }