- Réglages du bug pour enlever des favoris
This commit is contained in:
@ -67,26 +67,21 @@
|
||||
|
||||
|
||||
{% if app.user %}
|
||||
{% for favori in favoris %}
|
||||
{% if favori.getIdGoogle() == book.id %}
|
||||
<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">
|
||||
<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 %}
|
||||
{% if favori.getIdGoogle() != book.id %}
|
||||
<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 %}
|
||||
|
||||
{% endfor %}
|
||||
{% 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 %}
|
||||
{% endif %}
|
||||
{% set isLiked = book.id in favoris|map(f => f.getIdGoogle()) %}
|
||||
<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: {{ isLiked ? 'true' : 'false' }} }"
|
||||
:fill="liked ? 'red' : 'none'"
|
||||
:stroke="liked ? 'red' : 'currentColor'"
|
||||
@click="toggleLike('{{ book.id }}', liked, $el); 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">
|
||||
@ -187,67 +182,47 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleLike(idGoogle, liked) {
|
||||
if (liked) {
|
||||
fetch("{{ path('unlike', {'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
|
||||
})
|
||||
}).then(response => response.json()).then(data => {
|
||||
if (data.status === 'removed') { // Mettre à jour le SVG ou l'état du bouton pour retirer le like
|
||||
console.log('Livre retiré des favoris');
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Erreur AJAX', error);
|
||||
});
|
||||
} else {
|
||||
fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
})
|
||||
}).then(response => response.json()).then(data => {
|
||||
if (data.status === 'added') {
|
||||
console.log('Livre ajouté aux favoris');
|
||||
}
|
||||
}).catch(error => {
|
||||
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 %}
|
||||
});
|
||||
function toggleLike(idGoogle, liked, element) {
|
||||
if (liked) {
|
||||
fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify({})
|
||||
}).then(response => response.json()).then(data => {
|
||||
if (data.status === 'removed') {
|
||||
console.log('Livre retiré des favoris');
|
||||
// Mettre à jour l'état visuel
|
||||
element.setAttribute('x-data', '{ liked: false }');
|
||||
element.querySelector('path').setAttribute('fill', 'none');
|
||||
element.querySelector('path').setAttribute('stroke', 'currentColor');
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Erreur AJAX', error);
|
||||
});
|
||||
} else {
|
||||
fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify({})
|
||||
}).then(response => response.json()).then(data => {
|
||||
if (data.status === 'added') {
|
||||
console.log('Livre ajouté aux favoris');
|
||||
// Mettre à jour l'état visuel
|
||||
element.setAttribute('x-data', '{ liked: true }');
|
||||
element.querySelector('path').setAttribute('fill', 'red');
|
||||
element.querySelector('path').setAttribute('stroke', 'red');
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Erreur AJAX', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user