Skip to content

Commit

Permalink
Loader on button that interract with db
Browse files Browse the repository at this point in the history
  • Loading branch information
@Saodus
Saodus committed Dec 16, 2024
1 parent 9b2b032 commit 6ddfff6
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 82 deletions.
86 changes: 45 additions & 41 deletions resources/views/components/messaging/chatbar.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,13 @@ class="rounded-full secondary-background-app p-2 flex items-center justify-cente
<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 onclick="sendMessage()" class="rounded-full secondary-background-app p-2 flex items-center justify-center">
<button id="send-message-btn" onclick="sendMessage()" 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;">
<div class="spinner"></div>
</span>

<x-modal name="create-file-modal" focusable>
<form method="post" class="p-6" x-data="capsuleForm()" id="create-file-modal-form" @submit.prevent="submitForm">
@csrf
Expand Down Expand Up @@ -77,46 +81,46 @@ function handleDrop(event) {
</div>

<script>
function capsuleForm() {
return {
chatMessage: '',
file: null,
submitForm() {
event.preventDefault();
// Récupérer dynamiquement l'ID de la discussion depuis le champ caché
const discussionId = document.getElementById('discussion-id').value;
function capsuleForm() {
return {
chatMessage: '',
file: null,
submitForm() {
event.preventDefault();
// Récupérer dynamiquement l'ID de la discussion depuis le champ caché
const discussionId = document.getElementById('discussion-id').value;
// Créer l'objet FormData avec les données du formulaire
const formData = new FormData(document.getElementById('create-file-modal-form'));
// Créer l'objet FormData avec les données du formulaire
const formData = new FormData(document.getElementById('create-file-modal-form'));
// Effectuer la requête AJAX avec `fetch`
fetch(`/chat/${discussionId}/capsule`, {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
})
.then(response => response.json())
.then(data => {
if (data.message.id) {
// Fermer le modal et réinitialiser le formulaire
this.chatMessage = '';
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');
}
})
.catch(error => {
alert('Erreur lors de l\'envoi');
console.error(error);
});
}
};
}
// Effectuer la requête AJAX avec `fetch`
fetch(`/chat/${discussionId}/capsule`, {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
})
.then(response => response.json())
.then(data => {
if (data.message.id) {
// Fermer le modal et réinitialiser le formulaire
this.chatMessage = '';
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');
}
})
.catch(error => {
alert('Erreur lors de l\'envoi');
console.error(error);
});
}
};
}
</script>
66 changes: 37 additions & 29 deletions resources/views/components/messaging/discussion-sidebar.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,21 @@ class="flex items-center justify-center">
<p class="font-medium text-white">Sélectionnez le/les amis à ajouter à la discussion</p>
<div class="mt-2 overflow-y-auto max-h-48 scrollbar-hide rounded p-2">
@foreach ($friends as $friend)
<div
class="flex items-center justify-between mb-2 p-2 rounded hover:bg-gray-700 transition-colors">
<div class="flex items-center">
@if ($friend->image)
<img src="{{ asset('storage/' . $friend->image) }}" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@else
<img src="{{ asset('source/assets/avatar/avatar.png') }}"
alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@endif
<span class="text-white font-medium">{{ $friend->name }}</span>
</div>
<input type="checkbox" name="friends[]" value="{{ $friend->id }}"
class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray-500"
x-model="selectedFriends">
<div
class="flex items-center justify-between mb-2 p-2 rounded hover:bg-gray-700 transition-colors">
<div class="flex items-center">
@if ($friend->image)
<img src="{{ asset('storage/' . $friend->image) }}" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@else
<img src="{{ asset('source/assets/avatar/avatar.png') }}"
alt="Avatar" class="w-8 h-8 rounded-full mr-3">
@endif
<span class="text-white font-medium">{{ $friend->name }}</span>
</div>
<input type="checkbox" name="friends[]" value="{{ $friend->id }}"
class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray-500"
x-model="selectedFriends">
</div>
@endforeach
<p x-show="errors.friends" class="text-red-500 text-sm mt-1">Sélectionnez au moins
un ami.</p>
Expand All @@ -53,29 +53,32 @@ class="h-5 w-5 bg-gray-400 rounded-full focus:ring-0 border-none checked:bg-gray
<x-secondary-button x-on:click="$dispatch('close')">
Annuler
</x-secondary-button>
<x-primary-button class="ml-3">
<x-primary-button id="create-chat" class="ml-3">
Créer la discussion
</x-primary-button>
<span id="create-chat-loader" style="display:none;">
<div class="spinner"></div>
</span>
</div>
</form>
</x-modal>
</div>
</div>
</li>
@foreach ($discussions as $discussion)
<li class="flex items-center p-2 border-b border-black overflow-hidden mr-2 cursor-pointer"
onclick="loadChat({{ $discussion->id }}, '{{ $discussion->name }}', '{{ $discussion->discussionPicture }}', {{ true }})">
<img src="{{ $discussion->discussionPicture }}" alt="Avatar" class="w-10 h-10 rounded-full mr-3 flex-shrink-0">
<!-- Ajout de flex-shrink-0 pour éviter que l'image rétrécisse -->
<div class="flex-1">
<div class="font-bold">{{ $discussion->name }}</div>
<div class="text-sm text-gray-400 whitespace-nowrap">
@if ($discussion->messages->first())
{{ $discussion->messages->first()->message }}
@endif
</div>
<li class="flex items-center p-2 border-b border-black overflow-hidden mr-2 cursor-pointer"
onclick="loadChat({{ $discussion->id }}, '{{ $discussion->name }}', '{{ $discussion->discussionPicture }}', {{ true }})">
<img src="{{ $discussion->discussionPicture }}" alt="Avatar" class="w-10 h-10 rounded-full mr-3 flex-shrink-0">
<!-- Ajout de flex-shrink-0 pour éviter que l'image rétrécisse -->
<div class="flex-1">
<div class="font-bold">{{ $discussion->name }}</div>
<div class="text-sm text-gray-400 whitespace-nowrap">
@if ($discussion->messages->first())
{{ $discussion->messages->first()->message }}
@endif
</div>
</li>
</div>
</li>
@endforeach
</ul>
</div>
Expand All @@ -92,12 +95,17 @@ function chatForm() {
validateForm() {
// Réinitialise l'erreur des amis
this.errors.friends = this.selectedFriends.length === 0;
let createChatBtn = document.getElementById('create-chat');
let createChatLoader = document.getElementById('create-chat-loader');
createChatBtn.style.display = 'none';
createChatLoader.style.display = 'block';
if (!this.errors.friends) {
// Soumet le formulaire si la validation passe
this.$el.submit();
}
createChatBtn.style.display = 'block';
createChatLoader.style.display = 'none';
}
}
}
</script>
</script>
7 changes: 5 additions & 2 deletions resources/views/dashboard.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,8 @@ function startAutoRefresh(intervalTime = 5000) {
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;
fetch(`/chat/${currentChatId}/messages`, {
Expand All @@ -223,6 +225,8 @@ function sendMessage() {
document.getElementById('message-content').value = '';
})
.catch(error => console.error('Erreur:', error));
document.getElementById('send-message-btn').style.display = 'block';
document.getElementById('send-message-loader').style.display = 'none';
}
function scrollToBottom() {
Expand Down Expand Up @@ -253,7 +257,6 @@ function leaveChat() {
}
})
.then(data => {
alert(data.message || "Vous avez quitté la conversation.");
currentChatId = null;
document.getElementById('chat-area').style.display = 'none';
Expand All @@ -266,7 +269,7 @@ function leaveChat() {
alert("Une erreur s'est produite en essayant de quitter la conversation.");
});
}
leaveChatWithLoad()
function leaveChatWithLoad()
{
const loader = document.getElementById('leave-chat-loader');
const button = event.target;
Expand Down
31 changes: 21 additions & 10 deletions resources/views/friendships/create.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,46 @@

<div class="space-y-2">
<input type="text" name="name" id="name" value="{{ old('name') }}" required
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"
placeholder="Enter friend's username">
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"
placeholder="Enter friend's username">

@error('name')
<p class="text-red-500 text-xs mt-1">{{ $message }}</p>
<p class="text-red-500 text-xs mt-1">{{ $message }}</p>
@enderror
</div>

<div>
<button type="submit" class="w-full text-white py-2 secondary-background-app transition-colors duration-200">
<button id="add-friend-btn" type="submit" class="w-full text-white py-2 secondary-background-app transition-colors duration-200" onclick="addFriendWithLoad()">
Add Friend
</button>
<span id="add-friend-loader" style="display:none;">
<div class="spinner"></div>
</span>

</div>

<!-- Affichage du message de succès ou d'erreur sous le champ de saisie -->
<div>
@if(session('success'))
<p class="text-green-500 mt-1">
{{ session('success') }}
</p>
<p class="text-green-500 mt-1">
{{ session('success') }}
</p>
@endif

@if(session('error'))
<p class="text-red-500 mt-1">
{{ session('error') }}
</p>
<p class="text-red-500 mt-1">
{{ session('error') }}
</p>
@endif
</div>

</form>
</div>
</x-app-layout>

<script>
function addFriendWithLoad() {
document.getElementById('add-friend-btn').style.display = 'none';
document.getElementById('add-friend-loader').style.display = 'block';
}
</script>

0 comments on commit 6ddfff6

Please sign in to comment.