pagination sur le filtrage
This commit is contained in:
unfr
parent
dfde73183e
commit
67780d5b7c
@ -238,25 +238,28 @@ autopostRouter.get('/', async (req, res) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav aria-label="Page navigation" class="mb-4">
|
<nav id="pagination" aria-label="Page navigation" class="mb-4">
|
||||||
<ul class="inline-flex items-center -space-x-px">
|
<ul class="inline-flex items-center -space-x-px">
|
||||||
<li>
|
<li>
|
||||||
${ page > 1
|
${
|
||||||
? `<a href="/autopost/?page=${page - 1}" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>`
|
page > 1
|
||||||
: `<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>`
|
? `<a href="/autopost/?page=${page - 1}" data-page="${page - 1}" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>`
|
||||||
}
|
: `<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>`
|
||||||
|
}
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ${page} sur ${totalPages}</span>
|
<span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ${page} sur ${totalPages}</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
${ page < totalPages
|
${
|
||||||
? `<a href="/autopost/?page=${page + 1}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>`
|
page < totalPages
|
||||||
: `<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>`
|
? `<a href="/autopost/?page=${page + 1}" data-page="${page + 1}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>`
|
||||||
}
|
: `<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>`
|
||||||
|
}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="min-w-full border border-gray-700 shadow-lg rounded-lg overflow-hidden">
|
<table class="min-w-full border border-gray-700 shadow-lg rounded-lg overflow-hidden">
|
||||||
<thead class="bg-gray-900 text-gray-300 uppercase text-sm">
|
<thead class="bg-gray-900 text-gray-300 uppercase text-sm">
|
||||||
@ -449,146 +452,201 @@ autopostRouter.get('/', async (req, res) => {
|
|||||||
<span id="toastMsg">Supprimé.</span>
|
<span id="toastMsg">Supprimé.</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function updateTable(rows) {
|
// --- State ---
|
||||||
var tbody = $("table tbody");
|
const INITIAL_PAGE = ${page};
|
||||||
tbody.empty();
|
const INITIAL_TOTAL_PAGES = ${totalPages};
|
||||||
rows.forEach(function(row) {
|
const PAGE_LIMIT = ${limit};
|
||||||
|
|
||||||
|
let currentPage = INITIAL_PAGE;
|
||||||
|
let currentTotalPages = INITIAL_TOTAL_PAGES;
|
||||||
|
let activeFilter = null; // number | null
|
||||||
|
let activeQuery = ''; // string
|
||||||
|
|
||||||
|
|
||||||
|
// --- Rendering: table ---
|
||||||
|
function updateTable(rows) {
|
||||||
|
var tbody = $('table tbody');
|
||||||
|
tbody.empty();
|
||||||
|
|
||||||
|
rows.forEach(function(row) {
|
||||||
var statusText = '';
|
var statusText = '';
|
||||||
var statusClass = '';
|
var statusClass = '';
|
||||||
|
|
||||||
switch (parseInt(row.status)) {
|
switch (parseInt(row.status)) {
|
||||||
case 0:
|
case 0:
|
||||||
statusText = 'EN ATTENTE';
|
statusText = 'EN ATTENTE';
|
||||||
statusClass = 'bg-cyan-500 text-black font-bold';
|
statusClass = 'bg-cyan-500 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
statusText = 'ENVOI TERMINÉ';
|
statusText = 'ENVOI TERMINÉ';
|
||||||
statusClass = 'bg-green-300 text-black font-bold';
|
statusClass = 'bg-green-300 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
statusText = 'ERREUR';
|
statusText = 'ERREUR';
|
||||||
statusClass = 'bg-red-300 text-black font-bold';
|
statusClass = 'bg-red-300 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
case 3:
|
case 3:
|
||||||
statusText = 'DEJA DISPONIBLE';
|
statusText = 'DEJA DISPONIBLE';
|
||||||
statusClass = 'bg-pink-300 text-black font-bold';
|
statusClass = 'bg-pink-300 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
case 4:
|
case 4:
|
||||||
statusText = 'EN COURS';
|
statusText = 'EN COURS';
|
||||||
statusClass = 'bg-yellow-300 text-black font-bold';
|
statusClass = 'bg-yellow-300 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
statusText = 'INCONNU';
|
statusText = 'INCONNU';
|
||||||
}
|
}
|
||||||
|
|
||||||
var logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2)
|
var logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2)
|
||||||
? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="'+row.nom+'">Log</a>'
|
? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Log</a>'
|
||||||
: '';
|
|
||||||
var mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
|
|
||||||
? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="'+row.nom+'">Mediainfo</a>'
|
|
||||||
: '';
|
|
||||||
var dlLink = (parseInt(row.status) === 1)
|
|
||||||
? ' | <a href="/autopost/dl?name='+encodeURIComponent(row.nom)+'" class="dl-link text-blue-400 hover:underline">DL</a>'
|
|
||||||
: '';
|
: '';
|
||||||
|
|
||||||
var tr = '<tr id="row-'+row.id+'" data-status="'+row.status+'" class="odd:bg-gray-800 even:bg-gray-700">'+
|
var mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
|
||||||
'<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">'+row.nom+'</td>'+
|
? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Mediainfo</a>'
|
||||||
'<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap '+statusClass+'">'+statusText+'</td>'+
|
: '';
|
||||||
'<td class="px-4 py-2 border border-gray-700">'+row.id+'</td>'+
|
|
||||||
'<td class="px-4 py-2 border border-gray-700">'+
|
|
||||||
'<a href="#" class="edit-link text-blue-400 hover:underline" data-id="'+row.id+'" data-status="'+row.status+'">Editer</a> | '+
|
|
||||||
'<a href="#" class="delete-link text-blue-400 hover:underline" data-id="'+row.id+'">Supprimer</a>'+
|
|
||||||
logLink+mediainfoLink+dlLink+
|
|
||||||
'</td>'+
|
|
||||||
'</tr>';
|
|
||||||
tbody.append(tr);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
var dlLink = (parseInt(row.status) === 1)
|
||||||
let searchTimer = null;
|
? ' | <a href="/autopost/dl?name=' + encodeURIComponent(row.nom) + '" class="dl-link text-blue-400 hover:underline">DL</a>'
|
||||||
$("#searchInput").on("keyup", function() {
|
: '';
|
||||||
clearTimeout(searchTimer); // annule le timer précédent
|
|
||||||
|
var tr =
|
||||||
let q = $(this).val();
|
'<tr id="row-' + row.id + '" data-status="' + row.status + '" class="odd:bg-gray-800 even:bg-gray-700">' +
|
||||||
|
'<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">' + row.nom + '</td>' +
|
||||||
searchTimer = setTimeout(function() {
|
'<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ' + statusClass + '">' + statusText + '</td>' +
|
||||||
$.ajax({
|
'<td class="px-4 py-2 border border-gray-700">' + row.id + '</td>' +
|
||||||
url: '/autopost/search',
|
'<td class="px-4 py-2 border border-gray-700">' +
|
||||||
type: 'GET',
|
'<a href="#" class="edit-link text-blue-400 hover:underline" data-id="' + row.id + '" data-status="' + row.status + '">Editer</a> | ' +
|
||||||
data: { q: q },
|
'<a href="#" class="delete-link text-blue-400 hover:underline" data-id="' + row.id + '">Supprimer</a>' +
|
||||||
dataType: 'json',
|
logLink + mediainfoLink + dlLink +
|
||||||
success: function(data) {
|
'</td>' +
|
||||||
updateTable(data);
|
'</tr>';
|
||||||
$(".filter-card").removeClass("ring-4 ring-white/40");
|
|
||||||
toggleShowAllButton();
|
tbody.append(tr);
|
||||||
},
|
});
|
||||||
error: function(jqXHR, textStatus, errorThrown) {
|
}
|
||||||
// On ignore l'erreur si la requête a été annulée volontairement
|
|
||||||
if (textStatus !== "abort") {
|
|
||||||
|
// --- Rendering: pagination ---
|
||||||
|
function renderPaginationHTML(page, totalPages) {
|
||||||
|
var prevDisabled = page <= 1;
|
||||||
|
var nextDisabled = page >= totalPages;
|
||||||
|
|
||||||
|
var h = '';
|
||||||
|
h += '<ul class="inline-flex items-center -space-x-px">';
|
||||||
|
h += '<li>';
|
||||||
|
if (prevDisabled) {
|
||||||
|
h += '<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>';
|
||||||
|
} else {
|
||||||
|
h += '<a href="/autopost/?page=' + (page - 1) + '" data-page="' + (page - 1) + '" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>';
|
||||||
|
}
|
||||||
|
h += '</li>';
|
||||||
|
h += '<li><span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ' + page + ' sur ' + totalPages + '</span></li>';
|
||||||
|
h += '<li>';
|
||||||
|
if (nextDisabled) {
|
||||||
|
h += '<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>';
|
||||||
|
} else {
|
||||||
|
h += '<a href="/autopost/?page=' + (page + 1) + '" data-page="' + (page + 1) + '" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>';
|
||||||
|
}
|
||||||
|
h += '</li>';
|
||||||
|
h += '</ul>';
|
||||||
|
|
||||||
|
return h;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePagination(page, totalPages) {
|
||||||
|
$('#pagination').html(renderPaginationHTML(page, totalPages));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// --- Data loading ---
|
||||||
|
function loadPage(p) {
|
||||||
|
const targetPage = Math.max(1, parseInt(p, 10) || 1);
|
||||||
|
|
||||||
|
const isFilter = activeFilter !== null;
|
||||||
|
const url = isFilter ? '/autopost/filter' : '/autopost/search';
|
||||||
|
const data = isFilter
|
||||||
|
? { status: activeFilter, page: targetPage, limit: PAGE_LIMIT }
|
||||||
|
: { q: activeQuery || '', page: targetPage, limit: PAGE_LIMIT };
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
type: 'GET',
|
||||||
|
data: data,
|
||||||
|
dataType: 'json',
|
||||||
|
success: function(resp) {
|
||||||
|
updateTable(resp.rows);
|
||||||
|
currentPage = resp.page;
|
||||||
|
currentTotalPages = resp.totalPages;
|
||||||
|
updatePagination(currentPage, currentTotalPages);
|
||||||
|
},
|
||||||
|
error: function(jqXHR, textStatus, errorThrown) {
|
||||||
|
if (textStatus !== 'abort') {
|
||||||
console.error('Erreur AJAX :', textStatus, errorThrown);
|
console.error('Erreur AJAX :', textStatus, errorThrown);
|
||||||
alert("Erreur lors de la recherche.");
|
alert('Erreur lors du chargement de la page.');
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
}, 300); // 300ms après la dernière frappe
|
});
|
||||||
});
|
}
|
||||||
|
|
||||||
|
|
||||||
function toggleShowAllButton() {
|
// --- DOM bindings ---
|
||||||
if ($(".filter-card.ring-4").length === 0) {
|
$(document).ready(function() {
|
||||||
|
// Recherche
|
||||||
|
let searchTimer = null;
|
||||||
|
$('#searchInput').on('keyup', function() {
|
||||||
|
clearTimeout(searchTimer);
|
||||||
|
let q = $(this).val();
|
||||||
|
|
||||||
|
searchTimer = setTimeout(function() {
|
||||||
|
activeQuery = q || '';
|
||||||
|
activeFilter = null; // on sort du mode filtre
|
||||||
|
$('.filter-card').removeClass('ring-4 ring-white/40');
|
||||||
|
loadPage(1); // charge page 1 avec pagination AJAX
|
||||||
|
toggleShowAllButton();
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Pagination: intercepter et paginer en AJAX (liste, recherche ou filtre)
|
||||||
|
$(document).on('click', '#pagination a[data-page]', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const p = parseInt($(this).data('page'), 10);
|
||||||
|
if (!isNaN(p)) loadPage(p);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Affichage/masquage du bouton "Tout afficher"
|
||||||
|
function toggleShowAllButton() {
|
||||||
|
if ($('.filter-card.ring-4').length === 0) {
|
||||||
$('#showAll').addClass('hidden');
|
$('#showAll').addClass('hidden');
|
||||||
} else {
|
} else {
|
||||||
$('#showAll').removeClass('hidden');
|
$('#showAll').removeClass('hidden');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Filtrage par clic sur une card
|
||||||
// Filtrage par clic sur une card
|
$(document).on('click', '.filter-card', function() {
|
||||||
$(document).on("click", ".filter-card", function () {
|
const status = parseInt($(this).data('status'), 10);
|
||||||
const status = parseInt($(this).data("status"), 10);
|
|
||||||
|
|
||||||
$(".filter-card").removeClass("ring-4 ring-white/40");
|
|
||||||
$(this).addClass("ring-4 ring-white/40");
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: '/autopost/filter',
|
|
||||||
type: 'GET',
|
|
||||||
data: { status },
|
|
||||||
dataType: 'json',
|
|
||||||
success: function (data) {
|
|
||||||
updateTable(data);
|
|
||||||
toggleShowAllButton();
|
|
||||||
},
|
|
||||||
error: function () {
|
|
||||||
alert("Erreur lors du filtrage.");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Bouton tout afficher
|
|
||||||
$(document).on("click", "#showAll", function () {
|
|
||||||
$(".filter-card").removeClass("ring-4 ring-white/40");
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: '/autopost/search',
|
|
||||||
type: 'GET',
|
|
||||||
data: { q: $("#searchInput").val() || "" },
|
|
||||||
dataType: 'json',
|
|
||||||
success: function (data) {
|
|
||||||
updateTable(data);
|
|
||||||
toggleShowAllButton();
|
|
||||||
},
|
|
||||||
error: function () {
|
|
||||||
alert("Erreur lors du chargement des données.");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Edition
|
$('.filter-card').removeClass('ring-4 ring-white/40');
|
||||||
$(document).on("click", ".edit-link", function(e) {
|
$(this).addClass('ring-4 ring-white/40');
|
||||||
|
|
||||||
|
activeFilter = status;
|
||||||
|
activeQuery = ''; // on sort du mode recherche
|
||||||
|
loadPage(1); // page 1 du filtre
|
||||||
|
toggleShowAllButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Bouton tout afficher
|
||||||
|
$(document).on('click', '#showAll', function() {
|
||||||
|
$('.filter-card').removeClass('ring-4 ring-white/40');
|
||||||
|
activeFilter = null;
|
||||||
|
activeQuery = $('#searchInput').val() || '';
|
||||||
|
loadPage(1); // si recherche vide => liste complète, sinon recherche paginée
|
||||||
|
toggleShowAllButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Edition (ouvrir modale)
|
||||||
|
$(document).on('click', '.edit-link', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var releaseId = $(this).data('id');
|
var releaseId = $(this).data('id');
|
||||||
var currentStatus = $(this).data('status');
|
var currentStatus = $(this).data('status');
|
||||||
@ -596,198 +654,200 @@ autopostRouter.get('/', async (req, res) => {
|
|||||||
$('#modalReleaseId').text(releaseId);
|
$('#modalReleaseId').text(releaseId);
|
||||||
$('#statusSelect').val(currentStatus);
|
$('#statusSelect').val(currentStatus);
|
||||||
$('#editModal').removeClass('hidden').fadeIn();
|
$('#editModal').removeClass('hidden').fadeIn();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Suppression
|
// ---------- Confirmation de suppression (modale) ----------
|
||||||
// ---------- Confirmation de suppression (modale) ----------
|
var pendingDeleteId = null;
|
||||||
var pendingDeleteId = null;
|
|
||||||
|
function openConfirmModal(id, name) {
|
||||||
function openConfirmModal(id, name) {
|
pendingDeleteId = id;
|
||||||
pendingDeleteId = id;
|
$('#confirmItemName').text(name || ('ID ' + id));
|
||||||
$('#confirmItemName').text(name || ('ID ' + id));
|
$('#confirmDeleteModal').removeClass('hidden').fadeIn(120);
|
||||||
$('#confirmDeleteModal').removeClass('hidden').fadeIn(120);
|
}
|
||||||
}
|
|
||||||
|
function closeConfirmModal() {
|
||||||
function closeConfirmModal() {
|
$('#confirmDeleteModal').fadeOut(120, function() {
|
||||||
$('#confirmDeleteModal').fadeOut(120, function() {
|
|
||||||
$(this).addClass('hidden');
|
$(this).addClass('hidden');
|
||||||
});
|
});
|
||||||
pendingDeleteId = null;
|
pendingDeleteId = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showToast(msg) {
|
function showToast(msg) {
|
||||||
$('#toastMsg').text(msg || 'Opération effectuée');
|
$('#toastMsg').text(msg || 'Opération effectuée');
|
||||||
$('#toast').removeClass('hidden').fadeIn(120);
|
$('#toast').removeClass('hidden').fadeIn(120);
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
$('#toast').fadeOut(150, function() { $(this).addClass('hidden'); });
|
$('#toast').fadeOut(150, function() { $(this).addClass('hidden'); });
|
||||||
}, 1800);
|
}, 1800);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ouvrir la modale au clic sur "Supprimer"
|
// Ouvrir la modale au clic sur "Supprimer"
|
||||||
$(document).on('click', '.delete-link', function(e) {
|
$(document).on('click', '.delete-link', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var releaseId = $(this).data('id');
|
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();
|
||||||
var name = $(this).closest('tr').find('td:first').text().trim();
|
openConfirmModal(releaseId, name);
|
||||||
openConfirmModal(releaseId, name);
|
});
|
||||||
});
|
|
||||||
|
// Boutons de la modale
|
||||||
// Boutons de la modale
|
$('#cancelDeleteBtn, #confirmDeleteClose').on('click', function() {
|
||||||
$('#cancelDeleteBtn, #confirmDeleteClose').on('click', function() {
|
closeConfirmModal();
|
||||||
closeConfirmModal();
|
});
|
||||||
});
|
|
||||||
|
// Clic sur l’overlay pour fermer
|
||||||
// Clic sur l’overlay pour fermer
|
$('#confirmDeleteModal').on('click', function(e) {
|
||||||
$('#confirmDeleteModal').on('click', function(e) {
|
if (e.target === this) { closeConfirmModal(); }
|
||||||
if (e.target === this) { closeConfirmModal(); }
|
});
|
||||||
});
|
|
||||||
|
// Accessibilité clavier: Esc = fermer, Enter = confirmer
|
||||||
// Accessibilité clavier: Esc = fermer, Enter = confirmer
|
$(document).on('keydown', function(e) {
|
||||||
$(document).on('keydown', function(e) {
|
var modalVisible = !$('#confirmDeleteModal').hasClass('hidden');
|
||||||
var modalVisible = !$('#confirmDeleteModal').hasClass('hidden');
|
if (!modalVisible) return;
|
||||||
if (!modalVisible) return;
|
if (e.key === 'Escape') { closeConfirmModal(); }
|
||||||
if (e.key === 'Escape') { closeConfirmModal(); }
|
if (e.key === 'Enter') { $('#confirmDeleteBtn').click(); }
|
||||||
if (e.key === 'Enter') { $('#confirmDeleteBtn').click(); }
|
});
|
||||||
});
|
|
||||||
|
// Confirmer et supprimer via AJAX
|
||||||
// Confirmer et supprimer via AJAX
|
$('#confirmDeleteBtn').on('click', function() {
|
||||||
$('#confirmDeleteBtn').on('click', function() {
|
if (!pendingDeleteId) return;
|
||||||
if (!pendingDeleteId) return;
|
var releaseId = pendingDeleteId;
|
||||||
var releaseId = pendingDeleteId;
|
|
||||||
|
$.ajax({
|
||||||
$.ajax({
|
|
||||||
url: '/autopost/delete/' + releaseId,
|
url: '/autopost/delete/' + releaseId,
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
success: function() {
|
success: function() {
|
||||||
// Effet visuel sur la ligne puis suppression
|
$('#row-' + releaseId)
|
||||||
$('#row-' + releaseId).css('outline', '2px solid rgba(239,68,68,0.6)')
|
.css('outline', '2px solid rgba(239,68,68,0.6)')
|
||||||
.fadeOut('300', function(){ $(this).remove(); });
|
.fadeOut('300', function(){ $(this).remove(); });
|
||||||
showToast('Enregistrement supprimé');
|
showToast('Enregistrement supprimé');
|
||||||
},
|
},
|
||||||
error: function() {
|
error: function() {
|
||||||
alert('Erreur lors de la suppression.');
|
alert('Erreur lors de la suppression.');
|
||||||
},
|
},
|
||||||
complete: function() {
|
complete: function() {
|
||||||
closeConfirmModal();
|
closeConfirmModal();
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Affichage log
|
// Affichage log
|
||||||
$(document).on("click", ".log-link", function(e) {
|
$(document).on('click', '.log-link', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var filename = $(this).data("filename");
|
var filename = $(this).data('filename');
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/autopost/log',
|
url: '/autopost/log',
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
data: { name: filename },
|
data: { name: filename },
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
success: function(data) {
|
success: function(data) {
|
||||||
$("#logContent").html(data.content);
|
$('#logContent').html(data.content);
|
||||||
$("#logModal").removeClass('hidden').fadeIn();
|
$('#logModal').removeClass('hidden').fadeIn();
|
||||||
},
|
},
|
||||||
error: function() {
|
error: function() {
|
||||||
alert("Erreur lors du chargement du fichier log.");
|
alert('Erreur lors du chargement du fichier log.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Affichage mediainfo
|
// Affichage mediainfo
|
||||||
$(document).on("click", ".mediainfo-link", function(e) {
|
$(document).on('click', '.mediainfo-link', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var filename = $(this).data("filename");
|
var filename = $(this).data('filename');
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/autopost/mediainfo',
|
url: '/autopost/mediainfo',
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
data: { name: filename },
|
data: { name: filename },
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
success: function(data) {
|
success: function(data) {
|
||||||
$("#mediainfoContent").text(data.content);
|
$('#mediainfoContent').text(data.content);
|
||||||
$("#mediainfoModal").removeClass('hidden').fadeIn();
|
$('#mediainfoModal').removeClass('hidden').fadeIn();
|
||||||
},
|
},
|
||||||
error: function() {
|
error: function() {
|
||||||
alert("Erreur lors du chargement du fichier mediainfo.");
|
alert('Erreur lors du chargement du fichier mediainfo.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Fermeture modales
|
// Fermeture modales (croix + clic overlay)
|
||||||
$('.close').click(function(){
|
$('.close').click(function() {
|
||||||
$(this).closest('.fixed').fadeOut(function(){
|
$(this).closest('.fixed').fadeOut(function() {
|
||||||
$(this).addClass('hidden');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.fixed').click(function(e) {
|
|
||||||
if (e.target === this) {
|
|
||||||
$(this).fadeOut(function(){
|
|
||||||
$(this).addClass('hidden');
|
$(this).addClass('hidden');
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
});
|
|
||||||
|
|
||||||
// Edition formulaire
|
$('.fixed').click(function(e) {
|
||||||
$('#editForm').submit(function(e){
|
if (e.target === this) {
|
||||||
|
$(this).fadeOut(function() {
|
||||||
|
$(this).addClass('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Edition: submit
|
||||||
|
$('#editForm').submit(function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var releaseId = $('#releaseId').val();
|
var releaseId = $('#releaseId').val();
|
||||||
var newStatus = $('#statusSelect').val();
|
var newStatus = $('#statusSelect').val();
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/autopost/edit/' + releaseId,
|
url: '/autopost/edit/' + releaseId,
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
data: { status: newStatus },
|
data: { status: newStatus },
|
||||||
success: function(data) {
|
success: function() {
|
||||||
var statusText = '';
|
var statusText = '';
|
||||||
var statusClass = '';
|
var statusClass = '';
|
||||||
switch(parseInt(newStatus)) {
|
switch (parseInt(newStatus)) {
|
||||||
case 0:
|
case 0:
|
||||||
statusText = 'EN ATTENTE';
|
statusText = 'EN ATTENTE';
|
||||||
statusClass = 'bg-cyan-500 text-black font-bold';
|
statusClass = 'bg-cyan-500 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
statusText = 'ENVOI TERMINÉ';
|
statusText = 'ENVOI TERMINÉ';
|
||||||
statusClass = 'bg-green-300 text-black font-bold';
|
statusClass = 'bg-green-300 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
statusText = 'ERREUR';
|
statusText = 'ERREUR';
|
||||||
statusClass = 'bg-red-300 text-black font-bold';
|
statusClass = 'bg-red-300 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
case 3:
|
case 3:
|
||||||
statusText = 'DEJA DISPONIBLE';
|
statusText = 'DEJA DISPONIBLE';
|
||||||
statusClass = 'bg-pink-300 text-black font-bold';
|
statusClass = 'bg-pink-300 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
case 4:
|
case 4:
|
||||||
statusText = 'EN COURS';
|
statusText = 'EN COURS';
|
||||||
statusClass = 'bg-yellow-300 text-black font-bold';
|
statusClass = 'bg-yellow-300 text-black font-bold';
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
statusText = 'INCONNU';
|
statusText = 'INCONNU';
|
||||||
|
}
|
||||||
|
|
||||||
|
var row = $('#row-' + releaseId);
|
||||||
|
row.find('.status-text')
|
||||||
|
.removeClass('bg-cyan-500 bg-green-300 bg-red-300 bg-pink-300 bg-yellow-300')
|
||||||
|
.addClass(statusClass)
|
||||||
|
.text(statusText);
|
||||||
|
|
||||||
|
$('#editModal').fadeOut(function() {
|
||||||
|
$(this).addClass('hidden');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
alert('Erreur lors de la mise à jour.');
|
||||||
}
|
}
|
||||||
var row = $('#row-' + releaseId);
|
|
||||||
row.find('.status-text')
|
|
||||||
.removeClass('bg-cyan-500 bg-green-300 bg-red-300 bg-pink-300 bg-yellow-300')
|
|
||||||
.addClass(statusClass)
|
|
||||||
.text(statusText);
|
|
||||||
$('#editModal').fadeOut(function(){
|
|
||||||
$(this).addClass('hidden');
|
|
||||||
});
|
|
||||||
},
|
|
||||||
error: function() {
|
|
||||||
alert("Erreur lors de la mise à jour.");
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
});
|
});
|
||||||
// Bouton copie du JSON
|
});
|
||||||
document.getElementById("copyMediainfoBtn").addEventListener("click", function () {
|
|
||||||
const content = document.getElementById("mediainfoContent").textContent;
|
// --- Copy Mediainfo JSON button ---
|
||||||
navigator.clipboard.writeText(content).then(() => {
|
document.getElementById('copyMediainfoBtn').addEventListener('click', function() {
|
||||||
this.textContent = "✅ Copié !";
|
const content = document.getElementById('mediainfoContent').textContent;
|
||||||
setTimeout(() => this.textContent = "📋 Copier JSON", 2000);
|
navigator.clipboard.writeText(content).then(() => {
|
||||||
}).catch(err => {
|
this.textContent = '✅ Copié !';
|
||||||
alert("Erreur lors de la copie : " + err);
|
setTimeout(() => this.textContent = '📋 Copier JSON', 2000);
|
||||||
});
|
}).catch(function(err) {
|
||||||
});
|
alert('Erreur lors de la copie : ' + err);
|
||||||
</script>
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`;
|
`;
|
||||||
@ -800,20 +860,37 @@ autopostRouter.get('/', async (req, res) => {
|
|||||||
|
|
||||||
// --------------------------- Recherche -----------------------------
|
// --------------------------- Recherche -----------------------------
|
||||||
autopostRouter.get('/search', async (req, res) => {
|
autopostRouter.get('/search', async (req, res) => {
|
||||||
const q = req.query.q || "";
|
const q = req.query.q || "";
|
||||||
const searchQuery = "%" + q + "%";
|
const page = parseInt(req.query.page, 10) || 1;
|
||||||
try {
|
const limit = parseInt(req.query.limit, 10) || 100;
|
||||||
const [rows] = await db.query(
|
const offset = (page - 1) * limit;
|
||||||
`SELECT nom, status, id FROM \`${config.DB_TABLE}\` WHERE nom LIKE ? ORDER BY id DESC LIMIT 500`,
|
const searchQuery = `%${q}%`;
|
||||||
[searchQuery]
|
|
||||||
);
|
try {
|
||||||
res.json(rows);
|
const [countRows] = await db.query(
|
||||||
} catch (err) {
|
`SELECT COUNT(*) AS total FROM \`${config.DB_TABLE}\` WHERE nom LIKE ?`,
|
||||||
console.error(err.message);
|
[searchQuery]
|
||||||
res.status(500).json({ error: "Erreur lors de la requête." });
|
);
|
||||||
}
|
const total = countRows[0].total;
|
||||||
|
const totalPages = Math.max(1, Math.ceil(total / limit));
|
||||||
|
|
||||||
|
const [rows] = await db.query(
|
||||||
|
`SELECT nom, status, id
|
||||||
|
FROM \`${config.DB_TABLE}\`
|
||||||
|
WHERE nom LIKE ?
|
||||||
|
ORDER BY (status = 2) DESC, id DESC
|
||||||
|
LIMIT ? OFFSET ?`,
|
||||||
|
[searchQuery, limit, offset]
|
||||||
|
);
|
||||||
|
|
||||||
|
res.json({ rows, page, limit, total, totalPages });
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err.message);
|
||||||
|
res.status(500).json({ error: "Erreur lors de la requête." });
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// --------------------------- Log -----------------------------
|
// --------------------------- Log -----------------------------
|
||||||
autopostRouter.get('/log', (req, res) => {
|
autopostRouter.get('/log', (req, res) => {
|
||||||
const filename = req.query.name;
|
const filename = req.query.name;
|
||||||
@ -990,22 +1067,41 @@ autopostRouter.post('/delete/:id', async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// --------------------------- Fultrage -----------------------------
|
// --------------------------- Filtrage -----------------------------
|
||||||
autopostRouter.get('/filter', async (req, res) => {
|
autopostRouter.get('/filter', async (req, res) => {
|
||||||
const status = req.query.status;
|
const status = Number.isFinite(parseInt(req.query.status, 10))
|
||||||
if (status === undefined) {
|
? parseInt(req.query.status, 10)
|
||||||
return res.status(400).json({ error: "Status non fourni." });
|
: null;
|
||||||
}
|
if (status === null) {
|
||||||
try {
|
return res.status(400).json({ error: "Status non fourni." });
|
||||||
const [rows] = await db.query(
|
}
|
||||||
`SELECT nom, status, id FROM \`${config.DB_TABLE}\` WHERE status = ? ORDER BY id DESC LIMIT 500`,
|
|
||||||
[status]
|
const page = parseInt(req.query.page, 10) || 1;
|
||||||
);
|
const limit = parseInt(req.query.limit, 10) || 100;
|
||||||
res.json(rows);
|
const offset = (page - 1) * limit;
|
||||||
} catch (err) {
|
|
||||||
console.error(err.message);
|
try {
|
||||||
res.status(500).json({ error: "Erreur lors de la requête." });
|
const [countRows] = await db.query(
|
||||||
}
|
`SELECT COUNT(*) AS total FROM \`${config.DB_TABLE}\` WHERE status = ?`,
|
||||||
|
[status]
|
||||||
|
);
|
||||||
|
const total = countRows[0].total;
|
||||||
|
const totalPages = Math.max(1, Math.ceil(total / limit));
|
||||||
|
|
||||||
|
const [rows] = await db.query(
|
||||||
|
`SELECT nom, status, id
|
||||||
|
FROM \`${config.DB_TABLE}\`
|
||||||
|
WHERE status = ?
|
||||||
|
ORDER BY id DESC
|
||||||
|
LIMIT ? OFFSET ?`,
|
||||||
|
[status, limit, offset]
|
||||||
|
);
|
||||||
|
|
||||||
|
res.json({ rows, page, limit, total, totalPages });
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err.message);
|
||||||
|
res.status(500).json({ error: "Erreur lors de la requête." });
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Redirection accès direct GET /edit/:id
|
// Redirection accès direct GET /edit/:id
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user