mirror of
https://github.com/nfonteyne/octane-website.git
synced 2026-09-03 23:24:48 +02:00
first commit
This commit is contained in:
Nathan FONTEYNE
commit
244cdbedd7
44 changed files with 3386 additions and 0 deletions
24
public/js/api.js
Normal file
24
public/js/api.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
async function apiFetch(path, options = {}) {
|
||||
const res = await fetch(path, {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
...options,
|
||||
});
|
||||
if (res.status === 401) {
|
||||
window.location.href = '/auth/login?returnTo=' + encodeURIComponent(window.location.pathname);
|
||||
return new Promise(() => {});
|
||||
}
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}));
|
||||
throw new Error(body.message || body.error || `Request failed: ${res.status}`);
|
||||
}
|
||||
if (res.status === 204) return null;
|
||||
return res.json();
|
||||
}
|
||||
|
||||
const api = {
|
||||
get: (path) => apiFetch(path),
|
||||
post: (path, data) => apiFetch(path, { method: 'POST', body: JSON.stringify(data) }),
|
||||
patch: (path, data) => apiFetch(path, { method: 'PATCH', body: JSON.stringify(data) }),
|
||||
put: (path, data) => apiFetch(path, { method: 'PUT', body: JSON.stringify(data) }),
|
||||
del: (path) => apiFetch(path, { method: 'DELETE' }),
|
||||
};
|
||||
42
public/js/history-detail.js
Normal file
42
public/js/history-detail.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
function formatDate(dateStr) {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString('fr-FR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('error').innerHTML = `<div class="error-banner">${escapeHtml(message)}</div>`;
|
||||
}
|
||||
|
||||
(async function init() {
|
||||
await initNav('history');
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const id = params.get('id');
|
||||
const container = document.getElementById('content');
|
||||
if (!id) {
|
||||
container.innerHTML = '<p class="empty">Concert introuvable.</p>';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
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);
|
||||
container.innerHTML = `
|
||||
<h1>${escapeHtml(setlist.name || 'Concert')}</h1>
|
||||
<p class="card-subtitle">${escapeHtml(setlist.venue || '')} · ${formatDate(setlist.concert_date)}</p>
|
||||
<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>`
|
||||
: '<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>`
|
||||
: '<p class="empty">Aucun rappel enregistré.</p>'}
|
||||
</div>
|
||||
`;
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
})();
|
||||
29
public/js/history.js
Normal file
29
public/js/history.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
function formatDate(dateStr) {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
}
|
||||
|
||||
function concertTemplate(c) {
|
||||
return `
|
||||
<div class="card">
|
||||
<a href="/history-detail.html?id=${c.id}" style="text-decoration:none;color:inherit">
|
||||
<div class="card-title">${escapeHtml(c.name || 'Concert')}</div>
|
||||
<div class="card-subtitle">${escapeHtml(c.venue || '')} · ${formatDate(c.concert_date)}</div>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('error').innerHTML = `<div class="error-banner">${escapeHtml(message)}</div>`;
|
||||
}
|
||||
|
||||
(async function init() {
|
||||
await initNav('history');
|
||||
try {
|
||||
const history = await api.get('/api/setlists/history');
|
||||
renderList(document.getElementById('history-list'), history, concertTemplate, 'Aucun concert passé enregistré.');
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
})();
|
||||
17
public/js/nav.js
Normal file
17
public/js/nav.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
async function initNav(activePage) {
|
||||
const me = await api.get('/api/users/me');
|
||||
const nav = document.getElementById('main-nav');
|
||||
nav.innerHTML = `
|
||||
<div class="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>
|
||||
<a href="/history.html" class="${activePage === 'history' ? 'active' : ''}">Historique</a>
|
||||
</div>
|
||||
<div class="nav-user">
|
||||
<span>${escapeHtml(me.name)}${me.isAdmin ? ' <span class="badge">admin</span>' : ''}</span>
|
||||
<a href="/auth/logout">Se déconnecter</a>
|
||||
</div>
|
||||
`;
|
||||
return me;
|
||||
}
|
||||
30
public/js/render.js
Normal file
30
public/js/render.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
function renderList(container, items, templateFn, emptyMessage) {
|
||||
if (!items.length) {
|
||||
container.innerHTML = `<p class="empty">${escapeHtml(emptyMessage || 'Rien à afficher pour le moment.')}</p>`;
|
||||
return;
|
||||
}
|
||||
container.innerHTML = items.map(templateFn).join('');
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
return String(str ?? '').replace(/[&<>"']/g, (c) => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": ''',
|
||||
}[c]));
|
||||
}
|
||||
|
||||
function youtubeEmbedUrl(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 videoId ? `https://www.youtube.com/embed/${videoId}` : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
137
public/js/repertoire.js
Normal file
137
public/js/repertoire.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
let me = null;
|
||||
let instruments = [];
|
||||
let songs = [];
|
||||
const expanded = new Set();
|
||||
|
||||
async function loadInstruments() {
|
||||
instruments = await api.get('/api/instruments');
|
||||
}
|
||||
|
||||
async function loadSongs() {
|
||||
songs = await api.get('/api/songs');
|
||||
renderSongs();
|
||||
}
|
||||
|
||||
function instrumentOptions() {
|
||||
return instruments.map((i) => `<option value="${i.id}">${escapeHtml(i.name)}</option>`).join('');
|
||||
}
|
||||
|
||||
function songCardTemplate(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>
|
||||
<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="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}">
|
||||
<label>Instrument
|
||||
<select name="instrumentId" required>${instrumentOptions()}</select>
|
||||
</label>
|
||||
<label>Lien <input name="url" type="url" required placeholder="https://..."></label>
|
||||
<label>Libellé <input name="label" placeholder="ex: tuto solo"></label>
|
||||
<button type="submit">Ajouter le tuto</button>
|
||||
</form>` : ''}
|
||||
</div>
|
||||
</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);
|
||||
});
|
||||
}
|
||||
|
||||
async function onToggleTutorials(songId) {
|
||||
if (expanded.has(songId)) {
|
||||
expanded.delete(songId);
|
||||
} else {
|
||||
expanded.add(songId);
|
||||
}
|
||||
renderSongs();
|
||||
if (expanded.has(songId)) {
|
||||
await loadTutorials(songId);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTutorials(songId) {
|
||||
try {
|
||||
const detail = await api.get(`/api/songs/${songId}`);
|
||||
const container = document.querySelector(`[data-tutorials-for="${songId}"]`);
|
||||
if (!container) return;
|
||||
if (!detail.tutorials.length) {
|
||||
container.innerHTML = '<p class="empty">Aucun lien pour le moment.</p>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = detail.tutorials
|
||||
.map(
|
||||
(t) => `<span class="tag">${escapeHtml(t.instrument_name)}: <a href="${escapeHtml(t.url)}" target="_blank" rel="noopener">${escapeHtml(t.label || t.url)}</a></span>`
|
||||
)
|
||||
.join('');
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function onAddTutorial(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const songId = parseInt(form.dataset.songId, 10);
|
||||
const instrumentId = parseInt(form.instrumentId.value, 10);
|
||||
const url = form.url.value.trim();
|
||||
const label = form.label.value.trim();
|
||||
try {
|
||||
await api.post(`/api/songs/${songId}/tutorials`, { instrumentId, url, label });
|
||||
form.reset();
|
||||
const song = songs.find((s) => s.id === songId);
|
||||
if (song) song.tutorial_count += 1;
|
||||
await loadTutorials(songId);
|
||||
renderSongs();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function onAddSong(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const title = form.title.value.trim();
|
||||
const artist = form.artist.value.trim();
|
||||
const notes = form.notes.value.trim();
|
||||
try {
|
||||
await api.post('/api/songs', { title, artist, notes });
|
||||
form.reset();
|
||||
await loadSongs();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('error').innerHTML = `<div class="error-banner">${escapeHtml(message)}</div>`;
|
||||
}
|
||||
|
||||
(async function init() {
|
||||
me = await initNav('repertoire');
|
||||
await loadInstruments();
|
||||
if (me.isAdmin) {
|
||||
document.getElementById('admin-add-song').style.display = 'block';
|
||||
document.getElementById('add-song-form').addEventListener('submit', onAddSong);
|
||||
}
|
||||
await loadSongs();
|
||||
})();
|
||||
194
public/js/setlist.js
Normal file
194
public/js/setlist.js
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
let me = null;
|
||||
let allSongs = [];
|
||||
let setlist = null;
|
||||
let editRows = [];
|
||||
|
||||
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);
|
||||
return `
|
||||
<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>`
|
||||
: '<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>`
|
||||
: '<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>` : ''}
|
||||
`;
|
||||
}
|
||||
|
||||
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 pour le moment.</p>';
|
||||
if (me.isAdmin) attachMetaFormHandler();
|
||||
return;
|
||||
}
|
||||
container.innerHTML = readOnlyView();
|
||||
const editBtn = document.getElementById('edit-btn');
|
||||
if (editBtn) editBtn.addEventListener('click', enterEditMode);
|
||||
}
|
||||
|
||||
function enterEditMode() {
|
||||
editRows = setlist.songs.map((s) => ({
|
||||
setlistSongId: s.id,
|
||||
songId: s.song_id,
|
||||
position: s.position,
|
||||
note: s.note,
|
||||
isEncore: s.is_encore,
|
||||
}));
|
||||
renderEdit();
|
||||
}
|
||||
|
||||
function renderEdit() {
|
||||
const container = document.getElementById('content');
|
||||
container.innerHTML = editView();
|
||||
attachMetaFormHandler();
|
||||
attachEditHandlers();
|
||||
}
|
||||
|
||||
function attachMetaFormHandler() {
|
||||
const form = document.getElementById('meta-form');
|
||||
if (!form) return;
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const name = form.name.value.trim();
|
||||
const venue = form.venue.value.trim();
|
||||
const concertDate = form.concertDate.value;
|
||||
try {
|
||||
if (setlist) {
|
||||
setlist = await api.patch(`/api/setlists/${setlist.id}`, { name, venue, concertDate });
|
||||
setlist.songs = (await api.get(`/api/setlists/${setlist.id}`)).songs;
|
||||
} else {
|
||||
setlist = await api.post('/api/setlists', { name, venue, concertDate });
|
||||
setlist.songs = [];
|
||||
}
|
||||
enterEditMode();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
const cancelBtn = document.getElementById('cancel-edit-btn');
|
||||
if (cancelBtn) cancelBtn.addEventListener('click', renderReadOnly);
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('error').innerHTML = `<div class="error-banner">${escapeHtml(message)}</div>`;
|
||||
}
|
||||
|
||||
(async function init() {
|
||||
me = await initNav('setlist');
|
||||
if (me.isAdmin) {
|
||||
allSongs = await api.get('/api/songs');
|
||||
}
|
||||
setlist = await api.get('/api/setlists/next');
|
||||
renderReadOnly();
|
||||
})();
|
||||
190
public/js/suggestions.js
Normal file
190
public/js/suggestions.js
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
let me = null;
|
||||
let suggestions = [];
|
||||
const expanded = new Set();
|
||||
|
||||
async function loadSuggestions() {
|
||||
suggestions = await api.get('/api/suggestions');
|
||||
renderSuggestions();
|
||||
}
|
||||
|
||||
function statusLabel(status) {
|
||||
return { pending: 'En attente', approved: 'Approuvé', rejected: 'Rejeté' }[status] || status;
|
||||
}
|
||||
|
||||
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>
|
||||
<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}">
|
||||
<p class="empty">Chargement…</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function detailTemplate(s) {
|
||||
const embed = youtubeEmbedUrl(s.youtube_url);
|
||||
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>`}
|
||||
|
||||
<form class="inline-form vote-form" data-id="${s.id}">
|
||||
<label>Mon vote
|
||||
<select name="vote">
|
||||
<option value="approve" ${myVote?.vote === 'approve' ? 'selected' : ''}>J'approuve</option>
|
||||
<option value="reject" ${myVote?.vote === 'reject' ? 'selected' : ''}>Je rejette</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Commentaire <input name="comment" value="${escapeHtml(myVote?.comment || '')}" placeholder="pourquoi ?"></label>
|
||||
<button type="submit">${myVote ? 'Mettre à jour mon vote' : 'Voter'}</button>
|
||||
</form>
|
||||
|
||||
<div class="vote-list">
|
||||
${s.votes.length ? s.votes.map(voteItemTemplate).join('') : '<p class="empty">Aucun vote pour le moment.</p>'}
|
||||
</div>
|
||||
|
||||
${me.isAdmin ? `
|
||||
<form class="inline-form admin-actions" data-id="${s.id}">
|
||||
<button type="button" class="promote-btn" data-id="${s.id}" ${s.promoted_song_id ? 'disabled' : ''}>
|
||||
${s.promoted_song_id ? 'Déjà au répertoire' : 'Promouvoir au répertoire'}
|
||||
</button>
|
||||
<button type="button" class="secondary reject-btn" data-id="${s.id}">Marquer rejeté</button>
|
||||
<button type="button" class="danger delete-btn" data-id="${s.id}">Supprimer</button>
|
||||
</form>` : ''}
|
||||
`;
|
||||
}
|
||||
|
||||
function voteItemTemplate(v) {
|
||||
const icon = v.vote === 'approve' ? '✔' : '✘';
|
||||
return `
|
||||
<div class="vote-item">
|
||||
<span class="voter">${escapeHtml(v.voter_name)}</span> ${icon}
|
||||
${v.comment ? `— ${escapeHtml(v.comment)}` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderSuggestions() {
|
||||
const container = document.getElementById('suggestions-list');
|
||||
renderList(container, suggestions, suggestionTemplate, 'Aucune suggestion pour le moment.');
|
||||
document.querySelectorAll('.toggle-detail').forEach((btn) => {
|
||||
btn.addEventListener('click', () => onToggleDetail(parseInt(btn.dataset.id, 10)));
|
||||
});
|
||||
}
|
||||
|
||||
async function onToggleDetail(id) {
|
||||
if (expanded.has(id)) {
|
||||
expanded.delete(id);
|
||||
} else {
|
||||
expanded.add(id);
|
||||
}
|
||||
renderSuggestions();
|
||||
if (expanded.has(id)) {
|
||||
await loadDetail(id);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDetail(id) {
|
||||
try {
|
||||
const detail = await api.get(`/api/suggestions/${id}`);
|
||||
const container = document.querySelector(`[data-detail-for="${id}"]`);
|
||||
if (!container) return;
|
||||
container.innerHTML = detailTemplate(detail);
|
||||
container.querySelector('.vote-form').addEventListener('submit', (e) => onVote(e, id));
|
||||
const promoteBtn = container.querySelector('.promote-btn');
|
||||
if (promoteBtn) promoteBtn.addEventListener('click', () => onPromote(id));
|
||||
const rejectBtn = container.querySelector('.reject-btn');
|
||||
if (rejectBtn) rejectBtn.addEventListener('click', () => onReject(id));
|
||||
const deleteBtn = container.querySelector('.delete-btn');
|
||||
if (deleteBtn) deleteBtn.addEventListener('click', () => onDelete(id));
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function onVote(e, id) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const vote = form.vote.value;
|
||||
const comment = form.comment.value.trim();
|
||||
try {
|
||||
await api.post(`/api/suggestions/${id}/vote`, { vote, comment });
|
||||
await loadSuggestions();
|
||||
expanded.add(id);
|
||||
renderSuggestions();
|
||||
await loadDetail(id);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function onPromote(id) {
|
||||
try {
|
||||
await api.post(`/api/suggestions/${id}/promote`, {});
|
||||
await loadSuggestions();
|
||||
expanded.add(id);
|
||||
renderSuggestions();
|
||||
await loadDetail(id);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function onReject(id) {
|
||||
try {
|
||||
await api.patch(`/api/suggestions/${id}`, { status: 'rejected' });
|
||||
await loadSuggestions();
|
||||
expanded.add(id);
|
||||
renderSuggestions();
|
||||
await loadDetail(id);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function onDelete(id) {
|
||||
try {
|
||||
await api.del(`/api/suggestions/${id}`);
|
||||
expanded.delete(id);
|
||||
await loadSuggestions();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function onAddSuggestion(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const title = form.title.value.trim();
|
||||
const artist = form.artist.value.trim();
|
||||
const youtubeUrl = form.youtubeUrl.value.trim();
|
||||
try {
|
||||
await api.post('/api/suggestions', { title, artist, youtubeUrl });
|
||||
form.reset();
|
||||
await loadSuggestions();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('error').innerHTML = `<div class="error-banner">${escapeHtml(message)}</div>`;
|
||||
}
|
||||
|
||||
(async function init() {
|
||||
me = await initNav('suggestions');
|
||||
document.getElementById('add-suggestion-form').addEventListener('submit', onAddSuggestion);
|
||||
await loadSuggestions();
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue