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

appointment

Browse Source
This commit is contained in:
surendar.m@watermelon.us 2023-04-13 18:44:42 +05:30
parent 9ff289a1b1
commit fcffc51a83
15 changed files with 364 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,7 +161,7 @@ export class AppoinmentsListComponent implements OnInit {
openDialog(action,obj) { openDialog(action,obj) {
obj.action = action; obj.action = action;
const dialogRef = this.dialog.open(DialogBoxComponent, { const dialogRef = this.dialog.open(DialogBoxComponent, {
width: '55%', width: '40%',
height: '100%', height: '100%',
// maxWidth: '38vw', // maxWidth: '38vw',
position: { right: '0' }, position: { right: '0' },

337
ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html
View File

@ -1,225 +1,144 @@
<mat-card class="settings-panel" > <!-- <mat-card class="settings-panel" > -->
<h5 mat-dialog-title> <h5 mat-dialog-title> <strong>{{action}} Appoinment</strong>
<strong>{{action}} Appoinment</strong>
<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>
</button>
</h5>
<ng-scrollbar class="scrollHV">
<div mat-dialog-content class="my-table">
<form [formGroup]="form" (ngSubmit)="submit()"> <form [formGroup]="form" (ngSubmit)="submit()">
<ng-scrollbar class="scrollHV">
<div mat-dialog-content class="my-table">
<div class="field"> <mat-form-field appearance="outline" class="mat-pane">
<label for="name-field" class="label-container"> <mat-label>Business</mat-label>
Business <mat-select placeholder="Select Business" formControlName="busname" required>
</label> <mat-option *ngFor="let business of name" [value]="business.busname">
<mat-form-field appearance="outline" class="mat-pane"> {{business.busname}}
<mat-select placeholder="Select Business" formControlName="busname" required> </mat-option>
<mat-option>--</mat-option> </mat-select>
<mat-option *ngFor="let business of name" [value]="business.busname"> <mat-error *ngIf="service.hasError('required')">Please choose an Business</mat-error>
{{business.busname}} <mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
</mat-option> </mat-form-field>
</mat-select>
<mat-error *ngIf="service.hasError('required')">Please choose an Business</mat-error>
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
</div>
<div class="field"> <mat-form-field appearance="outline" class="mat-pane">
<label for="name-field" class="label-container"> <mat-label>Service</mat-label>
Service <mat-select placeholder="Select Service" formControlName="service" required>
</label> <mat-option>--</mat-option>
<mat-form-field appearance="outline" class="mat-pane"> <mat-option *ngFor="let business of select" [value]="business.service">
<mat-select placeholder="Select Service" formControlName="service" required> {{business.service}}
<mat-option>--</mat-option> </mat-option>
<mat-option *ngFor="let business of select" [value]="business.service"> </mat-select>
{{business.service}} <mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
</mat-option> <mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
</mat-select> </mat-form-field>
<mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
</div>
<div class="field"> <mat-form-field appearance="outline" class="mat-pane">
<label for="name-field" class="label-container"> <mat-label>Practitioner</mat-label>
Practitioner <mat-select placeholder="Select Practitioner" formControlName="practitioner" required>
</label> <mat-option>--</mat-option>
<mat-form-field appearance="outline" class="mat-pane"> <mat-option *ngFor="let business of practitioners" [value]="business.practitioner">
<mat-select placeholder="Select Practitioner" formControlName="practitioner" required> {{business.practitioner}}
<mat-option>--</mat-option> </mat-option>
<mat-option *ngFor="let business of practitioners" [value]="business.practitioner"> </mat-select>
{{business.practitioner}} <mat-error *ngIf="service.hasError('required')">Please choose an Practitioner</mat-error>
</mat-option> <mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
</mat-select> </mat-form-field>
<mat-error *ngIf="service.hasError('required')">Please choose an Practitioner</mat-error>
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
</div>
<div class="mb-4 date-position"> <mat-form-field appearance="outline" class="mate">
<label for="name-field" class="label-container Date-container"> <mat-label>Choose a date</mat-label>
Date & Time <mat-datepicker #picker4></mat-datepicker>
</label> <mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle>
<mat-form-field appearance="outline" class="mate"> <input matInput [matDatepicker]="picker4" placeholder="Choose a date" formControlName="appoinmentDate" >
<mat-datepicker #picker4></mat-datepicker> </mat-form-field>
<mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle> <mat-form-field appearance="outline" class="mate date-marge" (click)="toggle()" id="bt">
<input matInput [matDatepicker]="picker4" placeholder="Choose a date" formControlName="appoinmentDate" > <mat-label>Choose a Time</mat-label>
<!-- {{business.appoinmentDate}} --> <input matInput placeholder="Select Time" name="week" formControlName="appoinmentTime">
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" class="mate date-marge" (click)="toggle()" id="bt">
<input matInput name="week" formControlName="appoinmentTime">
</mat-form-field>
<!-- <mat-form-field appearance="outline" class="mate date-marge" (click)="toggle()" id="bt">
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
</mat-form-field> -->
<div class="date-time" *ngIf="show">
<div class="topnav">
Wed, 12 Apr 2023
</div>
<div class="card">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="95" fxFlex.lg="95" fxFlex.xl="95" class="m-gap p-gap flx">
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap"> <mat-card class="cardDesign" *ngIf="show">
<div class="mt-1 days"> <div class="innerdivs navStyle" fxLayoutAlign="center center">
MORNING <button mat-raised-button (click)="goToSlotBooking2()" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_left</mat-icon></button><span style="width: 150px;text-align: center;">12 thursday 2023</span><button mat-raised-button (click)="goToSlotBooking()" *ngIf="clicks < 5" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_right</mat-icon></button>
</div>
<div class="flexxx d-flex mt-2">
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:00am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:15am</button>
<!-- <button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:30am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:45am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:00am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:15am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:30am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:45am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:00am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:15am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:30am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:45am</button> -->
</div>
</div> </div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap"> <div class="innerdivs2" >
<div class="mt-1 days"> <!-- <button *ngFor="let slot of slots;let i=index" mat-raised-button class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i } " (click)="toggleActive($event,slot,i)" >{{slot | date:'shortTime'}}</button> -->
AFTERNOON <button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >09:30am</button>
</div> <button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >09:45am</button>
<div class="flexxx d-flex mt-2"> <button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >10:00am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >12:00pm</button> <button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >10:15am</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >12:15pm</button> <button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >10:30am</button>
</div> <button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >10:45am</button>
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >11:00am</button>
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >11:15am</button>
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >11:30am</button>
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >11:45am</button>
</div>
</mat-card>
<mat-form-field appearance="outline" class="mat-pane">
<mat-label>Customer</mat-label>
<mat-select placeholder="Select Customer" formControlName="customer" required>
<!-- <div class="add-customer"> Add customer</div> -->
<mat-option class="newCustomer" (click)="addCustomerList(1)">+ New Customer</mat-option>
<mat-option *ngFor="let business of customers" [value]="business.customer">
{{business.customer}}
</mat-option>
</mat-select>
<mat-error *ngIf="customer.hasError('required')">Please choose an Customer</mat-error>
<mat-error *ngIf="customer.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
<mat-card class="cardDesign2" *ngIf="customerCard == 1">
<div class="pad">
<h6 class="new">+ New Customer <button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="addCustomerList(0)"><mat-icon>close</mat-icon></button></h6>
<mat-form-field appearance="outline" class="card-mat-pane">
<mat-label>Name</mat-label>
<input placeholder=" Name" matInput>
<!-- <mat-error *ngIf="myError('cusName', 'required')">Name is required</mat-error>
<mat-error *ngIf="myError('cusName', 'maxlength')">Limit exceed</mat-error> -->
</mat-form-field>
<mat-form-field appearance="outline" class="card-mat-pane">
<mat-label>Email</mat-label>
<input type="email" placeholder=" Email" matInput >
<!-- <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="myError('email', 'required')">email is required</mat-error>
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
Email is required
</mat-error> -->
</mat-form-field>
<mat-form-field appearance="outline" class="card-mat-pane">
<mat-label>Phone</mat-label>
<input placeholder=" Phone" matInput >
<!-- <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
<mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error> -->
</mat-form-field>
</div> </div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap"> <div class="popup-button">
<div class="mt-1 days"> <span class="buttons cancel" (click)="close()">Cancel</span>
EVENING <span (click)="save()" class="buttons add">Save</span>
</div>
<div class="flexxx d-flex mt-2">
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >04:00pm</button>
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >04:00pm</button>
</div>
</div> </div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap"> </mat-card>
<div class="mt-1 days">
NIGHT
</div>
<div class="flexxx mt-2">
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >No Slots</button>
</div>
</div>
</div>
</div>
</div>
</div>
<mat-form-field appearance="outline" class="mat-pane">
<mat-label>Customer</mat-label>
<div class="field"> <mat-label>Description</mat-label>
<label for="name-field" class="label-container"> <textarea matInput rows="5" cols="40" placeholder="Description" formControlName="note"></textarea>
Customer </mat-form-field>
</label>
<mat-form-field appearance="outline" class="mat-pane">
<mat-select placeholder="Select Customer" formControlName="customer" required>
<!-- <div class="add-customer"> Add customer</div> -->
<mat-option >Add customer</mat-option>
<mat-option *ngFor="let business of customers" [value]="business.customer">
{{business.customer}}
</mat-option>
</mat-select>
<mat-error *ngIf="customer.hasError('required')">Please choose an Customer</mat-error>
<mat-error *ngIf="customer.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
</div>
<div class="field-inline">
<label for="name-field" class="label-container">Notes</label>
<textarea rows="5" cols="41" name="comment" formControlName="note"></textarea>
</div>
<div class="notes"> <div class="notes">
<input type="checkbox" id="scales" name="scales" checked> <input type="checkbox" id="scales" name="scales" checked>
<label for="scales">Send notifications for customer</label> <label for="scales">Send notifications for customer</label>
</div> </div>
<!-- <div class="field">
<label for="name-field" class="label-container"> <!-- <img class="image" [src]="url" height="50">
Workspace <input type='file' (change)="onSelectFile($event)" formControlName="image"> -->
</label> <ng-template #elseTemplate>
<mat-form-field appearance="outline" class="mat-pane"> Sure to delete <b>{{local_data.cusName}}</b>?
<mat-select placeholder="Select Workspace" formControlName="workspace" required> </ng-template>
<mat-option>--</mat-option> </div>
<mat-option *ngFor="let business of selects" [value]="business.workspace"> </ng-scrollbar>
{{business.workspace}} <div mat-dialog-actions>
</mat-option> <button mat-button type="submit" class="mat-green" mat-raised-button >{{action}}</button>
</mat-select> <button mat-button (click)="closeDialog()" >Cancel</button>
<mat-error *ngIf="workspace.hasError('required')">Please choose an Workspace</mat-error> </div>
<mat-error *ngIf="workspace.hasError('invalidValue')">Please choose any other</mat-error> </form>
</mat-form-field>
</div> -->
<!-- <div class="field">
<label for="name-field" class="label-container">
Assign Staff
</label>
<mat-form-field appearance="outline" class="mat-pane">
<mat-select placeholder="Select Staff" formControlName="staff" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let business of staffs" [value]="business.staff">
{{business.staff}}
</mat-option>
</mat-select>
<mat-error *ngIf="staff.hasError('required')">Please choose an Staff</mat-error>
<mat-error *ngIf="staff.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
</div> -->
<!-- <div class="field">
<label for="name-field" class="label-container">
Slots
</label>
<mat-form-field appearance="outline" class="mat-pane">
<mat-select placeholder="Select Slot" formControlName="appoinmentSlots" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let business of slots" [value]="business.appoinmentSlots">
{{business.appoinmentSlots}}
</mat-option>
</mat-select>
<mat-error *ngIf="appoinmentSlots.hasError('required')">Please choose an Slots</mat-error>
<mat-error *ngIf="appoinmentSlots.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
</div> -->
</form>
</div>
</ng-scrollbar>
<ng-template #elseTemplate>
Sure to delete <b>{{local_data.name}}</b>?
</ng-template>
<br>
<div mat-dialog-actions>
<button mat-button (click)="doAction()" class="mat-green" mat-raised-button >{{action}}</button>
<button mat-button (click)="closeDialog()" >Cancel</button>
</div>
</mat-card>

123
ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss
View File

@ -1,8 +1,13 @@
// ::ng-deep .cdk-overlay-pane{ $color_red_orange_approx: #107c14;
// width: 60%!important; $white: #fff;
// } $black_10: rgba(0, 0, 0, 0.1);
$black_30: rgba(0, 0, 0, 0.3);
$icon-size: 3rem;
$icon-color: #D8D8D8;
$main-color: #f44336;
$tem-color : #217e69;
.mat-pane{ .mat-pane{
width: 20rem; width: 27rem;
} }
.button{ .button{
margin-bottom: 1rem; margin-bottom: 1rem;
@ -72,7 +77,7 @@
// width: 175%!important; // width: 175%!important;
// } // }
.mate{ .mate{
width: 22% !important; width: 43% !important;
} }
.date-marge{ .date-marge{
margin-left: 1.5rem; margin-left: 1.5rem;
@ -138,4 +143,110 @@
padding: 5px; padding: 5px;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
} }
.navStyle{
width: 100%;
height: 3rem;
background-color: #227f6e;
color: #fff;
}
.innerdivs{
width:100%;
// float:left;
}
.innerdivs2{
width:100%;
// float:left;
text-align: center;
margin-bottom: 1rem !important;
}
.cardDesign{
border: 1px solid #e8edef;
width: 89%;
background-color: #227f6e21;
box-shadow: 0 2px 0 rgb(0 0 0 / 3%)
}
.hoverButton{
background: $white;
// box-shadow: 0 2px 6px $tem-color;
transition: all 0.1s ease-in-out 0s;
&:hover {
box-shadow: 0 0 8px $tem-color;
transform: scale(1.05);
}
}
.primary{
background-color: #00866e00;
color: brown;
width: auto;
border: 1px solid brown;
cursor: pointer;
}
.clickedSlot{
color: white !important;
background-color: brown !important;
cursor: pointer !important;
width: auto;
}
.bookedSlot{
background-color: darkgrey;
color: white;
width: 6rem;
cursor: no-drop !important;
}
.newCustomer{
color: #227f6e;
text-align: center;
border: 1px solid #e8edef;
}
.cardDesign2{
border: 1px dashed #227f6e;
width: 75%;
height: 348px;
margin-left: 3rem;
background-color: #fcfcfc;
margin-bottom: 2rem;
}
.card-mat-pane{
width: 20rem;
}
.new{
color: #227f6e;
margin-top: 0px !important;
}
.popup-button {
// margin-top: 2rem;
width: 100%;
}
.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: 10px;
-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;
}
.pad{
padding: 20px !important;
}

99
ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts
View File

@ -92,7 +92,8 @@ export class DialogBoxComponent implements OnInit {
{appoinmentSlots: '07PM - 07.30PM'}, {appoinmentSlots: '07PM - 07.30PM'},
]; ];
clicks:any = 0;
customerCard: any;
constructor(private router: Router,private formBuilder: FormBuilder, constructor(private router: Router,private formBuilder: FormBuilder,
public dialogRef: MatDialogRef<DialogBoxComponent>, public dialogRef: MatDialogRef<DialogBoxComponent>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) { @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
@ -127,41 +128,65 @@ export class DialogBoxComponent implements OnInit {
this.dialogRef.close(); this.dialogRef.close();
} }
toggle() { toggle() {
this.show = !this.show; this.show = !this.show;
// Change the name of the button.
if(this.show)
this.buttonName = "Hide";
else
this.buttonName = "Show";
}
// Change the name of the button.
if(this.show) ngOnInit() {
this.buttonName = "Hide"; this.form = new FormGroup({
else busname: new FormControl('', [Validators.required]),
this.buttonName = "Show"; service: new FormControl('', [Validators.required]),
} practitioner: new FormControl('', [Validators.required]),
appoinmentDate: new FormControl('', [Validators.required]),
appoinmentTime: new FormControl('', [Validators.required]),
ngOnInit() { customer: new FormControl('', [Validators.required]),
this.form = new FormGroup({ note: new FormControl('', [Validators.required]),
busname: new FormControl('', [Validators.required]),
service: new FormControl('', [Validators.required]), workspace: new FormControl('', [Validators.required]),
practitioner: new FormControl('', [Validators.required]), staff: new FormControl('', [Validators.required]),
appoinmentDate: new FormControl('', [Validators.required]), slot: new FormControl('', [Validators.required]),
appoinmentTime: new FormControl('', [Validators.required]), appoinmentSlots: new FormControl('', [Validators.required]),
customer: new FormControl('', [Validators.required]),
note: new FormControl('', [Validators.required]), });
console.log(this.local_data, this.selects)
workspace: new FormControl('', [Validators.required]), // this.form.controls['note'].setValue('Sample')
staff: new FormControl('', [Validators.required]), this.form.patchValue(this.local_data)
slot: new FormControl('', [Validators.required]), }
appoinmentSlots: new FormControl('', [Validators.required]), public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName);
}); }
console.log(this.local_data, this.selects) submit(){
// this.form.controls['note'].setValue('Sample') console.log(this.form.value);
this.form.patchValue(this.local_data) }
}
public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName); goToSlotBooking(){
} // this.days[]
submit(){ if(this.clicks <5){
console.log(this.form.value); this.clicks += 1;
} }
}
goToSlotBooking2(){
// this.days[]
if( this.clicks >0){
this.clicks -= 1;
}
console.log( this.clicks)
}
check(param){
return param[this.clicks];
}
addCustomerList(param){
this.customerCard = param
}
save(){
}
} }

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

@ -115,7 +115,7 @@
<div class="form-group label-container"> <div class="form-group label-container">
<label>Description <span style="margin-left: 4rem;">-</span></label> <label>Description <span style="margin-left: 4rem;">-</span></label>
<a style="padding: 10px;" *ngIf="isEditable == false">{{practitionerdetails.description}}</a> <a style="padding: 10px;" *ngIf="isEditable == false">{{practitionerdetails.description}}</a>
<mat-form-field class="example-full-width" *ngIf="isEditable == true"> <mat-form-field style="width: 60%;">
<mat-label>Description</mat-label> <mat-label>Description</mat-label>
<textarea matInput rows="5" cols="40" placeholder="Description" [(ngModel)]="description"></textarea> <textarea matInput rows="5" cols="40" placeholder="Description" [(ngModel)]="description"></textarea>
</mat-form-field> </mat-form-field>

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

@ -384,7 +384,7 @@ box-sizing: border-box;
line-height: 15px; line-height: 15px;
} }
.scrollHV { .scrollHV {
height: calc(100vh - 190px); height: calc(100vh - 200px);
} }
::ng-deep .mat-form-field-infix { ::ng-deep .mat-form-field-infix {
height: 50px!important; height: 50px!important;
@ -405,9 +405,9 @@ margin-left: 1rem;
::ng-deep .mat-card .mat-card-title:nth-child(2) { ::ng-deep .mat-card .mat-card-title:nth-child(2) {
margin-top: -33px!important; margin-top: -33px!important;
} }
::ng-deep .mat-select-panel .mat-option{ // ::ng-deep .mat-select-panel .mat-option{
height: 5em !important; // height: 5em !important;
} // }
// css example // css example
.indianSymbol { .indianSymbol {
content: "\20B9"; content: "\20B9";

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

@ -240,7 +240,7 @@ unavailability(action,obj) {
//if(this.working_customize == false){ //if(this.working_customize == false){
// obj.action = action; // obj.action = action;
const dialogRef = this.dialog.open(EditWorkingHoursComponent, { const dialogRef = this.dialog.open(EditWorkingHoursComponent, {
width: '48%', width: '45%',
height: '100%', height: '100%',
// maxWidth: '38vw', // maxWidth: '38vw',
position: { right: '0' }, position: { right: '0' },

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

@ -1,13 +1,14 @@
<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 class="mar">
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> <mat-icon>close</mat-icon>
</button> </button>
</h5> </h5>
</div> </div>
<ng-scrollbar class="scrollHV">
<form [formGroup]="dynamicForm"> <form [formGroup]="dynamicForm">
<div formArrayName="filters"> <div formArrayName="filters">
<div *ngFor="let filter of filtersFormArray.controls; let i = index;"> <div *ngFor="let filter of filtersFormArray.controls; let i = index;">
@ -521,7 +522,7 @@
</button> --> </button> -->
</div> </div>
</form> </form>
</ng-scrollbar>
<div class="popup-button mb-2"> <div class="popup-button mb-2">
<span class="buttons cancel" (click)="close()">Cancel</span> <span class="buttons cancel" (click)="close()">Cancel</span>
<span (click)="save()" class="buttons add">Save</span> <span (click)="save()" class="buttons add">Save</span>

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

@ -1,4 +1,4 @@
.edit-working{ .edit-working{
.popup-header { .popup-header {
background: #FFF; background: #FFF;
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
@ -91,12 +91,12 @@
color: #111; color: #111;
} }
} }
// .scrollHV { .scrollHV {
// height: calc(100vh - 190px); height: calc(100vh - 152px);
// } }
.popup-button { .popup-button {
margin-top: 2rem; margin-top: 2rem;
width: 100%; width: 100%;
} }
.cancel { .cancel {
background: #F5F5F5; background: #F5F5F5;
@ -137,3 +137,9 @@
mat-checkbox{ mat-checkbox{
margin-right: 10px; margin-right: 10px;
} }
.mar{
margin: 0px !important;
}
.mat-dialog-container{
padding: 24px 0px 0px 0px !important;
}

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

@ -1,10 +1,11 @@
<div *ngIf="consultants.length != 0">
<mat-toolbar> <mat-toolbar>
<span style="text-align: center;">Appointment</span> <span style="text-align: center;">Appointment</span>
<h3 style="margin-left:35% ;">{{busName}}</h3> <h3 style="margin-left:35% ;">{{busName}}</h3>
</mat-toolbar> </mat-toolbar>
<div class="container mt-1"> <div class="container mt-1">
<!-- <ng-scrollbar class="scrollHV"> --> <!-- <ng-scrollbar class="scrollHV"> -->
<div *ngIf="consultants.length != 0">
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="m-gap p-gap"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="m-gap p-gap">
<div fxLayout="row wrap"> <div fxLayout="row wrap">
@ -84,12 +85,13 @@
<!-- </ng-scrollbar> --> <!-- </ng-scrollbar> -->
</div> </div>
</div>
<footer> <footer>
<p> <p>
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
</p> </p>
</footer> </footer>
</div>
<div *ngIf="consultants.length == 0"> <div *ngIf="consultants.length == 0">
<div fxLayout="row" class="flexCard"> <div fxLayout="row" class="flexCard">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
@ -98,7 +100,7 @@
</div> </div>
<div fxLayout="row" class="flexCard"> <div fxLayout="row" class="flexCard">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
<h3 class="noAssignedService">No Service</h3> <h3 class="noAssignedService">No Doctor</h3>
</div> </div>
</div> </div>
</div> </div>

17
ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.html
View File

@ -42,6 +42,7 @@
</div> </div>
</div> </div>
</div> --> </div> -->
<mat-toolbar> <mat-toolbar>
<span style="text-align: center;">Appointment</span> <span style="text-align: center;">Appointment</span>
<h3 style="margin-left:35% ;">{{busName}}</h3> <h3 style="margin-left:35% ;">{{busName}}</h3>
@ -208,8 +209,22 @@
</div> </div>
</div> </div>
</ng-scrollbar> </ng-scrollbar>
<footer> <footer>
<p> <p>
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
</p> </p>
</footer> </footer>
<!--
<div *ngIf="bookedAppointment.length == 0">
<div fxLayout="row" class="flexCard">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
<div><img src="assets/images/service.png" width="300" height="300"></div>
</div>
</div>
<div fxLayout="row" class="flexCard">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
<h3 class="noAssignedService">No Service</h3>
</div>
</div>
</div> -->
<ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#178a78" type = "square-jelly-box" [fullScreen] = "true"><p style="color: white" > Please Wait...... </p></ngx-spinner>

11
ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.ts
View File

@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { EndUserService } from '../end-user.service'; import { EndUserService } from '../end-user.service';
import { environment } from 'environments/environment'; import { environment } from 'environments/environment';
import { NgxSpinnerService } from 'ngx-spinner';
@Component({ @Component({
selector: 'app-doctor-profile', selector: 'app-doctor-profile',
@ -14,7 +15,9 @@ export class DoctorProfileComponent implements OnInit {
dp: any =[]; dp: any =[];
busName: any=[]; busName: any=[];
constructor(private router:Router,public end_user:EndUserService) { } constructor(private router:Router,public end_user:EndUserService,private spinner:NgxSpinnerService) {
this.spinner.show()
}
ngOnInit(): void { ngOnInit(): void {
this.busName = localStorage.getItem('busName') this.busName = localStorage.getItem('busName')
@ -23,6 +26,7 @@ export class DoctorProfileComponent implements OnInit {
console.log(serviceDetails) console.log(serviceDetails)
this.end_user.appointmentBooked_observable$.subscribe((res) => { this.end_user.appointmentBooked_observable$.subscribe((res) => {
console.log('booked', res); console.log('booked', res);
if(res.length>0){ if(res.length>0){
this.bookedAppointment=res[0].user[0] this.bookedAppointment=res[0].user[0]
@ -36,7 +40,10 @@ export class DoctorProfileComponent implements OnInit {
console.log(URL_AS_LIST); console.log(URL_AS_LIST);
// this.router.navigate(['customer/business/'+URL_AS_LIST[3]]) // this.router.navigate(['customer/business/'+URL_AS_LIST[3]])
} }
setTimeout(() => {
/** spinner ends after 5 seconds */
this.spinner.hide();
}, 1000);
}) })
} }

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

@ -1,10 +1,11 @@
<div *ngIf="servicesList.length != 0">
<mat-toolbar> <mat-toolbar>
<span style="text-align: center;">Appointment</span> <span style="text-align: center;">Appointment</span>
<h3 style="margin-left:35% ;">{{full_data[0].business[0].busName}}</h3> <h3 style="margin-left:35% ;">{{full_data[0].business[0].busName}}</h3>
</mat-toolbar> </mat-toolbar>
<div class="container mt-1"> <div class="container mt-1">
<div *ngIf="servicesList.length != 0">
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap"> <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
<h3 class="page-h">Service List</h3> <h3 class="page-h">Service List</h3>
@ -17,6 +18,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<!-- <button mat-button (click)="openDialog('Add',{})" class="buttons">Add Services</button><br> --> <!-- <button mat-button (click)="openDialog('Add',{})" class="buttons">Add Services</button><br> -->
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<div fxLayout="row wrap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100"> <div fxLayout="row wrap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
@ -45,12 +47,13 @@
</div> --> </div> -->
</div> </div>
</div> </div>
</div>
<footer> <footer>
<p> <p>
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
</p> </p>
</footer> </footer>
</div>
<div *ngIf="servicesList.length == 0"> <div *ngIf="servicesList.length == 0">
<div fxLayout="row" class="flexCard"> <div fxLayout="row" class="flexCard">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">

142
ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.scss
View File

@ -1,145 +1,3 @@
// $color_red_orange_approx: #107c14;
// $white: #fff;
// $black_10: rgba(0, 0, 0, 0.1);
// $black_30: rgba(0, 0, 0, 0.3);
// $icon-size: 3rem;
// $icon-color: #D8D8D8;
// $main-color: #f44336;
// $tem-color : #217e69;
// .toggleSize{
// width: 12rem;
// height: 4rem;
// border-radius: 5px !important;
// }
// [mat-raised-button][mat-button-sm] {
// font-size: 15px;
// line-height: 45px;
// padding: 0 20px;
// }
// .hoverButton{
// background: $white;
// // box-shadow: 0 2px 6px $tem-color;
// transition: all 0.1s ease-in-out 0s;
// &:hover {
// box-shadow: 0 0 21px $tem-color;
// transform: scale(1.05);
// }
// }
// .button{
// margin-bottom: 1rem;
// background-color: #ffff !important;
// margin-top: -3rem;
// float: right;
// }
// .calender{
// margin-left: -1rem;
// padding-right: 6rem;
// }
// .cardCalender{
// width: 140%;
// }
// ::ng-deep .mat-tab-label {
// margin-left: -3rem!important;
// }
// .img{
// width: 50px;
// }
// .btn-red {
// // background-color: #4caf50 !important;
// color: $white;
// // border: 1px solid $color_red_orange_approx;
// float: right;
// }
// .clickedSlot{
// color: white !important;
// background-color: brown !important;
// cursor: pointer !important;
// width: 6rem;
// }
// .bookedSlot{
// background-color: darkgrey;
// color: white;
// width: 6rem;
// cursor: no-drop !important;
// }
// .primary{
// background-color: #00866e00;
// color: brown;
// width: 6rem;
// border: 1px solid brown;
// cursor: pointer;
// }
// ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
// background-color: #658F9B!important;
// }
// // ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
// // width: 250%;
// // }
// .success {
// background: #fff;
// box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
// padding: 5px;
// color: #0087ba;
// font-weight: 600;
// border-radius: 10px;
// }
// mat-toolbar{
// background-color: #227f6e;
// color:#fff;
// }
// .container{
// max-width: 1217px;
// min-width: 375px;
// margin: 0 auto;
// // margin-right: 0rem;
// }
// .flx{
// flex: 1 1 0%!important;
// display: initial!important;
// }
// .card-mat{
// // max-width: 100%;
// min-width: -webkit-fill-available;
// padding: 1rem !important;
// }
// @media only screen and (max-width: 600px) {
// h3{
// font-size: 20px;
// margin-top: 2rem;
// }
// .card-mat{
// max-width: 95%;
// }
// .container{
// display: flow-root!important;
// }
// .img {
// margin-right: 2rem;
// margin-left: 1rem;
// }
// .img-sun{
// margin-right: 2rem;
// }
// .img-set{
// margin-right: 2rem;
// }
// }
// ::ng-deep body{
// background-color: #f7f8f5 !important;
// }
// .dateTime{
// margin:0 !important;
// color: #0087ba;
// font-weight: 600;
// }
// .datecolor{
// color: black !important;
// font-weight: 500 !important;
// }
$color_red_orange_approx: #107c14; $color_red_orange_approx: #107c14;
$white: #fff; $white: #fff;
$black_10: rgba(0, 0, 0, 0.1); $black_10: rgba(0, 0, 0, 0.1);

2
ng-seed/src/environments/environment.ts
View File

@ -10,7 +10,7 @@ export const environment = {
// apiEndpoint:'http://192.168.1.20:8080/api/', // apiEndpoint:'http://192.168.1.20:8080/api/',
// apiEndpoint:'https://api.venbait.in/api/', // apiEndpoint:'https://api.venbait.in/api/',
// apiEndpoint:'http://venbainfotech.com:5000/api/', // apiEndpoint:'http://venbainfotech.com:5000/api/',
apiEndpoint:'http://192.168.1.17:8080/api/', apiEndpoint:'http://192.168.1.15:8080/api/',
// apiEndpoint:'https://api.venbait.in/api/', // apiEndpoint:'https://api.venbait.in/api/',
//EndUser URL //EndUser URL