Kenso Grimm
216a972fef
- 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
346 lines
13 KiB
HTML
346 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Enhanced Item Creation Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin: 20px 0;
|
|
}
|
|
.form-group {
|
|
margin: 15px 0;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
input[type="url"], input[type="text"] {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
button {
|
|
background-color: #007acc;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
font-size: 16px;
|
|
}
|
|
button:hover {
|
|
background-color: #005a9e;
|
|
}
|
|
button:disabled {
|
|
background-color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
.result {
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 4px;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
.warning {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
border: 1px solid #ffeaa7;
|
|
}
|
|
.progress {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
.step {
|
|
padding: 5px 0;
|
|
}
|
|
.step.active {
|
|
color: #007acc;
|
|
font-weight: bold;
|
|
}
|
|
.step.completed {
|
|
color: #28a745;
|
|
}
|
|
.step.error {
|
|
color: #dc3545;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Enhanced Item Creation Test</h1>
|
|
<p>Testen Sie die Erstellung von Enhanced Items mit der problematischen URL.</p>
|
|
|
|
<div class="container">
|
|
<h2>Automatische Erstellung (wird fehlschlagen)</h2>
|
|
<div class="form-group">
|
|
<label for="auto-url">Amazon URL:</label>
|
|
<input type="url" id="auto-url"
|
|
value="https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&dib=eyJ2IjoiMSJ9.-T0n-H-GYCdSn6tkhSVSM7jc5L9XNXsoonu4xjZ2V7sAFYdNJfrbK7b5XTKN5JZ8tm9hhO5rmd65ytlmLhbkjw-o-PIe2GbUmE4D-08dZWWjkOriS4nUSIqIhYhkqnifLUhr2LZ6ICyHAtY-w6b0A3sLSshcjrX6eCcPVE6y2FIBE7kVFq39QDU0DgDNJbALhcPtg5QCg4rDb1g6Wrlyu6acHCOfW5LqMFzanpLU15G0x9SQ0e1BfByeAH-Tgf4maUYfMB-DHZjSlldp1VDs6Wj0IMT9hUFzSdIMEodJRjA.Y7NPhfxUfYTsNDVIwrqDJbmdym11VoeRQ9GbY6as8mg&dib_tag=se&keywords=rockbros&qid=1768133517&sr=8-7">
|
|
</div>
|
|
<button onclick="testAutomaticCreation()" id="auto-btn">Automatisch erstellen</button>
|
|
<div id="auto-progress"></div>
|
|
<div id="auto-result"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Manuelle Erstellung (Fallback)</h2>
|
|
<div class="form-group">
|
|
<label for="manual-url">Amazon URL:</label>
|
|
<input type="url" id="manual-url"
|
|
value="https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="manual-title">Produkttitel:</label>
|
|
<input type="text" id="manual-title"
|
|
value="ROCKBROS Fahrradhandschuhe Outdoorsports Reflektierend Atmungsaktiv Einheitsgröße">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="manual-price">Preis:</label>
|
|
<input type="text" id="manual-price" value="19.99">
|
|
</div>
|
|
<button onclick="testManualCreation()" id="manual-btn">Manuell erstellen</button>
|
|
<div id="manual-result"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Gespeicherte Items anzeigen</h2>
|
|
<button onclick="showSavedItems()">Gespeicherte Items laden</button>
|
|
<div id="saved-items"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { UrlValidator } from './src/UrlValidator.js';
|
|
import { ProductExtractor } from './src/ProductExtractor.js';
|
|
import { EnhancedStorageManager } from './src/EnhancedStorageManager.js';
|
|
import { errorHandler } from './src/ErrorHandler.js';
|
|
|
|
// Mock event bus
|
|
window.amazonExtEventBus = {
|
|
emit: (event, data) => console.log('Event:', event, data)
|
|
};
|
|
|
|
let storageManager = new EnhancedStorageManager();
|
|
|
|
window.testAutomaticCreation = async function() {
|
|
const url = document.getElementById('auto-url').value;
|
|
const progressDiv = document.getElementById('auto-progress');
|
|
const resultDiv = document.getElementById('auto-result');
|
|
const btn = document.getElementById('auto-btn');
|
|
|
|
btn.disabled = true;
|
|
progressDiv.innerHTML = '';
|
|
resultDiv.innerHTML = '';
|
|
|
|
try {
|
|
// Step 1: URL Validation
|
|
progressDiv.innerHTML += '<div class="step active">🔍 URL validieren...</div>';
|
|
const validation = UrlValidator.validateAmazonUrl(url);
|
|
|
|
if (!validation.isValid) {
|
|
throw new Error('URL-Validierung fehlgeschlagen: ' + validation.error);
|
|
}
|
|
|
|
progressDiv.innerHTML = progressDiv.innerHTML.replace('active', 'completed') +
|
|
'<div class="step active">📦 Produktdaten extrahieren...</div>';
|
|
|
|
// Step 2: Product Extraction (will fail)
|
|
const extractor = new ProductExtractor();
|
|
const extractionResult = await extractor.extractProductData(url);
|
|
|
|
if (!extractionResult.success) {
|
|
progressDiv.innerHTML = progressDiv.innerHTML.replace('active', 'error');
|
|
|
|
// Show fallback option
|
|
resultDiv.innerHTML = `
|
|
<div class="result warning">
|
|
⚠️ Automatische Extraktion fehlgeschlagen: ${extractionResult.error}
|
|
|
|
Grund: Der ProductExtractor kann aufgrund von CORS-Richtlinien keine externen Amazon-Seiten laden.
|
|
|
|
Lösung: Verwenden Sie die manuelle Eingabe unten.
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// This won't be reached due to CORS
|
|
progressDiv.innerHTML = progressDiv.innerHTML.replace('active', 'completed') +
|
|
'<div class="step completed">💾 Item speichern...</div>';
|
|
|
|
const enhancedItem = {
|
|
id: validation.asin,
|
|
amazonUrl: validation.cleanUrl,
|
|
originalTitle: extractionResult.data.title,
|
|
customTitle: extractionResult.data.title,
|
|
price: extractionResult.data.price,
|
|
currency: extractionResult.data.currency,
|
|
titleSuggestions: [],
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString()
|
|
};
|
|
|
|
await storageManager.saveEnhancedItem(enhancedItem);
|
|
|
|
resultDiv.innerHTML = `
|
|
<div class="result success">
|
|
✅ Enhanced Item erfolgreich erstellt!
|
|
ID: ${enhancedItem.id}
|
|
Titel: ${enhancedItem.customTitle}
|
|
Preis: ${enhancedItem.price} ${enhancedItem.currency}
|
|
</div>
|
|
`;
|
|
|
|
} catch (error) {
|
|
progressDiv.innerHTML = progressDiv.innerHTML.replace('active', 'error');
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
❌ Fehler beim Erstellen des Enhanced Items: ${error.message}
|
|
|
|
Stack: ${error.stack}
|
|
</div>
|
|
`;
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
};
|
|
|
|
window.testManualCreation = async function() {
|
|
const url = document.getElementById('manual-url').value;
|
|
const title = document.getElementById('manual-title').value;
|
|
const price = document.getElementById('manual-price').value;
|
|
const resultDiv = document.getElementById('manual-result');
|
|
const btn = document.getElementById('manual-btn');
|
|
|
|
btn.disabled = true;
|
|
resultDiv.innerHTML = '<div class="result info">Erstelle Enhanced Item manuell...</div>';
|
|
|
|
try {
|
|
// Validate inputs
|
|
if (!url || !title || !price) {
|
|
throw new Error('Alle Felder sind erforderlich');
|
|
}
|
|
|
|
// Validate URL
|
|
const validation = UrlValidator.validateAmazonUrl(url);
|
|
if (!validation.isValid) {
|
|
throw new Error('URL-Validierung fehlgeschlagen: ' + validation.error);
|
|
}
|
|
|
|
// Create enhanced item
|
|
const enhancedItem = {
|
|
id: validation.asin,
|
|
amazonUrl: validation.cleanUrl,
|
|
originalTitle: title,
|
|
customTitle: title,
|
|
price: price,
|
|
currency: 'EUR',
|
|
titleSuggestions: [],
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString()
|
|
};
|
|
|
|
// Save item
|
|
await storageManager.saveEnhancedItem(enhancedItem);
|
|
|
|
resultDiv.innerHTML = `
|
|
<div class="result success">
|
|
✅ Enhanced Item erfolgreich erstellt (manuell)!
|
|
|
|
ID: ${enhancedItem.id}
|
|
Titel: ${enhancedItem.customTitle}
|
|
Preis: ${enhancedItem.price} ${enhancedItem.currency}
|
|
URL: ${enhancedItem.amazonUrl}
|
|
|
|
Das Item wurde erfolgreich in Local Storage gespeichert.
|
|
</div>
|
|
`;
|
|
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
❌ Fehler bei manueller Erstellung: ${error.message}
|
|
|
|
Stack: ${error.stack}
|
|
</div>
|
|
`;
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
};
|
|
|
|
window.showSavedItems = async function() {
|
|
const resultDiv = document.getElementById('saved-items');
|
|
|
|
try {
|
|
const items = await storageManager.getEnhancedItems();
|
|
|
|
if (items.length === 0) {
|
|
resultDiv.innerHTML = '<div class="result info">Keine gespeicherten Items gefunden.</div>';
|
|
return;
|
|
}
|
|
|
|
let itemsHtml = '<div class="result success">Gespeicherte Enhanced Items:\n\n';
|
|
items.forEach((item, index) => {
|
|
itemsHtml += `${index + 1}. ID: ${item.id}
|
|
Titel: ${item.customTitle}
|
|
Preis: ${item.price} ${item.currency}
|
|
URL: ${item.amazonUrl}
|
|
Erstellt: ${new Date(item.createdAt).toLocaleString()}
|
|
|
|
`;
|
|
});
|
|
itemsHtml += '</div>';
|
|
|
|
resultDiv.innerHTML = itemsHtml;
|
|
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `
|
|
<div class="result error">
|
|
❌ Fehler beim Laden der Items: ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
|
|
// Auto-load saved items on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('Enhanced Item Creation Test loaded');
|
|
showSavedItems();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |