my-homelab-configs/apps/website/visitor-ideas.js

69 lines
2.3 KiB
JavaScript

(function () {
const root = document.getElementById('visitor-ideas');
if (!root) return;
const messages = {
thanks: root.dataset.statusThanks,
invalid: root.dataset.statusInvalid,
slow: root.dataset.statusSlow,
error: root.dataset.statusError,
};
const status = new URLSearchParams(window.location.search).get('idea');
if (status && messages[status]) {
const statusEl = document.createElement('p');
statusEl.className = `idea-status idea-status-${status}`;
statusEl.textContent = messages[status];
const form = root.querySelector('.idea-form');
root.insertBefore(statusEl, form || root.firstChild);
}
function addIdeaText(parent, text) {
String(text || '').split('\n').forEach((line, index) => {
if (index > 0) parent.appendChild(document.createElement('br'));
parent.appendChild(document.createTextNode(line));
});
}
function renderIdeas(ideas) {
const existing = root.querySelector('.visitor-idea-list');
if (existing) existing.remove();
if (!Array.isArray(ideas) || ideas.length === 0) return;
const list = document.createElement('div');
list.className = 'visitor-idea-list';
const heading = document.createElement('h4');
heading.textContent = root.dataset.recentTitle || 'Recent visitor ideas';
list.appendChild(heading);
ideas.forEach((idea) => {
const article = document.createElement('article');
article.className = 'visitor-idea-card';
const body = document.createElement('p');
addIdeaText(body, idea.idea);
article.appendChild(body);
const footer = document.createElement('footer');
const name = document.createElement('span');
name.textContent = idea.name || 'Anonymous visitor';
const time = document.createElement('time');
time.dateTime = idea.created_at || '';
time.textContent = String(idea.created_at || '').slice(0, 10);
footer.appendChild(name);
footer.appendChild(time);
article.appendChild(footer);
list.appendChild(article);
});
root.appendChild(list);
}
fetch('/visitor_ideas.php', { headers: { Accept: 'application/json' } })
.then((response) => (response.ok ? response.json() : { ideas: [] }))
.then((data) => renderIdeas(data.ideas))
.catch(() => renderIdeas([]));
})();