Remove obsolete WebDrop Bridge scripts: bridge_script.js, bridge_script_debug.js, bridge_script_drop_intercept.js, bridge_script_hybrid.js, bridge_script_v2.js
This commit is contained in:
parent
fb710d5b00
commit
ae5c86814f
6 changed files with 0 additions and 1363 deletions
|
|
@ -1,171 +0,0 @@
|
|||
# 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue