diff --git a/src/app/components/pages/planning/planning.css b/src/app/components/pages/planning/planning.css index aaf22170..20cf2066 100644 --- a/src/app/components/pages/planning/planning.css +++ b/src/app/components/pages/planning/planning.css @@ -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 { diff --git a/src/app/components/pages/planning/planning.html b/src/app/components/pages/planning/planning.html index 4e02fce1..33233601 100644 --- a/src/app/components/pages/planning/planning.html +++ b/src/app/components/pages/planning/planning.html @@ -1,30 +1,102 @@
- -
-
CALENDRIER
-
-
-
{{ getCurrentMonth() }}
-
{{ getCurrentDay() }}
+
+ +
+
+
+ + +
+
+ + + +
-
-
{{ getCurrentDate() }}
-
{{ getDayWeek() }}
+ +
+
+ +
+
+
+ {{ hour }} +
+
+ + +
+
+
{{ getDayName(date) }}
+
{{ date.getDate() }}
+
+
+
+
+
+
+
+
+ +
+
+

Sélectionnez une date dans le calendrier

+
+
+
+ + +
+
+
CALENDRIER
+

{{ currentMonthYear }}

@@ -43,82 +115,8 @@
- -
-
-
- - -
-
- - - -
-
- -
-
- -
-
-
- {{ hour }} -
-
- - -
-
-
{{ getDayName(date) }}
-
{{ date.getDate() }}
-
-
-
-
-
-
-
-
-
-
- - -
-
-

Sélectionnez une date dans le calendrier

-
-
- -
+

Détails

@@ -133,33 +131,14 @@
@for (show of shows(); track show.id) { -

{{ show.name }}

-

{{ show.place }}

-

{{ show.date }}

-

{{ show.description }}

+

{{ show.name }}

+

{{ show.place }}

+

{{ show.date }}

+

{{ show.description }}

}
-
-

- - - - Statistiques -

-
-
-
{{ getTotalEvents() }}
-
Événements
-
-
-
S{{ getWeekNumber() }}
-
Semaine
-
-
-
-

@@ -172,19 +151,14 @@ - Créer événement + Créer un spectacle - + -

Just don't learn physics at school and your life will be full of magic and miracles.

Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.

 @@ -199,4 +173,5 @@

+
\ No newline at end of file diff --git a/src/app/components/pages/planning/planning.ts b/src/app/components/pages/planning/planning.ts index 3a2ed418..ed0e46e9 100644 --- a/src/app/components/pages/planning/planning.ts +++ b/src/app/components/pages/planning/planning.ts @@ -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([]); - async ngOnInit(){ + async ngOnInit() { await this.fetchShows(); } @@ -28,44 +27,34 @@ export class Planning implements OnInit{ this.shows.set(shows); } - isVisible = false; + isVisible = signal(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