Add topic colors — each wiki topic gets distinct color badge (blue, teal, purple, orange, green)
This commit is contained in:
Kato
+41
-220
@@ -657,8 +657,47 @@ function getRank(posts) {
|
||||
return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' };
|
||||
}
|
||||
|
||||
|
||||
// ========================================
|
||||
// TOPIC COLORS — each topic gets a distinct color
|
||||
// ========================================
|
||||
const TOPIC_COLORS = {
|
||||
'🌎 Internationales Geschäft': { bg: '#E0F2F1', text: '#00695C', border: '#00695C' },
|
||||
'🏦 Banken & Finanzen Filialen': { bg: '#E3F2FD', text: '#1565C0', border: '#1565C0' },
|
||||
'🏦 Banken & Finanzen allgmein': { bg: '#E8EAF6', text: '#283593', border: '#283593' },
|
||||
'💰 Steuern': { bg: '#FFF3E0', text: '#E65100', border: '#E65100' },
|
||||
'💻 Software & Digital Operations': { bg: '#EDE7F6', text: '#4527A0', border: '#4527A0' },
|
||||
'📑 Buchhaltung': { bg: '#E8F5E9', text: '#2E7D32', border: '#2E7D32' }
|
||||
};
|
||||
|
||||
function getTopicColor(topic) {
|
||||
// Try exact match first
|
||||
if (TOPIC_COLORS[topic]) return TOPIC_COLORS[topic];
|
||||
// Try matching without emoji
|
||||
const cleanTopic = topic.replace(/^[^\s]+\s/, '');
|
||||
for (const key of Object.keys(TOPIC_COLORS)) {
|
||||
const cleanKey = key.replace(/^[^\s]+\s/, '');
|
||||
if (cleanTopic === cleanKey) return TOPIC_COLORS[key];
|
||||
}
|
||||
// Fallback: generate color from topic string
|
||||
let hash = 0;
|
||||
for (let i = 0; i < topic.length; i++) {
|
||||
hash = topic.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
const hues = [200, 180, 240, 30, 140, 60]; // blue, teal, purple, orange, green, amber
|
||||
const idx = Math.abs(hash) % hues.length;
|
||||
const color = hues[idx];
|
||||
return {
|
||||
bg: `hsl(${color}, 70%, 92%)`,
|
||||
text: `hsl(${color}, 60%, 35%)`,
|
||||
border: `hsl(${color}, 60%, 35%)`
|
||||
};
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// WIKI
|
||||
// ========================================
|
||||
|
||||
// ========================================
|
||||
let wikiData = [];
|
||||
|
||||
@@ -700,224 +739,6 @@ function renderWikiCards(data) {
|
||||
card.setAttribute('tabindex', '0');
|
||||
|
||||
const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown');
|
||||
const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || '');
|
||||
const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || '');
|
||||
const topicColor = getTopicColor(topic);
|
||||
|
||||
// Get date — try updatedAt first, fall back to createdAt
|
||||
const dateStr = formatDate(new Date(item.updatedAt || item.createdAt));
|
||||
|
||||
// Teaser: first 150 chars of content
|
||||
const teaser = content.trim().substring(0, 180);
|
||||
const teaserEnd = content.trim().length > 180 ? '...' : '';
|
||||
|
||||
card.innerHTML = `
|
||||
<span class="wiki-topic-badge">${escapeHtml(topic)}</span>
|
||||
<h3 class="wiki-subtopic-headline">${escapeHtml(subtopic)}</h3>
|
||||
<p class="wiki-teaser">${escapeHtml(teaser)}${teaserEnd}</p>
|
||||
<div class="wiki-card-meta">
|
||||
<span class="wiki-date">${dateStr}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Open modal on click
|
||||
card.addEventListener('click', () => openWikiModalSingle(item));
|
||||
card.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
openWikiModalSingle(item);
|
||||
}
|
||||
});
|
||||
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
if (!(date instanceof Date) || isNaN(date)) return '';
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
function openWikiModal(topicName, subtopics) {
|
||||
// Create modal if not exists
|
||||
let modalOverlay = document.getElementById('wiki-modal-overlay');
|
||||
if (!modalOverlay) {
|
||||
modalOverlay = document.createElement('div');
|
||||
modalOverlay.id = 'wiki-modal-overlay';
|
||||
modalOverlay.className = 'modal-overlay';
|
||||
document.body.appendChild(modalOverlay);
|
||||
}
|
||||
|
||||
let html = '<div class="modal wiki-modal"><button class="modal-close" onclick="closeWikiModal()">×</button>';
|
||||
html += '<div class="wiki-modal-content">';
|
||||
html += `<h2 class="wiki-modal-title">${escapeHtml(topicName)}</h2>`;
|
||||
|
||||
subtopics.forEach(sub => {
|
||||
const title = currentLang === 'en' && sub.subtopic_en ? sub.subtopic_en : (sub.subtopic || '');
|
||||
const content = currentLang === 'en' && sub.wiki_en ? sub.wiki_en : (sub.wiki || '');
|
||||
html += `<h3 class="wiki-modal-subtitle">${escapeHtml(title)}</h3>`;
|
||||
html += `<div class="wiki-modal-text">${escapeHtml(content)}</div>`;
|
||||
});
|
||||
|
||||
html += '</div></div>';
|
||||
modalOverlay.innerHTML = html;
|
||||
modalOverlay.classList.add('active');
|
||||
}
|
||||
|
||||
function closeWikiModal() {
|
||||
const overlay = document.getElementById('wiki-modal-overlay');
|
||||
if (overlay) overlay.classList.remove('active');
|
||||
}
|
||||
|
||||
function openWikiModalSingle(item) {
|
||||
let modalOverlay = document.getElementById('wiki-modal-overlay');
|
||||
if (!modalOverlay) {
|
||||
modalOverlay = document.createElement('div');
|
||||
modalOverlay.id = 'wiki-modal-overlay';
|
||||
modalOverlay.className = 'modal-overlay';
|
||||
document.body.appendChild(modalOverlay);
|
||||
}
|
||||
|
||||
const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown');
|
||||
const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || '');
|
||||
const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || '');
|
||||
|
||||
// Get date
|
||||
const dateStr = formatDate(new Date(item.updatedAt || item.createdAt));
|
||||
|
||||
let html = '<div class="modal wiki-modal"><button class="modal-close" onclick="closeWikiModal()">×</button>';
|
||||
html += '<div class="wiki-modal-content">';
|
||||
html += `<div class="wiki-modal-topic">${escapeHtml(topic)}</div>`;
|
||||
html += `<h2 class="wiki-modal-title">${escapeHtml(subtopic)}</h2>`;
|
||||
if (dateStr) html += `<div class="wiki-modal-date">${dateStr}</div>`;
|
||||
html += `<div class="wiki-modal-text">${escapeHtml(content)}</div>`;
|
||||
html += '</div></div>';
|
||||
modalOverlay.innerHTML = html;
|
||||
modalOverlay.classList.add('active');
|
||||
}
|
||||
|
||||
function searchWiki(term) {
|
||||
if (!term.trim()) {
|
||||
renderWikiCards(wikiData);
|
||||
return;
|
||||
}
|
||||
|
||||
const t = term.toLowerCase();
|
||||
const filtered = wikiData.filter(item => {
|
||||
const topic = ((item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || '')) +
|
||||
' ' + ((item.subtopic_en && currentLang === 'en') ? item.subtopic_en : (item.subtopic || '')) +
|
||||
' ' + ((item.wiki_en && currentLang === 'en') ? item.wiki_en : (item.wiki || ''));
|
||||
return topic.toLowerCase().includes(t);
|
||||
});
|
||||
|
||||
renderWikiCards(filtered);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DATES / EVENTS
|
||||
// ========================================
|
||||
async function loadDates() {
|
||||
try {
|
||||
const response = await fetch(SCHEDULE_URL);
|
||||
if (!response.ok) throw new Error('Failed to fetch');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.data && Array.isArray(result.data) && result.data.length > 0) {
|
||||
renderDates(result.data);
|
||||
} else {
|
||||
document.getElementById('dates-list').innerHTML =
|
||||
`<p class="no-events">${isDE() ? 'Keine Termine geplant' : 'No events scheduled'}</p>`;
|
||||
}
|
||||
} catch (error) {
|
||||
document.getElementById('dates-list').innerHTML =
|
||||
`<p class="no-events">${isDE() ? 'Fehler beim Laden' : 'Error loading events'}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderDates(events) {
|
||||
const container = document.getElementById('dates-list');
|
||||
container.innerHTML = '';
|
||||
|
||||
// Sort events by date
|
||||
const sorted = events.sort((a, b) => new Date(a.start) - new Date(b.start));
|
||||
|
||||
sorted.forEach((event, idx) => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'date-card stagger-' + (idx % 4 + 1);
|
||||
|
||||
// Parse date/time from ISO string
|
||||
const startDate = new Date(event.start);
|
||||
const endDate = new Date(event.end);
|
||||
|
||||
// Format date: yyyy.mm.dd
|
||||
const day = String(startDate.getDate()).padStart(2, '0');
|
||||
const month = String(startDate.getMonth() + 1).padStart(2, '0');
|
||||
const year = startDate.getFullYear();
|
||||
const dateStr = `${year}.${month}.${day}`;
|
||||
|
||||
// Format time: HH:MM (local time)
|
||||
const startHour = String(startDate.getHours()).padStart(2, '0');
|
||||
const startMinute = String(startDate.getMinutes()).padStart(2, '0');
|
||||
const endHour = String(endDate.getHours()).padStart(2, '0');
|
||||
const endMinute = String(endDate.getMinutes()).padStart(2, '0');
|
||||
const startStr = `${startHour}:${startMinute}`;
|
||||
const endStr = `${endHour}:${endMinute}`;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="date-header">
|
||||
<div class="date-icon">📅</div>
|
||||
<h3 class="date-headline">${escapeHtml(event.headline || 'Unbenanntes Event')}</h3>
|
||||
</div>
|
||||
<div class="date-info">
|
||||
<div class="date-row">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
<span>${dateStr}</span>
|
||||
</div>
|
||||
<div class="date-row">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
<span>${isDE() ? 'Start' : 'Start'} ${startStr}</span>
|
||||
</div>
|
||||
<div class="date-row">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
<span>${isDE() ? 'Ende' : 'End'} ${endStr}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// COOKIES
|
||||
// ========================================
|
||||
function getCookie(name) {
|
||||
const localVal = localStorage.getItem('paraguay_' + name);
|
||||
if (localVal) return localVal;
|
||||
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) {
|
||||
return parts.pop().split(';').shift().replace(/^"|"$/g, '');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function setCookie(name, value, days) {
|
||||
const expires = new Date();
|
||||
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
|
||||
document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expires.toUTCString() + ';path=/';
|
||||
localStorage.setItem('paraguay_' + name, value);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// UTILS
|
||||
// ========================================
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
// Get excerpt from first subtopic
|
||||
Reference in New Issue
Block a user