frontdesk appointment

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

@@ -63,13 +63,21 @@ export class AppoinmentsListComponent implements OnInit {
   ngOnInit(): void {    
     this.recordStatus=false;
     this.user_role = localStorage.getItem('user_role');
-
+    if(this.user_role != 'FRONTDESK'){
+      let param ={"busId":localStorage.getItem('busId'),"userId":localStorage.getItem('user_id')}
+      console.log(param)
+      this.getAppoinmentsList(param)
+    }else{
       let param ={"busId":  localStorage.getItem('busId')}
       console.log(param)
       this.getAppoinmentsList(param)
       this.getCosultantList()
     }
 
+   
+    
+  }
+
   ngAfterViewInit() {
     this.appointmentListSource.paginator = this.paginator;
     console.log(this.appointmentListSource,this.paginator)
@@ -89,7 +97,9 @@ export class AppoinmentsListComponent implements OnInit {
     this._app.getCosultantListDetails(param).subscribe(res => {  
           if (res.status == 200) {   
             console.log(res.data)
-            this.consultants = res.data; 
+            let consultantsList = res.data; 
+            this.consultants = consultantsList.filter(val => val.role == 'PRACTITIONER')
+            console.log(this.consultants)
           } 
           else{ 
             this.consultants=[]; 
@@ -123,7 +133,7 @@ export class AppoinmentsListComponent implements OnInit {
     //   console.log(param)
     // }
     //this._pd.getTabStatusPdDetails(this.tabStatus)
-   
+   console.log(param)
     this._app.getAppoinmentsListDetails(param).subscribe(res => {
 
       if (res.status == 200) { 
@@ -218,8 +228,8 @@ export class AppoinmentsListComponent implements OnInit {
   confirmBox(event,element){  
     console.log(event,element)
     Swal.fire({  
-      title: 'Are you sure want to remove?',  
+      title: 'Are you sure want to Delete?',  
-      text: 'You will not be able to recover this file!',  
+      text: 'You will not be able to recover this Appointment!',  
       icon: 'warning',  
       showCancelButton: true,  
       confirmButtonText: 'Yes, delete it!',  
@@ -256,7 +266,15 @@ export class AppoinmentsListComponent implements OnInit {
     dialogRef.afterClosed().subscribe(result => {
       console.log(result)
       if(result == 0){   
-        this.getAppoinmentsList('')   
+        if(this.user_role != 'FRONTDESK'){
+          let param ={"busId":localStorage.getItem('busId'),"userId":localStorage.getItem('user_id')}
+          console.log(param)
+          this.getAppoinmentsList(param)
+        }else{
+          let param ={"busId":  localStorage.getItem('busId')}
+          console.log(param)
+          this.getAppoinmentsList(param) 
+        }
       }
   
      // this.formAddUpdateAndDelete(result,result.data)
@@ -307,7 +325,15 @@ export class AppoinmentsListComponent implements OnInit {
      this._app.addFormDetails(formValue[0]).subscribe(res => {
       if (res.status == 200) {
         // this.appoinmentsList = res.data;
-        this.getAppoinmentsList('')   
+        if(this.user_role != 'FRONTDESK'){
+          let param ={"busId":localStorage.getItem('busId'),"userId":localStorage.getItem('user_id')}
+          console.log(param)
+          this.getAppoinmentsList(param)
+        }else{
+          let param ={"busId":  localStorage.getItem('busId')}
+          console.log(param)
+          this.getAppoinmentsList(param) 
+        } 
         if(result.event == 'Add'){
           this.notifierService.notify('success', 'Appointment Added Successfully');
          }else if(result.event == 'Update'){

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

@@ -37,17 +37,25 @@ public customerlist_observable$ = this.customerlist.asObservable();
         // ) 
   }
 
-  getServicesMapDetails(addParams): Observable<any> {
+  getServicesListDetails(userId,busId): Observable<any> {  
-    return this._http.post(this.apiUrl + 'getServicesMapDetails', addParams)
+    return this._http.post(this.apiUrl + 'getServicesMapDetails', {busId:busId, userId:userId})
-        // .pipe(
-        // catchError(this.handleError('role', []))
-        // ) 
   }
+  
+  // getServicesMapDetails(addParams): Observable<any> {
+  //   return this._http.post(this.apiUrl + 'getServicesMapDetails', addParams)
+  //       // .pipe(
+  //       // catchError(this.handleError('role', []))
+  //       // ) 
+  // }
   getSlots(Params){
  
     return this._http.post(this.apiUrl + 'getSlots', Params)
   }
 
+  getPractitionerData(id): Observable<any> {  
+    return this._http.post(this.apiUrl + 'getPractitionerInfo', {id:id})
+  }
+  
 
   handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
     throw new Error('Method not implemented.');

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

@@ -25,7 +25,6 @@
        <mat-form-field  appearance="outline" class="mat-pane" *ngIf="user_role != 'FRONTDESK'">
          <mat-label>Practitioner</mat-label>
          <input  matInput placeholder="practitioner" name="practitioner"   formControlName="practitioner" readonly>        
-        
        </mat-form-field> 
        <mat-form-field appearance="outline"  class="mat-pane" *ngIf="user_role == 'FRONTDESK'">
          <mat-label>Practitioner</mat-label>

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

@@ -104,15 +104,18 @@ export class DialogBoxComponent implements OnInit {
   user_role: string;
   consultants: any = [];
   Status:any = [{id:1,value:"Consult"},{id:2,value:"Attend"},{id:1,value:"No Show"},{id:1,value:"Cancel"}]
-  advanced_slot_days: any;
+  advanced_slot_days: any=7;
   slotIndex: any;
   findSlotIndex: any;
+  frontDeskChoosedPractiID: any;
+  practiId: any;
   constructor(private notifierService: NotifierService,private router: Router,private formBuilder: FormBuilder, public _cus:CustomersService,
     public dialogRef: MatDialogRef<DialogBoxComponent>,public _api:ConsultantService, public _con:ConsultantService,
     @Inject(MAT_DIALOG_DATA) public data: UsersData,public _app:AppointmentsService,public end_user:EndUserService) {
     console.log(data);
     this.local_data = {...data};
     this.action = this.local_data.action; 
+   
   }
   get f(){
     return this.form.controls;
@@ -148,7 +151,8 @@ export class DialogBoxComponent implements OnInit {
     ngOnInit() {
 
       let advanceDays = localStorage.getItem('advanced_slot_days')
-     if(advanceDays == 'null'){ 
+      console.log(this.advanced_slot_days,advanceDays)
+     if(advanceDays == 'null' || advanceDays == null){ 
       this.advanced_slot_days = 7
       console.log(this.advanced_slot_days)
      }else{ 
@@ -178,21 +182,25 @@ export class DialogBoxComponent implements OnInit {
       console.log(tmp)
       this.days= tmp    
       console.log(this.days)
-      if(this.action == 'Update'){
-        this.getslotData() 
-      }else{
-        this.getSlots()
-      }
-      
 
       if(this.user_role != 'FRONTDESK'){
         let userId = localStorage.getItem('user_id')
         let busId = localStorage.getItem('busId')
         this.getServicesList(userId, busId)
+
+        if(this.action == 'Update'){
+          this.getslotData('') 
+        }else{
+          this.getSlots()
+        }         
       }else{
         this.getCosultantList()
       }
       
+        
+      
+     
+      
       this.getApiData()
       this.form = new FormGroup({
         busname: new FormControl('', [Validators.required]),
@@ -252,7 +260,7 @@ export class DialogBoxComponent implements OnInit {
         return this.form.controls[controlName].hasError(errorName);
         }
 
-        getslotData(){
+        getslotData(frontDeskPractiUserid){
 
             let findAppointmentDate = this.local_data.appoinmentDate
             this.days.forEach(element => {
@@ -270,68 +278,130 @@ export class DialogBoxComponent implements OnInit {
             console.log(formatDate)
 
             this.dayName = formatDate[0]
-            let userId = localStorage.getItem('user_id')
+            let userId
-            let params ={"id":userId , "day": this.dayName , "addcount": this.clicks}
+            if(this.user_role != 'FRONTDESK'){
+              userId = localStorage.getItem('user_id')
+            }else{
+              userId = frontDeskPractiUserid
+              console.log(frontDeskPractiUserid)
+            }
+           console.log(userId)
+            let params ={"id":userId ,"day": this.dayName ,"addcount": this.clicks}
 
             this.end_user.getSlots(params).subscribe(res => {
             if (res.status == 200) {
                 console.log(res)
                 let data = res['data'];
                 this.slots = data
-                this.slots.forEach(element => {
+            //     this.slots.forEach(element => {
-                console.log(element)
+            //     console.log(element)
-                if(element == this.findSlotIndex[0]){
+            //     if(element == this.findSlotIndex[0]){
-                this.slots.indexOf(element)
+            //     this.slots.indexOf(element)
-                console.log(this.slots.indexOf(element))
+            //     console.log(this.slots.indexOf(element))
-                this.slotIndex = this.slots.indexOf(element)
+            //     this.slotIndex = this.slots.indexOf(element)
 
-            }
+            // }
-            });
+            // });
             }
             })
         }
         
+
         getCosultantList() { 
           let param ={"busId": localStorage.getItem('busId')}
           console.log(param)
           this._app.getCosultantListDetails(param).subscribe(res => {  
                 if (res.status == 200) {   
                   console.log(res.data)
-                  this.consultants = res.data;                  
+                  let consultantsList = res.data; 
+                  this.consultants = consultantsList.filter(val => val.role == 'PRACTITIONER')
+                  console.log(this.consultants)   
+                  if(this.user_role == 'FRONTDESK'){
+                    console.log(this.local_data['ServicesMapDetail.userId'])
+                    this.practiId = this.local_data['ServicesMapDetail.userId']
+                    setTimeout(() => {
+                      this.form.controls['practitioner'].setValue(this.practiId);
+                    }, 500);
+                    // let userId = localStorage.getItem('user_id')
+                    let busId = localStorage.getItem('busId')
+                    this.getServicesList(this.practiId,busId)
+                    this.getslotData(this.practiId)                    
+                   }              
                 } 
                 else{ 
                   this.consultants=[]; 
                 }
               });
         }
+
         getConsultServices(selectedPractititoner){
           console.log(selectedPractititoner)
           let userId = selectedPractititoner.id
           let busId = localStorage.getItem('busId')
           this.getServicesList(userId, busId)
+          this.getPractitionerDetails(userId)
+          this.clicks = 0
+          this.getSlots()
+        } 
+
+        getPractitionerDetails(userId){
+          // let id = localStorage.getItem('user_id')
+          console.log(userId)
+          this.frontDeskChoosedPractiID = userId
+          this._app.getPractitionerData(userId).subscribe(res => {
+                if (res.status == 200) {
+                  console.log(res)
+                  let usersList = res.data[0]; 
+                  localStorage.setItem('practitioner',JSON.stringify(usersList))
+                  console.log(usersList)    
+                      let dataDays = usersList['practitionerInfos'][0].days
+                      localStorage.setItem('advanced_slot_days',dataDays)
+                      this.advanced_slot_days = dataDays
+                      console.log(this.advanced_slot_days) 
+                      let tmp=[]
+                      console.log(this.advanced_slot_days)
+                      for(let i=0;i<=this.advanced_slot_days;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  
+                }
+                })
         }
         
   submit(){
       console.log(this.form.value,this.slotsResult,this.days[this.clicks]);
       // if(this.slotsResult == undefined){
-           
       // }
       if(this.slotsResult.length == 0){
         console.log(this.slotsResult.length == 0)
         this.notifierService.notify('warning', 'Please Select Slots');
         this.form.controls['appoinmentSlots'].clearValidators();
         this.form.controls['appoinmentSlots'].updateValueAndValidity();
-          }  else {
+      }else {
           if (!this.form.valid) {
           return;
           }
-          
         console.log(this.form.value,this.slotsResult,this.days[this.clicks]);
+        let userId
+        if(this.user_role != 'FRONTDESK'){
+          userId = localStorage.getItem('user_id')
+        }else{
+          if(this.action == 'Update'){
+            userId = this.practiId
+          }else{
+            userId = this.frontDeskChoosedPractiID
+          }
           
+        }
         let paramsmap= { 
           "serviceId": ""+this.ServiceId+"",
-             "userId":localStorage.getItem('user_id'),
+          "userId":userId,
-          "busId":  localStorage.getItem('busId')
+          "busId":localStorage.getItem('busId')
         } 
         this.end_user.CreatecusServicesMapDetails(paramsmap).subscribe(res => {
             if (res.status == 200) {
@@ -352,10 +422,7 @@ export class DialogBoxComponent implements OnInit {
               console.log(paramsData)
               this._app.addFormDetails(paramsData).subscribe(res => {
                 if (res.status == 200) {
-
                   if(this.local_data.hasOwnProperty('action')){
-
-    
                     if(this.local_data.action != 'Add'){
                     this.notifierService.notify('success', 'Appointment Rescheduled Successfully');
                     }else{
@@ -368,7 +435,8 @@ export class DialogBoxComponent implements OnInit {
                 }
               })
             }
-    })   }  
+        })  
+     }  
   }
 
 
@@ -387,7 +455,13 @@ export class DialogBoxComponent implements OnInit {
  console.log(formatDate)
 
   this.dayName = formatDate[0]
- let userId = localStorage.getItem('user_id')
+  let userId
+  if(this.user_role != 'FRONTDESK'){
+    userId = localStorage.getItem('user_id')
+  }else{
+    userId = this.frontDeskChoosedPractiID
+  }
+ 
  let params ={"id":userId , "day": this.dayName , "addcount": this.clicks}
 
  this.end_user.getSlots(params).subscribe(res => {
@@ -421,7 +495,12 @@ export class DialogBoxComponent implements OnInit {
  console.log(formatDate)
 
  this.dayName = formatDate[0]
- let userId = localStorage.getItem('user_id')
+ let userId
+ if(this.user_role != 'FRONTDESK'){
+   userId = localStorage.getItem('user_id')
+ }else{
+   userId = this.frontDeskChoosedPractiID
+ }
  let params ={"id":userId , "day": this.dayName , "addcount": this.clicks}
 
  this.end_user.getSlots(params).subscribe(res => {
@@ -445,8 +524,13 @@ export class DialogBoxComponent implements OnInit {
   }
 
   getSlots(){ 
-    let id = localStorage.getItem('user_id')
+    let userId
-    let params ={"id": id,'addcount':0}
+    if(this.user_role != 'FRONTDESK'){
+      userId = localStorage.getItem('user_id')
+    }else{
+      userId = this.frontDeskChoosedPractiID
+    }
+    let params ={"id": userId,'addcount':0}
     this._app.getSlots(params).subscribe((res:any) => {
       if (res.status == 200) {
         console.log(res)
@@ -507,8 +591,9 @@ export class DialogBoxComponent implements OnInit {
     getServicesList(id,busId) {
       console.log(id,busId)
       this.servicesList_array = []
+      let userId = parseInt(id)
       //this._pd.getTabStatusPdDetails(this.tabStatus)
-      this._api.getServicesListDetails(id,busId).subscribe(res => {
+      this._app.getServicesListDetails(userId,busId).subscribe(res => {
             if (res.status == 200) {
               this.servicesList_data = res.data;
               res['data'].forEach(element => {
@@ -523,6 +608,7 @@ export class DialogBoxComponent implements OnInit {
               this.servicesList_array.filter(arr=>{return arr.serviceId ==  this.local_data['ServicesMapDetail.serviceId']}) 
     
               this.duration = this.servicesList_array[0].duration
+              
             } 
            // this.getAssignedList(this.usersList.busId)
           });

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

@@ -1,5 +1,16 @@
 <mat-toolbar>
-    <span style="text-align: center;">Appointment</span>
+    <div fxLayout="row wrap" style="padding:15px 0px;">
+       <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="start center">
+          <button (click)="backRedireact()" mat-icon-button class="backStyle" aria-label="Example icon button with a home icon">
+             <mat-icon>keyboard_backspace</mat-icon>
+           </button>
+       </div>
+       <div  fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80" fxLayoutAlign="center center" class="p-gap">
+          <h3 style="margin-top: 0px !important;"><img class="imgLogo" [src]="image_view(logo)" /> {{busName}}</h3>
+       </div>
+       <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="center center" class="p-gap">
+       </div>
+    </div>    
   </mat-toolbar> 
   
 <div fxLayout="row wrap" fxLayoutAlign="center center" *ngIf="summary==false">
@@ -38,13 +49,15 @@
         </mat-card>
     </div>
 </div>
-<div *ngIf="summary==true">
 
+<div *ngIf="summary==true">
 <div fxLayout="row wrap" fxLayoutAlign="center center">
     <div class="column" fxFlex.xs="60" fxFlex.sm="60" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" fxLayoutAlign="center center">
         <mat-card class="p-2 radius">
            
           <div id="table">
+            <div style="text-align: center;"><img class="imgLogo" [src]="image_view(logo)" /></div>
+            <h6 style="margin-top: 3px;text-align: center;">{{busName}}</h6>
             <h3 class="base-border summaryHeading">Your Booking Summary</h3>              
                   <mat-card-content >
                     <div fxLayout="row wrap" style="margin-bottom: 20px;">
@@ -82,12 +95,22 @@
                             <span>: {{bookingSummary.appoinmentDate}}</span><span style="margin-left: 6px;">{{bookingSummary.appoinmentSlots[0]  | date:'shortTime'}}</span>
                         </div>
                     </div>
+                    <div fxLayout="row wrap" style="margin-bottom: 20px;">
+                        <div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
+                            <span class="head">Customer Name</span>
+                        </div>
+                        <div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
+                            <span>: {{customerBookingDetails.cusName}}</span>
+                            <!-- <br> -->
+                            <!-- <span>gopi@gmail.com</span> -->
+                        </div>
+                    </div>
                     <div fxLayout="row wrap" style="margin-bottom: 20px;">
                         <div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
                             <span class="head">Contact Details</span>
                         </div>
                         <div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
-                            <span>: {{serviceMapDetails.user[0].contactNo}}</span>
+                            <span>: {{customerBookingDetails.phoneNo}}</span>
                             <!-- <br> -->
                             <!-- <span>gopi@gmail.com</span> -->
                         </div>

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

@@ -1,9 +1,27 @@
 .summaryHeading{
     text-align: center;
     border-bottom: 2px solid #000;
-    padding: 20px;
+    padding: 12px 20px;
 }
 
+.base-border:after {
+    content: '';
+    display: inline-block;
+    width: 7px;
+    position: absolute;
+    height: calc(100% + 28px) !important;
+    background: red;
+    left: -35px;
+    top: -60px !important;
+    bottom: 0;
+}
+.imgLogo {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
+
 .head{
     color: #7c7f81;
 }
@@ -22,3 +40,14 @@ mat-toolbar{
  
     margin-top: 5%;
 }
+.backStyle{
+    .mat-icon{
+        color: #ffd400;
+        font-size: 28px;
+        width: 30px;
+        height: 30px;  
+    }
+}
+.mat-toolbar-single-row {
+    display: block !important;
+}

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

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { EndUserService } from '../end-user.service';
 import { Router } from '@angular/router';
 import * as html2pdf from 'html2pdf.js'
+import { environment } from 'environments/environment';
 
 @Component({
   selector: 'app-booking-summary',
@@ -12,7 +13,13 @@ export class BookingSummaryComponent implements OnInit {
   bookingSummary: any=[];
   serviceMapDetails: any=[];
   summary:any= false;
+  busName: any;
+  logo: any;
+  private apiUrl = environment.apiEndpoint;
+  customerBookingDetails: any = [];
   constructor(public end_user:EndUserService,private router:Router,) {
+    this.logo = localStorage.getItem('logo')
+    this.busName = localStorage.getItem('busName')
     this.end_user.summmarylist_observable$.subscribe((res) => {
       console.log('booked', res);
       if(res.length>0){
@@ -33,6 +40,8 @@ export class BookingSummaryComponent implements OnInit {
   ngOnInit(): void {
     this.end_user.summmarylist_observable$.subscribe((res) => {
       console.log('booked2', res);
+      this.customerBookingDetails = res[0].customer[0]
+      console.log(this.customerBookingDetails)
       this.bookingSummary = res[0]
       this.bookingSummary.appoinmentSlots =JSON.parse(this.bookingSummary.appoinmentSlots)
 
@@ -57,7 +66,7 @@ export class BookingSummaryComponent implements OnInit {
 var opt = {
   margin:       1,
   filename:     this.bookingSummary.bookingId+'.pdf',
-  image:        { type: 'jpeg', quality: 0.98 },
+  image:        { type: 'jpg', quality: 0.98 },
   html2canvas:  { scale: 2 },
   jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
 };
@@ -65,4 +74,31 @@ var opt = {
 // New Promise-based usage:
 html2pdf().from(element).set(opt).save();
   }
+
+  backRedireact(){
+    let URL = this.router.url;
+    console.log(URL)
+    let URL_AS_LIST = URL.split('/');
+    console.log(URL_AS_LIST);
+    
+    if(URL_AS_LIST[2] == 'practitioner'){
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]+'/details'])
+      console.log('practitioner')
+    }else{
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
+      console.log('Business')
+    }
+  }
+
+  @HostListener('window:popstate', ['$event'])
+  onPopState(event) {
+    console.log('Back button pressed');
+    this.backRedireact()   
+  }
+
+
+
+image_view(image){    
+    return this.apiUrl+'imageViewer?img_name='+image;
+  } 
 }

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

@@ -1,7 +1,16 @@
-
 <mat-toolbar>
-   <span style="text-align: center;">Appointment</span>
+   <div fxLayout="row wrap" style="padding:15px 0px;">
-   <h3 style="margin-left:35% ;">{{busName}}</h3>
+      <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="start center">
+         <button (click)="backRedireact()" mat-icon-button class="backStyle" aria-label="Example icon button with a home icon">
+            <mat-icon>keyboard_backspace</mat-icon>
+          </button>
+      </div>
+      <div  fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80" fxLayoutAlign="center center" class="p-gap">
+         <h3 style="margin-top: 0px !important;"><img class="imgLogo" [src]="image_view(logo)" /> {{busName}}</h3>
+      </div>
+      <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="center center" class="p-gap">
+      </div>
+   </div>    
  </mat-toolbar>    
 <div class="container  mt-1">
 <!-- <ng-scrollbar class="scrollHV"> -->
@@ -10,7 +19,7 @@
       <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  fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
-                <h3 class="page-h">Practitioner List</h3>
+                <h3 class="page-h" fxLayoutAlign="start center">Practitioner List</h3>
             </div>
             <div  fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap" fxLayoutAlign="end center">
                 <mat-form-field  class="form-field">

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

@@ -5,6 +5,18 @@ $black_30: rgba(0, 0, 0, 0.3);
 // $color_red_orange_approx: #207b68f2;
 $color_red_orange_approx: #4caf50;
 $black_60: rgba(0, 0, 0, 0.6);
+
+.backStyle{
+    .mat-icon{
+        color: #ffd400;
+        font-size: 28px;
+        width: 30px;
+        height: 30px;  
+    }
+}
+.mat-toolbar-single-row {
+    display: block !important;
+}
 .consultant-content {
     padding: 0rem 0.5rem 1rem;
     // padding-bottom: 4rem;
@@ -153,11 +165,17 @@ mat-toolbar{
     background-color: #227f6e;
     color:#fff;
 }
+.imgLogo {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
 .container{
     max-width: 1217px;
     min-width: 375px;
-    margin: 0 auto;
+//     margin: 0 auto;
-    margin-right: 0rem;
+//     margin-right: 0rem;
 }
  .flx{
     flex: 1 1 0%!important;

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { NgxSpinnerService } from 'ngx-spinner';
@@ -21,13 +21,18 @@ export class ConsultantsListComponent implements OnInit {
   busName:any=[]
   private apiUrl = environment.apiEndpoint;
   ServicesMapDetailsList: any=[];
+  logo: any;
   constructor(private router:Router,public dialog: MatDialog,public end_user:EndUserService,private spinner:NgxSpinnerService) {
     this.spinner.show();
   }
-
+  @HostListener('window:popstate', ['$event'])
+  onPopState(event) {
+    console.log('Back button pressed');
+    this.backRedireact()   
+  }
 
   ngOnInit(): void {
-
+    this.logo = localStorage.getItem('logo')
     this.busName = localStorage.getItem('busName')
     let tmp =  localStorage.getItem('cusServiceData') 
      let URL = this.router.url;
@@ -213,4 +218,21 @@ export class ConsultantsListComponent implements OnInit {
     })
   }
 
+  backRedireact(){
+    let URL = this.router.url;
+    console.log(URL)
+    let URL_AS_LIST = URL.split('/');
+    console.log(URL_AS_LIST);
+    
+    if(URL_AS_LIST[2] == 'practitioner'){
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]+'/details'])
+      console.log('practitioner')
+    }else{
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
+      console.log('Business')
+    }
+  }
+
+
+  
 }

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

@@ -1,8 +1,16 @@
- 
+<mat-toolbar>
-
+    <div fxLayout="row wrap" style="padding:15px 0px;">
-        <mat-toolbar>
+       <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="start center">
-            <span style="text-align: center;">Appointment</span>
+          <button (click)="backRedireact()" mat-icon-button class="backStyle" aria-label="Example icon button with a home icon">
-            <h3 style="margin-left:35% ;">{{busName}}</h3>
+             <mat-icon>keyboard_backspace</mat-icon>
+           </button>
+       </div>
+       <div  fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80" fxLayoutAlign="center center" class="p-gap">
+          <h3 style="margin-top: 0px !important;"><img class="imgLogo" [src]="image_view(logo)" />  {{busName}}</h3>
+       </div>
+       <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="center center" class="p-gap">
+       </div>
+    </div>    
   </mat-toolbar>   
           <ng-scrollbar class="scrollHV">
           <div class="container mt-1">

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

@@ -5,11 +5,17 @@ mat-toolbar{
     background-color: #227f6e;
     color:#fff;
 }
+.imgLogo {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
 .container{
     max-width: 1217px;
     min-width: 375px;
-    margin: 0 auto;
+    // margin: 0 auto;
-    margin-right: 0.5rem;
+    // margin-right: 0.5rem;
 }
 ::ng-deep .flx{
     flex: 1 1 0%!important;
@@ -75,4 +81,14 @@ mat-toolbar{
     background: none !important;
     padding: 0px !important;
   }
-  
+  .backStyle{
+    .mat-icon{
+        color: #ffd400;
+        font-size: 28px;
+        width: 30px;
+        height: 30px;  
+    }
+}
+.mat-toolbar-single-row {
+  display: block !important;
+}

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

@@ -1,4 +1,4 @@
-import { Component, NgZone, OnInit } from '@angular/core';
+import { Component, HostListener, NgZone, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, RequiredValidator, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { EndUserService } from '../end-user.service';
@@ -8,6 +8,7 @@ import 'firebase/firestore';
 import { MatDialog } from '@angular/material/dialog';
 import { OptVerifyComponent } from './opt-verify/opt-verify.component';
 import { event } from 'jquery';
+import { environment } from 'environments/environment';
 
  
 var config = {
@@ -36,13 +37,15 @@ export class CustomerInfoComponent implements OnInit {
   verifykey: any;
   busName: string;
   noChangeNo: any = 0;
- 
+  private apiUrl = environment.apiEndpoint; 
+  logo: any;
   constructor(public dialog: MatDialog,private router: Router,private formBuilder: FormBuilder,public _cus:EndUserService, private ngZone: NgZone) {
    // firebase.initializeApp(config)
   }
 
   ngOnInit()  {   
     this.busName = localStorage.getItem('busName')
+    this.logo = localStorage.getItem('logo')
     this.form = new FormGroup({
       cusName: new FormControl('', [Validators.required]), 
       email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
@@ -149,4 +152,29 @@ export class CustomerInfoComponent implements OnInit {
     });
   }
 
+  backRedireact(){
+    let URL = this.router.url;
+    console.log(URL)
+    let URL_AS_LIST = URL.split('/');
+    console.log(URL_AS_LIST);
+    
+    if(URL_AS_LIST[2] == 'practitioner'){
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]+'/details'])
+      console.log('practitioner')
+    }else{
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
+      console.log('Business')
+    }
+  }
+
+  @HostListener('window:popstate', ['$event'])
+  onPopState(event) {
+    console.log('Back button pressed');
+    this.backRedireact()   
+  }
+
+  image_view(image){    
+    return this.apiUrl+'imageViewer?img_name='+image;
+  } 
+
 }

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

@@ -42,10 +42,19 @@
        </div>
    </div>  
    </div> -->
- 
    <mat-toolbar>
-      <span style="text-align: center;">Appointment</span>
+      <div fxLayout="row wrap" style="padding:15px 0px;">
-      <h3 style="margin-left:35% ;">{{busName}}</h3>
+         <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="start center">
+            <button *ngIf="backRouting != 'details'" (click)="backRedireact()" mat-icon-button class="backStyle" aria-label="Example icon button with a home icon">
+               <mat-icon>keyboard_backspace</mat-icon>
+             </button>
+         </div>
+         <div  fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80" fxLayoutAlign="center center" class="p-gap">
+            <h3 style="margin-top: 0px !important;"><img class="imgLogo" [src]="image_view(logo)" />  {{busName}}</h3>
+         </div>
+         <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="center center" class="p-gap">
+         </div>
+      </div>    
     </mat-toolbar>   
    <ng-scrollbar class="scrollHV">
    <div class="doctor-profile">
@@ -58,10 +67,8 @@
                   </div>
                   <div class="heading">
                      <h3>Dr.{{bookedAppointment.userName}}</h3>
-                     <a>{{bookedAppointment.practitionerInfos[0].designtion
+                     <a>{{bookedAppointment.practitionerInfos[0].designtion}}</a><br />
-     
+                     <button mat-raised-button (click)="goToSlotBooking()" style="background-color: #e7c953;">Book Appointment</button>
-                    }}</a><br />
-                     <button mat-raised-button (click)="goToSlotBooking()" style="    background-color: #e7c953;">Book Appointment</button>
                   </div>
                </div>
                <div class="doctor_info">

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

@@ -122,6 +122,30 @@
 
 
 //01/04.23
+.imgLogo {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
+.backStyle{
+    .mat-icon{
+        color: #ffd400;
+        font-size: 28px;
+        width: 30px;
+        height: 30px;  
+    }
+}
+.mat-toolbar-single-row {
+    display: block !important;
+}
+
+.container{
+    max-width: 1217px;
+    min-width: 375px;
+    // margin: 0 auto;
+    // margin-right: 0rem;
+}
 .scrollHV {
     height: calc(100vh - 0px);
     zoom: 90%;

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

@@ -18,13 +18,23 @@ export class DoctorProfileComponent implements OnInit {
   skillsDetails: any = [];
   consultants:any =[];
   ServicesMapDetailsList:any=[];
+  backRouting: any = [];
+  logo: any;
   constructor(private router:Router,public end_user:EndUserService,private spinner:NgxSpinnerService) {
     // this.spinner.show()
+    let URL = this.router.url;
+    console.log(URL)
+    let URL_AS_LIST = URL.split('/');
+    console.log(URL_AS_LIST);
+    this.backRouting = URL_AS_LIST[4]
+    console.log(this.backRouting)
+
     this.getpractitionerList()
    }
 
   ngOnInit(): void {
     this.busName = localStorage.getItem('busName')
+    this.logo = localStorage.getItem('logo')
     let service = localStorage.getItem("servicedetails")
     let serviceDetails = JSON.parse(service)
     console.log(serviceDetails)
@@ -144,4 +154,22 @@ export class DoctorProfileComponent implements OnInit {
     })
   }
 
+  backRedireact(){
+    let URL = this.router.url;
+    console.log(URL)
+    let URL_AS_LIST = URL.split('/');
+    console.log(URL_AS_LIST);
+    
+    if(URL_AS_LIST[2] == 'practitioner'){
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]+'/details'])
+      console.log('practitioner')
+    }else{
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
+      console.log('Business')
+    }
+  }
+
+  
+
+
 }

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

@@ -1,6 +1,16 @@
 <mat-toolbar>
-   <span style="text-align: center;">Appointment</span>
+   <div fxLayout="row wrap" style="padding:15px 0px;">
-   <h3 style="margin-left:35% ;">{{busName}}</h3>
+      <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="start center">
+         <button (click)="backRedireact()" mat-icon-button class="backStyle" aria-label="Example icon button with a home icon">
+            <mat-icon>keyboard_backspace</mat-icon>
+          </button>
+      </div>
+      <div  fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80" fxLayoutAlign="center center" class="p-gap">
+         <h3 style="margin-top: 0px !important;"><img class="imgLogo" [src]="image_view(logo)" />  {{busName}}</h3>
+      </div>
+      <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="center center" class="p-gap">
+      </div>
+   </div>    
  </mat-toolbar>  
  <div class="container mt-1">
 <div fxLayout="row wrap" fxLayoutAlign="center">

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

@@ -5,9 +5,15 @@ mat-toolbar{
 .container{
     max-width: 1217px;
     min-width: 375px;
-    margin: 0 auto;
+    // margin: 0 auto;
     // margin-right: 0rem;
 }
+.imgLogo {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
  .flx{
     flex: 1 1 0%!important;
     display: initial!important;
@@ -31,3 +37,15 @@ mat-toolbar{
   ::ng-deep body{
     background-color: #f7f8f5 !important;
 }
+
+.backStyle{
+    .mat-icon{
+        color: #ffd400;
+        font-size: 28px;
+        width: 30px;
+        height: 30px;   
+    }
+}
+.mat-toolbar-single-row {
+    display: block !important;
+}

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

@@ -3,6 +3,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { local } from 'd3';
 import { EndUserService } from '../end-user.service';
+import { environment } from 'environments/environment';
 
 @Component({
   selector: 'app-payment',
@@ -16,13 +17,15 @@ export class PaymentComponent implements OnInit {
   onSubmitDisable: any = false;
   scrollValue: any;
   clickedValue: any;
+  private apiUrl = environment.apiEndpoint; 
+  logo: any;
+
   constructor(private router:Router,public enduser:EndUserService,  private route: ActivatedRoute, ) { 
     this.enduser.appointmentBooked_observable$.subscribe((res) => {
       console.log('booked', res);
       if(res.length>0){
        this.bookedAppointment_servicemap=res[0].id;
       }else{        
-        
         let URL = this.router.url;
         console.log(URL)
         let URL_AS_LIST = URL.split('/');
@@ -30,24 +33,15 @@ export class PaymentComponent implements OnInit {
         //this.router.navigate(['customer/business/'+URL_AS_LIST[3]])
         this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
       }   
-   
     })
     
 
   }
-  // @HostListener('window:popstate', ['$event'])
+ 
-  // onPopState(event) {
-  //   console.log('Back button pressed');
-  //   let URL = this.router.url;
-  //   console.log(URL)
-  //   let URL_AS_LIST = URL.split('/');
-  //   console.log(URL_AS_LIST);
-  //   //this.router.navigate(['customer/business/'+URL_AS_LIST[3]])
-  //   this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
-  // }
 
   ngOnInit(): void {   
     this.busName = localStorage.getItem('busName')
+    this.logo = localStorage.getItem('logo')
     this.form = new FormGroup({
       cardName: new FormControl('', [Validators.required]),
       cardNo: new FormControl('', [Validators.required, Validators.maxLength(16)]),
@@ -112,9 +106,31 @@ export class PaymentComponent implements OnInit {
        
       }
     }) 
+  }
 
+  backRedireact(){
+    let URL = this.router.url;
+    console.log(URL)
+    let URL_AS_LIST = URL.split('/');
+    console.log(URL_AS_LIST);
     
+    if(URL_AS_LIST[2] == 'practitioner'){
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]+'/details'])
+      console.log('practitioner')
+    }else{
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
+      console.log('Business')
+    }
+  }
 
+  @HostListener('window:popstate', ['$event'])
+  onPopState(event) {
+    console.log('Back button pressed');
+    this.backRedireact()   
+  }
+
+  image_view(image){    
+    return this.apiUrl+'imageViewer?img_name='+image;
   } 
 
 }

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

@@ -1,14 +1,24 @@
 
    
-      <mat-toolbar>
+<mat-toolbar>
-    <span style="text-align: center;">Appointment</span> 
+   <div fxLayout="row wrap" style="padding:15px 0px;">
-    <h3 style="margin-left:35% ;">{{full_data[0].business[0].busName}}</h3>
+      <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="start center">
+         <button *ngIf="backRouting != undefined" (click)="backRedireact()" mat-icon-button class="backStyle" aria-label="Example icon button with a home icon">
+            <mat-icon>keyboard_backspace</mat-icon>
+          </button>
+      </div>
+      <div  fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80" fxLayoutAlign="center center" class="p-gap">
+         <h3 style="margin-top: 0px !important;" *ngIf="full_data.length > 0"><img class="imgLogo" [src]="image_view(full_data[0].business[0].logo)" /> {{full_data[0].business[0].busName}}</h3>
+      </div>
+      <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="center center" class="p-gap">
+      </div>
+   </div>    
  </mat-toolbar>
  <div class="container mt-1">
    <div *ngIf="servicesList.length != 0">
     <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">
-          <h3 class="page-h">Service List</h3>
+          <h3 class="page-h" fxLayoutAlign="start center">Service List</h3>
        </div>
        <div  fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap" fxLayoutAlign="end center">
           <mat-form-field appearance="fill" class="form-field">

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

@@ -4,6 +4,17 @@ $black_30: rgba(0, 0, 0, 0.3);
 $icon-size: 3rem;
 $icon-color: #D8D8D8;
 $main-color: #f44336;
+.mat-toolbar-single-row {
+    display: block !important;
+}
+.backStyle{
+    .mat-icon{
+        color: #ffd400;
+        font-size: 28px;
+        width: 30px;
+        height: 30px;  
+    }
+}
 .Specialties-list-card {
     // background: $white;
     // box-shadow: 0 2px 6px $black_10;
@@ -121,7 +132,12 @@ mat-toolbar{
     background-color: #227f6e;
     color:#fff;
 }
-
+.imgLogo {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
 footer {
     background-color: #d1d1d1;
     height:50px;
@@ -132,8 +148,8 @@ footer {
   .container{
     max-width: 1217px;
     min-width: 375px;
-    margin: 0 auto;
+    // margin: 0 auto;
-    margin-right: 0rem;
+    // margin-right: 0rem;
 }
  .flx{
     flex: 1 1 0%!important;

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
@@ -6,6 +6,7 @@ import { AddServiceComponent } from 'app/appoinment/service-list-details/add-ser
 import { NgxSpinnerService } from 'ngx-spinner';
 import Swal from 'sweetalert2';
 import { EndUserService } from '../end-user.service';
+import { environment } from 'environments/environment';
 
 @Component({
   selector: 'app-service-list',
@@ -27,11 +28,18 @@ export class ServiceListComponent implements OnInit {
   servicesList_array:any =[];
   public servicesList:any = new MatTableDataSource();
   full_data: any=[];
- 
+  backRouting: any = [];
+  private apiUrl = environment.apiEndpoint; 
   constructor(private spinner:NgxSpinnerService,public _api:EndUserService, public dialog: MatDialog,public enduser:EndUserService,    private router: Router,) { 
-
+    let URL = this.router.url;
+    console.log(URL)
+    let URL_AS_LIST = URL.split('/');
+    console.log(URL_AS_LIST);
+    this.backRouting = URL_AS_LIST[4]
+    console.log(this.backRouting)
      /** spinner starts on init */
      this.spinner.show();
+     console.log(this.full_data)
   }
 
   ngOnInit() {
@@ -71,8 +79,10 @@ export class ServiceListComponent implements OnInit {
       if (res.status == 200) {  
         console.log(res)
         this.full_data = res['data']
+        console.log(this.full_data)
         this.full_data[0].business[0].busName
         localStorage.setItem('busName',this.full_data[0].business[0].busName)
+        localStorage.setItem('logo',this.full_data[0].business[0].logo)
         let tmp =[];
         res['data'].forEach(element => {
          // tmp.push(element.service)
@@ -230,4 +240,31 @@ let updatevalue = {  serviceId: row_obj.serviceId,
 
   }
 
+  backRedireact(){
+    let URL = this.router.url;
+    console.log(URL)
+    let URL_AS_LIST = URL.split('/');
+    console.log(URL_AS_LIST);
+    
+    if(URL_AS_LIST[2] == 'practitioner'){
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]+'/details'])
+      console.log('practitioner')
+    }else{
+      this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
+      console.log('Business')
+    }
+  }
+
+  @HostListener('window:popstate', ['$event'])
+  onPopState(event) {
+    console.log('Back button pressed');
+    this.backRedireact()   
+  }
+
+  image_view(image){
+    
+    return this.apiUrl+'imageViewer?img_name='+image;
+  } 
+
+
 }

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

@@ -43,14 +43,20 @@
       </div> -->
    <!-- </div>
  </div> -->
-
  <mat-toolbar>
-   <!-- <button   mat-mini-fab class="fabBack"  href="javascript:history.back()">
+   <div fxLayout="row wrap" style="padding:15px 0px;">
-      <mat-icon>arrow_back</mat-icon>
+      <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="start center">
-    </button> -->
+         <button (click)="backRedireact()" mat-icon-button class="backStyle" aria-label="Example icon button with a home icon">
-   <span style="text-align: center;">Appointment</span>
+            <mat-icon>keyboard_backspace</mat-icon>
-   <h3 style="margin-left:35% ;">{{busName}}</h3>
+          </button>
-</mat-toolbar>
+      </div>
+      <div  fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80" fxLayoutAlign="center center" class="p-gap">
+         <h3 style="margin-top: 0px !important;"><img class="imgLogo" [src]="image_view(logo)" /> {{busName}}</h3>
+      </div>
+      <div  fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="center center" class="p-gap">
+      </div>
+   </div>    
+ </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="100" fxFlex.lg="100" fxFlex.xl="100"  class="m-gap p-gap flx">

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

@@ -6,6 +6,24 @@ $icon-size: 3rem;
 $icon-color: #D8D8D8;
 $main-color: #f44336;
 $tem-color : #217e69; 
+.imgLogo {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
+.mat-toolbar-single-row {
+    display: block !important;
+}
+.backStyle{
+    .mat-icon{
+        color: #ffd400;
+        font-size: 28px;
+        width: 30px;
+        height: 30px;  
+    }
+}
+
 .toggleSize{
     width: 12rem;
     height: 4rem;
@@ -93,7 +111,7 @@ margin-left: -3rem!important;
 .container{
     max-width: 1217px;
     min-width: 375px;
-    margin: 0 auto;
+    // margin: 0 auto;
     // margin-right: 0rem;
 }
  .flx{
@@ -275,9 +293,9 @@ footer {
     float:left;
     }
 
-    .scrollHV {
+    // .scrollHV {
-        //height: calc(100vh - 150px);
+    //     //height: calc(100vh - 150px);
-        // zoom: 90%;
+    //     // zoom: 90%;
-    }
+    // }
 
    

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

@@ -1,9 +1,10 @@
 import { DatePipe } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import * as moment from 'moment';
 import { EndUserService } from '../end-user.service';
+import { environment } from 'environments/environment';
  
 
 @Component({
@@ -55,6 +56,9 @@ export class SlotBookingDetailsComponent implements OnInit {
   user: any=[];
   serviceMapdetails:any =[]
   advanced_slot_days: any;
+  logo: any;
+  private apiUrl = environment.apiEndpoint; 
+
   constructor(private router:Router,private datepipe:DatePipe,public end_user:EndUserService) { 
     this.end_user.appointmentBooked_observable$.subscribe((res) => {
       console.log('booked', res);
@@ -310,6 +314,7 @@ if(this.getHours.length != 0){
 
     getApiData(){
       this.busName = localStorage.getItem('busName')  
+      this.logo = localStorage.getItem('logo')
       
      
       let params ={"id":this.user.id,"addcount":this.clicks}
@@ -382,6 +387,28 @@ if(this.getHours.length != 0){
       
     }
 
+    backRedireact(){
+      let URL = this.router.url;
+      console.log(URL)
+      let URL_AS_LIST = URL.split('/');
+      console.log(URL_AS_LIST);
       
+      if(URL_AS_LIST[2] == 'practitioner'){
+        this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]+'/details'])
+        console.log('practitioner')
+      }else{
+        this.router.navigate(['customer/'+URL_AS_LIST[2]+'/'+URL_AS_LIST[3]])
+        console.log('Business')
+      }
+    }
     
+    @HostListener('window:popstate', ['$event'])
+    onPopState(event) {
+      console.log('Back button pressed');
+      this.backRedireact()   
+    }
+    
+    image_view(image){    
+      return this.apiUrl+'imageViewer?img_name='+image;
+    } 
 }

ng-seed/src/app/end-user/summary/summary.component.scss

@@ -63,3 +63,12 @@ h6{
 ::ng-deep body{
   background-color: #f7f8f5 !important;
 }
+
+.backStyle{
+  .mat-icon{
+      color: #ffd400;
+      font-size: 28px;
+      width: 30px;
+      height: 30px;  
+  }
+}