webdrop-bridge/QUICKSTART_DEBUGGING.md

🚀 QUICK START - Popup-Problem lösen

Problem Zusammenfassung

• ✅ File-Drop funktioniert (Z:\ Laufwerk)
• ❌ Web-App Popup erscheint nicht nach Drop (Auschecken-Dialog)

Grund: Unser JavaScript verhindert das Browser-Drag-Event mit preventDefault(), daher bekommt die Web-App kein Drop-Event.

🎯 Lösungsstrategie

Phase 1: DEBUGGING (ca. 15-30 Min)
→ Herausfinden WIE das Popup ausgelöst wird

Phase 2: IMPLEMENTATION (ca. 30-60 Min)
→ Popup-Trigger nach File-Drop manuell aufrufen

📋 Phase 1: Debugging - JETZT STARTEN

Schritt 1: Debug-Script aktivieren

# Datei öffnen
code "C:\Development\VS Code Projects\webdrop_bridge\src\webdrop_bridge\ui\main_window.py"

Zeile ~433 in _install_bridge_script() ändern:

# VORHER:
script_path = Path(__file__).parent / "bridge_script.js"

# NACHHER (für Debugging):
script_path = Path(__file__).parent / "bridge_script_debug.js"

Speichern (Ctrl+S).

Schritt 2: Anwendung starten

cd "C:\Development\VS Code Projects\webdrop_bridge"
python -m webdrop_bridge.main

Schritt 3: Browser DevTools öffnen

1. Wenn WebDrop Bridge lädt
2. F12 drücken → DevTools öffnen
3. Console-Tab auswählen
4. Sie sollten sehen:
   [WebDrop DEBUG] Ready! Perform ALT-drag+drop and watch the logs.

Schritt 4: ALT-Drag+Drop durchführen

1. In der GlobalDAM Anwendung:

   • ALT-Taste gedrückt halten
   • Asset draggen
   • Irgendwo droppen (z.B. auf dem Desktop)

2. Popup sollte erscheinen! (Auschecken-Ja/Nein)

3. Sofort zur Browser-Console wechseln!

Schritt 5: Logs analysieren

Suchen Sie in der Console nach:

✅ A) Modal/Popup Detektion

[MODAL OPENED] <<<< DAS WOLLEN WIR SEHEN!
Modal element: <div class="...">
Classes: modal-dialog checkout-dialog

Wenn gefunden → Popup wird durch DOM-Manipulation ausgelöst
Merkblatt: Notieren Sie die className und textContent

✅ B) API-Call Detection

[FETCH] https://dev.agravity.io/api/assets/abc123/checkout

oder

[XHR] POST https://dev.agravity.io/api/assets/abc123/checkout

Wenn gefunden → Popup wird durch API-Response ausgelöst
Merkblatt: Notieren Sie die vollständige URL und Methode (POST/GET)

✅ C) Event Detection

[EVENT] DROP
Target: ... 
DataTransfer: ...

Merkblatt: Notieren Sie welche Events feuern NACHDEM Drop passiert

Schritt 6: Detailanalyse

In der Browser Console, führen Sie aus:

// Event-Statistik
webdrop_debug.getEventCounts()

// Asset-Card Component untersuchen (wenn Angular DevTools installiert)
var card = document.querySelector('ay-asset-card');
var component = webdrop_debug.getComponent(card);
console.log('Component methods:', Object.getOwnPropertyNames(Object.getPrototypeOf(component)));

Merkblatt: Notieren Sie:

• Welche Methoden hat das Component? (z.B. onCheckout, showDialog, etc.)
• Gibt es einen click-Handler auf dem Asset?

📝 Was Sie herausfinden müssen

Nach dem Debugging sollten Sie wissen:

1. WIE wird Popup ausgelöst?

   • API-Call nach Drop (URL: ________________________)
   • DOM-Element wird erstellt (Class: ________________)
   • Angular Component Methode (Name: ________________)
   • Click-Event auf Button (Selector: _______________)

2. WANN wird Popup ausgelöst?

   • Sofort nach Drop
   • Nach Verzögerung (_____ Sekunden)
   • Nach API-Response
   • Nach User-Interaction

3. WELCHE Daten werden benötigt?

   • Asset-ID (Beispiel: _________________________)
   • Collection-ID (Beispiel: ______________________)
   • User-ID (Beispiel: ___________________________)
   • Weitere: ____________________________________

🔧 Phase 2: Implementation (NACHDEM Debugging abgeschlossen)

Basierend auf Ihren Erkenntnissen:

Fall A: Popup durch API-Call

In bridge_script.js hinzufügen (nach erfolgreichem File-Drop):

// Nach Qt File-Drop Erfolg
function triggerCheckoutPopup(assetId) {
  fetch('https://dev.agravity.io/api/assets/' + assetId + '/checkout', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // ggf. Authorization Header
    },
    body: JSON.stringify({
      // Parameter basierend auf Debug-Logs
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log('Checkout popup triggered via API');
  });
}

Fall B: Popup durch Component-Methode

function triggerCheckoutPopup(assetId) {
  var card = document.getElementById(assetId);
  if (card && window.ng) {
    var component = ng.getComponent(card);
    if (component && component.onCheckout) {
      component.onCheckout();
    }
  }
}

Fall C: Popup durch Click-Simulation

function triggerCheckoutPopup(assetId) {
  var button = document.querySelector('[data-action="checkout"]');
  if (button) {
    button.click();
  }
}

⚡ Troubleshooting

Problem: Kein [MODAL OPENED] Log
Lösung: Popup wird möglicherweise anders erstellt. Suchen Sie in Network-Tab nach API-Calls

Problem: Zu viele Logs
Lösung: Console Filter nutzen: [MODAL] oder [FETCH]

Problem: webdrop_debug not defined
Lösung: Debug-Script wurde nicht richtig geladen. main_window.py prüfen.

Problem: Angular DevTools fehlt
Lösung: Chrome Extension installieren: "Angular DevTools"

📞 Nächste Schritte

1. ✅ Debug-Script aktivieren (oben Schritt 1)
2. ✅ Logs sammeln (Schritt 3-6)
3. ✅ Ergebnisse notieren (Merkblatt)
4. → Ergebnisse mitteilen → Ich helfe bei Implementation!

📄 Zusätzliche Dokumentation

• DRAG_DROP_PROBLEM_ANALYSIS.md - Detaillierte Problem-Analyse
• SCRIPT_VARIANTS.md - Alle verfügbaren Scripts
• ANGULAR_CDK_ANALYSIS.md - Angular Framework Details

---

Hinweis: Das Debug-Script hat Performance-Overhead. Nach dem Debugging zurück zu bridge_script.js wechseln!