filtre agenda, page de stats, queryparam add
This commit is contained in:
Tykayn
tykayn
parent
73e3b9e710
commit
5d636b0027
20 changed files with 2800 additions and 75 deletions
|
|
@ -31,7 +31,7 @@
|
|||
<a routerLink="/events-docs" routerLinkActive="active">events docs</a>
|
||||
<a routerLink="/research" routerLinkActive="active">research</a>
|
||||
<a routerLink="/nouvelles-categories" routerLinkActive="active">nouvelles catégories</a>
|
||||
<a href="/demo/stats" routerLinkActive="active">stats</a>
|
||||
<a href="/stats" routerLinkActive="active">stats</a>
|
||||
<a href="https://source.cipherbliss.com/tykayn/oedb-backend" routerLinkActive="active">sources</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -7,6 +7,11 @@
|
|||
Presets
|
||||
<span class="muted" style="cursor:pointer;" title="Réinitialiser le filtre"
|
||||
(click)="resetPresetFilter()">({{filteredPresetCount()}})</span>
|
||||
@if (presetFilterPrefix) {
|
||||
<button type="button" class="btn-reset-filter" (click)="resetPresetFilter()" title="Afficher toutes les catégories">
|
||||
Afficher toutes les catégories
|
||||
</button>
|
||||
}
|
||||
</h4>
|
||||
<div class="preset-groups">
|
||||
@for (g of filteredGroups(); track g.category) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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<string, { label?: string, writable?: boolean, values?: any[], default?: any, allow_custom?: boolean, allow_empty?: boolean }> }>;
|
||||
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;
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,58 @@
|
|||
<small>{{filteredCalendarEvents.length}} évènements</small>
|
||||
</div>
|
||||
<div class="sidebar-filters">
|
||||
<div class="control-group">
|
||||
<label>
|
||||
Rechercher dans les événements
|
||||
<input
|
||||
type="text"
|
||||
class="filter-input"
|
||||
[(ngModel)]="filterText"
|
||||
(input)="onFilterTextChange()"
|
||||
placeholder="Rechercher par label, description, lieu...">
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-toggle-map"
|
||||
[class.active]="showMapView"
|
||||
(click)="toggleMapView()"
|
||||
title="Filtrer par zone géographique">
|
||||
📍 Filtrer par zone
|
||||
</button>
|
||||
@if (currentBbox) {
|
||||
<button
|
||||
type="button"
|
||||
class="btn-remove-bbox"
|
||||
(click)="removeBbox()"
|
||||
title="Supprimer le filtre de zone">
|
||||
❌ Supprimer la zone
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>
|
||||
<input type="checkbox" [(ngModel)]="pleinAirMode">
|
||||
Mode plein air
|
||||
</label>
|
||||
</div>
|
||||
<div class="mode-buttons">
|
||||
<button
|
||||
class="mode-btn culture-btn"
|
||||
[class.active]="selectedWhatFilter === 'culture'"
|
||||
(click)="toggleMode('culture')"
|
||||
title="Mode Culture">
|
||||
🎭
|
||||
</button>
|
||||
<button
|
||||
class="mode-btn traffic-btn"
|
||||
[class.active]="selectedWhatFilter === 'traffic'"
|
||||
(click)="toggleMode('traffic')"
|
||||
title="Mode Traffic">
|
||||
🚧
|
||||
</button>
|
||||
</div>
|
||||
<app-what-filter
|
||||
[label]="'Filtrer par type d\'événement'"
|
||||
[available]="availableWhatTypes"
|
||||
|
|
@ -29,10 +81,19 @@
|
|||
<div class="day-groups">
|
||||
@for (group of groupedEvents; track group.dateKey) {
|
||||
<div class="day-group" [attr.data-date-key]="group.dateKey">
|
||||
<div class="day-title-row">
|
||||
<div class="day-title">{{formatDayHeader(group.date)}}</div>
|
||||
<button
|
||||
class="btn-group-view"
|
||||
[class.active]="groupedByWhatView?.dateKey === group.dateKey"
|
||||
(click)="toggleGroupedView(group.dateKey, group.date, group.items)"
|
||||
title="Afficher groupé par catégorie">
|
||||
🔍
|
||||
</button>
|
||||
</div>
|
||||
<ul class="event-list">
|
||||
@for (ev of group.items; track ev.id) {
|
||||
<li class="event-item" (click)="selectFromSidebar(ev)" [class.active]="selectedEvent?.id === ev.id">
|
||||
<li class="event-item" (click)="selectFromSidebar(ev); showEditForm = true" [class.active]="selectedEvent?.id === ev.id">
|
||||
<span class="event-icon">
|
||||
@if (getImageForWhat(ev.properties.what)) {
|
||||
<img [src]="getImageForWhat(ev.properties.what)" alt="" />
|
||||
|
|
@ -55,15 +116,35 @@
|
|||
</aside>
|
||||
|
||||
|
||||
@if (selectedEvent) {
|
||||
@if (selectedEvent || (showEditForm && addMode)) {
|
||||
<div class="event-edit-panel">
|
||||
<div class="panel-header">
|
||||
<h3>Modifier l'événement</h3>
|
||||
<button class="btn-close" (click)="selectedEvent = null">×</button>
|
||||
<h3>@if (selectedEvent && selectedEvent.id) { Modifier l'événement } @else { Créer un événement }</h3>
|
||||
<button class="btn-close" (click)="selectedEvent = null; showEditForm = false; addMode = null">×</button>
|
||||
</div>
|
||||
@if (selectedEvent && selectedEvent.id) {
|
||||
<div class="selected">
|
||||
<div class="selected-duration">
|
||||
<strong>Durée :</strong> {{getEventDuration(selectedEvent)}}
|
||||
</div>
|
||||
@if (getEventTimeStatus(selectedEvent); as timeStatus) {
|
||||
<div class="selected-status" [class.status-past]="timeStatus.status === 'past'"
|
||||
[class.status-current]="timeStatus.status === 'current'"
|
||||
[class.status-future]="timeStatus.status === 'future'">
|
||||
<strong>Statut :</strong> {{timeStatus.startText}}
|
||||
</div>
|
||||
@if (timeStatus.endText) {
|
||||
<div class="selected-end">
|
||||
{{timeStatus.endText}}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="panel-content">
|
||||
<app-edit-form
|
||||
[selected]="selectedEvent"
|
||||
[filterByPrefix]="addMode"
|
||||
(saved)="onEventSaved()"
|
||||
(created)="onEventCreated()"
|
||||
(deleted)="onEventDeleted()">
|
||||
|
|
@ -79,11 +160,71 @@
|
|||
<div class="main">
|
||||
|
||||
<main class="agenda-main">
|
||||
@if (showMapView) {
|
||||
<div class="map-view-container">
|
||||
<div class="map-view-header">
|
||||
<button class="btn-back-to-agenda" (click)="backToAgenda()">← Retour à l'agenda</button>
|
||||
<p class="map-instructions">Cliquez et glissez pour dessiner un rectangle et filtrer les événements par zone</p>
|
||||
</div>
|
||||
<div #mapContainer class="map-container"></div>
|
||||
</div>
|
||||
} @else if (groupedByWhatView) {
|
||||
<div class="grouped-view-header">
|
||||
<button class="btn-back-to-agenda" (click)="backToAgendaView()">
|
||||
← Agenda
|
||||
</button>
|
||||
<h2 class="grouped-view-title">{{formatDayHeader(groupedByWhatView.date)}}</h2>
|
||||
</div>
|
||||
<div class="grouped-what-view">
|
||||
@for (whatGroup of groupedByWhatView.whatGroups; track whatGroup.what) {
|
||||
<div class="what-group-section">
|
||||
<div class="what-group-header">
|
||||
<span class="what-group-icon">
|
||||
@if (getImageForWhat(whatGroup.what)) {
|
||||
<img [src]="getImageForWhat(whatGroup.what)" alt="" />
|
||||
} @else if (getEmojiForWhat(whatGroup.what)) {
|
||||
{{getEmojiForWhat(whatGroup.what)}}
|
||||
} @else {
|
||||
📌
|
||||
}
|
||||
</span>
|
||||
<h3 class="what-group-title">{{whatGroup.what}}</h3>
|
||||
<span class="what-group-count">({{whatGroup.items.length}})</span>
|
||||
</div>
|
||||
<div class="what-group-events">
|
||||
@for (ev of whatGroup.items; track ev.id) {
|
||||
<div class="grouped-event-item" (click)="selectFromSidebar(ev); showEditForm = true">
|
||||
<div class="grouped-event-time">{{(ev.properties.start || ev.properties.when) || '—'}}</div>
|
||||
<div class="grouped-event-title">{{ev.properties.label || ev.properties.name || 'Événement'}}</div>
|
||||
@if (ev.properties.description) {
|
||||
<div class="grouped-event-description">{{ev.properties.description}}</div>
|
||||
}
|
||||
@if (ev.properties.where) {
|
||||
<div class="grouped-event-location">📍 {{ev.properties.where}}</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="agenda-view-controls">
|
||||
<select class="view-selector" [(ngModel)]="viewMode" (ngModelChange)="onViewModeChange($event)">
|
||||
<option value="year">Annuel</option>
|
||||
<option value="month">Mensuel</option>
|
||||
<option value="week">Semaine</option>
|
||||
<option value="day">Jour</option>
|
||||
<option value="list">Liste</option>
|
||||
</select>
|
||||
</div>
|
||||
<app-calendar
|
||||
[events]="filteredCalendarEvents"
|
||||
[viewMode]="viewMode"
|
||||
(eventClick)="onEventClick($event)"
|
||||
(dateClick)="onDateClick($event)">
|
||||
</app-calendar>
|
||||
}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<HTMLDivElement>;
|
||||
|
||||
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<string>();
|
||||
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<string>();
|
||||
|
|
@ -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();
|
||||
|
|
@ -254,6 +333,15 @@ export class Agenda implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
onFilterTextChange() {
|
||||
this.filterTextSubject.next(this.filterText);
|
||||
}
|
||||
|
||||
filterEventsByText(text: string) {
|
||||
this.filterText = text;
|
||||
this.applyWhatFilter();
|
||||
}
|
||||
|
||||
onWhatFilterChange(value: string) {
|
||||
this.selectedWhatFilter = value || '';
|
||||
this.applyWhatFilter();
|
||||
|
|
@ -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<string, OedbEvent[]> = {};
|
||||
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<void> {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,37 @@
|
|||
<div class="calendar-container">
|
||||
<!-- En-tête du calendrier -->
|
||||
<!-- Vue Annuel -->
|
||||
@if (viewMode === 'year') {
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-controls">
|
||||
<button class="btn btn-nav" (click)="previousYear()">‹</button>
|
||||
<h2 class="calendar-title">{{currentYear}}</h2>
|
||||
<button class="btn btn-nav" (click)="nextYear()">›</button>
|
||||
</div>
|
||||
<button class="btn btn-today" (click)="goToToday()">Aujourd'hui</button>
|
||||
</div>
|
||||
<div class="year-view">
|
||||
<div class="year-grid">
|
||||
@for (month of yearMonths; track month.getTime()) {
|
||||
<div class="year-month" (click)="selectMonth(month.getMonth(), month.getFullYear())">
|
||||
<div class="year-month-title">{{months[month.getMonth()]}}</div>
|
||||
<div class="year-month-events">
|
||||
@for (event of getEventsForMonth(month.getMonth()).slice(0, 3); track event.id) {
|
||||
<div class="year-event-item" (click)="onEventClick(event, $event); $event.stopPropagation()">
|
||||
{{event.title}}
|
||||
</div>
|
||||
}
|
||||
@if (getEventsForMonth(month.getMonth()).length > 3) {
|
||||
<div class="year-more-events">+{{getEventsForMonth(month.getMonth()).length - 3}} autres</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Vue Mensuel -->
|
||||
@if (viewMode === 'month') {
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-controls">
|
||||
<button class="btn btn-nav" (click)="previousMonth()">‹</button>
|
||||
|
|
@ -8,8 +40,6 @@
|
|||
</div>
|
||||
<button class="btn btn-today" (click)="goToToday()">Aujourd'hui</button>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques -->
|
||||
<div class="calendar-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">{{getTotalEventsCount()}}</span>
|
||||
|
|
@ -20,12 +50,10 @@
|
|||
<span class="stat-label">Ce mois</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grille du calendrier -->
|
||||
<div class="calendar-grid">
|
||||
<!-- En-têtes des jours -->
|
||||
<div class="calendar-weekdays">
|
||||
@for (day of weekDays; track day) {
|
||||
@for (day of weekDayNames; track day) {
|
||||
<div class="weekday-header">{{day}}</div>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -67,6 +95,108 @@
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Vue Semaine -->
|
||||
@if (viewMode === 'week') {
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-controls">
|
||||
<button class="btn btn-nav" (click)="previousWeek()">‹</button>
|
||||
<h2 class="calendar-title">{{getWeekRange()}}</h2>
|
||||
<button class="btn btn-nav" (click)="nextWeek()">›</button>
|
||||
</div>
|
||||
<button class="btn btn-today" (click)="goToToday()">Aujourd'hui</button>
|
||||
</div>
|
||||
<div class="week-view">
|
||||
<div class="week-grid">
|
||||
<div class="week-header">
|
||||
@for (day of weekDays; track day.getTime()) {
|
||||
<div class="week-day-header" [class.today]="isToday(day)" [class.weekend]="isWeekend(day)">
|
||||
<div class="week-day-name">{{['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'][day.getDay()]}}</div>
|
||||
<div class="week-day-number">{{day.getDate()}}</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="week-body">
|
||||
@for (day of weekDays; track day.getTime()) {
|
||||
<div class="week-day-column" (click)="onDateClick(day)">
|
||||
<div class="week-day-events">
|
||||
@for (event of getEventsForDay(day); track event.id) {
|
||||
<div class="week-event-item" (click)="onEventClick(event, $event); $event.stopPropagation()">
|
||||
<div class="week-event-time">{{event.start | date:'HH:mm'}}</div>
|
||||
<div class="week-event-title">{{event.title}}</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Vue Jour -->
|
||||
@if (viewMode === 'day') {
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-controls">
|
||||
<button class="btn btn-nav" (click)="previousDay()">‹</button>
|
||||
<h2 class="calendar-title">{{formatDateTime(selectedDate || currentDate)}}</h2>
|
||||
<button class="btn btn-nav" (click)="nextDay()">›</button>
|
||||
</div>
|
||||
<button class="btn btn-today" (click)="goToToday()">Aujourd'hui</button>
|
||||
</div>
|
||||
<div class="day-view">
|
||||
<div class="day-hours">
|
||||
@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) {
|
||||
<div class="day-hour-row">
|
||||
<div class="day-hour-label">{{hour.toString().padStart(2, '0')}}:00</div>
|
||||
<div class="day-hour-events" (click)="onDateClick(selectedDate || currentDate)">
|
||||
@for (event of getHourEvents(selectedDate || currentDate, hour); track event.id) {
|
||||
<div class="day-event-item" (click)="onEventClick(event, $event); $event.stopPropagation()">
|
||||
<div class="day-event-time">{{event.start | date:'HH:mm'}}@if (event.end) { - {{event.end | date:'HH:mm'}}}</div>
|
||||
<div class="day-event-title">{{event.title}}</div>
|
||||
@if (event.location) {
|
||||
<div class="day-event-location">📍 {{event.location}}</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Vue Liste -->
|
||||
@if (viewMode === 'list') {
|
||||
<div class="calendar-header">
|
||||
<h2 class="calendar-title">Liste des événements</h2>
|
||||
</div>
|
||||
<div class="list-view">
|
||||
<div class="list-events">
|
||||
@for (event of listEvents; track event.id) {
|
||||
<div class="list-event-item" (click)="onEventClick(event, $event)">
|
||||
<div class="list-event-date">
|
||||
<div class="list-event-day">{{event.start | date:'dd'}}</div>
|
||||
<div class="list-event-month">{{event.start | date:'MMM'}}</div>
|
||||
</div>
|
||||
<div class="list-event-content">
|
||||
<div class="list-event-title">{{event.title}}</div>
|
||||
<div class="list-event-time">{{event.start | date:'dd/MM/yyyy à HH:mm'}}@if (event.end) { - {{event.end | date:'dd/MM/yyyy à HH:mm'}}}</div>
|
||||
@if (event.location) {
|
||||
<div class="list-event-location">📍 {{event.location}}</div>
|
||||
}
|
||||
@if (event.description) {
|
||||
<div class="list-event-description">{{event.description}}</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="list-empty">Aucun événement</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Panel de détails de l'événement -->
|
||||
@if (showEventDetails && selectedEvent) {
|
||||
|
|
|
|||
|
|
@ -561,3 +561,363 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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<CalendarEvent>();
|
||||
@Output() dateClick = new EventEmitter<Date>();
|
||||
|
||||
|
|
@ -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.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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -308,8 +308,7 @@
|
|||
<!--fin des actions rapides-->
|
||||
|
||||
@if (toasts.length) {
|
||||
<div class="toaster"
|
||||
style="">
|
||||
<div class="toaster">
|
||||
@for (t of toasts; track t.id) {
|
||||
<div class="toast" [class.success]="t.type==='success'" [class.error]="t.type==='error'"
|
||||
[class.info]="t.type==='info'"
|
||||
|
|
@ -364,18 +363,19 @@
|
|||
</div>
|
||||
</aside>
|
||||
<main class="agenda-main">
|
||||
@if (selected && showEditForm) {
|
||||
@if ((selected || (showEditForm && addMode)) && showEditForm) {
|
||||
<div class="event-edit-panel">
|
||||
<div class="panel-header">
|
||||
<h3>Détails</h3>
|
||||
<button class="btn-close" (click)="selected = null">×</button>
|
||||
<h3>@if (selected && selected.id) { Détails } @else { Créer un événement }</h3>
|
||||
<button class="btn-close" (click)="closeEditForm()">×</button>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<app-edit-form [selected]="selected"
|
||||
[filterByPrefix]="addMode"
|
||||
(saved)="onSaved($event)"
|
||||
(created)="onCreated($event)"
|
||||
(deleted)="onDeleted($event)"
|
||||
(canceled)="showEditForm=false"
|
||||
(canceled)="onCanceled()"
|
||||
>
|
||||
</app-edit-form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<any> = [];
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div class="nav-section">
|
||||
<h3>Intégration & API</h3>
|
||||
<a routerLink="/events-docs" class="link">📚 Documentation API</a>
|
||||
<a href="/demo/stats" class="link">📊 Statistiques</a>
|
||||
<a href="/stats" class="link">📊 Statistiques</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
|
|
|
|||
131
frontend/src/app/pages/stats/stats.html
Normal file
131
frontend/src/app/pages/stats/stats.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<div class="stats-page">
|
||||
<div class="stats-header">
|
||||
<h1>Statistiques OEDB</h1>
|
||||
<p class="stats-subtitle">Analyse de {{events.length}} événements</p>
|
||||
</div>
|
||||
|
||||
@if (isLoading) {
|
||||
<div class="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Chargement des statistiques...</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="stats-content">
|
||||
|
||||
<!-- Top genres d'événements -->
|
||||
<section class="stats-section">
|
||||
<h2>📊 Genres d'événements les plus fréquents</h2>
|
||||
<div class="what-counts-list">
|
||||
@for (item of whatCounts; track item.what) {
|
||||
<div class="what-count-item" (click)="navigateToWhat(item.what)">
|
||||
<span class="what-emoji">{{item.emoji}}</span>
|
||||
<span class="what-name">{{item.label}}</span>
|
||||
<span class="what-count-badge">{{item.count}}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Histogramme de création par mois -->
|
||||
<section class="stats-section">
|
||||
<h2>📅 Histogramme de création des événements (par mois)</h2>
|
||||
<div class="histogram">
|
||||
@for (item of creationHistogram; track item.month) {
|
||||
<div class="histogram-bar-container">
|
||||
<div class="histogram-bar" [style.height.%]="(item.count / getMaxCount()) * 100" [title]="item.count + ' événements'">
|
||||
<span class="histogram-value">{{item.count}}</span>
|
||||
</div>
|
||||
<div class="histogram-label">{{formatMonth(item.month)}}</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Histogramme de création par semaine -->
|
||||
<section class="stats-section">
|
||||
<h2>📅 Histogramme de création des événements (par semaine)</h2>
|
||||
<div class="histogram">
|
||||
@for (item of creationHistogramByWeek; track item.week) {
|
||||
<div class="histogram-bar-container">
|
||||
<div class="histogram-bar" [style.height.%]="(item.count / getMaxWeekCount()) * 100" [title]="item.count + ' événements'">
|
||||
<span class="histogram-value">{{item.count}}</span>
|
||||
</div>
|
||||
<div class="histogram-label">{{formatWeek(item.week)}}</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Distribution des durées -->
|
||||
<section class="stats-section">
|
||||
<h2>⏱️ Répartition des durées (en jours)</h2>
|
||||
<div class="duration-chart">
|
||||
@for (item of durationDistribution; track item.days) {
|
||||
<div class="duration-bar-container">
|
||||
<div class="duration-bar" [style.width.%]="(item.count / getMaxDurationCount()) * 100" [title]="item.count + ' événements'">
|
||||
<span class="duration-label">{{item.days === '0' ? '0 jour' : item.days === '1' ? '1 jour' : item.days + ' jours'}}</span>
|
||||
<span class="duration-value">{{item.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Types de réunions -->
|
||||
<section class="stats-section">
|
||||
<h2>👥 Réunions et événements de personnes</h2>
|
||||
<div class="type-list">
|
||||
@for (item of meetingTypes; track item.what) {
|
||||
<div class="type-item" (click)="navigateToWhat(item.what)">
|
||||
<span class="type-emoji">{{item.emoji}}</span>
|
||||
<span class="type-label">{{item.label}}</span>
|
||||
<span class="type-count">{{item.count}}</span>
|
||||
</div>
|
||||
} @empty {
|
||||
<p class="empty-message">Aucun type de réunion trouvé</p>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Types de signalements -->
|
||||
<section class="stats-section">
|
||||
<h2>⚠️ Signalements et incidents</h2>
|
||||
<div class="type-list">
|
||||
@for (item of reportingTypes; track item.what) {
|
||||
<div class="type-item" (click)="navigateToWhat(item.what)">
|
||||
<span class="type-emoji">{{item.emoji}}</span>
|
||||
<span class="type-label">{{item.label}}</span>
|
||||
<span class="type-count">{{item.count}}</span>
|
||||
</div>
|
||||
} @empty {
|
||||
<p class="empty-message">Aucun type de signalement trouvé</p>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 10 événements les plus récents -->
|
||||
<section class="stats-section">
|
||||
<h2>🆕 10 événements les plus récemment créés</h2>
|
||||
<div class="recent-events">
|
||||
@for (event of recentEvents; track event.id || event.properties?.what) {
|
||||
<div class="recent-event-item">
|
||||
<div class="recent-event-header">
|
||||
<span class="recent-event-title">{{event.properties?.label || event.properties?.name || 'Événement sans nom'}}</span>
|
||||
<span class="recent-event-date">{{formatDate(event.properties?.createdate || '')}}</span>
|
||||
</div>
|
||||
<div class="recent-event-meta">
|
||||
<span class="recent-event-what">{{event.properties && event.properties.what ? event.properties.what : 'non-défini'}}</span>
|
||||
@if (event.properties && event.properties.where) {
|
||||
<span class="recent-event-where">📍 {{event.properties.where}}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
} @empty {
|
||||
<p class="empty-message">Aucun événement récent</p>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
353
frontend/src/app/pages/stats/stats.scss
Normal file
353
frontend/src/app/pages/stats/stats.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
23
frontend/src/app/pages/stats/stats.spec.ts
Normal file
23
frontend/src/app/pages/stats/stats.spec.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Stats } from './stats';
|
||||
|
||||
describe('Stats', () => {
|
||||
let component: Stats;
|
||||
let fixture: ComponentFixture<Stats>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Stats]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Stats);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
298
frontend/src/app/pages/stats/stats.ts
Normal file
298
frontend/src/app/pages/stats/stats.ts
Normal file
|
|
@ -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<string, number> = {};
|
||||
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<string, number> = {};
|
||||
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<string, number> = {};
|
||||
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<string, number> = {
|
||||
'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<string, any>;
|
||||
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<string>();
|
||||
const reportingSet = new Set<string>();
|
||||
|
||||
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'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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': {
|
||||
|
|
|
|||
|
|
@ -269,7 +269,7 @@ nav{
|
|||
.content {
|
||||
main{
|
||||
height: calc(100vh - 0.1rem);
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue