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

- Réglages du bug pour enlever des favoris

Browse Source
This commit is contained in:
Kilian Beraud
2025-01-30 11:26:54 +01:00
parent 60e6d9daf7
commit 4acc1955a9
1 changed files with 56 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,26 +67,21 @@
{% if app.user %} {% if app.user %}
{% for favori in favoris %} {% set isLiked = book.id in favoris|map(f => f.getIdGoogle()) %}
{% if favori.getIdGoogle() == book.id %} <svg
<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: true }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked"> xmlns="http://www.w3.org/2000/svg"
<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"/> fill="none"
</svg> viewbox="0 0 24 24"
{% endif %} stroke-width="1.5"
{% if favori.getIdGoogle() != book.id %} stroke="currentColor"
<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"> class="absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300"
<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"/> x-data="{ liked: {{ isLiked ? 'true' : 'false' }} }"
</svg> :fill="liked ? 'red' : 'none'"
{% endif %} :stroke="liked ? 'red' : 'currentColor'"
@click="toggleLike('{{ book.id }}', liked, $el); liked = !liked">
{% endfor %} <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"/>
{% if favoris is empty %} </svg>
{% endif %}
<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 %}
{% endif %}
<div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50"> <div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
@ -187,67 +182,47 @@
</div> </div>
<script> <script>
function toggleLike(idGoogle, liked) { function toggleLike(idGoogle, liked, element) {
if (liked) { if (liked) {
fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), { fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest' '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 => {
}).then(response => response.json()).then(data => { if (data.status === 'removed') {
if (data.status === 'removed') { // Mettre à jour le SVG ou l'état du bouton pour retirer le like console.log('Livre retiré des favoris');
console.log('Livre retiré des favoris'); // Mettre à jour l'état visuel
} element.setAttribute('x-data', '{ liked: false }');
}).catch(error => { element.querySelector('path').setAttribute('fill', 'none');
console.error('Erreur AJAX', error); element.querySelector('path').setAttribute('stroke', 'currentColor');
}); }
} else { }).catch(error => {
fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), { console.error('Erreur AJAX', error);
method: 'POST', });
headers: { } else {
'Content-Type': 'application/json', fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
'X-Requested-With': 'XMLHttpRequest' method: 'POST',
}, headers: {
body: JSON.stringify({ 'Content-Type': 'application/json',
}) 'X-Requested-With': 'XMLHttpRequest'
}).then(response => response.json()).then(data => { },
if (data.status === 'added') { body: JSON.stringify({})
console.log('Livre ajouté aux favoris'); }).then(response => response.json()).then(data => {
} if (data.status === 'added') {
}).catch(error => { console.log('Livre ajouté aux favoris');
console.error('Erreur AJAX', error); // Mettre à jour l'état visuel
}); element.setAttribute('x-data', '{ liked: true }');
} element.querySelector('path').setAttribute('fill', 'red');
} element.querySelector('path').setAttribute('stroke', 'red');
document.addEventListener('DOMContentLoaded', () => { }
{% for book in datas.items %} }).catch(error => {
const openModalBtn{{ loop.index }} = document.getElementById('openModalBtn-{{ loop.index }}'); console.error('Erreur AJAX', error);
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> </script>