amélioration de planning
This commit is contained in:
@@ -1,30 +1,102 @@
|
||||
<div class="background">
|
||||
<div class="planning">
|
||||
<!-- Calendrier à gauche -->
|
||||
<div class="calendar-section">
|
||||
<div class="calendar-title">CALENDRIER</div>
|
||||
<div class="calendar-date-info">
|
||||
<div class="date-badge">
|
||||
<div class="month-abbr">{{ getCurrentMonth() }}</div>
|
||||
<div class="day-number">{{ getCurrentDay() }}</div>
|
||||
<div class="left">
|
||||
<!-- Planning de la semaine au centre -->
|
||||
<div class="week-section" *ngIf="selectedDates.length > 0">
|
||||
<div class="week-toolbar">
|
||||
<div class="week-actions">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="date-full">
|
||||
<div class="date-text">{{ getCurrentDate() }}</div>
|
||||
<div class="day-text">{{ getDayWeek() }}</div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Colonnes des jours -->
|
||||
<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">{{ 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>
|
||||
</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"/>
|
||||
<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>
|
||||
@@ -43,82 +115,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Planning de la semaine au centre -->
|
||||
<div class="week-section" *ngIf="selectedDates.length > 0">
|
||||
<div class="week-toolbar">
|
||||
<div class="week-actions">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Colonnes des jours -->
|
||||
<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">{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar à droite -->
|
||||
<div class="sidebar-section">
|
||||
<div class="details">
|
||||
<div class="sidebar-header">
|
||||
<h3 class="sidebar-title">Détails</h3>
|
||||
</div>
|
||||
@@ -133,33 +131,14 @@
|
||||
</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>
|
||||
<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">
|
||||
@@ -172,19 +151,14 @@
|
||||
<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>
|
||||
<span>Créer un spectacle</span>
|
||||
</button>
|
||||
|
||||
<nz-modal
|
||||
(nzOnCancel)="handleCancel()"
|
||||
(nzOnOk)="handleOk()"
|
||||
[(nzVisible)]="isVisible"
|
||||
nzCentered
|
||||
nzDraggable
|
||||
nzTitle="Création d'évènement"
|
||||
>
|
||||
<nz-modal (nzOnCancel)="handleCancel()"
|
||||
(nzOnOk)="handleOk()"
|
||||
[(nzVisible)]="isVisible"
|
||||
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>
|
||||
@@ -199,4 +173,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user