Monitor-Layer: Klick zeigt Zusammenfassung + Headlines

Bei Klick auf Monitor-Standort erscheint Info-Panel mit:
- Ortsname, Land, Kategorie (farbkodiert)
- Artikelanzahl
- Bis zu 3 relevante Headlines
- Lage-Zusammenfassung aus dem Monitor (gekuerzt, Markdown bereinigt)
- Aktualisierungszeitpunkt der Lage

static/js/layers/monitor.js

@@ -1,6 +1,6 @@
 /**
  * Monitor-Layer: OSINT-Daten aus dem AegisSight Monitor.
- * Zeigt geoparsete Standorte aus Nachrichtenlagen auf dem Globus.
+ * Zeigt geoparsete Standorte mit Zusammenfassungen auf dem Globus.
  */
 const MonitorLayer = {
     _viewer: null,
@@ -10,6 +10,7 @@ const MonitorLayer = {
     _count: 0,
     _data: [],
     _incidents: [],
+    _handler: null,
 
     start(viewer) {
         if (this._points) return;
@@ -18,16 +19,107 @@ const MonitorLayer = {
         this._labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
         this._fetch();
         var self = this;
-        this._interval = setInterval(function() { self._fetch(); }, 120000); // 2min
+        this._interval = setInterval(function() { self._fetch(); }, 120000);
+
+        // Klick-Handler
+        this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+        this._handler.setInputAction(function(click) {
+            self._onClick(click.position);
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
 
     stop() {
         if (this._interval) { clearInterval(this._interval); this._interval = null; }
+        if (this._handler) { this._handler.destroy(); this._handler = null; }
         if (this._points && this._viewer) { this._viewer.scene.primitives.remove(this._points); this._points = null; }
         if (this._labels && this._viewer) { this._viewer.scene.primitives.remove(this._labels); this._labels = null; }
         this._count = 0; this._data = []; this._incidents = [];
     },
 
+    _onClick(position) {
+        if (!this._viewer || !this._data.length) return;
+        var cartesian = this._viewer.scene.pickPosition(position);
+        if (!cartesian) {
+            var ray = this._viewer.scene.camera.getPickRay(position);
+            cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene);
+        }
+        if (!cartesian) return;
+        var carto = Cesium.Cartographic.fromCartesian(cartesian);
+        var clickLat = Cesium.Math.toDegrees(carto.latitude);
+        var clickLon = Cesium.Math.toDegrees(carto.longitude);
+
+        // Naechsten Monitor-Punkt finden
+        var best = null, bestDist = 999;
+        for (var i = 0; i < this._data.length; i++) {
+            var f = this._data[i];
+            var c = f.geometry.coordinates;
+            var d = Math.abs(c[1] - clickLat) + Math.abs(c[0] - clickLon);
+            if (d < bestDist) { bestDist = d; best = f; }
+        }
+        if (!best || bestDist > 2) return;
+
+        var p = best.properties;
+        var incident = null;
+        for (var j = 0; j < this._incidents.length; j++) {
+            if (this._incidents[j].id === p.incident_id) { incident = this._incidents[j]; break; }
+        }
+
+        // Info-Panel bauen
+        var catColors = { primary: '#ff2222', secondary: '#ff8800', tertiary: '#4499ff', mentioned: '#888888' };
+        var catLabels = { primary: 'Hauptgeschehen', secondary: 'Reaktionen', tertiary: 'Beteiligte', mentioned: 'Erwaehnt' };
+        var catColor = catColors[p.category] || '#888';
+        var catLabel = catLabels[p.category] || p.category;
+
+        var html = '<div style="font-family:monospace;font-size:12px;padding:10px;max-width:400px;line-height:1.6">';
+
+        // Ort + Kategorie
+        html += '<div style="margin-bottom:10px">';
+        html += '<span style="color:' + catColor + ';font-size:14px;font-weight:700">' + (p.name || '?') + '</span>';
+        if (p.country) html += ' <span style="color:#888;font-size:11px">(' + p.country + ')</span>';
+        html += '<br><span style="color:' + catColor + ';font-size:10px;letter-spacing:1px">' + catLabel.toUpperCase() + '</span>';
+        html += ' &middot; <span style="color:#aaa">' + (p.article_count || 0) + ' Artikel</span>';
+        html += '</div>';
+
+        // Headlines
+        var headlines = p.headlines || [];
+        if (headlines.length && headlines[0]) {
+            html += '<div style="border-left:2px solid ' + catColor + ';padding-left:8px;margin-bottom:10px">';
+            for (var h = 0; h < Math.min(headlines.length, 3); h++) {
+                if (headlines[h] && headlines[h].trim()) {
+                    html += '<div style="color:#e0e0e0;font-size:11px;margin-bottom:4px">&bull; ' + headlines[h].trim().substring(0, 120) + '</div>';
+                }
+            }
+            html += '</div>';
+        }
+
+        // Lage-Zusammenfassung
+        if (incident && incident.summary) {
+            html += '<div style="border-top:1px solid #333;padding-top:8px;margin-top:4px">';
+            html += '<div style="color:#00ff88;font-size:10px;letter-spacing:1px;margin-bottom:4px">' + (incident.title || 'LAGE').toUpperCase() + '</div>';
+            // Summary kuerzen und Markdown-Formatierung entfernen
+            var summary = incident.summary
+                .replace(/##?\s*/g, '')
+                .replace(/\*\*/g, '')
+                .replace(/\[(\d+)\]/g, '')
+                .substring(0, 500);
+            html += '<div style="color:#ccc;font-size:11px;line-height:1.5">' + summary;
+            if (incident.summary.length > 500) html += '...';
+            html += '</div>';
+            if (incident.updated_at) {
+                html += '<div style="color:#666;font-size:9px;margin-top:6px">Stand: ' + new Date(incident.updated_at).toLocaleString('de-DE') + '</div>';
+            }
+            html += '</div>';
+        }
+
+        html += '</div>';
+
+        this._viewer.trackedEntity = undefined;
+        this._viewer.selectedEntity = new Cesium.Entity({
+            name: (p.name || '?') + ' — ' + (incident ? incident.title : 'Monitor'),
+            description: html,
+        });
+    },
+
     _fetch() {
         var self = this;
         var loadEl = document.getElementById('loading-monitor');
@@ -42,8 +134,8 @@ const MonitorLayer = {
             self._count = self._data.length;
             self._render();
             if (statusEl) {
-                var incNames = self._incidents.map(function(i) { return i.title; }).join(', ');
+                var incCount = self._incidents.length;
-                statusEl.textContent = self._count + ' Orte' + (incNames ? ' (' + incNames.substring(0, 40) + ')' : '');
+                statusEl.textContent = self._count + ' Orte aus ' + incCount + ' Lagen';
             }
         })
         .catch(function(e) { console.warn('Monitor error:', e); if (statusEl) statusEl.textContent = 'Fehler'; })
@@ -79,7 +171,6 @@ const MonitorLayer = {
                 outlineWidth: 1,
             });
 
-            // Label mit Ortsname bei genug Artikeln
             if (count >= 2) {
                 this._labels.add({
                     position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),