mirror of
https://github.com/nfonteyne/octane-website.git
synced 2026-09-03 23:24:48 +02:00
update: approve or disaprove suggrestions by sweeping
This commit is contained in:
Nathan FONTEYNE
parent
061df3b1c6
commit
e368a8681b
5 changed files with 566 additions and 54 deletions
|
|
@ -5,12 +5,17 @@ const expanded = new Set();
|
|||
async function loadSuggestions() {
|
||||
suggestions = await api.get('/api/suggestions');
|
||||
renderSuggestions();
|
||||
refreshSwipeView();
|
||||
}
|
||||
|
||||
function statusLabel(status) {
|
||||
return { pending: 'En attente', approved: 'Approuvé', rejected: 'Rejeté' }[status] || status;
|
||||
}
|
||||
|
||||
function findSuggestion(id) {
|
||||
return suggestions.find((s) => s.id === id);
|
||||
}
|
||||
|
||||
function suggestionThumbTemplate(s) {
|
||||
const thumb = youtubeThumbnailUrl(s.youtube_url);
|
||||
if (thumb) {
|
||||
|
|
@ -51,14 +56,22 @@ function suggestionTemplate(s) {
|
|||
`;
|
||||
}
|
||||
|
||||
function detailTemplate(s) {
|
||||
// Rendered once when a detail panel opens — never re-rendered afterward, so the
|
||||
// iframe embed isn't destroyed/reloaded just because some vote count changed.
|
||||
function mediaTemplate(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>`}
|
||||
${s.spotify_url ? `<div class="song-links"><a class="pill-link spotify" href="${escapeHtml(s.spotify_url)}" target="_blank" rel="noopener">♫ Spotify</a></div>` : ''}
|
||||
${s.description ? `<div class="suggestion-note">${escapeHtml(s.description)}</div>` : ''}
|
||||
`;
|
||||
}
|
||||
|
||||
// Re-rendered after any vote/promote/reject change — deliberately excludes the
|
||||
// media block above so the embed stays mounted.
|
||||
function voteSectionTemplate(s) {
|
||||
const myVote = s.votes.find((v) => v.user_id === me.id);
|
||||
return `
|
||||
<form class="inline-form vote-form" data-id="${s.id}">
|
||||
<label>Mon vote
|
||||
<select name="vote">
|
||||
|
|
@ -85,6 +98,13 @@ function detailTemplate(s) {
|
|||
`;
|
||||
}
|
||||
|
||||
function detailTemplate(s) {
|
||||
return `
|
||||
<div class="media-wrap">${mediaTemplate(s)}</div>
|
||||
<div class="vote-section">${voteSectionTemplate(s)}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function voteItemTemplate(v) {
|
||||
const icon = v.vote === 'approve' ? '✔' : '✘';
|
||||
return `
|
||||
|
|
@ -103,6 +123,33 @@ function renderSuggestions() {
|
|||
});
|
||||
}
|
||||
|
||||
// Updates a card's status/tally text in place, without touching its detail panel/iframe.
|
||||
function patchCardSummary(s) {
|
||||
const card = document.querySelector(`.card[data-suggestion-id="${s.id}"]`);
|
||||
if (!card) return;
|
||||
const subtitle = card.querySelector('.card-subtitle');
|
||||
if (subtitle) subtitle.textContent = `Proposé par ${s.suggested_by_name} · ${statusLabel(s.status)}`;
|
||||
const approveEl = card.querySelector('.vote-tally .approve');
|
||||
const rejectEl = card.querySelector('.vote-tally .reject');
|
||||
if (approveEl) approveEl.textContent = `✔ ${s.approve_count}`;
|
||||
if (rejectEl) rejectEl.textContent = `✘ ${s.reject_count}`;
|
||||
const promoteBtn = card.querySelector('.promote-btn');
|
||||
if (promoteBtn) {
|
||||
promoteBtn.disabled = !!s.promoted_song_id;
|
||||
promoteBtn.textContent = s.promoted_song_id ? 'Déjà au répertoire' : 'Ajouter au répertoire';
|
||||
}
|
||||
}
|
||||
|
||||
function bindVoteSectionListeners(container, id) {
|
||||
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));
|
||||
}
|
||||
|
||||
async function onToggleDetail(id) {
|
||||
if (expanded.has(id)) {
|
||||
expanded.delete(id);
|
||||
|
|
@ -121,18 +168,53 @@ async function loadDetail(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));
|
||||
bindVoteSectionListeners(container.querySelector('.vote-section'), id);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Re-fetches one suggestion's detail and refreshes only its vote-section (and
|
||||
// card summary), leaving any mounted iframe untouched — used after voting,
|
||||
// promoting or rejecting so the YouTube embed never reloads for unrelated changes.
|
||||
async function refreshVoteSection(id) {
|
||||
const detail = await api.get(`/api/suggestions/${id}`);
|
||||
const myVote = detail.votes.find((v) => v.user_id === me.id);
|
||||
detail.my_vote = myVote?.vote || null;
|
||||
detail.my_vote_comment = myVote?.comment || null;
|
||||
const idx = suggestions.findIndex((s) => s.id === id);
|
||||
if (idx !== -1) suggestions[idx] = detail;
|
||||
patchCardSummary(detail);
|
||||
const container = document.querySelector(`[data-detail-for="${id}"] .vote-section`);
|
||||
if (container) {
|
||||
container.innerHTML = voteSectionTemplate(detail);
|
||||
bindVoteSectionListeners(container, id);
|
||||
}
|
||||
refreshSwipeView();
|
||||
return detail;
|
||||
}
|
||||
|
||||
function removeCard(id) {
|
||||
const card = document.querySelector(`.card[data-suggestion-id="${id}"]`);
|
||||
if (card) card.remove();
|
||||
const idx = suggestions.findIndex((s) => s.id === id);
|
||||
if (idx !== -1) suggestions.splice(idx, 1);
|
||||
expanded.delete(id);
|
||||
if (!suggestions.length) renderSuggestions();
|
||||
refreshSwipeView();
|
||||
}
|
||||
|
||||
function appendCard(s) {
|
||||
suggestions.push(s);
|
||||
const container = document.getElementById('suggestions-list');
|
||||
const emptyMsg = container.querySelector('.empty');
|
||||
if (emptyMsg) container.innerHTML = '';
|
||||
container.insertAdjacentHTML('beforeend', suggestionTemplate(s));
|
||||
const btn = container.querySelector(`.toggle-detail[data-id="${s.id}"]`);
|
||||
if (btn) btn.addEventListener('click', () => onToggleDetail(s.id));
|
||||
refreshSwipeView();
|
||||
}
|
||||
|
||||
async function onVote(e, id) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
|
|
@ -140,10 +222,7 @@ async function onVote(e, id) {
|
|||
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);
|
||||
await refreshVoteSection(id);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
|
|
@ -152,10 +231,7 @@ async function onVote(e, id) {
|
|||
async function onPromote(id) {
|
||||
try {
|
||||
await api.post(`/api/suggestions/${id}/promote`, {});
|
||||
await loadSuggestions();
|
||||
expanded.add(id);
|
||||
renderSuggestions();
|
||||
await loadDetail(id);
|
||||
await refreshVoteSection(id);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
|
|
@ -164,10 +240,7 @@ async function onPromote(id) {
|
|||
async function onReject(id) {
|
||||
try {
|
||||
await api.patch(`/api/suggestions/${id}`, { status: 'rejected' });
|
||||
await loadSuggestions();
|
||||
expanded.add(id);
|
||||
renderSuggestions();
|
||||
await loadDetail(id);
|
||||
await refreshVoteSection(id);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
|
|
@ -176,8 +249,7 @@ async function onReject(id) {
|
|||
async function onDelete(id) {
|
||||
try {
|
||||
await api.del(`/api/suggestions/${id}`);
|
||||
expanded.delete(id);
|
||||
await loadSuggestions();
|
||||
removeCard(id);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
|
|
@ -192,12 +264,19 @@ async function onAddSuggestion(e) {
|
|||
const spotifyUrl = form.spotifyUrl.value.trim();
|
||||
const description = form.description.value.trim();
|
||||
try {
|
||||
await api.post('/api/suggestions', { title, artist, youtubeUrl, spotifyUrl, description });
|
||||
const created = await api.post('/api/suggestions', { title, artist, youtubeUrl, spotifyUrl, description });
|
||||
form.reset();
|
||||
document.getElementById('suggestion-link-status').textContent = '';
|
||||
if (suggestionAutocomplete) suggestionAutocomplete.close();
|
||||
setAddSuggestionPanelOpen(false);
|
||||
await loadSuggestions();
|
||||
appendCard({
|
||||
...created,
|
||||
suggested_by_name: me.name,
|
||||
approve_count: 0,
|
||||
reject_count: 0,
|
||||
my_vote: null,
|
||||
my_vote_comment: null,
|
||||
});
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
|
|
@ -238,6 +317,224 @@ async function onSuggestionCandidateSelected(candidate) {
|
|||
}
|
||||
}
|
||||
|
||||
// ---------- Swipe ("Vote rapide") view ----------
|
||||
|
||||
const VIEW_STORAGE_KEY = 'octane-suggestions-view';
|
||||
let currentView = localStorage.getItem(VIEW_STORAGE_KEY) === 'swipe' ? 'swipe' : 'list';
|
||||
let swipeQueue = [];
|
||||
let dragState = null;
|
||||
|
||||
function pendingSwipeQueue() {
|
||||
return suggestions.filter((s) => s.status === 'pending' && !s.my_vote);
|
||||
}
|
||||
|
||||
function setView(view) {
|
||||
currentView = view;
|
||||
localStorage.setItem(VIEW_STORAGE_KEY, view);
|
||||
document.getElementById('suggestions-list').style.display = view === 'list' ? '' : 'none';
|
||||
document.getElementById('add-suggestion-panel-wrap').style.display = view === 'list' ? '' : 'none';
|
||||
document.getElementById('swipe-view').style.display = view === 'swipe' ? '' : 'none';
|
||||
document.getElementById('view-toggle-list').classList.toggle('active', view === 'list');
|
||||
document.getElementById('view-toggle-swipe').classList.toggle('active', view === 'swipe');
|
||||
if (view === 'swipe') refreshSwipeView();
|
||||
}
|
||||
|
||||
function refreshSwipeView() {
|
||||
if (currentView !== 'swipe') return;
|
||||
swipeQueue = pendingSwipeQueue();
|
||||
renderSwipeStack();
|
||||
}
|
||||
|
||||
function swipeCardTemplate(s, depth) {
|
||||
const thumb = youtubeThumbnailUrl(s.youtube_url);
|
||||
return `
|
||||
<div class="swipe-card" data-id="${s.id}" style="--depth:${depth}">
|
||||
<div class="swipe-card-media">
|
||||
${thumb ? `<img src="${thumb}" alt="${escapeHtml(s.title)}" loading="lazy">` : `<div class="song-thumb placeholder">♫</div>`}
|
||||
<a class="play-overlay" href="${escapeHtml(s.youtube_url)}" target="_blank" rel="noopener" title="Écouter sur YouTube">►</a>
|
||||
<div class="swipe-stamp approve">J'APPROUVE</div>
|
||||
<div class="swipe-stamp reject">JE REJETTE</div>
|
||||
</div>
|
||||
<div class="swipe-card-body">
|
||||
<div class="card-title">${escapeHtml(s.title)}${s.artist ? ` — ${escapeHtml(s.artist)}` : ''}</div>
|
||||
<div class="card-subtitle">Proposé par ${escapeHtml(s.suggested_by_name)}</div>
|
||||
<div class="vote-tally">
|
||||
<span class="approve">✔ ${s.approve_count}</span>
|
||||
<span class="reject">✘ ${s.reject_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderSwipeStack() {
|
||||
const stack = document.getElementById('swipe-stack');
|
||||
const counter = document.getElementById('swipe-counter');
|
||||
const empty = document.getElementById('swipe-empty');
|
||||
counter.textContent = swipeQueue.length ? `${swipeQueue.length} restante${swipeQueue.length > 1 ? 's' : ''}` : '';
|
||||
|
||||
if (!swipeQueue.length) {
|
||||
stack.innerHTML = '';
|
||||
empty.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
empty.style.display = 'none';
|
||||
|
||||
const visible = swipeQueue.slice(0, 3);
|
||||
stack.innerHTML = visible.map((s, i) => swipeCardTemplate(s, i)).reverse().join('');
|
||||
|
||||
const topCard = stack.querySelector(`.swipe-card[data-id="${visible[0].id}"]`);
|
||||
if (topCard) bindSwipeCardEvents(topCard, visible[0]);
|
||||
}
|
||||
|
||||
function bindSwipeCardEvents(card, suggestion) {
|
||||
card.addEventListener('pointerdown', (e) => {
|
||||
if (e.pointerType === 'mouse') return;
|
||||
dragState = { id: card.dataset.id, startX: e.clientX, startY: e.clientY, dx: 0, dy: 0 };
|
||||
card.setPointerCapture(e.pointerId);
|
||||
});
|
||||
card.addEventListener('pointermove', (e) => {
|
||||
if (!dragState || dragState.id !== card.dataset.id) return;
|
||||
dragState.dx = e.clientX - dragState.startX;
|
||||
dragState.dy = e.clientY - dragState.startY;
|
||||
applyDragTransform(card, dragState.dx, dragState.dy);
|
||||
});
|
||||
const endDrag = (e) => {
|
||||
if (!dragState || dragState.id !== card.dataset.id) return;
|
||||
const { dx } = dragState;
|
||||
dragState = null;
|
||||
const threshold = 110;
|
||||
if (dx > threshold) {
|
||||
resolveCard(suggestion, 'approve', card);
|
||||
} else if (dx < -threshold) {
|
||||
resolveCard(suggestion, 'reject', card);
|
||||
} else {
|
||||
card.style.transition = 'transform 0.25s ease';
|
||||
card.style.transform = '';
|
||||
setTimeout(() => { card.style.transition = ''; }, 250);
|
||||
card.querySelectorAll('.swipe-stamp').forEach((el) => (el.style.opacity = 0));
|
||||
}
|
||||
};
|
||||
card.addEventListener('pointerup', endDrag);
|
||||
card.addEventListener('pointercancel', endDrag);
|
||||
}
|
||||
|
||||
function applyDragTransform(card, dx, dy) {
|
||||
const rotate = dx / 12;
|
||||
card.style.transform = `translate(${dx}px, ${dy}px) rotate(${rotate}deg)`;
|
||||
const approveStamp = card.querySelector('.swipe-stamp.approve');
|
||||
const rejectStamp = card.querySelector('.swipe-stamp.reject');
|
||||
const intensity = Math.min(Math.abs(dx) / 100, 1);
|
||||
if (dx > 0) {
|
||||
approveStamp.style.opacity = intensity;
|
||||
rejectStamp.style.opacity = 0;
|
||||
} else {
|
||||
rejectStamp.style.opacity = intensity;
|
||||
approveStamp.style.opacity = 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function resolveCard(suggestion, vote, cardEl) {
|
||||
const card = cardEl || document.querySelector(`.swipe-card[data-id="${suggestion.id}"]`);
|
||||
if (card) {
|
||||
card.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
|
||||
card.style.transform = `translate(${vote === 'approve' ? '' : '-'}600px, -40px) rotate(${vote === 'approve' ? '' : '-'}25deg)`;
|
||||
card.style.opacity = '0';
|
||||
card.style.pointerEvents = 'none';
|
||||
}
|
||||
try {
|
||||
await api.post(`/api/suggestions/${suggestion.id}/vote`, { vote, comment: '' });
|
||||
const idx = suggestions.findIndex((s) => s.id === suggestion.id);
|
||||
if (idx !== -1) {
|
||||
suggestions[idx].my_vote = vote;
|
||||
if (vote === 'approve') suggestions[idx].approve_count += 1;
|
||||
else suggestions[idx].reject_count += 1;
|
||||
}
|
||||
patchCardSummary(suggestions[idx]);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
swipeQueue = swipeQueue.filter((s) => s.id !== suggestion.id);
|
||||
setTimeout(() => renderSwipeStack(), card ? 260 : 0);
|
||||
}
|
||||
|
||||
function onSwipeButtonClick(vote) {
|
||||
if (!swipeQueue.length) return;
|
||||
const top = swipeQueue[0];
|
||||
resolveCard(top, vote);
|
||||
}
|
||||
|
||||
// ---------- "Mes votes" review modal ----------
|
||||
|
||||
function openVotesModal() {
|
||||
renderVotesModalList();
|
||||
document.getElementById('votes-modal-overlay').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeVotesModal() {
|
||||
document.getElementById('votes-modal-overlay').classList.add('hidden');
|
||||
}
|
||||
|
||||
function votesModalRowTemplate(s) {
|
||||
const isOpen = expanded.has(`modal-${s.id}`);
|
||||
return `
|
||||
<div class="vote-review-row" data-id="${s.id}">
|
||||
<div class="vote-review-header">
|
||||
<div>
|
||||
<div class="card-title">${escapeHtml(s.title)}${s.artist ? ` — ${escapeHtml(s.artist)}` : ''}</div>
|
||||
<div class="card-subtitle">Mon vote : ${s.my_vote === 'approve' ? '✔ Approuvé' : '✘ Rejeté'}</div>
|
||||
</div>
|
||||
<button class="secondary icon-btn toggle-vote-review" data-id="${s.id}">${isOpen ? 'Masquer' : 'Modifier'}</button>
|
||||
</div>
|
||||
<div class="vote-review-detail" style="${isOpen ? '' : 'display:none'}" data-review-for="${s.id}">
|
||||
<p class="empty">Chargement…</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderVotesModalList() {
|
||||
const container = document.getElementById('votes-modal-list');
|
||||
const voted = suggestions.filter((s) => s.my_vote);
|
||||
renderList(container, voted, votesModalRowTemplate, "Vous n'avez pas encore voté.");
|
||||
container.querySelectorAll('.toggle-vote-review').forEach((btn) => {
|
||||
btn.addEventListener('click', () => onToggleVoteReview(parseInt(btn.dataset.id, 10)));
|
||||
});
|
||||
}
|
||||
|
||||
async function onToggleVoteReview(id) {
|
||||
const key = `modal-${id}`;
|
||||
if (expanded.has(key)) {
|
||||
expanded.delete(key);
|
||||
renderVotesModalList();
|
||||
return;
|
||||
}
|
||||
expanded.add(key);
|
||||
renderVotesModalList();
|
||||
try {
|
||||
const detail = await api.get(`/api/suggestions/${id}`);
|
||||
const container = document.querySelector(`[data-review-for="${id}"]`);
|
||||
if (!container) return;
|
||||
container.innerHTML = voteSectionTemplate(detail);
|
||||
container.querySelector('.vote-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
try {
|
||||
await api.post(`/api/suggestions/${id}/vote`, {
|
||||
vote: form.vote.value,
|
||||
comment: form.comment.value.trim(),
|
||||
});
|
||||
await refreshVoteSection(id);
|
||||
renderVotesModalList();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
(async function init() {
|
||||
me = await initNav('suggestions');
|
||||
document.getElementById('add-suggestion-form').addEventListener('submit', onAddSuggestion);
|
||||
|
|
@ -250,5 +547,28 @@ async function onSuggestionCandidateSelected(candidate) {
|
|||
dropdownId: 'suggestion-title-dropdown',
|
||||
onSelect: onSuggestionCandidateSelected,
|
||||
});
|
||||
|
||||
document.getElementById('view-toggle-list').addEventListener('click', () => setView('list'));
|
||||
document.getElementById('view-toggle-swipe').addEventListener('click', () => setView('swipe'));
|
||||
document.getElementById('swipe-approve-btn').addEventListener('click', () => onSwipeButtonClick('approve'));
|
||||
document.getElementById('swipe-reject-btn').addEventListener('click', () => onSwipeButtonClick('reject'));
|
||||
document.getElementById('open-votes-modal').addEventListener('click', openVotesModal);
|
||||
document.getElementById('swipe-empty-review-btn').addEventListener('click', openVotesModal);
|
||||
document.getElementById('votes-modal-close').addEventListener('click', closeVotesModal);
|
||||
document.getElementById('votes-modal-overlay').addEventListener('click', (e) => {
|
||||
if (e.target === e.currentTarget) closeVotesModal();
|
||||
});
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const modalOpen = !document.getElementById('votes-modal-overlay').classList.contains('hidden');
|
||||
if (e.key === 'Escape' && modalOpen) {
|
||||
closeVotesModal();
|
||||
return;
|
||||
}
|
||||
if (modalOpen || currentView !== 'swipe') return;
|
||||
if (e.key === 'ArrowRight') onSwipeButtonClick('approve');
|
||||
if (e.key === 'ArrowLeft') onSwipeButtonClick('reject');
|
||||
});
|
||||
|
||||
setView(currentView);
|
||||
await loadSuggestions();
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue