jfork/octane-website
1
0
Fork 0
mirror of https://github.com/nfonteyne/octane-website.git synced 2026-09-03 23:24:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

update: visual update, phone responsive, db migration

Browse source
This commit is contained in:
Nathan FONTEYNE 2026-07-08 11:50:12 +02:00
parent 73ebd6ad49
commit e97aa2c6c3
16 changed files with 894 additions and 244 deletions
Download patch file Download diff file Expand all files Collapse all files

12
public/js/history-detail.js
View file

@ -20,19 +20,23 @@ function showError(message) {
const setlist = await api.get(`/api/setlists/${id}`);
const main = setlist.songs.filter((s) => !s.is_encore);
const encore = setlist.songs.filter((s) => s.is_encore);
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>`;
container.innerHTML = `
<h1>${escapeHtml(setlist.name || 'Concert')}</h1>
<p class="card-subtitle">${escapeHtml(setlist.venue || '')} · ${formatDate(setlist.concert_date)}</p>
<div class="card">
<div class="card-title">${escapeHtml(setlist.name || 'Concert')}</div>
<div class="card-subtitle">${escapeHtml(setlist.venue || '')} · ${formatDate(setlist.concert_date)}</div>
</div>
<div class="setlist-section">
<h3>Setlist</h3>
${main.length
? `<ol class="setlist">${main.map((s) => `<li>${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `<span class="note">${escapeHtml(s.note)}</span>` : ''}</li>`).join('')}</ol>`
? `<ol class="setlist">${main.map(rowHtml).join('')}</ol>`
: '<p class="empty">Aucun morceau enregistré.</p>'}
</div>
<div class="setlist-section">
<h3>Rappel</h3>
${encore.length
? `<ol class="setlist">${encore.map((s) => `<li>${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `<span class="note">${escapeHtml(s.note)}</span>` : ''}</li>`).join('')}</ol>`
? `<ol class="setlist">${encore.map(rowHtml).join('')}</ol>`
: '<p class="empty">Aucun rappel enregistré.</p>'}
</div>
`;

10
public/js/nav.js
View file

@ -2,7 +2,9 @@ async function initNav(activePage) {
const me = await api.get('/api/users/me');
const nav = document.getElementById('main-nav');
nav.innerHTML = `
<div class="nav-links">
<span class="brand"><span class="brand-dot">&#9835;</span> Octane</span>
<button type="button" class="nav-toggle" id="nav-toggle" aria-label="Menu">&#9776;</button>
<div class="nav-links" id="nav-links">
<a href="/index.html" class="${activePage === 'repertoire' ? 'active' : ''}">Répertoire</a>
<a href="/suggestions.html" class="${activePage === 'suggestions' ? 'active' : ''}">Suggestions</a>
<a href="/setlist.html" class="${activePage === 'setlist' ? 'active' : ''}">Prochain concert</a>
@ -13,5 +15,11 @@ async function initNav(activePage) {
<a href="/auth/logout">Se déconnecter</a>
</div>
`;
const toggle = document.getElementById('nav-toggle');
const links = document.getElementById('nav-links');
toggle.addEventListener('click', () => links.classList.toggle('open'));
links.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => links.classList.remove('open')));
return me;
}

27
public/js/render.js
View file

@ -12,19 +12,30 @@ function escapeHtml(str) {
}[c]));
}
function youtubeEmbedUrl(url) {
function youtubeVideoId(url) {
try {
const parsed = new URL(url);
let videoId = null;
if (parsed.hostname === 'youtu.be') {
videoId = parsed.pathname.slice(1);
} else if (parsed.pathname === '/watch') {
videoId = parsed.searchParams.get('v');
} else if (parsed.pathname.startsWith('/embed/')) {
videoId = parsed.pathname.split('/embed/')[1];
return parsed.pathname.slice(1) || null;
}
return videoId ? `https://www.youtube.com/embed/${videoId}` : null;
if (parsed.pathname === '/watch') {
return parsed.searchParams.get('v');
}
if (parsed.pathname.startsWith('/embed/')) {
return parsed.pathname.split('/embed/')[1] || null;
}
return null;
} catch {
return null;
}
}
function youtubeEmbedUrl(url) {
const videoId = youtubeVideoId(url);
return videoId ? `https://www.youtube.com/embed/${videoId}` : null;
}
function youtubeThumbnailUrl(url) {
const videoId = youtubeVideoId(url);
return videoId ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` : null;
}

124
public/js/repertoire.js
View file

@ -2,6 +2,7 @@ let me = null;
let instruments = [];
let songs = [];
const expanded = new Set();
const editing = new Set();
async function loadInstruments() {
instruments = await api.get('/api/instruments');
@ -16,21 +17,56 @@ function instrumentOptions() {
return instruments.map((i) => `<option value="${i.id}">${escapeHtml(i.name)}</option>`).join('');
}
function songThumbTemplate(song) {
const thumb = song.youtube_url ? youtubeThumbnailUrl(song.youtube_url) : null;
if (thumb) {
return `
<div class="song-thumb">
<img src="${thumb}" alt="${escapeHtml(song.title)}" loading="lazy">
<a class="play-overlay" href="${escapeHtml(song.youtube_url)}" target="_blank" rel="noopener" title="Écouter sur YouTube">&#9658;</a>
</div>
`;
}
return `<div class="song-thumb placeholder">&#9835;</div>`;
}
function songLinksTemplate(song) {
const links = [];
if (song.youtube_url) {
links.push(`<a class="pill-link youtube" href="${escapeHtml(song.youtube_url)}" target="_blank" rel="noopener">&#9658; YouTube</a>`);
}
if (song.spotify_url) {
links.push(`<a class="pill-link spotify" href="${escapeHtml(song.spotify_url)}" target="_blank" rel="noopener">&#9835; Spotify</a>`);
}
return links.length ? `<div class="song-links">${links.join('')}</div>` : '';
}
function songCardTemplate(song) {
if (editing.has(song.id)) return editSongCardTemplate(song);
const isOpen = expanded.has(song.id);
return `
<div class="card" data-song-id="${song.id}">
<div class="card-header">
<div>
<div class="card-title">${escapeHtml(song.title)}</div>
<div class="card-subtitle">${escapeHtml(song.artist)}</div>
<div class="song-card">
${songThumbTemplate(song)}
<div class="song-body">
<div class="card-header">
<div>
<div class="card-title">${escapeHtml(song.title)}</div>
<div class="card-subtitle">${escapeHtml(song.artist)}</div>
</div>
</div>
${song.notes ? `<p class="note">${escapeHtml(song.notes)}</p>` : ''}
${songLinksTemplate(song)}
<div class="song-links">
<button class="secondary icon-btn toggle-tutorials" data-id="${song.id}">
${isOpen ? 'Masquer les tutos' : `Tutos (${song.tutorial_count})`}
</button>
${me && me.isAdmin ? `<button class="secondary icon-btn edit-song" data-id="${song.id}">Modifier</button>` : ''}
</div>
</div>
<button class="secondary toggle-tutorials" data-id="${song.id}">
${isOpen ? 'Masquer les tutos' : `Tutos (${song.tutorial_count})`}
</button>
</div>
${song.notes ? `<p class="note">${escapeHtml(song.notes)}</p>` : ''}
<div class="tutorials-panel" style="${isOpen ? '' : 'display:none'}">
<div class="tutorials-panel panel" style="${isOpen ? '' : 'display:none'}">
<div class="tag-list" data-tutorials-for="${song.id}"><p class="empty">Chargement…</p></div>
${me && me.isAdmin ? `
<form class="inline-form add-tutorial-form" data-song-id="${song.id}">
@ -46,15 +82,53 @@ function songCardTemplate(song) {
`;
}
function editSongCardTemplate(song) {
return `
<div class="card" data-song-id="${song.id}">
<form class="stacked-form edit-song-form" data-id="${song.id}">
<label>Titre <input name="title" value="${escapeHtml(song.title)}" required></label>
<label>Artiste <input name="artist" value="${escapeHtml(song.artist)}" required></label>
<label>Notes <input name="notes" value="${escapeHtml(song.notes || '')}"></label>
<label>Lien YouTube <input name="youtubeUrl" type="url" value="${escapeHtml(song.youtube_url || '')}" placeholder="https://youtube.com/watch?v=..."></label>
<label>Lien Spotify <input name="spotifyUrl" type="url" value="${escapeHtml(song.spotify_url || '')}" placeholder="https://open.spotify.com/track/..."></label>
<div class="song-links">
<button type="submit">Enregistrer</button>
<button type="button" class="secondary cancel-edit" data-id="${song.id}">Annuler</button>
<button type="button" class="danger delete-song" data-id="${song.id}">Supprimer</button>
</div>
</form>
</div>
`;
}
function renderSongs() {
const container = document.getElementById('songs-list');
renderList(container, songs, songCardTemplate, 'Aucun morceau au répertoire pour le moment.');
document.querySelectorAll('.toggle-tutorials').forEach((btn) => {
btn.addEventListener('click', () => onToggleTutorials(parseInt(btn.dataset.id, 10)));
});
document.querySelectorAll('.add-tutorial-form').forEach((form) => {
form.addEventListener('submit', onAddTutorial);
});
document.querySelectorAll('.edit-song').forEach((btn) => {
btn.addEventListener('click', () => {
editing.add(parseInt(btn.dataset.id, 10));
renderSongs();
});
});
document.querySelectorAll('.cancel-edit').forEach((btn) => {
btn.addEventListener('click', () => {
editing.delete(parseInt(btn.dataset.id, 10));
renderSongs();
});
});
document.querySelectorAll('.edit-song-form').forEach((form) => {
form.addEventListener('submit', onSaveSong);
});
document.querySelectorAll('.delete-song').forEach((btn) => {
btn.addEventListener('click', () => onDeleteSong(parseInt(btn.dataset.id, 10)));
});
}
async function onToggleTutorials(songId) {
@ -113,8 +187,10 @@ async function onAddSong(e) {
const title = form.title.value.trim();
const artist = form.artist.value.trim();
const notes = form.notes.value.trim();
const youtubeUrl = form.youtubeUrl.value.trim();
const spotifyUrl = form.spotifyUrl.value.trim();
try {
await api.post('/api/songs', { title, artist, notes });
await api.post('/api/songs', { title, artist, notes, youtubeUrl, spotifyUrl });
form.reset();
await loadSongs();
} catch (err) {
@ -122,6 +198,34 @@ async function onAddSong(e) {
}
}
async function onSaveSong(e) {
e.preventDefault();
const form = e.target;
const id = parseInt(form.dataset.id, 10);
const title = form.title.value.trim();
const artist = form.artist.value.trim();
const notes = form.notes.value.trim();
const youtubeUrl = form.youtubeUrl.value.trim();
const spotifyUrl = form.spotifyUrl.value.trim();
try {
await api.patch(`/api/songs/${id}`, { title, artist, notes, youtubeUrl, spotifyUrl });
editing.delete(id);
await loadSongs();
} catch (err) {
showError(err.message);
}
}
async function onDeleteSong(id) {
try {
await api.del(`/api/songs/${id}`);
editing.delete(id);
await loadSongs();
} catch (err) {
showError(err.message);
}
}
function showError(message) {
document.getElementById('error').innerHTML = `<div class="error-banner">${escapeHtml(message)}</div>`;
}

259
public/js/setlist.js
View file

@ -1,19 +1,15 @@
let me = null;
let allSongs = [];
let setlist = null;
let editRows = [];
let mainRows = [];
let encoreRows = [];
let addSongId = null;
function formatDate(dateStr) {
const d = new Date(dateStr);
return d.toLocaleDateString('fr-FR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
}
function songOptions(selectedId) {
return allSongs
.map((s) => `<option value="${s.id}" ${s.id === selectedId ? 'selected' : ''}>${escapeHtml(s.title)} — ${escapeHtml(s.artist)}</option>`)
.join('');
}
function readOnlyView() {
const main = setlist.songs.filter((s) => !s.is_encore);
const encore = setlist.songs.filter((s) => s.is_encore);
@ -25,55 +21,16 @@ function readOnlyView() {
<div class="setlist-section">
<h3>Setlist</h3>
${main.length
? `<ol class="setlist">${main.map((s) => `<li>${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `<span class="note">${escapeHtml(s.note)}</span>` : ''}</li>`).join('')}</ol>`
? `<ol class="setlist">${main.map((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>`).join('')}</ol>`
: '<p class="empty">Aucun morceau pour le moment.</p>'}
</div>
<div class="setlist-section">
<h3>Rappel</h3>
${encore.length
? `<ol class="setlist">${encore.map((s) => `<li>${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `<span class="note">${escapeHtml(s.note)}</span>` : ''}</li>`).join('')}</ol>`
? `<ol class="setlist">${encore.map((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>`).join('')}</ol>`
: '<p class="empty">Aucun morceau de rappel prévu.</p>'}
</div>
${me.isAdmin ? '<button id="edit-btn" class="secondary">Modifier la setlist</button>' : ''}
`;
}
function editRowTemplate(row, index) {
return `
<div class="card" data-row-index="${index}">
<div class="inline-form">
<label>Morceau
<select data-field="songId">${songOptions(row.songId)}</select>
</label>
<label>Position <input type="number" min="1" value="${row.position}" data-field="position" style="width:4rem"></label>
<label>Note <input value="${escapeHtml(row.note || '')}" data-field="note"></label>
<label><input type="checkbox" ${row.isEncore ? 'checked' : ''} data-field="isEncore"> Rappel</label>
<button type="button" class="danger remove-row" data-index="${index}">Retirer</button>
</div>
</div>
`;
}
function editView() {
return `
<div class="card">
<h3>Détails du concert</h3>
<form id="meta-form" class="inline-form">
<label>Nom <input name="name" value="${escapeHtml(setlist?.name || '')}"></label>
<label>Lieu <input name="venue" value="${escapeHtml(setlist?.venue || '')}"></label>
<label>Date <input type="date" name="concertDate" value="${setlist ? setlist.concert_date.slice(0, 10) : ''}" required></label>
<button type="submit">${setlist ? 'Enregistrer' : 'Créer le concert'}</button>
</form>
</div>
${setlist ? `
<div id="rows-container">
${editRows.map(editRowTemplate).join('')}
</div>
<div class="inline-form">
<button type="button" id="add-row-btn" class="secondary">Ajouter un morceau</button>
<button type="button" id="save-songs-btn">Enregistrer la setlist</button>
<button type="button" id="cancel-edit-btn" class="secondary">Annuler</button>
</div>` : ''}
${me.isAdmin ? '<button id="edit-btn" class="secondary" style="margin-top:1rem">Modifier la setlist</button>' : ''}
`;
}
@ -81,7 +38,7 @@ function renderReadOnly() {
const container = document.getElementById('content');
if (!setlist) {
container.innerHTML = me.isAdmin
? `<p class="empty">Aucun concert à venir.</p>${editView()}`
? `<p class="empty">Aucun concert à venir.</p>${metaFormTemplate()}`
: '<p class="empty">Aucun concert à venir pour le moment.</p>';
if (me.isAdmin) attachMetaFormHandler();
return;
@ -91,14 +48,93 @@ function renderReadOnly() {
if (editBtn) editBtn.addEventListener('click', enterEditMode);
}
function metaFormTemplate() {
return `
<div class="panel">
<h3>${setlist ? 'Détails du concert' : 'Créer le prochain concert'}</h3>
<form id="meta-form" class="inline-form">
<label>Nom <input name="name" value="${escapeHtml(setlist?.name || '')}"></label>
<label>Lieu <input name="venue" value="${escapeHtml(setlist?.venue || '')}"></label>
<label>Date <input type="date" name="concertDate" value="${setlist ? setlist.concert_date.slice(0, 10) : ''}" required></label>
<button type="submit">${setlist ? 'Enregistrer' : 'Créer le concert'}</button>
</form>
</div>
`;
}
function usedSongIds() {
return new Set([...mainRows, ...encoreRows].map((r) => r.songId));
}
function availableSongOptions() {
const used = usedSongIds();
const available = allSongs.filter((s) => !used.has(s.id));
if (!available.length) return '<option value="">(tous les morceaux sont déjà dans la setlist)</option>';
return available.map((s) => `<option value="${s.id}">${escapeHtml(s.title)} — ${escapeHtml(s.artist)}</option>`).join('');
}
function rowTemplate(row, index, section, total) {
return `
<div class="setlist-row" data-section="${section}" data-index="${index}">
<div class="row-index">${index + 1}</div>
<div class="row-main">
<div class="row-title">${escapeHtml(row.title)}</div>
<div class="row-artist">${escapeHtml(row.artist)}</div>
</div>
<input class="row-note-input" data-field="note" placeholder="Note (optionnel)" value="${escapeHtml(row.note || '')}">
<div class="row-actions">
<button type="button" class="secondary icon-btn move-up" ${index === 0 ? 'disabled' : ''} title="Monter">&#8593;</button>
<button type="button" class="secondary icon-btn move-down" ${index === total - 1 ? 'disabled' : ''} title="Descendre">&#8595;</button>
<button type="button" class="secondary icon-btn move-section" title="${section === 'main' ? 'Déplacer en rappel' : 'Déplacer au programme'}">${section === 'main' ? '&#8677; Rappel' : '&#8676; Programme'}</button>
<button type="button" class="danger icon-btn remove-row" title="Retirer">&times;</button>
</div>
</div>
`;
}
function editView() {
return `
${metaFormTemplate()}
${setlist ? `
<div class="panel">
<h3>Ajouter un morceau du répertoire</h3>
<form id="add-song-form" class="inline-form">
<label>Morceau
<select id="add-song-select">${availableSongOptions()}</select>
</label>
<button type="button" id="add-to-main-btn" class="secondary">Ajouter au programme</button>
<button type="button" id="add-to-encore-btn" class="secondary">Ajouter au rappel</button>
</form>
</div>
<div class="setlist-section">
<h3>Programme principal</h3>
<div class="setlist-rows" id="main-rows">
${mainRows.length ? mainRows.map((r, i) => rowTemplate(r, i, 'main', mainRows.length)).join('') : '<p class="empty">Aucun morceau. Ajoutez-en depuis le répertoire ci-dessus.</p>'}
</div>
</div>
<div class="setlist-section">
<h3>Rappel</h3>
<div class="setlist-rows" id="encore-rows">
${encoreRows.length ? encoreRows.map((r, i) => rowTemplate(r, i, 'encore', encoreRows.length)).join('') : '<p class="empty">Aucun morceau de rappel prévu.</p>'}
</div>
</div>
<div class="inline-form" style="margin-top:1.25rem">
<button type="button" id="save-songs-btn">Enregistrer la setlist</button>
<button type="button" id="cancel-edit-btn" class="secondary">Retour</button>
</div>` : ''}
`;
}
function enterEditMode() {
editRows = setlist.songs.map((s) => ({
setlistSongId: s.id,
songId: s.song_id,
position: s.position,
note: s.note,
isEncore: s.is_encore,
}));
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 }));
encoreRows = 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 }));
renderEdit();
}
@ -132,54 +168,81 @@ function attachMetaFormHandler() {
});
}
function rowsForSection(section) {
return section === 'main' ? mainRows : encoreRows;
}
function attachEditHandlers() {
document.querySelectorAll('.remove-row').forEach((btn) => {
btn.addEventListener('click', () => {
editRows.splice(parseInt(btn.dataset.index, 10), 1);
renderEdit();
});
});
document.querySelectorAll('[data-row-index]').forEach((rowEl) => {
const index = parseInt(rowEl.dataset.rowIndex, 10);
rowEl.querySelectorAll('[data-field]').forEach((input) => {
input.addEventListener('change', () => {
const field = input.dataset.field;
if (field === 'isEncore') editRows[index][field] = input.checked;
else if (field === 'position') editRows[index][field] = parseInt(input.value, 10);
else if (field === 'songId') editRows[index][field] = parseInt(input.value, 10);
else editRows[index][field] = input.value;
});
});
});
const addBtn = document.getElementById('add-row-btn');
if (addBtn) {
addBtn.addEventListener('click', () => {
const nextPos = editRows.filter((r) => !r.isEncore).length + 1;
editRows.push({ songId: allSongs[0]?.id, position: nextPos, note: '', isEncore: false });
renderEdit();
});
const addSelect = document.getElementById('add-song-select');
const addToMain = document.getElementById('add-to-main-btn');
const addToEncore = document.getElementById('add-to-encore-btn');
if (addSelect) {
if (!addSelect.value) addSongId = null;
addSelect.addEventListener('change', () => { addSongId = addSelect.value ? parseInt(addSelect.value, 10) : null; });
}
if (addToMain) addToMain.addEventListener('click', () => addSongToSection('main', addSelect));
if (addToEncore) addToEncore.addEventListener('click', () => addSongToSection('encore', addSelect));
document.querySelectorAll('.setlist-row').forEach((rowEl) => {
const section = rowEl.dataset.section;
const index = parseInt(rowEl.dataset.index, 10);
const rows = rowsForSection(section);
rowEl.querySelector('.row-note-input').addEventListener('change', (e) => {
rows[index].note = e.target.value;
});
rowEl.querySelector('.move-up')?.addEventListener('click', () => {
if (index === 0) return;
[rows[index - 1], rows[index]] = [rows[index], rows[index - 1]];
renderEdit();
});
rowEl.querySelector('.move-down')?.addEventListener('click', () => {
if (index === rows.length - 1) return;
[rows[index + 1], rows[index]] = [rows[index], rows[index + 1]];
renderEdit();
});
rowEl.querySelector('.move-section').addEventListener('click', () => {
const [row] = rows.splice(index, 1);
if (section === 'main') encoreRows.push(row);
else mainRows.push(row);
renderEdit();
});
rowEl.querySelector('.remove-row').addEventListener('click', () => {
rows.splice(index, 1);
renderEdit();
});
});
const saveBtn = document.getElementById('save-songs-btn');
if (saveBtn) {
saveBtn.addEventListener('click', async () => {
try {
const payload = editRows.map((r) => ({
songId: r.songId,
position: r.position,
note: r.note,
isEncore: !!r.isEncore,
}));
setlist = await api.put(`/api/setlists/${setlist.id}/songs`, { songs: payload });
renderReadOnly();
} catch (err) {
showError(err.message);
}
});
}
if (saveBtn) saveBtn.addEventListener('click', onSaveSongs);
const cancelBtn = document.getElementById('cancel-edit-btn');
if (cancelBtn) cancelBtn.addEventListener('click', renderReadOnly);
}
function addSongToSection(section, selectEl) {
const songId = selectEl.value ? parseInt(selectEl.value, 10) : null;
if (!songId) return;
const song = allSongs.find((s) => s.id === songId);
if (!song) return;
const row = { setlistSongId: null, songId: song.id, title: song.title, artist: song.artist, note: '' };
if (section === 'main') mainRows.push(row);
else encoreRows.push(row);
renderEdit();
}
async function onSaveSongs() {
try {
const payload = [
...mainRows.map((r, i) => ({ songId: r.songId, position: i + 1, note: r.note, isEncore: false })),
...encoreRows.map((r, i) => ({ songId: r.songId, position: i + 1, note: r.note, isEncore: true })),
];
setlist = await api.put(`/api/setlists/${setlist.id}/songs`, { songs: payload });
renderReadOnly();
} catch (err) {
showError(err.message);
}
}
function showError(message) {
document.getElementById('error').innerHTML = `<div class="error-banner">${escapeHtml(message)}</div>`;
}

45
public/js/suggestions.js
View file

@ -11,23 +11,40 @@ function statusLabel(status) {
return { pending: 'En attente', approved: 'Approuvé', rejected: 'Rejeté' }[status] || status;
}
function suggestionThumbTemplate(s) {
const thumb = youtubeThumbnailUrl(s.youtube_url);
if (thumb) {
return `
<div class="song-thumb">
<img src="${thumb}" alt="${escapeHtml(s.title)}" loading="lazy">
<a class="play-overlay" href="${escapeHtml(s.youtube_url)}" target="_blank" rel="noopener" title="Écouter sur YouTube">&#9658;</a>
</div>
`;
}
return `<div class="song-thumb placeholder">&#9835;</div>`;
}
function suggestionTemplate(s) {
const isOpen = expanded.has(s.id);
const embed = youtubeEmbedUrl(s.youtube_url);
return `
<div class="card" data-suggestion-id="${s.id}">
<div class="card-header">
<div>
<div class="card-title">${escapeHtml(s.title)}${s.artist ? ` — ${escapeHtml(s.artist)}` : ''}</div>
<div class="card-subtitle">Proposé par ${escapeHtml(s.suggested_by_name)} · ${statusLabel(s.status)}</div>
<div class="song-card">
${suggestionThumbTemplate(s)}
<div class="song-body">
<div class="card-header">
<div>
<div class="card-title">${escapeHtml(s.title)}${s.artist ? ` — ${escapeHtml(s.artist)}` : ''}</div>
<div class="card-subtitle">Proposé par ${escapeHtml(s.suggested_by_name)} · ${statusLabel(s.status)}</div>
</div>
</div>
<div class="vote-tally">
<span class="approve">✔ ${s.approve_count}</span>
<span class="reject">✘ ${s.reject_count}</span>
</div>
<button class="secondary icon-btn toggle-detail" data-id="${s.id}">${isOpen ? 'Masquer' : 'Voir / voter'}</button>
</div>
<button class="secondary toggle-detail" data-id="${s.id}">${isOpen ? 'Masquer' : 'Voir / voter'}</button>
</div>
<div class="vote-tally">
<span class="approve">✔ ${s.approve_count}</span>
<span class="reject">✘ ${s.reject_count}</span>
</div>
<div class="detail-panel" style="${isOpen ? '' : 'display:none'}" data-detail-for="${s.id}">
<div class="detail-panel panel" style="${isOpen ? '' : 'display:none'}" data-detail-for="${s.id}">
<p class="empty">Chargement…</p>
</div>
</div>
@ -39,6 +56,7 @@ function detailTemplate(s) {
const myVote = s.votes.find((v) => v.user_id === me.id);
return `
${embed ? `<div class="youtube-embed"><iframe src="${embed}" allowfullscreen></iframe></div>` : `<p><a href="${escapeHtml(s.youtube_url)}" target="_blank" rel="noopener">${escapeHtml(s.youtube_url)}</a></p>`}
${s.description ? `<div class="suggestion-note">${escapeHtml(s.description)}</div>` : ''}
<form class="inline-form vote-form" data-id="${s.id}">
<label>Mon vote
@ -69,7 +87,7 @@ function detailTemplate(s) {
function voteItemTemplate(v) {
const icon = v.vote === 'approve' ? '✔' : '✘';
return `
<div class="vote-item">
<div class="vote-item ${v.vote}">
<span class="voter">${escapeHtml(v.voter_name)}</span> ${icon}
${v.comment ? `— ${escapeHtml(v.comment)}` : ''}
</div>
@ -170,8 +188,9 @@ async function onAddSuggestion(e) {
const title = form.title.value.trim();
const artist = form.artist.value.trim();
const youtubeUrl = form.youtubeUrl.value.trim();
const description = form.description.value.trim();
try {
await api.post('/api/suggestions', { title, artist, youtubeUrl });
await api.post('/api/suggestions', { title, artist, youtubeUrl, description });
form.reset();
await loadSuggestions();
} catch (err) {