cernont/pyrofetes-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

amélioration de planning

Browse Source
This commit is contained in:
Timothé
2025-12-11 17:37:52 +01:00
parent db4a851a81
commit 619a2b240a
3 changed files with 167 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/components/pages/planning/planning.css
View File

@@ -7,20 +7,52 @@
}
.planning {
height: 100%;
display: grid;
grid-template-columns: 280px 1fr 240px;
display: flex;
flex-direction: row; /* au lieu de column */
gap: 15px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
/* Section Calendrier (gauche) */
.left {
width: 70%;
height: 100%;
display: flex;
flex-direction: column;
gap: 15px;
}
.right {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* Section Calendrier */
.calendar-section {
width: 90%;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
overflow-y: auto;
}
.calendar-section::-webkit-scrollbar {
width: 6px;
}
.calendar-section::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 10px;
}
.calendar-section::-webkit-scrollbar-thumb {
background: var(--ugly-yellow);
border-radius: 10px;
}
.calendar-title {
@@ -89,12 +121,13 @@
}
.card {
width: 100%;
height: 100%;
background: white;
border: 2px solid var(--ugly-yellow);
border-radius: 16px;
padding: 16px;
box-shadow: 0 3px 12px rgba(212, 165, 116, 0.15);
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -136,7 +169,6 @@
/* Styles pour le calendrier NG-ZORRO */
::ng-deep .card nz-calendar {
background: transparent;
flex: 1;
overflow: hidden;
}
@@ -203,12 +235,13 @@
height: 36px;
}
/* Section Planning (centre) */
/* Section Planning */
.week-section {
background: white;
border-radius: 16px;
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
padding: 18px;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -325,7 +358,11 @@
grid-template-columns: 50px repeat(7, 1fr);
gap: 0;
height: 100%;
overflow: hidden;
overflow-y: scroll;
}
.week-grid::-webkit-scrollbar {
display: none;
}
.time-column {
@@ -338,7 +375,7 @@
}
.time-slot {
height: 60px;
height: 40px;
display: flex;
align-items: flex-start;
justify-content: center;
@@ -397,7 +434,7 @@
}
.hour-slot {
height: 60px;
height: 40px;
border-bottom: 1px solid #f5f5f5;
padding: 3px;
position: relative;
@@ -414,12 +451,12 @@
.hour-slot.selected {
background: rgba(212, 165, 116, 0.2);
border-left: 3px solid var(--ugly-yellow);
border-bottom: 3px solid var(--ugly-yellow);
}
.slot-indicator {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
background: var(--ugly-yellow);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(212, 165, 116, 0.4);
@@ -437,14 +474,17 @@
}
}
/* Sidebar (droite) */
.sidebar-section {
/* Sidebar */
.details {
margin-top: 14px;
width: 90%;
background: white;
border-radius: 16px;
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
padding: 18px;
overflow-y: auto;
max-height: 100%;
display: flex;
flex-direction: column;
}
.sidebar-section::-webkit-scrollbar {

125
src/app/components/pages/planning/planning.html
View File

@@ -1,53 +1,12 @@
<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>
<div class="date-full">
<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="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>
</ng-template>
</div>
</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()">
<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"/>
@@ -67,7 +26,8 @@
<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>
<button class="today-btn" (click)="goToToday()">
@@ -75,7 +35,8 @@
</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>
@@ -111,14 +72,51 @@
</div>
<!-- Message si aucune semaine sélectionnée -->
<div class="week-section empty-state" *ngIf="selectedDates.length === 0">
<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>
</ng-template>
</div>
</div>
<!-- Sidebar à droite -->
<div class="sidebar-section">
<div class="details">
<div class="sidebar-header">
<h3 class="sidebar-title">Détails</h3>
</div>
@@ -141,25 +139,6 @@
</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()"
<nz-modal (nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()"
[(nzVisible)]="isVisible"
nzCentered
nzDraggable
nzTitle="Création d'évènement"
>
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>
@@ -200,3 +174,4 @@
</div>
</div>
</div>
</div>

41
src/app/components/pages/planning/planning.ts
View File

@@ -1,25 +1,24 @@
import {Component, inject, OnInit, signal} from '@angular/core';
import { NzCalendarMode, NzCalendarModule } from 'ng-zorro-antd/calendar';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {NzCalendarMode, NzCalendarModule} from 'ng-zorro-antd/calendar';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {ReadShowDto, ShowsService} from "../../../services/api";
import {firstValueFrom} from "rxjs";
import {NzTableComponent} from "ng-zorro-antd/table";
import {NzModalComponent, NzModalModule} from "ng-zorro-antd/modal";
import {NzButtonModule} from "ng-zorro-antd/button";
@Component({
selector: 'app-planning',
imports: [NzCalendarModule, CommonModule, FormsModule, NzModalComponent, NzButtonModule, NzModalModule],
imports: [NzCalendarModule, CommonModule, FormsModule, NzButtonModule, NzModalModule],
templateUrl: './planning.html',
styleUrl: './planning.css',
})
export class Planning implements OnInit{
export class Planning implements OnInit {
private showsServices = inject(ShowsService)
shows = signal<ReadShowDto[]>([]);
async ngOnInit(){
async ngOnInit() {
await this.fetchShows();
}
@@ -28,44 +27,34 @@ export class Planning implements OnInit{
this.shows.set(shows);
}
isVisible = false;
isVisible = signal<boolean>(false);
showModal(): void {
if (!this.isVisible) {
this.isVisible = true;
}
else {
this.isVisible = false;
if (!this.isVisible()) {
this.isVisible.set(true);
} else {
this.isVisible.set(false);
}
}
handleOk(): void {
console.log('Button ok clicked!');
this.isVisible = false;
this.isVisible.set(false);
}
handleCancel(): void {
console.log('Button cancel clicked!');
this.isVisible = false;
this.isVisible.set(false);
}
selectSlot(date: Date, hour: string): void {
this.selectedSlot = { date, hour };
this.selectedSlot = {date, hour};
console.log('Slot sélectionné:', date, hour);
}
currentDate: Date = new Date();
selectedDates: Date[] = [];
monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
@@ -179,7 +168,7 @@ export class Planning implements OnInit{
}
getHours(): string[] {
return ['8h', '10h', '11h', '12h', '14h', '16h', '18h', '20h', '22h'];
return ['', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h'];
}
// Filtres