2025-10-12 17:19:50 +02:00
|
|
|
import { Component, signal } from '@angular/core';
|
|
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
|
import { FormsModule } from '@angular/forms';
|
|
|
|
|
import { Menu } from '../home/menu/menu';
|
|
|
|
|
|
|
|
|
|
interface EmbedConfig {
|
|
|
|
|
apiUrl: string;
|
|
|
|
|
what: string;
|
|
|
|
|
start: string;
|
|
|
|
|
end: string;
|
|
|
|
|
limit: number;
|
|
|
|
|
width: string;
|
|
|
|
|
height: string;
|
|
|
|
|
theme: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'app-embed',
|
|
|
|
|
standalone: true,
|
|
|
|
|
imports: [CommonModule, FormsModule, Menu],
|
|
|
|
|
templateUrl: './embed.html',
|
|
|
|
|
styleUrl: './embed.scss'
|
|
|
|
|
})
|
|
|
|
|
export class Embed {
|
|
|
|
|
config = signal<EmbedConfig>({
|
2025-10-12 18:13:11 +02:00
|
|
|
apiUrl: 'https://api.openenventdatabase.org',
|
2025-10-12 17:19:50 +02:00
|
|
|
what: 'culture',
|
|
|
|
|
start: '',
|
|
|
|
|
end: '',
|
|
|
|
|
limit: 50,
|
|
|
|
|
width: '100%',
|
|
|
|
|
height: '400px',
|
|
|
|
|
theme: 'light'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
generatedCode = signal<string>('');
|
|
|
|
|
|
2025-10-12 18:13:11 +02:00
|
|
|
constructor() {
|
|
|
|
|
this.updateConfig();
|
|
|
|
|
}
|
2025-10-12 17:19:50 +02:00
|
|
|
updateConfig() {
|
|
|
|
|
const config = this.config();
|
|
|
|
|
const code = this.generateEmbedCode(config);
|
|
|
|
|
this.generatedCode.set(code);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private generateEmbedCode(config: EmbedConfig): string {
|
|
|
|
|
const params = new URLSearchParams();
|
|
|
|
|
if (config.what) params.set('what', config.what);
|
|
|
|
|
if (config.start) params.set('start', config.start);
|
|
|
|
|
if (config.end) params.set('end', config.end);
|
|
|
|
|
if (config.limit) params.set('limit', config.limit.toString());
|
|
|
|
|
|
|
|
|
|
const queryString = params.toString();
|
|
|
|
|
const scriptUrl = `${window.location.origin}/embed.js`;
|
2025-10-12 18:13:11 +02:00
|
|
|
|
|
|
|
|
return `<!-- OpenEventDatabase Embed start-->
|
2025-10-12 17:19:50 +02:00
|
|
|
<div id="oedb-events" style="width: ${config.width}; height: ${config.height}; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;"></div>
|
|
|
|
|
<script src="${scriptUrl}"></script>
|
|
|
|
|
<script>
|
|
|
|
|
OEDBEmbed.init({
|
|
|
|
|
container: '#oedb-events',
|
|
|
|
|
apiUrl: '${config.apiUrl}',
|
|
|
|
|
params: {
|
|
|
|
|
${queryString ? queryString.split('&').map(param => `'${param.split('=')[0]}': '${param.split('=')[1]}'`).join(',\n ') : ''}
|
|
|
|
|
},
|
|
|
|
|
theme: '${config.theme}'
|
|
|
|
|
});
|
2025-10-12 18:13:11 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!--OpenEventDatabase Embed end-->
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
2025-10-12 17:19:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
copyToClipboard() {
|
|
|
|
|
const code = this.generatedCode();
|
|
|
|
|
navigator.clipboard.writeText(code).then(() => {
|
|
|
|
|
// Optionnel : afficher une notification de succès
|
|
|
|
|
console.log('Code copié dans le presse-papiers');
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
preview() {
|
|
|
|
|
// Ouvrir une nouvelle fenêtre avec un aperçu
|
|
|
|
|
const previewWindow = window.open('', '_blank', 'width=800,height=600');
|
|
|
|
|
if (previewWindow) {
|
|
|
|
|
const config = this.config();
|
|
|
|
|
const code = this.generateEmbedCode(config);
|
|
|
|
|
previewWindow.document.write(`
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Aperçu OEDB Embed</title>
|
|
|
|
|
<style>
|
|
|
|
|
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
|
|
|
|
|
.preview-container { max-width: 100%; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h2>Aperçu de l'intégration</h2>
|
|
|
|
|
<div class="preview-container">
|
|
|
|
|
${code}
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
