changer pages embed, ajout définitions culture g

This commit is contained in:
Tykayn 2025-10-12 18:13:11 +02:00 committed by tykayn
parent 2c95bea01b
commit 737781e9aa
11 changed files with 123 additions and 87 deletions

1
.idea/vcs.xml generated
View file

@ -2,5 +2,6 @@
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
<mapping directory="$PROJECT_DIR$/OEDb_Scrappers" vcs="Git" />
</component>
</project>

View file

@ -8,7 +8,7 @@
// Configuration par défaut
const defaultConfig = {
apiUrl: 'https://api.oedb.fr',
apiUrl: 'https://api.openenventdatabase.org',
theme: 'light',
limit: 50,
width: '100%',
@ -57,7 +57,7 @@
this.injectStyles();
this.render();
this.loadEvents();
if (this.config.autoRefresh) {
this.startAutoRefresh();
}
@ -81,7 +81,7 @@
display: flex;
flex-direction: column;
}
.oedb-embed-header {
background: ${theme.primary};
color: white;
@ -89,52 +89,52 @@
text-align: center;
font-weight: 600;
}
.oedb-embed-content {
flex: 1;
display: flex;
overflow: hidden;
}
.oedb-embed-map {
flex: 1;
min-height: 200px;
background: #f8f9fa;
position: relative;
}
.oedb-embed-list {
width: 300px;
overflow-y: auto;
border-left: 1px solid ${theme.border};
background: ${theme.background};
}
.oedb-embed-list-only {
width: 100%;
}
.oedb-embed-map-only {
width: 100%;
}
.oedb-event-item {
padding: 1rem;
border-bottom: 1px solid ${theme.border};
cursor: pointer;
transition: background-color 0.2s;
}
.oedb-event-item:hover {
background: ${theme.border};
}
.oedb-event-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: ${theme.text};
}
.oedb-event-meta {
font-size: 0.9rem;
color: ${theme.secondary};
@ -142,7 +142,7 @@
flex-direction: column;
gap: 0.25rem;
}
.oedb-loading {
display: flex;
align-items: center;
@ -150,20 +150,20 @@
height: 200px;
color: ${theme.secondary};
}
.oedb-error {
padding: 2rem;
text-align: center;
color: #e74c3c;
background: #fdf2f2;
}
.oedb-no-events {
padding: 2rem;
text-align: center;
color: ${theme.secondary};
}
.oedb-map-placeholder {
display: flex;
align-items: center;
@ -195,7 +195,7 @@
async loadEvents() {
if (this.isLoading) return;
this.isLoading = true;
this.showLoading();

View file

@ -15,8 +15,8 @@
<div class="content">
<header>
<nav>
<a [routerLink]="['/']" routerLinkActive="active"><h1>
<img src="/static/oedb.png" alt="OEDB" style="width: 20px; height: 20px;">
@ -28,7 +28,6 @@
<a routerLink="/agenda" routerLinkActive="active">agenda</a>
<a routerLink="/unlocated-events" routerLinkActive="active">événements non localisés</a>
<a routerLink="/batch-edit" routerLinkActive="active">batch edit</a>
<a routerLink="/community-upcoming" routerLinkActive="active">community upcoming</a>
<a routerLink="/events-docs" routerLinkActive="active">events docs</a>
<a routerLink="/research" routerLinkActive="active">research</a>
<a routerLink="/nouvelles-categories" routerLinkActive="active">nouvelles catégories</a>

View file

@ -1,7 +1,4 @@
:host{
height: 100vh;
overflow: hidden;
.container{
height: 100%;
overflow-y: auto;

View file

@ -9,7 +9,7 @@
grid-template-columns: 400px 1fr;
grid-template-rows: minmax(100vh, auto);
gap: 0;
min-height: 100vh;
// min-height: 100vh;
&.is-small {
grid-template-columns: 100px 1fr;
@ -32,7 +32,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
// height: 100vh;
background: #f8f9fa;
}

View file

@ -1,5 +1,4 @@
<div class="batch-edit-page">
<app-menu></app-menu>
<div class="batch-edit-page">
<div class="container">
<header class="page-header">

View file

@ -1,35 +1,51 @@
<div class="embed-page">
<div class="layout">
<div class="aside">
<app-menu></app-menu>
</div>
<div class="aside">
<header class="page-header">
<h1>Intégration OEDB</h1>
<p>Générez un code d'intégration pour afficher les événements OEDB sur votre site web</p>
</header>
<h2>Comment utiliser</h2>
<ol>
<li>Configurez les paramètres ci-dessus selon vos besoins</li>
<li>Copiez le code généré</li>
<li>Collez-le dans votre page HTML</li>
<li>Le script chargera automatiquement les événements depuis l'API OEDB</li>
</ol>
<div class="features">
<h3>Fonctionnalités</h3>
<ul>
<li>✅ Affichage responsive des événements</li>
<li>✅ Filtrage par type et dates</li>
<li>✅ Thèmes clair et sombre</li>
<li>✅ Mise à jour automatique</li>
<li>✅ Compatible avec tous les navigateurs</li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<header class="page-header">
<h1>Intégration OEDB</h1>
<p>Générez un code d'intégration pour afficher les événements OEDB sur votre site web</p>
</header>
<div class="embed-config">
<div class="config-form">
<h2>Configuration</h2>
<div class="form-group">
<label for="apiUrl">URL de l'API :</label>
<input
<input
id="apiUrl"
type="url"
[(ngModel)]="config().apiUrl"
type="url"
[(ngModel)]="config().apiUrl"
(ngModelChange)="updateConfig()"
placeholder="https://api.oedb.fr">
placeholder="https://api.openenventdatabase.org">
</div>
<div class="form-group">
<label for="what">Type d'événements :</label>
<select
<select
id="what"
[(ngModel)]="config().what"
[(ngModel)]="config().what"
(ngModelChange)="updateConfig()">
<option value="culture">Culture</option>
<option value="traffic">Trafic</option>
@ -42,49 +58,49 @@
<div class="form-row">
<div class="form-group">
<label for="start">Date de début :</label>
<input
<input
id="start"
type="date"
[(ngModel)]="config().start"
type="date"
[(ngModel)]="config().start"
(ngModelChange)="updateConfig()">
</div>
<div class="form-group">
<label for="end">Date de fin :</label>
<input
<input
id="end"
type="date"
[(ngModel)]="config().end"
type="date"
[(ngModel)]="config().end"
(ngModelChange)="updateConfig()">
</div>
</div>
<div class="form-group">
<label for="limit">Nombre d'événements :</label>
<input
<input
id="limit"
type="number"
[(ngModel)]="config().limit"
type="number"
[(ngModel)]="config().limit"
(ngModelChange)="updateConfig()"
min="1"
min="1"
max="1000">
</div>
<div class="form-row">
<div class="form-group">
<label for="width">Largeur :</label>
<input
<input
id="width"
type="text"
[(ngModel)]="config().width"
type="text"
[(ngModel)]="config().width"
(ngModelChange)="updateConfig()"
placeholder="100%">
</div>
<div class="form-group">
<label for="height">Hauteur :</label>
<input
<input
id="height"
type="text"
[(ngModel)]="config().height"
type="text"
[(ngModel)]="config().height"
(ngModelChange)="updateConfig()"
placeholder="400px">
</div>
@ -92,9 +108,9 @@
<div class="form-group">
<label for="theme">Thème :</label>
<select
<select
id="theme"
[(ngModel)]="config().theme"
[(ngModel)]="config().theme"
(ngModelChange)="updateConfig()">
<option value="light">Clair</option>
<option value="dark">Sombre</option>
@ -110,7 +126,7 @@
<button class="btn btn-primary" (click)="copyToClipboard()">Copier</button>
</div>
</div>
<div class="code-container">
<pre><code>{{generatedCode()}}</code></pre>
</div>
@ -118,24 +134,7 @@
</div>
<div class="usage-info">
<h2>Comment utiliser</h2>
<ol>
<li>Configurez les paramètres ci-dessus selon vos besoins</li>
<li>Copiez le code généré</li>
<li>Collez-le dans votre page HTML</li>
<li>Le script chargera automatiquement les événements depuis l'API OEDB</li>
</ol>
<div class="features">
<h3>Fonctionnalités</h3>
<ul>
<li>✅ Affichage responsive des événements</li>
<li>✅ Filtrage par type et dates</li>
<li>✅ Thèmes clair et sombre</li>
<li>✅ Mise à jour automatique</li>
<li>✅ Compatible avec tous les navigateurs</li>
</ul>
</div>
</div>
</div>
</div>

View file

@ -2,6 +2,9 @@
min-height: 100vh;
background: #f8f9fa;
padding: 2rem 0;
.aside {
padding: 1rem;
}
}
.layout {
@ -10,7 +13,7 @@
grid-template-rows: minmax(100vh, auto);
gap: 0;
min-height: 100vh;
&.is-small {
grid-template-columns: 100px 1fr;
}

View file

@ -23,7 +23,7 @@ interface EmbedConfig {
})
export class Embed {
config = signal<EmbedConfig>({
apiUrl: 'https://api.oedb.fr',
apiUrl: 'https://api.openenventdatabase.org',
what: 'culture',
start: '',
end: '',
@ -35,6 +35,9 @@ export class Embed {
generatedCode = signal<string>('');
constructor() {
this.updateConfig();
}
updateConfig() {
const config = this.config();
const code = this.generateEmbedCode(config);
@ -50,8 +53,8 @@ export class Embed {
const queryString = params.toString();
const scriptUrl = `${window.location.origin}/embed.js`;
return `<!-- Intégration OEDB Embed -->
return `<!-- OpenEventDatabase Embed start-->
<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>
@ -63,7 +66,12 @@ export class Embed {
},
theme: '${config.theme}'
});
</script>`;
</script>
<!--OpenEventDatabase Embed end-->
`;
}
copyToClipboard() {

View file

@ -1,5 +1,5 @@
.research-page {
min-height: 100vh;
// min-height: 100vh;
background: #f8f9fa;
.container {

View file

@ -15,6 +15,36 @@ const oedb = {
category: 'Communauté',
description: 'Événement lié à la communauté OpenStreetMap'
},
'culture': {
emoji: '📅',
label: 'Culture',
category: 'Autre',
description: 'Événement de type Culture ouvert au public',
durationHours: 24,
properties: {
createdate: { label: 'Createdate', writable: true },
lastupdate: { label: 'Lastupdate', writable: true },
start: { label: 'Start', writable: true },
stop: { label: 'Stop', writable: true },
type: { label: 'Type', writable: true }
}
},
'culture.floss': {
emoji: '📅',
label: 'Culture Free Libre open source software',
category: 'Autre',
description: 'Événement de type Culture Floss',
durationHours: 24,
properties: {
}}, 'culture.viparis': {
emoji: '📅',
label: 'Évènements organisés par Viparis',
category: 'Autre',
description: 'Événement culturel par Viparis, une entreprise qui gère plusieurs grandes salles en Île de France.',
durationHours: 24,
properties: {
}},
// Culture / Arts
'culture.arts': {
@ -270,7 +300,7 @@ const oedb = {
},
'traffic.TrafficElement.Obstruction.InfrastructureDamageObstruction': {
emoji: '⛔',
label: 'Obstruction d\'infrastructure',
category: 'Circulation',
description: 'Événement de type Traffic TrafficElement Obstruction InfrastructureDamageObstruction',
@ -281,7 +311,7 @@ const oedb = {
},
'traffic.TrafficElement.Obstruction.EnvironmentalObstruction': {
emoji: '⛔',
label: 'Obstruction environnementale',
category: 'Circulation',
description: 'Événement de type Traffic TrafficElement Obstruction EnvironmentalObstruction',