function formatDate(dateStr) {
const date = new Date(dateStr);
const options = {
weekday: 'short',
day: 'numeric',
month: 'short',
hour: '2-digit',
minute: '2-digit'
};
return date.toLocaleDateString('no-NO', options);
}
function renderEvents(data) {
const content = document.getElementById('content');
if (!data || !data.events || data.events.length === 0) {
content.innerHTML = `
<div class="empty-state">
<h2>Ingen events funnet</h2>
<p>Prøv å søke med andre kriterier</p>
</div>
`;
return;
}
const eventsHtml = data.events.map(event => `
<div class="event-card">
<div class="event-date">
<span class="icon">📅</span>
<span>${formatDate(event.startDate)}</span>
</div>
<div class="event-title">${escapeHtml(event.title)}</div>
<div class="event-location">
<span>📍</span>
<span>${escapeHtml(event.venue?.name || '')} ${event.venue?.name ? '·' : ''} ${escapeHtml(event.location?.city || '')}</span>
</div>
${event.categories?.length ? `
<div class="event-categories">
${event.categories.map(cat => `<span class="category-tag">${escapeHtml(cat.name)}</span>`).join('')}
</div>
` : ''}
${event.pricing ? `
<div class="event-price ${event.pricing.isFree ? 'price-free' : 'price-paid'}">
${event.pricing.isFree ? 'Gratis' :
event.pricing.minPrice ? `Fra ${event.pricing.minPrice} ${event.pricing.currency || 'NOK'}` :
'Se pris'}
</div>
` : ''}
</div>
`).join('');
content.innerHTML = `<div class="events-list">${eventsHtml}</div>`;
}
function renderEvent(data) {
const content = document.getElementById('content');
if (!data || !data.event) {
content.innerHTML = `
<div class="empty-state">
<h2>Event ikke funnet</h2>
</div>
`;
return;
}
const event = data.event;
content.innerHTML = `
<div class="event-card">
<div class="event-date">
<span class="icon">📅</span>
<span>${formatDate(event.startDate)}</span>
${event.endDate ? `<span>→ ${formatDate(event.endDate)}</span>` : ''}
</div>
<div class="event-title">${escapeHtml(event.title)}</div>
<div class="event-location">
<span>📍</span>
<span>${escapeHtml(event.venue?.name || '')} ${event.venue?.name ? '·' : ''} ${escapeHtml(event.location?.city || '')}</span>
</div>
${event.description ? `<p class="event-description">${escapeHtml(event.description)}</p>` : ''}
${event.categories?.length ? `
<div class="event-categories">
${event.categories.map(cat => `<span class="category-tag">${escapeHtml(cat.name)}</span>`).join('')}
</div>
` : ''}
${event.pricing ? `
<div class="event-price ${event.pricing.isFree ? 'price-free' : 'price-paid'}">
${event.pricing.isFree ? 'Gratis' :
event.pricing.minPrice ? `Fra ${event.pricing.minPrice} ${event.pricing.currency || 'NOK'}` :
'Se pris'}
</div>
` : ''}
${event.organizer?.name ? `<p class="event-organizer">Arrangør: ${escapeHtml(event.organizer.name)}</p>` : ''}
</div>
`;
}
function escapeHtml(str) {
if (!str) return '';
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
// Listen for data from MCP
window.addEventListener('message', (e) => {
try {
const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
if (data.events) {
renderEvents(data);
} else if (data.event) {
renderEvent(data);
}
} catch (err) {
console.error('Failed to parse data:', err);
}
});
// Initial state
document.getElementById('content').innerHTML = `
<div class="empty-state">
<h2>Velkommen til EvHenter</h2>
<p>Spør meg om events i din by!</p>
</div>
`;
