slot issue and end user UI changes

ng-seed/package-lock.json

@@ -9663,6 +9663,14 @@
         }
       }
     },
+    "ngx-bootstrap": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-10.2.0.tgz",
+      "integrity": "sha512-bn5wdvH6QQ2JGu4TgUbozdULBFMxZNPNTgO7dRiosx9FRrFvKcgxkGSgU/xoj+4kP1vgh8zwzaiDfvH/Bfb+Aw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "ngx-color-picker": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-11.0.0.tgz",

ng-seed/package.json

@@ -49,6 +49,7 @@
     "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",

ng-seed/src/app/end-user/consultants/consultants-list.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">
 <!-- <ng-scrollbar class="scrollHV"> -->
@@ -28,7 +29,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 +83,8 @@
  <!-- </ng-scrollbar> -->
 
  </div>
+ <footer>
+   <p>
+      © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+   </p>
+</footer>

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

@@ -188,3 +188,11 @@ 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

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { EndUserService } from '../end-user.service';
+import { environment } from 'environments/environment';
 
 @Component({
   selector: 'app-consultants-list',
@@ -15,11 +16,13 @@ export class ConsultantsListComponent implements OnInit {
   consultants:any =[];
   public filterdata = null;
   bgColorPast: any=[];
+  busName:any=[]
+  private apiUrl = environment.apiEndpoint;
   constructor(private router:Router,public dialog: MatDialog,public end_user:EndUserService) {}
 
 
   ngOnInit(): void {
-    
+    this.busName = localStorage.getItem('busName')
    let tmp =  localStorage.getItem('cusServiceData') 
       let practitioner =  JSON.parse(tmp)
       console.log(practitioner)
@@ -48,6 +51,26 @@ export class ConsultantsListComponent implements OnInit {
   this.consultants = result;
   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 +116,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.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.ts

@@ -67,6 +67,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 => {

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