AegisSight/AegisSight-Monitor
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Dashboard: GridStack durch Tab-Navigation ersetzen

Quellcode durchsuchen 
Der Monitor-Dashboard zeigte bisher alle sechs Kacheln gleichzeitig in
einem GridStack-Layout (Drag/Resize, je Kachel eigenes Scrolling). Nutzer-
wunsch: Analog zur Lagebild-Seite nur ein Tab-Panel gleichzeitig, maximiert
auf volle Breite, Seiten-Scroll statt interne Scrollbars.

Aenderungen:
- dashboard.html: Layout-Toolbar + grid-stack-Wrapper entfernt; neue tab-nav
  mit 6 Buttons + tab-panels mit 6 Panels. GridStack CDN-Links raus.
- layout.js: GridStack-Init/toggleTile/reset komplett entfernt. Neu:
  switchTab(tabId) + restoreTabFor(incidentId) mit localStorage-Persistenz
  pro Lage osint_tab_id. applyTypeLabels fuer adhoc vs. research. Legacy-
  Methoden sind No-Op-Stubs.
- app.js: renderIncidentDetail ruft LayoutManager.restoreTabFor und
  applyTypeLabels auf. openContentModal-Trigger aus Card-Titeln raus.
  Tile-Resize-Bloecke fuer Quellen und Timeline entfernt.
- components.js: Telegram-Pills bekommen Suffix Telegram-Link, wenn die
  URL auf t.me verweist.
- style.css: grid-stack/layout-toggle Klassen raus; neue tab-nav/tab-btn/
  tab-panel Klassen. Internes Scrolling entfernt. map-container 600px.

Alte osint_layout-Eintraege werden ignoriert.
Dieser Commit ist enthalten in:
claude-dev
2026-04-18 22:34:36 +00:00
Ursprung 3b9e9e25c2
Commit e15ed0c21e
5 geänderte Dateien mit 206 neuen und 571 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

165
src/static/css/style.css
Datei anzeigen

@@ -2136,7 +2136,7 @@ a.dev-source-pill:hover {
}
/* === Blur for First Refresh === */
.grid-stack.blurred .grid-stack-item-content {
.tab-panels.blurred .tab-panel {
filter: blur(8px);
pointer-events: none;
user-select: none;
@@ -3989,74 +3989,55 @@ a.dev-source-pill:hover {
box-shadow: var(--shadow-sm);
}
/* === gridstack Dashboard-Layout === */
.grid-stack {
/* === Tab-basiertes Dashboard-Layout === */
.tab-nav {
display: flex;
gap: 4px;
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
padding: 0 4px;
}
.tab-btn {
padding: 10px 18px;
background: transparent;
border: none;
color: var(--text-secondary);
font-family: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover {
color: var(--text-primary);
}
.tab-btn.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.tab-panels {
display: block;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.tab-panel > .card {
height: auto;
display: block;
}
.tab-panel .map-container {
min-height: 600px;
}
.tab-panel .ht-timeline-container {
min-height: 200px;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
overflow: hidden;
}
.grid-stack-item-content > .card {
height: 100%;
display: flex;
flex-direction: column;
}
.grid-stack-item-content .incident-analysis-summary > #summary-content,
.grid-stack-item-content .incident-analysis-factcheck > .factcheck-list,
.grid-stack-item-content #timeline,
.grid-stack-item-content #zusammenfassung-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--text-disabled) transparent;
}
.grid-stack-item-content .incident-analysis-summary > #summary-content::-webkit-scrollbar,
.grid-stack-item-content .incident-analysis-factcheck > .factcheck-list::-webkit-scrollbar,
.grid-stack-item-content #timeline::-webkit-scrollbar,
.grid-stack-item-content #zusammenfassung-content::-webkit-scrollbar { width: 6px; }
.grid-stack-item-content .incident-analysis-summary > #summary-content::-webkit-scrollbar-track,
.grid-stack-item-content .incident-analysis-factcheck > .factcheck-list::-webkit-scrollbar-track,
.grid-stack-item-content #timeline::-webkit-scrollbar-track,
.grid-stack-item-content #zusammenfassung-content::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
.grid-stack-item-content .incident-analysis-summary > #summary-content::-webkit-scrollbar-thumb,
.grid-stack-item-content .incident-analysis-factcheck > .factcheck-list::-webkit-scrollbar-thumb,
.grid-stack-item-content #timeline::-webkit-scrollbar-thumb,
.grid-stack-item-content #zusammenfassung-content::-webkit-scrollbar-thumb { background: var(--text-disabled); border-radius: 3px; }
.grid-stack-item-content .incident-analysis-summary > #summary-content::-webkit-scrollbar-thumb:hover,
.grid-stack-item-content .incident-analysis-factcheck > .factcheck-list::-webkit-scrollbar-thumb:hover,
.grid-stack-item-content #timeline::-webkit-scrollbar-thumb:hover,
.grid-stack-item-content #zusammenfassung-content::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
/* Quellenübersicht: Kachel wächst beim Aufklappen via resizeTileToContent */
.grid-stack-item-content #source-overview-content {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--text-disabled) transparent;
}
.grid-stack-item-content #source-overview-content::-webkit-scrollbar { width: 6px; }
.grid-stack-item-content #source-overview-content::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
.grid-stack-item-content #source-overview-content::-webkit-scrollbar-thumb { background: var(--text-disabled); border-radius: 3px; }
.grid-stack-item-content #source-overview-content::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
.grid-stack-item-content .incident-analysis-summary,
.grid-stack-item-content .incident-analysis-factcheck {
max-height: none;
overflow: hidden;
}
.grid-stack .card-header {
cursor: grab;
}
.tab-panels.blurred { filter: blur(4px); pointer-events: none; }
.grid-stack .card-header:active {
cursor: grabbing;
@@ -4073,56 +4054,6 @@ a.dev-source-pill:hover {
opacity: 0.5;
}
/* Layout-Toolbar */
.layout-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-md) 0;
}
.layout-toggles {
display: flex;
gap: var(--sp-sm);
}
.layout-toggle-btn {
padding: var(--sp-xs) var(--sp-lg);
border-radius: var(--radius);
border: 1px solid var(--border);
background: transparent;
color: var(--text-disabled);
font-size: 12px;
font-family: var(--font-body);
cursor: pointer;
transition: all 0.2s;
text-decoration: line-through;
}
.layout-toggle-btn.active {
background: var(--tint-accent);
color: var(--accent);
border-color: var(--accent);
text-decoration: none;
}
.layout-toggle-btn:hover {
border-color: var(--accent);
}
/* Temporäre Messklasse: hebt alle Höhenbeschränkungen auf */
.grid-stack-item.gs-measuring {
height: auto !important;
}
.gs-measuring > .grid-stack-item-content {
height: auto !important;
position: relative !important;
}
.gs-measuring .grid-stack-item-content > .card {
height: auto !important;
}
/* === Barrierefreiheit (A11y) === */

183
src/static/dashboard.html
Datei anzeigen

@@ -10,7 +10,6 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack.min.css" rel="stylesheet">
<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">
@@ -190,131 +189,106 @@
<span class="progress-mini-timer" id="progress-mini-timer"></span>
</div>
<!-- Layout-Toolbar -->
<div class="layout-toolbar" id="layout-toolbar" style="display:none;">
<div class="layout-toggles">
<button class="layout-toggle-btn active" data-tile="zusammenfassung" onclick="LayoutManager.toggleTile('zusammenfassung')" aria-pressed="true">Zusammenfassung</button>
<button class="layout-toggle-btn active" data-tile="lagebild" onclick="LayoutManager.toggleTile('lagebild')" aria-pressed="true">Lagebild</button>
<button class="layout-toggle-btn active" data-tile="faktencheck" onclick="LayoutManager.toggleTile('faktencheck')" aria-pressed="true">Faktencheck</button>
<button class="layout-toggle-btn active" data-tile="quellen" onclick="LayoutManager.toggleTile('quellen')" aria-pressed="true">Quellen</button>
<button class="layout-toggle-btn active" data-tile="timeline" onclick="LayoutManager.toggleTile('timeline')" aria-pressed="true">Timeline</button>
<button class="layout-toggle-btn active" data-tile="karte" onclick="LayoutManager.toggleTile('karte')" aria-pressed="true">Karte</button>
</div>
<button class="btn btn-secondary btn-small" onclick="LayoutManager.reset()">Layout zurücksetzen</button>
<!-- Tab-Navigation -->
<div class="tab-nav" id="tab-nav" style="display:none;">
<button class="tab-btn active" data-tab="zusammenfassung">Neueste Entwicklungen</button>
<button class="tab-btn" data-tab="lagebild">Lagebild</button>
<button class="tab-btn" data-tab="timeline">Ereignis-Timeline</button>
<button class="tab-btn" data-tab="karte">Geografische Verteilung</button>
<button class="tab-btn" data-tab="faktencheck">Faktencheck</button>
<button class="tab-btn" data-tab="quellen">Quellenübersicht</button>
</div>
<!-- gridstack Dashboard-Grid -->
<div class="grid-stack">
<div class="grid-stack-item" gs-id="zusammenfassung" gs-x="0" gs-y="0" gs-w="12" gs-h="2" gs-min-w="4" gs-min-h="2">
<div class="grid-stack-item-content">
<div class="card" id="zusammenfassung-card">
<div class="card-header">
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Zusammenfassung', 'zusammenfassung-content')">Zusammenfassung</div>
</div>
<div id="zusammenfassung-content">
<div id="zusammenfassung-text" class="summary-text" style="padding:8px 16px;"></div>
</div>
<!-- Tab-Panels -->
<div class="tab-panels">
<div class="tab-panel active" id="panel-zusammenfassung">
<div class="card" id="zusammenfassung-card">
<div class="card-header">
<div class="card-title">Zusammenfassung</div>
</div>
<div id="zusammenfassung-content">
<div id="zusammenfassung-text" class="summary-text" style="padding:8px 16px;"></div>
</div>
</div>
</div>
<div class="grid-stack-item" gs-id="lagebild" gs-x="0" gs-y="2" gs-w="6" gs-h="4" gs-min-w="4" gs-min-h="4">
<div class="grid-stack-item-content">
<div class="card incident-analysis-summary">
<div class="card-header">
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Lagebild', 'summary-content')">Lagebild</div>
<span class="lagebild-timestamp" id="lagebild-timestamp"></span>
</div>
<div id="summary-content">
<div id="summary-text" class="summary-text"></div>
</div>
<div class="tab-panel" id="panel-lagebild">
<div class="card incident-analysis-summary">
<div class="card-header">
<div class="card-title">Lagebild</div>
<span class="lagebild-timestamp" id="lagebild-timestamp"></span>
</div>
<div id="summary-content">
<div id="summary-text" class="summary-text"></div>
</div>
</div>
</div>
<div class="grid-stack-item" gs-id="faktencheck" gs-x="6" gs-y="0" gs-w="6" gs-h="4" gs-min-w="4" gs-min-h="4">
<div class="grid-stack-item-content">
<div class="card incident-analysis-factcheck" id="factcheck-card">
<div class="card-header">
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Faktencheck', 'factcheck-list')">Faktencheck <span class="info-icon" data-tooltip="Gesichert/Bestätigt = durch mehrere unabhängige Quellen belegt.&#10;&#10;Unbestätigt/Ungeprüft = noch nicht ausreichend verifiziert.&#10;&#10;Widerlegt/Umstritten = Quellen widersprechen sich."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></div>
<div class="fc-filter-bar" id="fc-filters"></div>
</div>
<div class="factcheck-list" id="factcheck-list">
<div class="empty-state" style="padding:20px;">
<div class="empty-state-text">Noch keine Fakten geprüft</div>
<div class="tab-panel" id="panel-timeline">
<div class="card timeline-card">
<div class="card-header">
<div class="card-title">Ereignis-Timeline</div>
<div class="ht-controls">
<div class="ht-filter-group">
<button class="ht-filter-btn active" data-filter="all" onclick="App.setTimelineFilter('all')" aria-pressed="true">Alle</button>
<button class="ht-filter-btn" data-filter="articles" onclick="App.setTimelineFilter('articles')" aria-pressed="false">Meldungen</button>
<button class="ht-filter-btn" data-filter="snapshots" onclick="App.setTimelineFilter('snapshots')" aria-pressed="false">Lageberichte</button>
</div>
</div>
</div>
</div>
</div>
<div class="grid-stack-item" gs-id="quellen" gs-x="0" gs-y="4" gs-w="12" gs-h="2" gs-min-w="6" gs-min-h="2">
<div class="grid-stack-item-content">
<div class="card source-overview-card">
<div class="card-header source-overview-header-toggle" onclick="App.toggleSourceOverview()" role="button" tabindex="0" aria-expanded="false">
<span class="source-overview-chevron" id="source-overview-chevron" title="Aufklappen" aria-hidden="true">&#9656;</span>
<div class="card-title clickable">Quellenübersicht</div>
<button class="btn btn-secondary btn-small source-detail-btn" onclick="event.stopPropagation(); openContentModal('Quellenübersicht', 'source-overview-content')">Detailansicht</button>
</div>
<div class="source-overview-subheader" onclick="App.toggleSourceOverview()" role="button">
<span class="source-overview-header-stats" id="source-overview-header-stats"></span>
</div>
<div id="source-overview-content" style="display:none;"></div>
</div>
</div>
</div>
<div class="grid-stack-item" gs-id="timeline" gs-x="0" gs-y="5" gs-w="12" gs-h="4" gs-min-w="6" gs-min-h="4">
<div class="grid-stack-item-content">
<div class="card timeline-card">
<div class="card-header">
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Ereignis-Timeline', 'timeline')">Ereignis-Timeline</div>
<div class="ht-controls">
<div class="ht-filter-group">
<button class="ht-filter-btn active" data-filter="all" onclick="App.setTimelineFilter('all')" aria-pressed="true">Alle</button>
<button class="ht-filter-btn" data-filter="articles" onclick="App.setTimelineFilter('articles')" aria-pressed="false">Meldungen</button>
<button class="ht-filter-btn" data-filter="snapshots" onclick="App.setTimelineFilter('snapshots')" aria-pressed="false">Lageberichte</button>
</div>
<span class="ht-count" id="article-count"></span>
<div class="ht-range-group">
<button class="ht-range-btn" data-range="24h" onclick="App.setTimelineRange('24h')" aria-pressed="false">24h</button>
<button class="ht-range-btn" data-range="7d" onclick="App.setTimelineRange('7d')" aria-pressed="false">7T</button>
<button class="ht-range-btn active" data-range="all" onclick="App.setTimelineRange('all')" aria-pressed="true">Alles</button>
</div>
<label for="timeline-search" class="sr-only">Timeline durchsuchen</label>
<input type="text" id="timeline-search" class="timeline-filter-input" placeholder="Suche..." oninput="App.debouncedRerenderTimeline()">
<span class="ht-count" id="article-count"></span>
<div class="ht-range-group">
<button class="ht-range-btn" data-range="24h" onclick="App.setTimelineRange('24h')" aria-pressed="false">24h</button>
<button class="ht-range-btn" data-range="7d" onclick="App.setTimelineRange('7d')" aria-pressed="false">7T</button>
<button class="ht-range-btn active" data-range="all" onclick="App.setTimelineRange('all')" aria-pressed="true">Alles</button>
</div>
<label for="timeline-search" class="sr-only">Timeline durchsuchen</label>
<input type="text" id="timeline-search" class="timeline-filter-input" placeholder="Suche..." oninput="App.debouncedRerenderTimeline()">
</div>
<div id="timeline" class="ht-timeline-container">
<div class="ht-empty">Noch keine Meldungen</div>
</div>
<div id="timeline" class="ht-timeline-container">
<div class="ht-empty">Noch keine Meldungen</div>
</div>
</div>
</div>
<div class="tab-panel" id="panel-karte">
<div class="card map-card">
<div class="card-header">
<div class="card-title">Geografische Verteilung</div>
<span class="map-stats" id="map-stats"></span>
<div class="card-header-actions">
<button class="btn btn-secondary btn-small" id="geoparse-btn" onclick="App.triggerGeoparse()" title="Orte aus Artikeln einlesen">Orte einlesen</button>
</div>
</div>
<div class="map-container" id="map-container">
<div class="map-empty" id="map-empty">Keine Orte erkannt</div>
</div>
</div>
</div>
<div class="tab-panel" id="panel-faktencheck">
<div class="card incident-analysis-factcheck" id="factcheck-card">
<div class="card-header">
<div class="card-title">Faktencheck <span class="info-icon" data-tooltip="Gesichert/Bestätigt = durch mehrere unabhängige Quellen belegt.&#10;&#10;Unbestätigt/Ungeprüft = noch nicht ausreichend verifiziert.&#10;&#10;Widerlegt/Umstritten = Quellen widersprechen sich."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></div>
<div class="fc-filter-bar" id="fc-filters"></div>
</div>
<div class="factcheck-list" id="factcheck-list">
<div class="empty-state" style="padding:20px;">
<div class="empty-state-text">Noch keine Fakten geprüft</div>
</div>
</div>
</div>
</div>
<div class="grid-stack-item" gs-id="karte" gs-x="0" gs-y="9" gs-w="12" gs-h="8" gs-min-w="6" gs-min-h="3">
<div class="grid-stack-item-content">
<div class="card map-card">
<div class="card-header">
<div class="card-title">Geografische Verteilung</div>
<span class="map-stats" id="map-stats"></span>
<div class="card-header-actions">
<button class="btn btn-secondary btn-small" id="geoparse-btn" onclick="App.triggerGeoparse()" title="Orte aus Artikeln einlesen">Orte einlesen</button>
<button class="btn btn-secondary btn-small map-expand-btn" id="map-expand-btn" onclick="UI.toggleMapFullscreen()" title="Vollbild" aria-label="Karte im Vollbild anzeigen">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
</button>
</div>
</div>
<div class="map-container" id="map-container">
<div class="map-empty" id="map-empty">Keine Orte erkannt</div>
</div>
<div class="tab-panel" id="panel-quellen">
<div class="card source-overview-card">
<div class="card-header">
<div class="card-title">Quellenübersicht</div>
<span class="source-overview-header-stats" id="source-overview-header-stats"></span>
</div>
<div id="source-overview-content"></div>
</div>
</div>
</div>
<!-- Parkplatz für ausgeblendete Kacheln -->
<div id="tile-parking" style="display:none;"></div>
</div>
</main>
</div>
@@ -646,7 +620,6 @@
<div class="toast-container" id="toast-container" aria-live="polite" aria-atomic="true"></div>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack-all.js"></script>
<script src="/static/vendor/leaflet.js"></script>
<script src="/static/vendor/leaflet.markercluster.js"></script>
<script src="/static/js/api.js?v=20260316c"></script>

93
src/static/js/app.js
Datei anzeigen

@@ -716,7 +716,7 @@ const App = {
// GridStack-Animation deaktivieren und Scroll komplett sperren
// bis alle Tile-Resize-Operationen (doppeltes rAF) abgeschlossen sind
var gridEl = document.querySelector('.grid-stack');
var gridEl = document.querySelector('.tab-panels');
if (gridEl) gridEl.classList.remove('grid-stack-animate');
var scrollLock = function() { mc.scrollTop = 0; };
mc.addEventListener('scroll', scrollLock);
@@ -732,7 +732,7 @@ const App = {
if (prevOverlay) prevOverlay.style.display = 'none';
const prevMini = document.getElementById('progress-mini');
if (prevMini) prevMini.style.display = 'none';
const grid = document.querySelector('.grid-stack');
const grid = document.querySelector('.tab-panels');
if (grid) grid.classList.remove('blurred');
if (isRefreshing) {
@@ -825,10 +825,11 @@ const App = {
// Kachel-Label: 'Recherchebericht' fuer Recherche-Lagen, 'Lagebild' fuer Live-Monitoring
const _lbLabel = incident.type === 'research' ? 'Recherchebericht' : 'Lagebild';
const _cardTitle = document.querySelector('[gs-id="lagebild"] .card-title');
if (_cardTitle) { _cardTitle.textContent = _lbLabel; _cardTitle.setAttribute("onclick", "openContentModal('" + _lbLabel + "', 'summary-content')"); }
const _toggleBtn = document.querySelector('.layout-toggle-btn[data-tile="lagebild"]');
if (_toggleBtn) _toggleBtn.textContent = _lbLabel;
const _cardTitle = document.querySelector('#panel-lagebild .card-title');
if (_cardTitle) _cardTitle.textContent = _lbLabel;
if (typeof LayoutManager !== 'undefined' && typeof LayoutManager.applyTypeLabels === 'function') {
LayoutManager.applyTypeLabels(incident.type);
}
{ const _nt = document.querySelector("#inc-notify-summary"); if (_nt) { const _ns = _nt.closest("label")?.querySelector(".toggle-text"); if (_ns) _ns.textContent = "Neues " + _lbLabel; } }
// Archiv-Button Text
@@ -855,7 +856,6 @@ const App = {
if (incident.type === 'research') {
// Recherche: ZUSAMMENFASSUNG-Sektion aus Briefing extrahieren
if (zusammenfassungTitle) zusammenfassungTitle.textContent = 'Zusammenfassung';
if (zusammenfassungTitle) zusammenfassungTitle.setAttribute('onclick', "openContentModal('Zusammenfassung', 'zusammenfassung-content')");
if (incident.summary) {
const { zusammenfassung, remaining } = UI.extractZusammenfassung(incident.summary);
if (zusammenfassung) {
@@ -874,7 +874,6 @@ const App = {
} else {
// Live-Monitoring (adhoc): Kachel zeigt "Neueste Entwicklungen" (max 8 Bullets mit Zeitstempel)
if (zusammenfassungTitle) zusammenfassungTitle.textContent = 'Neueste Entwicklungen';
if (zusammenfassungTitle) zusammenfassungTitle.setAttribute('onclick', "openContentModal('Neueste Entwicklungen', 'zusammenfassung-content')");
if (zusammenfassungCard) zusammenfassungCard.style.display = '';
const devText = (incident.latest_developments || '').trim();
if (devText) {
@@ -949,30 +948,18 @@ const App = {
const _soSources = new Set(articles.map(a => a.source).filter(Boolean));
_soStats.textContent = articles.length + " Artikel aus " + _soSources.size + " Quellen";
}
// Kachel an Inhalt anpassen
if (typeof LayoutManager !== 'undefined' && LayoutManager._grid) {
if (sourceOverview.style.display !== 'none') {
// Offen → an Inhalt anpassen
requestAnimationFrame(() => requestAnimationFrame(() => {
LayoutManager.resizeTileToContent('quellen');
}));
} else {
// Geschlossen → einheitliche Default-Höhe
const defaults = LayoutManager.DEFAULT_LAYOUT.find(d => d.id === 'quellen');
if (defaults) {
const node = LayoutManager._grid.engine.nodes.find(
n => n.el && n.el.getAttribute('gs-id') === 'quellen'
);
if (node) LayoutManager._grid.update(node.el, { h: defaults.h });
}
}
}
// Im Tab-Modus wird die Kachel vom Seiten-Layout bestimmt — kein Resize noetig
}
// Timeline - Artikel + Snapshots zwischenspeichern und rendern
this._currentArticles = articles;
this._currentSnapshots = snapshots || [];
this._currentIncidentType = incident.type;
// Tab-Auswahl: gemerkt pro Lage (localStorage), Default = erster Tab
if (typeof LayoutManager !== 'undefined' && typeof LayoutManager.restoreTabFor === 'function') {
LayoutManager.restoreTabFor(incident.id);
}
this._timelineFilter = 'all';
this._timelineRange = 'all';
this._activePointIndex = null;
@@ -1360,35 +1347,15 @@ const App = {
},
_resizeTimelineTile() {
if (typeof LayoutManager === 'undefined' || !LayoutManager._grid) return;
// Tab-Modus: Kein internes Resize noetig, Panel waechst mit Inhalt.
// Wir scrollen lediglich ein offenes Detail in den sichtbaren Bereich.
requestAnimationFrame(() => { requestAnimationFrame(() => {
// Prüfen ob Detail-Panel oder expandierter Eintrag offen ist
const hasDetail = document.querySelector('.ht-detail-panel') !== null;
const hasExpanded = document.querySelector('.timeline-card .vt-entry.expanded') !== null;
if (hasDetail || hasExpanded) {
LayoutManager.resizeTileToContent('timeline');
} else {
// Zurück auf Default-Höhe
const defaults = LayoutManager.DEFAULT_LAYOUT.find(d => d.id === 'timeline');
if (defaults) {
const node = LayoutManager._grid.engine.nodes.find(
n => n.el && n.el.getAttribute('gs-id') === 'timeline'
);
if (node) {
LayoutManager._grid.update(node.el, { h: defaults.h });
LayoutManager._debouncedSave();
}
}
}
// Scroll in Sicht
const card = document.querySelector('.timeline-card');
const main = document.querySelector('.main-content');
if (!card || !main) return;
if (!card) return;
const cardBottom = card.getBoundingClientRect().bottom;
const mainBottom = main.getBoundingClientRect().bottom;
if (cardBottom > mainBottom) {
main.scrollBy({ top: cardBottom - mainBottom + 16, behavior: document.documentElement.dataset.a11yMotion ? 'instant' : 'smooth' });
const viewBottom = window.innerHeight;
if (cardBottom > viewBottom) {
window.scrollBy({ top: cardBottom - viewBottom + 16, behavior: document.documentElement.dataset.a11yMotion ? 'instant' : 'smooth' });
}
}); });
},
@@ -2669,27 +2636,7 @@ async handleRefresh() {
// aria-expanded auf dem Header-Toggle synchronisieren
const header = chevron ? chevron.closest('[role="button"]') : null;
if (header) header.setAttribute('aria-expanded', String(isHidden));
// gridstack-Kachel an Inhalt anpassen (doppelter rAF für vollständiges Layout)
if (typeof LayoutManager !== 'undefined' && LayoutManager._grid) {
if (isHidden) {
// Aufgeklappt → Inhalt muss erst layouten
requestAnimationFrame(() => requestAnimationFrame(() => {
LayoutManager.resizeTileToContent('quellen');
}));
} else {
// Zugeklappt → auf Default-Höhe zurück
const defaults = LayoutManager.DEFAULT_LAYOUT.find(d => d.id === 'quellen');
if (defaults) {
const node = LayoutManager._grid.engine.nodes.find(
n => n.el && n.el.getAttribute('gs-id') === 'quellen'
);
if (node) {
LayoutManager._grid.update(node.el, { h: defaults.h });
LayoutManager._debouncedSave();
}
}
}
}
// Tab-Modus: Panel waechst mit Inhalt, kein Resize noetig
},
toggleGroup(domain) {

16
src/static/js/components.js
Datei anzeigen

@@ -335,7 +335,7 @@ const UI = {
if (state.isFirst) {
overlay.classList.add('blocking');
// Apply blur to grid
const grid = document.querySelector('.grid-stack');
const grid = document.querySelector('.tab-panels');
if (grid) grid.classList.add('blurred');
} else {
overlay.classList.remove('blocking');
@@ -465,7 +465,7 @@ const UI = {
if (incidentId === App.currentIncidentId) {
// Remove blur
const grid = document.querySelector('.grid-stack');
const grid = document.querySelector('.tab-panels');
if (grid) grid.classList.remove('blurred');
const overlay = document.getElementById('progress-overlay');
@@ -559,7 +559,7 @@ const UI = {
if (!incidentId) incidentId = App.currentIncidentId;
// Remove blur
const grid = document.querySelector('.grid-stack');
const grid = document.querySelector('.tab-panels');
if (grid) grid.classList.remove('blurred');
if (incidentId === App.currentIncidentId) {
@@ -787,11 +787,15 @@ const UI = {
const buildPill = (src, fallbackName) => {
const displayName = src ? (src.name || fallbackName) : fallbackName;
const esc = this.escape(displayName);
const url = (src && src.url) || '';
const isTelegram = /^https?:\/\/t\.me\//i.test(url);
const label = isTelegram ? displayName + ' (Telegram-Link)' : displayName;
const esc = this.escape(label);
const titleEsc = this.escape(displayName);
if (src && src.url) {
return `<a href="${this.escape(src.url)}" target="_blank" rel="noopener" class="dev-source-pill" title="${esc}">${esc}</a>`;
return `<a href="${this.escape(src.url)}" target="_blank" rel="noopener" class="dev-source-pill" title="${titleEsc}">${esc}</a>`;
}
return `<span class="dev-source-pill" title="${esc}">${esc}</span>`;
return `<span class="dev-source-pill" title="${titleEsc}">${esc}</span>`;
};
const cards = bulletLines.map(line => {

320
src/static/js/layout.js
Datei anzeigen

@@ -1,295 +1,75 @@
/**
* LayoutManager: Drag & Resize Dashboard-Layout mit gridstack.js
* Persistenz über localStorage, Reset auf Standard-Layout möglich.
* LayoutManager: Tab-Navigation fuer das Monitor-Dashboard.
* Nur ein Tab-Panel gleichzeitig sichtbar, pro Lage gemerkt in localStorage.
*/
const LayoutManager = {
_grid: null,
_storageKey: 'osint_layout',
TAB_ORDER: ['zusammenfassung', 'lagebild', 'timeline', 'karte', 'faktencheck', 'quellen'],
_currentIncidentId: null,
_initialized: false,
_saveTimeout: null,
_hiddenTiles: {},
DEFAULT_LAYOUT: [
{ id: 'zusammenfassung', x: 0, y: 0, w: 12, h: 2, minW: 4, minH: 2 },
{ id: 'lagebild', x: 0, y: 2, w: 6, h: 4, minW: 4, minH: 4 },
{ id: 'faktencheck', x: 6, y: 0, w: 6, h: 4, minW: 4, minH: 4 },
{ id: 'quellen', x: 0, y: 4, w: 12, h: 2, minW: 6, minH: 2 },
{ id: 'timeline', x: 0, y: 5, w: 12, h: 4, minW: 6, minH: 4 },
{ id: 'karte', x: 0, y: 9, w: 12, h: 8, minW: 6, minH: 3 },
],
TILE_MAP: {
zusammenfassung: '#zusammenfassung-card',
lagebild: '.incident-analysis-summary',
faktencheck: '.incident-analysis-factcheck',
quellen: '.source-overview-card',
timeline: '.timeline-card',
karte: '.map-card',
},
init() {
if (this._initialized) return;
const nav = document.getElementById('tab-nav');
if (!nav) return;
const container = document.querySelector('.grid-stack');
if (!container) return;
this._grid = GridStack.init({
column: 12,
cellHeight: 80,
margin: 12,
animate: true,
handle: '.card-header',
float: false,
disableOneColumnMode: true,
}, container);
const saved = this._load();
if (saved) {
// Migration: Neue Kacheln ergaenzen die in alten Layouts fehlen
this.DEFAULT_LAYOUT.forEach(def => {
if (!saved.find(s => s.id === def.id)) {
saved.unshift({ id: def.id, x: def.x, y: def.y, w: def.w, h: def.h, visible: true });
}
nav.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
const tab = btn.getAttribute('data-tab');
if (tab) this.switchTab(tab);
});
this._applyLayout(saved);
}
this._grid.on('change', () => {
this._debouncedSave();
// Leaflet-Map bei Resize invalidieren
if (typeof UI !== 'undefined') UI.invalidateMap();
});
const toolbar = document.getElementById('layout-toolbar');
if (toolbar) toolbar.style.display = 'flex';
this._syncToggles();
nav.style.display = '';
this._initialized = true;
},
_applyLayout(layout) {
if (!this._grid) return;
switchTab(tabId, save = true) {
if (!this.TAB_ORDER.includes(tabId)) tabId = 'zusammenfassung';
this._hiddenTiles = {};
layout.forEach(item => {
const el = this._grid.engine.nodes.find(n => n.el && n.el.getAttribute('gs-id') === item.id);
if (!el) return;
if (item.visible === false) {
this._hiddenTiles[item.id] = item;
// Card in tile-parking retten bevor Widget entfernt wird
const selector = this.TILE_MAP[item.id];
if (selector) {
const cardEl = el.el.querySelector(selector);
if (cardEl) {
const parking = document.getElementById("tile-parking");
if (parking) parking.appendChild(cardEl);
}
}
this._grid.removeWidget(el.el, true, false);
} else {
this._grid.update(el.el, { x: item.x, y: item.y, w: item.w, h: item.h });
}
document.querySelectorAll('#tab-nav .tab-btn').forEach(b => {
b.classList.toggle('active', b.getAttribute('data-tab') === tabId);
});
document.querySelectorAll('.tab-panel').forEach(p => {
p.classList.toggle('active', p.id === 'panel-' + tabId);
});
this._syncToggles();
// Leaflet-Karte: invalidateSize nach Panel-Wechsel, damit Tiles korrekt rendern
if (tabId === 'karte' && typeof UI !== 'undefined' && UI._map) {
setTimeout(() => { try { UI._map.invalidateSize(); } catch (e) { /* ignore */ } }, 50);
}
if (save && this._currentIncidentId != null) {
try {
localStorage.setItem('osint_tab_' + this._currentIncidentId, tabId);
} catch (e) { /* quota */ }
}
},
save() {
if (!this._grid) return;
const items = [];
this._grid.engine.nodes.forEach(node => {
const id = node.el ? node.el.getAttribute('gs-id') : null;
if (!id) return;
items.push({
id, x: node.x, y: node.y, w: node.w, h: node.h, visible: true,
});
});
Object.keys(this._hiddenTiles).forEach(id => {
items.push({ ...this._hiddenTiles[id], visible: false });
});
restoreTabFor(incidentId) {
this._currentIncidentId = incidentId;
let target = 'zusammenfassung';
try {
localStorage.setItem(this._storageKey, JSON.stringify(items));
} catch (e) { /* quota */ }
const saved = localStorage.getItem('osint_tab_' + incidentId);
if (saved && this.TAB_ORDER.includes(saved)) target = saved;
} catch (e) { /* ignore */ }
this.switchTab(target, false);
},
_debouncedSave() {
clearTimeout(this._saveTimeout);
this._saveTimeout = setTimeout(() => this.save(), 300);
/** Tab-Labels je Incident-Typ anpassen (adhoc vs. research). */
applyTypeLabels(incidentType) {
const isResearch = incidentType === 'research';
const zf = document.querySelector('#tab-nav .tab-btn[data-tab="zusammenfassung"]');
const lb = document.querySelector('#tab-nav .tab-btn[data-tab="lagebild"]');
if (zf) zf.textContent = isResearch ? 'Zusammenfassung' : 'Neueste Entwicklungen';
if (lb) lb.textContent = isResearch ? 'Recherchebericht' : 'Lagebild';
},
_load() {
try {
const raw = localStorage.getItem(this._storageKey);
if (!raw) return null;
const parsed = JSON.parse(raw);
if (!Array.isArray(parsed) || parsed.length === 0) return null;
return parsed;
} catch (e) {
return null;
}
},
toggleTile(tileId) {
if (!this._grid) return;
const selector = this.TILE_MAP[tileId];
if (!selector) return;
if (this._hiddenTiles[tileId]) {
// Kachel einblenden
const cfg = this._hiddenTiles[tileId];
delete this._hiddenTiles[tileId];
const cardEl = document.querySelector(selector);
if (!cardEl) return;
// Wrapper erstellen
const wrapper = document.createElement('div');
wrapper.className = 'grid-stack-item';
wrapper.setAttribute('gs-id', tileId);
wrapper.setAttribute('gs-x', cfg.x);
wrapper.setAttribute('gs-y', cfg.y);
wrapper.setAttribute('gs-w', cfg.w);
wrapper.setAttribute('gs-h', cfg.h);
wrapper.setAttribute('gs-min-w', cfg.minW || '');
wrapper.setAttribute('gs-min-h', cfg.minH || '');
const content = document.createElement('div');
content.className = 'grid-stack-item-content';
content.appendChild(cardEl);
wrapper.appendChild(content);
this._grid.addWidget(wrapper);
} else {
// Kachel ausblenden
const node = this._grid.engine.nodes.find(
n => n.el && n.el.getAttribute('gs-id') === tileId
);
if (!node) return;
const defaults = this.DEFAULT_LAYOUT.find(d => d.id === tileId);
this._hiddenTiles[tileId] = {
id: tileId,
x: node.x, y: node.y, w: node.w, h: node.h,
minW: defaults ? defaults.minW : 4,
minH: defaults ? defaults.minH : 2,
visible: false,
};
// Card aus dem Widget retten bevor es entfernt wird
const cardEl = node.el.querySelector(selector);
if (cardEl) {
// Temporär im incident-view parken (unsichtbar)
const parking = document.getElementById('tile-parking');
if (parking) parking.appendChild(cardEl);
}
this._grid.removeWidget(node.el, true, false);
}
this._syncToggles();
this.save();
},
_syncToggles() {
document.querySelectorAll('.layout-toggle-btn').forEach(btn => {
const tileId = btn.getAttribute('data-tile');
const isHidden = !!this._hiddenTiles[tileId];
btn.classList.toggle('active', !isHidden);
btn.setAttribute('aria-pressed', String(!isHidden));
});
},
reset() {
localStorage.removeItem(this._storageKey);
// Cards einsammeln BEVOR der Grid zerstört wird (aus Grid + Parking)
const cards = {};
Object.entries(this.TILE_MAP).forEach(([id, selector]) => {
const card = document.querySelector(selector);
if (card) cards[id] = card;
});
this._hiddenTiles = {};
if (this._grid) {
this._grid.destroy(false);
this._grid = null;
}
this._initialized = false;
const gridEl = document.querySelector('.grid-stack');
if (!gridEl) return;
// Grid leeren (Cards sind bereits in cards-Map gesichert)
gridEl.innerHTML = '';
// Cards in Default-Layout neu aufbauen
this.DEFAULT_LAYOUT.forEach(cfg => {
const cardEl = cards[cfg.id];
if (!cardEl) return;
const wrapper = document.createElement('div');
wrapper.className = 'grid-stack-item';
wrapper.setAttribute('gs-id', cfg.id);
wrapper.setAttribute('gs-x', cfg.x);
wrapper.setAttribute('gs-y', cfg.y);
wrapper.setAttribute('gs-w', cfg.w);
wrapper.setAttribute('gs-h', cfg.h);
wrapper.setAttribute('gs-min-w', cfg.minW);
wrapper.setAttribute('gs-min-h', cfg.minH);
const content = document.createElement('div');
content.className = 'grid-stack-item-content';
content.appendChild(cardEl);
wrapper.appendChild(content);
gridEl.appendChild(wrapper);
});
this.init();
},
resizeTileToContent(tileId) {
if (!this._grid) return;
const node = this._grid.engine.nodes.find(
n => n.el && n.el.getAttribute('gs-id') === tileId
);
if (!node || !node.el) return;
const wrapper = node.el.querySelector('.grid-stack-item-content');
if (!wrapper) return;
const card = wrapper.firstElementChild;
if (!card) return;
const cellH = this._grid.opts.cellHeight || 80;
const margin = this._grid.opts.margin || 12;
// Temporär alle height-Constraints aufheben
node.el.classList.add('gs-measuring');
const naturalHeight = card.scrollHeight;
node.el.classList.remove('gs-measuring');
// In Grid-Units umrechnen (aufrunden + 1 Puffer)
const neededH = Math.ceil(naturalHeight / (cellH + margin)) + 1;
const minH = node.minH || 2;
const finalH = Math.max(neededH, minH);
this._grid.update(node.el, { h: finalH });
this._debouncedSave();
},
destroy() {
if (this._grid) {
this._grid.destroy(false);
this._grid = null;
}
this._initialized = false;
this._hiddenTiles = {};
},
// Legacy-API-Stubs: falls alte Aufrufe im Code liegen, stumm schlucken statt crashen.
toggleTile() { /* legacy no-op */ },
reset() { /* legacy no-op */ },
save() { /* legacy no-op */ },
resizeTileToContent() { /* legacy no-op */ },
destroy() { /* legacy no-op */ },
};
document.addEventListener('DOMContentLoaded', () => LayoutManager.init());