UNFR/postauto
1
0
Fork 0
Code

réécriture des modal

Browse Source
This commit is contained in:
unfr 2025-08-11 15:42:08 +02:00
parent 0decab4064
commit 9c1a3c8ded
1 changed files with 130 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
autopost/server.js
View File

@ -392,12 +392,61 @@ autopostRouter.get('/', async (req, res) => {
</div>
<!-- Modale pour afficher le mediainfo -->
<div id="mediainfoModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div 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>
@ -545,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
@ -668,6 +772,16 @@ autopostRouter.get('/', async (req, res) => {
});
});
});
// Bouton copie du JSON
document.getElementById("copyMediainfoBtn").addEventListener("click", function () {
const content = document.getElementById("mediainfoContent").textContent;
navigator.clipboard.writeText(content).then(() => {
this.textContent = "✅ Copié !";
setTimeout(() => this.textContent = "📋 Copier JSON", 2000);
}).catch(err => {
alert("Erreur lors de la copie : " + err);
});
});
</script>
</body>
</html>