Tutorial Step 4: Virtuelle Maus-Demo fuer Lage-Typ-Wechsel

Cursor faehrt zum Select-Feld, wechselt von Live-Monitoring zu Recherche
und zurueck. Nav-Buttons erst nach Demo-Ende aktiv.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/static/dashboard.html

@@ -764,7 +764,7 @@
     <script src="/static/js/api_network.js?v=20260316a"></script>
     <script src="/static/js/network-graph.js?v=20260316a"></script>
     <script src="/static/js/app_network.js?v=20260316a"></script>
-    <script src="/static/js/tutorial.js?v=20260316b"></script>
+    <script src="/static/js/tutorial.js?v=20260316c"></script>
     <script src="/static/js/chat.js?v=20260316e"></script>
     <script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
 

src/static/js/tutorial.js

@@ -390,18 +390,19 @@ const Tutorial = {
                     if (descInput) descInput.value = '';
                 },
             },
-            // 4 - Lage-Typ: Live vs Recherche
+            // 4 - Lage-Typ: Live vs Recherche (mit Cursor-Demo)
             {
                 id: 'incident-type',
                 target: '#modal-new .modal',
                 title: 'Live-Monitoring vs. Recherche',
                 text: '<strong>Live-Monitoring</strong> beobachtet ein Ereignis in Echtzeit. '
                     + 'Hunderte Nachrichtenquellen werden automatisch durchsucht. '
-                    + 'Ideal für aktuelle Vorfälle, Krisen oder sich entwickelnde Lagen.<br><br>'
+                    + 'Ideal f\u00fcr aktuelle Vorf\u00e4lle, Krisen oder sich entwickelnde Lagen.<br><br>'
                     + '<strong>Analyse/Recherche</strong> untersucht ein Thema tiefergehend. '
                     + 'Keine automatischen Updates, stattdessen gezielte Recherche mit eigenen Suchbegriffen. '
-                    + 'Ideal für Hintergrundanalysen und Lageberichte.',
+                    + 'Ideal f\u00fcr Hintergrundanalysen und Lageberichte.',
                 position: 'left',
+                disableNav: true,
                 onEnter: function() {
                     var overlay = document.getElementById('modal-new');
                     if (overlay && !overlay.classList.contains('active')) {
@@ -409,6 +410,7 @@ const Tutorial = {
                     }
                     if (overlay) overlay.style.zIndex = '9002';
                     Tutorial._highlightSub('#inc-type');
+                    Tutorial._simulateTypeSwitch();
                 },
                 onExit: function() {
                     var overlay = document.getElementById('modal-new');
@@ -416,6 +418,9 @@ const Tutorial = {
                         overlay.classList.remove('active');
                         overlay.style.zIndex = '';
                     }
+                    // Select zur\u00fccksetzen
+                    var sel = document.getElementById('inc-type');
+                    if (sel) { sel.value = 'adhoc'; sel.dispatchEvent(new Event('change')); }
                     Tutorial._clearSubHighlights();
                 },
             },
@@ -1074,6 +1079,43 @@ const Tutorial = {
         });
     },
 
+    // -----------------------------------------------------------------------
+    // Typ-Wechsel-Demo (Step 4)
+    // -----------------------------------------------------------------------
+    async _simulateTypeSwitch() {
+        this._demoRunning = true;
+        var sel = document.getElementById('inc-type');
+        if (!sel) { this._demoRunning = false; this._enableNavAfterDemo(); return; }
+
+        var rect = sel.getBoundingClientRect();
+        var targetX = rect.left + rect.width / 2;
+        var targetY = rect.top + rect.height / 2;
+
+        // 1. Cursor erscheint oben links im Modal, f\u00e4hrt zum Select
+        var startX = rect.left - 80;
+        var startY = rect.top - 60;
+        this._showCursor(startX, startY, 'default');
+        await this._wait(400);
+        await this._animateCursor(startX, startY, targetX, targetY, 800);
+        await this._wait(300);
+
+        // 2. Klick - wechselt zu Recherche
+        sel.value = 'research';
+        sel.dispatchEvent(new Event('change'));
+        this._highlightSub('#inc-type');
+        await this._wait(2000);
+
+        // 3. Zur\u00fcck zu Live-Monitoring
+        sel.value = 'adhoc';
+        sel.dispatchEvent(new Event('change'));
+        await this._wait(1000);
+
+        // 4. Cursor verschwindet
+        this._hideCursor();
+        this._demoRunning = false;
+        this._enableNavAfterDemo();
+    },
+
     // -----------------------------------------------------------------------
     // Drag-Demo
     // -----------------------------------------------------------------------