templates/pages/livreDetail.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4. <div class="container-fluid px-4">
  5. <!-- Bouton retour -->
  6. <div class="mb-3">
  7. <a href="javascript:history.back()" class="btn btn-outline-secondary btn-sm">
  8. <i class="fas fa-arrow-left"></i> Retour
  9. </a>
  10. </div>
  12. <!-- Card principale -->
  13. <div class="card shadow-sm">
  14. <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  15. <h4 class="mb-0 text-white">
  16. <i class="fas fa-book"></i> {{ livre.titre }}
  17. {% if livre.tome and livre.tome > 0 %}
  18. <span class="badge badge-light ml-2">Tome {{ livre.tome }}</span>
  19. {% endif %}
  20. </h4>
  21. </div>
  23. <div class="card-body">
  24. <div class="row">
  25. <!-- Colonne Image -->
  26. <div class="col-md-4 text-center mb-4">
  27. <div class="livre-cover-container">
  28. <img id='img-{{ livre.id }}'
  29. class="img-fluid rounded shadow"
  30. alt="{{ livre.titre }}"
  31. src="{{ livre.getBestImage }}"
  32. style="max-height: 400px; object-fit: contain;" />
  33. </div>
  35. {% if is_granted('IS_AUTHENTICATED_FULLY') %}
  36. <div class="mt-3">
  37. {% if livre.isbn %}
  38. <button type="button" id="scrapeCoverBtn" class="btn btn-primary btn-sm mb-2" data-livre-id="{{ livre.id }}">
  39. <i class="fas fa-magic"></i> Scraper des images
  40. </button>
  41. <br>
  42. {% endif %}
  44. {% if livre.getImage2 %}
  45. <span class="badge badge-info mb-2"><i class="fas fa-link"></i> Image externe</span>
  46. <br>
  47. <button type="button" id="removeCoverUrlBtn" class="btn btn-outline-danger btn-sm">
  48. <i class="fas fa-undo"></i> Image originale
  49. </button>
  50. {% else %}
  51. {% if livre.isbn %}
  52. <button type="button" id="searchCoverBtn" class="btn btn-outline-primary btn-sm" data-livre-id="{{ livre.id }}">
  53. <i class="fas fa-search"></i> Chercher couverture
  54. </button>
  55. {% endif %}
  56. <button type="button" id="manualUrlBtn" class="btn btn-outline-secondary btn-sm">
  57. <i class="fas fa-link"></i> URL manuelle
  58. </button>
  59. {% endif %}
  61. <div id="coverSearchResult" class="mt-2" style="display: none;">
  62. <div id="coverPreview" class="mb-2"></div>
  63. <button type="button" id="applyCoverBtn" class="btn btn-success btn-sm" style="display: none;">
  64. <i class="fas fa-check"></i> Utiliser
  65. </button>
  66. <span id="coverMessage" class="text-muted"></span>
  67. </div>
  69. <div id="manualUrlForm" class="mt-3 text-left" style="display: none;">
  70. <p class="small text-muted mb-2">
  71. Rechercher sur :
  72. {% if livre.amazon %}
  73. <a href="{{ livre.amazon }}" target="_blank" class="badge badge-warning"><i class="fas fa-external-link-alt"></i> Produit</a>
  74. {% endif %}
  75. {% if livre.isbn %}
  76. <a href="https://www.amazon.fr/s?k={{ livre.isbn }}" target="_blank" class="badge badge-secondary">Amazon</a>
  77. <a href="https://www.google.com/search?tbm=isch&q={{ livre.isbn }}+couverture" target="_blank" class="badge badge-success">Google</a>
  78. {% endif %}
  79. </p>
  80. <div class="input-group input-group-sm">
  81. <input type="url" id="manualUrlInput" class="form-control" placeholder="URL de l'image...">
  82. <div class="input-group-append">
  83. <button type="button" id="previewManualUrlBtn" class="btn btn-primary">
  84. <i class="fas fa-eye"></i>
  85. </button>
  86. </div>
  87. </div>
  88. <div id="manualPreview" class="mt-2"></div>
  89. </div>
  90. </div>
  91. {% endif %}
  92. </div>
  94. <!-- Colonne Informations -->
  95. <div class="col-md-8">
  96. <!-- Auteurs -->
  97. {% if livre.listeAuteur|length > 0 %}
  98. <div class="mb-3">
  99. <h6 class="text-muted mb-2"><i class="fas fa-pen-fancy"></i> Auteur(s)</h6>
  100. <div>
  101. {% for auteur in livre.listeAuteur %}
  102. <a href="{{ path('auteur_detail', {'id': auteur.auteur.id}) }}" class="badge badge-primary mr-1 mb-1" style="font-size: 0.9rem;">
  103. {{ auteur.auteur.nom }}
  104. </a>
  105. {% endfor %}
  106. </div>
  107. </div>
  108. {% endif %}
  110. <!-- Infos principales -->
  111. <div class="row">
  112. <div class="col-sm-6">
  113. <div class="info-item mb-3">
  114. <small class="text-muted d-block"><i class="fas fa-building"></i> Éditeur</small>
  115. <strong>{% if livre.edition %}{{ livre.edition.nom }}{% else %}-{% endif %}</strong>
  116. </div>
  117. </div>
  118. <div class="col-sm-6">
  119. <div class="info-item mb-3">
  120. <small class="text-muted d-block"><i class="fas fa-calendar"></i> Année</small>
  121. <strong>{% if livre.annee %}{{ livre.annee }}{% else %}-{% endif %}</strong>
  122. </div>
  123. </div>
  124. <div class="col-sm-6">
  125. <div class="info-item mb-3">
  126. <small class="text-muted d-block"><i class="fas fa-barcode"></i> ISBN</small>
  127. <strong>{% if livre.isbn %}{{ livre.isbn }}{% else %}-{% endif %}</strong>
  128. </div>
  129. </div>
  130. <div class="col-sm-6">
  131. <div class="info-item mb-3">
  132. <small class="text-muted d-block"><i class="fas fa-euro-sign"></i> Prix</small>
  133. <strong>{{ livre.prixBase|number_format(2) }} {% if livre.monnaie %}{{ livre.monnaie.symbole }}{% endif %}</strong>
  134. </div>
  135. </div>
  136. {% if livre.collection %}
  137. <div class="col-sm-6">
  138. <div class="info-item mb-3">
  139. <small class="text-muted d-block"><i class="fas fa-layer-group"></i> Collection</small>
  140. <strong>{{ livre.collection.nom }}</strong>
  141. </div>
  142. </div>
  143. {% endif %}
  144. {% if livre.category %}
  145. <div class="col-sm-6">
  146. <div class="info-item mb-3">
  147. <small class="text-muted d-block"><i class="fas fa-tag"></i> Catégorie</small>
  148. <strong>{{ livre.category.nom }}</strong>
  149. </div>
  150. </div>
  151. {% endif %}
  152. {% if livre.pages and livre.pages > 0 %}
  153. <div class="col-sm-6">
  154. <div class="info-item mb-3">
  155. <small class="text-muted d-block"><i class="fas fa-file-alt"></i> Pages</small>
  156. <strong>{{ livre.pages }}</strong>
  157. </div>
  158. </div>
  159. {% endif %}
  160. {% if livre.amazon %}
  161. <div class="col-sm-6">
  162. <div class="info-item mb-3">
  163. <small class="text-muted d-block"><i class="fas fa-external-link-alt"></i> Lien</small>
  164. <a href="{{ livre.amazon }}" target="_blank" class="btn btn-sm btn-outline-warning">
  165. <i class="fas fa-shopping-cart"></i> Voir le produit
  166. </a>
  167. </div>
  168. </div>
  169. {% endif %}
  170. </div>
  172. <!-- Synopsis -->
  173. {% if livre.resume %}
  174. <div class="mt-3">
  175. <h6 class="text-muted mb-2"><i class="fas fa-align-left"></i> Synopsis</h6>
  176. <div class="bg-light p-3 rounded" style="max-height: 200px; overflow-y: auto;">
  177. {{ livre.resume|nl2br }}
  178. </div>
  179. </div>
  180. {% endif %}
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  186. <!-- Propriétaires -->
  187. {% if livre.listeUser|length > 0 %}
  188. <div class="card mt-4 shadow-sm">
  189. <div class="card-header bg-dark text-white">
  190. <h5 class="mb-0"><i class="fas fa-users"></i> Propriétaires ({{ livre.listeUser|length }})</h5>
  191. </div>
  192. <div class="card-body p-0">
  193. <div class="table-responsive">
  194. <table class="table table-hover mb-0">
  195. <thead class="thead-light">
  196. <tr>
  197. <th><i class="fas fa-user"></i> Utilisateur</th>
  198. <th><i class="fas fa-calendar-alt"></i> Date d'acquisition</th>
  199. <th><i class="fas fa-comment"></i> Commentaire</th>
  200. </tr>
  201. </thead>
  202. <tbody>
  203. {% for lienuserLivre in livre.listeUser %}
  204. <tr>
  205. <td>
  206. <strong>{{ lienuserLivre.user.name }} {{ lienuserLivre.user.lastName }}</strong>
  207. </td>
  208. <td>
  209. {% if lienuserLivre.dateAchat %}
  210. {{ lienuserLivre.dateAchat|date('d/m/Y') }}
  211. {% else %}
  212. <span class="text-muted">-</span>
  213. {% endif %}
  214. </td>
  215. <td>
  216. {% if lienuserLivre.commentaire %}
  217. {{ lienuserLivre.commentaire }}
  218. {% else %}
  219. <span class="text-muted">-</span>
  220. {% endif %}
  221. </td>
  222. </tr>
  223. {% endfor %}
  224. </tbody>
  225. </table>
  226. </div>
  227. </div>
  228. </div>
  229. {% endif %}
  230. </div>
  232. <!-- Modale de sélection d'images scrapées -->
  233. <div class="modal fade" id="scrapedImagesModal" tabindex="-1" role="dialog">
  234. <div class="modal-dialog modal-xl" role="document">
  235. <div class="modal-content">
  236. <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  237. <h5 class="modal-title text-white">
  238. <i class="fas fa-images"></i> Images trouvées
  239. </h5>
  240. <button type="button" class="close text-white" data-dismiss="modal">
  241. <span>&times;</span>
  242. </button>
  243. </div>
  244. <div class="modal-body">
  245. <div id="scrapedImagesLoading" class="text-center py-5">
  246. <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
  247. <p class="mt-3">Recherche en cours sur BDGuest, Fnac, Decitre, Amazon...</p>
  248. <small class="text-muted">Cela peut prendre jusqu'à 2 minutes</small>
  249. </div>
  250. <div id="scrapedImagesContent" style="display: none;">
  251. <p class="text-muted mb-3">
  252. <i class="fas fa-info-circle"></i> Cliquez sur une image pour la sélectionner
  253. </p>
  254. <div id="scrapedImagesGrid" class="row"></div>
  255. </div>
  256. <div id="scrapedImagesError" class="alert alert-warning" style="display: none;">
  257. <i class="fas fa-exclamation-triangle"></i> <span id="scrapedImagesErrorMsg"></span>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  264. <style>
  265. .info-item {
  266. padding: 10px;
  267. background: #f8f9fa;
  268. border-radius: 8px;
  269. border-left: 3px solid #667eea;
  270. }
  271. .livre-cover-container {
  272. background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  273. padding: 20px;
  274. border-radius: 10px;
  275. }
  276. .scraped-image-card {
  277. cursor: pointer;
  278. transition: all 0.3s;
  279. border: 3px solid transparent;
  280. }
  281. .scraped-image-card:hover {
  282. transform: translateY(-5px);
  283. box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  284. }
  285. .scraped-image-card.selected {
  286. border-color: #667eea;
  287. box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
  288. }
  289. .scraped-image-card img {
  290. max-height: 300px;
  291. object-fit: contain;
  292. width: 100%;
  293. }
  294. </style>
  296. {% endblock %}
  298. {% block javascripts %}
  299. {{ parent() }}
  300. {% if is_granted('IS_AUTHENTICATED_FULLY') and livre.isbn %}
  301. <script>
  302. $(document).ready(function() {
  303. var foundImageUrl = null;
  304. var livreId = {{ livre.id }};
  306. $('#searchCoverBtn').on('click', function() {
  307. var btn = $(this);
  308. btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Recherche en cours...');
  309. $('#coverSearchResult').show();
  310. $('#coverMessage').text('Recherche en cours...');
  311. $('#coverPreview').empty();
  312. $('#applyCoverBtn').hide();
  313. $('#manualUrlForm').hide();
  315. $.ajax({
  316. url: '/livre/' + livreId + '/rechercher-couverture',
  317. method: 'GET',
  318. success: function(response) {
  319. btn.prop('disabled', false).html('<i class="fas fa-search"></i> Rechercher automatiquement');
  321. if (response.success && response.images && response.images.length > 0) {
  322. var html = '<p class="text-success"><i class="fas fa-check-circle"></i> ' + response.message + '</p>';
  323. html += '<div class="row">';
  325. response.images.forEach(function(img, index) {
  326. html += '<div class="col-4 col-md-3 mb-2">';
  327. html += '<div class="card h-100">';
  328. html += '<img src="' + img.url + '" class="card-img-top img-select-cover" style="height: 120px; object-fit: contain; cursor: pointer;" data-url="' + img.url + '" alt="Option ' + (index+1) + '" onerror="this.parentElement.parentElement.remove()">';
  329. html += '<div class="card-body p-1 text-center"><small class="text-muted">' + img.source + '</small></div>';
  330. html += '</div></div>';
  331. });
  333. html += '</div>';
  334. html += '<p class="small text-muted mt-2">Cliquez sur une image pour la sélectionner</p>';
  336. $('#coverPreview').html(html);
  337. } else {
  338. $('#coverMessage').html('<span class="text-warning"><i class="fas fa-exclamation-triangle"></i> ' + (response.message || 'Aucune image trouvée') + '</span>');
  339. }
  340. },
  341. error: function() {
  342. btn.prop('disabled', false).html('<i class="fas fa-search"></i> Rechercher automatiquement');
  343. $('#coverMessage').html('<span class="text-danger"><i class="fas fa-times-circle"></i> Erreur lors de la recherche</span>');
  344. }
  345. });
  346. });
  348. // Sélection d'une image dans la galerie
  349. $(document).on('click', '.img-select-cover', function() {
  350. $('.img-select-cover').removeClass('border-success').css('border-width', '1px');
  351. $(this).addClass('border-success').css('border-width', '3px');
  352. foundImageUrl = $(this).data('url');
  353. $('#applyCoverBtn').show();
  354. });
  356. $('#applyCoverBtn').on('click', function() {
  357. if (!foundImageUrl) return;
  359. var btn = $(this);
  360. btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Enregistrement...');
  362. $.ajax({
  363. url: '/livre/' + livreId + '/mettre-a-jour-couverture',
  364. method: 'POST',
  365. data: { image_url: foundImageUrl },
  366. success: function(response) {
  367. if (response.success) {
  368. $('#img-' + livreId).attr('src', response.imageUrl);
  369. $('#coverSearchResult').html('<span class="text-success"><i class="fas fa-check-circle"></i> ' + response.message + '</span>');
  370. setTimeout(function() { location.reload(); }, 1500);
  371. } else {
  372. btn.prop('disabled', false).html('<i class="fas fa-check"></i> Utiliser cette image');
  373. $('#coverMessage').html('<span class="text-danger">' + response.message + '</span>');
  374. }
  375. },
  376. error: function() {
  377. btn.prop('disabled', false).html('<i class="fas fa-check"></i> Utiliser cette image');
  378. $('#coverMessage').html('<span class="text-danger">Erreur lors de l\'enregistrement</span>');
  379. }
  380. });
  381. });
  383. $('#removeCoverUrlBtn').on('click', function() {
  384. if (!confirm('Revenir à l\'image originale stockée en base ?')) return;
  386. var btn = $(this);
  387. btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Suppression...');
  389. $.ajax({
  390. url: '/livre/' + livreId + '/supprimer-url-couverture',
  391. method: 'POST',
  392. success: function(response) {
  393. if (response.success) {
  394. location.reload();
  395. } else {
  396. btn.prop('disabled', false).html('<i class="fas fa-undo"></i> Revenir à l\'image originale');
  397. alert(response.message);
  398. }
  399. },
  400. error: function() {
  401. btn.prop('disabled', false).html('<i class="fas fa-undo"></i> Revenir à l\'image originale');
  402. alert('Erreur lors de la suppression');
  403. }
  404. });
  405. });
  407. // Saisie manuelle d'URL
  408. $('#manualUrlBtn').on('click', function() {
  409. $('#manualUrlForm').toggle();
  410. $('#coverSearchResult').hide();
  411. });
  413. $('#previewManualUrlBtn').on('click', function() {
  414. var url = $('#manualUrlInput').val().trim();
  415. if (!url) {
  416. alert('Veuillez saisir une URL');
  417. return;
  418. }
  420. foundImageUrl = url;
  421. $('#manualPreview').html(
  422. '<img src="' + url + '" class="img-thumbnail" style="max-height: 200px;" alt="Prévisualisation" onerror="this.parentElement.innerHTML=\'<span class=text-danger>Image non accessible</span>\'">' +
  423. '<br><button type="button" id="applyManualUrlBtn" class="btn btn-success btn-sm mt-2"><i class="fas fa-check"></i> Utiliser cette image</button>'
  424. );
  425. });
  427. $(document).on('click', '#applyManualUrlBtn', function() {
  428. if (!foundImageUrl) return;
  430. var btn = $(this);
  431. btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Enregistrement...');
  433. $.ajax({
  434. url: '/livre/' + livreId + '/mettre-a-jour-couverture',
  435. method: 'POST',
  436. data: { image_url: foundImageUrl },
  437. success: function(response) {
  438. if (response.success) {
  439. location.reload();
  440. } else {
  441. btn.prop('disabled', false).html('<i class="fas fa-check"></i> Utiliser cette image');
  442. alert(response.message);
  443. }
  444. },
  445. error: function() {
  446. btn.prop('disabled', false).html('<i class="fas fa-check"></i> Utiliser cette image');
  447. alert('Erreur lors de l\'enregistrement');
  448. }
  449. });
  450. });
  452. // Scraper des images via Puppeteer
  453. $('#scrapeCoverBtn').on('click', function() {
  454. var livreId = $(this).data('livre-id');
  456. // Ouvrir la modale
  457. $('#scrapedImagesModal').modal('show');
  459. // Réinitialiser l'état
  460. $('#scrapedImagesLoading').show();
  461. $('#scrapedImagesContent').hide();
  462. $('#scrapedImagesError').hide();
  463. $('#scrapedImagesGrid').empty();
  465. // Appeler le contrôleur qui va appeler Puppeteer
  466. $.ajax({
  467. url: '/livre/' + livreId + '/scrape-covers',
  468. method: 'GET',
  469. dataType: 'json',
  470. timeout: 120000, // 2 minutes
  471. success: function(response) {
  472. $('#scrapedImagesLoading').hide();
  474. if (response.images && response.images.length > 0) {
  475. $('#scrapedImagesContent').show();
  477. // Afficher les images
  478. response.images.forEach(function(image) {
  479. var card = $('<div class="col-md-4 mb-3">' +
  480. '<div class="card scraped-image-card h-100" data-image-url="' + image.url + '">' +
  481. '<div class="card-body text-center p-2">' +
  482. '<img src="' + image.url + '" alt="Couverture" class="img-fluid mb-2" style="max-height: 300px; object-fit: contain;">' +
  483. '<div class="mb-2">' +
  484. '<span class="badge badge-primary">' + image.source + '</span>' +
  485. '<span class="badge badge-secondary ml-1">' + image.quality + '</span>' +
  486. '</div>' +
  487. '<button class="btn btn-success btn-sm btn-block select-image-btn">Utiliser</button>' +
  488. '</div>' +
  489. '</div>' +
  490. '</div>');
  492. $('#scrapedImagesGrid').append(card);
  493. });
  495. // Gérer la sélection d'image
  496. $('.select-image-btn').on('click', function() {
  497. var imageUrl = $(this).closest('.scraped-image-card').data('image-url');
  499. if (!confirm('Utiliser cette image comme couverture ?')) {
  500. return;
  501. }
  503. // Marquer comme sélectionnée
  504. $('.scraped-image-card').removeClass('selected');
  505. $(this).closest('.scraped-image-card').addClass('selected');
  506. $(this).html('<i class="fas fa-spinner fa-spin"></i>').prop('disabled', true);
  508. // Enregistrer l'URL
  509. $.ajax({
  510. url: '/livre/' + livreId + '/update-cover-url',
  511. method: 'POST',
  512. data: { imageUrl: imageUrl },
  513. dataType: 'json',
  514. success: function(response) {
  515. if (response.success) {
  516. $('#scrapedImagesModal').modal('hide');
  517. location.reload();
  518. } else {
  519. alert('Erreur: ' + (response.error || 'Erreur inconnue'));
  520. $('.select-image-btn').html('Utiliser').prop('disabled', false);
  521. }
  522. },
  523. error: function(xhr) {
  524. var errorMsg = 'Erreur lors de l\'enregistrement de l\'image';
  525. if (xhr.responseJSON && xhr.responseJSON.error) {
  526. errorMsg = xhr.responseJSON.error;
  527. }
  528. alert(errorMsg);
  529. $('.select-image-btn').html('Utiliser').prop('disabled', false);
  530. }
  531. });
  532. });
  534. } else {
  535. $('#scrapedImagesError').show();
  536. $('#scrapedImagesErrorMsg').text('Aucune image trouvée sur BDGuest, Fnac, Decitre et Amazon pour l\'ISBN ' + response.isbn);
  537. }
  538. },
  539. error: function(xhr) {
  540. $('#scrapedImagesLoading').hide();
  541. $('#scrapedImagesError').show();
  542. var errorMsg = 'Erreur lors de la recherche d\'images. Le service Puppeteer est-il démarré ?';
  543. if (xhr.responseJSON && xhr.responseJSON.error) {
  544. errorMsg = xhr.responseJSON.error;
  545. }
  546. $('#scrapedImagesErrorMsg').text(errorMsg);
  547. }
  548. });
  549. });
  550. });
  551. </script>
  552. {% endif %}
  553. {% endblock %}