feat(planning): grille hebdomadaire complète avec API et filtres
- Connexion API via proxy Angular (résolution CORS, base path /api) - Import CSS ng-zorro global pour les modales et composants - Filtres Camion/Show câblés sur l'affichage de la grille - Camions affichés via TrucksService (linkés au show du même créneau) - Panneau de détails : spectacles + camions du jour sélectionné - Modale de création de spectacle stylisée avec fond et centrage - Positionnement précis des events à la minute dans leur créneau - Auto-scroll vers l'heure courante au chargement - Ligne "maintenant" sur la colonne du jour actuel - Régénération des services OpenAPI (nouveaux noms de types) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
<div class="background">
|
||||
<div class="planning">
|
||||
|
||||
<!-- ── Grille hebdomadaire ─────────────────────────────── -->
|
||||
<div class="left">
|
||||
<div class="week-section">
|
||||
|
||||
<div class="week-toolbar">
|
||||
<div class="week-actions">
|
||||
<button [class]="isCamionFilterActive ? 'action-btn active' : 'action-btn'"
|
||||
@@ -14,7 +17,8 @@
|
||||
</svg>
|
||||
Camion
|
||||
</button>
|
||||
<button [class]="isShowFilterActive ? 'action-btn active' : 'action-btn'" (click)="showFilter()">
|
||||
<button [class]="isShowFilterActive ? 'action-btn active' : 'action-btn'"
|
||||
(click)="showFilter()">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" stroke-width="2"/>
|
||||
</svg>
|
||||
@@ -24,27 +28,25 @@
|
||||
<div class="week-nav">
|
||||
<button class="nav-button-week" (click)="previousWeek()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M15 18L9 12L15 6" stroke="#666" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
<path d="M15 18L9 12L15 6" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="week-label">Semaine {{ getWeekNumber() }}</span>
|
||||
<button class="today-btn" (click)="goToToday()">Aujourd'hui</button>
|
||||
<button class="nav-button-week" (click)="nextWeek()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M9 18L15 12L9 6" stroke="#666" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
<path d="M9 18L15 12L9 6" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="week-calendar">
|
||||
<div class="week-calendar" #weekCalendar>
|
||||
<div class="week-grid">
|
||||
<div class="time-column">
|
||||
<div class="time-header"></div>
|
||||
<div class="time-slot" *ngFor="let hour of getHours()">{{ hour }}</div>
|
||||
</div>
|
||||
|
||||
<div class="day-column" *ngFor="let date of selectedDates">
|
||||
<div class="day-header"
|
||||
[class.today]="isToday(date)"
|
||||
@@ -54,39 +56,52 @@
|
||||
<div class="day-date">{{ date.getDate() }}</div>
|
||||
</div>
|
||||
<div class="day-slots">
|
||||
<!-- Ligne "maintenant" sur la colonne du jour actuel -->
|
||||
@if (isToday(date)) {
|
||||
<div class="now-line" [style.top.px]="getNowTopPx()"></div>
|
||||
}
|
||||
<div class="hour-slot"
|
||||
*ngFor="let hour of getHours()"
|
||||
(click)="selectDay(date)">
|
||||
@for (show of getShowsForSlot(date, hour); track show.id) {
|
||||
<div class="show-event">
|
||||
<div class="show-event"
|
||||
[style.top.px]="show.date ? getEventTopPx(show.date) : 0">
|
||||
<span class="show-event-name">{{ show.name }}</span>
|
||||
<span class="show-event-time" *ngIf="show.date">{{ formatShowTime(show.date) }}</span>
|
||||
</div>
|
||||
}
|
||||
@for (truck of getTrucksForSlot(date, hour); track truck.id) {
|
||||
<div class="truck-event"
|
||||
[style.top.px]="truck.showId ? 0 : 0">
|
||||
<span class="truck-event-name">{{ truck.type || 'Camion' }}</span>
|
||||
<span class="truck-event-statut" *ngIf="truck.statut">{{ truck.statut }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Panneau droit ────────────────────────────────────── -->
|
||||
<div class="right">
|
||||
|
||||
<div class="calendar-section">
|
||||
<div class="calendar-title">CALENDRIER</div>
|
||||
<div class="card">
|
||||
<div class="calendar-header">
|
||||
<button class="nav-button" (click)="previousMonth()">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M15 18L9 12L15 6" stroke="#d4a574" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
<path d="M15 18L9 12L15 6" stroke="#d4a574" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="month-title">{{ currentMonthYear }}</h2>
|
||||
<button class="nav-button" (click)="nextMonth()">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M9 18L15 12L9 6" stroke="#d4a574" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
<path d="M9 18L15 12L9 6" stroke="#d4a574" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -116,16 +131,16 @@
|
||||
</h3>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
|
||||
<div class="sidebar-block">
|
||||
<h4>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<circle cx="12" cy="12" r="10" stroke-width="2"/>
|
||||
<polyline points="12 6 12 12 16 14" stroke-width="2" stroke-linecap="round"/>
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" stroke-width="2"/>
|
||||
</svg>
|
||||
Spectacles du jour
|
||||
</h4>
|
||||
@if (getDayShows().length === 0) {
|
||||
<p class="no-shows">Aucun spectacle ce jour</p>
|
||||
<p class="no-items">Aucun spectacle ce jour</p>
|
||||
} @else {
|
||||
<div class="slot-info">
|
||||
@for (show of getDayShows(); track show.id) {
|
||||
@@ -142,6 +157,34 @@
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="sidebar-block">
|
||||
<h4>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<rect x="1" y="3" width="15" height="13" rx="2" ry="2" stroke-width="2"/>
|
||||
<path d="M16 8h5l3 3v5h-4" stroke-width="2"/>
|
||||
<circle cx="5.5" cy="18.5" r="2.5" stroke-width="2"/>
|
||||
<circle cx="18.5" cy="18.5" r="2.5" stroke-width="2"/>
|
||||
</svg>
|
||||
Camions du jour
|
||||
</h4>
|
||||
@if (getDayTrucks().length === 0) {
|
||||
<p class="no-items">Aucun camion ce jour</p>
|
||||
} @else {
|
||||
<div class="slot-info">
|
||||
@for (truck of getDayTrucks(); track truck.id) {
|
||||
<div class="show-card truck-card">
|
||||
<div class="show-card-header">
|
||||
<strong>{{ truck.type || 'Camion' }}</strong>
|
||||
<span class="truck-statut" *ngIf="truck.statut">{{ truck.statut }}</span>
|
||||
</div>
|
||||
<p *ngIf="truck.sizes">Taille : {{ truck.sizes }}</p>
|
||||
<p *ngIf="truck.maxExplosiveCapacity">Capacité : {{ truck.maxExplosiveCapacity }} kg</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="sidebar-block">
|
||||
<h4>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
@@ -154,7 +197,7 @@
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M12 5v14M5 12h14" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>Créer un spectacle</span>
|
||||
Créer un spectacle
|
||||
</button>
|
||||
<button class="sidebar-btn">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
@@ -164,6 +207,7 @@
|
||||
Voir rapports
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -238,4 +282,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
</nz-modal>
|
||||
Reference in New Issue
Block a user