KilianBrd/BookNest
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

- Ajout d'une modal lorsqu'on clic sur un livre.

Browse Source
This commit is contained in:
Fabienmcll
2025-01-30 09:24:43 +01:00
parent 31f64b9e5a
commit a8e2510a03
1 changed files with 120 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
templates/apiSearch/index.html.twig
View File

@ -3,7 +3,6 @@
{% block title %}{% endblock %}
{% block body %}
<div>
<div class="w-1/2 py-2 flex flex-col justify-center mt-5 mx-auto">
<h1 class="text-2xl font-bold">Résultats pour :
@ -74,15 +73,65 @@
</svg>
{% endif %}
{% endfor %}
{% endif %}
{% if favoris is empty %}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300" x-data="{ liked: false }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
</svg>
{% endif %}
<div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
<div class="relative bg-white p-6 rounded-lg w-1/3">
<div class="flex flex-row w-1/4">
{% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
<img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2">
{% endif %}
</div>
<svg id="closeModalSvg-{{ loop.index }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="absolute top-2 right-2 w-6 h-6 cursor-pointer text-gray-500 hover:text-gray-700">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
{% if book.volumeInfo.title is defined and book.volumeInfo.title is not empty %}
<p class="p-2 italic font-bold">Titre : <span class="font-normal">{{ book.volumeInfo.title }}</span></p>
{% endif %}
{% if book.volumeInfo.authors is defined %}
<p class="p-2 italic font-bold"> Auteur(s) : <span class="font-normal"> {{ book.volumeInfo.authors | join(", ") }}</span></p>
{% endif %}
{% if book.volumeInfo.publisher is defined and book.volumeInfo.publisher is not empty %}
<p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
{% endif %}
{% if book.volumeInfo.publishedDate is defined and book.volumeInfo.publishedDate is not empty %}
<p class="p-2 italic font-bold">Date de publication : <span class="font-normal">{{ book.volumeInfo.publishedDate }}</span></p>
{% endif %}
{% if book.volumeInfo.categories is defined and book.volumeInfo.categories is not empty %}
{% for categorie in book.volumeInfo.categories %}
<p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
{% endfor %}
{% endif %}
{% if book.volumeInfo.pageCount is defined and book.volumeInfo.pageCount is not empty %}
<p class="p-2 italic font-bold">Nombre de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
{% endif %}
{% if book.searchInfo is defined and book.searchInfo.textSnippet is defined and book.volumeInfo.description is not empty %}
<p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.volumeInfo.description | raw }}</span></p>
{% endif %}
<button id="closeModalBtn-{{ loop.index }}" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 mt-4">
Fermer
</button>
</div>
</div>
</div>
@ -131,7 +180,7 @@
</div>
<script>
function toggleLike(idGoogle, liked) { // Si l'élément est déjà aimé (liked = true), on le retire des favoris
function toggleLike(idGoogle, liked) {
if (liked) {
fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
method: 'POST',
@ -148,17 +197,17 @@ console.log('Livre retiré des favoris');
}).catch(error => {
console.error('Erreur AJAX', error);
});
} else { // Si l'élément n'est pas encore aimé (liked = false), on l'ajoute aux favoris
} else {
fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({ // D'autres données peuvent être envoyées si nécessaire
body: JSON.stringify({
})
}).then(response => response.json()).then(data => {
if (data.status === 'added') { // Mettre à jour le SVG ou l'état du bouton pour ajouter le like
if (data.status === 'added') {
console.log('Livre ajouté aux favoris');
}
}).catch(error => {
@ -166,6 +215,33 @@ console.error('Erreur AJAX', error);
});
}
}
document.addEventListener('DOMContentLoaded', () => {
{% for book in datas.items %}
const openModalBtn{{ loop.index }} = document.getElementById('openModalBtn-{{ loop.index }}');
const closeModalSvg{{ loop.index }} = document.getElementById('closeModalSvg-{{ loop.index }}');
const closeModalBtn{{ loop.index }} = document.getElementById('closeModalBtn-{{ loop.index }}');
const modal{{ loop.index }} = document.getElementById('myModal-{{ loop.index }}');
if (openModalBtn{{ loop.index }}) {
openModalBtn{{ loop.index }}.addEventListener('click', () => {
modal{{ loop.index }}.classList.remove('hidden');
});
}
if (closeModalSvg{{ loop.index }}) {
closeModalSvg{{ loop.index }}.addEventListener('click', () => {
modal{{ loop.index }}.classList.add('hidden');
});
}
if (closeModalBtn{{ loop.index }}) {
closeModalBtn{{ loop.index }}.addEventListener('click', () => {
modal{{ loop.index }}.classList.add('hidden');
});
}
{% endfor %}
});
</script>
{% endblock %}