59 lines
2 KiB
HTML
59 lines
2 KiB
HTML
|
|
<div class="agenda-container">
|
|||
|
|
<div class="agenda-header">
|
|||
|
|
<h1>Agenda des événements</h1>
|
|||
|
|
<p>Événements des 20 derniers jours (10 jours avant et 10 jours après aujourd'hui)</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="agenda-content">
|
|||
|
|
<div class="days-grid">
|
|||
|
|
@for (day of daysWithEvents; track day.date.getTime()) {
|
|||
|
|
<div class="day-card" [class.today]="isToday(day.date)" [class.past]="isPast(day.date)">
|
|||
|
|
<div class="day-header">
|
|||
|
|
<h3>{{ formatDate(day.date) }}</h3>
|
|||
|
|
<span class="event-count">{{ day.events.length }} événement(s)</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="events-list">
|
|||
|
|
@if (day.events.length === 0) {
|
|||
|
|
<p class="no-events">Aucun événement</p>
|
|||
|
|
} @else {
|
|||
|
|
@for (event of day.events; track event.id) {
|
|||
|
|
<div class="event-item" (click)="selectEvent(event)">
|
|||
|
|
<div class="event-time">{{ getEventTime(event) }}</div>
|
|||
|
|
<div class="event-title">{{ getEventTitle(event) }}</div>
|
|||
|
|
@if (event.properties.what) {
|
|||
|
|
<div class="event-type">{{ event.properties.what }}</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Panneau latéral pour les détails de l'événement -->
|
|||
|
|
@if (showSidePanel && selectedEvent) {
|
|||
|
|
<div class="side-panel">
|
|||
|
|
<div class="side-panel-header">
|
|||
|
|
<h2>Détails de l'événement</h2>
|
|||
|
|
<button class="close-btn" (click)="closeSidePanel()">×</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="side-panel-content">
|
|||
|
|
<app-edit-form
|
|||
|
|
[selected]="selectedEvent"
|
|||
|
|
(saved)="onEventSaved($event)"
|
|||
|
|
(created)="onEventCreated($event)"
|
|||
|
|
(deleted)="onEventDeleted($event)">
|
|||
|
|
</app-edit-form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
<!-- Overlay pour fermer le panneau latéral -->
|
|||
|
|
@if (showSidePanel) {
|
|||
|
|
<div class="overlay" (click)="closeSidePanel()"></div>
|
|||
|
|
}
|
|||
|
|
</div>
|