Merge branch 'master' of bitbucket.org:venbainformationtechnology/appointments_frontend

ng-seed/package.json

@@ -49,11 +49,12 @@
     "ng2-charts": "^2.4.2",
     "ng2-dragula": "^2.1.1",
     "ng2-file-upload": "^1.4.0",
+    "ngx-bootstrap": "^10.2.0",
     "ngx-color-picker": "^11.0.0",
     "ngx-perfect-scrollbar": "10.1.0",
     "ngx-scrollbar": "^7.5.6",
     "ngx-sortablejs": "^3.1.4",
-    "ngx-spinner": "^10.0.1",
+    "ngx-spinner": "^11.0.2",
     "ornamentum": "^8.1.4",
     "perfect-scrollbar": "^1.5.0",
     "primeflex": "^3.3.0",

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

@@ -70,7 +70,7 @@
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
                          <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>  
+                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>  
                         </mat-cell>
                       </ng-container>
                   

ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss

@@ -50,13 +50,16 @@ tr.mat-header-row {
   font-size: 14px;
 }
 .edit-color{
-  color: rgba(0, 0, 0, 0.54);
+  color: #178a78;
+}
+.edit-color2{
+  color: #e12929ba;
 }
 .edit-color:hover {
   color: #4caf50;
 }
 .delete:hover {
-  color:#ff0000;
+  color:#ff000085;
 }
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;

ng-seed/src/app/appoinment/business/add-business/add-business.component.html

@@ -49,9 +49,18 @@
       <mat-error *ngIf="myError('workingHrsJson', 'required')">Working Hrs is required</mat-error>
       <mat-error *ngIf="myError('workingHrsJson', 'maxlength')">Limit exceed</mat-error>
     </mat-form-field>  -->
-    <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="50" width="50"><br />
+    <div fxLayout="row wrap">
-    <input type='file'accept="image/*" data-max-size="2048" style="    width: 35%;" (change)="onSelectFile($event)" formControlName="logo">  
+      <div fxFlex.xs="70" fxFlex.sm="70" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70">
-    <mat-checkbox class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox> 
+        <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
+        <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
+        <input type='file'accept="image/*" data-max-size="2048" style="width: 50%;" (change)="onSelectFile($event)" formControlName="logo"><br>
+        <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB </span>
+      </div>
+      <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" fxLayoutAlign="start end">
+        <mat-checkbox *ngIf="action != 'Update'" class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox>
+      </div>
+    </div>
+    
   
   </div>
     </ng-scrollbar>
@@ -63,7 +72,7 @@
       <button mat-button (click)="closeDialog()" >Cancel</button>
     </div>
   </form>
-  
+  <notifier-container></notifier-container>
   <!-- </mat-card> -->
   
   

ng-seed/src/app/appoinment/business/add-business/add-business.component.scss

@@ -76,3 +76,10 @@ input[type=file]::file-selector-button {
   input[type=file]::file-selector-button:hover {
     background: #0d45a5;
   }
+  .image{
+    border: 7px solid #16c1a636;
+  }
+  .imgSizeValidation{
+    color: red;
+    font-family: ui-serif;
+  }

ng-seed/src/app/appoinment/business/add-business/add-business.component.ts

@@ -3,6 +3,8 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { NotifierService } from 'angular-notifier';
+import { environment } from 'environments/environment';
 export interface UsersData {
   name: string;
   id: number;
@@ -25,7 +27,8 @@ export class AddBusinessComponent implements OnInit {
   formData: any=[];
   selectedFiles: any;
   currentFileUpload: any;
-  constructor(private router: Router,private formBuilder: FormBuilder,
+  private apiUrl = environment.apiEndpoint;
+  constructor(private notifierService: NotifierService,private router: Router,private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<AddBusinessComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
     console.log(data);
@@ -46,13 +49,15 @@ export class AddBusinessComponent implements OnInit {
     this.dialogRef.close({event:'Cancel'});
   }
   onSelectFile(event) {
+    console.log(event)
     console.log(event.target.files[0])
+    if(event.target.files[0].size > 2097152){
+      this.notifierService.notify('warning', 'Image size is too Larger');
+    }else {
     const file = event.target.files[0]; 
- 
     if(event != null){
       this.imageViewStatus = true
     }    
-    
     this.form['value'].logo = [event.target.files[0]]
     if (event.target.files && event.target.files[0]) {
       var reader = new FileReader();
@@ -64,10 +69,8 @@ export class AddBusinessComponent implements OnInit {
     }
     // this.formData=[];
     this.formData.append('image', file, file.name);   
-   
     console.log(this.currentFileUpload)   
-   
+  }
-
    
     // this.formData.append('file', file, file.name);
   }
@@ -126,4 +129,9 @@ export class AddBusinessComponent implements OnInit {
         // console.log(this.action,this.local_data)
     }
 
+    image_view(image){
+    
+      return this.apiUrl+'imageViewer?img_name='+image;
+    }
+
 }

ng-seed/src/app/appoinment/business/business-list/business-list.component.html

@@ -59,7 +59,7 @@
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
                           <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>   
+                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>   
                         </mat-cell>
                       </ng-container>
                   

ng-seed/src/app/appoinment/business/business-list/business-list.component.scss

@@ -50,14 +50,17 @@ img {
     font-size: 14px;
 }
 .edit-color{
-    color: rgba(0, 0, 0, 0.54);
+  color: #178a78;
+}
+.edit-color2{
+  color: #e12929ba;
 }
 .edit-color:hover {
-    color: #4caf50;
+  color: #4caf50;
-  }
+}
-  .delete:hover {
+.delete:hover {
-    color:#ff0000;
+  color:#ff000085;
-  }
+}
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;
 // }

ng-seed/src/app/appoinment/business/business-list/business-list.component.ts

@@ -186,11 +186,11 @@ export class BusinessListComponent implements OnInit {
      //console.log(formData)
      this._bus.addFormDetails(formValue[0]).subscribe(res => {
       if (res.status == 200) {
-        // this.customersList = res.data;
+        let getData = res.data;
         this.getBusinessList()
         if(result.event == 'Add' && result.admincheck == true){
           localStorage.setItem('go_admin','0')
-          localStorage.setItem('busName',row_obj.busName)
+          localStorage.setItem('busNameID',getData.busId)
           this.router.navigate(['/users',])
         }
         if(result.event == 'Add'){

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

@@ -49,7 +49,15 @@
            </div>
            <div class="form-group label-container">
             <label>Gender <span style="margin-left: 5.5rem;">-</span></label>
-            <a  style="padding: 10px;">{{practitionerdetails.gender}}</a>
+            <a *ngIf="isEditable == false" style="padding: 10px;">{{practitionerdetails.gender}}</a>
+            <mat-form-field class="example-full-width"  *ngIf="isEditable == true">
+               <mat-label>Gender</mat-label>
+               <mat-select placeholder="Gender" [(ngModel)]="gender" required>
+                   <mat-option *ngFor="let genderData of genderOption" [value]="genderData.name">
+                       {{genderData.name}}
+                   </mat-option>
+               </mat-select>               
+           </mat-form-field> 
             <!-- <mat-form-field class="example-full-width"  *ngIf="isEditable == true">
                <input type="text" matInput placeholder="gender" [(ngModel)]="gender" >  
              </mat-form-field> -->
@@ -93,16 +101,25 @@
                <mat-label>Experience</mat-label>
                <input type="text" matInput   placeholder="Experience" [(ngModel)]="exp">
              </mat-form-field> 
-             <!-- <mat-form-field class="example-full-width"  *ngIf="isEditable == true">
-               <mat-label>Experience</mat-label>
-               <mat-select placeholder="Experience" [(ngModel)]="exp" required>
-                   <mat-option>--</mat-option>
-                   <mat-option *ngFor="let expdata of experience" [value]="expdata.exp">
-                       {{expdata.exp}}
-                   </mat-option>
-               </mat-select>               
-           </mat-form-field> -->
          </div>
+         <div class="form-group label-container">
+               <label>Skills <span style="margin-left: 4rem;">-</span></label>
+               <a style="padding: 10px;"  *ngIf="isEditable == false">{{practitionerdetails.skills}}</a>
+               <mat-form-field class="example-full-width" *ngIf="isEditable == true">
+                  <mat-label>Skills</mat-label>
+                  <mat-select [(ngModel)]="skills" multiple> 
+                  <mat-option *ngFor="let skillsDetails of skillsOption" [value]="skillsDetails.name">{{skillsDetails.name}}</mat-option>
+                  </mat-select>
+               </mat-form-field>
+          </div>
+          <div class="form-group label-container">
+               <label>Description <span style="margin-left: 4rem;">-</span></label>
+               <a style="padding: 10px;"  *ngIf="isEditable == false">{{practitionerdetails.description}}</a>
+               <mat-form-field class="example-full-width" *ngIf="isEditable == true">
+                  <mat-label>Description</mat-label>
+                  <textarea matInput rows="5" cols="40" placeholder="Description" [(ngModel)]="description"></textarea>
+               </mat-form-field>
+          </div>
            <!-- <div class="form-group label-container">
               <label>Fees <span style="margin-left: 6.7rem;">-</span></label>
               <a style="padding: 10px;">{{practitionerdetails.fees}}</a>

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

@@ -43,7 +43,9 @@ export class ConsultantSettingComponent implements OnInit {
   working_customize:any= false; 
  
   userName:any = [];
-  // gender: any=[];
+  gender: any=[];
+  description:any=[];
+  skills:any = [];
   dob: any=[];
   languages: any=[];
   designtion: any=[];
@@ -52,6 +54,8 @@ export class ConsultantSettingComponent implements OnInit {
   id: any;
   public end_User_Url = environment.endUserUrl;
   endUserURL: any;
+  genderOption:any = [{'name':'Male'},{'name':'Female'}]
+  skillsOption:any = [{'name':'Assisting with walking from bed to wheelchair'},{'name':'Bathing, dressing and grooming assistance'},{'name':'Medication reminders'},{'name':'Safety and fall prevention'},{'name':'Status reporting to family'},{'name':'Assisting with walking from bed to wheelchair'},{'name':'Bathing, dressing and grooming assistance'},{'name':'Medication reminders'},{'name':'Safety and fall prevention'},{'name':'Status reporting to family'}]
  constructor(private notifierService: NotifierService,private formBuilder: FormBuilder, public dialog: MatDialog, public _con:ConsultantService, private fb: FormBuilder, public _api:ConsultantService,private locationStrategy: LocationStrategy) {}
 
  
@@ -156,6 +160,8 @@ unavailability(action,obj) {
                   "dob": null,
                   "designtion": null,
                   "gender": null,
+                  "description":null,
+                  "skills": null,
                   "isActive": "1",
                   
                 }]
@@ -165,13 +171,15 @@ unavailability(action,obj) {
             console.log(this.practitionerdetails)
             this.id=this.practitionerdetails.id 
             this.userName = this.usersList.userName
-            // this.gender=this.practitionerdetails.gender 
+            this.gender=this.practitionerdetails.gender 
+            this.description=this.practitionerdetails.description
+            this.skills=this.practitionerdetails.skills
             this.dob=this.practitionerdetails.dob 
             this.exp=this.practitionerdetails.exp 
             this.languages=this.practitionerdetails.languages 
             this.qualification=this.practitionerdetails.qualification 
             this.designtion=this.practitionerdetails.designtion 
-            // console.log(this.gender)
+            console.log(this.gender)
         this.workinghours =  JSON.parse(this.practitionerdetails.workingHours)
          // this.workinghours =  this.practitionerdetails.workingHours
            console.log(this.workinghours)
@@ -326,13 +334,16 @@ unavailability(action,obj) {
                 "languages":  this.languages,                 
                 "dob": this.dob,
                 "designtion": this.qualification,
-                // "gender": this.gender,
+                "gender": this.gender,
+                "description": this.description,
+                "skills": this.skills,
                 "userName": this.userName,
                 "userId":userid
             }
                 if(this.usersList['practitionerInfos'].length>0) {
                   param.id = this.id
                 }
+                console.log(param)
                 this._con.createPractitionerInfo(param).subscribe(res => {
                   if (res.status == 200) {
                     this.getUsersList()

ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html

@@ -58,7 +58,7 @@
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
                          <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>  
+                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>  
                         </mat-cell>
                       </ng-container>
                   

ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.scss

@@ -48,13 +48,16 @@ img {
     font-size: 14px;
 }
 .edit-color{
-    color: rgba(0, 0, 0, 0.54);
+    color: #178a78;
-}
+  }
-.edit-color:hover {
+  .edit-color2{
+    color: #e12929ba;
+  }
+  .edit-color:hover {
     color: #4caf50;
   }
   .delete:hover {
-    color:#ff0000;
+    color:#ff000085;
   }
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;

ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html

@@ -46,7 +46,7 @@
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
                           <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>   
+                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>   
                         </mat-cell>
                       </ng-container>
                   

ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss

@@ -50,13 +50,16 @@ img {
     font-size: 14px;
 }
 .edit-color{
-    color: rgba(0, 0, 0, 0.54);
+    color: #178a78;
-}
+  }
-.edit-color:hover {
+  .edit-color2{
+    color: #e12929ba;
+  }
+  .edit-color:hover {
     color: #4caf50;
   }
   .delete:hover {
-    color:#ff0000;
+    color:#ff000085;
   }
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;

ng-seed/src/app/appoinment/user/add-user/add-user.component.html

@@ -64,9 +64,11 @@
         <mat-error *ngIf="myError('password', 'required')">Password is required</mat-error>
         <mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
       </mat-form-field>  
-      <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="50" width="50">
-      <input type='file'accept="image/*" data-max-size="2048" style="    width: 35%;"  (change)="onSelectFile($event)" formControlName="logo">  
 
+      <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
+      <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
+      <input type='file'accept="image/*" data-max-size="2048" style="width: 33%;" (change)="onSelectFile($event)" formControlName="logo"><br>
+      <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB </span>
       <!-- <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
         <input placeholder="ConfirmPassword" matInput  formControlName="confirmPassword">
         <mat-error *ngIf="myError('confirmPassword', 'required')">confirmPassword is required</mat-error>
@@ -85,5 +87,5 @@
     </ng-template><br>
    
   </mat-card>
-    
+  <notifier-container></notifier-container>
     

ng-seed/src/app/appoinment/user/add-user/add-user.component.scss

@@ -52,3 +52,11 @@ input[type=file]::file-selector-button {
   input[type=file]::file-selector-button:hover {
     background: #0d45a5;
   }
+
+  .image{
+    border: 7px solid #16c1a636;
+  }
+  .imgSizeValidation{
+    color: red;
+    font-family: ui-serif;
+  }

ng-seed/src/app/appoinment/user/add-user/add-user.component.ts

@@ -2,7 +2,9 @@ import { Component, Inject, OnInit, Optional } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { NotifierService } from 'angular-notifier';
 import { BusinessService } from 'app/appoinment/business/business-service/business.service';
+import { environment } from 'environments/environment';
  
 export interface UsersData {
   userName: string;
@@ -27,7 +29,8 @@ export class AddUserComponent implements OnInit {
   public role = [{'name':'BADMIN'},{'name':'PRACTITIONER'},{'name':'FRONTDESK'}]
   imageViewStatus: boolean;
   formData:any=[];
-  constructor(private router: Router,private formBuilder: FormBuilder,
+  private apiUrl = environment.apiEndpoint;
+  constructor(private notifierService: NotifierService,private router: Router,private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<AddUserComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData,public _bus:BusinessService) {
     console.log(data);
@@ -38,41 +41,7 @@ export class AddUserComponent implements OnInit {
     this.getBusinessList()
   }
 
-  getBusinessList() {
-    //this._pd.getTabStatusPdDetails(this.tabStatus)
-    this._bus.getBusinessListDetails().subscribe(res => {
-          if (res.status == 200) {
-            let businessFilter = res['data'].filter(val => val.busName)
-            this.businessList = businessFilter; 
-            let data = localStorage.getItem('busName')
-          //  this.form.controls['businessselect'].setValue(data)
-            console.log(this.businessList)   
-            console.log(this.form['value'].businessselect)    
-            this.local_data.businessselect =   this.local_data.busId
  
-            this.form.patchValue(this.local_data)
-          } 
-        }
-        // , error => {this.errorMessage = <any> error});
-        ,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(){
-    return this.form.controls;
-  }
- 
-
-  closeDialog(){
-    this.dialogRef.close({event:'Cancel'});
-  }
-  
-  close() {
-    this.dialogRef.close();
-}
   ngOnInit() {
     let userrole = localStorage.getItem('user_role')
     this.form = new FormGroup({
@@ -88,10 +57,12 @@ export class AddUserComponent implements OnInit {
     password: new FormControl('', [Validators.required, Validators.minLength(6)]),
     logo: new FormControl('', null),
     // confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
-    createdBy:new FormControl(userrole,[Validators.required]),
+    createdBy:new FormControl(userrole,null),
     });
     console.log(this.local_data);
-    this.local_data.businessselect =   this.local_data.busId
+    if(this.action == 'Update'){
+      this.local_data.businessselect = this.local_data.busId
+    }    
  
     this.form.patchValue(this.local_data)
     setTimeout(() => {
@@ -101,28 +72,65 @@ export class AddUserComponent implements OnInit {
     public myError = (controlName: string, errorName: string) =>{
       return this.form.controls[controlName].hasError(errorName);
       }
-      doAction(){
+      // doAction(){
-        let tmp = this.form.value
+      //   let tmp = this.form.value
-            tmp.id = this.local_data.id
+      //       tmp.id = this.local_data.id
-           console.log(this.formData.getAll('image'));
+      //      console.log(this.formData.getAll('image'));
-            if(this.action == 'Update'){
+      //       if(this.action == 'Update'){
-              this.formData.append('id', tmp.id);
+      //         this.formData.append('id', tmp.id);
-              this.formData.append('busId', this.local_data.busId);
+      //         this.formData.append('busId', this.local_data.busId);
+      //       }
+           
+         
+      //       this.formData.append('userName', tmp.userName);
+      //       this.formData.append('password', tmp.password);
+      //       this.formData.append('role', tmp.role);
+      //       this.formData.append('email', tmp.email);
+      //       this.formData.append('contactNo', tmp.contactNo);
+            
+      //       this.formData.append('confirmPassword', tmp.password);
+      //       // tmp.confirmPassword = this.local_data.confirmPassword
+      //   this.dialogRef.close({event:this.action,data: this.formData});
+      //   console.log(   this.formData,this.form.value);
+      //   console.log(this.action,this.local_data)
+      // }
+
+      getBusinessList() {
+        //this._pd.getTabStatusPdDetails(this.tabStatus)
+        this._bus.getBusinessListDetails().subscribe(res => {
+              if (res.status == 200) {
+                let businessFilter = res['data'].filter(val => val.busName)
+                this.businessList = businessFilter; 
+                let data = localStorage.getItem('busName')
+              //  this.form.controls['businessselect'].setValue(data)
+                console.log(this.businessList)   
+                console.log(this.form['value'].businessselect)    
+                this.local_data.businessselect = this.local_data.busId
+     
+                this.form.patchValue(this.local_data)
+              } 
             }
-           
+            // , error => {this.errorMessage = <any> error});
-         
+            ,error => {
-            this.formData.append('userName', tmp.userName);
+              // this.errorMessage.push(error);
-            this.formData.append('password', tmp.password);
+              // 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.formData.append('role', tmp.role);
+              // alert(error.html_format);
-            this.formData.append('email', tmp.email);
+            })
-            this.formData.append('contactNo', tmp.contactNo);
-            
-            this.formData.append('confirmPassword', tmp.password);
-            // tmp.confirmPassword = this.local_data.confirmPassword
-        this.dialogRef.close({event:this.action,data: this.formData});
-        console.log(   this.formData,this.form.value);
-        console.log(this.action,this.local_data)
       }
+      
+      get f(){
+        return this.form.controls;
+      }
+     
+    
+      closeDialog(){
+        this.dialogRef.close({event:'Cancel'});
+      }
+      
+      close() {
+        this.dialogRef.close();
+    }
+    
       submit(){
         console.log(this.form.value);
         if (!this.form.valid) {
@@ -135,14 +143,11 @@ export class AddUserComponent implements OnInit {
               this.formData.append('id', tmp.id);
               this.formData.append('busId', this.local_data.busId);
             }    
-           
-         
             this.formData.append('userName', tmp.userName);
             this.formData.append('password', tmp.password);
             this.formData.append('role', tmp.role);
             this.formData.append('email', tmp.email);
             this.formData.append('contactNo', tmp.contactNo);            
-            
             this.formData.append('confirmPassword', tmp.password);
             // tmp.confirmPassword = this.local_data.confirmPassword
         this.dialogRef.close({event:this.action,data: this.formData});
@@ -153,29 +158,30 @@ export class AddUserComponent implements OnInit {
       onSelectFile(event) {
         console.log(event.target.files[0])
         const file = event.target.files[0];
-     
+        if(event.target.files[0].size > 2097152){
-        if(event != null){
+          this.notifierService.notify('warning', 'Image size is too Larger');
-          this.imageViewStatus = true
+        }else {
-        }
+          if(event != null){
-        
+            this.imageViewStatus = true
-       
-        if (event.target.files && event.target.files[0]) {
-          var reader = new FileReader();
-          reader.readAsDataURL(event.target.files[0]); 
-          reader.onload = (event) => { 
-            this.url = event.target.result;
-            console.log(this.url)
           }       
+          if (event.target.files && event.target.files[0]) {
+            var reader = new FileReader();
+            reader.readAsDataURL(event.target.files[0]); 
+            reader.onload = (event) => { 
+              this.url = event.target.result;
+              console.log(this.url)
+            }
+          }
+          // this.formData= new FormData();
+        //  this.formData=[];
+          this.formData.append('image', file, file.name);    
+          // this.formData.append('file', file, file.name);
         }
-        // this.formData= new FormData();
-      //  this.formData=[];
-        this.formData.append('image', file, file.name);
         
+      }
 
-       
+      image_view(image){    
-    
+        return this.apiUrl+'imageViewer?img_name='+image;
-       
-        // this.formData.append('file', file, file.name);
       }
 
 }

ng-seed/src/app/appoinment/user/user-list/user-list.component.html

@@ -100,7 +100,7 @@
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
                         <td mat-cell *matCellDef="let element" class="action-link"> 
                           <a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a> 
-                          <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> 
+                          <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color2 delete">delete</span></a> 
                         </td>
                       </ng-container>
                       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

ng-seed/src/app/appoinment/user/user-list/user-list.component.scss

@@ -50,14 +50,17 @@ img {
     font-size: 14px;
 }
 .edit-color{
-    color: rgba(0, 0, 0, 0.54);
+  color: #178a78;
+}
+.edit-color2{
+  color: #e12929ba;
 }
 .edit-color:hover {
-    color: #4caf50;
+  color: #4caf50;
-  }
+}
-  .delete:hover {
+.delete:hover {
-    color:#ff0000;
+  color:#ff000085;
-  }
+}
 //   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
 //     width: 180%;
 // }

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

@@ -1,5 +1,7 @@
+<div *ngIf="consultants.length != 0">
 <mat-toolbar>
    <span style="text-align: center;">Appointment</span>
+   <h3 style="margin-left:35% ;">{{busName}}</h3>
  </mat-toolbar>
 <div class="container  mt-1">
 <!-- <ng-scrollbar class="scrollHV"> -->
@@ -28,7 +30,7 @@
                         <div class="consultant-card-cover">
                            <div>
                               <div class="text-center consultant-thumb">
-                                 <img class="img-responsive img-circle" src="assets/images/face4.jpg" width="120" height="120" alt="user list image">
+                                 <img class="img-responsive img-circle"[src]="image_view(consultant.logo)"  width="120" height="120" alt="user list image">
                               </div>
                            </div>
                         </div>
@@ -82,3 +84,24 @@
  <!-- </ng-scrollbar> -->
 
  </div>
+ <footer>
+   <p>
+      © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+   </p>
+</footer>
+</div>
+ <div *ngIf="consultants.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>

ng-seed/src/app/end-user/consultants/consultants-list.component.scss

@@ -188,3 +188,10 @@ mat-toolbar{
  ::ng-deep body{
     background-color: #f7f8f5 !important;
 }
+footer {
+    background-color: #d1d1d1;
+    height:50px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }

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

@@ -1,7 +1,9 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
 import { EndUserService } from '../end-user.service';
+import { environment } from 'environments/environment';
 
 @Component({
   selector: 'app-consultants-list',
@@ -15,11 +17,16 @@ export class ConsultantsListComponent implements OnInit {
   consultants:any =[];
   public filterdata = null;
   bgColorPast: any=[];
-  constructor(private router:Router,public dialog: MatDialog,public end_user:EndUserService) {}
+  
+  busName:any=[]
+  private apiUrl = environment.apiEndpoint;
+  constructor(private router:Router,public dialog: MatDialog,public end_user:EndUserService,private spinner:NgxSpinnerService) {
+    this.spinner.show();
+  }
 
 
   ngOnInit(): void {
-    
+    this.busName = localStorage.getItem('busName')
    let tmp =  localStorage.getItem('cusServiceData') 
       let practitioner =  JSON.parse(tmp)
       console.log(practitioner)
@@ -46,8 +53,32 @@ export class ConsultantsListComponent implements OnInit {
       ))
   );
   this.consultants = result;
+  setTimeout(() => {
+    /** spinner ends after 5 seconds */
+    this.spinner.hide();
+  }, 1000);
   console.log(this.consultants)
   let workinghrs = []
+  this.consultants.forEach(element => {
+    console.log(element)
+    element.practitionerInfos
+    if( element.practitionerInfos.length ==0){
+   
+      element.practitionerInfos.push(   {
+          
+          "exp":null,
+          "qualification":null,
+          "days": null,
+          "languages": null,
+          "workingHours": '[{"sunday":{"hours":[{"startTime":"09:30 am","endTime":"09:30 am","day":"sunday","value":null}],"breaks":[]}},{"monday":{"hours":[{"startTime":"09:00 am","endTime":"09:30 am","day":"monday","value":null}],"breaks":[]}},{"tuesday":{"hours":[{"startTime":"09:00 am","endTime":"12:00 am","day":"tuesday","value":null},{"startTime":"01:00 pm","endTime":"04:00 pm","day":null},{"startTime":"05:00 pm","endTime":"09:00 pm","day":null}],"breaks":[]}},{"wednesday":{"hours":[{"startTime":"09:00 am","endTime":"09:30 am","day":"wednesday","value":null}],"breaks":[]}},{"thursday":{"hours":[{"startTime":"09:00 am","endTime":"09:30 am","day":"thursday","value":null}],"breaks":[]}},{"friday":{"hours":[{"startTime":"09:00 am","endTime":"09:30 am","day":"friday","value":null}],"breaks":[]}},{"saturday":{"hours":[{"startTime":"09:00 am","endTime":"09:30 am","day":"saturday","value":null}],"breaks":[]}}]',
+          "dob": null,
+          "designtion": null,
+          "gender": null,
+          "isActive": "1",
+          
+        })
+    }
+  })
   this.consultants.forEach(element => {
     console.log(element)
     element.practitionerInfos.forEach(e => {
@@ -93,4 +124,8 @@ export class ConsultantsListComponent implements OnInit {
     this.router.navigate([URL+"/details"])
  
   }
+  image_view(image){
+    
+    return this.apiUrl+'imageViewer?img_name='+image;
+  }
 }

ng-seed/src/app/end-user/customer-info/customer-info.component.html

@@ -2,6 +2,7 @@
     <ng-scrollbar class="scrollHV">
         <mat-toolbar>
             <span style="text-align: center;">Appointment</span>
+            <h3 style="margin-left:35% ;">{{busName}}</h3>
           </mat-toolbar>
           <div class="container mt-1">
         <div fxLayout="row wrap" fxLayoutAlign="center">
@@ -90,6 +91,11 @@
         </div>
         </div>
     </ng-scrollbar>
+    <footer>
+        <p>
+           © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+        </p>
+     </footer>
  
  <!-- <div class="contain">
     <div class="row d-flex align-items-center justify-content-center">

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

@@ -31,13 +31,14 @@ export class CustomerInfoComponent implements OnInit {
   reCaptchaVerifier!: any;
   otp!: string;
   verifykey: any;
+  busName: string;
  
   constructor(private router: Router,private formBuilder: FormBuilder,public _cus:EndUserService, private ngZone: NgZone) {
    // firebase.initializeApp(config)
   }
 
   ngOnInit()  {   
-
+    this.busName = localStorage.getItem('busName')
     this.form = new FormGroup({
       cusName: new FormControl('', [Validators.required]), 
       email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(

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

@@ -42,6 +42,10 @@
        </div>
    </div>  
    </div> -->
+   <mat-toolbar>
+      <span style="text-align: center;">Appointment</span>
+      <h3 style="margin-left:35% ;">{{busName}}</h3>
+    </mat-toolbar>
    <ng-scrollbar class="scrollHV">
    <div class="doctor-profile">
       
@@ -49,10 +53,10 @@
             <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap" >
                <div class="doctor_info">
                   <div class="images">
-                     <img src="assets/images/userpic2.jpg" width="100" class="rounded-circle">
+                     <img src="{{dp}}" width="100" class="rounded-circle">
                   </div>
                   <div class="heading">
-                     <h3>{{bookedAppointment.userName}}</h3>
+                     <h3>Dr.{{bookedAppointment.userName}}</h3>
                      <a>{{bookedAppointment.practitionerInfos[0].designtion
      
                     }}</a><br />
@@ -204,3 +208,8 @@
          </div>   
  </div>
 </ng-scrollbar>
+<footer>
+   <p>
+      © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+   </p>
+</footer>

ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.scss

@@ -124,6 +124,7 @@
 //01/04.23
 .scrollHV {
     height: calc(100vh - 0px);
+    zoom: 90%;
 }
 .doctor-profile{
     font-family: sans-serif;
@@ -145,13 +146,15 @@
         max-width: 100%;
         vertical-align: middle;
         border-radius: 45px;
-        width: 100%;
+        width: 65%;
+        height: 180px;
     }
     .images{
         border-radius: 100%;
-        width: 50%;
+        text-align: center;
-        height: 40%;
+        // width: 50%;
-        margin-left: 5rem;
+        // height: 40%;
+        // margin-left: 5rem;
     }
     .img{
         width: 30px;
@@ -274,3 +277,14 @@
      }
 }
 }
+mat-toolbar{
+    background-color: #227f6e;
+    color:#fff;
+}
+footer {
+    background-color: #d1d1d1;
+    height:50px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { EndUserService } from '../end-user.service';
+import { environment } from 'environments/environment';
 
 @Component({
   selector: 'app-doctor-profile',
@@ -9,10 +10,14 @@ import { EndUserService } from '../end-user.service';
 })
 export class DoctorProfileComponent implements OnInit {
   bookedAppointment: any=[];
+  private apiUrl = environment.apiEndpoint;
+  dp: any =[];
+  busName: any=[];
  
   constructor(private router:Router,public end_user:EndUserService) { }
 
   ngOnInit(): void {
+    this.busName = localStorage.getItem('busName')
     let service = localStorage.getItem("servicedetails")
     let serviceDetails = JSON.parse(service)
     console.log(serviceDetails)
@@ -21,6 +26,8 @@ export class DoctorProfileComponent implements OnInit {
       console.log('booked', res);
       if(res.length>0){
       this.bookedAppointment=res[0].user[0]
+      this.dp = this.apiUrl+'imageViewer?img_name='+  this.bookedAppointment.logo
+      console.log(this.dp)
       }else{
         
         let URL = this.router.url;
@@ -42,4 +49,9 @@ export class DoctorProfileComponent implements OnInit {
     this.router.navigate([URL+"/slot"])
  
   }
+  image_view(image){
+    
+    return this.apiUrl+'imageViewer?img_name='+image;
+  }
+
 }

ng-seed/src/app/end-user/end-user.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 
 import { EndUserRoutingModule } from './end-user-routing.module';
@@ -17,7 +17,7 @@ import { CustomerInfoComponent } from './customer-info/customer-info.component';
 import { BookingSummaryComponent } from './booking-summary/booking-summary.component';
 import { SummaryComponent } from './summary/summary.component';
 import { DoctorProfileComponent } from './doctor-profile/doctor-profile.component';
-
+import { NgxSpinnerModule } from "ngx-spinner";
 
 @NgModule({
   declarations: [
@@ -33,8 +33,11 @@ import { DoctorProfileComponent } from './doctor-profile/doctor-profile.componen
     EndUserRoutingModule,
     DemoMaterialModule, 
     NgScrollbarModule,
-    SharedModule
+    SharedModule,
+    NgxSpinnerModule
+    
   ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers:[
     EndUserService,
     DatePipe

ng-seed/src/app/end-user/end-user.service.ts

@@ -54,6 +54,12 @@ private apiUrl = environment.apiEndpoint;
         // catchError(this.handleError('role', []))
         // ) 
   }
+  getSlots(Params): Observable<any> {
+    return this._http.post(this.apiUrl + 'getSlots', Params)
+        // .pipe(
+        // catchError(this.handleError('role', []))
+        // ) 
+  }
   CreateAppoinmentsCus(addParams): Observable<any> {
     return this._http.post(this.apiUrl + 'CreateAppoinmentsCus', addParams)
         // .pipe(

ng-seed/src/app/end-user/payment/payment.component.html

@@ -1,5 +1,6 @@
 <mat-toolbar>
    <span style="text-align: center;">Appointment</span>
+   <h3 style="margin-left:35% ;">{{busName}}</h3>
  </mat-toolbar>
  <div class="container mt-1">
 <div fxLayout="row wrap" fxLayoutAlign="center">

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

@@ -11,6 +11,7 @@ import { EndUserService } from '../end-user.service';
 export class PaymentComponent implements OnInit {
   form: FormGroup;
   bookedAppointment_servicemap: any;
+  busName: string;
   constructor(private router:Router,public enduser:EndUserService,  private route: ActivatedRoute, ) { 
     this.enduser.appointmentBooked_observable$.subscribe((res) => {
       console.log('booked', res);
@@ -30,6 +31,7 @@ export class PaymentComponent implements OnInit {
   }
 
   ngOnInit(): void {   
+    this.busName = localStorage.getItem('busName')
     this.form = new FormGroup({
       cardName: new FormControl('', [Validators.required]),
       cardNo: new FormControl('', [Validators.required, Validators.maxLength(16)]),

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

@@ -1,4 +1,6 @@
-<mat-toolbar>
+
+    <div *ngIf="servicesList.length != 0">
+      <mat-toolbar>
     <span style="text-align: center;">Appointment</span> 
     <h3 style="margin-left:35% ;">{{full_data[0].business[0].busName}}</h3>
  </mat-toolbar>
@@ -44,7 +46,23 @@
     </div>
  </div>
  <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 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>

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

@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { AddServiceComponent } from 'app/appoinment/service-list-details/add-service/add-service.component';
+import { NgxSpinnerService } from 'ngx-spinner';
 import Swal from 'sweetalert2';
 import { EndUserService } from '../end-user.service';
 
@@ -27,9 +28,13 @@ export class ServiceListComponent implements OnInit {
   public servicesList:any = new MatTableDataSource();
   full_data: any=[];
  
-  constructor(public _api:EndUserService, public dialog: MatDialog,public enduser:EndUserService,    private router: Router,) { }
+  constructor(private spinner:NgxSpinnerService,public _api:EndUserService, public dialog: MatDialog,public enduser:EndUserService,    private router: Router,) { 
 
-  ngOnInit(): void {
+     /** spinner starts on init */
+     this.spinner.show();
+  }
+
+  ngOnInit() {
     
     for (let i = 0; i < 7; i++) {
       const random = i % 7;
@@ -67,6 +72,8 @@ export class ServiceListComponent implements OnInit {
   
         console.log(res)
         this.full_data = res['data']
+        this.full_data[0].business[0].busName
+        localStorage.setItem('busName',this.full_data[0].business[0].busName)
         let tmp =[];
 
         res['data'].forEach(element => {
@@ -85,8 +92,13 @@ export class ServiceListComponent implements OnInit {
        ))
    );
       
-       console.log(result)
+       console.log(result,result.length)
-        this.servicesList =  result
+        this.servicesList = result
+
+          setTimeout(() => {
+            /** spinner ends after 5 seconds */
+            this.spinner.hide();
+          }, 1000);
        // this.businessList = res.data;        
       } else{
    

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

@@ -46,10 +46,11 @@
 
  <mat-toolbar>
    <span style="text-align: center;">Appointment</span>
+   <h3 style="margin-left:35% ;">{{busName}}</h3>
 </mat-toolbar>
 <div class="container  mt-1">
    <div fxLayout="row wrap" dir="ltr" fxLayoutAlign="center center">
-      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="85" fxFlex.lg="85" fxFlex.xl="85"  class="m-gap p-gap flx">
+      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100"  class="m-gap p-gap flx">
          <mat-card class="card-mat">
             <div fxLayout="row wrap  mt-2">
                <div  fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
@@ -66,42 +67,55 @@
                         <img src="/assets/images/Time-Icon.svg" alt="Avatar" class="img">  -->
                         <!-- <p class=" mt-1 param"><img src="/assets/images/Time-Icon.svg" alt="Avatar" class="img"> <span class="">{{Currentdate | date:'fullDate'}}</span></p> -->
                      <!-- </p> -->
-                     <p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Oostelijk Handelskade 879 </p>
+                     <p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Business </p>
-                     <span class="span-text">1020BD - Amsterdam, Netherlands</span>
+                     <span class="span-text">{{busName}}</span>
-                     <p class="param"><img src="assets/images/person.svg" alt="Avatar" class="img">Christain Wicks </p>
+                     <p class="param"><img src="assets/images/person.svg" alt="Avatar" class="img"> Practitioner </p>
-                     <span class="span-text">christain@teero.com</span>
+                     <span class="span-text">Dr. {{doctor}}</span>
+                     <p class="param"><img src="assets/images/information.svg" alt="Avatar" class="img"> Service </p>
+                     <span class="span-text"> {{servicesName.servicesName}} ({{servicesName.duration
+                     }} Mins)</span>
                      <p  class="text-color d-flex align-items-start" >
                         <img src="assets/images/information.svg" alt="Avatar" class="img" /> 
-                        <span>This is an on-site interview. Please bring your CV and any other document required for work contract.</span></p>
+                        <span>Date:{{date | date:'longDate'}}</span><br />
+                        <span style="margin-left: 10px;">Time :{{slotTime |  date:'shortTime'}}</span>
+                     </p>
                      
                   </div>
                </div>
                <div style="border: 1px solid #ccc;" fxFlex.md="1"></div>
                <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="64"  fxFlex.lg="64" fxFlex.xl="64" class="p-gap d-flex">
-                  <div  class="p-gap daytime">
+                  
+                  <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
+                     <mat-tab [label]="tab | date:'longDate' " *ngFor="let tab of days">
+                       <div  style="margin: 1%;"> 
+                      <button  *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i }  "  (click)="toggleActive($event,slot,i)" >{{slot | date:'shortTime'}}</button>
+               </div> 
+                     </mat-tab>
+                     <!-- <mat-tab  *ngFor="let day of days" label="{{day}}">{{day}}</mat-tab> -->
+                     <!-- <mat-tab label="Second">Content 2</mat-tab>
+                     <mat-tab label="Third">Content 3</mat-tab> -->
+                   </mat-tab-group>
+                  <!-- <div  class="p-gap daytime">
                      <div class="activeday" (click)="showdays(1)" [class.phase-active]="activeButton === 1">
                         <span class="today-days">Today</span>
                         <span class="days btn btn-primary" (click)="showdays(1)" [class.phase-active]="activeButton === 1"> Monday  </span>
                         <span class="today-days">April05</span>
                      </div>
                    
-                <!-- <div class="flexxx">
+               
-                  <button  *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i,'bookedSlot':checkBooked(slot.startTime | date:'shortTime')  }  "  (click)="toggleActive($event,slot.startTime,i)" >{{slot.startTime | date:'shortTime'}}</button>
-                </div>  -->
                 <div class="line-day"></div>
-                <div class="flexxx">
+                <div class="flexxx"  *ngFor="let slot of slots;let i=index">
-                  <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" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i }  "  (click)="toggleActive($event,slot.startTime,i)" >{{slot | date:'shortTime'}}</button>
                 </div> 
-               </div>
+               </div> -->
-               <div   class="p-gap daytime">
+               <!-- <div   class="p-gap daytime">
                   <div class="activeday" (click)="showdays(2)" [class.phase-active]="activeButton === 2">
                   <span class="today-days">Tomorrow</span>
                   <span class="days btn btn-primary" (click)="showdays(2)" [class.phase-active]="activeButton === 2"> Tuesday  </span>
                   <span class="today-days">April05</span>
                   </div>
-                 <!-- <div class="flexxx">
+                
-                   <button  *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i,'bookedSlot':checkBooked(slot.startTime | date:'shortTime')  }  "  (click)="toggleActive($event,slot.startTime,i)" >{{slot.startTime | date:'shortTime'}}</button>
-                 </div>  -->
                  <div class="flexxx mt-2">
                   <button   mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton buttontimeline" >09:00Am</button>
                 </div> 
@@ -112,9 +126,7 @@
                   <span class="days btn btn-primary" (click)="showdays(3)" [class.phase-active]="activeButton === 3"> Wednesday  </span>
                   <span class="today-days">April05</span>
                   </div>
-                 <!-- <div class="flexxx">
+               
-                   <button  *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i,'bookedSlot':checkBooked(slot.startTime | date:'shortTime')  }  "  (click)="toggleActive($event,slot.startTime,i)" >{{slot.startTime | date:'shortTime'}}</button>
-                 </div>  -->
                  <div class="flexxx mt-2">
                   <button   mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton buttontimeline" >09:00Am</button>
                 </div> 
@@ -125,9 +137,7 @@
                   <span class="days btn btn-primary" (click)="showdays(4)" [class.phase-active]="activeButton === 4"> Thursday  </span>
                   <span class="today-days">April05</span>
                   </div>
-                 <!-- <div class="flexxx">
+                
-                   <button  *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i,'bookedSlot':checkBooked(slot.startTime | date:'shortTime')  }  "  (click)="toggleActive($event,slot.startTime,i)" >{{slot.startTime | date:'shortTime'}}</button>
-                 </div>  -->
                  <div class="flexxx mt-2">
                   <button   mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton buttontimeline" >09:00Am</button>
                 </div> 
@@ -138,14 +148,12 @@
                   <span class="days  btn btn-primary" (click)="showdays(5)" [class.phase-active]="activeButton === 5"> Friday  </span>
                   <span class="today-days">April05</span>
                   </div>
-                 <!-- <div class="flexxx">
+               
-                   <button  *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i,'bookedSlot':checkBooked(slot.startTime | date:'shortTime')  }  "  (click)="toggleActive($event,slot.startTime,i)" >{{slot.startTime | date:'shortTime'}}</button>
-                 </div>  -->
                 
                  <div class="flexxx mt-2">
                   <button   mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton buttontimeline" >09:00Am</button>
                 </div> 
-                </div>
+                </div> -->
                 <!-- <div   class="p-gap">
                   <span class="today-days">Today</span>
                   <div class="days"> Saturday  </div>
@@ -170,11 +178,16 @@
                 </div> -->
                </div>
             </div>
-            <!-- <div class="d-flex justify-content-center mt-3">
+            <div class="d-flex justify-content-center mt-3">
             <button mat-raised-button mat-button-sm  class="mr-1 mb-1 mt-1 btn-red" [ngStyle]="{'background':slot_array.length ==0 ? '#ccc':'#4caf50' }" [disabled]="slot_array.length ==0" (click)="submit()">PROCEED</button>
-         </div> -->
+         </div>
          </mat-card>
       </div>
    </div>
 </div>
+<footer>
+   <p>
+      © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+   </p>
+</footer>
 

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

@@ -372,5 +372,30 @@ h4{
 //     // color: #7a7a7a;
 //   }
 
+p {
+    font-family: Lato;
+  }
+  .main-part {
+    background-color: #fff;
+    margin:20px;
+    padding:10px;
+    vertical-align: middle;
+    display: table-cell;
+  }
+ 
+.mat-tab-group .mat-tab-label {
+    min-width: 209px !important;
+}
+.mat-tab-group {
+    margin-bottom: 48px;
+  }
+  
+footer {
+    background-color: #d1d1d1;
+    height:50px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }
 
    

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

@@ -45,10 +45,19 @@ export class SlotBookingDetailsComponent implements OnInit {
   slotIndex: any;
   bookedAppointment:any=[];
   bookedAppointmentSlot: any=[];
+  days: any=[];
+  busName: any =[];
+  doctor: any=[];
+  servicesName: any=[];
+  user: any=[];
   constructor(private router:Router,private datepipe:DatePipe,public end_user:EndUserService) { 
     this.end_user.appointmentBooked_observable$.subscribe((res) => {
       console.log('booked', res);
       if(res.length>0){
+        this.servicesName = res[0].service[0]
+        this.user = res[0].user[0]
+        this.doctor = res[0].user[0].userName
+        this.getApiData()
         this.bookedAppointment=res[0].appoinment
       }else{
         
@@ -85,6 +94,7 @@ export class SlotBookingDetailsComponent implements OnInit {
     this.workingHours = JSON.parse(this.workingHours)
 
    this.workingHours.forEach((value,index) => {
+    console.log(value) 
    console.log(value[findDate],index) 
    if(value[findDate] != undefined){
      this.getHours = value[findDate]['hours']
@@ -154,10 +164,11 @@ export class SlotBookingDetailsComponent implements OnInit {
     
     // Output the intervals
     console.log(intervals);
-    this.slots = intervals
+    //this.slots = intervals
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
+   
     this.form = new FormGroup({
       workspace: new FormControl('', [Validators.required]),
     });
@@ -182,12 +193,19 @@ export class SlotBookingDetailsComponent implements OnInit {
     //  event.preventDefault();
     this.slotIndex = i
     this.slotTime = param
-    //  if(this.element !== undefined){
+    
-    //    this.element.style.backgroundColor = "#658f9b";       
-    //  } 
-    //  var target = event.currentTarget;
-    //  target.style.backgroundColor = "#0c8f00";
      console.log(this.date,param)
+     let thirtyMinutes = this.servicesName.duration * 60 * 1000; // convert 30 minutes to milliseconds
+      let date1 =  new Date(param);
+      let date2 = new Date(date1.getTime() + thirtyMinutes);
+      console.log(date1);
+      console.log(date2);
+      this.slots.forEach(element => {
+        if(element <date2){
+          console.log(element);
+        }
+      });
+      
      this.slot_array.push({date:this.date,slots:param})
     }
     
@@ -196,19 +214,19 @@ export class SlotBookingDetailsComponent implements OnInit {
       console.log( this.slot_array)
       localStorage.setItem("slotData",JSON.stringify(this.slot_array))
       let URL = this.router.url;
-      console.log(URL)
+      //console.log(URL)
       this.router.navigate([URL+"/cus"])
     }
     checkBooked(param){
      // console.log(param,  this.bookedAppointment)
      this.bookedAppointmentSlot
       this.bookedAppointment.forEach(element => {
-    console.log( param,    new DatePipe('en-US').transform(element.appoinmentSlots, 'shortTime'))
+   // console.log( param,    new DatePipe('en-US').transform(element.appoinmentSlots, 'shortTime'))
     //new DatePipe('en-US').transform(element.appoinmentSlots, 'shortTime');
    // this.bookedAppointmentSlot.push(new DatePipe('en-US').transform(element.appoinmentSlots, 'shortTime'))
         param = param.toString()
         if(new DatePipe('en-US').transform(element.appoinmentSlots, 'shortTime').trim() == param.trim()){
-        console.log("sksjfjdhkfhsdfcgdjsh")
+       // console.log("sksjfjdhkfhsdfcgdjsh")
           return true;
         }else{
           return false;
@@ -218,4 +236,27 @@ export class SlotBookingDetailsComponent implements OnInit {
 
     }
 
+    getApiData(){
+      this.busName = localStorage.getItem('busName')
+      let tmp=[]
+      for(let i=0;i<=5;i++){
+        var someDate = new Date();
+        someDate.setDate(someDate.getDate() + i); //number  of days to add, e.x. 15 days
+        var dateFormated = someDate.toISOString().substr(0,10);
+        console.log(dateFormated);
+        tmp.push(dateFormated)
+      }
+      console.log(tmp)
+      this.days= tmp
+      let params ={"id":this.user.id}
+      this.end_user.getSlots(params).subscribe(res => {
+        if (res.status == 200) {
+          console.log(res)
+          let data = res['data'];
+          this.slots = data
+        }
+      })
+    
+    }
+
 }

ng-seed/src/environments/environment.ts

@@ -7,10 +7,10 @@ export const environment = {
   production: false,
   environmentName: 'Testing Environment',//Localhost Environment.
 // apiEndpoint:'http://venbainfotech.com:5000/api/', 
-// 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://192.168.1.17:8080/api/',
+  apiEndpoint:'http://192.168.1.17:8080/api/',
   // apiEndpoint:'https://api.venbait.in/api/',
   
   //EndUser URL