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
254
public/css/style.css
Normal file
254
public/css/style.css
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
:root {
|
||||
--bg: #f7f7f9;
|
||||
--surface: #ffffff;
|
||||
--text: #1c1c1e;
|
||||
--muted: #6b6b70;
|
||||
--border: #e2e2e6;
|
||||
--accent: #3457d5;
|
||||
--accent-contrast: #ffffff;
|
||||
--danger: #c0392b;
|
||||
--success: #1e8e3e;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #121214;
|
||||
--surface: #1c1c1f;
|
||||
--text: #ececef;
|
||||
--muted: #9a9aa2;
|
||||
--border: #2e2e33;
|
||||
--accent: #7189e8;
|
||||
--accent-contrast: #0d0d0f;
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
header.app-header {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
nav#main-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
margin-right: 1rem;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-links a.active, .nav-links a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.nav-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-user a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
border-radius: 999px;
|
||||
padding: 0.1rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
h1 { font-size: 1.5rem; }
|
||||
h2 { font-size: 1.15rem; margin-top: 2rem; }
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card-title { font-weight: 600; }
|
||||
.card-subtitle { color: var(--muted); font-size: 0.9rem; }
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.tag a { color: var(--accent); text-decoration: none; }
|
||||
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
form.inline-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
form.inline-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
font: inherit;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.vote-tally {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.vote-tally .approve { color: var(--success); }
|
||||
.vote-tally .reject { color: var(--danger); }
|
||||
|
||||
.vote-list {
|
||||
margin-top: 0.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.vote-item {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.vote-item .voter { font-weight: 600; }
|
||||
|
||||
.youtube-embed {
|
||||
margin-top: 0.75rem;
|
||||
aspect-ratio: 16 / 9;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.youtube-embed iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.setlist-section h3 {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
ol.setlist {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
ol.setlist li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.note {
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
background: #fdecea;
|
||||
color: var(--danger);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.error-banner {
|
||||
background: #3a1f1c;
|
||||
}
|
||||
}
|
||||
|
||||
a.back-link {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
24
public/history-detail.html
Normal file
24
public/history-detail.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Détail du concert — Octane</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<nav id="main-nav"></nav>
|
||||
</header>
|
||||
<main>
|
||||
<a href="/history.html" class="back-link">← Retour à l'historique</a>
|
||||
<div id="error"></div>
|
||||
<div id="content">Chargement…</div>
|
||||
</main>
|
||||
|
||||
<script src="/js/api.js"></script>
|
||||
<script src="/js/render.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script src="/js/history-detail.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
24
public/history.html
Normal file
24
public/history.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Historique des concerts — Octane</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<nav id="main-nav"></nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Historique des concerts</h1>
|
||||
<div id="error"></div>
|
||||
<div id="history-list"></div>
|
||||
</main>
|
||||
|
||||
<script src="/js/api.js"></script>
|
||||
<script src="/js/render.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script src="/js/history.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
36
public/index.html
Normal file
36
public/index.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Répertoire — Octane</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<nav id="main-nav"></nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Répertoire</h1>
|
||||
<div id="error"></div>
|
||||
|
||||
<div id="admin-add-song" style="display:none">
|
||||
<h2>Ajouter un morceau</h2>
|
||||
<form id="add-song-form" class="inline-form">
|
||||
<label>Titre <input name="title" required></label>
|
||||
<label>Artiste <input name="artist" required></label>
|
||||
<label>Notes <input name="notes"></label>
|
||||
<button type="submit">Ajouter</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>Morceaux travaillés</h2>
|
||||
<div id="songs-list"></div>
|
||||
</main>
|
||||
|
||||
<script src="/js/api.js"></script>
|
||||
<script src="/js/render.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script src="/js/repertoire.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
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();
|
||||
})();
|
||||
24
public/setlist.html
Normal file
24
public/setlist.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Prochain concert — Octane</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<nav id="main-nav"></nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Prochain concert</h1>
|
||||
<div id="error"></div>
|
||||
<div id="content">Chargement…</div>
|
||||
</main>
|
||||
|
||||
<script src="/js/api.js"></script>
|
||||
<script src="/js/render.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script src="/js/setlist.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
public/suggestions.html
Normal file
34
public/suggestions.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Suggestions — Octane</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<nav id="main-nav"></nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Suggestions de morceaux</h1>
|
||||
<div id="error"></div>
|
||||
|
||||
<h2>Proposer un morceau</h2>
|
||||
<form id="add-suggestion-form" class="inline-form">
|
||||
<label>Titre <input name="title" required></label>
|
||||
<label>Artiste <input name="artist"></label>
|
||||
<label>Lien YouTube <input name="youtubeUrl" type="url" required placeholder="https://youtube.com/watch?v=..."></label>
|
||||
<button type="submit">Proposer</button>
|
||||
</form>
|
||||
|
||||
<h2>Toutes les suggestions</h2>
|
||||
<div id="suggestions-list"></div>
|
||||
</main>
|
||||
|
||||
<script src="/js/api.js"></script>
|
||||
<script src="/js/render.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script src="/js/suggestions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue