avancement planning
This commit is contained in:
@@ -1,41 +1,40 @@
|
||||
<div class="background">
|
||||
<div class="planning-container">
|
||||
<div class="planning">
|
||||
<!-- Calendrier à gauche -->
|
||||
<div class="calendar-section">
|
||||
<div class="calendar-title">CALENDAR</div>
|
||||
<div class="calendar-title">CALENDRIER</div>
|
||||
<div class="calendar-date-info">
|
||||
<div class="date-badge">
|
||||
<div class="month-abbr">JAN</div>
|
||||
<div class="day-number">21</div>
|
||||
<div class="month-abbr">{{ getCurrentMonth() }}</div>
|
||||
<div class="day-number">{{ getCurrentDay() }}</div>
|
||||
</div>
|
||||
<div class="date-full">
|
||||
<div class="date-text">21 janvier 2026</div>
|
||||
<div class="day-text">Mercredi</div>
|
||||
<div class="date-text">{{ getCurrentDate() }}</div>
|
||||
<div class="day-text">{{ getDayWeek() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="calendar-header">
|
||||
<button class="nav-button" (click)="previousMonth()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<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"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="month-title">{{ currentMonthYear }}</h2>
|
||||
<button class="nav-button" (click)="nextMonth()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nz-calendar
|
||||
[nzFullscreen]="false"
|
||||
[ngModel]="currentDate"
|
||||
(nzSelectChange)="onValueChange($event)"
|
||||
(nzPanelChange)="onPanelChange($event)"
|
||||
[nzDateFullCell]="dateCellTemplate"
|
||||
[nzFullscreen]="false"
|
||||
[ngModel]="currentDate"
|
||||
(nzSelectChange)="onValueChange($event)"
|
||||
(nzPanelChange)="onPanelChange($event)"
|
||||
[nzDateFullCell]="dateCellTemplate"
|
||||
></nz-calendar>
|
||||
|
||||
<ng-template #dateCellTemplate let-date>
|
||||
<div class="ant-picker-cell-inner" [class.in-selection]="isDateSelected(date)">
|
||||
{{ date.getDate() }}
|
||||
@@ -44,37 +43,45 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Planning de la semaine à droite -->
|
||||
<!-- Planning de la semaine au centre -->
|
||||
<div class="week-section" *ngIf="selectedDates.length > 0">
|
||||
<div class="week-toolbar">
|
||||
<div class="week-actions">
|
||||
<button class="action-btn">Lorem</button>
|
||||
<button class="action-btn active">Camion</button>
|
||||
<button class="action-btn">Show</button>
|
||||
<button [class]="isCamionFilterActive ? 'action-btn active' : 'action-btn'" (click)="camionFilter()">
|
||||
<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>
|
||||
Camion
|
||||
</button>
|
||||
<button [class]="isShowFilterActive ? 'action-btn active' : 'action-btn'" (click)="showFilter()">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<circle cx="11" cy="11" r="8" stroke-width="2"/>
|
||||
<path d="M21 21l-4.35-4.35" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Show
|
||||
</button>
|
||||
</div>
|
||||
<div class="week-nav">
|
||||
<span class="today-label">LOREM</span>
|
||||
<button class="today-btn" (click)="goToToday()">
|
||||
< TODAY >
|
||||
<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"/>
|
||||
</svg>
|
||||
</button>
|
||||
<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"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="new-project-btn">NEW PROJECT</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="week-calendar">
|
||||
<div class="week-nav-header">
|
||||
<button class="nav-button-week" (click)="previousWeek()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M15 18L9 12L15 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="nav-button-week" (click)="nextWeek()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M9 18L15 12L9 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="week-grid">
|
||||
<!-- Colonne des heures -->
|
||||
<div class="time-column">
|
||||
@@ -88,11 +95,14 @@
|
||||
<div class="day-column" *ngFor="let date of selectedDates">
|
||||
<div class="day-header" [class.today]="isToday(date)">
|
||||
<div class="day-name">{{ getDayName(date) }}</div>
|
||||
<div class="day-date">{{ formatDate(date) }}</div>
|
||||
<div class="day-date">{{ date.getDate() }}</div>
|
||||
</div>
|
||||
<div class="day-slots">
|
||||
<div class="hour-slot" *ngFor="let hour of getHours()">
|
||||
<!-- Ici on peut ajouter des événements plus tard -->
|
||||
<div class="hour-slot"
|
||||
*ngFor="let hour of getHours()"
|
||||
(click)="selectSlot(date, hour)"
|
||||
[class.selected]="isSlotSelected(date, hour)">
|
||||
<div class="slot-indicator" *ngIf="isSlotSelected(date, hour)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,8 +113,90 @@
|
||||
<!-- Message si aucune semaine sélectionnée -->
|
||||
<div class="week-section empty-state" *ngIf="selectedDates.length === 0">
|
||||
<div class="empty-message">
|
||||
<p>Sélectionnez une date dans le calendrier pour voir le planning de la semaine</p>
|
||||
<p>Sélectionnez une date dans le calendrier</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar à droite -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-header">
|
||||
<h3 class="sidebar-title">Détails</h3>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-block" *ngIf="selectedSlot">
|
||||
<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"/>
|
||||
</svg>
|
||||
Spéctacle sélectionné :
|
||||
</h4>
|
||||
<div class="slot-info">
|
||||
@for (show of shows(); track show.id) {
|
||||
<p><strong>{{ show.name }}</strong></p>
|
||||
<p>{{ show.place }}</p>
|
||||
<p>{{ show.date }}</p>
|
||||
<p>{{ show.description }}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-block">
|
||||
<h4>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Statistiques
|
||||
</h4>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ getTotalEvents() }}</div>
|
||||
<div class="stat-label">Événements</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">S{{ getWeekNumber() }}</div>
|
||||
<div class="stat-label">Semaine</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="3" stroke-width="2"/>
|
||||
<path d="M12 1v6m0 6v6M1 12h6m6 0h6" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Actions rapides
|
||||
</h4>
|
||||
<button class="sidebar-btn" nzType="default" (click)="showModal()">
|
||||
<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 événement</span>
|
||||
</button>
|
||||
|
||||
<nz-modal
|
||||
(nzOnCancel)="handleCancel()"
|
||||
(nzOnOk)="handleOk()"
|
||||
[(nzVisible)]="isVisible"
|
||||
nzCentered
|
||||
nzDraggable
|
||||
nzTitle="Création d'évènement"
|
||||
>
|
||||
<ng-container *nzModalContent>
|
||||
<p>Just don't learn physics at school and your life will be full of magic and miracles.</p>
|
||||
<p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
<button class="sidebar-btn">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-width="2"/>
|
||||
<polyline points="14 2 14 8 20 8" stroke-width="2"/>
|
||||
</svg>
|
||||
Voir rapports
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user