e15ed0c21e
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.
76 Zeilen
2.9 KiB
JavaScript
76 Zeilen
2.9 KiB
JavaScript
/**
|
|
* LayoutManager: Tab-Navigation fuer das Monitor-Dashboard.
|
|
* Nur ein Tab-Panel gleichzeitig sichtbar, pro Lage gemerkt in localStorage.
|
|
*/
|
|
const LayoutManager = {
|
|
TAB_ORDER: ['zusammenfassung', 'lagebild', 'timeline', 'karte', 'faktencheck', 'quellen'],
|
|
_currentIncidentId: null,
|
|
_initialized: false,
|
|
|
|
init() {
|
|
if (this._initialized) return;
|
|
const nav = document.getElementById('tab-nav');
|
|
if (!nav) return;
|
|
|
|
nav.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const tab = btn.getAttribute('data-tab');
|
|
if (tab) this.switchTab(tab);
|
|
});
|
|
});
|
|
|
|
nav.style.display = '';
|
|
this._initialized = true;
|
|
},
|
|
|
|
switchTab(tabId, save = true) {
|
|
if (!this.TAB_ORDER.includes(tabId)) tabId = 'zusammenfassung';
|
|
|
|
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);
|
|
});
|
|
|
|
// 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 */ }
|
|
}
|
|
},
|
|
|
|
restoreTabFor(incidentId) {
|
|
this._currentIncidentId = incidentId;
|
|
let target = 'zusammenfassung';
|
|
try {
|
|
const saved = localStorage.getItem('osint_tab_' + incidentId);
|
|
if (saved && this.TAB_ORDER.includes(saved)) target = saved;
|
|
} catch (e) { /* ignore */ }
|
|
this.switchTab(target, false);
|
|
},
|
|
|
|
/** 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';
|
|
},
|
|
|
|
// 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());
|