Ereignis-Timeline: Newsfeed mit Lagebericht-Sektionen + Heatmap-Strip
Komplett neu gedacht: nicht mehr horizontale Karten-Kette, sondern vertikaler Newsfeed mit den vorhandenen vt-Klassen, plus dezenter Heatmap-Strip oben für die Quantitäts-Übersicht. - Heatmap-Strip oben (14 px hoch): ein Quadrat pro Tag/Stunde/Woche/ Monat je nach Spannweite, Farbintensität = Aktivität, goldener Boden-Strich bei Lagebericht. - Klick auf Heatmap-Quadrat: Stream scrollt zur passenden Zeit-Gruppe, diese flasht kurz auf. - Newsfeed darunter: vt-time-group mit Datums-Trennzeilen (Heute/Gestern/...), Lagebericht-Einträge sind durch ihre vt-snapshot Klasse prominent gegenüber Meldungs-Einträgen. - Klick auf Lagebericht: Volltext klappt inline auf (vorhandener lazyLoadSnapshotDetail-Mechanismus, kein separates Detail-Panel mehr). - Klick auf Meldung: Detail klappt inline auf. Karten-Kette, Verbindungs-Stränge, "Aktuell"-Marker, Snapshot-Detail- Panel, Window-Detail-Panel und alle zugehörigen CSS-Klassen (ht-card/ht-link/ht-now/ht-chain/ht-detail) komplett entfernt. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
@@ -1114,11 +1114,9 @@ const App = {
|
||||
this._timelineSearchTimer = setTimeout(() => this.rerenderTimeline(), 250);
|
||||
},
|
||||
|
||||
/** Snapshot-zentrierte Timeline:
|
||||
* - Quanti-Strip oben (Heatmap-Reihe ueber Tage/Stunden)
|
||||
* - Lagebericht-Karten als horizontale Stationen
|
||||
* - Verbindungs-Straenge mit "X Meldungen" zwischen den Karten
|
||||
* - Detail-Panel unten je nach Klick (Snapshot oder Zeitfenster-Liste)
|
||||
/** Heatmap-Strip oben + vertikaler Newsfeed-Stream darunter.
|
||||
* Lageberichte sind als prominente Sektionen im Stream.
|
||||
* Klick auf Heatmap-Quadrat scrollt im Stream zur passenden Zeit-Gruppe.
|
||||
*/
|
||||
rerenderTimeline() {
|
||||
const container = document.getElementById('timeline');
|
||||
@@ -1127,59 +1125,65 @@ const App = {
|
||||
const filterType = this._timelineFilter;
|
||||
const range = this._timelineRange;
|
||||
|
||||
// Filter-spezifische Eintraege fuer die Hauptansicht
|
||||
let entries = this._collectEntries(filterType, searchTerm, range);
|
||||
const entries = this._collectEntries(filterType, searchTerm, range);
|
||||
this._updateTimelineCount(entries);
|
||||
|
||||
if (entries.length === 0) {
|
||||
this._activeTimelineDetail = null;
|
||||
container.innerHTML = (searchTerm || range !== 'all')
|
||||
? '<div class="ht-empty">Keine Einträge im gewählten Zeitraum.</div>'
|
||||
: '<div class="ht-empty">Noch keine Meldungen. Starte eine Recherche mit "Aktualisieren".</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
entries.sort((a, b) => new Date(a.timestamp || 0) - new Date(b.timestamp || 0));
|
||||
|
||||
// Quanti-Strip nutzt IMMER alle Eintraege im aktuellen Range (unabh. vom Filter),
|
||||
// damit Klick auf ein Quadrat die echte Aktivitaet zeigt.
|
||||
// Heatmap nutzt IMMER alle Eintraege (Filter-unabhaengig), damit der Strip
|
||||
// die volle Aktivitaet zeigt und auch im "Lageberichte"-Filter scrollbar bleibt.
|
||||
const stripEntries = this._collectEntries('all', '', range);
|
||||
stripEntries.sort((a, b) => new Date(a.timestamp || 0) - new Date(b.timestamp || 0));
|
||||
|
||||
const articles = entries.filter(e => e.kind === 'article');
|
||||
const snapshots = entries.filter(e => e.kind === 'snapshot');
|
||||
|
||||
let html = '<div class="ht-tl">';
|
||||
|
||||
// 1) Quanti-Strip (entfaellt nur bei "Lageberichte"-Filter)
|
||||
if (filterType !== 'snapshots' && stripEntries.length > 0) {
|
||||
if (stripEntries.length > 0) {
|
||||
html += this._renderTimelineStrip(stripEntries);
|
||||
}
|
||||
|
||||
// 2) Hauptansicht je nach Filter
|
||||
if (filterType === 'snapshots') {
|
||||
html += this._renderSnapshotsOnly(snapshots);
|
||||
} else if (filterType === 'articles') {
|
||||
html += this._renderTimelineStream(articles);
|
||||
} else {
|
||||
// 'all'
|
||||
if (snapshots.length === 0) {
|
||||
html += '<div class="ht-tl-hint">Noch kein Lagebericht. Aktiviere einen Refresh, um den ersten zu erstellen.</div>';
|
||||
html += this._renderTimelineStream(articles);
|
||||
} else {
|
||||
html += this._renderTimelineChain(snapshots, articles);
|
||||
}
|
||||
}
|
||||
|
||||
// 3) Detail-Panel falls aktiv
|
||||
if (this._activeTimelineDetail) {
|
||||
html += this._renderTimelineDetail(this._activeTimelineDetail);
|
||||
}
|
||||
|
||||
// Vertikaler Newsfeed
|
||||
html += '<div class="ht-stream">';
|
||||
html += this._renderVerticalStream(entries);
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
container.innerHTML = html;
|
||||
},
|
||||
|
||||
/** Granularitaets-Heuristik fuer den Newsfeed: Stunden bei kurzen Spannen, sonst Tage. */
|
||||
_calcGranularity(entries) {
|
||||
if (!entries || entries.length < 2) return 'day';
|
||||
const ts = entries.map(e => new Date(e.timestamp || 0).getTime()).filter(t => t > 0);
|
||||
if (ts.length < 2) return 'day';
|
||||
const span = Math.max(...ts) - Math.min(...ts);
|
||||
if (span <= 48 * 60 * 60 * 1000) return 'hour';
|
||||
return 'day';
|
||||
},
|
||||
|
||||
/** Vertikaler Stream: Datums-Trennzeilen + Lagebericht-Sektionen + Meldungen. */
|
||||
_renderVerticalStream(entries) {
|
||||
if (!entries || entries.length === 0) {
|
||||
return '<div class="ht-empty">Keine Einträge.</div>';
|
||||
}
|
||||
// Neueste oben
|
||||
const sorted = [...entries].sort((a, b) => new Date(b.timestamp || 0) - new Date(a.timestamp || 0));
|
||||
const granularity = this._calcGranularity(sorted);
|
||||
const groups = this._groupByTimePeriod(sorted, granularity);
|
||||
|
||||
let html = '<div class="vt-timeline">';
|
||||
groups.forEach(g => {
|
||||
const groupId = 'vt-grp-' + g.key.replace(/[^a-z0-9]/gi, '-');
|
||||
html += `<div class="vt-time-group" id="${groupId}" data-time-key="${UI.escape(g.key)}">`;
|
||||
html += `<div class="vt-time-label"><span class="vt-time-label-text">${UI.escape(g.label)}</span></div>`;
|
||||
html += this._renderTimeGroupEntries(g.entries, this._currentIncidentType);
|
||||
html += `</div>`;
|
||||
});
|
||||
html += '</div>';
|
||||
return html;
|
||||
},
|
||||
|
||||
/* ======= Quanti-Strip ======= */
|
||||
_stripGranularity(stripEntries) {
|
||||
if (stripEntries.length < 2) return 'day';
|
||||
@@ -1310,187 +1314,8 @@ const App = {
|
||||
return html;
|
||||
},
|
||||
|
||||
/* ======= Lagebericht-Kette (Snapshots als Stationen) ======= */
|
||||
_renderTimelineChain(snapshots, articles) {
|
||||
// Aelteste links, neueste rechts
|
||||
snapshots.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
|
||||
articles.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
|
||||
|
||||
let html = '<div class="ht-chain-scroll"><div class="ht-chain">';
|
||||
|
||||
const firstSnapTs = new Date(snapshots[0].timestamp).getTime();
|
||||
const lastSnapTs = new Date(snapshots[snapshots.length - 1].timestamp).getTime();
|
||||
|
||||
// Vor-Strang (Meldungen vor erstem Lagebericht)
|
||||
const before = articles.filter(a => new Date(a.timestamp).getTime() < firstSnapTs);
|
||||
if (before.length > 0) {
|
||||
const earliestArt = new Date(before[0].timestamp).getTime();
|
||||
html += this._renderChainLink(earliestArt, firstSnapTs, before.length, 'Vor dem ersten Lagebericht');
|
||||
}
|
||||
|
||||
// Lagebericht-Karten + Straenge dazwischen
|
||||
snapshots.forEach((snap, i) => {
|
||||
html += this._renderChainCard(snap);
|
||||
if (i < snapshots.length - 1) {
|
||||
const ts1 = new Date(snap.timestamp).getTime();
|
||||
const ts2 = new Date(snapshots[i + 1].timestamp).getTime();
|
||||
const between = articles.filter(a => {
|
||||
const t = new Date(a.timestamp).getTime();
|
||||
return t >= ts1 && t < ts2;
|
||||
});
|
||||
html += this._renderChainLink(ts1, ts2, between.length, 'Zwischen den Lageberichten');
|
||||
}
|
||||
});
|
||||
|
||||
// Nach-Strang + "Aktuell"-Marker
|
||||
const after = articles.filter(a => new Date(a.timestamp).getTime() > lastSnapTs);
|
||||
const nowMs = Date.now();
|
||||
if (after.length > 0) {
|
||||
html += this._renderChainLink(lastSnapTs, nowMs, after.length, 'Seit dem letzten Lagebericht');
|
||||
}
|
||||
html += this._renderChainNow();
|
||||
|
||||
html += '</div></div>';
|
||||
return html;
|
||||
},
|
||||
|
||||
_renderChainCard(snap) {
|
||||
const data = snap.data || {};
|
||||
const dateStr = new Date(snap.timestamp).toLocaleString('de-DE', {
|
||||
day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE,
|
||||
});
|
||||
let preview = (data.summary_preview || '').replace(/\s+/g, ' ').trim();
|
||||
if (preview.length > 140) preview = preview.slice(0, 138) + '…';
|
||||
const isActive = this._activeTimelineDetail && this._activeTimelineDetail.type === 'snapshot' && this._activeTimelineDetail.id === data.id;
|
||||
return `<div class="ht-card ${isActive ? 'active' : ''}" tabindex="0" onclick="App.openSnapshotInline(${data.id})" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();App.openSnapshotInline(${data.id});}">
|
||||
<div class="ht-card-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M8 13h8M8 17h6"/></svg>
|
||||
</div>
|
||||
<div class="ht-card-date">${UI.escape(dateStr)}</div>
|
||||
<div class="ht-card-preview">${UI.escape(preview || 'Lagebericht')}</div>
|
||||
<div class="ht-card-meta">${data.article_count || 0} Meldungen · ${data.fact_check_count || 0} Fakten</div>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
_renderChainLink(startMs, endMs, count, label) {
|
||||
const text = count === 0 ? 'keine Meldungen' : `${count} Meldung${count === 1 ? '' : 'en'}`;
|
||||
const labelArg = JSON.stringify(label);
|
||||
return `<div class="ht-link" tabindex="0" onclick="App.openTimelineWindow(${startMs}, ${endMs}, ${UI.escape(labelArg)})" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();App.openTimelineWindow(${startMs}, ${endMs}, ${UI.escape(labelArg)});}">
|
||||
<div class="ht-link-line"></div>
|
||||
<div class="ht-link-count">${UI.escape(text)}</div>
|
||||
<div class="ht-link-line"></div>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
_renderChainNow() {
|
||||
return `<div class="ht-now" aria-label="Aktueller Stand">
|
||||
<div class="ht-now-pulse"></div>
|
||||
<div class="ht-now-label">aktuell</div>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
/* ======= Stream (Fallback / Filter "Meldungen") ======= */
|
||||
_renderTimelineStream(articles) {
|
||||
if (articles.length === 0) {
|
||||
return '<div class="ht-empty">Keine Meldungen im gewählten Zeitraum.</div>';
|
||||
}
|
||||
// Reuse: existierender vertikaler Verlauf
|
||||
return '<div class="ht-stream">' + this._buildFullVerticalTimeline('articles', '') + '</div>';
|
||||
},
|
||||
|
||||
_renderSnapshotsOnly(snapshots) {
|
||||
if (snapshots.length === 0) {
|
||||
return '<div class="ht-empty">Noch keine Lageberichte vorhanden.</div>';
|
||||
}
|
||||
snapshots.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
|
||||
let html = '<div class="ht-chain-scroll"><div class="ht-chain ht-chain--snapshots-only">';
|
||||
snapshots.forEach((snap, i) => {
|
||||
html += this._renderChainCard(snap);
|
||||
if (i < snapshots.length - 1) {
|
||||
html += '<div class="ht-link ht-link--quiet"><div class="ht-link-line"></div></div>';
|
||||
}
|
||||
});
|
||||
html += this._renderChainNow();
|
||||
html += '</div></div>';
|
||||
return html;
|
||||
},
|
||||
|
||||
/* ======= Detail-Panel ======= */
|
||||
_renderTimelineDetail(detail) {
|
||||
if (detail.type === 'snapshot') {
|
||||
return this._renderSnapshotDetailPanel(detail.id);
|
||||
}
|
||||
return this._renderWindowDetailPanel(detail);
|
||||
},
|
||||
|
||||
_renderSnapshotDetailPanel(snapshotId) {
|
||||
const cached = this._snapshotFullCache && this._snapshotFullCache.get(snapshotId);
|
||||
const meta = (this._currentSnapshots || []).find(s => s.id === snapshotId);
|
||||
if (!meta) return '';
|
||||
const dateStr = new Date(meta.created_at).toLocaleString('de-DE', {
|
||||
day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE,
|
||||
});
|
||||
const title = `Lagebericht vom ${dateStr}`;
|
||||
let body;
|
||||
if (cached && cached.summary) {
|
||||
const safeSummary = (typeof window.marked !== 'undefined' && marked.parse)
|
||||
? marked.parse(cached.summary)
|
||||
: '<pre>' + UI.escape(cached.summary) + '</pre>';
|
||||
body = `<div class="ht-detail-body summary-text">${safeSummary}</div>`;
|
||||
} else {
|
||||
body = '<div class="ht-detail-body"><em>Lade Lagebericht...</em></div>';
|
||||
// Lazy-Load anstossen
|
||||
if (this._currentIncidentId && API.getSnapshot) {
|
||||
API.getSnapshot(this._currentIncidentId, snapshotId).then(full => {
|
||||
if (!this._snapshotFullCache) this._snapshotFullCache = new Map();
|
||||
this._snapshotFullCache.set(snapshotId, full);
|
||||
if (this._activeTimelineDetail && this._activeTimelineDetail.type === 'snapshot' && this._activeTimelineDetail.id === snapshotId) {
|
||||
this.rerenderTimeline();
|
||||
}
|
||||
}).catch(err => console.warn('snapshot-detail:', err));
|
||||
}
|
||||
}
|
||||
return `<div class="ht-detail">
|
||||
<div class="ht-detail-header">
|
||||
<span class="ht-detail-title">${UI.escape(title)}</span>
|
||||
<button class="ht-detail-close" onclick="App.closeTimelineDetail()" aria-label="Schließen">×</button>
|
||||
</div>
|
||||
${body}
|
||||
</div>`;
|
||||
},
|
||||
|
||||
_renderWindowDetailPanel(detail) {
|
||||
const start = detail.start;
|
||||
const end = detail.end;
|
||||
const label = detail.label || 'Zeitfenster';
|
||||
const type = this._currentIncidentType;
|
||||
const list = (this._currentArticles || []).filter(a => {
|
||||
const ts = new Date((type === 'research' && a.published_at) ? a.published_at : a.collected_at).getTime();
|
||||
return ts >= start && ts < end;
|
||||
}).sort((a, b) => {
|
||||
const ta = new Date((type === 'research' && a.published_at) ? a.published_at : a.collected_at).getTime();
|
||||
const tb = new Date((type === 'research' && b.published_at) ? b.published_at : b.collected_at).getTime();
|
||||
return tb - ta;
|
||||
});
|
||||
let body;
|
||||
if (list.length === 0) {
|
||||
body = '<div class="ht-empty">Keine Meldungen in diesem Zeitfenster.</div>';
|
||||
} else {
|
||||
body = list.map(a => this._renderArticleEntry(a, type, 0)).join('');
|
||||
}
|
||||
const titleText = `${label} · ${list.length} Meldung${list.length === 1 ? '' : 'en'}`;
|
||||
return `<div class="ht-detail">
|
||||
<div class="ht-detail-header">
|
||||
<span class="ht-detail-title">${UI.escape(titleText)}</span>
|
||||
<button class="ht-detail-close" onclick="App.closeTimelineDetail()" aria-label="Schließen">×</button>
|
||||
</div>
|
||||
<div class="ht-detail-body">${body}</div>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
setTimelineFilter(filter) {
|
||||
this._timelineFilter = filter;
|
||||
this._activeTimelineDetail = null;
|
||||
document.querySelectorAll('.ht-filter-btn').forEach(btn => {
|
||||
const isActive = btn.dataset.filter === filter;
|
||||
btn.classList.toggle('active', isActive);
|
||||
@@ -1501,7 +1326,6 @@ const App = {
|
||||
|
||||
setTimelineRange(range) {
|
||||
this._timelineRange = range;
|
||||
this._activeTimelineDetail = null;
|
||||
document.querySelectorAll('.ht-range-btn').forEach(btn => {
|
||||
const isActive = btn.dataset.range === range;
|
||||
btn.classList.toggle('active', isActive);
|
||||
@@ -1510,23 +1334,42 @@ const App = {
|
||||
this.rerenderTimeline();
|
||||
},
|
||||
|
||||
openSnapshotInline(snapshotId) {
|
||||
const same = this._activeTimelineDetail && this._activeTimelineDetail.type === 'snapshot' && this._activeTimelineDetail.id === snapshotId;
|
||||
this._activeTimelineDetail = same ? null : { type: 'snapshot', id: snapshotId };
|
||||
this.rerenderTimeline();
|
||||
this._resizeTimelineTile();
|
||||
},
|
||||
|
||||
/** Klick auf Heatmap-Quadrat: Filter im Stream auf das Zeitfenster scrollen. */
|
||||
openTimelineWindow(startMs, endMs, label) {
|
||||
this._activeTimelineDetail = { type: 'window', start: startMs, end: endMs, label: label || 'Zeitfenster' };
|
||||
this.rerenderTimeline();
|
||||
this._resizeTimelineTile();
|
||||
},
|
||||
|
||||
closeTimelineDetail() {
|
||||
this._activeTimelineDetail = null;
|
||||
this.rerenderTimeline();
|
||||
this._resizeTimelineTile();
|
||||
// Im Stream die naechste vt-time-group finden, deren Eintraege ins Fenster fallen
|
||||
const groups = document.querySelectorAll('#timeline .vt-time-group');
|
||||
let target = null;
|
||||
for (const g of groups) {
|
||||
const firstTimeEl = g.querySelector('.vt-article-time, .vt-snapshot-time');
|
||||
// Pragmatisch: nimm die erste Group, die Eintraege mit Timestamp >= startMs hat.
|
||||
// Die Stream-Daten sind absteigend sortiert; wir finden die erste passende.
|
||||
const matches = Array.from(g.querySelectorAll('.vt-entry')).some(entry => {
|
||||
// Wir haben keine direkten Timestamps im DOM — nehmen den Group-Index
|
||||
return true;
|
||||
});
|
||||
if (matches) {
|
||||
// Statt komplizierter Ts-Suche: scrolle zur Gruppe, deren Label das Datum enthaelt
|
||||
target = g;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Bessere Heuristik: die vt-time-group, deren erstes Datums-Element ins Fenster faellt
|
||||
const dateAtStart = new Date(startMs);
|
||||
const tzs = _tz(dateAtStart);
|
||||
const wantKey = `${tzs.year}-${tzs.month}-${tzs.date}`;
|
||||
const wantHour = tzs.hours;
|
||||
for (const g of groups) {
|
||||
const k = g.dataset.timeKey || '';
|
||||
if (k.startsWith(wantKey) && (k === wantKey || k.endsWith('-' + wantHour))) {
|
||||
target = g;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: document.documentElement.dataset.a11yMotion ? 'instant' : 'smooth', block: 'start' });
|
||||
target.classList.add('vt-time-group--flash');
|
||||
setTimeout(() => target.classList.remove('vt-time-group--flash'), 1200);
|
||||
}
|
||||
},
|
||||
|
||||
_resizeTimelineTile() {
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren