tykayn/oedb-backend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style agenda

Browse source
This commit is contained in:
Tykayn 2025-10-13 10:49:13 +02:00 • committed by tykayn
parent 737781e9aa
commit 7dd38624a4
7 changed files with 471 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

180
test_embed_cors.html Normal file
View file

@ -0,0 +1,180 @@
<!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>