chore: initialize project repository with core extension files
- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
This commit is contained in:
655
test-enhanced-workflow-debug.html
Normal file
655
test-enhanced-workflow-debug.html
Normal file
@@ -0,0 +1,655 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Enhanced Workflow Debug Test</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.test-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.debug-section {
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.error-log {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
font-family: monospace;
|
||||
font-size: 0.9rem;
|
||||
white-space: pre-wrap;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.test-button {
|
||||
background: #ff9900;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
margin: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.test-button:hover {
|
||||
background: #ff7700;
|
||||
}
|
||||
|
||||
.test-button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.workflow-container {
|
||||
border: 2px solid #007bff;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
min-height: 300px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.status-success { background: #28a745; }
|
||||
.status-error { background: #dc3545; }
|
||||
.status-warning { background: #ffc107; }
|
||||
.status-info { background: #17a2b8; }
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
margin: 0.25rem 0;
|
||||
border-radius: 4px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.progress-step.active {
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
}
|
||||
|
||||
.progress-step.completed {
|
||||
background: #d4edda;
|
||||
border-left: 4px solid #28a745;
|
||||
}
|
||||
|
||||
.progress-step.error {
|
||||
background: #f8d7da;
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
|
||||
.title-selection-container {
|
||||
border: 2px solid #28a745;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
background: #f8fff8;
|
||||
}
|
||||
|
||||
.title-option {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin: 0.5rem 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.title-option:hover {
|
||||
border-color: #ff9900;
|
||||
box-shadow: 0 2px 8px rgba(255, 153, 0, 0.2);
|
||||
}
|
||||
|
||||
.title-option.selected {
|
||||
border-color: #28a745;
|
||||
background: #f8fff8;
|
||||
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
|
||||
}
|
||||
|
||||
.title-option.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.option-text {
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.selection-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-selection-btn, .skip-ai-btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.confirm-selection-btn {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.confirm-selection-btn:hover {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
.skip-ai-btn {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.skip-ai-btn:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
.manual-input-form {
|
||||
border: 2px solid #ffc107;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
background: #fffbf0;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-field input, .form-field select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-field input:focus, .form-field select:focus {
|
||||
outline: none;
|
||||
border-color: #ff9900;
|
||||
box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test-container">
|
||||
<h1>🔧 Enhanced Workflow Debug Test</h1>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>Problem Diagnosis</h3>
|
||||
<p>Dieser Test hilft dabei, den "Unerwarteter Fehler beim Erstellen des Enhanced Items" zu diagnostizieren und zu beheben.</p>
|
||||
<p><strong>Fokus:</strong> Titel-Auswahl-Schritt (✏️) im Enhanced Item Workflow</p>
|
||||
</div>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>Test Scenarios</h3>
|
||||
<button class="test-button" onclick="testTitleSelectionOnly()">Test Title Selection UI</button>
|
||||
<button class="test-button" onclick="testCompleteWorkflow()">Test Complete Workflow</button>
|
||||
<button class="test-button" onclick="testErrorScenarios()">Test Error Scenarios</button>
|
||||
<button class="test-button" onclick="testManualFallback()">Test Manual Fallback</button>
|
||||
<button class="test-button" onclick="clearAll()">Clear All</button>
|
||||
</div>
|
||||
|
||||
<div class="workflow-container" id="workflowContainer">
|
||||
<h4>🚀 Workflow Test Area</h4>
|
||||
<p>Hier wird der Enhanced Item Workflow getestet...</p>
|
||||
</div>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>📊 Progress Tracking</h3>
|
||||
<div id="progressContainer">
|
||||
<div class="progress-step" data-step="validate">
|
||||
<span class="status-indicator status-info"></span>
|
||||
<span>🔍 URL validieren</span>
|
||||
</div>
|
||||
<div class="progress-step" data-step="extract">
|
||||
<span class="status-indicator status-info"></span>
|
||||
<span>📦 Produktdaten extrahieren</span>
|
||||
</div>
|
||||
<div class="progress-step" data-step="ai">
|
||||
<span class="status-indicator status-info"></span>
|
||||
<span>🤖 KI-Titelvorschläge generieren</span>
|
||||
</div>
|
||||
<div class="progress-step" data-step="select">
|
||||
<span class="status-indicator status-info"></span>
|
||||
<span>✏️ Titel auswählen</span>
|
||||
</div>
|
||||
<div class="progress-step" data-step="save">
|
||||
<span class="status-indicator status-info"></span>
|
||||
<span>💾 Item speichern</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>🐛 Error Log</h3>
|
||||
<div class="error-log" id="errorLog">Keine Fehler bisher...</div>
|
||||
</div>
|
||||
|
||||
<div class="debug-section">
|
||||
<h3>📝 Console Output</h3>
|
||||
<div class="error-log" id="consoleOutput">Console-Ausgaben werden hier angezeigt...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
// Mock environment setup
|
||||
const mockStorage = {
|
||||
data: {},
|
||||
getItem(key) { return this.data[key] || null; },
|
||||
setItem(key, value) { this.data[key] = value; },
|
||||
removeItem(key) { delete this.data[key]; },
|
||||
clear() { this.data = {}; }
|
||||
};
|
||||
|
||||
if (typeof localStorage === 'undefined') {
|
||||
window.localStorage = mockStorage;
|
||||
}
|
||||
|
||||
// Mock event bus
|
||||
window.amazonExtEventBus = {
|
||||
events: {},
|
||||
emit(event, data) {
|
||||
console.log('Event emitted:', event, data);
|
||||
if (this.events[event]) {
|
||||
this.events[event].forEach(callback => callback(data));
|
||||
}
|
||||
},
|
||||
on(event, callback) {
|
||||
if (!this.events[event]) this.events[event] = [];
|
||||
this.events[event].push(callback);
|
||||
}
|
||||
};
|
||||
|
||||
// Console capture
|
||||
const originalConsole = {
|
||||
log: console.log,
|
||||
error: console.error,
|
||||
warn: console.warn
|
||||
};
|
||||
|
||||
function logToOutput(type, ...args) {
|
||||
const output = document.getElementById('consoleOutput');
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const message = args.map(arg =>
|
||||
typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
|
||||
).join(' ');
|
||||
|
||||
output.textContent += `[${timestamp}] ${type.toUpperCase()}: ${message}\n`;
|
||||
output.scrollTop = output.scrollHeight;
|
||||
}
|
||||
|
||||
console.log = (...args) => {
|
||||
originalConsole.log(...args);
|
||||
logToOutput('log', ...args);
|
||||
};
|
||||
|
||||
console.error = (...args) => {
|
||||
originalConsole.error(...args);
|
||||
logToOutput('error', ...args);
|
||||
|
||||
const errorLog = document.getElementById('errorLog');
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const message = args.map(arg =>
|
||||
typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
|
||||
).join(' ');
|
||||
errorLog.textContent += `[${timestamp}] ERROR: ${message}\n`;
|
||||
};
|
||||
|
||||
console.warn = (...args) => {
|
||||
originalConsole.warn(...args);
|
||||
logToOutput('warn', ...args);
|
||||
};
|
||||
|
||||
// Load modules
|
||||
let TitleSelectionManager, EnhancedAddItemWorkflow, ErrorHandler;
|
||||
|
||||
try {
|
||||
const modules = await Promise.all([
|
||||
import('./src/TitleSelectionManager.js'),
|
||||
import('./src/EnhancedAddItemWorkflow.js'),
|
||||
import('./src/ErrorHandler.js')
|
||||
]);
|
||||
|
||||
TitleSelectionManager = modules[0].TitleSelectionManager;
|
||||
EnhancedAddItemWorkflow = modules[1].EnhancedAddItemWorkflow;
|
||||
ErrorHandler = modules[2].errorHandler;
|
||||
|
||||
console.log('✅ All modules loaded successfully');
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to load modules:', error);
|
||||
}
|
||||
|
||||
// Progress tracking
|
||||
function updateProgress(stepId, status) {
|
||||
const step = document.querySelector(`[data-step="${stepId}"]`);
|
||||
if (step) {
|
||||
step.className = `progress-step ${status}`;
|
||||
const indicator = step.querySelector('.status-indicator');
|
||||
indicator.className = `status-indicator status-${status === 'completed' ? 'success' : status === 'error' ? 'error' : status === 'active' ? 'warning' : 'info'}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Test functions
|
||||
window.testTitleSelectionOnly = async function() {
|
||||
console.log('=== Testing Title Selection UI Only ===');
|
||||
|
||||
try {
|
||||
const container = document.getElementById('workflowContainer');
|
||||
container.innerHTML = '<h4>🎯 Title Selection Test</h4>';
|
||||
|
||||
const titleManager = new TitleSelectionManager();
|
||||
|
||||
// Mock data
|
||||
const suggestions = [
|
||||
'ROCKBROS Fahrradhandschuhe - Premium Qualität',
|
||||
'Hochwertige Fahrradhandschuhe von ROCKBROS',
|
||||
'ROCKBROS Handschuhe für Radfahrer'
|
||||
];
|
||||
const originalTitle = 'ROCKBROS Fahrradhandschuhe Herren Damen Halbfinger MTB Handschuhe Rutschfest Atmungsaktiv für Rennrad Mountainbike';
|
||||
|
||||
console.log('Creating selection UI...');
|
||||
const selectionUI = titleManager.createSelectionUI(suggestions, originalTitle);
|
||||
container.appendChild(selectionUI);
|
||||
|
||||
// Set up callback
|
||||
titleManager.onTitleSelected((selectedTitle) => {
|
||||
console.log('✅ Title selected successfully:', selectedTitle);
|
||||
|
||||
const result = document.createElement('div');
|
||||
result.innerHTML = `
|
||||
<div style="background: #d4edda; border: 1px solid #c3e6cb; border-radius: 6px; padding: 1rem; margin: 1rem 0;">
|
||||
<h5 style="color: #155724; margin: 0 0 0.5rem 0;">✅ Titel erfolgreich ausgewählt!</h5>
|
||||
<p style="margin: 0; color: #155724;"><strong>Ausgewählter Titel:</strong> ${selectedTitle}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(result);
|
||||
});
|
||||
|
||||
// Show UI
|
||||
console.log('Showing selection UI...');
|
||||
titleManager.showTitleSelection(selectionUI);
|
||||
|
||||
console.log('✅ Title selection UI test completed successfully');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Title selection test failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
window.testCompleteWorkflow = async function() {
|
||||
console.log('=== Testing Complete Enhanced Workflow ===');
|
||||
|
||||
try {
|
||||
const container = document.getElementById('workflowContainer');
|
||||
container.innerHTML = '<h4>🚀 Complete Workflow Test</h4>';
|
||||
|
||||
// Reset progress
|
||||
['validate', 'extract', 'ai', 'select', 'save'].forEach(step => {
|
||||
updateProgress(step, 'pending');
|
||||
});
|
||||
|
||||
const workflow = new EnhancedAddItemWorkflow();
|
||||
const testUrl = 'https://www.amazon.de/dp/B08XYZABC123';
|
||||
|
||||
// Set up callbacks
|
||||
workflow.onProgress((progress) => {
|
||||
console.log('📊 Workflow progress:', progress);
|
||||
updateProgress(progress.stepId, progress.status);
|
||||
|
||||
const progressDiv = container.querySelector('.workflow-progress') || document.createElement('div');
|
||||
progressDiv.className = 'workflow-progress';
|
||||
progressDiv.innerHTML = `
|
||||
<p><strong>Current Step:</strong> ${progress.currentStep?.name || 'Unknown'}</p>
|
||||
<p><strong>Progress:</strong> ${progress.progress}%</p>
|
||||
`;
|
||||
if (!container.querySelector('.workflow-progress')) {
|
||||
container.appendChild(progressDiv);
|
||||
}
|
||||
});
|
||||
|
||||
workflow.onError((error) => {
|
||||
console.error('❌ Workflow error:', error);
|
||||
updateProgress(error.step, 'error');
|
||||
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.innerHTML = `
|
||||
<div style="background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 6px; padding: 1rem; margin: 1rem 0;">
|
||||
<h5 style="color: #721c24; margin: 0 0 0.5rem 0;">❌ Workflow Error</h5>
|
||||
<p style="margin: 0; color: #721c24;"><strong>Step:</strong> ${error.step}</p>
|
||||
<p style="margin: 0; color: #721c24;"><strong>Error:</strong> ${error.error}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(errorDiv);
|
||||
});
|
||||
|
||||
workflow.onManualInput((result) => {
|
||||
console.log('⚠️ Manual input required:', result);
|
||||
|
||||
const manualDiv = document.createElement('div');
|
||||
manualDiv.innerHTML = `
|
||||
<div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 1rem; margin: 1rem 0;">
|
||||
<h5 style="color: #856404; margin: 0 0 0.5rem 0;">⚠️ Manual Input Required</h5>
|
||||
<p style="margin: 0; color: #856404;"><strong>Reason:</strong> ${result.error}</p>
|
||||
<button onclick="handleManualInput()" style="margin-top: 0.5rem; padding: 8px 16px; background: #ffc107; border: none; border-radius: 4px; cursor: pointer;">Provide Manual Input</button>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(manualDiv);
|
||||
});
|
||||
|
||||
workflow.onComplete((result) => {
|
||||
console.log('✅ Workflow completed:', result);
|
||||
|
||||
const completeDiv = document.createElement('div');
|
||||
completeDiv.innerHTML = `
|
||||
<div style="background: #d4edda; border: 1px solid #c3e6cb; border-radius: 6px; padding: 1rem; margin: 1rem 0;">
|
||||
<h5 style="color: #155724; margin: 0 0 0.5rem 0;">✅ Workflow Completed Successfully!</h5>
|
||||
<p style="margin: 0; color: #155724;"><strong>Duration:</strong> ${result.duration}ms</p>
|
||||
<p style="margin: 0; color: #155724;"><strong>Steps Completed:</strong> ${result.stepsCompleted}/5</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(completeDiv);
|
||||
});
|
||||
|
||||
// Start workflow
|
||||
console.log('🚀 Starting workflow...');
|
||||
const result = await workflow.startWorkflow(testUrl, {
|
||||
container: container,
|
||||
allowManualFallback: true,
|
||||
settings: {
|
||||
mistralApiKey: '', // Empty to test fallback
|
||||
timeoutSeconds: 5
|
||||
}
|
||||
});
|
||||
|
||||
console.log('📋 Final workflow result:', result);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Complete workflow test failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
window.testErrorScenarios = function() {
|
||||
console.log('=== Testing Error Scenarios ===');
|
||||
|
||||
const container = document.getElementById('workflowContainer');
|
||||
container.innerHTML = '<h4>🐛 Error Scenarios Test</h4>';
|
||||
|
||||
// Test various error conditions
|
||||
const errorScenarios = [
|
||||
{
|
||||
name: 'Null Container Error',
|
||||
test: () => {
|
||||
const titleManager = new TitleSelectionManager();
|
||||
const ui = titleManager.createSelectionUI(['Test'], 'Original');
|
||||
titleManager.showTitleSelection(null); // This should not crash
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Invalid Suggestions Error',
|
||||
test: () => {
|
||||
const titleManager = new TitleSelectionManager();
|
||||
const ui = titleManager.createSelectionUI(null, null); // This should handle gracefully
|
||||
container.appendChild(ui);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Missing InteractivityEnhancer Error',
|
||||
test: () => {
|
||||
const titleManager = new TitleSelectionManager();
|
||||
titleManager.interactivityEnhancer = null; // Simulate missing enhancer
|
||||
const ui = titleManager.createSelectionUI(['Test'], 'Original');
|
||||
container.appendChild(ui);
|
||||
titleManager.showTitleSelection(ui);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
errorScenarios.forEach((scenario, index) => {
|
||||
try {
|
||||
console.log(`Testing: ${scenario.name}`);
|
||||
scenario.test();
|
||||
console.log(`✅ ${scenario.name} handled gracefully`);
|
||||
} catch (error) {
|
||||
console.error(`❌ ${scenario.name} failed:`, error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.testManualFallback = function() {
|
||||
console.log('=== Testing Manual Fallback ===');
|
||||
|
||||
const container = document.getElementById('workflowContainer');
|
||||
container.innerHTML = '<h4>📝 Manual Fallback Test</h4>';
|
||||
|
||||
// Create mock manual input form
|
||||
const manualForm = document.createElement('div');
|
||||
manualForm.className = 'manual-input-form';
|
||||
manualForm.innerHTML = `
|
||||
<h5>Manual Product Input</h5>
|
||||
<div class="form-field">
|
||||
<label for="manual-url">Amazon-URL:</label>
|
||||
<input type="url" id="manual-url" value="https://amazon.de/dp/B08N5WRWNW" required>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="manual-title">Produkttitel:</label>
|
||||
<input type="text" id="manual-title" value="ROCKBROS Fahrradhandschuhe" required>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="manual-price">Preis:</label>
|
||||
<input type="text" id="manual-price" value="29,99">
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="manual-currency">Währung:</label>
|
||||
<select id="manual-currency">
|
||||
<option value="EUR">EUR (€)</option>
|
||||
<option value="USD">USD ($)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-top: 1rem;">
|
||||
<button onclick="submitManualData()" style="background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin-right: 0.5rem;">Save Item</button>
|
||||
<button onclick="cancelManualInput()" style="background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(manualForm);
|
||||
console.log('✅ Manual fallback form created');
|
||||
};
|
||||
|
||||
window.submitManualData = function() {
|
||||
const url = document.getElementById('manual-url').value;
|
||||
const title = document.getElementById('manual-title').value;
|
||||
const price = document.getElementById('manual-price').value;
|
||||
const currency = document.getElementById('manual-currency').value;
|
||||
|
||||
console.log('📝 Manual data submitted:', { url, title, price, currency });
|
||||
|
||||
const result = document.createElement('div');
|
||||
result.innerHTML = `
|
||||
<div style="background: #d4edda; border: 1px solid #c3e6cb; border-radius: 6px; padding: 1rem; margin: 1rem 0;">
|
||||
<h5 style="color: #155724; margin: 0 0 0.5rem 0;">✅ Manual Item Created Successfully!</h5>
|
||||
<p style="margin: 0; color: #155724;"><strong>Title:</strong> ${title}</p>
|
||||
<p style="margin: 0; color: #155724;"><strong>Price:</strong> ${price} ${currency}</p>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('workflowContainer').appendChild(result);
|
||||
};
|
||||
|
||||
window.cancelManualInput = function() {
|
||||
console.log('❌ Manual input cancelled');
|
||||
const form = document.querySelector('.manual-input-form');
|
||||
if (form) form.remove();
|
||||
};
|
||||
|
||||
window.handleManualInput = function() {
|
||||
console.log('🔧 Handling manual input...');
|
||||
testManualFallback();
|
||||
};
|
||||
|
||||
window.clearAll = function() {
|
||||
document.getElementById('errorLog').textContent = 'Logs cleared...';
|
||||
document.getElementById('consoleOutput').textContent = 'Console cleared...';
|
||||
document.getElementById('workflowContainer').innerHTML = '<h4>🚀 Workflow Test Area</h4><p>Hier wird der Enhanced Item Workflow getestet...</p>';
|
||||
|
||||
// Reset progress
|
||||
['validate', 'extract', 'ai', 'select', 'save'].forEach(step => {
|
||||
updateProgress(step, 'pending');
|
||||
});
|
||||
};
|
||||
|
||||
console.log('🔧 Enhanced Workflow Debug Test loaded successfully');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user