181 lines
6.5 KiB
HTML
181 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>
|