AegisSight-Globe/static/js/layers/monitor.js

/**
 * Monitor-Layer: OSINT-Daten mit ortsspezifischen Artikeln.
 */
const MonitorLayer = {
    _viewer: null,
    _points: null,
    _labels: null,
    _interval: null,
    _count: 0,
    _data: [],
    _incidents: [],
    _handler: null,

    start(viewer) {
        if (this._points) return;
        this._viewer = viewer;
        this._points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
        this._labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
        var self = this;
        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 = [];
    },

    _fetchForLage(lageId) {
        var self = this;
        var loadEl = document.getElementById('loading-monitor');
        var statusEl = document.getElementById('status-monitor');
        if (loadEl) loadEl.classList.add('active');
        if (statusEl) { statusEl.textContent = 'Lade Lage-Daten...'; statusEl.classList.add('active'); }
        fetch('/api/monitor-feed?incident_id=' + lageId)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            self._data = data.features || [];
            self._incidents = data.incidents || [];
            self._count = self._data.length;
            self._render();
            var title = self._incidents.length ? self._incidents[0].title : '';
            if (statusEl) statusEl.textContent = self._count + ' Orte' + (title ? ' (' + title + ')' : '');
        })
        .catch(function(e) { console.warn('Monitor error:', e); if (statusEl) statusEl.textContent = 'Fehler'; })
        .finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 8000); });
    },

    _fetch() {
        var lageId = (typeof Globe !== 'undefined' && Globe._currentLageId) ? Globe._currentLageId : '';
        if (lageId) this._fetchForLage(lageId);
    },

    _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);

        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 catColors = { primary: '#ff2222', secondary: '#ff8800', tertiary: '#4499ff', mentioned: '#888888' };
        var color = catColors[p.category] || '#888';

        var html = '<div style="font-family:monospace;font-size:12px;padding:10px;max-width:400px;line-height:1.6">';
        html += '<span style="color:' + color + ';font-size:14px;font-weight:700">' + (p.name || '?') + '</span>';
        if (p.country) html += ' <span style="color:#888">(' + p.country + ')</span>';
        html += '<br><span style="color:#aaa">' + (p.article_count || 0) + ' Artikel</span>';

        // Ortsspezifische Artikel
        var articles = p.articles || [];
        if (articles.length) {
            html += '<div style="margin-top:8px">';
            articles.forEach(function(a) {
                html += '<div style="border-left:2px solid ' + color + ';padding-left:8px;margin-bottom:8px">';
                html += '<div style="color:#e0e0e0;font-size:12px;font-weight:700">' + (a.headline || '?') + '</div>';
                if (a.summary) {
                    html += '<div style="color:#bbb;font-size:11px;margin-top:2px">' + a.summary + '</div>';
                }
                html += '<div style="color:#666;font-size:9px;margin-top:2px">';
                if (a.source) html += a.source;
                if (a.date) html += ' | ' + new Date(a.date).toLocaleDateString('de-DE');
                html += '</div></div>';
            });
            html += '</div>';
        }
        html += '</div>';

        this._viewer.trackedEntity = undefined;
        this._viewer.selectedEntity = new Cesium.Entity({
            name: (p.name || '?') + ' — ' + (p.incident_title || ''),
            description: html,
        });
    },

    _render() {
        if (!this._points) return;
        this._points.removeAll();
        this._labels.removeAll();
        var colors = {
            'primary': Cesium.Color.fromCssColorString('#ff2222'),
            'secondary': Cesium.Color.fromCssColorString('#ff8800'),
            'tertiary': Cesium.Color.fromCssColorString('#4499ff'),
            'mentioned': Cesium.Color.fromCssColorString('#888888'),
        };
        for (var i = 0; i < this._data.length; i++) {
            var f = this._data[i];
            var coords = f.geometry.coordinates;
            var p = f.properties;
            var color = colors[p.category] || colors.mentioned;
            var count = p.article_count || 1;
            var size = Math.min(Math.max(Math.sqrt(count) * 3, 6), 18);
            this._points.add({
                position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
                pixelSize: size, color: color,
                outlineColor: Cesium.Color.WHITE.withAlpha(0.6), outlineWidth: 1,
            });
            if (count >= 2) {
                this._labels.add({
                    position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
                    text: (p.name || '?') + ' (' + count + ')',
                    font: '11px sans-serif', fillColor: color,
                    outlineColor: Cesium.Color.BLACK, outlineWidth: 3,
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    pixelOffset: new Cesium.Cartesian2(0, -size - 6), scale: 0.8,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 3000000),
                });
            }
        }
    },
};