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

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

**Zeile ~433** in `_install_bridge_script()` ändern:

```python
# 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

```powershell
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:

```javascript
// 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):

```javascript
// 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

```javascript
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

```javascript
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](DRAG_DROP_PROBLEM_ANALYSIS.md) - Detaillierte Problem-Analyse
- [SCRIPT_VARIANTS.md](SCRIPT_VARIANTS.md) - Alle verfügbaren Scripts
- [ANGULAR_CDK_ANALYSIS.md](ANGULAR_CDK_ANALYSIS.md) - Angular Framework Details

---

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