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

- Modification des Favoris bdd + code

Browse Source
This commit is contained in:
Kilian Beraud
2025-01-30 14:58:25 +01:00
parent 4a84f5ec7d
commit 26950905d6
3 changed files with 211 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,19 +69,27 @@
{% if app.user %}
{% 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>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="{{ isLiked ? 'red' : 'none' }}"
stroke="{{ isLiked ? 'red' : 'currentColor' }}"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="like-button absolute top-2 right-2 w-6 h-6 cursor-pointer transition-colors duration-300"
data-id-google="{{ book.id }}"
data-liked="{{ isLiked ? 'true' : 'false' }}"
data-title="{{ book.volumeInfo.title | default('Titre non disponible') }}"
data-authors="{{ book.volumeInfo.authors is defined ? book.volumeInfo.authors | join(', ') : '' }}"
data-images="{{ book.volumeInfo.imageLinks.smallThumbnail is defined ? book.volumeInfo.imageLinks.smallThumbnail : '' }}"
data-description="{{ book.volumeInfo.description | raw | default('Description non disponible') }}"
data-date="{{ book.volumeInfo.publishedDate | default('Date non disponible') }}"
data-pages="{{ book.volumeInfo.pageCount | default('0') }}">
<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 %}
@ -181,47 +189,51 @@
</div>
<script>
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);
});
}
function toggleLike(idGoogle, liked, element, bookDetails) {
const url = liked
? "{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle)
: "{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle);
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify(bookDetails)
})
.then(response => response.json())
.then(data => {
if ((liked && data.status === 'removed') || (!liked && data.status === 'added')) {
// Mettre à jour l'état visuel
const newLikedState = !liked;
element.setAttribute('data-liked', newLikedState.toString());
element.querySelector('path').setAttribute('fill', newLikedState ? 'red' : 'none');
element.querySelector('path').setAttribute('stroke', newLikedState ? 'red' : 'currentColor');
}
})
.catch(error => {
console.error('Erreur AJAX', error);
});
}
document.querySelectorAll('.like-button').forEach(button => {
button.addEventListener('click', function() {
const idGoogle = this.dataset.idGoogle;
const liked = this.getAttribute('data-liked') === 'true'; // Lire l'état actuel
const bookDetails = {
title: this.dataset.title,
authors: this.dataset.authors,
images: this.dataset.images,
description: this.dataset.description,
date: this.dataset.date,
pages: this.dataset.pages
};
toggleLike(idGoogle, liked, this, bookDetails);
});
});
document.addEventListener('DOMContentLoaded', () => {
{% for book in datas.items %}
const openModalBtn{{ loop.index }} = document.getElementById('openModalBtn-{{ loop.index }}');