# WebDrop Bridge - Drag & Drop Script Varianten

## Verfügbare JavaScript-Scripte

### 1. `bridge_script.js` (CURRENT - Original)
**Status:** Versucht Drag zu ersetzen, verhindert Popup  
**Verwendung:** Testing, zeigt dass File-Drop prinzipiell funktioniert  
**Problem:** Web-App Popup erscheint nicht

### 2. `bridge_script_debug.js` (DEBUG - **EMPFOHLEN ZUM START**)
**Status:** Umfangreiches Logging, keine Manipulation  
**Verwendung:** Herausfinden wie Popup ausgelöst wird  
**Funktionen:**
- Loggt ALLE Drag/Drop Events
- Überwacht DataTransfer.setData
- Überwacht Network-Requests (API-Calls)
- Erkennt Angular Components
- Erkennt Modal/Popup Öffnungen
- Bietet Helper-Funktionen in Console

**So verwenden:**
```python
# In main_window.py Zeile ~433 ändern:
script_path = Path(__file__).parent / "bridge_script_debug.js"  # <-- DEBUG aktivieren
```

**Im Browser:**
1. F12 → Console öffnen
2. ALT-Drag+Drop durchführen
3. Logs analysieren:
   - `[MODAL OPENED]` → Popup-Trigger gefunden!
   - `[FETCH]` oder `[XHR]` → API-Call gefunden!
   - `[EVENT]` → Drag-Flow verstehen

### 3. `bridge_script_v2.js` (EXTEND - Experimentell)
**Status:** Versuch DataTransfer zu erweitern  
**Problem:** Browser-Sicherheit verhindert Files hinzufügen

### 4. `bridge_script_hybrid.js` (HYBRID - Experimentell)
**Status:** Versuch parallele Drags  
**Problem:** Nur ein Drag zur Zeit möglich

### 5. `bridge_script_drop_intercept.js` (DROP - Experimentell)
**Status:** Drop-Event abfangen und manipulieren  
**Problem:** DataTransfer kann nicht mit Files erstellt werden

## 🎯 Empfohlener Workflow

### Phase 1: Debugging (JETZT)

1. **Debug-Script aktivieren:**
   ```python
   # main_window.py, _install_bridge_script()
   script_path = Path(__file__).parent / "bridge_script_debug.js"
   ```

2. **Anwendung starten und testen:**
   ```powershell
   python -m webdrop_bridge.main
   ```

3. **In Browser (F12 Console):**
   - ALT-Drag+Drop durchführen
   - Logs kopieren und analysieren
   - Nach `[MODAL OPENED]` oder API-Calls suchen

4. **Herausfinden:**
   - ✅ Wie wird Popup ausgelöst? (API-Call, Event, Component-Methode)
   - ✅ Welche Asset-ID wird verwendet?
   - ✅ Wo im DOM befindet sich die Popup-Logik?

### Phase 2: Implementation (DANACH)

Basierend auf Debug-Ergebnissen:

**Fall A: Popup wird durch API-Call ausgelöst**
```javascript
// In bridge_script.js nach erfolgreichem Drop:
fetch('/api/assets/' + assetId + '/checkout', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'}
}).then(response => {
  console.log('Checkout popup triggered');
});
```

**Fall B: Popup wird durch Angular-Event ausgelöst**
```javascript
// Trigger Angular CDK Event
var dropList = document.querySelector('[cdkdroplist]');
if (dropList && window.ng) {
  var component = ng.getComponent(dropList);
  component.onDrop({assetId: assetId});
}
```

**Fall C: Popup wird durch Component-Methode ausgelöst**
```javascript
// Direkter Methoden-Aufruf
var assetCard = document.getElementById(assetId);
if (assetCard && window.ng) {
  var component = ng.getComponent(assetCard);
  component.showCheckoutDialog();
}
```

### Phase 3: Testing (FINAL)

1. Implementation in `bridge_script.js` integrieren
2. Beide Funktionen testen:
   - ✅ File wird gedroppt (Z:\ Laufwerk)
   - ✅ Popup erscheint (Auschecken-Dialog)

## 🔧 Script-Wechsel in Code

```python
# src/webdrop_bridge/ui/main_window.py
# Zeile ~433 in _install_bridge_script()

# ORIGINAL (funktioniert, aber kein Popup):
script_path = Path(__file__).parent / "bridge_script.js"

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

# Oder via Konfiguration:
script_name = self.config.bridge_script or "bridge_script.js"
script_path = Path(__file__).parent / script_name
```

## 📝 Debug-Checkliste

Beim Testen mit Debug-Script, notieren Sie:

- [ ] Wann erscheint das Popup? (Nach Drop, nach Verzögerung, sofort?)
- [ ] Gibt es API-Calls? (Welche URL, Parameter, Zeitpunkt?)
- [ ] Welche Angular-Events feuern? (CDK Events, Custom Events?)
- [ ] Wo wird Modal/Dialog erstellt? (DOM-Position, Klassen, Component)
- [ ] Welche Asset-Informationen werden benötigt? (ID, Name, URL?)
- [ ] Stack-Trace beim Modal-Öffnen? (console.trace Ausgabe)

## 🚀 Quick Commands

```powershell
# App mit Debug-Script starten
python -m webdrop_bridge.main

# In Browser Console (F12):
webdrop_debug.getEventCounts()      # Event-Statistiken
webdrop_debug.resetCounters()       # Zähler zurücksetzen
webdrop_debug.getListeners(element) # Event-Listener auflisten
webdrop_debug.getComponent(element) # Angular Component anzeigen

# Logs filtern:
# Console Filter: "[MODAL]" → Nur Popup-Logs
# Console Filter: "[EVENT]" → Nur Event-Logs
# Console Filter: "[FETCH]|[XHR]" → Nur Network-Logs
```

## ⚠️ Bekannte Limitationen

1. **Angular DevTools benötigt:** Für `ng.getComponent()` Installation nötig
2. **Chrome/Edge:** Einige Features funktionieren nur in Chromium-Browsern
3. **CSP:** Bei strengen Content-Security-Policies können Logs blockiert werden
4. **Performance:** Debug-Script hat deutlichen Performance-Overhead

## 📚 Weiterführende Dokumentation

- [ANGULAR_CDK_ANALYSIS.md](ANGULAR_CDK_ANALYSIS.md) - Angular Framework Details
- [DRAG_DROP_PROBLEM_ANALYSIS.md](DRAG_DROP_PROBLEM_ANALYSIS.md) - Problem-Analyse + Lösungen
- [ARCHITECTURE.md](ARCHITECTURE.md) - Gesamtarchitektur