kaizenkodo/TourPlanner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix duplication and update front end

Browse Source
This commit is contained in:
Kiyomichi Kosaka
2025-06-08 21:36:41 +02:00
parent 70beda9eeb
commit 7caa899137
2 changed files with 112 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+79 -39
View File
@@ -227,13 +227,18 @@
margin-top: 30px;
}
.idea-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 20px;
transition: all 0.3s ease;
}
.idea-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 20px;
transition: all 0.3s ease;
}
.idea-card.decided {
background: rgba(0, 255, 0, 0.1);
border-color: rgba(0, 255, 0, 0.4);
}
.idea-card h3 {
margin-bottom: 20px; /* pushes the next form‐group down */
@@ -810,13 +815,15 @@
}
// Render cards view
function renderCardsView() {
const container = document.getElementById('cardsView');
container.innerHTML = '';
function renderCardsView() {
const container = document.getElementById('cardsView');
container.innerHTML = '';
const decidedIdea = currentTour.ideas.find(i => i.decided);
currentTour.ideas.forEach(idea => {
const card = document.createElement('div');
card.className = 'idea-card';
currentTour.ideas.forEach(idea => {
const card = document.createElement('div');
card.className = 'idea-card';
if (idea.decided) card.classList.add('decided');
let timeBadge = "";
if (idea.start_time && idea.end_time) {
@@ -863,23 +870,30 @@
<h3 class="idea-title">${idea.name}</h3>
${timeBadge}
<p class="idea-description" style="margin-top: 8px;">${linkify(idea.description)}</p>
<div class="vote-section">
<span class="vote-count">👍 ${idea.voters.length} votes</span>
<button class="btn btn-secondary btn-small" onclick="voteForIdea('${idea.id}')">Vote</button>
</div>
<div class="vote-section">
<span class="vote-count">👍 ${idea.voters.length} votes</span>
${decidedIdea ? '' : `<button class="btn btn-secondary btn-small" onclick="voteForIdea('${idea.id}')">Vote</button>`}
${decidedIdea ? '' : `<button class="btn btn-secondary btn-small" onclick="decideIdea('${idea.id}')">Decide</button>`}
</div>
<div class="voters-list">
${idea.voters.map(voter => `<span class="voter-chip">${voter}</span>`).join('')}
</div>
`;
container.appendChild(card);
});
}
container.appendChild(card);
});
document.querySelectorAll('#addIdeaForm input, #addIdeaForm textarea, #addIdeaForm button').forEach(el => {
el.disabled = !!decidedIdea;
});
}
// Render matrix view
function renderMatrixView() {
const container = document.getElementById('matrixView');
function renderMatrixView() {
const container = document.getElementById('matrixView');
const allVoters = [...new Set(currentTour.ideas.flatMap(idea => idea.voters))];
const decidedIdea = currentTour.ideas.find(i => i.decided);
const allVoters = [...new Set(currentTour.ideas.flatMap(idea => idea.voters))];
let html = '<table class="matrix-table"><thead><tr>'
+ '<th>Idea</th><th>Time Range</th>';
@@ -888,9 +902,9 @@
});
html += '<th>Total</th></tr></thead><tbody>';
currentTour.ideas.forEach(idea => {
// Format time only (HH:mm) in Norwegian:
let timeCell = "";
currentTour.ideas.forEach(idea => {
// Format time only (HH:mm) in Norwegian:
let timeCell = "";
if (idea.start_time && idea.end_time) {
const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
hour: '2-digit', minute: '2-digit', hour12: false
@@ -913,18 +927,23 @@
timeCell = `<td style="color: var(--text-secondary);">—</td>`;
}
html += `<tr>`
let rowStyle = idea.decided ? ' style="background: rgba(0,255,0,0.1)"' : '';
html += `<tr${rowStyle}>`
+ `<td><strong>${idea.name}</strong><br><small>${linkify(idea.description)}</small></td>`
+ timeCell;
allVoters.forEach(voter => {
html += `<td class="vote-cell">${idea.voters.includes(voter) ? '✓' : ''}</td>`;
});
html += `<td class="vote-cell">${idea.voters.length}</td></tr>`;
});
});
html += '</tbody></table>';
container.innerHTML = html;
}
html += '</tbody></table>';
container.innerHTML = html;
document.querySelectorAll('#addIdeaForm input, #addIdeaForm textarea, #addIdeaForm button').forEach(el => {
el.disabled = !!decidedIdea;
});
}
// Switch view
function showView(view) {
@@ -942,7 +961,11 @@
// Utility functions
function sortIdeasByVotes() {
if (!currentTour) return;
currentTour.ideas.sort((a, b) => b.voters.length - a.voters.length);
currentTour.ideas.sort((a, b) => {
if (a.decided) return -1;
if (b.decided) return 1;
return b.voters.length - a.voters.length;
});
}
function generateUUID() {
@@ -967,13 +990,30 @@
const voteSubmitBtn = document.getElementById('voteSubmitBtn');
let _pendingVoteIdeaId = null;
function voteForIdea(ideaId) {
_pendingVoteIdeaId = ideaId;
voterNameInput.value = '';
voteSubmitBtn.disabled = true;
voteModal.classList.remove('hidden');
setTimeout(() => voterNameInput.focus(), 100);
}
function voteForIdea(ideaId) {
_pendingVoteIdeaId = ideaId;
voterNameInput.value = '';
voteSubmitBtn.disabled = true;
voteModal.classList.remove('hidden');
setTimeout(() => voterNameInput.focus(), 100);
}
async function decideIdea(ideaId) {
if (!confirm('Mark this idea as decided?')) return;
showLoader();
try {
const resp = await fetch(`${API_URL}/tours/${currentTour.id}/ideas/${ideaId}/decide`, { method: 'POST' });
if (!resp.ok) throw new Error('Failed');
const decidedIdea = await resp.json();
currentTour.ideas = currentTour.ideas.map(i => i.id === decidedIdea.id ? decidedIdea : i);
renderIdeas();
} catch (err) {
console.error('Decide error', err);
alert('Failed to decide idea');
} finally {
hideLoader();
}
}
voterNameInput.addEventListener('input', () => {
voteSubmitBtn.disabled = voterNameInput.value.trim().length === 0;