avancement planning
This commit is contained in:
@@ -1,8 +1,7 @@
|
||||
<div class="background">
|
||||
<div class="planning">
|
||||
<div class="left">
|
||||
<!-- Planning de la semaine au centre -->
|
||||
<div class="week-section" *ngIf="selectedDates.length > 0">
|
||||
<div class="week-section">
|
||||
<div class="week-toolbar">
|
||||
<div class="week-actions">
|
||||
<button [class]="isCamionFilterActive ? 'action-btn active' : 'action-btn'"
|
||||
@@ -17,8 +16,7 @@
|
||||
</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"/>
|
||||
<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>
|
||||
Show
|
||||
</button>
|
||||
@@ -30,9 +28,7 @@
|
||||
stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="today-btn" (click)="goToToday()">
|
||||
Aujourd'hui
|
||||
</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"
|
||||
@@ -44,134 +40,202 @@
|
||||
|
||||
<div class="week-calendar">
|
||||
<div class="week-grid">
|
||||
<!-- Colonne des heures -->
|
||||
<div class="time-column">
|
||||
<div class="time-header"></div>
|
||||
<div class="time-slot" *ngFor="let hour of getHours()">
|
||||
{{ hour }}
|
||||
</div>
|
||||
<div class="time-slot" *ngFor="let hour of getHours()">{{ hour }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Colonnes des jours -->
|
||||
<div class="day-column" *ngFor="let date of selectedDates">
|
||||
<div class="day-header" [class.today]="isToday(date)">
|
||||
<div class="day-header"
|
||||
[class.today]="isToday(date)"
|
||||
[class.selected-day]="isDaySelected(date)"
|
||||
(click)="selectDay(date)">
|
||||
<div class="day-name">{{ getDayName(date) }}</div>
|
||||
<div class="day-date">{{ date.getDate() }}</div>
|
||||
</div>
|
||||
<div class="day-slots">
|
||||
<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>
|
||||
(click)="selectDay(date)">
|
||||
@for (show of getShowsForSlot(date, hour); track show.id) {
|
||||
<div class="show-event">
|
||||
<span class="show-event-name">{{ show.name }}</span>
|
||||
<span class="show-event-time" *ngIf="show.date">{{ formatShowTime(show.date) }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message si aucune semaine sélectionnée -->
|
||||
<div *ngIf="selectedDates.length === 0" class="week-section empty-state">
|
||||
<div class="empty-message">
|
||||
<p>Sélectionnez une date dans le calendrier</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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"/>
|
||||
</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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nz-calendar
|
||||
[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() }}
|
||||
<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"/>
|
||||
</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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
<nz-calendar
|
||||
[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() }}
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar à droite -->
|
||||
<div class="details">
|
||||
<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 class="details">
|
||||
<div class="sidebar-header">
|
||||
<h3 class="sidebar-title">
|
||||
@if (selectedDay) {
|
||||
{{ formatSelectedDay(selectedDay) }}
|
||||
} @else {
|
||||
Détails
|
||||
}
|
||||
</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"/>
|
||||
</svg>
|
||||
Spectacles du jour
|
||||
</h4>
|
||||
@if (getDayShows().length === 0) {
|
||||
<p class="no-shows">Aucun spectacle ce jour</p>
|
||||
} @else {
|
||||
<div class="slot-info">
|
||||
@for (show of getDayShows(); track show.id) {
|
||||
<div class="show-card">
|
||||
<div class="show-card-header">
|
||||
<strong>{{ show.name }}</strong>
|
||||
<span class="show-time" *ngIf="show.date">{{ formatShowTime(show.date) }}</span>
|
||||
</div>
|
||||
<p *ngIf="show.place">{{ show.place }}</p>
|
||||
<p *ngIf="show.description">{{ show.description }}</p>
|
||||
</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 un spectacle</span>
|
||||
</button>
|
||||
|
||||
<nz-modal (nzOnCancel)="handleCancel()"
|
||||
(nzOnOk)="handleOk()"
|
||||
[(nzVisible)]="isVisible"
|
||||
nzTitle="Création d'évènement">
|
||||
<ng-container *nzModalContent>
|
||||
<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 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" (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 un spectacle</span>
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<nz-modal
|
||||
[nzVisible]="isVisible()"
|
||||
(nzVisibleChange)="isVisible.set($event)"
|
||||
[nzFooter]="null"
|
||||
[nzWidth]="480"
|
||||
nzClassName="create-show-modal"
|
||||
(nzOnCancel)="handleCancel()">
|
||||
<ng-container *nzModalContent>
|
||||
<div class="create-form">
|
||||
<div class="create-form-title">
|
||||
<div class="create-form-icon">
|
||||
<svg width="20" height="20" 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="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Créer un spectacle</h3>
|
||||
<p>Renseignez les informations du spectacle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Nom du spectacle <span class="form-required">*</span></label>
|
||||
<input class="form-input" placeholder="Ex: Feu d'artifice 14 juillet"
|
||||
[(ngModel)]="newShow.name" name="name"/>
|
||||
</div>
|
||||
|
||||
<div class="form-row-2">
|
||||
<div class="form-field">
|
||||
<label class="form-label">Lieu</label>
|
||||
<input class="form-input" placeholder="Ex: Place de la mairie"
|
||||
[(ngModel)]="newShow.place" name="place"/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label class="form-label">Date et heure</label>
|
||||
<div class="form-datepicker-wrap">
|
||||
<nz-date-picker
|
||||
nzShowTime
|
||||
nzFormat="dd/MM/yyyy HH:mm"
|
||||
[(ngModel)]="newShowDate"
|
||||
nzPlaceHolder="Choisir une date..."
|
||||
nzDropdownClassName="pyro-datepicker-dropdown"
|
||||
name="date">
|
||||
</nz-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-input form-textarea"
|
||||
placeholder="Notes, consignes, détails techniques..."
|
||||
[(ngModel)]="newShow.description"
|
||||
name="description">
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="form-btn-cancel" (click)="handleCancel()">Annuler</button>
|
||||
<button class="form-btn-submit" [disabled]="!newShow.name" (click)="handleOk()">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path d="M12 5v14M5 12h14" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Créer le spectacle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
|
||||
Reference in New Issue
Block a user