changer pages embed, ajout définitions culture g
This commit is contained in:
parent
2c95bea01b
commit
737781e9aa
11 changed files with 123 additions and 87 deletions
1
.idea/vcs.xml
generated
1
.idea/vcs.xml
generated
|
|
@ -2,5 +2,6 @@
|
|||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
<mapping directory="$PROJECT_DIR$/OEDb_Scrappers" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
:host{
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
.container{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.research-page {
|
||||
min-height: 100vh;
|
||||
// min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue