From e97aa2c6c39fa61f5575cf637df285a0b11a167e Mon Sep 17 00:00:00 2001 From: Nathan FONTEYNE Date: Wed, 8 Jul 2026 11:50:12 +0200 Subject: [PATCH] update: visual update, phone responsive, db migration --- public/css/style.css | 529 +++++++++++++++--- public/history.html | 3 +- public/index.html | 13 +- public/js/history-detail.js | 12 +- public/js/nav.js | 10 +- public/js/render.js | 27 +- public/js/repertoire.js | 124 +++- public/js/setlist.js | 259 +++++---- public/js/suggestions.js | 45 +- public/suggestions.html | 20 +- .../003_song_links_and_suggestion_note.sql | 3 + src/lib/spotify.js | 10 + src/repositories/songsRepo.js | 23 +- src/repositories/suggestionsRepo.js | 24 +- src/routes/songs.js | 33 +- src/routes/suggestions.js | 3 +- 16 files changed, 894 insertions(+), 244 deletions(-) create mode 100644 src/db/migrations/003_song_links_and_suggestion_note.sql create mode 100644 src/lib/spotify.js diff --git a/public/css/style.css b/public/css/style.css index d0a7f50..2e0bbcd 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,172 +1,421 @@ :root { - --bg: #f7f7f9; + --bg: #f4f3fb; --surface: #ffffff; - --text: #1c1c1e; - --muted: #6b6b70; - --border: #e2e2e6; - --accent: #3457d5; + --surface-alt: #f7f6fd; + --text: #201f2b; + --muted: #6b6878; + --border: #e4e1f0; + --accent: #6c4cf0; + --accent-2: #ff5f8f; --accent-contrast: #ffffff; - --danger: #c0392b; - --success: #1e8e3e; - font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + --danger: #d1453d; + --danger-bg: #fdecea; + --success: #1e8e5a; + --success-bg: #e8f7ef; + --radius: 14px; + --radius-sm: 8px; + --shadow: 0 1px 2px rgba(32, 31, 43, 0.04), 0 4px 16px rgba(32, 31, 43, 0.06); + font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root { - --bg: #121214; - --surface: #1c1c1f; - --text: #ececef; - --muted: #9a9aa2; - --border: #2e2e33; - --accent: #7189e8; - --accent-contrast: #0d0d0f; + --bg: #15131f; + --surface: #1e1c2b; + --surface-alt: #262436; + --text: #ece9f7; + --muted: #a29fb5; + --border: #322f42; + --accent: #9884f5; + --accent-2: #ff85ac; + --accent-contrast: #15131f; + --danger: #ef6b64; + --danger-bg: #3a201f; + --success: #4fd190; + --success-bg: #163828; + --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35); } } +:root[data-theme="dark"] { + --bg: #15131f; + --surface: #1e1c2b; + --surface-alt: #262436; + --text: #ece9f7; + --muted: #a29fb5; + --border: #322f42; + --accent: #9884f5; + --accent-2: #ff85ac; + --accent-contrast: #15131f; + --danger: #ef6b64; + --danger-bg: #3a201f; + --success: #4fd190; + --success-bg: #163828; +} + +:root[data-theme="light"] { + --bg: #f4f3fb; + --surface: #ffffff; + --surface-alt: #f7f6fd; + --text: #201f2b; + --muted: #6b6878; + --border: #e4e1f0; + --accent: #6c4cf0; + --accent-2: #ff5f8f; + --accent-contrast: #ffffff; + --danger: #d1453d; + --danger-bg: #fdecea; + --success: #1e8e5a; + --success-bg: #e8f7ef; +} + * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); + -webkit-font-smoothing: antialiased; } +/* ---------- Header / nav ---------- */ + header.app-header { + position: sticky; + top: 0; + z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); - padding: 0.75rem 1.5rem; + padding: 0 1.25rem; } nav#main-nav { + max-width: 1100px; + margin: 0 auto; display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; + gap: 1rem; + min-height: 60px; + flex-wrap: wrap; +} + +.brand { + font-weight: 700; + font-size: 1.1rem; + letter-spacing: 0.01em; + color: var(--text); + display: flex; + align-items: center; + gap: 0.4rem; + margin-right: auto; +} + +.brand .brand-dot { + color: var(--accent); +} + +.nav-toggle { + display: none; + background: transparent; + border: 1px solid var(--border); + color: var(--text); + border-radius: var(--radius-sm); + padding: 0.4rem 0.6rem; + font-size: 1.1rem; + line-height: 1; +} + +.nav-links { + display: flex; + align-items: center; + gap: 1.4rem; flex-wrap: wrap; - gap: 0.5rem; } .nav-links a { - margin-right: 1rem; color: var(--muted); text-decoration: none; font-weight: 500; + font-size: 0.95rem; + padding: 0.3rem 0; + border-bottom: 2px solid transparent; } -.nav-links a.active, .nav-links a:hover { +.nav-links a.active { + color: var(--accent); + border-bottom-color: var(--accent); +} + +.nav-links a:hover { color: var(--accent); } .nav-user { display: flex; align-items: center; - gap: 1rem; + gap: 0.9rem; color: var(--muted); - font-size: 0.9rem; + font-size: 0.88rem; + margin-left: auto; } .nav-user a { color: var(--accent); text-decoration: none; + font-weight: 500; } .badge { - background: var(--accent); - color: var(--accent-contrast); + background: linear-gradient(135deg, var(--accent), var(--accent-2)); + color: #fff; border-radius: 999px; - padding: 0.1rem 0.5rem; - font-size: 0.75rem; + padding: 0.1rem 0.55rem; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.03em; } +/* ---------- Layout ---------- */ + main { - max-width: 900px; + max-width: 1100px; margin: 0 auto; - padding: 1.5rem; + padding: 1.75rem 1.25rem 4rem; } -h1 { font-size: 1.5rem; } -h2 { font-size: 1.15rem; margin-top: 2rem; } +h1 { + font-size: 1.65rem; + margin: 0 0 0.25rem; + letter-spacing: -0.01em; +} + +h2 { + font-size: 1.15rem; + margin: 2.25rem 0 0.75rem; +} + +h3 { font-size: 1rem; margin: 0 0 0.5rem; } + +.page-subtitle { + color: var(--muted); + margin: 0 0 1.5rem; +} + +/* ---------- Cards / grids ---------- */ + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 0.9rem; +} .card { background: var(--surface); border: 1px solid var(--border); - border-radius: 10px; - padding: 1rem 1.25rem; + border-radius: var(--radius); + padding: 1rem 1.15rem; margin-bottom: 0.75rem; + box-shadow: var(--shadow); } +.card-grid .card { margin-bottom: 0; } + .card-header { display: flex; justify-content: space-between; - align-items: baseline; - gap: 1rem; + align-items: flex-start; + gap: 0.75rem; } -.card-title { font-weight: 600; } -.card-subtitle { color: var(--muted); font-size: 0.9rem; } +.card-title { font-weight: 600; font-size: 1.02rem; } +.card-subtitle { color: var(--muted); font-size: 0.88rem; margin-top: 0.1rem; } -.tag-list { +/* ---------- Song card (repertoire) ---------- */ + +.song-card { + display: flex; + gap: 0.9rem; + align-items: flex-start; +} + +.song-thumb { + flex: 0 0 auto; + width: 96px; + height: 72px; + border-radius: var(--radius-sm); + overflow: hidden; + background: var(--surface-alt); + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.song-thumb img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.song-thumb.placeholder { + color: var(--muted); + font-size: 1.5rem; +} + +.song-thumb a.play-overlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.15); + color: #fff; + font-size: 1.4rem; + text-decoration: none; + opacity: 0; + transition: opacity 0.15s ease; +} + +.song-thumb:hover a.play-overlay { opacity: 1; } + +.song-body { + flex: 1 1 auto; + min-width: 0; +} + +.song-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } -.tag { - background: var(--bg); +.pill-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + font-size: 0.78rem; + font-weight: 600; + text-decoration: none; + padding: 0.25rem 0.65rem; + border-radius: 999px; border: 1px solid var(--border); - border-radius: 6px; - padding: 0.15rem 0.5rem; - font-size: 0.8rem; + color: var(--text); + background: var(--surface-alt); } -.tag a { color: var(--accent); text-decoration: none; } +.pill-link.youtube { color: #d1272b; border-color: #f3c8c9; } +.pill-link.spotify { color: #1db954; border-color: #bdeccb; } + +@media (prefers-color-scheme: dark) { + .pill-link.youtube { border-color: #5a2b2b; } + .pill-link.spotify { border-color: #205934; } +} + +/* ---------- Tags (tutorials / instruments) ---------- */ + +.tag-list { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-top: 0.6rem; +} + +.tag { + background: var(--surface-alt); + border: 1px solid var(--border); + border-radius: 999px; + padding: 0.2rem 0.65rem; + font-size: 0.78rem; +} + +.tag a { color: var(--accent); text-decoration: none; font-weight: 500; } .empty { color: var(--muted); font-style: italic; + font-size: 0.92rem; } +/* ---------- Forms ---------- */ + form.inline-form { display: flex; flex-wrap: wrap; - gap: 0.5rem; - margin-top: 0.75rem; + gap: 0.7rem; + margin-top: 0.85rem; align-items: flex-end; } form.inline-form label { + display: flex; + flex-direction: column; + font-size: 0.78rem; + color: var(--muted); + gap: 0.3rem; + flex: 1 1 160px; +} + +form.stacked-form { + display: flex; + flex-direction: column; + gap: 0.7rem; + max-width: 480px; +} + +form.stacked-form label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted); - gap: 0.25rem; + gap: 0.3rem; } input, select, textarea { font: inherit; - padding: 0.4rem 0.5rem; + padding: 0.5rem 0.65rem; border: 1px solid var(--border); - border-radius: 6px; + border-radius: var(--radius-sm); background: var(--surface); color: var(--text); + width: 100%; +} + +textarea { resize: vertical; min-height: 4.5em; } + +input:focus, select:focus, textarea:focus { + outline: 2px solid var(--accent); + outline-offset: 1px; } button { font: inherit; - padding: 0.45rem 0.9rem; + font-weight: 600; + padding: 0.5rem 1rem; border: none; - border-radius: 6px; + border-radius: 999px; background: var(--accent); color: var(--accent-contrast); cursor: pointer; + white-space: nowrap; } +button:hover { filter: brightness(1.07); } + button.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); } +button.icon-btn { + padding: 0.35rem 0.55rem; + font-size: 0.85rem; +} + button.danger { background: var(--danger); color: #fff; @@ -177,78 +426,222 @@ button:disabled { cursor: not-allowed; } +.panel { + background: var(--surface-alt); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1rem 1.15rem; + margin-top: 0.75rem; +} + +/* ---------- Suggestions / voting ---------- */ + .vote-tally { display: flex; gap: 1rem; - font-size: 0.9rem; + font-size: 0.88rem; margin-top: 0.5rem; + font-weight: 600; } .vote-tally .approve { color: var(--success); } .vote-tally .reject { color: var(--danger); } .vote-list { - margin-top: 0.5rem; + margin-top: 0.75rem; border-top: 1px solid var(--border); - padding-top: 0.5rem; + padding-top: 0.6rem; + display: flex; + flex-direction: column; + gap: 0.5rem; } .vote-item { font-size: 0.85rem; - margin-bottom: 0.35rem; + background: var(--surface-alt); + border-radius: var(--radius-sm); + padding: 0.45rem 0.65rem; } .vote-item .voter { font-weight: 600; } +.vote-item.approve { border-left: 3px solid var(--success); } +.vote-item.reject { border-left: 3px solid var(--danger); } + +.suggestion-note { + margin-top: 0.5rem; + font-size: 0.9rem; + background: var(--surface-alt); + border-radius: var(--radius-sm); + padding: 0.5rem 0.7rem; +} .youtube-embed { margin-top: 0.75rem; aspect-ratio: 16 / 9; width: 100%; max-width: 480px; + border-radius: var(--radius-sm); + overflow: hidden; + background: var(--surface-alt); } .youtube-embed iframe { width: 100%; height: 100%; border: 0; - border-radius: 8px; } -.setlist-section h3 { - margin-bottom: 0.4rem; +/* ---------- Setlist ---------- */ + +.setlist-columns { + display: grid; + grid-template-columns: 1fr 1.4fr; + gap: 1.25rem; + align-items: start; +} + +.setlist-section { margin-top: 1.5rem; } +.setlist-section h3 { margin-bottom: 0.5rem; } + +.setlist-rows { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.setlist-row { + display: flex; + align-items: center; + gap: 0.6rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + padding: 0.55rem 0.75rem; +} + +.setlist-row .row-index { + font-weight: 700; + color: var(--muted); + width: 1.5rem; + text-align: center; + flex: 0 0 auto; +} + +.setlist-row .row-main { + flex: 1 1 auto; + min-width: 0; +} + +.setlist-row .row-title { font-weight: 600; } +.setlist-row .row-artist { color: var(--muted); font-size: 0.85rem; } + +.setlist-row .row-note-input { + flex: 1 1 160px; +} + +.setlist-row .row-actions { + display: flex; + gap: 0.25rem; + flex: 0 0 auto; } ol.setlist { - padding-left: 1.25rem; + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.5rem; } ol.setlist li { - margin-bottom: 0.5rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + padding: 0.6rem 0.8rem; } .note { color: var(--muted); font-size: 0.85rem; display: block; + margin-top: 0.15rem; } +/* ---------- Misc ---------- */ + .error-banner { - background: #fdecea; + background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); - border-radius: 8px; + border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; - margin-bottom: 1rem; -} - -@media (prefers-color-scheme: dark) { - .error-banner { - background: #3a1f1c; - } + margin-bottom: 1.25rem; + font-size: 0.9rem; } a.back-link { color: var(--muted); text-decoration: none; font-size: 0.9rem; + display: inline-block; + margin-bottom: 1rem; +} + +a.back-link:hover { color: var(--accent); } + +/* ---------- Responsive / mobile ---------- */ + +@media (max-width: 720px) { + .setlist-columns { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + nav#main-nav { min-height: 56px; } + + .nav-toggle { display: inline-flex; } + + .nav-links { + order: 3; + flex-basis: 100%; + flex-direction: column; + align-items: flex-start; + gap: 0.1rem; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease; + } + + .nav-links.open { + max-height: 260px; + padding: 0.4rem 0 0.8rem; + } + + .nav-links a { + width: 100%; + padding: 0.5rem 0; + border-bottom: 1px solid var(--border); + } + + .nav-user { + margin-left: 0; + } + + main { padding: 1.25rem 0.9rem 3rem; } + + .card-grid { grid-template-columns: 1fr; } + + .song-card { flex-wrap: wrap; } + .song-thumb { width: 100%; height: 160px; } + + form.inline-form { flex-direction: column; align-items: stretch; } + form.inline-form label { flex: 1 1 auto; } + + .setlist-row { + flex-wrap: wrap; + } + .setlist-row .row-note-input { flex-basis: 100%; order: 4; } + .setlist-row .row-actions { flex-basis: 100%; order: 5; justify-content: flex-end; } } diff --git a/public/history.html b/public/history.html index fbecc9f..7c7e195 100644 --- a/public/history.html +++ b/public/history.html @@ -12,8 +12,9 @@

Historique des concerts

+

Retrouvez la setlist jouée à chaque concert précédent.

-
+
diff --git a/public/index.html b/public/index.html index cbeb3c1..5d07b4c 100644 --- a/public/index.html +++ b/public/index.html @@ -12,20 +12,23 @@

Répertoire

+

Les morceaux travaillés par le groupe, avec liens d'écoute et tutos par instrument.

-
diff --git a/public/js/history-detail.js b/public/js/history-detail.js index 50eb5f4..fe13187 100644 --- a/public/js/history-detail.js +++ b/public/js/history-detail.js @@ -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) => `
  • ${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `${escapeHtml(s.note)}` : ''}
    • `; + container.innerHTML = ` -

    ${escapeHtml(setlist.name || 'Concert')}

    -

    ${escapeHtml(setlist.venue || '')} · ${formatDate(setlist.concert_date)}

    +
    +
    ${escapeHtml(setlist.name || 'Concert')}
    +
    ${escapeHtml(setlist.venue || '')} · ${formatDate(setlist.concert_date)}
    +

    Setlist

    ${main.length - ? `
      ${main.map((s) => `
    1. ${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `${escapeHtml(s.note)}` : ''}
      2. `).join('')}
    ` + ? `
      ${main.map(rowHtml).join('')}
    ` : '

    Aucun morceau enregistré.

    '}

    Rappel

    ${encore.length - ? `
      ${encore.map((s) => `
    1. ${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `${escapeHtml(s.note)}` : ''}
      2. `).join('')}
    ` + ? `
      ${encore.map(rowHtml).join('')}
    ` : '

    Aucun rappel enregistré.

    '}
    `; diff --git a/public/js/nav.js b/public/js/nav.js index 82bcf97..d96dd45 100644 --- a/public/js/nav.js +++ b/public/js/nav.js @@ -2,7 +2,9 @@ async function initNav(activePage) { const me = await api.get('/api/users/me'); const nav = document.getElementById('main-nav'); nav.innerHTML = ` -
    + ♫ Octane + + `; + + 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; } diff --git a/public/js/render.js b/public/js/render.js index 9bac909..3f72145 100644 --- a/public/js/render.js +++ b/public/js/render.js @@ -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; +} diff --git a/public/js/repertoire.js b/public/js/repertoire.js index e7567a2..779b82f 100644 --- a/public/js/repertoire.js +++ b/public/js/repertoire.js @@ -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) => ``).join(''); } +function songThumbTemplate(song) { + const thumb = song.youtube_url ? youtubeThumbnailUrl(song.youtube_url) : null; + if (thumb) { + return ` +
    + ${escapeHtml(song.title)} + ► +
    + `; + } + return `
    ♫
    `; +} + +function songLinksTemplate(song) { + const links = []; + if (song.youtube_url) { + links.push(`► YouTube`); + } + if (song.spotify_url) { + links.push(`♫ Spotify`); + } + return links.length ? `
    ${links.join('')}
    ` : ''; +} + function songCardTemplate(song) { + if (editing.has(song.id)) return editSongCardTemplate(song); + const isOpen = expanded.has(song.id); return `
    -
    -
    -
    ${escapeHtml(song.title)}
    -
    ${escapeHtml(song.artist)}
    +
    + ${songThumbTemplate(song)} +
    +
    +
    +
    ${escapeHtml(song.title)}
    +
    ${escapeHtml(song.artist)}
    +
    +
    + ${song.notes ? `

    ${escapeHtml(song.notes)}

    ` : ''} + ${songLinksTemplate(song)} +
    + + ${me && me.isAdmin ? `` : ''} +
    -
    - ${song.notes ? `

    ${escapeHtml(song.notes)}

    ` : ''} -
    +

    Chargement…

    ${me && me.isAdmin ? `
    @@ -46,15 +82,53 @@ function songCardTemplate(song) { `; } +function editSongCardTemplate(song) { + return ` +
    + + + + + + +
    + + + +
    + +
    + `; +} + 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 = `
    ${escapeHtml(message)}
    `; } diff --git a/public/js/setlist.js b/public/js/setlist.js index 23799c0..7f86e2c 100644 --- a/public/js/setlist.js +++ b/public/js/setlist.js @@ -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) => ``) - .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() {

    Setlist

    ${main.length - ? `
      ${main.map((s) => `
    1. ${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `${escapeHtml(s.note)}` : ''}
      2. `).join('')}
    ` + ? `
      ${main.map((s) => `
    1. ${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `${escapeHtml(s.note)}` : ''}
      2. `).join('')}
    ` : '

    Aucun morceau pour le moment.

    '}

    Rappel

    ${encore.length - ? `
      ${encore.map((s) => `
    1. ${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `${escapeHtml(s.note)}` : ''}
      2. `).join('')}
    ` + ? `
      ${encore.map((s) => `
    1. ${escapeHtml(s.title)} — ${escapeHtml(s.artist)}${s.note ? `${escapeHtml(s.note)}` : ''}
      2. `).join('')}
    ` : '

    Aucun morceau de rappel prévu.

    '}
    - ${me.isAdmin ? '' : ''} - `; -} - -function editRowTemplate(row, index) { - return ` -
    -
    - - - - - -
    -
    - `; -} - -function editView() { - return ` -
    -

    Détails du concert

    -
    - - - - -
    -
    - ${setlist ? ` -
    - ${editRows.map(editRowTemplate).join('')} -
    -
    - - - -
    ` : ''} + ${me.isAdmin ? '' : ''} `; } @@ -81,7 +38,7 @@ function renderReadOnly() { const container = document.getElementById('content'); if (!setlist) { container.innerHTML = me.isAdmin - ? `

    Aucun concert à venir.

    ${editView()}` + ? `

    Aucun concert à venir.

    ${metaFormTemplate()}` : '

    Aucun concert à venir pour le moment.

    '; if (me.isAdmin) attachMetaFormHandler(); return; @@ -91,14 +48,93 @@ function renderReadOnly() { if (editBtn) editBtn.addEventListener('click', enterEditMode); } +function metaFormTemplate() { + return ` +
    +

    ${setlist ? 'Détails du concert' : 'Créer le prochain concert'}

    +
    + + + + +
    +
    + `; +} + +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 ''; + return available.map((s) => ``).join(''); +} + +function rowTemplate(row, index, section, total) { + return ` +
    +
    ${index + 1}
    +
    +
    ${escapeHtml(row.title)}
    +
    ${escapeHtml(row.artist)}
    +
    + +
    + + + + +
    +
    + `; +} + +function editView() { + return ` + ${metaFormTemplate()} + ${setlist ? ` +
    +

    Ajouter un morceau du répertoire

    +
    + + + +
    +
    + +
    +

    Programme principal

    +
    + ${mainRows.length ? mainRows.map((r, i) => rowTemplate(r, i, 'main', mainRows.length)).join('') : '

    Aucun morceau. Ajoutez-en depuis le répertoire ci-dessus.

    '} +
    +
    + +
    +

    Rappel

    +
    + ${encoreRows.length ? encoreRows.map((r, i) => rowTemplate(r, i, 'encore', encoreRows.length)).join('') : '

    Aucun morceau de rappel prévu.

    '} +
    +
    + +
    + + +
    ` : ''} + `; +} + 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 = `
    ${escapeHtml(message)}
    `; } diff --git a/public/js/suggestions.js b/public/js/suggestions.js index 68481da..2930855 100644 --- a/public/js/suggestions.js +++ b/public/js/suggestions.js @@ -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 ` +
    + ${escapeHtml(s.title)} + ► +
    + `; + } + return `
    ♫
    `; +} + function suggestionTemplate(s) { const isOpen = expanded.has(s.id); - const embed = youtubeEmbedUrl(s.youtube_url); return `
    -
    -
    -
    ${escapeHtml(s.title)}${s.artist ? ` — ${escapeHtml(s.artist)}` : ''}
    -
    Proposé par ${escapeHtml(s.suggested_by_name)} · ${statusLabel(s.status)}
    +
    + ${suggestionThumbTemplate(s)} +
    +
    +
    +
    ${escapeHtml(s.title)}${s.artist ? ` — ${escapeHtml(s.artist)}` : ''}
    +
    Proposé par ${escapeHtml(s.suggested_by_name)} · ${statusLabel(s.status)}
    +
    +
    +
    + ✔ ${s.approve_count} + ✘ ${s.reject_count} +
    +
    -
    -
    - ✔ ${s.approve_count} - ✘ ${s.reject_count} -
    -
    +

    Chargement…

    @@ -39,6 +56,7 @@ function detailTemplate(s) { const myVote = s.votes.find((v) => v.user_id === me.id); return ` ${embed ? `
    ` : `

    ${escapeHtml(s.youtube_url)}

    `} + ${s.description ? `
    ${escapeHtml(s.description)}
    ` : ''}