mirror of
https://github.com/nfonteyne/octane-website.git
synced 2026-09-03 23:24:48 +02:00
fix: cant add multiple future rehersals
This commit is contained in:
Nathan FONTEYNE
parent
749abda8ba
commit
5e28345ed5
7 changed files with 196 additions and 35 deletions
|
|
@ -93,6 +93,105 @@ function bindConcertLinks(container) {
|
|||
});
|
||||
}
|
||||
|
||||
// ---------- Prochain concert : liste des concerts à venir ----------
|
||||
|
||||
let upcomingConcerts = [];
|
||||
|
||||
function upcomingConcertRowTemplate(c) {
|
||||
return `
|
||||
<div class="card concert-row" data-concert-id="${c.id}">
|
||||
<div class="concert-row-info" data-concert-id="${c.id}">
|
||||
<div class="card-title">${escapeHtml(c.name || 'Concert')}</div>
|
||||
<div class="card-subtitle">${escapeHtml(c.venue || '')} · ${formatDateShort(c.concert_date)}</div>
|
||||
</div>
|
||||
<div class="concert-row-actions">
|
||||
<button type="button" class="secondary icon-btn edit-concert-btn" data-concert-id="${c.id}" title="Modifier">✏️<span class="btn-label"> Modifier</span></button>
|
||||
<button type="button" class="danger icon-btn delete-concert-btn" data-concert-id="${c.id}" title="Supprimer">🗑️<span class="btn-label"> Supprimer</span></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function loadUpcoming() {
|
||||
upcomingConcerts = await api.get('/api/setlists/upcoming');
|
||||
renderUpcomingList();
|
||||
}
|
||||
|
||||
function renderUpcomingList() {
|
||||
const container = document.getElementById('upcoming-concerts-list');
|
||||
container.innerHTML = upcomingConcerts.length
|
||||
? upcomingConcerts.map(upcomingConcertRowTemplate).join('')
|
||||
: '<p class="empty">Aucun concert à venir pour le moment.</p>';
|
||||
container.querySelectorAll('.concert-row-info').forEach((el) => {
|
||||
el.addEventListener('click', () => showNextDetail(el.dataset.concertId));
|
||||
});
|
||||
container.querySelectorAll('.edit-concert-btn').forEach((btn) => {
|
||||
btn.addEventListener('click', () => showNextDetail(btn.dataset.concertId));
|
||||
});
|
||||
container.querySelectorAll('.delete-concert-btn').forEach((btn) => {
|
||||
btn.addEventListener('click', () => onDeleteUpcoming(btn.dataset.concertId));
|
||||
});
|
||||
}
|
||||
|
||||
async function onDeleteUpcoming(id) {
|
||||
try {
|
||||
await api.del(`/api/setlists/${id}`);
|
||||
await loadUpcoming();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function onAddConcert(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const name = form.name.value.trim();
|
||||
const venue = form.venue.value.trim();
|
||||
const concertDate = form.concertDate.value;
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
submitBtn.disabled = true;
|
||||
try {
|
||||
await api.post('/api/setlists', { name, venue, concertDate });
|
||||
form.reset();
|
||||
document.getElementById('add-concert-panel').style.display = 'none';
|
||||
document.getElementById('toggle-add-concert-btn').textContent = '+ Proposer un concert';
|
||||
await loadUpcoming();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
} finally {
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function showUpcomingList() {
|
||||
document.getElementById('next-detail-view').style.display = 'none';
|
||||
document.getElementById('next-list-view').style.display = 'block';
|
||||
}
|
||||
|
||||
function showNextDetail(id) {
|
||||
document.getElementById('next-list-view').style.display = 'none';
|
||||
document.getElementById('next-detail-view').style.display = 'block';
|
||||
|
||||
const editor = createSetlistEditor({
|
||||
containerId: 'next-detail-content',
|
||||
allSongs,
|
||||
getSetlist: async () => {
|
||||
try {
|
||||
return await api.get(`/api/setlists/${id}`);
|
||||
} catch (err) {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
emptyMessage: 'Concert introuvable.',
|
||||
allowDelete: true,
|
||||
onDeleted: async () => {
|
||||
showUpcomingList();
|
||||
await loadUpcoming();
|
||||
},
|
||||
});
|
||||
editor.load();
|
||||
}
|
||||
|
||||
function renderTimeline() {
|
||||
const container = document.getElementById('timeline-view');
|
||||
if (!concerts.length) {
|
||||
|
|
@ -168,16 +267,6 @@ function showHistoryDetail(id) {
|
|||
await initNav('concerts');
|
||||
allSongs = await api.get('/api/songs');
|
||||
|
||||
const nextEditor = createSetlistEditor({
|
||||
containerId: 'next-content',
|
||||
allSongs,
|
||||
getSetlist: () => api.get('/api/setlists/next'),
|
||||
createSetlist: (data) => api.post('/api/setlists', data),
|
||||
emptyMessage: 'Aucun concert à venir pour le moment.',
|
||||
allowDelete: true,
|
||||
onDeleted: () => nextEditor.load(),
|
||||
});
|
||||
|
||||
document.getElementById('tab-next').addEventListener('click', () => switchTab('next'));
|
||||
document.getElementById('tab-history').addEventListener('click', () => switchTab('history'));
|
||||
document.getElementById('toggle-history-mode-btn').addEventListener('click', () => {
|
||||
|
|
@ -188,9 +277,20 @@ function showHistoryDetail(id) {
|
|||
e.preventDefault();
|
||||
showHistoryList();
|
||||
});
|
||||
document.getElementById('back-to-upcoming-link').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
showUpcomingList();
|
||||
});
|
||||
document.getElementById('toggle-add-concert-btn').addEventListener('click', () => {
|
||||
const panel = document.getElementById('add-concert-panel');
|
||||
const isOpen = panel.style.display !== 'none';
|
||||
panel.style.display = isOpen ? 'none' : 'block';
|
||||
document.getElementById('toggle-add-concert-btn').textContent = isOpen ? '+ Proposer un concert' : 'Annuler';
|
||||
});
|
||||
document.getElementById('add-concert-form').addEventListener('submit', onAddConcert);
|
||||
|
||||
try {
|
||||
await nextEditor.load();
|
||||
await loadUpcoming();
|
||||
await loadHistory();
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ function createSetlistEditor({
|
|||
let setlist = null;
|
||||
let mainRows = [];
|
||||
let encoreRows = [];
|
||||
let actionsRevealed = false;
|
||||
|
||||
function formatDate(dateStr) {
|
||||
const d = new Date(dateStr);
|
||||
|
|
@ -35,11 +34,16 @@ function createSetlistEditor({
|
|||
const rowHtml = (s) => `<li><span class="row-title">${escapeHtml(s.title)}</span> <span class="row-artist">— ${escapeHtml(s.artist)}</span>${s.note ? `<span class="note">${escapeHtml(s.note)}</span>` : ''}</li>`;
|
||||
const playlistUrl = youtubePlaylistUrl([...main, ...encore].map((s) => s.youtube_url).filter(Boolean));
|
||||
return `
|
||||
<div class="card" id="concert-summary-card" style="cursor:pointer">
|
||||
<div class="card-title">${escapeHtml(setlist.name || 'Concert')}</div>
|
||||
<div class="card-subtitle">${escapeHtml(setlist.venue || '')} · ${formatDate(setlist.concert_date)}</div>
|
||||
${playlistUrl ? `<div class="song-links"><a class="pill-link youtube" id="playlist-link" href="${playlistUrl}" target="_blank" rel="noopener">► Écouter la setlist sur YouTube</a></div>` : ''}
|
||||
<p class="note" style="margin-bottom:0">${actionsRevealed ? 'Cliquer pour masquer les actions' : 'Cliquer pour modifier ou supprimer'}</p>
|
||||
<div class="card concert-detail-card">
|
||||
<div>
|
||||
<div class="card-title">${escapeHtml(setlist.name || 'Concert')}</div>
|
||||
<div class="card-subtitle">${escapeHtml(setlist.venue || '')} · ${formatDate(setlist.concert_date)}</div>
|
||||
${playlistUrl ? `<div class="song-links"><a class="pill-link youtube" href="${playlistUrl}" target="_blank" rel="noopener">► Écouter la setlist sur YouTube</a></div>` : ''}
|
||||
</div>
|
||||
<div class="concert-row-actions">
|
||||
<button id="edit-btn" type="button" class="secondary icon-btn" title="Modifier">✏️<span class="btn-label"> Modifier</span></button>
|
||||
${allowDelete ? '<button id="delete-btn" type="button" class="danger icon-btn" title="Supprimer">🗑️<span class="btn-label"> Supprimer</span></button>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="setlist-section">
|
||||
<h3>Setlist</h3>
|
||||
|
|
@ -49,11 +53,6 @@ function createSetlistEditor({
|
|||
<h3>Rappel</h3>
|
||||
${encore.length ? `<ol class="setlist">${encore.map(rowHtml).join('')}</ol>` : '<p class="empty">Aucun morceau de rappel prévu.</p>'}
|
||||
</div>
|
||||
${actionsRevealed ? `
|
||||
<div class="inline-form" style="margin-top:1rem">
|
||||
<button id="edit-btn" class="secondary">Modifier</button>
|
||||
${allowDelete ? '<button id="delete-btn" class="danger">Supprimer ce concert</button>' : ''}
|
||||
</div>` : ''}
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
@ -66,16 +65,9 @@ function createSetlistEditor({
|
|||
return;
|
||||
}
|
||||
container().innerHTML = readOnlyView();
|
||||
document.getElementById('concert-summary-card').addEventListener('click', () => {
|
||||
actionsRevealed = !actionsRevealed;
|
||||
renderReadOnly();
|
||||
});
|
||||
const playlistLink = document.getElementById('playlist-link');
|
||||
if (playlistLink) playlistLink.addEventListener('click', (e) => e.stopPropagation());
|
||||
const editBtn = document.getElementById('edit-btn');
|
||||
if (editBtn) editBtn.addEventListener('click', (e) => { e.stopPropagation(); enterEditMode(); });
|
||||
document.getElementById('edit-btn').addEventListener('click', enterEditMode);
|
||||
const deleteBtn = document.getElementById('delete-btn');
|
||||
if (deleteBtn) deleteBtn.addEventListener('click', (e) => { e.stopPropagation(); onDelete(); });
|
||||
if (deleteBtn) deleteBtn.addEventListener('click', onDelete);
|
||||
}
|
||||
|
||||
async function onDelete() {
|
||||
|
|
@ -168,7 +160,6 @@ function createSetlistEditor({
|
|||
}
|
||||
|
||||
function enterEditMode() {
|
||||
actionsRevealed = false;
|
||||
mainRows = setlist.songs
|
||||
.filter((s) => !s.is_encore)
|
||||
.map((s) => ({ setlistSongId: s.id, songId: s.song_id, title: s.title, artist: s.artist, note: s.note }));
|
||||
|
|
@ -285,7 +276,6 @@ function createSetlistEditor({
|
|||
async load() {
|
||||
try {
|
||||
setlist = await getSetlist();
|
||||
actionsRevealed = false;
|
||||
renderReadOnly();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue