From a6331c8ced952cf6d15666669d6e91fe97d0df7d Mon Sep 17 00:00:00 2001 From: Tykayn Date: Tue, 14 Oct 2025 18:34:49 +0200 Subject: [PATCH] up setting plein air --- .../src/app/maps/all-events/all-events.ts | 19 +- frontend/src/app/pages/home/home.html | 612 ++++++++++-------- frontend/src/app/pages/home/home.scss | 30 +- frontend/src/app/pages/home/home.ts | 25 +- frontend/src/styles.scss | 6 + 5 files changed, 401 insertions(+), 291 deletions(-) diff --git a/frontend/src/app/maps/all-events/all-events.ts b/frontend/src/app/maps/all-events/all-events.ts index 003adc1..2bbf5af 100644 --- a/frontend/src/app/maps/all-events/all-events.ts +++ b/frontend/src/app/maps/all-events/all-events.ts @@ -17,6 +17,7 @@ export class AllEvents implements OnInit, OnDestroy { @Output() select = new EventEmitter(); @Output() pickCoords = new EventEmitter<[number, number]>(); @Output() selection = new EventEmitter>(); + @Output() mapMove = new EventEmitter<{ minLng: number, minLat: number, maxLng: number, maxLat: number }>(); @ViewChild('mapContainer', { static: true }) mapContainer!: ElementRef; @@ -165,16 +166,18 @@ export class AllEvents implements OnInit, OnDestroy { this.pickCoords.emit(coords); }); - // Écouter les changements de vue pour mettre à jour l'URL + // Écouter les changements de vue pour mettre à jour l'URL et émettre la bbox this.map.on('moveend', () => { if (this.mapInitialized) { this.updateUrlFromMap(); + this.emitCurrentBbox(); } }); this.map.on('zoomend', () => { if (this.mapInitialized) { this.updateUrlFromMap(); + this.emitCurrentBbox(); } }); @@ -634,4 +637,18 @@ export class AllEvents implements OnInit, OnDestroy { private escapeHtml(s: string): string { return s.replace(/[&<>"]+/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c] as string)); } + + private emitCurrentBbox() { + if (!this.map) return; + + const bounds = this.map.getBounds(); + const bbox = { + minLng: bounds.getWest(), + minLat: bounds.getSouth(), + maxLng: bounds.getEast(), + maxLat: bounds.getNorth() + }; + + this.mapMove.emit(bbox); + } } diff --git a/frontend/src/app/pages/home/home.html b/frontend/src/app/pages/home/home.html index 6984191..3f51329 100644 --- a/frontend/src/app/pages/home/home.html +++ b/frontend/src/app/pages/home/home.html @@ -1,344 +1,384 @@
- @if(showOptions){
- +
+ @if (isLoading) { + ⏳ + } +
+ @if(showOptions){
-
- - @if (isLoading) { - ⏳ - } -
- - - -
- - + -
-
- - - -
- @if(showEditForm){ - -
-

Guide

-
    -
  • Créer un évènement: Cliquez sur le bouton "+" pour créer un nouvel évènement. Sélectionnez un preset, remplissez les informations, cliquez quelque part sur la carte pour définir un emplacement. Puis appuyez sur créer.
    • -
  • Mettre à jour un évènement: Sélectionnez un évènement sur la carte ou dans la liste pour le modifier.
    • -
-
- @if(!pleinAirMode){ - - } - } - -
- - -
- - -
-
- - - @if (selectedIds.length) { + +
+ + +
+ + +
+
+ + + @if (selectedIds.length) { {{selectedIds.length}} sélectionné(s) + } +
+
+ + + @if(selected !== null){ +
+

sélectionné: {{selected.properties.name}} {{selected.properties.title}} {{selected.properties.label}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
label{{selected.properties.label}}
name{{selected.properties.name}}
title{{selected.properties.title}}
description{{selected.properties.description}}
what{{selected.properties.what}}
where{{selected.properties.where}}
lat{{selected.properties.lat}}
lon{{selected.properties.lon}}
wikidata{{selected.properties.wikidata}}
featureType{{selected.properties.featureType}}
type{{selected.properties.type}}
start{{selected.properties.start}}
stop{{selected.properties.stop}}
source{{selected.properties.source}}
createdate{{selected.properties.createdate}}
lastupdate{{selected.properties.lastupdate}}
type{{selected.properties.type}}
+ +
+ } +
+ + + @if (selectedIds.length) { +
+
+
+ + +
+ @if (batchAction==='changeWhat') { +
+ + +
+ } + @if (batchAction==='setField') { +
+ + +
+
+ + +
+ } +
+ + +
+ @if (batchSummary) { +
+ Succès: {{batchSummary.success}} + Échecs: {{batchSummary.failed}} + Erreurs réseau: {{batchSummary.networkErrors}} +
}
- - - @if(selected !== null){ -
- -

sélectionné: {{selected.properties.name}}

- - {{selected.properties.label}} -
- {{selected.properties.label}} -
- {{selected.properties.what}} -
- {{selected.properties.where}} -
- {{selected.properties.lat}} -
- {{selected.properties.lon}} - -
- {{selected.properties.wikidata}} -
- {{selected.properties.featureType}} -
- {{selected.properties.type}} -
- start: - {{selected.properties.start}} -
- end: - {{selected.properties.stop}} -
- source - {{selected.properties.source}} -
- description: - {{selected.properties.description}} -
- createdate: - {{selected.properties.createdate}} -
- lastupdate: - {{selected.properties.lastupdate}} - -
- } - -
- - -
-} -
- - @if (pleinAirMode) { -
- - - -
} - @if (toasts.length) { -
- @for (t of toasts; track t.id) { -
+ + + } +
+ +
+ + @if (pleinAirMode) { +
+ + + +
+ } + + @if (toasts.length) { +
+ @for (t of toasts; track t.id) { +
{{t.message}}
+ } +
} -
- } - @if (theme()) { -
-
Thème: {{ theme() }} — Cliquez sur la carte pour définir des coordonnées puis créez un évènement du sous-thème choisi.
-
- @for (t of subthemes; track t.key) { + @if (theme()) { +
+
Thème: {{ theme() }} — Cliquez sur la carte pour définir des coordonnées puis créez un + évènement du sous-thème choisi.
+
+ @for (t of subthemes; track t.key) { - } + } +
-
- } - @if (!showTable && !showUnlocatedList) { -
- -
- } @else if (showUnlocatedList) { -
-
- +
+ @if (selected) {

Détails

-
- } @else { + } @else {
Sélectionnez un évènement à gauche pour voir les détails.
- } -
+ } + +
-
- } @else { -
- - - - - - - - - - - @for (f of filteredFeatures; track f.id) { - + } @else { +
+
TypeLabelStartStop
+ + + + + + + + + + @for (f of filteredFeatures; track f.id) { + - - + + - } - -
TypeLabelStartStop
{{f?.properties?.what}}{{f?.properties?.label || f?.properties?.name}}{{f?.properties?.start || f?.properties?.when}}{{f?.properties?.label || f?.properties?.name}} + {{f?.properties?.start || f?.properties?.when}} + {{f?.properties?.stop}}
+ } + + +
+ }
- } -
-
-@if (selectedIds.length) { -
-
-
- - -
- @if (batchAction==='changeWhat') { -
- - -
- } - @if (batchAction==='setField') { -
- - -
-
- - -
- } -
- - -
- @if (batchSummary) { -
- Succès: {{batchSummary.success}} - Échecs: {{batchSummary.failed}} - Erreurs réseau: {{batchSummary.networkErrors}} -
- } -
-
-} - - -
- - -
+ +
+ + +
\ No newline at end of file diff --git a/frontend/src/app/pages/home/home.scss b/frontend/src/app/pages/home/home.scss index 0b963fa..2068718 100644 --- a/frontend/src/app/pages/home/home.scss +++ b/frontend/src/app/pages/home/home.scss @@ -152,7 +152,7 @@ .hint{ color: #64748b; padding: 20px; } .floating-actions{ position: fixed; - right: 16px; + right: 1rem; bottom: 16px; display: flex; flex-direction: column; @@ -261,4 +261,32 @@ app-edit-form{ right: 5rem; bottom: 1.1rem; z-index: 100; +} + + +table{ + width: 100%; + border-collapse: collapse; + border: 1px solid #eee; + border-radius: 10px; + overflow: hidden; + td:nth-of-type(1){ + font-weight: bold; + width: 100px; + } + th, td{ + padding: 10px; + } + tr:nth-child(even){ + background: #f0f0f0; + } + tr:nth-child(odd){ + background: #fff; + } + tr:hover{ + background: #f0f0f0; + } + th{ + background: #f0f0f0; + } } \ No newline at end of file diff --git a/frontend/src/app/pages/home/home.ts b/frontend/src/app/pages/home/home.ts index eeb90fc..7f1b6b3 100644 --- a/frontend/src/app/pages/home/home.ts +++ b/frontend/src/app/pages/home/home.ts @@ -40,7 +40,7 @@ export class Home implements OnInit, OnDestroy { showTable = false; showFilters = false; showEditForm = false; - showOptions = false; + showOptions = true; pleinAirMode = false; toasts: Array<{ id: number, type: 'success' | 'error' | 'info', message: string }> = []; @@ -71,6 +71,14 @@ export class Home implements OnInit, OnDestroy { // Option bbox useBboxFilter = true; currentBbox: { minLng: number, minLat: number, maxLng: number, maxLat: number } | null = null; + + // Bbox par défaut pour l'Île-de-France + private readonly IDF_BBOX = { + minLng: 1.4, + minLat: 48.1, + maxLng: 3.6, + maxLat: 49.2 + }; // Debounce pour la recherche private searchDebounceTimer: any = null; // Non localisés / en ligne @@ -84,9 +92,13 @@ export class Home implements OnInit, OnDestroy { const d = e?.detail || {}; this.pushToast(d.type || 'info', d.message || ''); }); } catch {} + + // Initialiser la bbox par défaut pour l'Île-de-France + this.currentBbox = { ...this.IDF_BBOX }; + this.route.queryParamMap.subscribe(map => { const id = (map.get('id') || '').trim(); - const what = (map.get('what') || '').trim(); + const what = (map.get('what') || 'culture').trim(); const pleinAir = (map.get('pleinair') || '').trim().toLowerCase(); const preset = (map.get('preset') || '').trim().toLowerCase(); const limitParam = map.get('limit'); @@ -111,6 +123,8 @@ export class Home implements OnInit, OnDestroy { } }); this.startAutoReload(); + + this.loadEvents({ what: "culture" , limit: 100 }); } ngOnDestroy() { @@ -365,7 +379,7 @@ export class Home implements OnInit, OnDestroy { this.selected = null; // Après création rapide en plein air: recharger uniquement ce type pour feedback instantané this.selectedWhatFilter = w; - this.loadEvents({ what: w }); + this.loadEvents({ what: 'traffic' }); }, error: () => { this.pushToast('error', 'Échec de création'); } }); @@ -616,4 +630,9 @@ export class Home implements OnInit, OnDestroy { this.loadEvents(); } } + + // Méthode pour recharger les événements quand la carte bouge + onMapMove(bbox: { minLng: number, minLat: number, maxLng: number, maxLat: number }) { + this.setCurrentBbox(bbox); + } } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 2e015d2..00def06 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -141,6 +141,12 @@ label { font-size: 0.85rem; color: $color-muted; } border: 1px solid rgba(0,0,0,0.08); margin-bottom: 10px; background: #f0f0f0; + width: 100%; + table{ + width: 100%; + overflow: auto; + } + } } .actions{