Appointment/appointments_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

end user flow and appointment UI chnages

Browse Source
This commit is contained in:
bitbucket 2023-03-27 16:28:38 +05:30
parent 5cf982d59d
commit ccadab7bc9
28 changed files with 1558 additions and 453 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
View File

@ -1,7 +1,7 @@
<h3>Appointment Details</h3> <h3>Appointment Details</h3>
<mat-form-field> <mat-form-field>
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> <input matInput (keyup)="applyFilter($event)" placeholder="Enter Text" #input>
</mat-form-field> </mat-form-field>
<div class="calender "> <div class="calender ">
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']">&#xf073;</i> <i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']">&#xf073;</i>
@ -16,31 +16,36 @@
<mat-expansion-panel-header > <mat-expansion-panel-header >
<div class="example-container mat-elevation-z8 "> <div class="example-container mat-elevation-z8 ">
<table mat-table [dataSource]="appoinmentsList" #mytable class="my-table mat-elevation-z8 len-table"> <table mat-table [dataSource]="appoinmentsList" #mytable class="my-table mat-elevation-z8 len-table">
<ng-container matColumnDef="busId"> <ng-container matColumnDef="Profile">
<th mat-header-cell *matHeaderCellDef class="font-color"> BusId </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Profile </th>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.busId}} </td> <td mat-cell *matCellDef="let element" class="element-spc"> <br><img src="assets/images/profile.jpg" /> </td>
</ng-container>
<ng-container matColumnDef="ClientName">
<th mat-header-cell *matHeaderCellDef class="font-color"> Client Name </th>
<td mat-cell *matCellDef="let element"> <br><div class="label">{{element.customer[0].cusName || null }} </div></td>
</ng-container> </ng-container>
<!-- <ng-container matColumnDef="picker"> <!-- <ng-container matColumnDef="picker">
<th mat-header-cell *matHeaderCellDef class="font-color"> Date & Time </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Date & Time </th>
<td mat-cell *matCellDef="let element"> {{element.picker}} </td> <td mat-cell *matCellDef="let element"> {{element.picker}} </td>
</ng-container> --> </ng-container> -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef class="font-color">Appointment Date</th>
<td mat-cell *matCellDef="let element"> <br><div class="label">{{element.appoinmentDate | date:'dd-MMM-YYYY' }}</div>
</td>
</ng-container>
<ng-container matColumnDef="time"> <ng-container matColumnDef="time">
<th mat-header-cell *matHeaderCellDef class="font-color">Time </th> <th mat-header-cell *matHeaderCellDef class="font-color">Appointment Time </th>
<td mat-cell *matCellDef="let element"> <div class="label">{{element.appoinmentDate | date:'mediumDate'}}</div> <br> {{element.appoinmentTime}} </td> <td mat-cell *matCellDef="let element"> <div class="label">{{element.appoinmentSlots }}</div> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="slots">
<th mat-header-cell *matHeaderCellDef class="font-color"> Slots</th>
<td mat-cell *matCellDef="let element"> <br>{{element.appoinmentSlots}} </td> <!-- <ng-container matColumnDef="workspace">
</ng-container>
<ng-container matColumnDef="booking">
<th mat-header-cell *matHeaderCellDef class="font-color"> Booking ID </th>
<td mat-cell *matCellDef="let element"> <br>{{element.booking}} </td>
</ng-container>
<ng-container matColumnDef="workspace">
<th mat-header-cell *matHeaderCellDef class="font-color"> Workspace </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Workspace </th>
<td mat-cell *matCellDef="let element" class="element-spc"> <br> {{element.workspace}} </td> <td mat-cell *matCellDef="let element" class="element-spc"> <br> {{element.workspace}} </td>
</ng-container> </ng-container> -->
<ng-container matColumnDef="service"> <!-- <ng-container matColumnDef="service">
<th mat-header-cell *matHeaderCellDef class="font-color"> Service </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Service </th>
<td mat-cell *matCellDef="let element" class="element-spc"> <br><img src="assets/images/1.jpg" /> {{element.service}} </td> <td mat-cell *matCellDef="let element" class="element-spc"> <br><img src="assets/images/1.jpg" /> {{element.service}} </td>
</ng-container> </ng-container>
@ -51,14 +56,14 @@
<ng-container matColumnDef="customer"> <ng-container matColumnDef="customer">
<th mat-header-cell *matHeaderCellDef class="font-color"> Customer </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Customer </th>
<td mat-cell *matCellDef="let element"> <br> {{element.customer}} </td> <td mat-cell *matCellDef="let element"> <br> {{element.customer}} </td>
</ng-container> </ng-container> -->
<ng-container matColumnDef="payment"> <!-- <ng-container matColumnDef="payment">
<th mat-header-cell *matHeaderCellDef class="font-color"> Payment </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Payment </th>
<td mat-cell *matCellDef="let element"> <br>{{element.paymentStatus}} </td> <td mat-cell *matCellDef="let element"> <br>{{element.paymentStatus}} </td>
</ng-container> </ng-container> -->
<ng-container matColumnDef="status"> <ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef class="font-color"> Status </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Status </th>
<td mat-cell *matCellDef="let element"> <br>{{element.status}} </td> <td mat-cell *matCellDef="let element"> <br><span style="font-weight: 700;" [ngStyle] = "{'color':element.status == '0' ? '#4caf50' : '#ffd740'}">{{element.status == 0 ? 'Booked':'Cancelled'}} </span></td>
</ng-container> </ng-container>
<ng-container matColumnDef="action"> <ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
@ -72,11 +77,17 @@
<!-- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <!-- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> --> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> -->
</table> </table>
</div> </div>
<mat-paginator
#paginator
[pageSizeOptions]="pageSizes"
showFirstLastButtons
></mat-paginator>
</mat-expansion-panel-header> </mat-expansion-panel-header>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
</div> </div>
</div> </div>
</div> </div>

44
ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts
View File

@ -41,16 +41,17 @@ const ELEMENT_DATA: UsersData[] = [
export class AppoinmentsListComponent implements OnInit { export class AppoinmentsListComponent implements OnInit {
push: any; push: any;
displayedColumns: string[] = ['busId', 'time', 'slots', 'action']; displayedColumns: string[] = ['Profile', 'ClientName','date','time','status', 'action'];
// dataSource: any; // dataSource: any;
public appoinmentsList:any = new MatTableDataSource(); public appoinmentsList:any = new MatTableDataSource();
// dataSource: any = new MatTableDataSource(ELEMENT_DATA); // dataSource: any = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatTable,{static:true}) table: MatTable<any>; @ViewChild(MatTable,{static:true}) table: MatTable<any>;
@ViewChild(MatPaginator) paginator: MatPaginator; // @ViewChild(MatPaginator) paginator: MatPaginator;
recordStatus: boolean; recordStatus: boolean;
addFormData: any; addFormData: any;
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('paginatorPageSize') paginatorPageSize: MatPaginator;
pageSizes = [3, 5, 7];
constructor(public dialog: MatDialog, public _app:AppointmentsService) { } constructor(public dialog: MatDialog, public _app:AppointmentsService) { }
ngOnInit(): void { ngOnInit(): void {
@ -62,28 +63,33 @@ export class AppoinmentsListComponent implements OnInit {
this._app.getAppoinmentsListDetails().subscribe(res => { this._app.getAppoinmentsListDetails().subscribe(res => {
if (res.status == 200) { if (res.status == 200) {
this.appoinmentsList = res.data; this.appoinmentsList = res.data;
// console.log(this.appoinmentsList) console.log(this.appoinmentsList)
// this.dataSource = res.data.length;
// console.log(this.dataSource)
// this.dataSource.data = this.appoinmentsList;
// console.log(this.dataSource.data)
// this.recordStatus=false;
} }
else{ else{
// this.appoinmentsList=[];
// this.dataSource = null;
// this.recordStatus=true;
} }
} })
,error => { // let param ={'userId':"5"
// this.errorMessage.push(error); // }
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!'); // this._app.getServicesMapDetails(param).subscribe(res => {
// alert(error.html_format); // if (res.status == 200) {
}); // console.log(res)
// this.appoinmentsList = res.data;
// console.log(this.appoinmentsList)
// }
// else{
// }
// })
} }
ngAfterViewInit() { ngAfterViewInit() {
this.appoinmentsList.paginator = this.paginator; this.appoinmentsList.paginator = this.paginator;
this.appoinmentsList.paginator = this.paginatorPageSize;
} }
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;

7
ng-seed/src/app/appoinment/appoinments/appointments-service/appointments.service.ts
View File

@ -27,6 +27,13 @@ export class AppointmentsService {
// ) // )
} }
getServicesMapDetails(addParams): Observable<any> {
return this._http.post(this.apiUrl + 'getServicesMapDetails', addParams)
// .pipe(
// catchError(this.handleError('role', []))
// )
}
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> { handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');

16
ng-seed/src/app/appoinment/consultant-setting/consultant-service/consultant.service.spec.ts Normal file
View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { ConsultantService } from './consultant.service';
describe('ConsultantService', () => {
let service: ConsultantService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(ConsultantService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

33
ng-seed/src/app/appoinment/consultant-setting/consultant-service/consultant.service.ts Normal file
View File

@ -0,0 +1,33 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'environments/environment';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ConsultantService {
private apiUrl = environment.apiEndpoint;
constructor(private _http: HttpClient) { }
getUsersListDetails(id): Observable<any> {
console.log('IN')
return this._http.post(this.apiUrl + 'getPractitionerInfo', {id:id})
// .pipe(
// catchError(this.handleError('role', []))
// )
}
getServicesListDetails(userId,busId): Observable<any> {
console.log('IN')
return this._http.post(this.apiUrl + 'getServicesMapDetails', {busId:busId, userId:userId})
// .pipe(
// catchError(this.handleError('role', []))
// )
}
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
throw new Error('Method not implemented.');
}
}

4
ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts
View File

@ -6,12 +6,14 @@ import { ConsultantSettingComponent } from './consultant-setting/consultant-sett
import { DemoMaterialModule } from 'app/shared/demo.module'; import { DemoMaterialModule } from 'app/shared/demo.module';
import { NgScrollbarModule } from 'ngx-scrollbar'; import { NgScrollbarModule } from 'ngx-scrollbar';
import { EditWorkingHoursComponent } from './edit-working-hours/edit-working-hours.component'; import { EditWorkingHoursComponent } from './edit-working-hours/edit-working-hours.component';
import { ExtraWorkingHoursComponent } from './extra-working-hours/extra-working-hours.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
ConsultantSettingComponent, ConsultantSettingComponent,
EditWorkingHoursComponent EditWorkingHoursComponent,
ExtraWorkingHoursComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,

278
ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html
View File

@ -12,12 +12,12 @@
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<!-- <i class="material-icons">&#xe7fd;</i> --> <i class="material-icons icons-info">&#xe7fd;</i>
Staff Information My Profile
</ng-template> </ng-template>
<div class="staff"> <div class="staff">
<span class="staff-title"> <span class="staff-title">
Set Up Staff Profile Profile
</span> </span>
</div> </div>
<ng-scrollbar class="scrollHV"> <ng-scrollbar class="scrollHV">
@ -25,75 +25,81 @@
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()"> <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group label-container"> <div class="form-group label-container">
<label>Name <span class="line">-</span></label> <label>Name <span class="line">-</span></label>
<input type="text" formControlName="name" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" /> <a style="padding: 10px;">{{usersList.userName}}</a>
<div *ngIf="submitted && f.name.errors" class="invalid-feedback">
<div *ngIf="f.name.errors.required">Name is required</div>
</div>
</div> </div>
<div class="form-group label-container"> <div class="form-group label-container">
<label>Email Address <span style="margin-left: 2.7rem;">-</span></label> <label>Email Address <span style="margin-left: 2.7rem;">-</span></label>
<input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" /> <a style="padding: 10px;">{{usersList.email}}</a>
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
</div> </div>
<div class="form-group label-container"> <div class="form-group label-container">
<label>Role <span style="margin-left: 6.7rem;">-</span></label>
<a style="padding: 10px;">{{usersList.role}}</a>
</div>
<div class="form-group label-container">
<label>Password <span style="margin-left: 4rem;">-</span></label>
<a style="padding: 10px;">{{usersList.password}}</a>
</div>
<div class="form-group label-container">
<label>Gender <span style="margin-left: 5.5rem;">-</span></label>
<a style="padding: 10px;">{{practitionerdetails.gender}}</a>
</div>
<div class="form-group label-container">
<label>Date of Birth <span style="margin-left: 3.5rem;">-</span></label>
<a style="padding: 10px;">{{practitionerdetails.dob}}</a>
</div>
<div class="form-group label-container">
<label>Languages <span style="margin-left: 4rem;">-</span></label>
<a style="padding: 10px;">{{practitionerdetails.languages}}</a>
</div>
<div class="form-group label-container">
<label>Qualification <span style="margin-left: 4rem;">-</span></label>
<a style="padding: 10px;">{{practitionerdetails.qualification}}</a>
</div>
<div class="form-group label-container">
<label>Designation <span style="margin-left: 3.7rem;">-</span></label>
<a style="padding: 10px;">{{practitionerdetails.designtion}}</a>
</div>
<div class="form-group label-container">
<label>Experience <span style="margin-left: 4rem;">-</span></label>
<a style="padding: 10px;">{{practitionerdetails.exp}}</a>
</div>
<div class="form-group label-container">
<label>Fees <span style="margin-left: 6.7rem;">-</span></label>
<a style="padding: 10px;">{{practitionerdetails.fees}}</a>
</div>
<!-- <div class="form-group label-container">
<label>WorkingHours <span style="margin-left: 6.7rem;">-</span></label>
<a style="padding: 10px;">{{practitionerdetails.workingHours}}</a>
</div> -->
<!-- <div class="form-group label-container">
<label>Contact Number <span style="margin-left: 2rem;">-</span></label> <label>Contact Number <span style="margin-left: 2rem;">-</span></label>
<input type="text" formControlName="contact" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.contact.errors }" /> <input type="text" formControlName="contact" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.contact.errors }" />
<div *ngIf="submitted && f.contact.errors" class="invalid-feedback"> <div *ngIf="submitted && f.contact.errors" class="invalid-feedback">
<div *ngIf="f.contact.errors.required">Last Name is required</div> <div *ngIf="f.contact.errors.required">Contact Number is required</div>
</div> </div>
</div> </div> -->
<div class="form-group label-container"> <!-- <div class="form-group label-container">
<label>Primary Workspace <span style="margin-left: 1rem;">-</span></label> <label>Primary Workspace <span style="margin-left: 1rem;">-</span></label>
<input type="text" formControlName="workspace" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.workspace.errors }" /> <input type="text" formControlName="workspace" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.workspace.errors }" />
<div *ngIf="submitted && f.workspace.errors" class="invalid-feedback"> <div *ngIf="submitted && f.workspace.errors" class="invalid-feedback">
<div *ngIf="f.workspace.errors.required">First Name is required</div> <div *ngIf="f.workspace.errors.required">Workspace is required</div>
</div> </div>
</div> </div> -->
<div class="form-group label-container"> <!-- <div class="form-group label-container">
<label>Role <span style="margin-left: 6.7rem;">-</span></label>
<input type="text" formControlName="role" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.role.errors }" />
<div *ngIf="submitted && f.role.errors" class="invalid-feedback">
<div *ngIf="f.role.errors.required">First Name is required</div>
</div>
</div>
<div class="form-group label-container">
<label>Designation <span style="margin-left: 3.7rem;">-</span></label>
<input type="text" formControlName="designation" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.designation.errors }" />
<div *ngIf="submitted && f.designation.errors" class="invalid-feedback">
<div *ngIf="f.designation.errors.required">First Name is required</div>
</div>
</div>
<div class="form-group label-container">
<label>Date of Birth <span style="margin-left: 3.5rem;">-</span></label>
<input type="text" formControlName="birth" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.birth.errors }" />
<div *ngIf="submitted && f.birth.errors" class="invalid-feedback">
<div *ngIf="f.birth.errors.required">First Name is required</div>
</div>
</div>
<div class="form-group label-container">
<label>Gender <span style="margin-left: 5.5rem;">-</span></label>
<input type="text" formControlName="gender" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }" />
<div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
<div *ngIf="f.gender.errors.required">First Name is required</div>
</div>
</div>
<div class="form-group label-container">
<label>Status <span style="margin-left: 6.5rem;">-</span></label> <label>Status <span style="margin-left: 6.5rem;">-</span></label>
<input type="text" formControlName="status" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.status.errors }" /> <input type="text" formControlName="status" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.status.errors }" />
<div *ngIf="submitted && f.status.errors" class="invalid-feedback"> <div *ngIf="submitted && f.status.errors" class="invalid-feedback">
<div *ngIf="f.status.errors.required">First Name is required</div> <div *ngIf="f.status.errors.required">Status is required</div>
</div> </div>
</div> </div> -->
<div class="form-group label-container"> <!-- <div class="form-group label-container">
<label>Additional Information <span style="margin-left: 0.5rem;">-</span></label> <label>Additional Information <span style="margin-left: 0.5rem;">-</span></label>
<input type="text" formControlName="information" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.information.errors }" /> <input type="text" formControlName="information" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.information.errors }" />
<div *ngIf="submitted && f.information.errors" class="invalid-feedback"> <div *ngIf="submitted && f.information.errors" class="invalid-feedback">
<div *ngIf="f.information.errors.required">First Name is required</div> <div *ngIf="f.information.errors.required">Information is required</div>
</div> </div>
</div> </div> -->
<!-- <div class="form-group"> <!-- <div class="form-group">
<button class="btn btn-primary">Register</button> <button class="btn btn-primary">Register</button>
</div> --> </div> -->
@ -104,7 +110,7 @@
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<!-- <i class="material-icons">&#xe192;</i> --> <i class="material-icons icons-Hours">&#xe192;</i>
Working Hours Working Hours
</ng-template> </ng-template>
<div class="staff"> <div class="staff">
@ -118,11 +124,12 @@
<input id="color-toggle" type="checkbox" > <input id="color-toggle" type="checkbox" >
<label for="color-toggle" class="toggle">Customize working hours.</label> <label for="color-toggle" class="toggle">Customize working hours.</label>
<div class="booking-url"> <div class="booking-url">
<span class="underline-title full-width hours">Working Hours</span> <!-- <span class="underline-title full-width hours">Working Hours</span> -->
<span class="underline-title">Working Hours</span>
</div> </div>
<div class="alert"> <!-- <div class="alert">
<span class="closebtn">&times; sample follows customized working hours in (GMT +05:30) India Standard Time (Asia/Kolkata).</span> <span class="closebtn">&times; sample follows customized working hours in (GMT +05:30) India Standard Time (Asia/Kolkata).</span>
</div> </div> -->
<div class="timing-container"> <div class="timing-container">
<div class="timing"> <div class="timing">
<span class="dis-flex"> <span class="dis-flex">
@ -130,32 +137,112 @@
</span> </span>
</div> </div>
<div class="dis-flex mt-1"> <div class="dis-flex mt-1">
<div class="dis-flex"> <div class="dis-flex" >
<span>10:00 am</span> <span> 09:00am</span>
</div> </div>
<span class="hyphen">-</span> <span class="hyphen">-</span>
<div class="dis-flex"> <div class="dis-flex" >
<span>01:00 pm</span> <span> 06:00pm</span>
</div> </div>
</div> </div>
</div> </div>
<div class="timing-container"> <div class="timing-container">
<div class="timing"> <div class="timing">
<span class="dis-flex"> <span class="dis-flex">
<i class="material-icons">&#xe192;</i> <span class="clock">Monday</span> <i class="material-icons">&#xe192;</i> <span class="clock">Monday</span>
</span> </span>
</div> </div>
<div class="dis-flex mt-1"> <div class="dis-flex mt-1">
<div class="dis-flex"> <div class="dis-flex" >
<span>10:00 am</span> <span> 09:00am</span>
</div> </div>
<span class="hyphen">-</span> <span class="hyphen">-</span>
<div class="dis-flex"> <div class="dis-flex" >
<span>01:00 pm</span> <span> 06:00pm</span>
</div> </div>
</div> </div>
</div> </div>
<div class="timing-container"> <div class="timing-container">
<div class="timing">
<span class="dis-flex">
<i class="material-icons">&#xe192;</i> <span class="clock">Tuesday</span>
</span>
</div>
<div class="dis-flex mt-1">
<div class="dis-flex" >
<span> 09:00am</span>
</div>
<span class="hyphen">-</span>
<div class="dis-flex" >
<span> 06:00pm</span>
</div>
</div>
</div>
<div class="timing-container">
<div class="timing">
<span class="dis-flex">
<i class="material-icons">&#xe192;</i> <span class="clock">Wednesday</span>
</span>
</div>
<div class="dis-flex mt-1">
<div class="dis-flex" >
<span> 09:00am</span>
</div>
<span class="hyphen">-</span>
<div class="dis-flex" >
<span> 06:00pm</span>
</div>
</div>
</div>
<div class="timing-container">
<div class="timing">
<span class="dis-flex">
<i class="material-icons">&#xe192;</i> <span class="clock">Thursday</span>
</span>
</div>
<div class="dis-flex mt-1">
<div class="dis-flex" >
<span> 09:00am</span>
</div>
<span class="hyphen">-</span>
<div class="dis-flex" >
<span> 06:00pm</span>
</div>
</div>
</div>
<div class="timing-container">
<div class="timing">
<span class="dis-flex">
<i class="material-icons">&#xe192;</i> <span class="clock">Friday</span>
</span>
</div>
<div class="dis-flex mt-1">
<div class="dis-flex" >
<span> 09:00am</span>
</div>
<span class="hyphen">-</span>
<div class="dis-flex" >
<span> 06:00pm</span>
</div>
</div>
</div>
<div class="timing-container">
<div class="timing">
<span class="dis-flex">
<i class="material-icons">&#xe192;</i> <span class="clock">Saturday</span>
</span>
</div>
<div class="dis-flex mt-1">
<div class="dis-flex" >
<span> 09:00am</span>
</div>
<span class="hyphen">-</span>
<div class="dis-flex" >
<span> 06:00pm</span>
</div>
</div>
</div>
<!-- <div class="timing-container">
<div class="timing"> <div class="timing">
<span class="dis-flex"> <span class="dis-flex">
<i class="material-icons">&#xe192;</i> <span class="clock">Tuesday</span> <i class="material-icons">&#xe192;</i> <span class="clock">Tuesday</span>
@ -170,15 +257,15 @@
<span>01:00 pm</span> <span>01:00 pm</span>
</div> </div>
</div> </div>
</div> </div> -->
<div class="booking-url"> <div class="booking-url">
<span class="underline-title full-width hours">Special Working Hours</span> <span class="underline-title full-width hours">Special Working Hours</span>
<button mat-button class="add-button">Add</button> <button mat-button (click)="workingDialog('Add',{})" class="add-button">Add</button>
</div> </div>
<p class="para">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p> <p class="para">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
<div class="booking-url"> <div class="booking-url">
<span class="underline-title full-width hours">Unavailability</span> <span class="underline-title full-width hours">Unavailability</span>
<button mat-button class="add-button">Add</button> <button mat-button (click)="workingDialog('Add',{})" class="add-button">Add</button>
</div> </div>
<p class="para margin">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p> <p class="para margin">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
</ng-scrollbar> </ng-scrollbar>
@ -187,43 +274,35 @@
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
Assigned Services <i class="material-icons icons">&#xe7fb;</i> Assigned Services
</ng-template> </ng-template>
<div class="staff"> <div class="staff">
<span class="staff-title"> <span class="staff-title">
Define Your Services Define Your Services
</span> </span>
<mat-form-field appearance="outline"> <!-- <mat-form-field appearance="outline" class="mat-pane">
<!-- <mat-label>Select an option</mat-label> --> <mat-label>Role</mat-label>
<mat-select [(value)]="selected"> <mat-select placeholder="Select Role" formControlName="assiendservice" required>
<mat-option>None</mat-option> <mat-option>--</mat-option>
<mat-option value="option1">Option 1</mat-option> <mat-option *ngFor="let details of servicesList_array" [value]="details.servicesName">
<mat-option value="option2">Option 2</mat-option> {{details.servicesName}}
<mat-option value="option3">Option 3</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> <mat-error *ngIf="myError('businessselect', 'required')">role is required</mat-error>
</div> </mat-form-field> -->
<div class="mat-card" *ngFor="let message of messages">
<mat-nav-list>
<mat-list-item (click)="onSelect(message)" >
<img mat-list-avatar src="{{message.photo}}" alt="">
<h3 mat-line class="name"> {{message.name}} </h3>
<p mat-line class="time-amount"> {{message.time}} <span>| ₹ {{message.amount}}</span></p>
<p mat-line class="Customize">+ Customize the price of a service.</p>
</mat-list-item>
</mat-nav-list>
<div class="mat-name">
{{message.username}}
</div>
<div class="mat-status">
{{message.status}}
</div>
</div> </div>
<mat-card class="mb-2 example-card d-flex" *ngFor="let details of servicesList_array">
<input id="color-toggle" type="checkbox" class="checkbox">
<mat-card-title-group>
<mat-card-title class="service-info">{{details.servicesName}}</mat-card-title>
<mat-card-title class="info">{{details.duration}} Minutes</mat-card-title>
</mat-card-title-group>
</mat-card>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
Staff Booking URL <i class="material-icons icons">&#xe85d;</i> Staff Booking URL
</ng-template> </ng-template>
<div class="staff"> <div class="staff">
<span class="staff-title"> <span class="staff-title">
@ -239,7 +318,7 @@
<div class="url-generate mb20"> <div class="url-generate mb20">
<div class="url-link dis-flex"> <div class="url-link dis-flex">
<span class="url field-center boxsize"> <span class="url field-center boxsize">
<input type="text" placeholder=" https://bookings.zoho.com/#/app/staffs/summary/4489510000000030016/staff-page-url" name="booking-url" readonly="" id="zb-mb-workspaceBookingPageUrl" class="booking-url-input boxsize text-ellipsis cn ember-text-field ember-view"> <input type="text" placeholder=" {{apiUrl}}" name="booking-url" id="zb-mb-workspaceBookingPageUrl" class="booking-url-input boxsize text-ellipsis cn ember-text-field ember-view">
</span> </span>
<!-- <span id="zb-mb-BookingPageUrlCustomize" class="customize-link field-center cp ml10 mt0 mr10" data-ember-action="" data-ember-action-813="813">Customize</span> --> <!-- <span id="zb-mb-BookingPageUrlCustomize" class="customize-link field-center cp ml10 mt0 mr10" data-ember-action="" data-ember-action-813="813">Customize</span> -->
<span class="url-button field-center boxsize pb1"><button id="zb-mb-BookingPageUrlCopyLink" class="copy-button boxsize cp" data-ember-action="" data-ember-action-814="814">Copy</button></span> <span class="url-button field-center boxsize pb1"><button id="zb-mb-BookingPageUrlCopyLink" class="copy-button boxsize cp" data-ember-action="" data-ember-action-814="814">Copy</button></span>
@ -252,3 +331,4 @@
</mat-tab-group> </mat-tab-group>

49
ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.scss
View File

@ -26,6 +26,9 @@
margin-left: 2rem; margin-left: 2rem;
// margin-top: -9rem; // margin-top: -9rem;
} }
// :host ::ng-deep .mat-tab-body.mat-tab-body-active {
// position: absolute !important;
// }
mat-tab-body { mat-tab-body {
flex-grow: 1; flex-grow: 1;
@ -36,12 +39,23 @@
:host ::ng-deep mat-ink-bar { :host ::ng-deep mat-ink-bar {
display: none; display: none;
} }
.icons-info{
margin-left: -4rem;
margin-right: 1rem;
}
.icons{
margin-left: -1rem;
margin-right: 1rem;
}
.icons-Hours{
margin-left: -2rem;
margin-right: 1rem;
}
:host ::ng-deep.mat-tab-label.mat-tab-label-active { :host ::ng-deep.mat-tab-label.mat-tab-label-active {
background-color: transparent; background-color: transparent;
// color: red; color: #666;
// background-color: #eee; background-color: #eee;
// border-right: 2px solid red; border-right: 2px solid #666;
} }
:host ::ng-deep.mat-tab-label { :host ::ng-deep.mat-tab-label {
@ -118,7 +132,8 @@ label{
line-height: 21px; line-height: 21px;
} }
.underline-title{ .underline-title{
color: #666!important; // color: #666!important;
color: #111;
font-size: 16px; font-size: 16px;
margin-top: 1px; margin-top: 1px;
border-bottom: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;
@ -324,7 +339,29 @@ margin-bottom: 10rem;
} }
.checkbox{
margin-left: 1rem;
}
.service-info{
line-height: 3rem!important;
font-size: 14px!important;
font-weight: 500!important;
color: #5F5F5F;
}
.info{
font-size: 12px!important;
font-weight: 500;
color: rgba(2,71,91,.6);
padding: 0 0 10px;
max-height: 38px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
::ng-deep .mat-card .mat-card-title:nth-child(2) {
margin-top: -33px!important;
}
// .user-pro-wrap{ // .user-pro-wrap{
// background-color: #fff; // background-color: #fff;
// // height: 100%; // // height: 100%;

96
ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.ts
View File

@ -1,7 +1,13 @@
import { LocationStrategy } from '@angular/common';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { ApiServiceService } from 'app/appoinment/service-list-details/service-api-services/api-service.service';
import { environment } from 'environments/environment';
import { ConsultantService } from '../consultant-service/consultant.service';
import { EditWorkingHoursComponent } from '../edit-working-hours/edit-working-hours.component'; import { EditWorkingHoursComponent } from '../edit-working-hours/edit-working-hours.component';
import { ExtraWorkingHoursComponent } from '../extra-working-hours/extra-working-hours.component';
@Component({ @Component({
selector: 'app-consultant-setting', selector: 'app-consultant-setting',
@ -21,7 +27,13 @@ export class ConsultantSettingComponent implements OnInit {
status: 'Active', status: 'Active',
}, },
]; ];
constructor(private formBuilder: FormBuilder, public dialog: MatDialog) {}
public usersList:any = new MatTableDataSource();
public servicesList:any = new MatTableDataSource();
practitionerdetails: any;
servicesList_array: any = [];
apiUrl:any;
constructor(private formBuilder: FormBuilder, public dialog: MatDialog, public _con:ConsultantService, private fb: FormBuilder, public _api:ConsultantService,private locationStrategy: LocationStrategy) {}
ngOnInit() { ngOnInit() {
@ -37,8 +49,71 @@ export class ConsultantSettingComponent implements OnInit {
status: ['', Validators.required], status: ['', Validators.required],
information: ['', Validators.required], information: ['', Validators.required],
}); });
this.getUsersList()
} }
getUsersList() {
//this._pd.getTabStatusPdDetails(this.tabStatus)
let id = localStorage.getItem('user_id')
console.log(id)
this._con.getUsersListDetails(id).subscribe(res => {
if (res.status == 200) {
this.usersList = res.data[0];
console.log(this.usersList)
this.practitionerdetails = this.usersList['practitionerInfos'][0]
console.log(this.practitionerdetails)
this.apiUrl = 'http://localhost:4200/customer/business/'+this.usersList.randStr
this.getServicesList(this.usersList.id,this.usersList.busId)
// this.dataSource = res.data.length;
// console.log(this.dataSource)
// this.dataSource.data = this.usersList;
// console.log(this.dataSource.data)
// this.recordStatus=false;
}
else{
// this.usersList=[];
// this.dataSource = null;
// this.recordStatus=true;
}
}
,error => {
// this.errorMessage.push(error);
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
// alert(error.html_format);
});
}
getServicesList(id,busId) {
//this._pd.getTabStatusPdDetails(this.tabStatus)
this._api.getServicesListDetails(id,busId).subscribe(res => {
if (res.status == 200) {
this.servicesList = res.data;
res['data'].forEach(element => {
// tmp.push(element.service)
element.service.forEach(e => {
this.servicesList_array.push(e)
});
});
console.log(this.servicesList_array)
// console.log(this.servicesList)
// this.dataSource = res.data.length;
// console.log(this.dataSource)
// this.dataSource.data = this.servicesList;
// console.log(this.dataSource.data)
// this.recordStatus=false;
}
else{
// this.servicesList=[];
// this.dataSource = null;
// this.recordStatus=true;
}
}
,error => {
// this.errorMessage.push(error);
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
// alert(error.html_format);
});
}
get f() { get f() {
return this.registerForm.controls; return this.registerForm.controls;
} }
@ -66,5 +141,22 @@ openDialog(action,obj) {
// }); // });
} }
workingDialog(action,obj) {
obj.action = action;
const dialogRef = this.dialog.open(ExtraWorkingHoursComponent, {
width: '48%',
height: '100%',
// maxWidth: '38vw',
position: { right: '0' },
data:obj
});
// dialogRef.afterClosed().subscribe(result => {
// if(result != undefined){
// console.log(result)
// this.formAddUpdateAndDelete(result,result.data)
// }
// });
}
} }

878
ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.html
View File

@ -1,271 +1,657 @@
<div class="edit-working"> <div class="edit-working">
<!-- <ng-scrollbar class="scrollHV"> --> <!-- <ng-scrollbar class="scrollHV"> -->
<div class="popup-header"> <div class="popup-header">
<h5> <h5>
Edit Working Hours Edit Working Hours
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()" <button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
><mat-icon>close</mat-icon></button> >
</h5> <mat-icon>close</mat-icon>
</div> </button>
</h5>
</div>
<form [formGroup]="dynamicForm">
<div formArrayName="filters">
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
<div [formGroupName]="i" class="container">
<div class="dis-flexs">
<div class="label-name" formControlName="day">
<input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"
[value]="day">
<label>Sunday</label>
</span>
</div>
<mat-form-field appearance="outline">
<mat-select
placeholder="Select Time"
formControlName="filterType">
<mat-option
*ngFor="let filterType of filterTypes"
[value]="filterType">
{{ filterType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-lft">
<mat-select
(selectionChange)="selectedAPIChanged(i)"
placeholder="Select Time"
#apiField
formControlName="apiType">
<mat-option
*ngFor="let apiType of apiTypes"
[value]="apiType">
{{ apiType }}
</mat-option>
</mat-select>
</mat-form-field>
<div day="Sunday" class="label-container"> <!-- <mat-form-field appearance="outline"
<div class="label-name"> *ngIf="filter.get('value')">
<input id="color-toggle" type="checkbox" > <input
<span class="labelname checkbox-default-blue checked"> matInput
<label>Sunday</label> formControlName="value"
</span> [placeholder]="apiField.value">
</mat-form-field> -->
<mat-icon class="deleteRow"
(click)="addFilterToFiltersFormArray()">
add
</mat-icon>
<mat-icon class="deleteRow"
(click)="removeFilterFromFiltersFormArray(i)">
delete
</mat-icon>
</div>
</div>
</div>
<!-- <button
mat-raised-button
color="primary"
type="button"
(click)="addFilterToFiltersFormArray()">
Add row
</button> -->
<!-- <button
class="save"
mat-stroked-button
color="primary"
[disabled]="dynamicForm.invalid || filtersFormArray.controls.length < 1"
(click)="save()">
Save
</button> -->
</div>
</form>
<form [formGroup]="dynamicForm">
<div formArrayName="filters">
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
<div [formGroupName]="i" class="container">
<div class="dis-flexs">
<div class="label-name" formControlName="day">
<input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"
[value]="day">
<label>Monday</label>
</span>
</div>
<mat-form-field appearance="outline">
<mat-select
placeholder="Select Time"
formControlName="filterType">
<mat-option
*ngFor="let filterType of filterTypes"
[value]="filterType">
{{ filterType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-lft">
<mat-select
(selectionChange)="selectedAPIChanged(i)"
placeholder="Select Time"
#apiField
formControlName="apiType">
<mat-option
*ngFor="let apiType of apiTypes"
[value]="apiType">
{{ apiType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-icon class="deleteRow"
(click)="addFilterToFiltersFormArray()">
add
</mat-icon>
<mat-icon class="deleteRow"
(click)="removeFilterFromFiltersFormArray(i)">
delete
</mat-icon>
</div>
</div>
</div> </div>
<div class="dis-flex"> </div>
<div class="content-container"> </form>
<div class="content-area"> <form [formGroup]="dynamicForm">
<form [formGroup]="datainputForm" novalidate> <div formArrayName="filters">
<section class="form-block"> <div *ngFor="let filter of filtersFormArray.controls; let i = index;">
<div class="form-group dis-flex"> <div [formGroupName]="i" class="container">
<div class="select pr-1 ml-1"> <div class="dis-flexs">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="label-name" formControlName="day">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <input id="color-toggle" type="checkbox" >
{{ dropDownTestx }} <span class="labelname checkbox-default-blue checked"
[value]="day">
<label>Tuesday</label>
</span>
</div>
<mat-form-field appearance="outline">
<mat-select
placeholder="Select Time"
formControlName="filterType">
<mat-option
*ngFor="let filterType of filterTypes"
[value]="filterType">
{{ filterType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-lft">
<mat-select
(selectionChange)="selectedAPIChanged(i)"
placeholder="Select Time"
#apiField
formControlName="apiType">
<mat-option
*ngFor="let apiType of apiTypes"
[value]="apiType">
{{ apiType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-icon class="deleteRow"
(click)="addFilterToFiltersFormArray()">
add
</mat-icon>
<mat-icon class="deleteRow"
(click)="removeFilterFromFiltersFormArray(i)">
delete
</mat-icon>
</div>
</div>
</div>
</div>
</form>
<form [formGroup]="dynamicForm">
<div formArrayName="filters">
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
<div [formGroupName]="i" class="container">
<div class="dis-flexs">
<div class="label-name" formControlName="day">
<input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"
[value]="day">
<label>Wednesday</label>
</span>
</div>
<mat-form-field appearance="outline">
<mat-select
placeholder="Select Time"
formControlName="filterType">
<mat-option
*ngFor="let filterType of filterTypes"
[value]="filterType">
{{ filterType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-lft">
<mat-select
(selectionChange)="selectedAPIChanged(i)"
placeholder="Select Time"
#apiField
formControlName="apiType">
<mat-option
*ngFor="let apiType of apiTypes"
[value]="apiType">
{{ apiType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-icon class="deleteRow"
(click)="addFilterToFiltersFormArray()">
add
</mat-icon>
<mat-icon class="deleteRow"
(click)="removeFilterFromFiltersFormArray(i)">
delete
</mat-icon>
</div>
</div>
</div>
</div>
</form>
<form [formGroup]="dynamicForm">
<div formArrayName="filters">
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
<div [formGroupName]="i" class="container">
<div class="dis-flexs">
<div class="label-name" formControlName="day">
<input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"
[value]="day">
<label>Thursday</label>
</span>
</div>
<mat-form-field appearance="outline">
<mat-select
placeholder="Select Time"
formControlName="filterType">
<mat-option
*ngFor="let filterType of filterTypes"
[value]="filterType">
{{ filterType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-lft">
<mat-select
(selectionChange)="selectedAPIChanged(i)"
placeholder="Select Time"
#apiField
formControlName="apiType">
<mat-option
*ngFor="let apiType of apiTypes"
[value]="apiType">
{{ apiType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-icon class="deleteRow"
(click)="addFilterToFiltersFormArray()">
add
</mat-icon>
<mat-icon class="deleteRow"
(click)="removeFilterFromFiltersFormArray(i)">
delete
</mat-icon>
</div>
</div>
</div>
</div>
</form>
<form [formGroup]="dynamicForm">
<div formArrayName="filters">
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
<div [formGroupName]="i" class="container">
<div class="dis-flexs">
<div class="label-name" formControlName="day">
<input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"
[value]="day">
<label>Friday</label>
</span>
</div>
<mat-form-field appearance="outline">
<mat-select
placeholder="Select Time"
formControlName="filterType">
<mat-option
*ngFor="let filterType of filterTypes"
[value]="filterType">
{{ filterType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-lft">
<mat-select
(selectionChange)="selectedAPIChanged(i)"
placeholder="Select Time"
#apiField
formControlName="apiType">
<mat-option
*ngFor="let apiType of apiTypes"
[value]="apiType">
{{ apiType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-icon class="deleteRow"
(click)="addFilterToFiltersFormArray()">
add
</mat-icon>
<mat-icon class="deleteRow"
(click)="removeFilterFromFiltersFormArray(i)">
delete
</mat-icon>
</div>
</div>
</div>
</div>
</form>
<form [formGroup]="dynamicForm">
<div formArrayName="filters">
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
<div [formGroupName]="i" class="container">
<div class="dis-flexs">
<div class="label-name" formControlName="day">
<input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"
[value]="day">
<label>Saturday</label>
</span>
</div>
<mat-form-field appearance="outline">
<mat-select
placeholder="Select Time"
formControlName="filterType">
<mat-option
*ngFor="let filterType of filterTypes"
[value]="filterType">
{{ filterType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-lft">
<mat-select
(selectionChange)="selectedAPIChanged(i)"
placeholder="Select Time"
#apiField
formControlName="apiType">
<mat-option
*ngFor="let apiType of apiTypes"
[value]="apiType">
{{ apiType }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-icon class="deleteRow"
(click)="addFilterToFiltersFormArray()">
add
</mat-icon>
<mat-icon class="deleteRow"
(click)="removeFilterFromFiltersFormArray(i)">
delete
</mat-icon>
</div>
</div>
</div>
</div>
</form>
<!-- <div day="Sunday" class="label-container">
<div class="label-name">
<input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked">
<label>Sunday</label>
</span>
</div>
<div class="dis-flex" *ngFor="let row of rows; let i = index">
<div class="dis-flex" [(ngModel)]="row.noQuestion" >
<div class="content-container">
<div class="content-area">
<form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
<section class="form-block">
<div class="form-group dis-flex">
<div class="select pr-1 ml-1">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
{{ dropDownTestx }}
</option>
</select>
</div>
<div class="select pr-2">
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
{{ dropDownTestxs }}
</option> </option>
</select> </select>
</div> </div>
<div class="select pr-2"> </div>
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> </section>
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> </form>
{{ dropDownTestx }}
</option>
</select>
</div>
</div>
</section>
</form>
</div>
</div> </div>
<span class="addbreak">+</span> </div>
</div> <span class="addbreak" (click)="addNewRow()">+</span>
<div class="applyToAll addbreak">Apply To All</div> <span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
</div>
<div day="Monday" class="label-container">
<div class="label-name">
<input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked">
<label>Monday</label>
</span>
</div> </div>
<div class="dis-flex"> <div class="applyToAll">Apply To All</div>
<div class="content-container"> </div>
<div class="content-area"> </div>
<form [formGroup]="datainputForm" novalidate> <div day="Monday" class="label-container">
<section class="form-block"> <div class="label-name">
<div class="form-group dis-flex"> <input id="color-toggle" type="checkbox" >
<div class="select pr-1 ml-1"> <span class="labelname checkbox-default-blue checked">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <label>Monday</label>
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> </span>
{{ dropDownTestx }} </div>
</option> <div class="dis-flex" *ngFor="let row of rows; let i = index">
</select> <div class="dis-flex" [(ngModel)]="row.noQuestion">
</div> <div class="content-container">
<div class="select pr-2"> <div class="content-area">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <section class="form-block">
{{ dropDownTestx }} <div class="form-group dis-flex">
</option> <div class="select pr-1 ml-1">
</select> <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
</div> <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
</div> {{ dropDownTestx }}
</section> </option>
</form> </select>
</div> </div>
<div class="select pr-2">
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
{{ dropDownTestxs }}
</option>
</select>
</div>
</div>
</section>
</form>
</div> </div>
<span class="addbreak">+</span> </div>
</div> <span class="addbreak" (click)="addNewRow()">+</span>
<div class="applyToAll addbreak">Apply To All</div> <span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
</div>
<div class="applyToAll addbreak">Apply To All</div>
</div>
</div> </div>
<div day="Tuesday" class="label-container"> <div day="Tuesday" class="label-container">
<div class="label-name"> <div class="label-name">
<input id="color-toggle" type="checkbox" > <input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"> <span class="labelname checkbox-default-blue checked">
<label>Tuesday</label> <label>Tuesday</label>
</span> </span>
</div> </div>
<div class="dis-flex"> <div class="dis-flex" *ngFor="let row of rows; let i = index">
<div class="content-container"> <div class="dis-flex" [(ngModel)]="row.noQuestion">
<div class="content-area"> <div class="content-container">
<form [formGroup]="datainputForm" novalidate> <div class="content-area">
<section class="form-block"> <form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group dis-flex"> <section class="form-block">
<div class="select pr-1 ml-1"> <div class="form-group dis-flex">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-1 ml-1">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
</option> {{ dropDownTestx }}
</select> </option>
</div> </select>
<div class="select pr-2"> </div>
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-2">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
</option> {{ dropDownTestxs }}
</select> </option>
</div> </select>
</div> </div>
</section> </div>
</form> </section>
</div> </form>
</div> </div>
<span class="addbreak">+</span> </div>
</div> <span class="addbreak" (click)="addNewRow()">+</span>
<div class="applyToAll addbreak">Apply To All</div> <span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
</div>
<div class="applyToAll addbreak">Apply To All</div>
</div>
</div> </div>
<div day="Wednesday" class="label-container"> <div day="Wednesday" class="label-container">
<div class="label-name"> <div class="label-name">
<input id="color-toggle" type="checkbox" > <input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"> <span class="labelname checkbox-default-blue checked">
<label>Wednesday</label> <label>Wednesday</label>
</span> </span>
</div> </div>
<div class="dis-flex"> <div class="dis-flex" *ngFor="let row of rows; let i = index">
<div class="content-container"> <div class="dis-flex" [(ngModel)]="row.noQuestion">
<div class="content-area"> <div class="content-container">
<form [formGroup]="datainputForm" novalidate> <div class="content-area">
<section class="form-block"> <form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group dis-flex"> <section class="form-block">
<div class="select pr-1 ml-1"> <div class="form-group dis-flex">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-1 ml-1">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
</option> {{ dropDownTestx }}
</select> </option>
</div> </select>
<div class="select pr-2"> </div>
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-2">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
</option> {{ dropDownTestxs }}
</select> </option>
</div> </select>
</div> </div>
</section> </div>
</form> </section>
</div> </form>
</div> </div>
<span class="addbreak">+</span> </div>
</div> <span class="addbreak" (click)="addNewRow()">+</span>
<div class="applyToAll addbreak">Apply To All</div> <span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
</div>
<div class="applyToAll addbreak">Apply To All</div>
</div>
</div> </div>
<div day="Thursday" class="label-container"> <div day="Thursday" class="label-container">
<div class="label-name"> <div class="label-name">
<input id="color-toggle" type="checkbox" > <input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"> <span class="labelname checkbox-default-blue checked">
<label>Thursday</label> <label>Thursday</label>
</span> </span>
</div> </div>
<div class="dis-flex"> <div class="dis-flex" *ngFor="let row of rows; let i = index">
<div class="content-container"> <div class="dis-flex" [(ngModel)]="row.noQuestion">
<div class="content-area"> <div class="content-container">
<form [formGroup]="datainputForm" novalidate> <div class="content-area">
<section class="form-block"> <form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group dis-flex"> <section class="form-block">
<div class="select pr-1 ml-1"> <div class="form-group dis-flex">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-1 ml-1">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
</option> {{ dropDownTestx }}
</select> </option>
</div> </select>
<div class="select pr-2"> </div>
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-2">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
</option> {{ dropDownTestxs }}
</select> </option>
</div> </select>
</div> </div>
</section> </div>
</form> </section>
</div> </form>
</div> </div>
<span class="addbreak">+</span> </div>
</div> <span class="addbreak" (click)="addNewRow()">+</span>
<div class="applyToAll addbreak">Apply To All</div> <span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
</div>
<div class="applyToAll addbreak">Apply To All</div>
</div>
</div> </div>
<div day="Friday" class="label-container"> <div day="Friday" class="label-container">
<div class="label-name"> <div class="label-name">
<input id="color-toggle" type="checkbox" > <input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"> <span class="labelname checkbox-default-blue checked">
<label>Friday</label> <label>Friday</label>
</span> </span>
</div> </div>
<div class="dis-flex"> <div class="dis-flex" *ngFor="let row of rows; let i = index">
<div class="content-container"> <div class="dis-flex" [(ngModel)]="row.noQuestion">
<div class="content-area"> <div class="content-container">
<form [formGroup]="datainputForm" novalidate> <div class="content-area">
<section class="form-block"> <form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group dis-flex"> <section class="form-block">
<div class="select pr-1 ml-1"> <div class="form-group dis-flex">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-1 ml-1">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
</option> {{ dropDownTestx }}
</select> </option>
</div> </select>
<div class="select pr-2"> </div>
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-2">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
</option> {{ dropDownTestxs }}
</select> </option>
</div> </select>
</div> </div>
</section> </div>
</form> </section>
</div> </form>
</div> </div>
<span class="addbreak">+</span> </div>
</div> <span class="addbreak" (click)="addNewRow()">+</span>
<div class="applyToAll addbreak">Apply To All</div> <span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
</div>
<div class="applyToAll addbreak">Apply To All</div>
</div>
</div> </div>
<div day="Saturday" class="label-container"> <div day="Saturday" class="label-container">
<div class="label-name"> <div class="label-name">
<input id="color-toggle" type="checkbox" > <input id="color-toggle" type="checkbox" >
<span class="labelname checkbox-default-blue checked"> <span class="labelname checkbox-default-blue checked">
<label>Saturday</label> <label>Saturday</label>
</span> </span>
</div> </div>
<div class="dis-flex"> <div class="dis-flex" *ngFor="let row of rows; let i = index">
<div class="content-container"> <div class="dis-flex" [(ngModel)]="row.noQuestion">
<div class="content-area"> <div class="content-container">
<form [formGroup]="datainputForm" novalidate> <div class="content-area">
<section class="form-block"> <form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group dis-flex"> <section class="form-block">
<div class="select pr-1 ml-1"> <div class="form-group dis-flex">
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-1 ml-1">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
</option> {{ dropDownTestx }}
</select> </option>
</div> </select>
<div class="select pr-2"> </div>
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box "> <div class="select pr-2">
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'"> <select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
{{ dropDownTestx }} <option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
</option> {{ dropDownTestxs }}
</select> </option>
</div> </select>
</div> </div>
</section> </div>
</form> </section>
</div> </form>
</div> </div>
<span class="addbreak">+</span> </div>
</div> <span class="addbreak" (click)="addNewRow()">+</span>
<div class="applyToAll addbreak">Apply To All</div> <span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
</div>
<div class="applyToAll addbreak">Apply To All</div>
</div> </div>
<!-- </ng-scrollbar> --> </div> -->
<div class="popup-button mb-2"> <!-- </ng-scrollbar> -->
<span class="buttons cancel">Cancel</span> <div class="popup-button mb-2">
<span class="buttons add">Save</span> <span class="buttons cancel" (click)="close()">Cancel</span>
</div> <span (click)="save()" class="buttons add">Save</span>
</div> </div>
</div>

68
ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.scss
View File

@ -12,22 +12,22 @@
float: right; float: right;
} }
.label-container { .label-container {
display: flex; // display: flex;
width: 100%; width: 100%;
border-bottom: 1px solid #F5F6F8; border-bottom: 1px solid #F5F6F8;
box-sizing: border-box; box-sizing: border-box;
min-height: 40px; min-height: 40px;
padding: 13px 0; padding: 5px 0;
} }
.label-name{ .label-name{
color: #666; color: #666;
position: relative; // position: absolute;
text-transform: capitalize; text-transform: capitalize;
width: 100px; width: 100px;
flex: none; flex: none;
margin-right: 15px; margin-right: 0rem!important;
align-self: flex-start; align-self: flex-start;
padding-top: 13px; padding-top: 25px;
box-sizing: border-box; box-sizing: border-box;
line-height: 15px; line-height: 15px;
} }
@ -37,8 +37,14 @@
// padding: 10px 10px 10px 10px; // padding: 10px 10px 10px 10px;
width: 150px; width: 150px;
} }
.dis-flexs {
display: flex !important;
}
.dis-flex { .dis-flex {
display: flex!important; display: flex !important;
margin-left: 3rem;
margin-bottom: 10px;
margin-top: -0.5rem;
} }
.width-10px { .width-10px {
width: 10px!important; width: 10px!important;
@ -48,12 +54,36 @@
height: 40px; height: 40px;
background-color: #FFF; background-color: #FFF;
font-size: 13px; font-size: 13px;
color: #111; color: #685f5f;
border-radius: 4px; border-radius: 4px;
border-color: #666; border-color: #999;
} }
.addbreak{ .addbreak{
margin-top: 0.5rem; margin-right: 0.5rem;
color: #FFF;
margin-left: 25px;
height: 40px;
margin-top: 1rem;
cursor: pointer;
// &:hover {
// cursor: pointer;
// color: #111;
// }
}
.deleteRow{
margin-right: 0.5rem;
margin-left: 1rem;
margin-top: 1.5rem;
// color: #FFF;
color: #111;
cursor: pointer;
// &:hover {
// cursor: pointer;
// color: #111;
// }
}
.applyToAll{
margin-top: -0.5rem;
margin-right: 2rem; margin-right: 2rem;
color: #FFF; color: #FFF;
&:hover { &:hover {
@ -64,7 +94,6 @@
// .scrollHV { // .scrollHV {
// height: calc(100vh - 190px); // height: calc(100vh - 190px);
// } // }
.popup-button { .popup-button {
margin-top: 2rem; margin-top: 2rem;
width: 100%; width: 100%;
@ -73,13 +102,14 @@
background: #F5F5F5; background: #F5F5F5;
color: #111; color: #111;
float: left; float: left;
cursor: pointer;
} }
.buttons { .buttons {
width: 50%; width: 50%;
background: #FFF; background: #FFF;
color: #111; color: #111;
font-size: 13px; font-size: 15px;
font-family: zohopuvi-medium; // font-family: zohopuvi-medium;
text-align: center; text-align: center;
border-top: 1px solid #E2E2E2; border-top: 1px solid #E2E2E2;
padding: 20px; padding: 20px;
@ -88,9 +118,19 @@
transition: all .2s ease-in; transition: all .2s ease-in;
} }
.add { .add {
background: #52518F; background-color: #4caf50;
color: #FFF; color: #FFF;
border-top: 1px solid #52518F; border-top: 1px solid #4caf50;
float: left; float: left;
cursor: pointer;
}
.margin-lft{
margin-left: 2rem;
} }
} }
::ng-deep .mat-dialog-container {
overflow-x: hidden!important;
}
::ng-deep .mat-form-field {
width: 20%;
}

110
ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog'; import { MatDialogRef } from '@angular/material/dialog';
@Component({ @Component({
@ -9,30 +9,116 @@ import { MatDialogRef } from '@angular/material/dialog';
}) })
export class EditWorkingHoursComponent implements OnInit { export class EditWorkingHoursComponent implements OnInit {
filterTypes = [
'09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',
];
apiTypes = [
'09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',
];
days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
seedData = [
{ day: 'Sunday', filterType: '09:00am', apiType: '09:30am' },
];
dynamicForm: FormGroup;
// rows = [{noQuestion : 0}];
datainputForm: FormGroup; datainputForm: FormGroup;
timing: any[] = ['09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',] // timing: any[] = ['09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',]
constructor(public dialogRef: MatDialogRef<EditWorkingHoursComponent>, private fb: FormBuilder) { } constructor(public dialogRef: MatDialogRef<EditWorkingHoursComponent>, private fb: FormBuilder) { }
close() { close() {
this.dialogRef.close(); this.dialogRef.close();
} }
// addNewRow() {
// this.rows.push({noQuestion : 0});
// }
// deleteRow(i){
// this.rows.splice(i, 1 );
// }
ngOnInit(): void { ngOnInit(): void {
this.datainputForm = this.fb.group({ this.datainputForm = this.fb.group({
dropDownTest: '09:00am', dropDownTest: '09:00am',
dropDownTests: '09:30am',
dropDownTest1:'' dropDownTest1:''
}) })
}
onSelectChange(){
console.log(this.datainputForm.get('dropDownTest').value);
if( this.datainputForm.get('dropDownTest').value === 'vmnic3'){
this.datainputForm.get('dropDownTest1').disable(); this.dynamicForm = this.fb.group({
}else{ filters: this.fb.array([])
this.datainputForm.get('dropDownTest1').enable(); });
} this.seedFiltersFormArray();
}
seedFiltersFormArray() {
this.seedData.forEach(seedDatum => {
const formGroup = this.createFilterGroup();
if (seedDatum.apiType) {
formGroup.addControl('value', this.getFormControl());
}
formGroup.patchValue(seedDatum);
this.filtersFormArray.push(formGroup);
});
}
createFilterGroup() {
return this.fb.group({
filterType: [],
apiType: [],
day: []
});
}
addFilterToFiltersFormArray() {
this.filtersFormArray.push(this.createFilterGroup());
}
removeFilterFromFiltersFormArray(index) {
this.filtersFormArray.removeAt(index);
}
selectedAPIChanged(i) {
this.getFilterGroupAtIndex(i).addControl('value', this.getFormControl());
}
getFormControl() {
return this.fb.control(null);
}
save() {
console.log(this.dynamicForm.value);
}
get filtersFormArray() {
return (<FormArray>this.dynamicForm.get('filters'));
}
getFilterGroupAtIndex(index) {
return (<FormGroup>this.filtersFormArray.at(index));
}
// onSelectChange(){
// console.log(this.datainputForm.get('dropDownTest').value);
// if( this.datainputForm.get('dropDownTest').value === 'vmnic3'){
// this.datainputForm.get('dropDownTest1').disable();
// }else{
// this.datainputForm.get('dropDownTest1').enable();
// }
// console.log(this.datainputForm.get('dropDownTests').value);
// if( this.datainputForm.get('dropDownTests').value === 'vmnic3'){
// this.datainputForm.get('dropDownTest1').disable();
// }else{
// this.datainputForm.get('dropDownTest1').enable();
// }
// }
onSubmit() {
console.log(this.datainputForm.value);
} }
} }

66
ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.html Normal file
View File

@ -0,0 +1,66 @@
<div class="extra-working">
<div class="popup-header">
<h5>
Add Additional Availability - Staff
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
><mat-icon>close</mat-icon></button>
</h5>
</div>
<div class="availability">
<div mat-dialog-content class="my-table">
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="mt-2">
<div class="field ">
<label for="name-field" class="label-container">Name</label>
<mat-form-field appearance="outline" class="mat-pane">
<input placeholder="Name" matInput formControlName="name">
</mat-form-field>
</div>
<div class="field ">
<label for="name-field" class="mr2">All-day Availability</label>
<mat-slide-toggle></mat-slide-toggle>
</div>
<div class="field">
<label for="name-field" class="label-container">From</label>
<mat-form-field appearance="outline" class="mate">
<input matInput formControlName="releasedAt"
[matDatepicker]="releasedAtPicker" (click)="releasedAtPicker.open()">
<mat-datepicker-toggle matSuffix [for]="releasedAtPicker">
</mat-datepicker-toggle>
<mat-datepicker #releasedAtPicker>
</mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" class="mate date-marge">
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
</mat-form-field>
</div>
<div class="field">
<label for="name-field" class="label">To</label>
<mat-form-field appearance="outline" class="mate">
<input matInput formControlName="releasedAt"
[matDatepicker]="releasedAtPickers" (click)="releasedAtPickers.open()">
<mat-datepicker-toggle matSuffix [for]="releasedAtPickers">
</mat-datepicker-toggle>
<mat-datepicker #releasedAtPickers>
</mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" class="mate date-marge">
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
</mat-form-field>
</div>
<div class="field ">
<label for="name-field" class="mr-8">Reason</label>
<mat-form-field appearance="outline" class="mat-pane">
<input placeholder="Reason" matInput formControlName="reason">
</mat-form-field>
</div>
</div>
</form>
</div>
</div>
<div class="popup-button mb-2">
<span class="buttons cancel">Cancel</span>
<span class="buttons add">Save</span>
</div>
</div>

106
ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss Normal file
View File

@ -0,0 +1,106 @@
.extra-working{
.popup-header {
background: #FFF;
// padding: 5px 5px 5px 5px;
margin-top: -1.5rem;
border-bottom: 1px solid #F5F6F8;
}
.button{
// float: right;
margin-bottom: 1rem;
background-color: #ffff;
margin-top: -1rem;
margin-left: 14rem;
}
// h5{
// margin-bottom: 1.5rem;
// }
.availability{
margin-bottom: 7.5rem;
}
.label-container{
margin-right: 8rem;
margin-left: 1.5rem;
}
// .outline{
// width: 18%;
// }
.mate{
width: 16% !important;
}
.date-marge{
margin-left: 4.5rem;
}
.label{
margin-right: 9rem;
margin-left: 1.5rem;
}
.mr-8{
margin-right: 7rem;
margin-left: 1.5rem;
}
.mr2{
margin-right: 3rem;
margin-left: 1.5rem;
}
.cancel {
background: #F5F5F5;
color: #111;
float: left;
cursor: pointer;
}
.buttons {
width: 50%;
background: #FFF;
color: #111;
font-size: 15px;
// font-family: zohopuvi-medium;
text-align: center;
border-top: 1px solid #E2E2E2;
padding: 20px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.add {
background-color: #4caf50;
color: #FFF;
border-top: 1px solid #4caf50;
float: left;
cursor: pointer;
}
h1 {
color: #4caf50;
font-weight: 300;
text-align: center;
}
toggle-button {
margin: 0 auto;
}
.example-h2 {
margin: 10px;
}
.example-section {
display: flex;
align-content: center;
align-items: center;
height: 60px;
}
.example-margin {
margin: 10px;
}
}
::ng-deep .mat-form-field-outline {
width: 145%;
}
::ng-deep .mat-icon-button {
margin-right: -3rem;
}
::ng-deep .mat-slide-toggle-bar {
width: 50px;
height: 20px;
}

25
ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExtraWorkingHoursComponent } from './extra-working-hours.component';
describe('ExtraWorkingHoursComponent', () => {
let component: ExtraWorkingHoursComponent;
let fixture: ComponentFixture<ExtraWorkingHoursComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ExtraWorkingHoursComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ExtraWorkingHoursComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

31
ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
export interface UsersData {
name: string;
id: number;
}
@Component({
selector: 'app-extra-working-hours',
templateUrl: './extra-working-hours.component.html',
styleUrls: ['./extra-working-hours.component.scss']
})
export class ExtraWorkingHoursComponent implements OnInit {
form: FormGroup;
checked = false;
disabled = false;
constructor(public dialogRef: MatDialogRef<ExtraWorkingHoursComponent>) { }
close() {
this.dialogRef.close();
}
ngOnInit(): void {
this.form = new FormGroup({
name: new FormControl('', [Validators.required]),
});
}
submit(){
console.log(this.form.value);
}
}

13
ng-seed/src/app/end-user/consultants/consultants-list.component.html
View File

@ -33,15 +33,16 @@
</div> </div>
<div class="consultant-profile"> <div class="consultant-profile">
<h5 class="text-primary">{{consultant.userName}}</h5> <h5 class="text-primary">{{consultant.userName}}</h5>
<span class="silk-block consultant-span">{{consultant.specialist || "ENT" }}</span><br> <span class="silk-block consultant-span">{{consultant.practitionerInfos[0].designtion
<span class="silk-block mb-1 consultant-year">{{consultant.year || "1 YRS EXP"}}</span><br> || "ENT" }}</span><br>
<span class="silk-block mb-1 consultant-qualification">{{consultant.qualification || "MBBS"}}</span><br> <span class="silk-block mb-1 consultant-year">{{consultant.practitionerInfos[0].exp || null}}</span><br>
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.payment || 100}}</span> </span><br> <span class="silk-block mb-1 consultant-qualification">{{consultant.practitionerInfos[0].qualification || null}}</span><br>
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.practitionerInfos[0].fees || 100}}</span> </span><br>
</div> </div>
</div> </div>
<span class="d-flex mb"> <span class="d-flex mb">
<mat-icon class="mt-1">transcribe</mat-icon> <mat-icon class="mt-1">transcribe</mat-icon>
<span class="mt-1 pl-1 consultant-language">{{consultant.language || "English"}}</span> <span class="mt-1 pl-1 consultant-language">{{consultant.practitionerInfos[0].languages || ""}}</span>
</span> </span>
<span class="d-flex mb"> <span class="d-flex mb">
<mat-icon>location_on</mat-icon> <mat-icon>location_on</mat-icon>
@ -55,7 +56,7 @@
<!-- <button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button"> <!-- <button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button">
<span class="button-text">Accept</span> <span class="button-text">Accept</span>
</button> --> </button> -->
<button type="button" (click)="goToSlotBooking()" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button"> <button type="button" (click)="goToSlotBooking(consultant)" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
<span class="material-icons"> bookmark_add </span><span class="button-text">Book Appoinment</span> <span class="material-icons"> bookmark_add </span><span class="button-text">Book Appoinment</span>
</button> </button>
</div> </div>

26
ng-seed/src/app/end-user/consultants/consultants-list.component.ts
View File

@ -27,10 +27,21 @@ export class ConsultantsListComponent implements OnInit {
}); });
}); });
let service = localStorage.getItem("servicedetails")
let filter = arr_val.filter(arr=>{return arr.role == "PRACTITIONER" && arr.busId =="abc123"}) let serviceDetails = JSON.parse(service)
console.log(serviceDetails)
let filter = arr_val.filter(arr=>{return arr.role == "PRACTITIONER" && arr.busId ==serviceDetails.busId})
console.log(arr_val,filter) console.log(arr_val,filter)
this.consultants = filter;
let result = filter.filter((obj, index, self) =>
index === self.findIndex((t) => (
t.id === obj.id
))
);
this.consultants = result;
// this.consultants = [{ // this.consultants = [{
// name: 'Dr. Suganya', // name: 'Dr. Suganya',
// specialist: 'ENT', // specialist: 'ENT',
@ -103,9 +114,14 @@ export class ConsultantsListComponent implements OnInit {
} }
goToSlotBooking(){ goToSlotBooking(param){
let URL = this.router.url; let URL = this.router.url;
console.log(URL) console.log(URL,param)
let service = localStorage.getItem("servicedetails")
let serviceDetails = JSON.parse(service)
serviceDetails.userId = ""+param.id+""
localStorage.setItem("servicedetails",JSON.stringify(serviceDetails))
// console.log(URL+"/"+data.randStr+"/practitioner") // console.log(URL+"/"+data.randStr+"/practitioner")
this.router.navigate([URL+"/slot"]) this.router.navigate([URL+"/slot"])

3
ng-seed/src/app/end-user/customer-info/customer-info.component.ts
View File

@ -53,9 +53,10 @@ export class CustomerInfoComponent implements OnInit {
this._cus.addCusDetails(addFormData).subscribe(res => { this._cus.addCusDetails(addFormData).subscribe(res => {
if (res.status == 200) { if (res.status == 200) {
console.log(res) console.log(res)
let URL = this.router.url; let URL = this.router.url;
console.log(URL) console.log(URL)
this.router.navigate([URL+"/pt"]) this.router.navigate([URL+"/"+res['data'].id+"/pt"])
} }
}); });

12
ng-seed/src/app/end-user/end-user-routing.module.ts
View File

@ -40,27 +40,27 @@ const routes: Routes = [
component: ConsultantsListComponent component: ConsultantsListComponent
}, },
{ {
path: 'busniness/:randstr', path: 'business/:randstr',
component: ServiceListComponent component: ServiceListComponent
}, },
{ {
path: 'busniness/:randstr/:randstrs/practitioner', path: 'business/:randstr/:randstrs/practitioner',
component: ConsultantsListComponent component: ConsultantsListComponent
}, },
{ {
path: 'busniness/:randstr/:randstrs/practitioner/slot', path: 'business/:randstr/:randstrs/practitioner/slot',
component: SlotBookingDetailsComponent component: SlotBookingDetailsComponent
}, },
{ {
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus', path: 'business/:randstr/:randstrs/practitioner/slot/cus',
component: CustomerInfoComponent component: CustomerInfoComponent
}, },
{ {
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus/pt', path: 'business/:randstr/:randstrs/practitioner/slot/cus/:cusId/pt',
component: PaymentComponent component: PaymentComponent
}, },
{ {
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus/pt/bts', path: 'business/:randstr/:randstrs/practitioner/slot/cus/pt/bts',
component: BookingSummaryComponent component: BookingSummaryComponent
}, },

13
ng-seed/src/app/end-user/end-user.service.ts
View File

@ -50,6 +50,19 @@ private apiUrl = environment.apiEndpoint;
// catchError(this.handleError('role', [])) // catchError(this.handleError('role', []))
// ) // )
} }
CreateAppoinmentsCus(addParams): Observable<any> {
return this._http.post(this.apiUrl + 'CreateAppoinmentsCus', addParams)
// .pipe(
// catchError(this.handleError('role', []))
// )
}
CreatecusServicesMapDetails(addParams): Observable<any> {
return this._http.post(this.apiUrl + 'CreatecusServicesMapDetails', addParams)
// .pipe(
// catchError(this.handleError('role', []))
// )
}
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> { handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');

46
ng-seed/src/app/end-user/payment/payment.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'; import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { EndUserService } from '../end-user.service';
@Component({ @Component({
selector: 'app-payment', selector: 'app-payment',
@ -9,7 +10,7 @@ import { Router } from '@angular/router';
}) })
export class PaymentComponent implements OnInit { export class PaymentComponent implements OnInit {
form: FormGroup; form: FormGroup;
constructor(private router:Router) { } constructor(private router:Router,public enduser:EndUserService, ) { }
ngOnInit(): void { ngOnInit(): void {
this.form = new FormGroup({ this.form = new FormGroup({
@ -26,10 +27,49 @@ export class PaymentComponent implements OnInit {
submit(){ submit(){
console.log(this.form.value) console.log(this.form.value)
let slot_array = JSON.parse(localStorage.getItem("slotData"))
let service = localStorage.getItem("servicedetails")
let serviceDetails = JSON.parse(service)
console.log(serviceDetails)
let URL = this.router.url; let URL = this.router.url;
console.log(URL) console.log(URL,slot_array)
this.router.navigate([URL+"/bts"]) let URL_AS_LIST = URL.split('/');
console.log(URL_AS_LIST);
let paramsmap= {
"serviceId": ""+serviceDetails.serviceId+"",
"userId": serviceDetails.userId,
"busId": serviceDetails.busId
}
this.enduser.CreatecusServicesMapDetails(paramsmap).subscribe(res => {
if (res.status == 200) {
console.log(res)
let serviceMap = res['data'].id
let time = new Date().toLocaleTimeString()
let params= {
"busId": serviceDetails.busId,
"cusId": URL_AS_LIST[8],
"appoinmentDate": slot_array[0].date,
"appoinmentTime": time,
"serviceMap": serviceMap,
"appoinmentSlots": slot_array[0].slots,
}
console.log(params)
this.enduser.CreateAppoinmentsCus(params).subscribe(res => {
if (res.status == 200) {
console.log(res)
this.router.navigate([URL+"/bts"])
}
})
}
})
} }
} }

3
ng-seed/src/app/end-user/service-list-details/service-list.component.html
View File

@ -41,10 +41,11 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<footer> <footer>
<p> <p>
© 2021 Venba Information Technology Pvt Ltd. All Rights Reserved © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
</p> </p>
</footer> </footer>

1
ng-seed/src/app/end-user/service-list-details/service-list.component.ts
View File

@ -212,6 +212,7 @@ let updatevalue = { serviceId: row_obj.serviceId,
goto(data){ goto(data){
let URL = this.router.url; let URL = this.router.url;
console.log(URL,data) console.log(URL,data)
localStorage.setItem("servicedetails",JSON.stringify(data))
console.log(URL+"/"+data.randStr+"/practitioner") console.log(URL+"/"+data.randStr+"/practitioner")
this.router.navigate([URL+"/"+data.randStr+"/practitioner"]) this.router.navigate([URL+"/"+data.randStr+"/practitioner"])

2
ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html
View File

@ -16,7 +16,7 @@
<div class="d-flex calender-time"> <div class="d-flex calender-time">
<div class="calender"> <div class="calender">
<mat-card class="demo-inline-calendar-card cardCalender"> <mat-card class="demo-inline-calendar-card cardCalender">
<mat-calendar [(selected)]="selected"></mat-calendar> <mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card> </mat-card>
</div> </div>
</div> </div>

13
ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.ts
View File

@ -36,7 +36,13 @@ export class SlotBookingDetailsComponent implements OnInit {
workspace: new FormControl('', [Validators.required]), workspace: new FormControl('', [Validators.required]),
}); });
console.log(this.local_data, this.selects)
let service = localStorage.getItem("servicedetails")
let serviceDetails = JSON.parse(service)
console.log(serviceDetails)
// this.form.controls['note'].setValue('Sample') // this.form.controls['note'].setValue('Sample')
this.form.patchValue(this.local_data) this.form.patchValue(this.local_data)
} }
@ -54,13 +60,14 @@ console.log(this.local_data, this.selects)
} }
var target = event.currentTarget; var target = event.currentTarget;
target.style.backgroundColor = "#0c8f00"; target.style.backgroundColor = "#0c8f00";
console.log(param) console.log(this.date,param)
this.slot_array.push(param) this.slot_array.push({date:this.date,slots:param})
} }
submit(){ submit(){
console.log( this.slot_array) console.log( this.slot_array)
localStorage.setItem("slotData",JSON.stringify(this.slot_array))
let URL = this.router.url; let URL = this.router.url;
console.log(URL) console.log(URL)
this.router.navigate([URL+"/cus"]) this.router.navigate([URL+"/cus"])

1
ng-seed/src/app/session/login/login.component.ts
View File

@ -47,6 +47,7 @@ export class LoginComponent {
localStorage.setItem('user_token',res.token); localStorage.setItem('user_token',res.token);
localStorage.setItem('user_role',res.role); localStorage.setItem('user_role',res.role);
localStorage.setItem('email',JSON.stringify(auth)) localStorage.setItem('email',JSON.stringify(auth))
localStorage.setItem('user_id',res.roleId)
this.router.navigate(['/home']) this.router.navigate(['/home'])
} }
} }

BIN
ng-seed/src/assets/images/profile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB