Add editable option approval flow
This commit is contained in:
@@ -120,6 +120,8 @@
|
||||
.btn-reject { background: var(--red); color: #fff; }
|
||||
.btn-delete { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
|
||||
.btn-delete:hover { border-color: var(--red); color: var(--red); }
|
||||
.btn-edit { background: transparent; border: 1px solid var(--border); color: var(--amber); }
|
||||
.btn-edit:hover { border-color: var(--amber); color: #fcd34d; }
|
||||
.btn-row { display: flex; gap: 6px; flex-shrink: 0; }
|
||||
|
||||
/* Toast */
|
||||
@@ -278,6 +280,7 @@ function renderPending() {
|
||||
<div class="name">${o.name}</div>
|
||||
<div class="meta">by ${o.addedBy || 'unknown'}</div>
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-edit" onclick="editOption('${o.id}')">✎ Edit</button>
|
||||
<button class="btn btn-approve" onclick="approve('${o.id}')">✓ Approve</button>
|
||||
<button class="btn btn-reject" onclick="reject('${o.id}')">✕ Reject</button>
|
||||
</div>
|
||||
@@ -295,12 +298,45 @@ function renderAll() {
|
||||
<div class="votes-badge">${o.votes.length} vote${o.votes.length !== 1 ? 's' : ''}</div>
|
||||
<div class="meta">${o.addedBy !== 'system' ? 'by ' + o.addedBy : 'system'}</div>
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-edit" onclick="editOption('${o.id}')">✎ Edit</button>
|
||||
<button class="btn btn-delete" onclick="deleteOption('${o.id}')" title="Delete option">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function editOption(id) {
|
||||
const current = allData.options.find(o => o.id === id);
|
||||
if (!current) return;
|
||||
const nextName = prompt('Option name', current.name);
|
||||
if (nextName === null) return;
|
||||
const nextDesc = prompt('Short description', current.desc || '');
|
||||
if (nextDesc === null) return;
|
||||
const nextDetails = prompt('Details, one per line', Array.isArray(current.details) ? current.details.join('\\n') : '');
|
||||
if (nextDetails === null) return;
|
||||
const nextUrl = prompt('Website URL', current.url || '');
|
||||
if (nextUrl === null) return;
|
||||
const nextCategory = prompt('Category id', current.categoryId);
|
||||
if (nextCategory === null) return;
|
||||
const nextApproved = confirm('Approve this option now? Click OK to approve, Cancel to keep it pending.');
|
||||
try {
|
||||
await fetch(API + '/api/options/' + id, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: nextName.trim(),
|
||||
desc: nextDesc.trim(),
|
||||
details: nextDetails,
|
||||
url: nextUrl.trim(),
|
||||
categoryId: nextCategory.trim(),
|
||||
approved: nextApproved,
|
||||
})
|
||||
});
|
||||
toast('Option updated', 'success');
|
||||
await loadData();
|
||||
} catch(e) { toast('Failed to update option', 'error'); }
|
||||
}
|
||||
|
||||
async function togglePolls() {
|
||||
try {
|
||||
// Get current state first
|
||||
|
||||
@@ -1638,6 +1638,7 @@
|
||||
<div class="form-grid">
|
||||
<input type="text" id="addName" placeholder="Name of the place (required)" maxlength="80" />
|
||||
<input type="text" id="addDesc" placeholder="Short description — price, vibe, what to expect…" maxlength="200" />
|
||||
<textarea id="addDetails" placeholder="Details on separate lines — price, inclusions, caveats, or notes…" maxlength="500" rows="3" style="background:transparent;border:1px solid #252a38;border-radius:10px;color:#e0e6f0;padding:10px;resize:vertical;min-height:84px;"></textarea>
|
||||
<input type="url" id="addUrl" placeholder="Website URL (optional)" />
|
||||
<div class="btn-row">
|
||||
<select id="addCategory">
|
||||
@@ -1909,13 +1910,15 @@
|
||||
});
|
||||
render();
|
||||
if (mapInitialized) mapRefreshMarkers();
|
||||
} else if (msg.type === 'option_added' || msg.type === 'option_approved') {
|
||||
} else if (msg.type === 'option_added' || msg.type === 'option_approved' || msg.type === 'option_updated') {
|
||||
if (!state.options.find(o => o.id === msg.option.id)) {
|
||||
state.options.push(msg.option);
|
||||
renderTabs();
|
||||
render();
|
||||
if (mapInitialized) mapRefreshMarkers();
|
||||
} else {
|
||||
state.options = state.options.map(o => o.id === msg.option.id ? { ...o, ...msg.option } : o);
|
||||
}
|
||||
renderTabs();
|
||||
render();
|
||||
if (mapInitialized) mapRefreshMarkers();
|
||||
} else if (msg.type === 'option_deleted') {
|
||||
state.options = state.options.filter(o => o.id !== msg.id);
|
||||
renderTabs();
|
||||
@@ -2968,6 +2971,7 @@
|
||||
function submitNewOption() {
|
||||
const name = document.getElementById('addName').value.trim();
|
||||
const desc = document.getElementById('addDesc').value.trim();
|
||||
const details = document.getElementById('addDetails').value.trim();
|
||||
const url = document.getElementById('addUrl').value.trim();
|
||||
const catId = document.getElementById('addCategory').value;
|
||||
|
||||
@@ -2980,11 +2984,12 @@
|
||||
return;
|
||||
}
|
||||
|
||||
wsSend({ type: 'add_option', categoryId: catId, name, desc, url, voterName: state.voterName, authToken: state.guestAuthToken });
|
||||
wsSend({ type: 'add_option', categoryId: catId, name, desc, details, url, voterName: state.voterName, authToken: state.guestAuthToken });
|
||||
|
||||
// Clear form
|
||||
document.getElementById('addName').value = '';
|
||||
document.getElementById('addDesc').value = '';
|
||||
document.getElementById('addDetails').value = '';
|
||||
document.getElementById('addUrl').value = '';
|
||||
showToast(`Submitted "${name}" for approval!`, 'success');
|
||||
}
|
||||
|
||||
39
server.js
39
server.js
@@ -704,7 +704,20 @@ function buildRealtimeSnapshot() {
|
||||
};
|
||||
}
|
||||
|
||||
function createUserOption({ categoryId, name, desc, url, voterName, lat, lng, approved }) {
|
||||
function normalizeDetails(details) {
|
||||
if (Array.isArray(details)) {
|
||||
return details.map((item) => String(item || '').trim()).filter(Boolean);
|
||||
}
|
||||
if (typeof details === 'string') {
|
||||
return details
|
||||
.split(/\n+/)
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
function createUserOption({ categoryId, name, desc, url, voterName, lat, lng, approved, details }) {
|
||||
return {
|
||||
id: uuidv4(),
|
||||
seedKey: null,
|
||||
@@ -718,7 +731,7 @@ function createUserOption({ categoryId, name, desc, url, voterName, lat, lng, ap
|
||||
addedBy: voterName,
|
||||
approved,
|
||||
votes: [],
|
||||
details: [],
|
||||
details: normalizeDetails(details),
|
||||
categoryColor: CATEGORY_META[categoryId]?.color || '#888',
|
||||
};
|
||||
}
|
||||
@@ -877,7 +890,7 @@ app.delete('/api/vote/:optionId', (req, res) => {
|
||||
});
|
||||
|
||||
app.post('/api/options', (req, res) => {
|
||||
const { categoryId, name, desc, url, lat, lng } = req.body;
|
||||
const { categoryId, name, desc, url, lat, lng, details } = req.body;
|
||||
const guest = requireGuestAuth(req, res, req.body);
|
||||
|
||||
if (!categoryId || !name) {
|
||||
@@ -896,6 +909,7 @@ app.post('/api/options', (req, res) => {
|
||||
voterName: guest.name,
|
||||
lat,
|
||||
lng,
|
||||
details,
|
||||
approved: false,
|
||||
});
|
||||
|
||||
@@ -915,6 +929,25 @@ app.post('/api/options/:id/approve', (req, res) => {
|
||||
res.json({ success: true });
|
||||
});
|
||||
|
||||
app.patch('/api/options/:id', (req, res) => {
|
||||
const option = data.options.find((candidate) => candidate.id === req.params.id);
|
||||
if (!option) return res.status(404).json({ error: 'Not found' });
|
||||
|
||||
const { categoryId, name, desc, url, lat, lng, details, approved } = req.body;
|
||||
if (categoryId !== undefined) option.categoryId = categoryId;
|
||||
if (name !== undefined) option.name = String(name || '').trim();
|
||||
if (desc !== undefined) option.desc = String(desc || '').trim();
|
||||
if (url !== undefined) option.url = String(url || '').trim() || null;
|
||||
if (lat !== undefined) option.lat = Number.isFinite(Number(lat)) ? Number(lat) : null;
|
||||
if (lng !== undefined) option.lng = Number.isFinite(Number(lng)) ? Number(lng) : null;
|
||||
if (details !== undefined) option.details = normalizeDetails(details);
|
||||
if (approved !== undefined) option.approved = Boolean(approved);
|
||||
|
||||
saveData(data);
|
||||
broadcast({ type: 'option_updated', option });
|
||||
res.json({ success: true, option });
|
||||
});
|
||||
|
||||
app.delete('/api/options/:id', (req, res) => {
|
||||
const optionIndex = data.options.findIndex((candidate) => candidate.id === req.params.id);
|
||||
if (optionIndex === -1) return res.status(404).json({ error: 'Not found' });
|
||||
|
||||
Reference in New Issue
Block a user