From 5d636b00279ec609a004b2ac9596574fe98d3694 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Sun, 2 Nov 2025 23:54:35 +0100 Subject: [PATCH] filtre agenda, page de stats, queryparam add --- frontend/src/app/app.html | 2 +- frontend/src/app/app.routes.ts | 5 + .../src/app/forms/edit-form/edit-form.html | 5 + .../src/app/forms/edit-form/edit-form.scss | 17 + frontend/src/app/forms/edit-form/edit-form.ts | 46 +- frontend/src/app/pages/agenda/agenda.html | 161 ++++- frontend/src/app/pages/agenda/agenda.scss | 384 +++++++++++- frontend/src/app/pages/agenda/agenda.ts | 577 +++++++++++++++++- .../app/pages/agenda/calendar/calendar.html | 172 +++++- .../app/pages/agenda/calendar/calendar.scss | 360 +++++++++++ .../src/app/pages/agenda/calendar/calendar.ts | 180 +++++- frontend/src/app/pages/home/home.html | 12 +- frontend/src/app/pages/home/home.ts | 139 ++++- frontend/src/app/pages/home/menu/menu.html | 2 +- frontend/src/app/pages/stats/stats.html | 131 ++++ frontend/src/app/pages/stats/stats.scss | 353 +++++++++++ frontend/src/app/pages/stats/stats.spec.ts | 23 + frontend/src/app/pages/stats/stats.ts | 298 +++++++++ frontend/src/oedb-types.ts | 6 + frontend/src/styles.scss | 2 +- 20 files changed, 2800 insertions(+), 75 deletions(-) create mode 100644 frontend/src/app/pages/stats/stats.html create mode 100644 frontend/src/app/pages/stats/stats.scss create mode 100644 frontend/src/app/pages/stats/stats.spec.ts create mode 100644 frontend/src/app/pages/stats/stats.ts diff --git a/frontend/src/app/app.html b/frontend/src/app/app.html index deeb430..c2d8a52 100644 --- a/frontend/src/app/app.html +++ b/frontend/src/app/app.html @@ -31,7 +31,7 @@ events docs research nouvelles catégories - stats + stats sources diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 0f38507..10b7184 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -8,6 +8,7 @@ import { NouvellesCategories } from './pages/nouvelles-categories/nouvelles-cate import { UnlocatedEventsPage } from './pages/unlocated-events/unlocated-events'; import { CommunityUpcoming } from './pages/community-upcoming/community-upcoming'; import { EventsDocs } from './pages/events-docs/events-docs'; +import { Stats } from './pages/stats/stats'; export const routes: Routes = [ { @@ -34,6 +35,10 @@ export const routes: Routes = [ path: 'embed', component: Embed }, + { + path: 'stats', + component: Stats + }, { path: 'batch-edit', component: BatchEdit diff --git a/frontend/src/app/forms/edit-form/edit-form.html b/frontend/src/app/forms/edit-form/edit-form.html index 6a08a89..937412a 100644 --- a/frontend/src/app/forms/edit-form/edit-form.html +++ b/frontend/src/app/forms/edit-form/edit-form.html @@ -7,6 +7,11 @@ Presets ({{filteredPresetCount()}}) + @if (presetFilterPrefix) { + + }
@for (g of filteredGroups(); track g.category) { diff --git a/frontend/src/app/forms/edit-form/edit-form.scss b/frontend/src/app/forms/edit-form/edit-form.scss index 1da5abf..664338c 100644 --- a/frontend/src/app/forms/edit-form/edit-form.scss +++ b/frontend/src/app/forms/edit-form/edit-form.scss @@ -51,3 +51,20 @@ form { .group-title { font-weight: 700; opacity: 0.8; margin-bottom: 6px; } .group { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 8px; } +.btn-reset-filter { + margin-left: 10px; + padding: 4px 12px; + background: #667eea; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 0.85rem; + transition: all 0.2s ease; +} + +.btn-reset-filter:hover { + background: #5a67d8; + transform: translateY(-1px); +} + diff --git a/frontend/src/app/forms/edit-form/edit-form.ts b/frontend/src/app/forms/edit-form/edit-form.ts index e28af89..e09b74d 100644 --- a/frontend/src/app/forms/edit-form/edit-form.ts +++ b/frontend/src/app/forms/edit-form/edit-form.ts @@ -20,7 +20,11 @@ export class EditForm implements OnChanges { form: FormGroup; allPresets: Array<{ key: string, label: string, emoji: string, category: string, description?: string, durationHours?: number, properties?: Record }>; - filteredGroups = computed(() => this.groupPresets(this.form.get('what')?.value || '')); + filteredGroups = computed(() => { + // Inclure presetFilterPrefix dans la dépendance du computed pour qu'il se mette à jour + const _ = this.presetFilterPrefix; + return this.groupPresets(this.form.get('what')?.value || ''); + }); currentPreset = computed(() => { const key = this.form.get('what')?.value || ''; return (oedb.presets.what as any)[key] || null; @@ -172,9 +176,31 @@ export class EditForm implements OnChanges { this.extraPropertyKeys.set(extra); } + presetFilterPrefix: string | null = null; + private groupPresets(query: string): Array<{ category: string, items: Array<{ key: string, label: string, emoji: string }> }> { const q = String(query || '').trim().toLowerCase(); + const filterPrefix = this.presetFilterPrefix ? this.presetFilterPrefix.toLowerCase() : null; + const matches = (p: typeof this.allPresets[number]) => { + // Si un préfixe de filtre est défini, filtrer par ce préfixe + if (filterPrefix) { + const keyLower = p.key.toLowerCase(); + // Soit correspondance exacte, soit commence par le préfixe suivi d'un point + if (keyLower === filterPrefix || keyLower.startsWith(filterPrefix + '.')) { + // Si une query est aussi présente, appliquer aussi ce filtre + if (!q) return true; + return ( + keyLower.includes(q) || + (p.label || '').toLowerCase().includes(q) || + (p.description || '').toLowerCase().includes(q) || + (p.category || '').toLowerCase().includes(q) + ); + } + return false; + } + + // Comportement normal sans filtre de préfixe if (!q) return true; return ( p.key.toLowerCase().includes(q) || @@ -357,10 +383,26 @@ export class EditForm implements OnChanges { } resetPresetFilter() { - // Réinitialise le champ what pour afficher tous les presets + // Réinitialise le champ what et le filtre de préfixe pour afficher tous les presets + this.presetFilterPrefix = null; this.form.patchValue({ what: '' }); } + private _filterByPrefix: string | null = null; + + @Input() set filterByPrefix(prefix: string | null) { + this._filterByPrefix = prefix; + this.presetFilterPrefix = prefix; + // Si un préfixe est défini et que le champ what est vide, pré-remplir avec le préfixe + if (prefix && !this.form.get('what')?.value) { + this.form.patchValue({ what: prefix }, { emitEvent: false }); + } + } + + get filterByPrefix(): string | null { + return this._filterByPrefix; + } + onCancelEdit() { this.selected = null; diff --git a/frontend/src/app/pages/agenda/agenda.html b/frontend/src/app/pages/agenda/agenda.html index 8625554..d38720c 100644 --- a/frontend/src/app/pages/agenda/agenda.html +++ b/frontend/src/app/pages/agenda/agenda.html @@ -14,6 +14,58 @@ {{filteredCalendarEvents.length}} évènements
+
+ +
+
+ + @if (currentBbox) { + + } +
+
+ +
+
+ + +
@for (group of groupedEvents; track group.dateKey) {
-
{{formatDayHeader(group.date)}}
+
+
{{formatDayHeader(group.date)}}
+ +
    @for (ev of group.items; track ev.id) { -
  • +
  • @if (getImageForWhat(ev.properties.what)) { @@ -55,15 +116,35 @@ - @if (selectedEvent) { + @if (selectedEvent || (showEditForm && addMode)) {
    -

    Modifier l'événement

    - +

    @if (selectedEvent && selectedEvent.id) { Modifier l'événement } @else { Créer un événement }

    +
    + @if (selectedEvent && selectedEvent.id) { +
    +
    + Durée : {{getEventDuration(selectedEvent)}} +
    + @if (getEventTimeStatus(selectedEvent); as timeStatus) { +
    + Statut : {{timeStatus.startText}} +
    + @if (timeStatus.endText) { +
    + {{timeStatus.endText}} +
    + } + } +
    + }
    @@ -79,11 +160,71 @@
    - - + @if (showMapView) { +
    +
    + +

    Cliquez et glissez pour dessiner un rectangle et filtrer les événements par zone

    +
    +
    +
    + } @else if (groupedByWhatView) { +
    + +

    {{formatDayHeader(groupedByWhatView.date)}}

    +
    +
    + @for (whatGroup of groupedByWhatView.whatGroups; track whatGroup.what) { +
    +
    + + @if (getImageForWhat(whatGroup.what)) { + + } @else if (getEmojiForWhat(whatGroup.what)) { + {{getEmojiForWhat(whatGroup.what)}} + } @else { + 📌 + } + +

    {{whatGroup.what}}

    + ({{whatGroup.items.length}}) +
    +
    + @for (ev of whatGroup.items; track ev.id) { +
    +
    {{(ev.properties.start || ev.properties.when) || '—'}}
    +
    {{ev.properties.label || ev.properties.name || 'Événement'}}
    + @if (ev.properties.description) { +
    {{ev.properties.description}}
    + } + @if (ev.properties.where) { +
    📍 {{ev.properties.where}}
    + } +
    + } +
    +
    + } +
    + } @else { +
    + +
    + + + }
    diff --git a/frontend/src/app/pages/agenda/agenda.scss b/frontend/src/app/pages/agenda/agenda.scss index e263a6d..f0eba3a 100644 --- a/frontend/src/app/pages/agenda/agenda.scss +++ b/frontend/src/app/pages/agenda/agenda.scss @@ -80,15 +80,108 @@ border-bottom: 1px solid #f1f3f5; } +.sidebar-filters { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 12px; +} + +.control-group { + label { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.9rem; + color: #374151; + cursor: pointer; + + input[type="checkbox"] { + cursor: pointer; + } + } +} + +.mode-buttons { + display: flex; + gap: 8px; + padding: 8px; + background: #f8f9fa; + border-radius: 8px; +} + +.mode-btn { + flex: 1; + padding: 10px 16px; + border: 2px solid #e9ecef; + background: white; + border-radius: 6px; + cursor: pointer; + font-size: 1.2rem; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background: #f5f7fb; + border-color: #dee2e6; + } + + &.active { + background: #e8f5e9; + border-color: #4caf50; + box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2); + } + + &.culture-btn.active { + border-color: #4caf50; + border-width: 3px; + } +} + .day-group { padding: 10px 0; } +.day-title-row { + display: flex; + justify-content: space-between; + align-items: center; + margin: 8px 0; +} + .day-title { font-weight: 600; color: #2c3e50; font-size: 0.95rem; - margin: 8px 0; + flex: 1; +} + +.btn-group-view { + background: transparent; + border: 1px solid #dee2e6; + border-radius: 4px; + padding: 4px 8px; + cursor: pointer; + font-size: 14px; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; +} + +.btn-group-view:hover { + background: #f8f9fa; + border-color: #667eea; +} + +.btn-group-view.active { + background: #667eea; + border-color: #667eea; + color: white; } .event-list { @@ -150,6 +243,175 @@ position: relative; } +.agenda-view-controls { + padding: 15px 20px; + background: white; + border-bottom: 1px solid #e9ecef; + display: flex; + justify-content: flex-end; +} + +.view-selector { + padding: 8px 12px; + border: 1px solid #dee2e6; + border-radius: 6px; + background: white; + font-size: 14px; + color: #495057; + cursor: pointer; + transition: all 0.2s ease; + min-width: 150px; +} + +.view-selector:hover { + border-color: #667eea; +} + +.view-selector:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); +} + +/* Vue groupée par catégorie what */ +.grouped-view-header { + display: flex; + align-items: center; + gap: 15px; + padding: 15px 20px; + background: white; + border-bottom: 1px solid #e9ecef; +} + +.btn-back-to-agenda { + padding: 8px 16px; + background: #667eea; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + transition: all 0.2s ease; +} + +.btn-back-to-agenda:hover { + background: #5a67d8; + transform: translateX(-2px); +} + +.grouped-view-title { + margin: 0; + font-size: 1.5rem; + font-weight: 600; + color: #2c3e50; +} + +.grouped-what-view { + padding: 20px; + background: #f8f9fa; + display: flex; + flex-direction: column; + gap: 24px; + max-height: calc(100vh - 80px); + overflow-y: auto; +} + +.what-group-section { + background: white; + border-radius: 12px; + padding: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: 1px solid #e9ecef; +} + +.what-group-header { + display: flex; + align-items: center; + gap: 12px; + padding-bottom: 15px; + border-bottom: 2px solid #e9ecef; + margin-bottom: 20px; +} + +.what-group-icon { + font-size: 24px; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; +} + +.what-group-icon img { + width: 24px; + height: 24px; +} + +.what-group-title { + margin: 0; + font-size: 1.3rem; + font-weight: 600; + color: #2c3e50; + flex: 1; +} + +.what-group-count { + font-size: 0.9rem; + color: #6c757d; + background: #f8f9fa; + padding: 4px 12px; + border-radius: 12px; +} + +.what-group-events { + display: flex; + flex-direction: column; + gap: 16px; +} + +.grouped-event-item { + padding: 16px; + background: #f8f9fa; + border-radius: 8px; + border-left: 4px solid #667eea; + cursor: pointer; + transition: all 0.2s ease; +} + +.grouped-event-item:hover { + background: #eef3ff; + transform: translateX(4px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.grouped-event-time { + font-size: 0.85rem; + color: #6c757d; + font-weight: 500; + margin-bottom: 6px; +} + +.grouped-event-title { + font-size: 1rem; + font-weight: 600; + color: #2c3e50; + margin-bottom: 8px; +} + +.grouped-event-description { + font-size: 0.9rem; + color: #495057; + line-height: 1.5; + margin-bottom: 8px; +} + +.grouped-event-location { + font-size: 0.85rem; + color: #6c757d; + margin-top: 4px; +} + .event-edit-panel { position: fixed; top: 0; @@ -209,6 +471,42 @@ } } +.selected { + padding: 16px 20px; + background: #f8f9fa; + border-bottom: 1px solid #e9ecef; + + .selected-duration { + margin-bottom: 8px; + font-size: 0.9rem; + color: #495057; + } + + .selected-status { + margin-bottom: 8px; + font-size: 0.9rem; + font-weight: 500; + + &.status-past { + color: #dc3545; + } + + &.status-current { + color: #28a745; + } + + &.status-future { + color: #007bff; + } + } + + .selected-end { + font-size: 0.85rem; + color: #6c757d; + font-style: italic; + } +} + .panel-content { flex: 1; padding: 20px; @@ -221,3 +519,87 @@ width: 100%; } } + +// Filtre texte +.filter-input { + width: 100%; + padding: 8px 12px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 0.9rem; + margin-top: 4px; +} + +// Boutons pour la carte +.btn-toggle-map { + width: 100%; + padding: 8px 12px; + background: #667eea; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 0.9rem; + margin-bottom: 8px; + transition: all 0.2s ease; + + &:hover { + background: #5a67d8; + } + + &.active { + background: #4c51bf; + } +} + +.btn-remove-bbox { + width: 100%; + padding: 6px 12px; + background: #e53e3e; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 0.85rem; + margin-top: 4px; + transition: all 0.2s ease; + + &:hover { + background: #c53030; + } +} + +// Vue carte +.map-view-container { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.map-view-header { + padding: 16px; + background: white; + border-bottom: 1px solid #e9ecef; + display: flex; + align-items: center; + gap: 16px; + flex-wrap: wrap; +} + +.map-container { + flex: 1; + width: 100%; + position: relative; + + :global(.maplibregl-map) { + height: 100%; + width: 100%; + } +} + +.map-instructions { + margin: 0; + color: #666; + font-size: 0.9rem; +} diff --git a/frontend/src/app/pages/agenda/agenda.ts b/frontend/src/app/pages/agenda/agenda.ts index 998e3c1..7ba0582 100644 --- a/frontend/src/app/pages/agenda/agenda.ts +++ b/frontend/src/app/pages/agenda/agenda.ts @@ -1,4 +1,4 @@ -import { Component, inject, OnInit } from '@angular/core'; +import { Component, inject, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { OedbApi } from '../../services/oedb-api'; @@ -7,8 +7,10 @@ import { CalendarComponent, CalendarEvent } from './calendar/calendar'; import { Menu } from '../home/menu/menu'; import oedb from '../../../oedb-types'; import { WhatFilterComponent } from '../../shared/what-filter/what-filter'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { subMonths, addMonths, format } from 'date-fns'; +import { Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; interface OedbEvent { id: string; @@ -35,9 +37,12 @@ interface OedbEvent { templateUrl: './agenda.html', styleUrl: './agenda.scss' }) -export class Agenda implements OnInit { +export class Agenda implements OnInit, OnDestroy, AfterViewInit { private oedbApi = inject(OedbApi); private route = inject(ActivatedRoute); + private router = inject(Router); + + @ViewChild('mapContainer', { static: false }) mapContainer!: ElementRef; events: OedbEvent[] = []; filteredEvents: OedbEvent[] = []; @@ -50,24 +55,79 @@ export class Agenda implements OnInit { availableWhatTypes: string[] = []; selectedWhatFilter = 'culture'; selectedDate: Date | null = null; + showEditForm = false; + addMode: string | null = null; + defaultLimit = 4000; + pleinAirMode = false; + viewMode: 'year' | 'month' | 'week' | 'day' | 'list' = 'month'; + groupedByWhatView: { dateKey: string; date: Date; whatGroups: Array<{ what: string; items: OedbEvent[] }> } | null = null; + + // Filtre texte + filterText: string = ''; + private filterTextSubject = new Subject(); + private filterTextSubscription: any; + + // Carte et bbox + showMapView = false; + map: any = null; + mapInitialized = false; + currentBbox: { minLng: number; minLat: number; maxLng: number; maxLat: number } | null = null; + draw: any = null; ngOnInit() { + // Initialiser le filtre texte avec debounce + this.filterTextSubscription = this.filterTextSubject.pipe( + debounceTime(200), + distinctUntilChanged() + ).subscribe(text => { + this.filterEventsByText(text); + }); + // Gérer les paramètres de requête ET les paramètres du fragment this.route.queryParamMap.subscribe(map => { const id = (map.get('id') || '').trim(); const what = (map.get('what') || '').trim(); + const add = (map.get('add') || '').trim(); const limitParam = map.get('limit'); const limit = limitParam ? Number(limitParam) : null; + const viewParam = (map.get('view') || '').trim(); // Définir le filtre what avant de charger les événements if (what) { this.selectedWhatFilter = what; } + // Gérer le paramètre view pour définir le mode d'affichage + if (viewParam && ['year', 'month', 'week', 'day', 'list'].includes(viewParam)) { + this.viewMode = viewParam as 'year' | 'month' | 'week' | 'day' | 'list'; + } + + // Gérer le paramètre add pour activer le formulaire de création + if (add) { + this.addMode = add; + this.showEditForm = true; + // Créer un événement temporaire avec le type what défini + this.selectedEvent = { + id: '', + properties: { + what: add, + label: '', + description: '', + start: new Date().toISOString(), + stop: new Date(Date.now() + 24 * 3600 * 1000).toISOString() + } + }; + } else { + this.addMode = null; + if (!this.selectedEvent) { + this.showEditForm = false; + } + } + if (id) { this.loadSingleEvent(id); } else { - this.loadEvents({ what: what || undefined, limit: limit || undefined }); + this.loadEvents({ what: what || undefined, limit: limit ?? this.defaultLimit }); } }); @@ -81,16 +141,18 @@ export class Agenda implements OnInit { const params = new URLSearchParams(cleanFragment); const what = params.get('what'); console.log('🎯 Paramètre what extrait:', what); + const limitFromFragment = params.get('limit'); + const limitValue = limitFromFragment ? Number(limitFromFragment) : this.defaultLimit; if (what) { this.selectedWhatFilter = what; console.log('✅ Filtre what défini:', this.selectedWhatFilter); - this.loadEvents({ what: what, limit: undefined }); + this.loadEvents({ what: what, limit: limitValue }); } } }); } - loadEvents(overrides: { what?: string; limit?: number } = {}) { + loadEvents(overrides: { what?: string; limit?: number; bbox?: string } = {}) { this.isLoading = true; const today = new Date(); @@ -105,9 +167,10 @@ export class Agenda implements OnInit { // start: format(startDate, 'yyyy-MM-dd'), // end: format(endDate, 'yyyy-MM-dd'), what: "culture", - limit: overrides.limit ?? 2000 + limit: overrides.limit ?? this.defaultLimit }; if (overrides.what) params.what = overrides.what; + if (overrides.bbox) params.bbox = overrides.bbox; console.log('🔍 Chargement des événements avec paramètres:', params); console.log('📅 Plage de dates:', { @@ -203,6 +266,16 @@ export class Agenda implements OnInit { (e.id && e.id === event.id) || (e.properties.label === event.title) ) || null; + if (this.selectedEvent) { + this.showEditForm = true; + this.addMode = null; + } + } + + closeEditForm() { + this.selectedEvent = null; + this.showEditForm = false; + this.addMode = null; } onDateClick(date: Date) { @@ -212,18 +285,6 @@ export class Agenda implements OnInit { this.scrollToDateInSidebar(date); } - onEventSaved() { - this.loadEvents(); - } - - onEventCreated() { - this.loadEvents(); - } - - onEventDeleted() { - this.loadEvents(); - } - // Sidebar helpers updateAvailableWhatTypes() { const set = new Set(); @@ -238,14 +299,32 @@ export class Agenda implements OnInit { console.log('🔍 Application du filtre what:', this.selectedWhatFilter); console.log('📊 Événements avant filtrage:', this.events.length); + let filtered = [...this.events]; + if (this.selectedWhatFilter) { const prefix = this.selectedWhatFilter; - this.filteredEvents = this.events.filter(e => String(e?.properties?.what || '').startsWith(prefix)); - console.log('✅ Événements après filtrage par', prefix + ':', this.filteredEvents.length); + filtered = filtered.filter(e => String(e?.properties?.what || '').startsWith(prefix)); + console.log('✅ Événements après filtrage par', prefix + ':', filtered.length); } else { - this.filteredEvents = [...this.events]; - console.log('📋 Aucun filtre appliqué, tous les événements conservés'); + console.log('📋 Aucun filtre what appliqué'); } + + // Appliquer le filtre texte si présent + if (this.filterText.trim()) { + const searchText = this.filterText.trim().toLowerCase(); + filtered = filtered.filter(e => { + const props = e?.properties || {}; + return ( + (props.label || '').toLowerCase().includes(searchText) || + (props.name || '').toLowerCase().includes(searchText) || + (props.description || '').toLowerCase().includes(searchText) || + (props.what || '').toLowerCase().includes(searchText) || + (props.where || '').toLowerCase().includes(searchText) + ); + }); + } + + this.filteredEvents = filtered; this.convertToCalendarEvents(); if (this.selectedDate) { this.applyDateFilter(); @@ -253,6 +332,15 @@ export class Agenda implements OnInit { this.buildGroupedEvents(); } } + + onFilterTextChange() { + this.filterTextSubject.next(this.filterText); + } + + filterEventsByText(text: string) { + this.filterText = text; + this.applyWhatFilter(); + } onWhatFilterChange(value: string) { this.selectedWhatFilter = value || ''; @@ -285,6 +373,46 @@ export class Agenda implements OnInit { this.groupedEvents = result; } + // Obtenir la catégorie what de premier niveau + getTopLevelWhat(what?: string): string { + if (!what) return 'autre'; + const parts = what.split('.'); + return parts[0] || 'autre'; + } + + // Grouper les événements d'une journée par catégorie what + groupEventsByWhat(items: OedbEvent[]): Array<{ what: string; items: OedbEvent[] }> { + const groups: Record = {}; + for (const ev of items) { + const topLevel = this.getTopLevelWhat(ev.properties?.what); + if (!groups[topLevel]) groups[topLevel] = []; + groups[topLevel].push(ev); + } + return Object.keys(groups) + .sort() + .map(what => ({ what, items: groups[what] })); + } + + // Toggle la vue groupée par what pour une journée + toggleGroupedView(dateKey: string, date: Date, items: OedbEvent[]) { + if (this.groupedByWhatView && this.groupedByWhatView.dateKey === dateKey) { + // Fermer la vue groupée + this.groupedByWhatView = null; + } else { + // Ouvrir la vue groupée pour cette journée + this.groupedByWhatView = { + dateKey, + date, + whatGroups: this.groupEventsByWhat(items) + }; + } + } + + // Retour à la vue agenda normale + backToAgendaView() { + this.groupedByWhatView = null; + } + applyDateFilter() { if (!this.selectedDate) { this.buildGroupedEvents(); @@ -334,6 +462,8 @@ export class Agenda implements OnInit { selectFromSidebar(ev: OedbEvent) { this.selectedEvent = ev; + this.showEditForm = true; + this.addMode = null; } scrollToDateInSidebar(date: Date) { @@ -361,4 +491,405 @@ export class Agenda implements OnInit { this.selectedDate = null; this.buildGroupedEvents(); } + + // Calcul de la durée de l'événement + getEventDuration(event: OedbEvent | null): string { + if (!event) return ''; + const start = this.parseEventDate(event.properties.start || event.properties.when); + const stop = event.properties.stop ? this.parseEventDate(event.properties.stop) : null; + + if (!stop) return 'Durée inconnue'; + + const ms = stop.getTime() - start.getTime(); + if (ms <= 0) return 'Durée invalide'; + + const hours = Math.floor(ms / 3600000); + const days = Math.floor(hours / 24); + const remainingHours = hours % 24; + + if (days > 0 && remainingHours > 0) { + return `${days} jour${days > 1 ? 's' : ''} et ${remainingHours} heure${remainingHours > 1 ? 's' : ''}`; + } else if (days > 0) { + return `${days} jour${days > 1 ? 's' : ''}`; + } else { + return `${remainingHours} heure${remainingHours > 1 ? 's' : ''}`; + } + } + + // Calcul du statut temporel de l'événement + getEventTimeStatus(event: OedbEvent | null): { + status: 'past' | 'current' | 'future'; + startText: string; + endText?: string; + } { + if (!event) return { status: 'future', startText: '' }; + + const now = new Date(); + const start = this.parseEventDate(event.properties.start || event.properties.when); + const stop = event.properties.stop ? this.parseEventDate(event.properties.stop) : null; + + if (stop && now >= start && now <= stop) { + // Événement en cours + const msUntilEnd = stop.getTime() - now.getTime(); + const hoursUntilEnd = Math.floor(msUntilEnd / 3600000); + const daysUntilEnd = Math.floor(hoursUntilEnd / 24); + const remainingHoursUntilEnd = hoursUntilEnd % 24; + + let endText = ''; + if (daysUntilEnd > 0 && remainingHoursUntilEnd > 0) { + endText = `Se termine dans ${daysUntilEnd} jour${daysUntilEnd > 1 ? 's' : ''} et ${remainingHoursUntilEnd} heure${remainingHoursUntilEnd > 1 ? 's' : ''}`; + } else if (daysUntilEnd > 0) { + endText = `Se termine dans ${daysUntilEnd} jour${daysUntilEnd > 1 ? 's' : ''}`; + } else if (remainingHoursUntilEnd > 0) { + endText = `Se termine dans ${remainingHoursUntilEnd} heure${remainingHoursUntilEnd > 1 ? 's' : ''}`; + } else { + const minutesUntilEnd = Math.floor(msUntilEnd / 60000); + endText = `Se termine dans ${minutesUntilEnd} minute${minutesUntilEnd > 1 ? 's' : ''}`; + } + + return { + status: 'current', + startText: 'En cours', + endText + }; + } else if (now < start) { + // Événement dans le futur + const msUntilStart = start.getTime() - now.getTime(); + const hoursUntilStart = Math.floor(msUntilStart / 3600000); + const daysUntilStart = Math.floor(hoursUntilStart / 24); + const remainingHoursUntilStart = hoursUntilStart % 24; + + let startText = ''; + if (daysUntilStart > 0 && remainingHoursUntilStart > 0) { + startText = `Débute dans ${daysUntilStart} jour${daysUntilStart > 1 ? 's' : ''} et ${remainingHoursUntilStart} heure${remainingHoursUntilStart > 1 ? 's' : ''}`; + } else if (daysUntilStart > 0) { + startText = `Débute dans ${daysUntilStart} jour${daysUntilStart > 1 ? 's' : ''}`; + } else if (remainingHoursUntilStart > 0) { + startText = `Débute dans ${remainingHoursUntilStart} heure${remainingHoursUntilStart > 1 ? 's' : ''}`; + } else { + const minutesUntilStart = Math.floor(msUntilStart / 60000); + startText = `Débute dans ${minutesUntilStart} minute${minutesUntilStart > 1 ? 's' : ''}`; + } + + return { + status: 'future', + startText + }; + } else { + // Événement dans le passé + const msSinceEnd = stop ? now.getTime() - stop.getTime() : now.getTime() - start.getTime(); + const hoursSinceEnd = Math.floor(msSinceEnd / 3600000); + const daysSinceEnd = Math.floor(hoursSinceEnd / 24); + const remainingHoursSinceEnd = hoursSinceEnd % 24; + + let startText = ''; + if (daysSinceEnd > 0 && remainingHoursSinceEnd > 0) { + startText = `Terminé il y a ${daysSinceEnd} jour${daysSinceEnd > 1 ? 's' : ''} et ${remainingHoursSinceEnd} heure${remainingHoursSinceEnd > 1 ? 's' : ''}`; + } else if (daysSinceEnd > 0) { + startText = `Terminé il y a ${daysSinceEnd} jour${daysSinceEnd > 1 ? 's' : ''}`; + } else if (remainingHoursSinceEnd > 0) { + startText = `Terminé il y a ${remainingHoursSinceEnd} heure${remainingHoursSinceEnd > 1 ? 's' : ''}`; + } else { + const minutesSinceEnd = Math.floor(msSinceEnd / 60000); + startText = `Terminé il y a ${minutesSinceEnd} minute${minutesSinceEnd > 1 ? 's' : ''}`; + } + + return { + status: 'past', + startText + }; + } + } + + // Basculer entre les modes culture et traffic + toggleMode(mode: 'culture' | 'traffic') { + if (this.selectedWhatFilter === mode) { + // Si on clique sur le mode actif, revenir à culture par défaut + this.selectedWhatFilter = 'culture'; + } else { + this.selectedWhatFilter = mode; + } + // Recharger les événements avec le nouveau filtre + const currentLimit = this.route.snapshot.queryParamMap.get('limit'); + const limitValue = currentLimit ? Number(currentLimit) : this.defaultLimit; + this.loadEvents({ what: this.selectedWhatFilter, limit: limitValue }); + } + + onEventSaved() { + const currentLimit = this.route.snapshot.queryParamMap.get('limit'); + const limitValue = currentLimit ? Number(currentLimit) : this.defaultLimit; + this.loadEvents({ what: this.selectedWhatFilter, limit: limitValue }); + this.selectedEvent = null; + this.showEditForm = false; + this.addMode = null; + } + + onEventCreated() { + const currentLimit = this.route.snapshot.queryParamMap.get('limit'); + const limitValue = currentLimit ? Number(currentLimit) : this.defaultLimit; + this.loadEvents({ what: this.selectedWhatFilter, limit: limitValue }); + this.selectedEvent = null; + this.showEditForm = false; + this.addMode = null; + // Retirer le paramètre add de l'URL + this.router.navigate([], { + relativeTo: this.route, + queryParams: { ...this.route.snapshot.queryParams, add: null }, + queryParamsHandling: 'merge' + }); + } + + onEventDeleted() { + const currentLimit = this.route.snapshot.queryParamMap.get('limit'); + const limitValue = currentLimit ? Number(currentLimit) : this.defaultLimit; + this.loadEvents({ what: this.selectedWhatFilter, limit: limitValue }); + this.selectedEvent = null; + this.showEditForm = false; + } + + ngOnDestroy() { + if (this.filterTextSubscription) { + this.filterTextSubscription.unsubscribe(); + } + if (this.map) { + this.map.remove(); + } + } + + ngAfterViewInit() { + // La carte sera initialisée quand showMapView devient true + } + + toggleMapView() { + this.showMapView = !this.showMapView; + if (this.showMapView && !this.mapInitialized) { + setTimeout(() => { + this.initMap(); + }, 100); + } else if (this.showMapView && this.mapInitialized) { + // Restaurer la bbox si elle existe déjà + setTimeout(() => this.restoreBboxOnMap(), 100); + } + } + + backToAgenda() { + this.showMapView = false; + } + + private async ensureMapLibre(): Promise { + return new Promise((resolve) => { + if ((window as any).maplibregl) return resolve(); + const css = document.createElement('link'); + css.rel = 'stylesheet'; + css.href = 'https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css'; + document.head.appendChild(css); + const s = document.createElement('script'); + s.src = 'https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js'; + s.onload = () => resolve(); + document.head.appendChild(s); + }); + } + + async initMap() { + if (!this.mapContainer) return; + + await this.ensureMapLibre(); + const maplibregl = (window as any).maplibregl; + if (!maplibregl) { + console.error('MapLibre GL n\'a pas pu être chargé'); + return; + } + + this.map = new maplibregl.Map({ + container: this.mapContainer.nativeElement, + style: 'https://tiles.openfreemap.org/styles/liberty', + center: [2.3522, 48.8566], // Paris par défaut + zoom: 5 + }); + + this.map.addControl(new maplibregl.NavigationControl()); + + // Ajouter le contrôle de dessin de rectangle + this.map.on('load', () => { + this.initDrawControl(); + this.mapInitialized = true; + // Restaurer la bbox si elle existe déjà + if (this.currentBbox) { + setTimeout(() => this.restoreBboxOnMap(), 100); + } + }); + } + + initDrawControl() { + if (!this.map) return; + + // Vérifier si les sources et couches existent déjà + if (this.map.getSource('bbox-rect')) { + return; // Déjà initialisé + } + + const maplibregl = (window as any).maplibregl; + + // Créer une source GeoJSON pour le rectangle + this.map.addSource('bbox-rect', { + type: 'geojson', + data: { + type: 'FeatureCollection', + features: [] + } + }); + + // Ajouter les couches pour afficher le rectangle + this.map.addLayer({ + id: 'bbox-fill', + type: 'fill', + source: 'bbox-rect', + paint: { + 'fill-color': '#3bb2d0', + 'fill-opacity': 0.1 + } + }); + + this.map.addLayer({ + id: 'bbox-outline', + type: 'line', + source: 'bbox-rect', + paint: { + 'line-color': '#3bb2d0', + 'line-width': 2, + 'line-dasharray': [2, 2] + } + }); + + // Mode de dessin + let isDrawing = false; + let startPoint: [number, number] | null = null; + + const handleMouseDown = (e: any) => { + if (e.originalEvent.button !== 0) return; // Seulement clic gauche + + const lngLat = e.lngLat; + isDrawing = true; + startPoint = [lngLat.lng, lngLat.lat]; + + const updateRect = (endPoint: [number, number]) => { + if (!startPoint) return; + + const minLng = Math.min(startPoint[0], endPoint[0]); + const maxLng = Math.max(startPoint[0], endPoint[0]); + const minLat = Math.min(startPoint[1], endPoint[1]); + const maxLat = Math.max(startPoint[1], endPoint[1]); + + const rect = { + type: 'FeatureCollection', + features: [{ + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [[ + [minLng, minLat], + [maxLng, minLat], + [maxLng, maxLat], + [minLng, maxLat], + [minLng, minLat] + ]] + } + }] + }; + + (this.map.getSource('bbox-rect') as any).setData(rect); + + this.currentBbox = { minLng, minLat, maxLng, maxLat }; + }; + + const onMouseMove = (moveE: any) => { + if (isDrawing && startPoint) { + updateRect([moveE.lngLat.lng, moveE.lngLat.lat]); + } + }; + + const onMouseUp = (upE: any) => { + if (isDrawing && startPoint) { + updateRect([upE.lngLat.lng, upE.lngLat.lat]); + isDrawing = false; + this.map.off('mousemove', onMouseMove); + this.map.off('mouseup', onMouseUp); + // Recharger les événements avec la bbox + this.loadEventsWithBbox(); + } + }; + + this.map.on('mousemove', onMouseMove); + this.map.on('mouseup', onMouseUp); + }; + + this.map.on('mousedown', handleMouseDown); + + // Changer le curseur pendant le dessin + this.map.getCanvas().style.cursor = 'crosshair'; + } + + removeBbox() { + if (this.map && this.map.getSource('bbox-rect')) { + (this.map.getSource('bbox-rect') as any).setData({ + type: 'FeatureCollection', + features: [] + }); + } + this.currentBbox = null; + // Recharger les événements sans bbox + const currentLimit = this.route.snapshot.queryParamMap.get('limit'); + const limitValue = currentLimit ? Number(currentLimit) : this.defaultLimit; + this.loadEvents({ what: this.selectedWhatFilter, limit: limitValue }); + } + + loadEventsWithBbox() { + if (!this.currentBbox) return; + + const bboxString = `${this.currentBbox.minLng},${this.currentBbox.minLat},${this.currentBbox.maxLng},${this.currentBbox.maxLat}`; + const currentLimit = this.route.snapshot.queryParamMap.get('limit'); + const limitValue = currentLimit ? Number(currentLimit) : this.defaultLimit; + this.loadEvents({ + what: this.selectedWhatFilter, + limit: limitValue, + bbox: bboxString + }); + } + + onViewModeChange(newViewMode: 'year' | 'month' | 'week' | 'day' | 'list') { + this.viewMode = newViewMode; + // Mettre à jour l'URL avec le nouveau viewMode + this.router.navigate([], { + relativeTo: this.route, + queryParams: { + ...this.route.snapshot.queryParams, + view: newViewMode + }, + queryParamsHandling: 'merge' + }); + } + + // Restaurer la bbox sur la carte si elle existe + restoreBboxOnMap() { + if (!this.map || !this.currentBbox || !this.map.getSource('bbox-rect')) return; + + const rect = { + type: 'FeatureCollection', + features: [{ + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [[ + [this.currentBbox.minLng, this.currentBbox.minLat], + [this.currentBbox.maxLng, this.currentBbox.minLat], + [this.currentBbox.maxLng, this.currentBbox.maxLat], + [this.currentBbox.minLng, this.currentBbox.maxLat], + [this.currentBbox.minLng, this.currentBbox.minLat] + ]] + } + }] + }; + + (this.map.getSource('bbox-rect') as any).setData(rect); + } } \ No newline at end of file diff --git a/frontend/src/app/pages/agenda/calendar/calendar.html b/frontend/src/app/pages/agenda/calendar/calendar.html index d685ad2..5dfb6e9 100644 --- a/frontend/src/app/pages/agenda/calendar/calendar.html +++ b/frontend/src/app/pages/agenda/calendar/calendar.html @@ -1,31 +1,59 @@
    - -
    -
    - -

    {{getMonthName()}} {{currentYear}}

    - + + @if (viewMode === 'year') { +
    +
    + +

    {{currentYear}}

    + +
    +
    - -
    +
    +
    + @for (month of yearMonths; track month.getTime()) { +
    +
    {{months[month.getMonth()]}}
    +
    + @for (event of getEventsForMonth(month.getMonth()).slice(0, 3); track event.id) { +
    + {{event.title}} +
    + } + @if (getEventsForMonth(month.getMonth()).length > 3) { +
    +{{getEventsForMonth(month.getMonth()).length - 3}} autres
    + } +
    +
    + } +
    +
    + } - -
    -
    - {{getTotalEventsCount()}} - Total événements + + @if (viewMode === 'month') { +
    +
    + +

    {{getMonthName()}} {{currentYear}}

    + +
    +
    -
    - {{getEventsThisMonth()}} - Ce mois +
    +
    + {{getTotalEventsCount()}} + Total événements +
    +
    + {{getEventsThisMonth()}} + Ce mois +
    -
    - - -
    +
    - @for (day of weekDays; track day) { + @for (day of weekDayNames; track day) {
    {{day}}
    }
    @@ -67,6 +95,108 @@ }
    + } + + + @if (viewMode === 'week') { +
    +
    + +

    {{getWeekRange()}}

    + +
    + +
    +
    +
    +
    + @for (day of weekDays; track day.getTime()) { +
    +
    {{['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'][day.getDay()]}}
    +
    {{day.getDate()}}
    +
    + } +
    +
    + @for (day of weekDays; track day.getTime()) { +
    +
    + @for (event of getEventsForDay(day); track event.id) { +
    +
    {{event.start | date:'HH:mm'}}
    +
    {{event.title}}
    +
    + } +
    +
    + } +
    +
    +
    + } + + + @if (viewMode === 'day') { +
    +
    + +

    {{formatDateTime(selectedDate || currentDate)}}

    + +
    + +
    +
    +
    + @for (hour of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]; track hour) { +
    +
    {{hour.toString().padStart(2, '0')}}:00
    +
    + @for (event of getHourEvents(selectedDate || currentDate, hour); track event.id) { +
    +
    {{event.start | date:'HH:mm'}}@if (event.end) { - {{event.end | date:'HH:mm'}}}
    +
    {{event.title}}
    + @if (event.location) { +
    📍 {{event.location}}
    + } +
    + } +
    +
    + } +
    +
    + } + + + @if (viewMode === 'list') { +
    +

    Liste des événements

    +
    +
    +
    + @for (event of listEvents; track event.id) { +
    +
    +
    {{event.start | date:'dd'}}
    +
    {{event.start | date:'MMM'}}
    +
    +
    +
    {{event.title}}
    +
    {{event.start | date:'dd/MM/yyyy à HH:mm'}}@if (event.end) { - {{event.end | date:'dd/MM/yyyy à HH:mm'}}}
    + @if (event.location) { +
    📍 {{event.location}}
    + } + @if (event.description) { +
    {{event.description}}
    + } +
    +
    + } @empty { +
    Aucun événement
    + } +
    +
    + } @if (showEventDetails && selectedEvent) { diff --git a/frontend/src/app/pages/agenda/calendar/calendar.scss b/frontend/src/app/pages/agenda/calendar/calendar.scss index 3eb9c3a..08e0ff9 100644 --- a/frontend/src/app/pages/agenda/calendar/calendar.scss +++ b/frontend/src/app/pages/agenda/calendar/calendar.scss @@ -560,4 +560,364 @@ .more-events { font-size: 8px; } +} + +/* Vue Annuelle */ +.year-view { + padding: 20px; + background: white; +} + +.year-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} + +.year-month { + border: 1px solid #e9ecef; + border-radius: 8px; + padding: 15px; + cursor: pointer; + transition: all 0.2s ease; + background: white; +} + +.year-month:hover { + background: #f8f9fa; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.year-month-title { + font-size: 18px; + font-weight: 600; + color: #495057; + margin-bottom: 10px; + text-align: center; + padding-bottom: 10px; + border-bottom: 2px solid #e9ecef; +} + +.year-month-events { + display: flex; + flex-direction: column; + gap: 6px; + min-height: 80px; +} + +.year-event-item { + background: #667eea; + color: white; + padding: 6px 10px; + border-radius: 4px; + font-size: 12px; + cursor: pointer; + transition: all 0.2s ease; +} + +.year-event-item:hover { + background: #5a67d8; +} + +.year-more-events { + background: #e9ecef; + color: #6c757d; + padding: 4px 8px; + border-radius: 4px; + font-size: 11px; + text-align: center; +} + +/* Vue Semaine */ +.week-view { + padding: 20px; + background: white; +} + +.week-grid { + display: flex; + flex-direction: column; +} + +.week-header { + display: grid; + grid-template-columns: repeat(7, 1fr); + background: #f8f9fa; + border-bottom: 2px solid #e9ecef; +} + +.week-day-header { + padding: 15px; + text-align: center; + border-right: 1px solid #e9ecef; +} + +.week-day-header:last-child { + border-right: none; +} + +.week-day-header.today { + background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); + border-bottom: 3px solid #2196f3; +} + +.week-day-header.weekend { + background: #f1f3f5; +} + +.week-day-name { + font-size: 12px; + font-weight: 600; + color: #6c757d; + text-transform: uppercase; + margin-bottom: 5px; +} + +.week-day-number { + font-size: 20px; + font-weight: 700; + color: #495057; +} + +.week-day-header.today .week-day-number { + color: #2196f3; +} + +.week-body { + display: grid; + grid-template-columns: repeat(7, 1fr); + min-height: 400px; +} + +.week-day-column { + border-right: 1px solid #e9ecef; + border-bottom: 1px solid #e9ecef; + padding: 10px; + min-height: 400px; + background: white; +} + +.week-day-column:last-child { + border-right: none; +} + +.week-day-events { + display: flex; + flex-direction: column; + gap: 6px; +} + +.week-event-item { + background: #667eea; + color: white; + padding: 8px; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; + border-left: 3px solid #5a67d8; +} + +.week-event-item:hover { + background: #5a67d8; + transform: translateX(2px); +} + +.week-event-time { + font-size: 11px; + opacity: 0.9; + margin-bottom: 4px; +} + +.week-event-title { + font-size: 13px; + font-weight: 500; +} + +/* Vue Jour */ +.day-view { + padding: 20px; + background: white; +} + +.day-hours { + display: flex; + flex-direction: column; + max-height: 600px; + overflow-y: auto; +} + +.day-hour-row { + display: grid; + grid-template-columns: 80px 1fr; + border-bottom: 1px solid #e9ecef; + min-height: 60px; +} + +.day-hour-label { + padding: 10px; + font-weight: 600; + color: #495057; + border-right: 1px solid #e9ecef; + background: #f8f9fa; + text-align: right; +} + +.day-hour-events { + padding: 10px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.day-event-item { + background: #667eea; + color: white; + padding: 10px; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; + border-left: 4px solid #5a67d8; +} + +.day-event-item:hover { + background: #5a67d8; + transform: translateX(4px); +} + +.day-event-time { + font-size: 12px; + opacity: 0.9; + margin-bottom: 4px; +} + +.day-event-title { + font-size: 14px; + font-weight: 500; + margin-bottom: 4px; +} + +.day-event-location { + font-size: 11px; + opacity: 0.8; +} + +/* Vue Liste */ +.list-view { + padding: 20px; + background: white; +} + +.list-events { + display: flex; + flex-direction: column; + gap: 12px; +} + +.list-event-item { + display: flex; + gap: 15px; + padding: 15px; + border: 1px solid #e9ecef; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + background: white; +} + +.list-event-item:hover { + background: #f8f9fa; + transform: translateX(4px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.list-event-date { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-width: 60px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 8px; + padding: 10px; +} + +.list-event-day { + font-size: 24px; + font-weight: 700; + line-height: 1; +} + +.list-event-month { + font-size: 12px; + text-transform: uppercase; + opacity: 0.9; + margin-top: 4px; +} + +.list-event-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 6px; +} + +.list-event-title { + font-size: 16px; + font-weight: 600; + color: #2c3e50; +} + +.list-event-time { + font-size: 13px; + color: #6c757d; +} + +.list-event-location { + font-size: 12px; + color: #495057; +} + +.list-event-description { + font-size: 13px; + color: #6c757d; + margin-top: 4px; + line-height: 1.4; +} + +.list-empty { + text-align: center; + padding: 40px; + color: #6c757d; + font-size: 16px; +} + +/* Responsive pour les nouvelles vues */ +@media (max-width: 768px) { + .year-grid { + grid-template-columns: repeat(2, 1fr); + gap: 15px; + } + + .week-body { + min-height: 300px; + } + + .week-day-column { + min-height: 300px; + } + + .day-hours { + max-height: 500px; + } + + .day-hour-row { + grid-template-columns: 60px 1fr; + } + + .day-hour-label { + font-size: 12px; + padding: 8px; + } } \ No newline at end of file diff --git a/frontend/src/app/pages/agenda/calendar/calendar.ts b/frontend/src/app/pages/agenda/calendar/calendar.ts index 3aaf349..4ca7927 100644 --- a/frontend/src/app/pages/agenda/calendar/calendar.ts +++ b/frontend/src/app/pages/agenda/calendar/calendar.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core'; +import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core'; import { CommonModule } from '@angular/common'; export interface CalendarEvent { @@ -19,8 +19,9 @@ export interface CalendarEvent { templateUrl: 'calendar.html', styleUrl: 'calendar.scss' }) -export class CalendarComponent implements OnInit, OnDestroy { +export class CalendarComponent implements OnInit, OnDestroy, OnChanges { @Input() events: CalendarEvent[] = []; + @Input() viewMode: 'year' | 'month' | 'week' | 'day' | 'list' = 'month'; @Output() eventClick = new EventEmitter(); @Output() dateClick = new EventEmitter(); @@ -30,7 +31,7 @@ export class CalendarComponent implements OnInit, OnDestroy { showEventDetails = false; // Configuration du calendrier - weekDays = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']; + weekDayNames = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']; months = [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' @@ -39,6 +40,9 @@ export class CalendarComponent implements OnInit, OnDestroy { calendarDays: Date[] = []; currentMonth: number; currentYear: number; + weekDays: Date[] = []; + yearMonths: Date[] = []; + listEvents: CalendarEvent[] = []; constructor() { this.currentMonth = this.currentDate.getMonth(); @@ -46,7 +50,33 @@ export class CalendarComponent implements OnInit, OnDestroy { } ngOnInit() { - this.generateCalendar(); + this.updateView(); + } + + ngOnChanges(changes: SimpleChanges) { + if (changes['viewMode'] || changes['events']) { + this.updateView(); + } + } + + updateView() { + switch (this.viewMode) { + case 'year': + this.generateYear(); + break; + case 'month': + this.generateCalendar(); + break; + case 'week': + this.generateWeek(); + break; + case 'day': + this.generateDay(); + break; + case 'list': + this.generateList(); + break; + } } ngOnDestroy() { @@ -123,7 +153,7 @@ export class CalendarComponent implements OnInit, OnDestroy { this.currentMonth = 11; this.currentYear--; } - this.generateCalendar(); + this.updateView(); } nextMonth() { @@ -132,7 +162,7 @@ export class CalendarComponent implements OnInit, OnDestroy { this.currentMonth = 0; this.currentYear++; } - this.generateCalendar(); + this.updateView(); } goToToday() { @@ -161,4 +191,142 @@ export class CalendarComponent implements OnInit, OnDestroy { getObjectKeys(obj: any): string[] { return Object.keys(obj || {}); } + + generateYear() { + this.yearMonths = []; + for (let month = 0; month < 12; month++) { + this.yearMonths.push(new Date(this.currentYear, month, 1)); + } + } + + generateWeek() { + this.weekDays = []; + const today = new Date(); + const dayOfWeek = today.getDay(); + const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; + const monday = new Date(today); + monday.setDate(today.getDate() + mondayOffset); + + for (let i = 0; i < 7; i++) { + const date = new Date(monday); + date.setDate(monday.getDate() + i); + this.weekDays.push(date); + } + } + + generateDay() { + this.selectedDate = new Date(this.currentDate); + } + + generateList() { + this.listEvents = [...this.events].sort((a, b) => + a.start.getTime() - b.start.getTime() + ); + } + + getWeekStartDate(): Date { + const today = this.selectedDate ? new Date(this.selectedDate) : new Date(this.currentDate); + const dayOfWeek = today.getDay(); + const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; + const monday = new Date(today); + monday.setDate(today.getDate() + mondayOffset); + return monday; + } + + getWeekRange(): string { + const start = this.getWeekStartDate(); + const end = new Date(start); + end.setDate(start.getDate() + 6); + return `${this.formatDateShort(start)} - ${this.formatDateShort(end)}`; + } + + formatDateShort(date: Date): string { + return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`; + } + + formatDateTime(date: Date): string { + return date.toLocaleDateString('fr-FR', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + }); + } + + previousWeek() { + const current = new Date(this.currentDate); + current.setDate(current.getDate() - 7); + this.currentDate = current; + this.generateWeek(); + } + + nextWeek() { + const current = new Date(this.currentDate); + current.setDate(current.getDate() + 7); + this.currentDate = current; + this.generateWeek(); + } + + previousDay() { + const current = new Date(this.currentDate); + current.setDate(current.getDate() - 1); + this.currentDate = current; + this.generateDay(); + } + + nextDay() { + const current = new Date(this.currentDate); + current.setDate(current.getDate() + 1); + this.currentDate = current; + this.generateDay(); + } + + previousYear() { + this.currentYear--; + this.generateYear(); + } + + nextYear() { + this.currentYear++; + this.generateYear(); + } + + getEventsForMonth(month: number): CalendarEvent[] { + return this.events.filter(event => { + const eventDate = new Date(event.start); + return eventDate.getMonth() === month && + eventDate.getFullYear() === this.currentYear; + }); + } + + getEventsForWeek(): CalendarEvent[] { + const weekStart = this.getWeekStartDate(); + const weekEnd = new Date(weekStart); + weekEnd.setDate(weekStart.getDate() + 7); + + return this.events.filter(event => { + const eventDate = new Date(event.start); + return eventDate >= weekStart && eventDate < weekEnd; + }); + } + + getEventsForDay(date: Date): CalendarEvent[] { + return this.events.filter(event => { + const eventDate = new Date(event.start); + return eventDate.toDateString() === date.toDateString(); + }); + } + + getHourEvents(date: Date, hour: number): CalendarEvent[] { + return this.getEventsForDay(date).filter(event => { + const eventDate = new Date(event.start); + return eventDate.getHours() === hour; + }); + } + + selectMonth(month: number, year: number) { + this.currentMonth = month; + this.currentYear = year; + this.dateClick.emit(new Date(year, month, 1)); + } } diff --git a/frontend/src/app/pages/home/home.html b/frontend/src/app/pages/home/home.html index 0c12ff8..c251e1c 100644 --- a/frontend/src/app/pages/home/home.html +++ b/frontend/src/app/pages/home/home.html @@ -308,8 +308,7 @@ @if (toasts.length) { -
    +
    @for (t of toasts; track t.id) {
    - @if (selected && showEditForm) { + @if ((selected || (showEditForm && addMode)) && showEditForm) {
    -

    Détails

    - +

    @if (selected && selected.id) { Détails } @else { Créer un événement }

    +
    diff --git a/frontend/src/app/pages/home/home.ts b/frontend/src/app/pages/home/home.ts index 35a4cf9..e9a0543 100644 --- a/frontend/src/app/pages/home/home.ts +++ b/frontend/src/app/pages/home/home.ts @@ -34,7 +34,7 @@ export class Home implements OnInit, OnDestroy { OedbApi = inject(OedbApi); route = inject(ActivatedRoute); - private router = inject(Router); + router = inject(Router); private osmAuth = inject(OsmAuth); features: Array = []; @@ -45,6 +45,7 @@ export class Home implements OnInit, OnDestroy { showEditForm = false; showOptions = false; pleinAirMode = false; + addMode: string | null = null; civilianMode = false; toasts: Array<{ id: number, type: 'success' | 'error' | 'info', message: string }> = []; @@ -107,18 +108,46 @@ export class Home implements OnInit, OnDestroy { this.route.queryParamMap.subscribe(map => { const id = (map.get('id') || '').trim(); const what = (map.get('what') || 'culture').trim(); + const add = (map.get('add') || '').trim(); const pleinAir = (map.get('pleinair') || '').trim().toLowerCase(); const preset = (map.get('preset') || '').trim().toLowerCase(); const limitParam = map.get('limit'); const limit = limitParam ? Number(limitParam) : null; + + // Gérer le paramètre add pour activer le formulaire de création + if (add) { + this.addMode = add; + this.selectedWhatFilter = add; + this.showEditForm = true; + this.showOptions = true; // Afficher aussi le panel d'options + // Créer un événement temporaire avec le type what défini + this.selected = { + id: null, + properties: { + what: add, + label: '', + description: '', + start: new Date().toISOString(), + stop: new Date(Date.now() + 24 * 3600 * 1000).toISOString() + }, + geometry: { type: 'Point', coordinates: [0, 0] } + }; + } else { + this.addMode = null; + // Si pas de paramètre add, s'assurer que showEditForm est géré correctement + if (!this.selected) { + this.showEditForm = false; + } + } + // Charger selon les query params if (id) { this.loadSingleEvent(id); } else { this.loadEvents({what: what || undefined, limit: limit || undefined}); } - // Appliquer filtre par what côté client si fourni - if (what) { + // Appliquer filtre par what côté client si fourni (sauf si add est défini) + if (what && !add) { this.selectedWhatFilter = what; } // Activer mode plein air via query param @@ -137,6 +166,46 @@ export class Home implements OnInit, OnDestroy { this.enablePleinAirMode(); } }); + + // Gérer aussi les paramètres du fragment (pour les URLs avec #) + this.route.fragment.subscribe(fragment => { + console.log('🔗 Fragment reçu:', fragment); + if (fragment) { + // Nettoyer le fragment en supprimant le & initial s'il existe + const cleanFragment = fragment.startsWith('&') ? fragment.substring(1) : fragment; + console.log('🧹 Fragment nettoyé:', cleanFragment); + const params = new URLSearchParams(cleanFragment); + const add = params.get('add'); + const what = params.get('what'); + console.log('🎯 Paramètre add extrait:', add); + + // Gérer le paramètre add du fragment + if (add) { + this.addMode = add; + this.selectedWhatFilter = add; + this.showEditForm = true; + this.showOptions = true; // Afficher aussi le panel d'options + // Créer un événement temporaire avec le type what défini + this.selected = { + id: null, + properties: { + what: add, + label: '', + description: '', + start: new Date().toISOString(), + stop: new Date(Date.now() + 24 * 3600 * 1000).toISOString() + }, + geometry: { type: 'Point', coordinates: [0, 0] } + }; + console.log('✅ Formulaire de création activé pour:', add); + } else if (what) { + this.selectedWhatFilter = what; + console.log('✅ Filtre what défini:', this.selectedWhatFilter); + this.loadEvents({ what: what }); + } + } + }); + this.startAutoReload(); this.loadEvents({what: "culture", limit: 100}); @@ -475,7 +544,27 @@ export class Home implements OnInit, OnDestroy { onCreated(_res: any) { this.selected = null; + this.showEditForm = false; + this.addMode = null; this.loadEvents(); + // Retirer le paramètre add de l'URL (query params ou fragment) + if (this.route.snapshot.queryParams['add']) { + this.router.navigate([], { + relativeTo: this.route, + queryParams: { ...this.route.snapshot.queryParams, add: null }, + queryParamsHandling: 'merge' + }); + } else if (this.route.snapshot.fragment && this.route.snapshot.fragment.includes('add=')) { + // Nettoyer le fragment s'il contient add + const fragment = this.route.snapshot.fragment || ''; + const params = new URLSearchParams(fragment.startsWith('&') ? fragment.substring(1) : fragment); + params.delete('add'); + const newFragment = params.toString(); + this.router.navigate([], { + relativeTo: this.route, + fragment: newFragment ? '?' + newFragment : undefined + }); + } } onDeleted(_res: any) { @@ -568,8 +657,52 @@ export class Home implements OnInit, OnDestroy { this.loadEvents(); } + closeEditForm() { + this.selected = null; + this.showEditForm = false; + this.addMode = null; + // Retirer le paramètre add de l'URL si présent (query params ou fragment) + if (this.route.snapshot.queryParams['add']) { + this.router.navigate([], { + relativeTo: this.route, + queryParams: { ...this.route.snapshot.queryParams, add: null }, + queryParamsHandling: 'merge' + }); + } else if (this.route.snapshot.fragment && this.route.snapshot.fragment.includes('add=')) { + // Nettoyer le fragment s'il contient add + const fragment = this.route.snapshot.fragment || ''; + const params = new URLSearchParams(fragment.startsWith('&') ? fragment.substring(1) : fragment); + params.delete('add'); + const newFragment = params.toString(); + this.router.navigate([], { + relativeTo: this.route, + fragment: newFragment ? '?' + newFragment : undefined + }); + } + } + onCanceled() { this.showEditForm = false; + this.addMode = null; + this.selected = null; + // Retirer le paramètre add de l'URL si présent (query params ou fragment) + if (this.route.snapshot.queryParams['add']) { + this.router.navigate([], { + relativeTo: this.route, + queryParams: { ...this.route.snapshot.queryParams, add: null }, + queryParamsHandling: 'merge' + }); + } else if (this.route.snapshot.fragment && this.route.snapshot.fragment.includes('add=')) { + // Nettoyer le fragment s'il contient add + const fragment = this.route.snapshot.fragment || ''; + const params = new URLSearchParams(fragment.startsWith('&') ? fragment.substring(1) : fragment); + params.delete('add'); + const newFragment = params.toString(); + this.router.navigate([], { + relativeTo: this.route, + fragment: newFragment ? '?' + newFragment : undefined + }); + } } ngAfterViewInit() { diff --git a/frontend/src/app/pages/home/menu/menu.html b/frontend/src/app/pages/home/menu/menu.html index b4e0fde..d339c06 100644 --- a/frontend/src/app/pages/home/menu/menu.html +++ b/frontend/src/app/pages/home/menu/menu.html @@ -26,7 +26,7 @@

    Intégration & API

    📚 Documentation API - 📊 Statistiques + 📊 Statistiques
    diff --git a/frontend/src/app/pages/stats/stats.html b/frontend/src/app/pages/stats/stats.html new file mode 100644 index 0000000..9193ee6 --- /dev/null +++ b/frontend/src/app/pages/stats/stats.html @@ -0,0 +1,131 @@ +
    +
    +

    Statistiques OEDB

    +

    Analyse de {{events.length}} événements

    +
    + + @if (isLoading) { +
    + +

    Chargement des statistiques...

    +
    + } @else { +
    + + +
    +

    📊 Genres d'événements les plus fréquents

    +
    + @for (item of whatCounts; track item.what) { +
    + {{item.emoji}} + {{item.label}} + {{item.count}} +
    + } +
    +
    + + +
    +

    📅 Histogramme de création des événements (par mois)

    +
    + @for (item of creationHistogram; track item.month) { +
    +
    + {{item.count}} +
    +
    {{formatMonth(item.month)}}
    +
    + } +
    +
    + + +
    +

    📅 Histogramme de création des événements (par semaine)

    +
    + @for (item of creationHistogramByWeek; track item.week) { +
    +
    + {{item.count}} +
    +
    {{formatWeek(item.week)}}
    +
    + } +
    +
    + + +
    +

    ⏱️ Répartition des durées (en jours)

    +
    + @for (item of durationDistribution; track item.days) { +
    +
    + {{item.days === '0' ? '0 jour' : item.days === '1' ? '1 jour' : item.days + ' jours'}} + {{item.count}} +
    +
    + } +
    +
    + + +
    +

    👥 Réunions et événements de personnes

    +
    + @for (item of meetingTypes; track item.what) { +
    + {{item.emoji}} + {{item.label}} + {{item.count}} +
    + } @empty { +

    Aucun type de réunion trouvé

    + } +
    +
    + + +
    +

    ⚠️ Signalements et incidents

    +
    + @for (item of reportingTypes; track item.what) { +
    + {{item.emoji}} + {{item.label}} + {{item.count}} +
    + } @empty { +

    Aucun type de signalement trouvé

    + } +
    +
    + + +
    +

    🆕 10 événements les plus récemment créés

    +
    + @for (event of recentEvents; track event.id || event.properties?.what) { +
    +
    + {{event.properties?.label || event.properties?.name || 'Événement sans nom'}} + {{formatDate(event.properties?.createdate || '')}} +
    +
    + {{event.properties && event.properties.what ? event.properties.what : 'non-défini'}} + @if (event.properties && event.properties.where) { + 📍 {{event.properties.where}} + } +
    +
    + } @empty { +

    Aucun événement récent

    + } +
    +
    + +
    + } +
    diff --git a/frontend/src/app/pages/stats/stats.scss b/frontend/src/app/pages/stats/stats.scss new file mode 100644 index 0000000..b14f02c --- /dev/null +++ b/frontend/src/app/pages/stats/stats.scss @@ -0,0 +1,353 @@ +.stats-page { + min-height: 100vh; + background: #f8f9fa; + padding: 20px; +} + +.stats-header { + background: white; + padding: 30px; + border-radius: 12px; + margin-bottom: 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.stats-header h1 { + margin: 0 0 10px 0; + color: #2c3e50; + font-size: 2rem; +} + +.stats-subtitle { + margin: 0; + color: #6c757d; + font-size: 1.1rem; +} + +.loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 20px; + background: white; + border-radius: 12px; +} + +.loading-spinner { + width: 40px; + height: 40px; + border: 4px solid #e9ecef; + border-top: 4px solid #667eea; + border-radius: 50%; + animation: spin 1s linear infinite; + margin-bottom: 20px; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.stats-content { + display: flex; + flex-direction: column; + gap: 24px; +} + +.stats-section { + background: white; + padding: 24px; + border-radius: 12px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.stats-section h2 { + margin: 0 0 20px 0; + color: #2c3e50; + font-size: 1.5rem; + border-bottom: 2px solid #e9ecef; + padding-bottom: 10px; +} + +/* Liste des genres */ +.what-counts-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.what-count-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + background: #f8f9fa; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + border-left: 4px solid transparent; +} + +.what-count-item:hover { + background: #eef3ff; + border-left-color: #667eea; + transform: translateX(4px); +} + +.what-emoji { + font-size: 1.5rem; + width: 32px; + text-align: center; +} + +.what-name { + flex: 1; + font-weight: 500; + color: #2c3e50; +} + +.what-count-badge { + background: #667eea; + color: white; + padding: 4px 12px; + border-radius: 12px; + font-weight: 600; + font-size: 0.9rem; +} + +/* Histogramme */ +.histogram { + display: flex; + align-items: flex-end; + gap: 8px; + height: 300px; + padding: 20px; + background: #f8f9fa; + border-radius: 8px; + overflow-x: auto; +} + +.histogram-bar-container { + flex: 1; + min-width: 60px; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.histogram-bar { + width: 100%; + background: linear-gradient(to top, #667eea, #764ba2); + border-radius: 4px 4px 0 0; + position: relative; + min-height: 20px; + display: flex; + align-items: flex-start; + justify-content: center; + padding-top: 4px; + transition: all 0.3s ease; +} + +.histogram-bar:hover { + opacity: 0.8; + transform: scaleY(1.05); +} + +.histogram-value { + color: white; + font-size: 0.75rem; + font-weight: 600; +} + +.histogram-label { + font-size: 0.75rem; + color: #6c757d; + text-align: center; + writing-mode: horizontal-tb; + transform: rotate(-45deg); + transform-origin: center; + white-space: nowrap; +} + +/* Distribution des durées */ +.duration-chart { + display: flex; + flex-direction: column; + gap: 12px; + padding: 20px; + background: #f8f9fa; + border-radius: 8px; +} + +.duration-bar-container { + display: flex; + align-items: center; + gap: 12px; +} + +.duration-bar { + background: linear-gradient(to right, #667eea, #764ba2); + height: 40px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 12px; + color: white; + font-weight: 600; + min-width: 100px; + transition: all 0.3s ease; +} + +.duration-bar:hover { + opacity: 0.8; + transform: scaleX(1.02); +} + +.duration-label { + font-size: 0.85rem; +} + +.duration-value { + font-size: 0.9rem; + background: rgba(255, 255, 255, 0.2); + padding: 2px 8px; + border-radius: 12px; +} + +/* Liste des types */ +.type-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 12px; +} + +.type-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + background: #f8f9fa; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + border: 1px solid #e9ecef; +} + +.type-item:hover { + background: #eef3ff; + border-color: #667eea; + transform: translateY(-2px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.type-emoji { + font-size: 1.5rem; + width: 32px; + text-align: center; +} + +.type-label { + flex: 1; + font-weight: 500; + color: #2c3e50; + font-size: 0.95rem; +} + +.type-count { + background: #667eea; + color: white; + padding: 4px 10px; + border-radius: 12px; + font-weight: 600; + font-size: 0.85rem; +} + +/* Événements récents */ +.recent-events { + display: flex; + flex-direction: column; + gap: 12px; +} + +.recent-event-item { + padding: 16px; + background: #f8f9fa; + border-radius: 8px; + border-left: 4px solid #667eea; + transition: all 0.2s ease; +} + +.recent-event-item:hover { + background: #eef3ff; + transform: translateX(4px); +} + +.recent-event-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.recent-event-title { + font-weight: 600; + color: #2c3e50; + font-size: 1rem; +} + +.recent-event-date { + font-size: 0.85rem; + color: #6c757d; +} + +.recent-event-meta { + display: flex; + gap: 12px; + font-size: 0.85rem; + color: #6c757d; +} + +.recent-event-what { + background: #dee2e6; + padding: 2px 8px; + border-radius: 4px; +} + +.recent-event-where { + color: #495057; +} + +.empty-message { + text-align: center; + padding: 40px; + color: #6c757d; + font-style: italic; +} + +/* Responsive */ +@media (max-width: 768px) { + .stats-page { + padding: 10px; + } + + .stats-section { + padding: 16px; + } + + .histogram { + height: 200px; + gap: 4px; + } + + .histogram-bar-container { + min-width: 40px; + } + + .type-list { + grid-template-columns: 1fr; + } +} + diff --git a/frontend/src/app/pages/stats/stats.spec.ts b/frontend/src/app/pages/stats/stats.spec.ts new file mode 100644 index 0000000..653c326 --- /dev/null +++ b/frontend/src/app/pages/stats/stats.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Stats } from './stats'; + +describe('Stats', () => { + let component: Stats; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Stats] + }) + .compileComponents(); + + fixture = TestBed.createComponent(Stats); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/pages/stats/stats.ts b/frontend/src/app/pages/stats/stats.ts new file mode 100644 index 0000000..dbbbf5a --- /dev/null +++ b/frontend/src/app/pages/stats/stats.ts @@ -0,0 +1,298 @@ +import { Component, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Router } from '@angular/router'; +import { OedbApi } from '../../services/oedb-api'; +import oedb from '../../../oedb-types'; + +interface Event { + id?: string; + properties: { + what?: string; + createdate?: string; + start?: string; + stop?: string; + label?: string; + name?: string; + where?: string; + [key: string]: any; + }; + geometry?: any; +} + +interface WhatCount { + what: string; + count: number; + label: string; + emoji: string; +} + +interface CreationMonth { + month: string; + count: number; +} + +interface CreationWeek { + week: string; + count: number; +} + +interface DurationBucket { + days: string; + count: number; +} + +@Component({ + selector: 'app-stats', + standalone: true, + imports: [CommonModule], + templateUrl: './stats.html', + styleUrl: './stats.scss' +}) +export class Stats implements OnInit { + private oedbApi = inject(OedbApi); + private router = inject(Router); + + isLoading = true; + events: Event[] = []; + whatCounts: WhatCount[] = []; + creationHistogram: CreationMonth[] = []; + creationHistogramByWeek: CreationWeek[] = []; + durationDistribution: DurationBucket[] = []; + recentEvents: Event[] = []; + + meetingTypes: WhatCount[] = []; + reportingTypes: WhatCount[] = []; + + ngOnInit() { + this.loadStats(); + } + + loadStats() { + this.isLoading = true; + this.oedbApi.getEvents({ limit: 10000 }).subscribe({ + next: (response: any) => { + this.events = Array.isArray(response?.features) ? response.features : []; + this.processStats(); + this.isLoading = false; + }, + error: (err) => { + console.error('Error loading stats:', err); + this.isLoading = false; + } + }); + } + + processStats() { + // Compter par catégorie what + const whatMap: Record = {}; + for (const event of this.events) { + const what = event.properties?.what || 'non-défini'; + whatMap[what] = (whatMap[what] || 0) + 1; + } + + this.whatCounts = Object.entries(whatMap) + .map(([what, count]) => { + const preset = (oedb.presets.what as any)[what]; + return { + what, + count, + label: preset?.label || what, + emoji: preset?.emoji || '📌' + }; + }) + .sort((a, b) => b.count - a.count) + .slice(0, 20); // Top 20 + + // Histogramme de création par mois + const creationMap: Record = {}; + for (const event of this.events) { + const createdate = event.properties?.createdate; + if (createdate) { + const date = new Date(createdate); + const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`; + creationMap[monthKey] = (creationMap[monthKey] || 0) + 1; + } + } + this.creationHistogram = Object.entries(creationMap) + .sort((a, b) => a[0].localeCompare(b[0])) + .map(([month, count]) => ({ month, count })); + + // Histogramme de création par semaine + const creationWeekMap: Record = {}; + for (const event of this.events) { + const createdate = event.properties?.createdate; + if (createdate) { + const date = new Date(createdate); + const weekKey = this.getWeekKey(date); + creationWeekMap[weekKey] = (creationWeekMap[weekKey] || 0) + 1; + } + } + this.creationHistogramByWeek = Object.entries(creationWeekMap) + .sort((a, b) => a[0].localeCompare(b[0])) + .map(([week, count]) => ({ week, count })); + + // Distribution des durées + const durationMap: Record = { + '0': 0, // 0 jour + '1': 0, // 1 jour + '2-7': 0, // 2-7 jours + '8-30': 0, // 8-30 jours + '31-90': 0, // 31-90 jours + '90+': 0 // Plus de 90 jours + }; + for (const event of this.events) { + const start = event.properties?.start; + const stop = event.properties?.stop; + if (start && stop) { + const startDate = new Date(start); + const stopDate = new Date(stop); + const days = Math.floor((stopDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)); + if (days === 0) durationMap['0']++; + else if (days === 1) durationMap['1']++; + else if (days >= 2 && days <= 7) durationMap['2-7']++; + else if (days >= 8 && days <= 30) durationMap['8-30']++; + else if (days >= 31 && days <= 90) durationMap['31-90']++; + else durationMap['90+']++; + } + } + this.durationDistribution = Object.entries(durationMap) + .map(([days, count]) => ({ days, count })); + + // 10 événements les plus récents + this.recentEvents = [...this.events] + .filter(e => e.properties?.createdate) + .sort((a, b) => { + const dateA = new Date(a.properties.createdate || 0).getTime(); + const dateB = new Date(b.properties.createdate || 0).getTime(); + return dateB - dateA; + }) + .slice(0, 10); + + // Identifier les types de réunions et signalements + this.identifySpecialTypes(); + } + + identifySpecialTypes() { + const whatPresets = oedb.presets.what as Record; + const meetingKeywords = ['meeting', 'conférence', 'conférence', 'réunion', 'event', 'gathering', 'assembly']; + const reportingKeywords = ['signalement', 'incident', 'accident', 'obstacle', 'interruption', 'damage', 'obstruction']; + + const meetingSet = new Set(); + const reportingSet = new Set(); + + for (const [key, preset] of Object.entries(whatPresets)) { + const label = (preset.label || '').toLowerCase(); + const description = (preset.description || '').toLowerCase(); + const what = key.toLowerCase(); + + // Vérifier si c'est une réunion + const isMeeting = meetingKeywords.some(kw => + label.includes(kw) || description.includes(kw) || what.includes(kw) + ) || key.includes('community') || key.includes('culture'); + + // Vérifier si c'est un signalement + const isReporting = reportingKeywords.some(kw => + label.includes(kw) || description.includes(kw) || what.includes(kw) + ) || key.includes('traffic') || key.includes('hazard') || key.includes('weather'); + + // Vérifier si présence ou distance + if (isMeeting) { + const isOnline = label.includes('en ligne') || label.includes('online') || + description.includes('en ligne') || description.includes('online') || + what.includes('online') || preset.properties?.online; + + if (this.events.some(e => e.properties?.what === key)) { + meetingSet.add(key); + } + } + + if (isReporting && this.events.some(e => e.properties?.what === key)) { + reportingSet.add(key); + } + } + + this.meetingTypes = Array.from(meetingSet) + .map(what => { + const preset = whatPresets[what]; + const count = this.events.filter(e => e.properties?.what === what).length; + return { + what, + count, + label: preset?.label || what, + emoji: preset?.emoji || '📌' + }; + }) + .sort((a, b) => b.count - a.count); + + this.reportingTypes = Array.from(reportingSet) + .map(what => { + const preset = whatPresets[what]; + const count = this.events.filter(e => e.properties?.what === what).length; + return { + what, + count, + label: preset?.label || what, + emoji: preset?.emoji || '📌' + }; + }) + .sort((a, b) => b.count - a.count); + } + + navigateToWhat(what: string) { + this.router.navigate(['/agenda'], { queryParams: { what } }); + } + + getMaxCount(): number { + return Math.max(...this.creationHistogram.map(h => h.count), 1); + } + + getMaxWeekCount(): number { + return Math.max(...this.creationHistogramByWeek.map(h => h.count), 1); + } + + getWeekKey(date: Date): string { + // Obtenir le premier jour de la semaine (lundi) + const d = new Date(date.getTime()); // Copier la date sans la modifier + const day = d.getDay(); + const diff = d.getDate() - day + (day === 0 ? -6 : 1); // Ajuster pour que lundi soit 0 + const monday = new Date(d.getFullYear(), d.getMonth(), diff); + + // Obtenir le numéro de semaine ISO (semaine commençant le lundi) + const weekNumber = this.getISOWeek(monday); + return `${monday.getFullYear()}-S${String(weekNumber).padStart(2, '0')}`; + } + + getISOWeek(date: Date): number { + const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())); + const dayNum = d.getUTCDay() || 7; + d.setUTCDate(d.getUTCDate() + 4 - dayNum); + const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); + return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7); + } + + formatWeek(weekKey: string): string { + const [year, week] = weekKey.split('-S'); + return `S${week} ${year}`; + } + + getMaxDurationCount(): number { + return Math.max(...this.durationDistribution.map(d => d.count), 1); + } + + formatMonth(monthKey: string): string { + const [year, month] = monthKey.split('-'); + const months = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc']; + return `${months[parseInt(month) - 1]} ${year}`; + } + + formatDate(dateString: string): string { + const date = new Date(dateString); + return date.toLocaleDateString('fr-FR', { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + } +} diff --git a/frontend/src/oedb-types.ts b/frontend/src/oedb-types.ts index 3ab1db5..fcf3f85 100644 --- a/frontend/src/oedb-types.ts +++ b/frontend/src/oedb-types.ts @@ -65,6 +65,12 @@ const oedb = { category: 'Culture', description: 'Événement musical général' }, + 'culture.theater': { + emoji: '🎭', + label: 'Théâtre', + category: 'Culture', + description: 'Événement théâtral, pièce de théâtre, spectacle de scène' + }, // Music specific 'music.festival': { diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 1acb019..4c76952 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -269,7 +269,7 @@ nav{ .content { main{ height: calc(100vh - 0.1rem); - overflow: hidden; + // overflow: hidden; } } }