server.js --> server.js + public/autopost.js + views/autopost.html
This commit is contained in:
unfr
parent
0936b690ec
commit
8abff0fb6c
422
autopost/public/autopost.js
Normal file
422
autopost/public/autopost.js
Normal file
@ -0,0 +1,422 @@
|
|||||||
|
// === Autopost client script ===
|
||||||
|
|
||||||
|
// --- CSRF global ---
|
||||||
|
(function () {
|
||||||
|
const meta = document.querySelector('meta[name="csrf-token"]');
|
||||||
|
const CSRF_TOKEN = meta ? meta.content : (window.__BOOTSTRAP__ && window.__BOOTSTRAP__.csrf) || '';
|
||||||
|
if (window.jQuery) {
|
||||||
|
$.ajaxSetup({ headers: { 'x-csrf-token': CSRF_TOKEN } });
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
// --- XSS escape côté client ---
|
||||||
|
function esc(s) {
|
||||||
|
// ATTENTION: backtick échappé dans la classe de caractères: \`
|
||||||
|
return String(s).replace(/[&<>"'\`=]/g, c => ({
|
||||||
|
'&': '&', '<': '<', '>': '>',
|
||||||
|
'"': '"', "'": ''', '\`': '`', '=': '='
|
||||||
|
}[c]));
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Bootstrap values ---
|
||||||
|
const INITIAL_PAGE = (window.__BOOTSTRAP__ && window.__BOOTSTRAP__.page) || 1;
|
||||||
|
const INITIAL_TOTAL_PAGES= (window.__BOOTSTRAP__ && window.__BOOTSTRAP__.totalPages) || 1;
|
||||||
|
const PAGE_LIMIT = (window.__BOOTSTRAP__ && window.__BOOTSTRAP__.limit) || 100;
|
||||||
|
|
||||||
|
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 statusClass = '';
|
||||||
|
|
||||||
|
switch (parseInt(row.status)) {
|
||||||
|
case 0: statusText = 'EN ATTENTE'; statusClass = 'bg-cyan-500 text-black font-bold'; break;
|
||||||
|
case 1: statusText = 'ENVOI TERMINÉ'; statusClass = 'bg-green-300 text-black font-bold'; break;
|
||||||
|
case 2: statusText = 'ERREUR'; statusClass = 'bg-red-300 text-black font-bold'; break;
|
||||||
|
case 3: statusText = 'DEJA DISPONIBLE';statusClass = 'bg-pink-300 text-black font-bold'; break;
|
||||||
|
case 4: statusText = 'EN COURS'; statusClass = 'bg-yellow-300 text-black font-bold'; break;
|
||||||
|
default: statusText = 'INCONNU';
|
||||||
|
}
|
||||||
|
|
||||||
|
var logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2 || parseInt(row.status) === 4)
|
||||||
|
? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="' + esc(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="' + esc(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">' +
|
||||||
|
'<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">' + esc(row.nom) + '</td>' +
|
||||||
|
'<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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 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);
|
||||||
|
alert('Erreur lors du chargement de la page.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Long polling: refresh table when new mediainfo/log apparaît ---
|
||||||
|
(function () {
|
||||||
|
var lastVersion = null;
|
||||||
|
|
||||||
|
function poll() {
|
||||||
|
$.ajax({
|
||||||
|
url: '/autopost/updates',
|
||||||
|
type: 'GET',
|
||||||
|
data: { since: lastVersion || 0 },
|
||||||
|
timeout: 30000,
|
||||||
|
success: function (resp) {
|
||||||
|
if (resp && typeof resp.version === 'number') {
|
||||||
|
if (lastVersion === null) {
|
||||||
|
lastVersion = resp.version; // 1ère synchro: on se cale
|
||||||
|
} else if (resp.version > lastVersion) {
|
||||||
|
lastVersion = resp.version;
|
||||||
|
if (typeof loadPage === 'function') loadPage(currentPage || 1);
|
||||||
|
if (typeof updateStatsUI === 'function') {
|
||||||
|
$.getJSON('/autopost/stats', function (s) { if (s) updateStatsUI(s); });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(poll, 100);
|
||||||
|
},
|
||||||
|
error: function () {
|
||||||
|
setTimeout(poll, 2000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(poll);
|
||||||
|
})();
|
||||||
|
|
||||||
|
function updateStatsUI(s) {
|
||||||
|
$('.filter-card[data-status="0"] .tabular-nums').text(s.attente || 0);
|
||||||
|
$('.filter-card[data-status="1"] .tabular-nums').text(s.termine || 0);
|
||||||
|
$('.filter-card[data-status="2"] .tabular-nums').text(s.erreur || 0);
|
||||||
|
$('.filter-card[data-status="3"] .tabular-nums').text(s.deja || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshAfterChange() {
|
||||||
|
loadPage(currentPage || 1);
|
||||||
|
$.getJSON('/autopost/stats', function(s) { updateStatsUI(s); });
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- DOM bindings ---
|
||||||
|
$(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
|
||||||
|
$(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');
|
||||||
|
} else {
|
||||||
|
$('#showAll').removeClass('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filtrage par clic sur une card
|
||||||
|
$(document).on('click', '.filter-card', function() {
|
||||||
|
const status = parseInt($(this).data('status'), 10);
|
||||||
|
|
||||||
|
$('.filter-card').removeClass('ring-4 ring-white/40');
|
||||||
|
$(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);
|
||||||
|
toggleShowAllButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Edition (ouvrir modale)
|
||||||
|
$(document).on('click', '.edit-link', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var releaseId = $(this).data('id');
|
||||||
|
var currentStatus = $(this).data('status');
|
||||||
|
$('#releaseId').val(releaseId);
|
||||||
|
$('#modalReleaseId').text(releaseId);
|
||||||
|
$('#statusSelect').val(currentStatus);
|
||||||
|
$('#editModal').removeClass('hidden').fadeIn();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ---------- 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();
|
||||||
|
var releaseId = $(this).data('id');
|
||||||
|
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() {
|
||||||
|
$('#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.');
|
||||||
|
},
|
||||||
|
complete: function() {
|
||||||
|
closeConfirmModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Affichage log
|
||||||
|
$(document).on('click', '.log-link', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var filename = $(this).data('filename');
|
||||||
|
$.ajax({
|
||||||
|
url: '/autopost/log',
|
||||||
|
type: 'GET',
|
||||||
|
data: { name: filename },
|
||||||
|
dataType: 'json',
|
||||||
|
success: function(data) {
|
||||||
|
$('#logContent').html(data.content);
|
||||||
|
$('#logModal').removeClass('hidden').fadeIn();
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
alert('Erreur lors du chargement du fichier log.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Affichage mediainfo
|
||||||
|
$(document).on('click', '.mediainfo-link', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var filename = $(this).data('filename');
|
||||||
|
$.ajax({
|
||||||
|
url: '/autopost/mediainfo',
|
||||||
|
type: 'GET',
|
||||||
|
data: { name: filename },
|
||||||
|
dataType: 'json',
|
||||||
|
success: function(data) {
|
||||||
|
$('#mediainfoContent').text(data.content);
|
||||||
|
$('#mediainfoModal').removeClass('hidden').fadeIn();
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
alert('Erreur lors du chargement du fichier mediainfo.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fermeture modales (croix + clic overlay)
|
||||||
|
$('.close').click(function() {
|
||||||
|
$(this).closest('.fixed').fadeOut(function() {
|
||||||
|
$(this).addClass('hidden');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.fixed').click(function(e) {
|
||||||
|
if (e.target === this) {
|
||||||
|
$(this).fadeOut(function() {
|
||||||
|
$(this).addClass('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Edition: submit
|
||||||
|
$('#editForm').submit(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var releaseId = $('#releaseId').val();
|
||||||
|
var newStatus = $('#statusSelect').val();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '/autopost/edit/' + releaseId,
|
||||||
|
type: 'POST',
|
||||||
|
data: { status: newStatus },
|
||||||
|
success: function() {
|
||||||
|
var statusText = '';
|
||||||
|
var statusClass = '';
|
||||||
|
switch (parseInt(newStatus)) {
|
||||||
|
case 0: statusText = 'EN ATTENTE'; statusClass = 'bg-cyan-500 text-black font-bold'; break;
|
||||||
|
case 1: statusText = 'ENVOI TERMINÉ'; statusClass = 'bg-green-300 text-black font-bold'; break;
|
||||||
|
case 2: statusText = 'ERREUR'; statusClass = 'bg-red-300 text-black font-bold'; break;
|
||||||
|
case 3: statusText = 'DEJA DISPONIBLE';statusClass = 'bg-pink-300 text-black font-bold'; break;
|
||||||
|
case 4: statusText = 'EN COURS'; statusClass = 'bg-yellow-300 text-black font-bold'; break;
|
||||||
|
default: 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.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Bouton copier Mediainfo
|
||||||
|
$('#copyMediainfoBtn').on('click', function() {
|
||||||
|
const content = document.getElementById('mediainfoContent').textContent;
|
||||||
|
navigator.clipboard.writeText(content).then(() => {
|
||||||
|
this.textContent = '✅ Copié !';
|
||||||
|
setTimeout(() => this.textContent = '📋 Copier JSON', 2000);
|
||||||
|
}).catch(function(err) {
|
||||||
|
alert('Erreur lors de la copie : ' + err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
1288
autopost/server.js
1288
autopost/server.js
File diff suppressed because it is too large
Load Diff
199
autopost/views/autopost.html
Normal file
199
autopost/views/autopost.html
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>{{TITLE}}</title>
|
||||||
|
<meta name="csrf-token" content="{{CSRF_TOKEN}}">
|
||||||
|
<script src="js/index.global.js"></script>
|
||||||
|
<script src="jquery/jquery.min.js"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body class="bg-{{BACKGROUND_CLASS}} text-white font-sans p-4">
|
||||||
|
<div class="w-full px-4">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h1 class="text-2xl md:text-3xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-300">
|
||||||
|
Suivi Autopost {{APP_NAME}}
|
||||||
|
</h1>
|
||||||
|
<a href="/autopost/logout"
|
||||||
|
class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-red-600/90 hover:bg-red-600 text-white shadow-lg shadow-red-900/20 transition">
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h5a2 2 0 012 2v1"/>
|
||||||
|
</svg>
|
||||||
|
Déconnexion
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-sm text-gray-400">Vue d’ensemble des traitements en cours et de l’état des envois.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stat cards -->
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||||
|
<!-- En attente -->
|
||||||
|
<div class="group rounded-2xl p-3 md:p-5 bg-gradient-to-br from-cyan-500 to-cyan-400 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="0">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="rounded-xl bg-black/10 p-2">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M12 6v6l4 2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm/5 font-medium">En attente</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 text-3xl font-extrabold tabular-nums">{{STAT_ATTENTE}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Terminé -->
|
||||||
|
<div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-green-300 to-emerald-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="rounded-xl bg-black/10 p-2">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M5 13l4 4L19 7"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm/5 font-medium">Terminé</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 text-3xl font-extrabold tabular-nums">{{STAT_TERMINE}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Erreur -->
|
||||||
|
<div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-rose-300 to-red-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="2">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="rounded-xl bg-black/10 p-2">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M12 9v3m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm/5 font-medium">Erreur</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 text-3xl font-extrabold tabular-nums">{{STAT_ERREUR}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Déjà dispo -->
|
||||||
|
<div class="group rounded-2xl p-4 md:p-5 bg-gradient-to-br from-pink-300 to-fuchsia-300 text-black shadow-xl ring-1 ring-white/10 transition transform hover:-translate-y-0.5 hover:shadow-2xl cursor-pointer filter-card" data-status="3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="rounded-xl bg-black/10 p-2">
|
||||||
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M8 7h8M8 11h8M8 15h6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm/5 font-medium">Déjà dispo</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 text-3xl font-extrabold tabular-nums">{{STAT_DEJA}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bouton réinitialiser -->
|
||||||
|
<div class="mb-4 text-center">
|
||||||
|
<button id="showAll"
|
||||||
|
class="hidden px-5 py-2 rounded-xl bg-gradient-to-br from-gray-600 to-gray-800 text-white font-semibold shadow-lg hover:from-gray-500 hover:to-gray-700 transition transform hover:-translate-y-0.5">
|
||||||
|
Tout afficher
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="searchInput" class="sr-only">Rechercher</label>
|
||||||
|
<div class="relative">
|
||||||
|
<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||||
|
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<input id="searchInput" type="text" placeholder="Rechercher…"
|
||||||
|
class="w-full pl-10 pr-3 py-2 rounded-xl bg-gray-800/80 border border-gray-700 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 outline-none transition placeholder:text-gray-400" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav id="pagination" aria-label="Page navigation" class="mb-4">
|
||||||
|
{{PAGINATION_HTML}}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<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">
|
||||||
|
<tr>
|
||||||
|
<th class="px-4 py-2">Name</th>
|
||||||
|
<th class="px-4 py-2">Status</th>
|
||||||
|
<th class="px-4 py-2">ID</th>
|
||||||
|
<th class="px-4 py-2">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-700">
|
||||||
|
{{TABLE_ROWS}}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modales + Toast (inchangés) -->
|
||||||
|
<!-- Modale d'édition -->
|
||||||
|
<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">
|
||||||
|
<button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close">×</button>
|
||||||
|
<h2 class="text-2xl font-bold mb-6 text-center text-white">✏️ Éditer Release <span id="modalReleaseId" class="text-blue-400"></span></h2>
|
||||||
|
<form id="editForm">
|
||||||
|
<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>
|
||||||
|
<option value="4" class="text-yellow-400">EN COURS</option>
|
||||||
|
</select>
|
||||||
|
<input type="hidden" id="releaseId" name="id" value=""/>
|
||||||
|
<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 log -->
|
||||||
|
<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">
|
||||||
|
<button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close log-close">×</button>
|
||||||
|
<h2 class="text-2xl font-bold mb-6 text-center text-white">📄 Contenu du log</h2>
|
||||||
|
<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 mediainfo -->
|
||||||
|
<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">
|
||||||
|
<button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl font-bold close mediainfo-close" title="Fermer">×</button>
|
||||||
|
<h2 class="text-2xl font-bold text-white mb-4 pr-16">📄 Contenu du mediainfo</h2>
|
||||||
|
<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>
|
||||||
|
<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 confirmation 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-3xl md:max-w-4xl 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">×</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>
|
||||||
|
|
||||||
|
<!-- Bootstrap côté client (données initiales) -->
|
||||||
|
<script>window.__BOOTSTRAP__ = {{BOOTSTRAP_JSON}};</script>
|
||||||
|
<script src="autopost.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -51,6 +51,8 @@ install_bin() { # install_bin <src> <dst>
|
|||||||
log "Initialisation des dossiers"
|
log "Initialisation des dossiers"
|
||||||
ensure_dir "$BIN_DIR"
|
ensure_dir "$BIN_DIR"
|
||||||
ensure_dir "$AUTOPOST_DIR"
|
ensure_dir "$AUTOPOST_DIR"
|
||||||
|
ensure_dir "$AUTOPOST_DIR"/public
|
||||||
|
ensure_dir "$AUTOPOST_DIR"/views
|
||||||
ensure_dir "$BASH_COMPLETION_DIR"
|
ensure_dir "$BASH_COMPLETION_DIR"
|
||||||
|
|
||||||
# Ensure PATH contains $HOME/bin for this session & future shells
|
# Ensure PATH contains $HOME/bin for this session & future shells
|
||||||
@ -328,6 +330,8 @@ popd >/dev/null
|
|||||||
log "Vérification fichiers Node"
|
log "Vérification fichiers Node"
|
||||||
[ -f "$AUTOPOST_DIR/server.js" ] || wget -q -O "$AUTOPOST_DIR/server.js" "https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/server.js"
|
[ -f "$AUTOPOST_DIR/server.js" ] || wget -q -O "$AUTOPOST_DIR/server.js" "https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/server.js"
|
||||||
[ -f "$AUTOPOST_DIR/db.js" ] || wget -q -O "$AUTOPOST_DIR/db.js" "https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/db.js"
|
[ -f "$AUTOPOST_DIR/db.js" ] || wget -q -O "$AUTOPOST_DIR/db.js" "https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/db.js"
|
||||||
|
[ -f "$AUTOPOST_DIR/public/autopost.js" ] || wget -q -O "$AUTOPOST_DIR/public/autopost.js" "https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/public/autopost.js"
|
||||||
|
[ -f "$AUTOPOST_DIR/views/autopost.html" ] || wget -q -O "$AUTOPOST_DIR/views/autopost.html" "https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/views/autopost.html"
|
||||||
if [ ! -f "$AUTOPOST_DIR/config.js" ]; then
|
if [ ! -f "$AUTOPOST_DIR/config.js" ]; then
|
||||||
wget -q -O "$AUTOPOST_DIR/config.js" "https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/config.js"
|
wget -q -O "$AUTOPOST_DIR/config.js" "https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/config.js"
|
||||||
ok "Installation terminée. Configurez $AUTOPOST_DIR/config.js."
|
ok "Installation terminée. Configurez $AUTOPOST_DIR/config.js."
|
||||||
|
|||||||
@ -88,7 +88,7 @@ BASH_COMPLETION_DIR="$HOME/.bash_completion.d"
|
|||||||
CONF_SH="$AUTOPOST_DIR/conf.sh"
|
CONF_SH="$AUTOPOST_DIR/conf.sh"
|
||||||
CFG_JS="$AUTOPOST_DIR/config.js"
|
CFG_JS="$AUTOPOST_DIR/config.js"
|
||||||
|
|
||||||
mkdir -p "$BIN_DIR" "$AUTOPOST_DIR" "$BASH_COMPLETION_DIR"
|
mkdir -p "$BIN_DIR" "$AUTOPOST_DIR" "$BASH_COMPLETION_DIR" "$AUTOPOST_DIR/views" "$AUTOPOST_DIR/public"
|
||||||
|
|
||||||
TMP_DIR="$(mktemp -d)"
|
TMP_DIR="$(mktemp -d)"
|
||||||
cleanup(){ rm -rf "$TMP_DIR"; }
|
cleanup(){ rm -rf "$TMP_DIR"; }
|
||||||
@ -104,6 +104,8 @@ FILES["$AUTOPOST_DIR/posteur.sh"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/
|
|||||||
FILES["$AUTOPOST_DIR/common.sh"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/common.sh"
|
FILES["$AUTOPOST_DIR/common.sh"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/common.sh"
|
||||||
FILES["$BIN_DIR/postauto"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/main/bin/postauto"
|
FILES["$BIN_DIR/postauto"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/main/bin/postauto"
|
||||||
FILES["$AUTOPOST_DIR/server.js"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/server.js"
|
FILES["$AUTOPOST_DIR/server.js"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/server.js"
|
||||||
|
FILES["$AUTOPOST_DIR/public/autopost.js"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/public/autopost.js"
|
||||||
|
FILES["$AUTOPOST_DIR/views/autopost.html"]="https://tig.unfr.pw/UNFR/postauto/raw/branch/main/autopost/views/autopost.html"
|
||||||
|
|
||||||
log "Vérification/MAJ des fichiers…"
|
log "Vérification/MAJ des fichiers…"
|
||||||
for LOCAL in "${!FILES[@]}"; do
|
for LOCAL in "${!FILES[@]}"; do
|
||||||
@ -180,7 +182,7 @@ fi
|
|||||||
if ! ensure_cmd BDInfo; then
|
if ! ensure_cmd BDInfo; then
|
||||||
log "Installation BDInfo…"
|
log "Installation BDInfo…"
|
||||||
pushd "$TMP_DIR" >/dev/null
|
pushd "$TMP_DIR" >/dev/null
|
||||||
curl -fsSL -o bdinfo.zip "https://github.com/dotnetcorecorner/BDInfo/releases/download/linux-2.0.6/bdinfo_linux_v2.0.6.zip"
|
wget -q -o /dev/null -O bdinfo.zip "https://github.com/dotnetcorecorner/BDInfo/releases/download/linux-2.0.6/bdinfo_linux_v2.0.6.zip"
|
||||||
unzip -q bdinfo.zip
|
unzip -q bdinfo.zip
|
||||||
BDBIN="$(find . -type f -name BDInfo -perm -u+x | head -n1)"
|
BDBIN="$(find . -type f -name BDInfo -perm -u+x | head -n1)"
|
||||||
[ -n "$BDBIN" ] || die "BDInfo introuvable"
|
[ -n "$BDBIN" ] || die "BDInfo introuvable"
|
||||||
@ -191,7 +193,7 @@ fi
|
|||||||
if ! ensure_cmd BDInfoDataSubstractor; then
|
if ! ensure_cmd BDInfoDataSubstractor; then
|
||||||
log "Installation BDInfoDataSubstractor…"
|
log "Installation BDInfoDataSubstractor…"
|
||||||
pushd "$TMP_DIR" >/dev/null
|
pushd "$TMP_DIR" >/dev/null
|
||||||
curl -fsSL -o substractor.zip "https://github.com/dotnetcorecorner/BDInfo/releases/download/linux-2.0.6/bdinfodatasubstractor_linux_v2.0.6.zip"
|
wget -q -o /dev/null -O substractor.zip "https://github.com/dotnetcorecorner/BDInfo/releases/download/linux-2.0.6/bdinfodatasubstractor_linux_v2.0.6.zip"
|
||||||
unzip -q substractor.zip
|
unzip -q substractor.zip
|
||||||
SBBIN="$(find . -type f -name BDInfoDataSubstractor -perm -u+x | head -n1)"
|
SBBIN="$(find . -type f -name BDInfoDataSubstractor -perm -u+x | head -n1)"
|
||||||
[ -n "$SBBIN" ] || die "BDInfoDataSubstractor introuvable"
|
[ -n "$SBBIN" ] || die "BDInfoDataSubstractor introuvable"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user