145 lines
8.6 KiB
JavaScript
145 lines
8.6 KiB
JavaScript
const API_URL = '../api.php';
|
|
let allItems = [];
|
|
let currentAdminTab = 'critique';
|
|
let currentPage = 1;
|
|
const itemsPerPage = 12;
|
|
let selectedIds = new Set();
|
|
let pendingDeleteAction = null;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadDashboardData();
|
|
initEventListeners();
|
|
document.getElementById('confirm-btn').addEventListener('click', () => {
|
|
if (pendingDeleteAction) pendingDeleteAction();
|
|
closeConfirmModal();
|
|
});
|
|
});
|
|
|
|
function initEventListeners() {
|
|
const searchInput = document.getElementById('search-input');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', () => { currentPage = 1; renderAdminTable(); });
|
|
}
|
|
document.getElementById('select-all-checkbox').addEventListener('change', (e) => toggleSelectAll(e.target));
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('modal-close') || e.target.closest('.modal-close') || e.target.classList.contains('overlay')) {
|
|
const overlay = e.target.closest('.overlay') || e.target;
|
|
if (overlay.classList.contains('overlay')) overlay.classList.remove('open');
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadDashboardData() {
|
|
try {
|
|
const res = await fetch(`${API_URL}?action=get_films`, { cache: 'no-store' });
|
|
allItems = await res.json();
|
|
renderAdminTable();
|
|
} catch (err) { console.error('Erreur chargement :', err); }
|
|
}
|
|
|
|
function getStarsHTML(rating) {
|
|
const r = parseFloat(rating) || 0;
|
|
const full = Math.floor(r), hasHalf = (r - full) >= 0.5, empty = 5 - Math.ceil(r);
|
|
return '★'.repeat(full) + (hasHalf ? '<span class="half-star">★</span>' : '') + `<span class="stars-muted">${'☆'.repeat(empty)}</span>`;
|
|
}
|
|
|
|
function renderAdminTable() {
|
|
const tbody = document.getElementById('admin-table-body');
|
|
if (!tbody) return; tbody.innerHTML = '';
|
|
const query = document.getElementById('search-input').value.toLowerCase();
|
|
let filtered = allItems.filter(i => i.type === currentAdminTab);
|
|
if (query) filtered = filtered.filter(f => f.title.toLowerCase().includes(query) || (f.director && f.director.toLowerCase().includes(query)));
|
|
|
|
document.getElementById('admin-count-label').textContent = `${filtered.length} élément(s)`;
|
|
const totalPages = Math.ceil(filtered.length / itemsPerPage) || 1;
|
|
if (currentPage > totalPages) currentPage = totalPages;
|
|
const pageItems = filtered.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
|
|
|
|
pageItems.forEach(f => {
|
|
const tr = document.createElement('tr');
|
|
const info = currentAdminTab === 'critique' ? `<span class="tbl-stars">${getStarsHTML(f.rating)}</span>` : `<span class="badge-format">${f.format || '-'}</span>`;
|
|
tr.innerHTML = `
|
|
<td><input type="checkbox" class="film-checkbox" value="${f.id}" ${selectedIds.has(String(f.id)) ? 'checked' : ''}></td>
|
|
<td><strong>${f.title}</strong></td>
|
|
<td>${f.year || '-'}</td>
|
|
<td>${f.director || '-'}</td>
|
|
<td>${info}</td>
|
|
<td>
|
|
<div class="tbl-actions">
|
|
<button onclick="openEditModal('${f.id}')"><i class="ti ti-edit"></i></button>
|
|
<button class="del" onclick="deleteSingleFilm('${f.id}')"><i class="ti ti-trash"></i></button>
|
|
</div>
|
|
</td>`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
|
|
document.querySelectorAll('.film-checkbox').forEach(cb => {
|
|
cb.onchange = (e) => {
|
|
e.target.checked ? selectedIds.add(e.target.value) : selectedIds.delete(e.target.value);
|
|
updateBulkBar();
|
|
};
|
|
});
|
|
|
|
renderPagination(totalPages, filtered.length);
|
|
const selectAll = document.getElementById('select-all-checkbox');
|
|
selectAll.checked = pageItems.length > 0 && pageItems.every(f => selectedIds.has(String(f.id)));
|
|
}
|
|
|
|
function toggleSelectAll(source) {
|
|
const filtered = allItems.filter(i => i.type === currentAdminTab);
|
|
if (source.checked) filtered.forEach(f => selectedIds.add(String(f.id)));
|
|
else filtered.forEach(f => selectedIds.delete(String(f.id)));
|
|
document.querySelectorAll('.film-checkbox').forEach(cb => cb.checked = selectedIds.has(cb.value));
|
|
updateBulkBar();
|
|
}
|
|
|
|
function updateBulkBar() {
|
|
const bar = document.getElementById('bulk-actions-bar');
|
|
const cnt = document.getElementById('bulk-count');
|
|
if (selectedIds.size > 0) {
|
|
bar.style.display = 'flex'; cnt.textContent = selectedIds.size;
|
|
} else {
|
|
bar.style.display = 'none';
|
|
document.getElementById('select-all-checkbox').checked = false;
|
|
}
|
|
}
|
|
|
|
function renderPagination(totalPages, totalItems) {
|
|
const c = document.getElementById('pagination-container'); c.innerHTML = '';
|
|
if (totalItems === 0) { c.innerHTML = '<p style="color:var(--muted); text-align:center; width:100%;">Aucun élément trouvé.</p>'; return; }
|
|
if (totalPages <= 1) return;
|
|
const info = document.createElement('span'); info.className = 'pagination-info'; info.textContent = `Page ${currentPage} / ${totalPages}`; c.appendChild(info);
|
|
const prev = document.createElement('button'); prev.innerHTML = '<i class="ti ti-chevron-left"></i>'; prev.disabled = currentPage === 1; prev.onclick = () => { currentPage--; renderAdminTable(); }; c.appendChild(prev);
|
|
|
|
const max = 5; let s = Math.max(1, currentPage - Math.floor(max/2)), e = Math.min(totalPages, s + max - 1);
|
|
if (e - s + 1 < max) s = Math.max(1, e - max + 1);
|
|
if (s > 1) { c.appendChild(makeBtn(1)); if (s > 2) c.appendChild(makeEll()); }
|
|
for (let i = s; i <= e; i++) c.appendChild(makeBtn(i));
|
|
if (e < totalPages) { if (e < totalPages - 1) c.appendChild(makeEll()); c.appendChild(makeBtn(totalPages)); }
|
|
|
|
const next = document.createElement('button'); next.innerHTML = '<i class="ti ti-chevron-right"></i>'; next.disabled = currentPage === totalPages; next.onclick = () => { currentPage++; renderAdminTable(); }; c.appendChild(next);
|
|
}
|
|
const makeBtn = (n) => { const b = document.createElement('button'); b.textContent = n; if (n === currentPage) b.classList.add('active'); b.onclick = () => { currentPage = n; renderAdminTable(); }; return b; };
|
|
const makeEll = () => { const s = document.createElement('span'); s.textContent = '...'; s.style.color = 'var(--muted)'; s.style.padding = '0 0.5rem'; return s; };
|
|
|
|
function switchAdminTab(tab) {
|
|
currentAdminTab = tab; currentPage = 1; selectedIds.clear();
|
|
document.getElementById('search-input').value = '';
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.getElementById(`btn-tab-${tab}`).classList.add('active');
|
|
renderAdminTable();
|
|
}
|
|
|
|
function showConfirmModal(fn) { pendingDeleteAction = fn; document.getElementById('confirm-modal').classList.add('open'); }
|
|
function closeConfirmModal() { document.getElementById('confirm-modal').classList.remove('open'); pendingDeleteAction = null; }
|
|
async function executeBulkDelete() { if (selectedIds.size === 0) return; showConfirmModal(async () => { await post(`${API_URL}?action=bulk_delete`, { ids: Array.from(selectedIds), type: currentAdminTab }); selectedIds.clear(); updateBulkBar(); loadDashboardData(); }); }
|
|
async function deleteSingleFilm(id) { showConfirmModal(async () => { await del(`${API_URL}?action=delete_film&id=${id}&type=${currentAdminTab}`); loadDashboardData(); }); }
|
|
|
|
function openAddModal() { document.getElementById('film-form').reset(); document.getElementById('f-id').value = ''; document.getElementById('admin-modal').classList.add('open'); }
|
|
function openEditModal(id) { const f = allItems.find(x => String(x.id) === String(id)); if (!f) return; document.getElementById('f-id').value = f.id; document.getElementById('f-title').value = f.title; document.getElementById('f-year').value = f.year || ''; document.getElementById('f-director').value = f.director || ''; document.getElementById('f-poster').value = f.poster || ''; document.getElementById('admin-modal').classList.add('open'); }
|
|
function openConfigModal() { document.getElementById('config-modal').classList.add('open'); }
|
|
function logout() { localStorage.removeItem('token'); window.location.href = 'login.html'; }
|
|
|
|
const post = async (url, body) => await fetch(url, { method: 'POST', headers: { 'Authorization': localStorage.getItem('token'), 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
|
|
const del = async (url) => await fetch(url, { method: 'DELETE', headers: { 'Authorization': localStorage.getItem('token') } });
|
|
document.getElementById('film-form').onsubmit = async (e) => { e.preventDefault(); await post(`${API_URL}?action=save_film`, Object.fromEntries(new FormData(e.target))); document.getElementById('admin-modal').classList.remove('open'); loadDashboardData(); }; |