UNFR/postauto
1
0
Fork 0
Code

Compare commits

base: UNFR:ff974bd43ca0b4ea87a9269c310ef53cedaa9774
Branches Tags
UNFR:main
...
compare: UNFR:9c1a3c8dedceb632caf5468d5cd37b857150be47
Branches Tags
UNFR:main

3 Commits
ff974bd43c ... 9c1a3c8ded

Author SHA1 Message Date
unfr
9c1a3c8ded réécriture des modal 2025-08-11 15:42:08 +02:00
unfr
0decab4064 réécriture de la partie log 2025-08-11 15:22:45 +02:00
unfr
f4d9dd7a91 correction recherche ajax 2025-08-11 14:03:41 +02:00
1 changed files with 248 additions and 49 deletions
Show Stats Expand all files Collapse all files

267
autopost/server.js
View File

@ -330,42 +330,123 @@ 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 class="bg-gray-800 p-6 rounded relative w-1/2">
<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>
<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-900 p-6 rounded-2xl shadow-2xl w-full max-w-md transform transition-all scale-95">
<!-- 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">
<option value="0">EN ATTENTE</option>
<option value="1">ENVOI TERMINÉ</option>
<option value="2">ERREUR</option>
<option value="3">DEJA DISPONIBLE</option>
<!-- Label + Select -->
<label for="statusSelect" class="block mb-2 text-gray-300 font-medium">Status :</label>
<select id="statusSelect" name="status"
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="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 class="bg-gray-800 p-6 rounded relative w-2/3">
<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>
<pre id="logContent" class="max-h-[80vh] overflow-y-auto"></pre>
<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-900 p-6 rounded-2xl shadow-2xl w-full max-w-7xl relative"> <!-- élargi max-w -->
<!-- Bouton fermer -->
<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>
<!-- Modale pour afficher le mediainfo -->
<div id="mediainfoModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div class="bg-gray-800 p-6 rounded relative w-2/3">
<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>
<pre id="mediainfoContent" class="max-h-[80vh] overflow-y-auto"></pre>
<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-900 p-6 rounded-2xl shadow-2xl w-full max-w-6xl relative">
<!-- Bouton fermer -->
<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>
<!-- 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>
@ -444,8 +525,14 @@ 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
let q = $(this).val();
searchTimer = setTimeout(function() {
$.ajax({
url: '/autopost/search',
type: 'GET',
@ -453,14 +540,23 @@ autopostRouter.get('/', async (req, res) => {
dataType: 'json',
success: function(data) {
updateTable(data);
applyFilterAndSearch(); // conserve filtre actif
if (typeof currentFilter === 'undefined') {
currentFilter = null;
}
applyFilterAndSearch();
},
error: function() {
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,23 +594,78 @@ autopostRouter.get('/', async (req, res) => {
});
// Suppression
$(document).on("click", ".delete-link", function(e) {
// ---------- Confirmation de suppression (modale) ----------
var pendingDeleteId = null;
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();
if (confirm("Êtes-vous sûr de vouloir supprimer cet enregistrement ?")) {
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) {
$('#row-' + releaseId).fadeOut('slow', function(){
$(this).remove();
});
success: function() {
// Effet visuel sur la ligne puis suppression
$('#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
@ -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;