add embed, research pages

2025-10-12 17:19:50 +02:00 · 2025-10-12 17:19:50 +02:00 · 2c95bea01b
commit 2c95bea01b
parent 2238380e80
24 changed files with 2925 additions and 251 deletions
--- a/frontend/src/app/pages/embed/embed.ts
+++ b/frontend/src/app/pages/embed/embed.ts
@ -0,0 +1,103 @@
+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>({
+    apiUrl: 'https://api.oedb.fr',
+    what: 'culture',
+    start: '',
+    end: '',
+    limit: 50,
+    width: '100%',
+    height: '400px',
+    theme: 'light'
+  });
+
+  generatedCode = signal<string>('');
+
+  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`;
+    
+    return `<!-- Intégration OEDB Embed -->
+<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}'
+  });
+</script>`;
+  }
+
+  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>
+      `);
+    }
+  }
+}