réécriture des modal

autopost/server.js

@@ -392,13 +392,62 @@ autopostRouter.get('/', async (req, res) => {
 		</div>
 	  
 	  <!-- Modale pour afficher le mediainfo -->
-	  <div id="mediainfoModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+		<div id="mediainfoModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
-		<div class="bg-gray-800 p-6 rounded relative w-2/3">
+		  <div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-6xl relative">
-		  <span class="absolute top-2 right-2 text-white cursor-pointer close mediainfo-close">&times;</span>
+		
-		  <h2 class="text-xl font-semibold mb-4">Contenu du mediainfo</h2>
+			<!-- Bouton fermer -->
-		  <pre id="mediainfoContent" class="max-h-[80vh] overflow-y-auto"></pre>
+			<button type="button" 
+			  class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close mediainfo-close"
+			  title="Fermer">
+			  &times;
+			</button>
+		
+			<!-- Titre -->
+			<h2 class="text-2xl font-bold text-white mb-4 pr-16">📄 Contenu du mediainfo</h2>
+		
+			<!-- Bouton copier -->
+			<div class="mb-6">
+			  <button id="copyMediainfoBtn" 
+				class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-md transition">
+				📋 Copier JSON
+			  </button>
+			</div>
+		
+			<!-- Contenu mediainfo -->
+			<pre id="mediainfoContent" 
+			  class="max-h-[80vh] overflow-y-auto p-4 rounded-lg bg-gray-800 text-yellow-300 font-mono text-sm leading-relaxed border border-gray-700 shadow-inner whitespace-pre-wrap">
+			</pre>
+		
+		  </div>
 		</div>
-	  </div>
+		
+		<!-- Modale de confirmation de suppression -->
+		  <div id="confirmDeleteModal" class="hidden fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center z-50">
+			<div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-md relative">
+			  <button type="button" class="absolute top-3 right-3 text-gray-400 hover:text-white text-xl font-bold" id="confirmDeleteClose" aria-label="Fermer">
+				&times;
+			  </button>
+		  
+			  <h3 class="text-xl font-bold text-white mb-2">Supprimer cet enregistrement ?</h3>
+			  <p class="text-gray-300 text-sm mb-6">
+				Vous êtes sur le point de supprimer <span id="confirmItemName" class="text-white font-semibold"></span>. Cette action est irréversible.
+			  </p>
+		  
+			  <div class="flex justify-end gap-3">
+				<button type="button" id="cancelDeleteBtn" class="px-4 py-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-white">
+				  Annuler
+				</button>
+				<button type="button" id="confirmDeleteBtn" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white font-semibold">
+				  Supprimer
+				</button>
+			  </div>
+			</div>
+		  </div>
+		  
+		  <!-- Toast -->
+		  <div id="toast" class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg bg-gray-900/95 text-white shadow-lg z-[60]">
+			<span id="toastMsg">Supprimé.</span>
+		  </div>
 	  
 	  <script>
 			function updateTable(rows) {
@@ -545,24 +594,79 @@ autopostRouter.get('/', async (req, res) => {
 			  });
 		
 			  // Suppression
-			  $(document).on("click", ".delete-link", function(e) {
+			  // ---------- Confirmation de suppression (modale) ----------
-				e.preventDefault();
+				var pendingDeleteId = null;
-				if (confirm("Êtes-vous sûr de vouloir supprimer cet enregistrement ?")) {
+			  
+				function openConfirmModal(id, name) {
+				  pendingDeleteId = id;
+				  $('#confirmItemName').text(name || ('ID ' + id));
+				  $('#confirmDeleteModal').removeClass('hidden').fadeIn(120);
+				}
+			  
+				function closeConfirmModal() {
+				  $('#confirmDeleteModal').fadeOut(120, function() {
+					$(this).addClass('hidden');
+				  });
+				  pendingDeleteId = null;
+				}
+			  
+				function showToast(msg) {
+				  $('#toastMsg').text(msg || 'Opération effectuée');
+				  $('#toast').removeClass('hidden').fadeIn(120);
+				  setTimeout(function() {
+					$('#toast').fadeOut(150, function() { $(this).addClass('hidden'); });
+				  }, 1800);
+				}
+			  
+				// Ouvrir la modale au clic sur "Supprimer"
+				$(document).on('click', '.delete-link', function(e) {
+				  e.preventDefault();
 				  var releaseId = $(this).data('id');
+				  // Récupère le nom dans la 1ère cellule de la ligne (évite d’ajouter data-name partout)
+				  var name = $(this).closest('tr').find('td:first').text().trim();
+				  openConfirmModal(releaseId, name);
+				});
+			  
+				// Boutons de la modale
+				$('#cancelDeleteBtn, #confirmDeleteClose').on('click', function() {
+				  closeConfirmModal();
+				});
+			  
+				// Clic sur l’overlay pour fermer
+				$('#confirmDeleteModal').on('click', function(e) {
+				  if (e.target === this) { closeConfirmModal(); }
+				});
+			  
+				// Accessibilité clavier: Esc = fermer, Enter = confirmer
+				$(document).on('keydown', function(e) {
+				  var modalVisible = !$('#confirmDeleteModal').hasClass('hidden');
+				  if (!modalVisible) return;
+				  if (e.key === 'Escape') { closeConfirmModal(); }
+				  if (e.key === 'Enter')  { $('#confirmDeleteBtn').click(); }
+				});
+			  
+				// Confirmer et supprimer via AJAX
+				$('#confirmDeleteBtn').on('click', function() {
+				  if (!pendingDeleteId) return;
+				  var releaseId = pendingDeleteId;
+			  
 				  $.ajax({
 					url: '/autopost/delete/' + releaseId,
 					type: 'POST',
-					success: function(data) {
+					success: function() {
-					  $('#row-' + releaseId).fadeOut('slow', function(){
+					  // Effet visuel sur la ligne puis suppression
-						$(this).remove();
+					  $('#row-' + releaseId).css('outline', '2px solid rgba(239,68,68,0.6)')
-					  });
+											.fadeOut('300', function(){ $(this).remove(); });
+					  showToast('Enregistrement supprimé');
 					},
 					error: function() {
-					  alert("Erreur lors de la suppression.");
+					  alert('Erreur lors de la suppression.');
+					},
+					complete: function() {
+					  closeConfirmModal();
 					}
 				  });
-				}
+				});
-			  });
 		
 			  // Affichage log
 			  $(document).on("click", ".log-link", function(e) {
@@ -668,6 +772,16 @@ autopostRouter.get('/', async (req, res) => {
 				});
 			  });
 			});
+			// Bouton copie du JSON
+			  document.getElementById("copyMediainfoBtn").addEventListener("click", function () {
+				const content = document.getElementById("mediainfoContent").textContent;
+				navigator.clipboard.writeText(content).then(() => {
+				  this.textContent = "✅ Copié !";
+				  setTimeout(() => this.textContent = "📋 Copier JSON", 2000);
+				}).catch(err => {
+				  alert("Erreur lors de la copie : " + err);
+				});
+			  });
 		</script>
 	</body>
 	</html>