import { Component, inject, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { FormsModule } from '@angular/forms'; import {Menu} from './menu/menu'; import { AllEvents } from '../../maps/all-events/all-events'; import { EditForm } from '../../forms/edit-form/edit-form'; import { OedbApi } from '../../services/oedb-api'; import { UnlocatedEvents } from '../../shared/unlocated-events/unlocated-events'; import { OsmAuth } from '../../services/osm-auth'; import { Osm } from '../../forms/osm/osm'; @Component({ selector: 'app-home', standalone: true, imports: [ Menu, AllEvents, UnlocatedEvents, EditForm, Osm, FormsModule ], templateUrl: './home.html', styleUrl: './home.scss' }) export class Home implements OnInit, OnDestroy { OedbApi = inject(OedbApi); private router = inject(Router); private osmAuth = inject(OsmAuth); features: Array = []; filteredFeatures: Array = []; selected: any | null = null; showTable = false; showFilters = false; // Nouvelles propriétés pour le rechargement automatique et la sélection de jours autoReloadEnabled = true; autoReloadInterval: any = null; daysAhead = 7; // Nombre de jours dans le futur par défaut isLoading = false; // Propriétés pour les filtres searchText = ''; selectedWhatFilter = ''; availableWhatTypes: string[] = []; ngOnInit() { this.loadEvents(); this.startAutoReload(); } ngOnDestroy() { this.stopAutoReload(); } loadEvents() { this.isLoading = true; const today = new Date(); const endDate = new Date(today); endDate.setDate(today.getDate() + this.daysAhead); const params = { start: today.toISOString().split('T')[0], end: endDate.toISOString().split('T')[0], limit: 1000 }; this.OedbApi.getEvents(params).subscribe((events: any) => { this.features = Array.isArray(events?.features) ? events.features : []; this.updateAvailableWhatTypes(); this.applyFilters(); this.isLoading = false; }); } startAutoReload() { if (this.autoReloadEnabled && !this.autoReloadInterval) { this.autoReloadInterval = setInterval(() => { this.loadEvents(); }, 60000); // 1 minute } } stopAutoReload() { if (this.autoReloadInterval) { clearInterval(this.autoReloadInterval); this.autoReloadInterval = null; } } toggleAutoReload() { this.autoReloadEnabled = !this.autoReloadEnabled; if (this.autoReloadEnabled) { this.startAutoReload(); } else { this.stopAutoReload(); } } onDaysAheadChange() { this.loadEvents(); } updateAvailableWhatTypes() { const whatTypes = new Set(); this.features.forEach(feature => { if (feature?.properties?.what) { whatTypes.add(feature.properties.what); } }); this.availableWhatTypes = Array.from(whatTypes).sort(); } onSearchChange() { this.applyFilters(); } onWhatFilterChange() { this.applyFilters(); } applyFilters() { let filtered = [...this.features]; // Filtre par texte de recherche if (this.searchText.trim()) { const searchLower = this.searchText.toLowerCase(); filtered = filtered.filter(feature => { const label = feature?.properties?.label || feature?.properties?.name || ''; const description = feature?.properties?.description || ''; const what = feature?.properties?.what || ''; return label.toLowerCase().includes(searchLower) || description.toLowerCase().includes(searchLower) || what.toLowerCase().includes(searchLower); }); } // Filtre par type d'événement if (this.selectedWhatFilter) { filtered = filtered.filter(feature => feature?.properties?.what === this.selectedWhatFilter ); } this.filteredFeatures = filtered; } goToNewCategories() { this.router.navigate(['/nouvelles-categories']); } onSelect(feature: any) { this.selected = feature; } onPickCoords(coords: [number, number]) { // Autofill lat/lon in the form selection or prepare a new feature shell const [lon, lat] = coords; if (this.selected && this.selected.properties) { this.selected = { ...this.selected, geometry: { type: 'Point', coordinates: [lon, lat] } }; } else { const osmUsername = this.osmAuth.getUsername(); this.selected = { id: null, properties: { label: '', description: '', what: '', where: '', ...(osmUsername && { last_modified_by: osmUsername }) }, geometry: { type: 'Point', coordinates: [lon, lat] } }; } } onSaved(_res: any) { // refresh list after update this.loadEvents(); } onCreated(_res: any) { // refresh and clear selection after create this.selected = null; this.loadEvents(); } onDeleted(_res: any) { this.selected = null; this.loadEvents(); } // Menu callbacks ngAfterViewInit() { // Wire menu callbacks if needed via querySelector; left simple for now // We keep logic here: toggling and downloads } toggleView() { this.showTable = !this.showTable; } downloadGeoJSON() { const blob = new Blob([JSON.stringify({ type: 'FeatureCollection', features: this.filteredFeatures }, null, 2)], { type: 'application/geo+json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'events.geojson'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); a.remove(); } downloadCSV() { const header = ['id', 'what', 'label', 'start', 'stop', 'lon', 'lat']; const rows = this.filteredFeatures.map((f: any) => [ JSON.stringify(f?.properties?.id ?? f?.id ?? ''), JSON.stringify(f?.properties?.what ?? ''), JSON.stringify(f?.properties?.label ?? f?.properties?.name ?? ''), JSON.stringify(f?.properties?.start ?? f?.properties?.when ?? ''), JSON.stringify(f?.properties?.stop ?? ''), JSON.stringify(f?.geometry?.coordinates?.[0] ?? ''), JSON.stringify(f?.geometry?.coordinates?.[1] ?? '') ].join(',')); const csv = [header.join(','), ...rows].join('\n'); const blob = new Blob([csv], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'events.csv'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); a.remove(); } }