2025-10-04 16:14:42 +02:00
|
|
|
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
|
|
|
|
import { Router } from '@angular/router';
|
|
|
|
import { FormsModule } from '@angular/forms';
|
2025-10-02 23:19:15 +02:00
|
|
|
import {Menu} from './menu/menu';
|
2025-10-03 13:40:08 +02:00
|
|
|
import { AllEvents } from '../../maps/all-events/all-events';
|
|
|
|
import { EditForm } from '../../forms/edit-form/edit-form';
|
2025-10-03 11:56:55 +02:00
|
|
|
import { OedbApi } from '../../services/oedb-api';
|
2025-10-04 12:46:25 +02:00
|
|
|
import { UnlocatedEvents } from '../../shared/unlocated-events/unlocated-events';
|
2025-10-02 22:53:50 +02:00
|
|
|
@Component({
|
|
|
|
selector: 'app-home',
|
2025-10-04 12:58:44 +02:00
|
|
|
standalone: true,
|
2025-10-02 23:19:15 +02:00
|
|
|
imports: [
|
2025-10-03 13:40:08 +02:00
|
|
|
Menu,
|
|
|
|
AllEvents,
|
2025-10-04 12:46:25 +02:00
|
|
|
UnlocatedEvents,
|
2025-10-04 16:14:42 +02:00
|
|
|
EditForm,
|
|
|
|
FormsModule
|
2025-10-02 23:19:15 +02:00
|
|
|
],
|
2025-10-02 22:53:50 +02:00
|
|
|
templateUrl: './home.html',
|
|
|
|
styleUrl: './home.scss'
|
|
|
|
})
|
2025-10-04 16:14:42 +02:00
|
|
|
export class Home implements OnInit, OnDestroy {
|
2025-10-03 11:56:55 +02:00
|
|
|
|
|
|
|
OedbApi = inject(OedbApi);
|
2025-10-04 16:14:42 +02:00
|
|
|
private router = inject(Router);
|
|
|
|
|
2025-10-03 13:40:08 +02:00
|
|
|
features: Array<any> = [];
|
|
|
|
selected: any | null = null;
|
2025-10-03 14:00:35 +02:00
|
|
|
showTable = false;
|
2025-10-04 16:14:42 +02:00
|
|
|
|
|
|
|
// 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;
|
2025-10-03 11:56:55 +02:00
|
|
|
|
2025-10-04 16:14:42 +02:00
|
|
|
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) => {
|
2025-10-03 13:40:08 +02:00
|
|
|
this.features = Array.isArray(events?.features) ? events.features : [];
|
2025-10-04 16:14:42 +02:00
|
|
|
this.isLoading = false;
|
2025-10-03 13:40:08 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2025-10-04 16:14:42 +02:00
|
|
|
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();
|
|
|
|
}
|
|
|
|
|
|
|
|
goToNewCategories() {
|
|
|
|
this.router.navigate(['/nouvelles-categories']);
|
|
|
|
}
|
|
|
|
|
2025-10-03 13:40:08 +02:00
|
|
|
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 {
|
|
|
|
this.selected = {
|
|
|
|
id: null,
|
|
|
|
properties: { label: '', description: '', what: '', where: '' },
|
|
|
|
geometry: { type: 'Point', coordinates: [lon, lat] }
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onSaved(_res: any) {
|
|
|
|
// refresh list after update
|
2025-10-04 16:14:42 +02:00
|
|
|
this.loadEvents();
|
2025-10-03 13:40:08 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
onCreated(_res: any) {
|
|
|
|
// refresh and clear selection after create
|
|
|
|
this.selected = null;
|
2025-10-04 16:14:42 +02:00
|
|
|
this.loadEvents();
|
2025-10-03 13:40:08 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
onDeleted(_res: any) {
|
|
|
|
this.selected = null;
|
2025-10-04 16:14:42 +02:00
|
|
|
this.loadEvents();
|
2025-10-03 11:56:55 +02:00
|
|
|
}
|
2025-10-03 14:00:35 +02:00
|
|
|
|
|
|
|
// 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.features }, 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.features.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();
|
|
|
|
}
|
2025-10-02 22:53:50 +02:00
|
|
|
}
|