180 lines
6.5 KiB
HTML
180 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Test OEDB Embed avec CORS</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.test-section {
|
||
background: white;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
.test-title {
|
||
color: #2c3e50;
|
||
border-bottom: 2px solid #3498db;
|
||
padding-bottom: 10px;
|
||
}
|
||
.embed-container {
|
||
border: 2px dashed #3498db;
|
||
min-height: 400px;
|
||
margin: 20px 0;
|
||
}
|
||
.config-display {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
white-space: pre-wrap;
|
||
}
|
||
.status {
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
margin: 10px 0;
|
||
}
|
||
.status.success {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
.status.error {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🧪 Test OEDB Embed avec Configuration CORS</h1>
|
||
|
||
<div class="test-section">
|
||
<h2 class="test-title">Configuration du Test</h2>
|
||
<div class="config-display" id="config-display">
|
||
Chargement de la configuration...
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2 class="test-title">Test de Connexion CORS</h2>
|
||
<div id="cors-status" class="status">
|
||
Test en cours...
|
||
</div>
|
||
<button onclick="testCorsConnection()">🔄 Tester la Connexion CORS</button>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2 class="test-title">Intégration OEDB Embed</h2>
|
||
<p>Configuration utilisée :</p>
|
||
<div class="config-display" id="embed-config"></div>
|
||
|
||
<div class="embed-container" id="oedb-embed-container">
|
||
<div style="text-align: center; padding: 50px; color: #666;">
|
||
Chargement du widget OEDB...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2 class="test-title">Logs de Debug</h2>
|
||
<div id="debug-logs" style="background: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 4px; font-family: monospace; max-height: 300px; overflow-y: auto;">
|
||
<div>🚀 Initialisation du test...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Script OEDB Embed -->
|
||
<script src="frontend/public/embed.js"></script>
|
||
|
||
<script>
|
||
// Configuration de test
|
||
const testConfig = {
|
||
apiUrl: 'http://localhost:8080', // Ajustez selon votre configuration
|
||
theme: 'light',
|
||
limit: 10,
|
||
width: '100%',
|
||
height: '400px',
|
||
showMap: true,
|
||
showList: true,
|
||
autoRefresh: false
|
||
};
|
||
|
||
// Fonction de logging
|
||
function log(message, type = 'info') {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const logElement = document.getElementById('debug-logs');
|
||
const icon = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️';
|
||
logElement.innerHTML += `<div>[${timestamp}] ${icon} ${message}</div>`;
|
||
logElement.scrollTop = logElement.scrollHeight;
|
||
}
|
||
|
||
// Test de connexion CORS
|
||
async function testCorsConnection() {
|
||
const statusElement = document.getElementById('cors-status');
|
||
statusElement.innerHTML = 'Test en cours...';
|
||
statusElement.className = 'status';
|
||
|
||
log('Début du test CORS...');
|
||
|
||
try {
|
||
const response = await fetch(`${testConfig.apiUrl}/events?limit=1`);
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
statusElement.innerHTML = `✅ Connexion CORS réussie ! (${data.features?.length || 0} événements)`;
|
||
statusElement.className = 'status success';
|
||
log('Connexion CORS réussie', 'success');
|
||
} else {
|
||
statusElement.innerHTML = `❌ Erreur HTTP: ${response.status}`;
|
||
statusElement.className = 'status error';
|
||
log(`Erreur HTTP: ${response.status}`, 'error');
|
||
}
|
||
} catch (error) {
|
||
statusElement.innerHTML = `❌ Erreur de connexion: ${error.message}`;
|
||
statusElement.className = 'status error';
|
||
log(`Erreur de connexion: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// Initialisation
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
log('Page chargée, initialisation...');
|
||
|
||
// Afficher la configuration
|
||
document.getElementById('config-display').textContent = JSON.stringify(testConfig, null, 2);
|
||
document.getElementById('embed-config').textContent = JSON.stringify(testConfig, null, 2);
|
||
|
||
// Test automatique de connexion
|
||
setTimeout(testCorsConnection, 1000);
|
||
|
||
// Initialiser le widget OEDB
|
||
setTimeout(() => {
|
||
try {
|
||
log('Initialisation du widget OEDB...');
|
||
|
||
if (window.OEDBEmbed) {
|
||
const embed = new OEDBEmbed(document.getElementById('oedb-embed-container'), testConfig);
|
||
log('Widget OEDB initialisé avec succès', 'success');
|
||
|
||
// Écouter les événements du widget
|
||
document.getElementById('oedb-embed-container').addEventListener('oedb-event-click', function(event) {
|
||
log(`Événement cliqué: ${event.detail.eventId}`);
|
||
});
|
||
} else {
|
||
log('Erreur: OEDBEmbed non disponible', 'error');
|
||
}
|
||
} catch (error) {
|
||
log(`Erreur lors de l'initialisation: ${error.message}`, 'error');
|
||
}
|
||
}, 2000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|