Skip to content

Commit

Permalink
Final demo day touch ups
Browse files Browse the repository at this point in the history
  • Loading branch information
@Takudzwamz
Takudzwamz committed Nov 28, 2023
1 parent 89e002f commit 34d90b5
Show file tree
Hide file tree
Showing 4 changed files with 237 additions and 108 deletions.
171 changes: 98 additions & 73 deletions client/src/app/components/appointment-scheduler/appointment-scheduler.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@

<div class="container">
<div class="greeting">Добрый день, {{user.firstName}} {{user.lastName}}</div>
<div class="appointment-actions">
<button class="btn-appointment" (click)="onReturnToAppointments()">Приёмы</button>
</div>

<div class="greeting"><span><i class="fas fa-hand-sparkles fa-2x"></i> </span> Добрый день, {{ profileData?.firstName }}</div>

<div class="dateToVisitContainer">
<div>Выберите удобную дату посещения</div>
<div><span><i class="far fa-calendar-alt"></i></span> Выберите удобную дату посещения</div>
<mat-form-field class="example-form-field">
<mat-label>Выбрать дату</mat-label>
<input matInput [matDatepicker]="datepicker" [min]="minDate" (dateChange)="updateDate($event)">
Expand All @@ -19,7 +24,7 @@

<div class="selectors">
<div class="speciality">
<div>Выберите нужного специалиста</div>
<div><span><i class="fas fa-user-md"></i> </span> Выберите нужного специалиста</div>
<select #cricket (change)="updateSpeciality($event)" [(ngModel)]="form.speciality">
<option value="empty">Не выбран</option>
<option *ngFor="let speciality of specialities" [value]="speciality">
Expand All @@ -28,7 +33,7 @@
</select>
</div>
<div class="doctor">
<div>Выберите врача</div>
<div><span><i class="fas fa-stethoscope"></i></span> Выберите врача</div>
<select (change)="updateDoctor($event)" [(ngModel)]="form.doctor">
<option value="empty">Не выбран</option>
<option *ngFor="let doctor of doctors" [value]="doctor">
Expand All @@ -45,76 +50,81 @@

<div class="ticketsLeft">Осталось свободных слотов: {{form.ticketsLeft}} </div>

<table mat-table [dataSource]="form.dataSource" class="mat-elevation-z8 table-container">

<ng-container matColumnDef="mnd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.mnd === 'Выходной' ? null : onClick('mnd')">
Пн.
</th>
<td mat-cell *matCellDef="let element" (click)="element.mnd === 'Выходной' ? null : onClick('mnd')"
[class.day-selected]="form.timetable.isSelectedDay==='mnd'">
{{element.mnd}} </td>
</ng-container>

<ng-container matColumnDef="tsd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.tsd === 'Выходной' ? null : onClick('tsd')">
Вт. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='tsd'"
(click)="element.tsd === 'Выходной' ? null : onClick('tsd')"> {{element.tsd}}
</td>
</ng-container>

<ng-container matColumnDef="wnd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.wnd === 'Выходной' ? null : onClick('wnd')">
Ср. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='wnd'"
(click)="element.wnd === 'Выходной' ? null : onClick('wnd')"> {{element.wnd}}
</td>
</ng-container>

<ng-container matColumnDef="trd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.trd === 'Выходной' ? null : onClick('trd')">
Чт. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='trd'"
(click)="element.trd === 'Выходной' ? null : onClick('trd')"> {{element.trd}}
</td>
</ng-container>

<ng-container matColumnDef="frd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.frd === 'Выходной' ? null : onClick('frd')">
Пт. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='frd'"
(click)="element.frd === 'Выходной' ? null : onClick('frd')"> {{element.frd}}
</td>
</ng-container>

<ng-container matColumnDef="std">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.std === 'Выходной' ? null : onClick('std')">
Сб.
</th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='std'"
(click)="element.std === 'Выходной' ? null : onClick('std')"> {{element.std}}
</td>
</ng-container>

<ng-container matColumnDef="snd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.snd === 'Выходной' ? null : onClick('snd')">
Вс. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='snd'"
(click)="element.snd === 'Выходной' ? null : onClick('snd')"> {{element.snd}}
</td>
</ng-container>
<div class="table-scroll-container">
<!-- Your existing table structure goes here -->
<table mat-table [dataSource]="form.dataSource" class="mat-elevation-z8 table-container">

<ng-container matColumnDef="mnd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.mnd === 'Выходной' ? null : onClick('mnd')">
Пн.
</th>
<td mat-cell *matCellDef="let element" (click)="element.mnd === 'Выходной' ? null : onClick('mnd')"
[class.day-selected]="form.timetable.isSelectedDay==='mnd'">
{{element.mnd}} </td>
</ng-container>

<ng-container matColumnDef="tsd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.tsd === 'Выходной' ? null : onClick('tsd')">
Вт. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='tsd'"
(click)="element.tsd === 'Выходной' ? null : onClick('tsd')"> {{element.tsd}}
</td>
</ng-container>

<ng-container matColumnDef="wnd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.wnd === 'Выходной' ? null : onClick('wnd')">
Ср. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='wnd'"
(click)="element.wnd === 'Выходной' ? null : onClick('wnd')"> {{element.wnd}}
</td>
</ng-container>

<ng-container matColumnDef="trd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.trd === 'Выходной' ? null : onClick('trd')">
Чт. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='trd'"
(click)="element.trd === 'Выходной' ? null : onClick('trd')"> {{element.trd}}
</td>
</ng-container>

<ng-container matColumnDef="frd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.frd === 'Выходной' ? null : onClick('frd')">
Пт. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='frd'"
(click)="element.frd === 'Выходной' ? null : onClick('frd')"> {{element.frd}}
</td>
</ng-container>

<ng-container matColumnDef="std">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.std === 'Выходной' ? null : onClick('std')">
Сб.
</th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='std'"
(click)="element.std === 'Выходной' ? null : onClick('std')"> {{element.std}}
</td>
</ng-container>

<ng-container matColumnDef="snd">
<th mat-header-cell *matHeaderCellDef="let element"
(click)="element.snd === 'Выходной' ? null : onClick('snd')">
Вс. </th>
<td mat-cell *matCellDef="let element" [class.day-selected]="form.timetable.isSelectedDay==='snd'"
(click)="element.snd === 'Выходной' ? null : onClick('snd')"> {{element.snd}}
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

</div>

<div class="buttonContainer" *ngIf="form.isAllFieldsFilled">
Expand All @@ -126,4 +136,19 @@
</button>
</div>

</div>

<div class="custom-shape-divider-bottom-1667156080">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
</svg>
</div>
<div class="custom-shape-divider-top-1667156508">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
</svg>
</div>
Loading

0 comments on commit 34d90b5

Please sign in to comment.