réécriture des modal

autopost/server.js

@@ -330,43 +330,124 @@ autopostRouter.get('/', async (req, res) => {
 	  </div>
 	  
 	  <!-- Modale d'édition -->
-	  <div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+	  <div id="editModal" 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-1/2">
+		<div class="bg-gray-900 p-6 rounded-2xl shadow-2xl w-full max-w-md transform transition-all scale-95">
-		  <span class="absolute top-2 right-2 text-white cursor-pointer close">&times;</span>
+		  
-		  <h2 class="text-xl font-semibold mb-4">Editer Release <span id="modalReleaseId"></span></h2>
+		  <!-- Bouton fermer -->
+		  <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close">
+			&times;
+		  </button>
+	  
+		  <!-- Titre -->
+		  <h2 class="text-2xl font-bold mb-6 text-center text-white">
+			✏️ Éditer Release <span id="modalReleaseId" class="text-blue-400"></span>
+		  </h2>
+	  
+		  <!-- Formulaire -->
 		  <form id="editForm">
-			<label for="statusSelect" class="block mb-2">Status :</label>
+			
-			<select id="statusSelect" name="status" class="w-full p-2 mb-4 rounded border border-gray-300">
+			<!-- Label + Select -->
-			  <option value="0">EN ATTENTE</option>
+			<label for="statusSelect" class="block mb-2 text-gray-300 font-medium">Status :</label>
-			  <option value="1">ENVOI TERMINÉ</option>
+			<select id="statusSelect" name="status" 
-			  <option value="2">ERREUR</option>
+			  class="w-full p-3 mb-6 rounded-lg border border-gray-700 bg-gray-800 text-white focus:ring-2 focus:ring-blue-500 focus:outline-none">
-			  <option value="3">DEJA DISPONIBLE</option>
+			  <option value="0" class="text-cyan-400">EN ATTENTE</option>
+			  <option value="1" class="text-green-400">ENVOI TERMINÉ</option>
+			  <option value="2" class="text-red-400">ERREUR</option>
+			  <option value="3" class="text-pink-400">DEJA DISPONIBLE</option>
 			</select>
+	  
+			<!-- Hidden ID -->
 			<input type="hidden" id="releaseId" name="id" value=""/>
-			<button type="submit" class="w-full p-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+	  
-			  Mettre à jour
+			<!-- Bouton -->
+			<button type="submit" 
+			  class="w-full p-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-lg shadow hover:from-blue-500 hover:to-blue-400 transform hover:-translate-y-0.5 transition">
+			  💾 Mettre à jour
 			</button>
 		  </form>
 		</div>
 	  </div>
 
+	  
 	  <!-- Modale pour afficher le log -->
-	  <div id="logModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+		<div id="logModal" 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-7xl relative"> <!-- élargi max-w -->
-		  <span class="absolute top-2 right-2 text-white cursor-pointer close log-close">&times;</span>
+			
-		  <h2 class="text-xl font-semibold mb-4">Contenu du log</h2>
+			<!-- Bouton fermer -->
-		  <pre id="logContent" 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 log-close">
+			  &times;
+			</button>
+		
+			<!-- Titre -->
+			<h2 class="text-2xl font-bold mb-6 text-center text-white">
+			  📄 Contenu du log
+			</h2>
+		
+			<!-- Contenu du log -->
+			<pre id="logContent" 
+			  class="max-h-[90vh] overflow-y-auto p-6 rounded-lg bg-gray-800 text-green-400 font-mono text-sm leading-relaxed border border-gray-700 shadow-inner whitespace-pre-wrap">
+			</pre>
+		
+		  </div>
 		</div>
-	  </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) {
@@ -444,23 +525,38 @@ autopostRouter.get('/', async (req, res) => {
 			$(document).ready(function(){
 		
 			  // Recherche AJAX
+			  let searchTimer = null;
+			  
 			  $("#searchInput").on("keyup", function() {
-				var q = $(this).val();
+				clearTimeout(searchTimer); // annule le timer précédent
-				$.ajax({
+			  
-				  url: '/autopost/search',
+				let q = $(this).val();
-				  type: 'GET',
+			  
-				  data: { q: q },
+				searchTimer = setTimeout(function() {
-				  dataType: 'json',
+				  $.ajax({
-				  success: function(data) {
+					url: '/autopost/search',
-					updateTable(data);
+					type: 'GET',
-					applyFilterAndSearch(); // conserve filtre actif
+					data: { q: q },
-				  },
+					dataType: 'json',
-				  error: function() {
+					success: function(data) {
-					alert("Erreur lors de la recherche.");
+					  updateTable(data);
-				  }
+					  if (typeof currentFilter === 'undefined') {
-				});
+						currentFilter = null;
+					  }
+					  applyFilterAndSearch();
+					},
+					error: function(jqXHR, textStatus, errorThrown) {
+					  // On ignore l'erreur si la requête a été annulée volontairement
+					  if (textStatus !== "abort") {
+						console.error('Erreur AJAX :', textStatus, errorThrown);
+						alert("Erreur lors de la recherche.");
+					  }
+					}
+				  });
+				}, 300); // 300ms après la dernière frappe
 			  });
 
+			  
 			  function toggleShowAllButton() {
 				  if (currentFilter === null) {
 					  $('#showAll').addClass('hidden');
@@ -498,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) {
@@ -621,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>
@@ -661,11 +822,49 @@ autopostRouter.get('/log', (req, res) => {
 	  console.error(err.message);
 	  return res.status(500).json({ error: "Erreur lors du chargement du fichier log." });
 	}
-	const htmlContent = convert.toHtml(data);
+  
+	// 1) enlever les codes curseur (début de ligne/clear) mais garder les couleurs (…m)
+	//    ex: \x1b[0G, \x1b[0K, etc. — ce sont EUX qui “collent” les blocs
+	let s = data.replace(/\x1b\[[0-9;]*[GK]/g, '');
+  
+	// 2) supprimer TOUT segment de progression, même s’ils sont enchaînés sur UNE SEULE ligne
+	//    forme couverte : "12.34% [======] 487.86 MiB/s, ETA 00:01"
+	//    + variantes “ETA -”, et même le cas minimal "0.00% [ ]"
+	const ANSI_M = '(?:\\x1b\\[[0-9;]*m)*';
+	const NUM    = '\\d{1,3}(?:\\.\\d+)?';
+	const PROG   = new RegExp(
+	  // pourcentage
+	  ANSI_M + '\\s*' + NUM + '\\s*%' +
+	  // barre
+	  '\\s*' + ANSI_M + '\\[[^\\]]*\\]' +
+	  // (option) vitesse + ETA
+	  '(?:\\s*' + ANSI_M + NUM + '\\s*MiB\\/s,\\s*ETA\\s*[^\\x1bG\\n]*)?',
+	  'g'
+	);
+	s = s.replace(PROG, '');
+  
+	// 3) nettoyer les résidus "-G" / "G" laissés juste avant G[INFO] (quand une progression était collée)
+	s = s.replace(/-?\s*G(?=\[INFO\])/g, '');
+  
+	// 4) petite normalisation (sans casser les couleurs)
+	s = s.replace(/[ \t]+/g, ' ')
+	 .replace(/\r/g, '')
+	 .replace(/\n{3,}/g, '\n\n')
+	 // Retour à la ligne avant chaque mot-clé (sauf début)
+	 .replace(/(?!^)(?=\[INFO\])/gm, '\n')
+	 .replace(/(?!^)Calculating\s*:/gm, '\nCalculating :')
+	 .replace(/(?!^)Writing\s*:/gm, '\nWriting :')
+	 .replace(/(?!^)Finalizing\s*:/gm, '\nFinalizing :')
+	 .replace(/(?!^)Finished\s*:/gm, '\nFinished :')
+	 .trim();
+  
+	const htmlContent = convert.toHtml(s); // conserve les couleurs ANSI
 	res.json({ content: htmlContent });
   });
+
 });
 
+
 // --------------------------- Mediainfo -----------------------------
 autopostRouter.get('/mediainfo', (req, res) => {
   const filename = req.query.name;