Promote develop → main (2026-05-01 14:09 UTC) #8
@@ -2450,213 +2450,113 @@ a.dev-source-pill:hover {
|
||||
padding: 12px 20px 8px;
|
||||
}
|
||||
|
||||
/* Achsen-Container */
|
||||
.ht-axis {
|
||||
position: relative;
|
||||
height: 110px;
|
||||
/* === Timeline: Heatmap-Strip oben + vertikaler Newsfeed-Stream darunter === */
|
||||
.ht-tl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-md);
|
||||
}
|
||||
|
||||
/* Stündliches Layout: höher wegen Datums-Markern oben */
|
||||
.ht-axis--hourly {
|
||||
height: 130px;
|
||||
/* Heatmap-Strip */
|
||||
.ht-strip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 4px 0 6px;
|
||||
}
|
||||
|
||||
/* Punkte-Bereich (über der Linie) */
|
||||
.ht-points {
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
right: 4%;
|
||||
top: 0;
|
||||
height: 56px;
|
||||
.ht-strip-cells {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(8px, 1fr);
|
||||
gap: 2px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.ht-axis--hourly .ht-points {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
/* Achsenlinie */
|
||||
.ht-axis-line {
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
right: 2%;
|
||||
top: 60px;
|
||||
height: 2px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.ht-axis--hourly .ht-axis-line {
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
/* Datums-Marker (vertikale Linie + Datum oben, nur bei Stunden-Granularität) */
|
||||
.ht-day-markers {
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
right: 4%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ht-day-marker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ht-day-marker-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ht-day-marker-line {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
height: 66px;
|
||||
width: 1px;
|
||||
left: 0;
|
||||
background: var(--accent);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/* Punkt (Basis) */
|
||||
.ht-point {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: var(--text-disabled);
|
||||
border: 2px solid var(--bg-card);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ht-point:hover {
|
||||
box-shadow: var(--glow-accent);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.ht-point.active {
|
||||
box-shadow: var(--glow-accent-strong);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
/* Dimmen: nicht-aktive Punkte verblassen wenn ein Punkt aktiv ist */
|
||||
.ht-points:has(.ht-point.active) .ht-point:not(.active) {
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* Pfeil über dem aktiven Punkt */
|
||||
.ht-point.active::after {
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
bottom: calc(100% + 2px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
color: var(--accent);
|
||||
pointer-events: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Snapshot-Punkt (Raute) */
|
||||
.ht-point.ht-snapshot-point {
|
||||
.ht-strip-cell {
|
||||
background: color-mix(in srgb, var(--accent) calc(var(--intensity) * 70%), var(--border));
|
||||
border-radius: 2px;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
background: var(--accent);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
min-height: 12px;
|
||||
}
|
||||
.ht-strip-cell.empty {
|
||||
background: var(--border);
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
.ht-strip-cell:hover:not(.empty) {
|
||||
transform: scaleY(1.6);
|
||||
box-shadow: var(--glow-accent);
|
||||
}
|
||||
|
||||
.ht-point.ht-snapshot-point .ht-tooltip,
|
||||
.ht-point.ht-snapshot-point .ht-point-count {
|
||||
transform: rotate(-45deg);
|
||||
.ht-strip-cell.has-snapshot {
|
||||
box-shadow: inset 0 -3px 0 var(--accent);
|
||||
}
|
||||
|
||||
.ht-point.ht-snapshot-point .ht-tooltip {
|
||||
transform: rotate(-45deg) translateX(-50%);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
/* Gemischter Punkt (Gold-Kreis) */
|
||||
.ht-point.ht-mixed-point {
|
||||
.ht-strip-cell.active {
|
||||
background: var(--accent);
|
||||
border: 2px solid var(--bg-card);
|
||||
transform: scaleY(1.6);
|
||||
box-shadow: var(--glow-accent-strong), inset 0 -3px 0 var(--accent);
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
.ht-strip:has(.ht-strip-cell.active) .ht-strip-cell:not(.active):not(.empty) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Tooltip (über dem Punkt) */
|
||||
.ht-tooltip {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
/* Banner: aktiver Strip-Filter */
|
||||
.ht-strip-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-md);
|
||||
padding: 6px 12px;
|
||||
background: var(--tint-accent);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: var(--radius);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s ease, visibility 0.15s ease;
|
||||
border: 1px solid var(--border);
|
||||
z-index: 10;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.ht-point:hover .ht-tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Zahl unter dem Punkt */
|
||||
.ht-point-count {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-disabled);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ht-point.active .ht-point-count,
|
||||
.ht-point:hover .ht-point-count {
|
||||
.ht-strip-banner-icon {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Achsen-Labels (unter der Linie) */
|
||||
.ht-axis-labels {
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
right: 4%;
|
||||
top: 72px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.ht-axis--hourly .ht-axis-labels {
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.ht-axis-label {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
}
|
||||
.ht-strip-banner-text {
|
||||
flex: 1;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.ht-strip-banner-text strong {
|
||||
color: var(--accent);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.ht-strip-banner-close {
|
||||
border: 1px solid var(--accent);
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 10px;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.ht-strip-banner-close:hover {
|
||||
background: var(--accent);
|
||||
color: var(--bg-card);
|
||||
}
|
||||
.ht-strip-labels {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
font-size: 9px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.ht-strip-label {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Leerer Zustand */
|
||||
/* Stream-Container */
|
||||
.ht-stream {
|
||||
margin-top: var(--sp-md);
|
||||
}
|
||||
.ht-empty {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
@@ -2664,60 +2564,19 @@ a.dev-source-pill:hover {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Detail-Panel */
|
||||
.ht-detail-panel {
|
||||
margin-top: 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-secondary);
|
||||
animation: ht-slide-down 0.2s ease;
|
||||
/* Time-Group Flash beim Scrollen vom Strip */
|
||||
.vt-time-group--flash {
|
||||
animation: vt-group-flash 1.2s ease-out;
|
||||
}
|
||||
@keyframes vt-group-flash {
|
||||
0% { background: var(--tint-accent-strong); }
|
||||
100% { background: transparent; }
|
||||
}
|
||||
|
||||
@keyframes ht-slide-down {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vt-time-group--flash { animation: none; }
|
||||
}
|
||||
|
||||
.ht-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.ht-detail-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.ht-detail-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-disabled);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ht-detail-close:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ht-detail-content {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.ht-detail-content::-webkit-scrollbar { width: 6px; }
|
||||
.ht-detail-content::-webkit-scrollbar-track { background: var(--bg-primary); border-radius: 3px; }
|
||||
.ht-detail-content::-webkit-scrollbar-thumb { background: var(--text-disabled); border-radius: 3px; }
|
||||
.ht-detail-content::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
|
||||
|
||||
/* === Briefing Listen === */
|
||||
.briefing-content ul {
|
||||
margin: 8px 0;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<link rel="stylesheet" href="/static/vendor/leaflet.css">
|
||||
<link rel="stylesheet" href="/static/vendor/MarkerCluster.css">
|
||||
<link rel="stylesheet" href="/static/vendor/MarkerCluster.Default.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=20260316k">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=20260501e">
|
||||
<style>
|
||||
/* Export Modal Radio */
|
||||
.export-radio { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; border-radius:var(--radius-sm); transition:background 0.15s; border:1px solid transparent; margin-bottom:4px; }
|
||||
@@ -647,7 +647,7 @@
|
||||
<script src="/static/js/components.js?v=20260427a"></script>
|
||||
<script src="/static/js/layout.js?v=20260316b"></script>
|
||||
<script src="/static/js/pipeline.js?v=20260501a"></script>
|
||||
<script src="/static/js/app.js?v=20260427c"></script>
|
||||
<script src="/static/js/app.js?v=20260501e"></script>
|
||||
<script src="/static/js/cluster-data.js?v=20260322f"></script>
|
||||
<script src="/static/js/tutorial.js?v=20260316z"></script>
|
||||
<script src="/static/js/chat.js?v=20260422a"></script>
|
||||
|
||||
@@ -433,7 +433,7 @@ const App = {
|
||||
_editingSourceId: null,
|
||||
_timelineFilter: 'all',
|
||||
_timelineRange: 'all',
|
||||
_activePointIndex: null,
|
||||
_activeStripWindow: null,
|
||||
_timelineSearchTimer: null,
|
||||
_pendingComplete: null,
|
||||
_pendingCompleteTimer: null,
|
||||
@@ -1038,7 +1038,7 @@ const App = {
|
||||
}
|
||||
this._timelineFilter = 'all';
|
||||
this._timelineRange = 'all';
|
||||
this._activePointIndex = null;
|
||||
this._activeStripWindow = null;
|
||||
const _tsEl = document.getElementById('timeline-search'); if (_tsEl) _tsEl.value = '';
|
||||
document.querySelectorAll('.ht-filter-btn').forEach(btn => {
|
||||
const isActive = btn.dataset.filter === 'all';
|
||||
@@ -1114,6 +1114,9 @@ const App = {
|
||||
this._timelineSearchTimer = setTimeout(() => this.rerenderTimeline(), 250);
|
||||
},
|
||||
|
||||
/** Heatmap-Strip oben + vertikaler Newsfeed-Stream darunter.
|
||||
* Klick auf Heatmap-Balken: Stream filtert auf das Zeitfenster (aktive Balken hervorgehoben).
|
||||
*/
|
||||
rerenderTimeline() {
|
||||
const container = document.getElementById('timeline');
|
||||
if (!container) return;
|
||||
@@ -1124,271 +1127,216 @@ const App = {
|
||||
let entries = this._collectEntries(filterType, searchTerm, range);
|
||||
this._updateTimelineCount(entries);
|
||||
|
||||
// Strip nutzt IMMER alle Eintraege im Range (unabhaengig von Filter/Search/Strip-Window)
|
||||
const stripEntries = this._collectEntries('all', '', range);
|
||||
stripEntries.sort((a, b) => new Date(a.timestamp || 0) - new Date(b.timestamp || 0));
|
||||
|
||||
// Wenn ein Heatmap-Balken aktiv ist: Stream zusaetzlich auf dieses Zeitfenster filtern
|
||||
const win = this._activeStripWindow;
|
||||
if (win && entries.length > 0) {
|
||||
entries = entries.filter(e => {
|
||||
const ts = new Date(e.timestamp || 0).getTime();
|
||||
return ts >= win.start && ts < win.end;
|
||||
});
|
||||
}
|
||||
|
||||
let html = '<div class="ht-tl">';
|
||||
if (stripEntries.length > 0) {
|
||||
html += this._renderTimelineStrip(stripEntries);
|
||||
}
|
||||
|
||||
// Banner mit aktivem Filter
|
||||
if (win) {
|
||||
html += `<div class="ht-strip-banner">
|
||||
<span class="ht-strip-banner-icon" aria-hidden="true">▼</span>
|
||||
<span class="ht-strip-banner-text">Gefiltert auf <strong>${UI.escape(win.label)}</strong> · ${entries.length} Eintr${entries.length === 1 ? 'ag' : 'äge'}</span>
|
||||
<button class="ht-strip-banner-close" onclick="App.clearStripWindow()" aria-label="Filter aufheben">Filter aufheben</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
html += '<div class="ht-stream">';
|
||||
if (entries.length === 0) {
|
||||
this._activePointIndex = 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;
|
||||
html += win
|
||||
? '<div class="ht-empty">Keine Einträge in diesem Zeitfenster.</div>'
|
||||
: (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>';
|
||||
} else {
|
||||
html += this._renderVerticalStream(entries);
|
||||
}
|
||||
|
||||
entries.sort((a, b) => new Date(a.timestamp || 0) - new Date(b.timestamp || 0));
|
||||
|
||||
const granularity = this._calcGranularity(entries, range);
|
||||
let buckets = this._buildBuckets(entries, granularity);
|
||||
buckets = this._mergeCloseBuckets(buckets);
|
||||
|
||||
// Aktiven Index validieren
|
||||
if (this._activePointIndex !== null && this._activePointIndex >= buckets.length) {
|
||||
this._activePointIndex = null;
|
||||
}
|
||||
|
||||
// Achsen-Bereich
|
||||
const rangeStart = buckets[0].timestamp;
|
||||
const rangeEnd = buckets[buckets.length - 1].timestamp;
|
||||
const maxCount = Math.max(...buckets.map(b => b.entries.length));
|
||||
|
||||
// Stunden- vs. Tages-Granularität
|
||||
const isHourly = granularity === 'hour';
|
||||
const axisLabels = this._buildAxisLabels(buckets, granularity, true);
|
||||
|
||||
// HTML aufbauen
|
||||
let html = `<div class="ht-axis${isHourly ? ' ht-axis--hourly' : ''}">`;
|
||||
|
||||
// Datums-Marker (immer anzeigen, ausgedünnt)
|
||||
const dayMarkers = this._thinLabels(this._buildDayMarkers(buckets, rangeStart, rangeEnd), 10);
|
||||
html += '<div class="ht-day-markers">';
|
||||
dayMarkers.forEach(m => {
|
||||
html += `<div class="ht-day-marker" style="left:${m.pos}%;">`;
|
||||
html += `<div class="ht-day-marker-label">${UI.escape(m.text)}</div>`;
|
||||
html += `<div class="ht-day-marker-line"></div>`;
|
||||
html += `</div>`;
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
// Punkte
|
||||
html += '<div class="ht-points">';
|
||||
buckets.forEach((bucket, idx) => {
|
||||
const pos = this._bucketPositionPercent(bucket, rangeStart, rangeEnd, buckets.length);
|
||||
const size = this._calcPointSize(bucket.entries.length, maxCount);
|
||||
const hasSnapshots = bucket.entries.some(e => e.kind === 'snapshot');
|
||||
const hasArticles = bucket.entries.some(e => e.kind === 'article');
|
||||
|
||||
let pointClass = 'ht-point';
|
||||
if (filterType === 'snapshots') {
|
||||
pointClass += ' ht-snapshot-point';
|
||||
} else if (hasSnapshots) {
|
||||
pointClass += ' ht-mixed-point';
|
||||
}
|
||||
if (this._activePointIndex === idx) pointClass += ' active';
|
||||
|
||||
const tooltip = `${bucket.label}: ${bucket.entries.length} Eintr${bucket.entries.length === 1 ? 'ag' : 'äge'}`;
|
||||
|
||||
html += `<div class="${pointClass}" style="left:${pos}%;width:${size}px;height:${size}px;" onclick="App.openTimelineDetail(${idx})" data-idx="${idx}">`;
|
||||
html += `<div class="ht-tooltip">${UI.escape(tooltip)}</div>`;
|
||||
html += `</div>`;
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
// Achsenlinie
|
||||
html += '<div class="ht-axis-line"></div>';
|
||||
|
||||
// Achsen-Labels (ausgedünnt um Überlappung zu vermeiden)
|
||||
const thinned = this._thinLabels(axisLabels);
|
||||
html += '<div class="ht-axis-labels">';
|
||||
thinned.forEach(lbl => {
|
||||
html += `<div class="ht-axis-label" style="left:${lbl.pos}%;">${UI.escape(lbl.text)}</div>`;
|
||||
});
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// Detail-Panel (wenn ein Punkt aktiv ist)
|
||||
if (this._activePointIndex !== null && this._activePointIndex < buckets.length) {
|
||||
html += this._renderDetailPanel(buckets[this._activePointIndex]);
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
},
|
||||
|
||||
_calcGranularity(entries, range) {
|
||||
if (entries.length < 2) return 'day';
|
||||
const timestamps = entries.map(e => new Date(e.timestamp || 0).getTime()).filter(t => t > 0);
|
||||
if (timestamps.length < 2) return 'day';
|
||||
const span = Math.max(...timestamps) - Math.min(...timestamps);
|
||||
if (range === '24h' || span <= 48 * 60 * 60 * 1000) return 'hour';
|
||||
/** 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';
|
||||
},
|
||||
|
||||
_buildBuckets(entries, granularity) {
|
||||
const bucketMap = {};
|
||||
entries.forEach(e => {
|
||||
const d = new Date(e.timestamp || 0);
|
||||
const b = _tz(d);
|
||||
let key, label, ts;
|
||||
if (granularity === 'hour') {
|
||||
key = `${b.year}-${b.month + 1}-${b.date}-${b.hours}`;
|
||||
label = d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE }) + ', ' + b.hours.toString().padStart(2, '0') + ':00';
|
||||
ts = new Date(b.year, b.month, b.date, b.hours).getTime();
|
||||
} else {
|
||||
key = `${b.year}-${b.month + 1}-${b.date}`;
|
||||
label = d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short', timeZone: TIMEZONE });
|
||||
ts = new Date(b.year, b.month, b.date, 12).getTime();
|
||||
}
|
||||
if (!bucketMap[key]) {
|
||||
bucketMap[key] = { key, label, timestamp: ts, entries: [] };
|
||||
}
|
||||
bucketMap[key].entries.push(e);
|
||||
});
|
||||
return Object.values(bucketMap).sort((a, b) => a.timestamp - b.timestamp);
|
||||
},
|
||||
|
||||
_mergeCloseBuckets(buckets) {
|
||||
if (buckets.length < 2) return buckets;
|
||||
const rangeStart = buckets[0].timestamp;
|
||||
const rangeEnd = buckets[buckets.length - 1].timestamp;
|
||||
if (rangeEnd <= rangeStart) return buckets;
|
||||
|
||||
const container = document.getElementById('timeline');
|
||||
const axisWidth = (container ? container.offsetWidth : 800) * 0.92;
|
||||
const maxCount = Math.max(...buckets.map(b => b.entries.length));
|
||||
const result = [buckets[0]];
|
||||
|
||||
for (let i = 1; i < buckets.length; i++) {
|
||||
const prev = result[result.length - 1];
|
||||
const curr = buckets[i];
|
||||
|
||||
const distPx = ((curr.timestamp - prev.timestamp) / (rangeEnd - rangeStart)) * axisWidth;
|
||||
const prevSize = Math.min(32, this._calcPointSize(prev.entries.length, maxCount));
|
||||
const currSize = Math.min(32, this._calcPointSize(curr.entries.length, maxCount));
|
||||
const minDistPx = (prevSize + currSize) / 2 + 6;
|
||||
|
||||
if (distPx < minDistPx) {
|
||||
prev.entries = prev.entries.concat(curr.entries);
|
||||
} else {
|
||||
result.push(curr);
|
||||
}
|
||||
/** Vertikaler Stream: Datums-Trennzeilen + Lagebericht-Sektionen + Meldungen. */
|
||||
_renderVerticalStream(entries) {
|
||||
if (!entries || entries.length === 0) {
|
||||
return '<div class="ht-empty">Keine Einträge.</div>';
|
||||
}
|
||||
return result;
|
||||
// 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;
|
||||
},
|
||||
|
||||
_bucketPositionPercent(bucket, rangeStart, rangeEnd, totalBuckets) {
|
||||
if (totalBuckets === 1) return 50;
|
||||
if (rangeEnd === rangeStart) return 50;
|
||||
return ((bucket.timestamp - rangeStart) / (rangeEnd - rangeStart)) * 100;
|
||||
/* ======= Quanti-Strip ======= */
|
||||
_stripGranularity(stripEntries) {
|
||||
if (stripEntries.length < 2) return 'day';
|
||||
const ts = stripEntries.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);
|
||||
const DAY = 86400000;
|
||||
if (span <= 2 * DAY) return 'hour';
|
||||
if (span <= 60 * DAY) return 'day';
|
||||
if (span <= 365 * DAY) return 'week';
|
||||
return 'month';
|
||||
},
|
||||
|
||||
_calcPointSize(count, maxCount) {
|
||||
if (maxCount <= 1) return 16;
|
||||
const minSize = 12;
|
||||
const maxSize = 32;
|
||||
const logScale = Math.log(count + 1) / Math.log(maxCount + 1);
|
||||
return Math.round(minSize + logScale * (maxSize - minSize));
|
||||
},
|
||||
_buildStripBuckets(stripEntries, granularity) {
|
||||
if (stripEntries.length === 0) return [];
|
||||
const ts = stripEntries.map(e => new Date(e.timestamp || 0).getTime()).filter(t => t > 0);
|
||||
if (ts.length === 0) return [];
|
||||
const minTs = Math.min(...ts);
|
||||
const maxTs = Math.max(...ts);
|
||||
|
||||
_buildAxisLabels(buckets, granularity, timeOnly) {
|
||||
if (buckets.length === 0) return [];
|
||||
const maxLabels = 8;
|
||||
const labels = [];
|
||||
const rangeStart = buckets[0].timestamp;
|
||||
const rangeEnd = buckets[buckets.length - 1].timestamp;
|
||||
// Bucket-Start fuer minTs ermitteln
|
||||
const minDate = new Date(minTs);
|
||||
const tzMin = _tz(minDate);
|
||||
let firstStart;
|
||||
let stepMs;
|
||||
if (granularity === 'hour') {
|
||||
firstStart = new Date(tzMin.year, tzMin.month, tzMin.date, tzMin.hours).getTime();
|
||||
stepMs = 3600000;
|
||||
} else if (granularity === 'day') {
|
||||
firstStart = new Date(tzMin.year, tzMin.month, tzMin.date).getTime();
|
||||
stepMs = 86400000;
|
||||
} else if (granularity === 'week') {
|
||||
const dow = (minDate.getDay() + 6) % 7; // 0=Mo
|
||||
firstStart = new Date(tzMin.year, tzMin.month, tzMin.date - dow).getTime();
|
||||
stepMs = 7 * 86400000;
|
||||
} else {
|
||||
firstStart = new Date(tzMin.year, tzMin.month, 1).getTime();
|
||||
stepMs = null; // dynamisch (Monatsgrenzen)
|
||||
}
|
||||
|
||||
const getLabelText = (b) => {
|
||||
if (timeOnly) {
|
||||
// Bei Tages-Granularität: Uhrzeit des ersten Eintrags nehmen
|
||||
const ts = (granularity === 'day' && b.entries && b.entries.length > 0)
|
||||
? new Date(b.entries[0].timestamp || b.timestamp)
|
||||
: new Date(b.timestamp);
|
||||
const tp = _tz(ts);
|
||||
return tp.hours.toString().padStart(2, '0') + ':' + tp.minutes.toString().padStart(2, '0');
|
||||
}
|
||||
return b.label;
|
||||
const buckets = [];
|
||||
const fmt = (t) => {
|
||||
const d = new Date(t);
|
||||
if (granularity === 'hour') return d.toLocaleString('de-DE', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE });
|
||||
if (granularity === 'day') return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short', timeZone: TIMEZONE });
|
||||
if (granularity === 'week') return 'Woche ab ' + d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE });
|
||||
return d.toLocaleDateString('de-DE', { month: 'long', year: 'numeric', timeZone: TIMEZONE });
|
||||
};
|
||||
|
||||
if (buckets.length <= maxLabels) {
|
||||
buckets.forEach(b => {
|
||||
labels.push({ text: getLabelText(b), pos: this._bucketPositionPercent(b, rangeStart, rangeEnd, buckets.length) });
|
||||
});
|
||||
if (granularity === 'month') {
|
||||
let d = new Date(firstStart);
|
||||
while (d.getTime() <= maxTs && buckets.length < 240) {
|
||||
const start = d.getTime();
|
||||
const next = new Date(d.getFullYear(), d.getMonth() + 1, 1).getTime();
|
||||
buckets.push({ start, end: next, label: fmt(start), articles: 0, snapshots: 0 });
|
||||
d = new Date(next);
|
||||
}
|
||||
} else {
|
||||
const step = (buckets.length - 1) / (maxLabels - 1);
|
||||
for (let i = 0; i < maxLabels; i++) {
|
||||
const idx = Math.round(i * step);
|
||||
const b = buckets[idx];
|
||||
labels.push({ text: getLabelText(b), pos: this._bucketPositionPercent(b, rangeStart, rangeEnd, buckets.length) });
|
||||
for (let t = firstStart; t <= maxTs && buckets.length < 240; t += stepMs) {
|
||||
buckets.push({ start: t, end: t + stepMs, label: fmt(t), articles: 0, snapshots: 0 });
|
||||
}
|
||||
}
|
||||
return labels;
|
||||
},
|
||||
|
||||
_thinLabels(labels, minGapPercent) {
|
||||
if (!labels || labels.length <= 1) return labels;
|
||||
const gap = minGapPercent || 8;
|
||||
const result = [labels[0]];
|
||||
for (let i = 1; i < labels.length; i++) {
|
||||
if (labels[i].pos - result[result.length - 1].pos >= gap) {
|
||||
result.push(labels[i]);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
_buildDayMarkers(buckets, rangeStart, rangeEnd) {
|
||||
const seen = {};
|
||||
const markers = [];
|
||||
buckets.forEach(b => {
|
||||
const d = new Date(b.timestamp);
|
||||
const bp = _tz(d);
|
||||
const dayKey = `${bp.year}-${bp.month}-${bp.date}`;
|
||||
if (!seen[dayKey]) {
|
||||
seen[dayKey] = true;
|
||||
const np = _tz(new Date());
|
||||
const todayKey = `${np.year}-${np.month}-${np.date}`;
|
||||
const yp = _tz(new Date(Date.now() - 86400000));
|
||||
const yesterdayKey = `${yp.year}-${yp.month}-${yp.date}`;
|
||||
let label;
|
||||
const dateStr = d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE });
|
||||
if (dayKey === todayKey) {
|
||||
label = 'Heute, ' + dateStr;
|
||||
} else if (dayKey === yesterdayKey) {
|
||||
label = 'Gestern, ' + dateStr;
|
||||
} else {
|
||||
label = d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short', timeZone: TIMEZONE });
|
||||
// Eintraege zaehlen
|
||||
stripEntries.forEach(e => {
|
||||
const ets = new Date(e.timestamp || 0).getTime();
|
||||
// Linear-Suche, da Buckets sortiert; bei vielen Buckets ggf. Binary
|
||||
for (let i = 0; i < buckets.length; i++) {
|
||||
if (ets >= buckets[i].start && ets < buckets[i].end) {
|
||||
if (e.kind === 'article') buckets[i].articles++;
|
||||
else if (e.kind === 'snapshot') buckets[i].snapshots++;
|
||||
break;
|
||||
}
|
||||
const pos = this._bucketPositionPercent(b, rangeStart, rangeEnd, buckets.length);
|
||||
markers.push({ text: label, pos });
|
||||
}
|
||||
});
|
||||
return markers;
|
||||
|
||||
return buckets;
|
||||
},
|
||||
|
||||
_renderDetailPanel(bucket) {
|
||||
const type = this._currentIncidentType;
|
||||
const sorted = [...bucket.entries].sort((a, b) => {
|
||||
if (a.kind === 'snapshot' && b.kind !== 'snapshot') return -1;
|
||||
if (a.kind !== 'snapshot' && b.kind === 'snapshot') return 1;
|
||||
return new Date(b.timestamp || 0) - new Date(a.timestamp || 0);
|
||||
});
|
||||
_renderTimelineStrip(stripEntries) {
|
||||
const granularity = this._stripGranularity(stripEntries);
|
||||
const buckets = this._buildStripBuckets(stripEntries, granularity);
|
||||
if (buckets.length === 0) return '';
|
||||
|
||||
let entriesHtml = '';
|
||||
sorted.forEach(e => {
|
||||
if (e.kind === 'snapshot') {
|
||||
entriesHtml += this._renderSnapshotEntry(e.data);
|
||||
} else {
|
||||
entriesHtml += this._renderArticleEntry(e.data, type, 0);
|
||||
const maxCount = Math.max(1, ...buckets.map(b => b.articles));
|
||||
const win = this._activeStripWindow;
|
||||
|
||||
let html = '<div class="ht-strip">';
|
||||
html += '<div class="ht-strip-cells">';
|
||||
buckets.forEach(b => {
|
||||
const intensity = b.articles > 0 ? Math.min(1, b.articles / maxCount) : 0;
|
||||
const cls = ['ht-strip-cell'];
|
||||
if (b.snapshots > 0) cls.push('has-snapshot');
|
||||
if (b.articles === 0 && b.snapshots === 0) cls.push('empty');
|
||||
if (win && win.start === b.start && win.end === b.end) cls.push('active');
|
||||
const tip = `${b.label}: ${b.articles} Meldung${b.articles === 1 ? '' : 'en'}` +
|
||||
(b.snapshots > 0 ? ` + ${b.snapshots} Lagebericht${b.snapshots === 1 ? '' : 'e'}` : '');
|
||||
// data-Attribute statt JSON-String im onclick-Inline (vermeidet Quote-Konflikte bei Labels mit Komma/Anführungszeichen)
|
||||
html += `<div class="${cls.join(' ')}" style="--intensity:${intensity.toFixed(3)};" title="${UI.escape(tip)}" data-start="${b.start}" data-end="${b.end}" data-label="${UI.escape(b.label || '')}" onclick="App.handleStripClick(this)"></div>`;
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
// Wenige Datums-Labels unter dem Strip
|
||||
const labelCount = Math.min(buckets.length, 6);
|
||||
const stride = Math.max(1, Math.floor(buckets.length / labelCount));
|
||||
const labelTexts = [];
|
||||
for (let i = 0; i < buckets.length; i += stride) {
|
||||
const b = buckets[i];
|
||||
const d = new Date(b.start);
|
||||
let txt;
|
||||
if (granularity === 'hour') txt = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE });
|
||||
else if (granularity === 'day') txt = d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE });
|
||||
else if (granularity === 'week') txt = 'KW ' + d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE });
|
||||
else txt = d.toLocaleDateString('de-DE', { month: 'short', year: '2-digit', timeZone: TIMEZONE });
|
||||
labelTexts.push({ text: txt, idx: i });
|
||||
}
|
||||
if (labelTexts.length) {
|
||||
html += '<div class="ht-strip-labels" style="grid-template-columns: repeat(' + buckets.length + ', 1fr);">';
|
||||
const seen = new Set(labelTexts.map(l => l.idx));
|
||||
for (let i = 0; i < buckets.length; i++) {
|
||||
if (seen.has(i)) {
|
||||
const t = labelTexts.find(l => l.idx === i).text;
|
||||
html += `<div class="ht-strip-label">${UI.escape(t)}</div>`;
|
||||
} else {
|
||||
html += '<div></div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return `<div class="ht-detail-panel">
|
||||
<div class="ht-detail-header">
|
||||
<span class="ht-detail-title">${UI.escape(bucket.label)} (${bucket.entries.length} Eintr${bucket.entries.length === 1 ? 'ag' : 'äge'})</span>
|
||||
<button class="ht-detail-close" onclick="App.closeTimelineDetail()">×</button>
|
||||
</div>
|
||||
<div class="ht-detail-content">${entriesHtml}</div>
|
||||
</div>`;
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
return html;
|
||||
},
|
||||
|
||||
setTimelineFilter(filter) {
|
||||
this._timelineFilter = filter;
|
||||
this._activePointIndex = null;
|
||||
this._activeStripWindow = null;
|
||||
document.querySelectorAll('.ht-filter-btn').forEach(btn => {
|
||||
const isActive = btn.dataset.filter === filter;
|
||||
btn.classList.toggle('active', isActive);
|
||||
@@ -1399,7 +1347,7 @@ const App = {
|
||||
|
||||
setTimelineRange(range) {
|
||||
this._timelineRange = range;
|
||||
this._activePointIndex = null;
|
||||
this._activeStripWindow = null;
|
||||
document.querySelectorAll('.ht-range-btn').forEach(btn => {
|
||||
const isActive = btn.dataset.range === range;
|
||||
btn.classList.toggle('active', isActive);
|
||||
@@ -1408,20 +1356,34 @@ const App = {
|
||||
this.rerenderTimeline();
|
||||
},
|
||||
|
||||
openTimelineDetail(bucketIndex) {
|
||||
if (this._activePointIndex === bucketIndex) {
|
||||
this._activePointIndex = null;
|
||||
} else {
|
||||
this._activePointIndex = bucketIndex;
|
||||
/** Robuster Click-Handler fuer Heatmap-Cells (vermeidet Quote-Konflikte). */
|
||||
handleStripClick(el) {
|
||||
if (!el) return;
|
||||
const start = parseInt(el.dataset.start, 10);
|
||||
const end = parseInt(el.dataset.end, 10);
|
||||
const label = el.dataset.label || '';
|
||||
if (!isNaN(start) && !isNaN(end)) {
|
||||
this.openTimelineWindow(start, end, label);
|
||||
}
|
||||
this.rerenderTimeline();
|
||||
this._resizeTimelineTile();
|
||||
},
|
||||
|
||||
closeTimelineDetail() {
|
||||
this._activePointIndex = null;
|
||||
/** Klick auf Heatmap-Balken: Stream auf dieses Zeitfenster filtern.
|
||||
* Zweiter Klick auf denselben Balken hebt den Filter auf.
|
||||
*/
|
||||
openTimelineWindow(startMs, endMs, label) {
|
||||
const win = this._activeStripWindow;
|
||||
if (win && win.start === startMs && win.end === endMs) {
|
||||
this._activeStripWindow = null;
|
||||
} else {
|
||||
this._activeStripWindow = { start: startMs, end: endMs, label: label || '' };
|
||||
}
|
||||
this.rerenderTimeline();
|
||||
},
|
||||
|
||||
/** Strip-Filter aufheben (z.B. via Banner-Button). */
|
||||
clearStripWindow() {
|
||||
this._activeStripWindow = null;
|
||||
this.rerenderTimeline();
|
||||
this._resizeTimelineTile();
|
||||
},
|
||||
|
||||
_resizeTimelineTile() {
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren