slot split

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

@@ -1,6 +1,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';
 
 @Component({
   selector: 'app-consultants-list',
@@ -12,7 +13,7 @@ export class ConsultantsListComponent implements OnInit {
   name: string;
   consultants:any =[];
   public filterdata = null;
-  constructor(private router:Router,public dialog: MatDialog) {}
+  constructor(private router:Router,public dialog: MatDialog,public end_user:EndUserService) {}
 
 
   ngOnInit(): void {
@@ -63,6 +64,10 @@ export class ConsultantsListComponent implements OnInit {
     serviceDetails.userId = ""+param.id+""
 
     localStorage.setItem("servicedetails",JSON.stringify(serviceDetails))
+
+    // let tmp =  localStorage.getItem('cusServiceData')
+    // console.log(JSON.parse(tmp))
+    // this.end_user.getBookedAppointment.next(tmp.appoinment)
    // console.log(URL+"/"+data.randStr+"/practitioner")
     this.router.navigate([URL+"/slot"])
  

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

@@ -2,17 +2,19 @@
     <span style="text-align: center;">Appointment</span>
  </mat-toolbar>
  <div class="container  mt-1">
+   <div fxLayout="row wrap" dir="ltr">
+      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" 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">
                   <h3>Slot Availability</h3>
                </div>
                <div  fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
-             <h6 class="dateTime">Date & Time: <span class="datecolor">{{chooseDate | date:'mediumDate'}} - {{slotTime}}</span></h6>
+                  <h6 class="dateTime">Date: <span class="datecolor">{{Currentdate | date:'fullDate'}}</span></h6>
                </div>
             </div>
             <div fxLayout="row wrap" fxLayoutAlign="center center">
-          <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="40" fxFlex.xl="40" class="p-gap">
+               <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="p-gap">
                   <!-- <div class="d-flex calender-time">
                      <div class="calender">
                         <mat-card class="demo-inline-calendar-card cardCalender">
@@ -20,28 +22,22 @@
                         </mat-card>
                      </div>
                   </div> -->
-             <mat-form-field class="example-full-width" appearance="outline" style="width: 100%;">
+                  <!-- <mat-form-field class="example-full-width" appearance="outline" style="width: 100%;">
                      <mat-label>Choose a date</mat-label>
                      <input matInput [min]="minDate" [max]="maxDate" [(ngModel)]="chooseDate" [matDatepicker]="picker">
-               <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
                      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                      <mat-datepicker #picker></mat-datepicker>
                   </mat-form-field>
                </div>
-          <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" class="p-gap">             
+               <div fxFlexAlign="center" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" class="p-gap">   -->
-            <button mat-raised-button mat-button-sm  class="mr-1 mb-1 mt-1 primary" (click)="toggleActive($event,'9.30 AM')">9:00AM</button>
+                     <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.startTime,i)">{{slot.startTime | date:'shortTime'}}</button>
-            <button mat-raised-button mat-button-sm  class="mr-1 mb-1 primary"  (click)="toggleActive($event,'9.30 AM')">9:30AM</button>
-            <button mat-raised-button mat-button-sm  class="mr-1 mb-1 primary">10:00AM</button>
-            <button mat-raised-button mat-button-sm  class="mr-1 mb-1 primary">10:30AM</button>
-            <button mat-raised-button mat-button-sm  class="mr-1 mb-1 primary">11:00AM</button><br>
-            <button mat-raised-button mat-button-sm  class="mr-1 mb-1 primary">11:30AM</button>
-            <button mat-raised-button mat-button-sm  class="mr-1 mb-1 primary">12:00AM</button>
-            <button mat-raised-button mat-button-sm  class="mr-1 mb-1 primary">12:30AM</button>                
                </div>
                <button mat-raised-button mat-button-sm  class="mr-1 mb-1 mt-1 btn-red"  (click)="submit()">PROCEED</button>
             </div>
          </mat-card>
-    <div  fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap flx" fxLayoutAlign="end center">
+         </div>
+      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap flx" fxLayoutAlign="end center">
          <app-summary></app-summary>
       </div>
    </div>
+ </div>

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

@@ -1,5 +1,31 @@
 $color_red_orange_approx: #107c14;
 $white: #fff; 
+$black_10: rgba(0, 0, 0, 0.1);
+$black_30: rgba(0, 0, 0, 0.3);
+$icon-size: 3rem;
+$icon-color: #D8D8D8;
+$main-color: #f44336;
+$tem-color : #217e69; 
+.toggleSize{
+    width: 12rem;
+    height: 4rem;
+    border-radius: 5px !important;
+}
+[mat-raised-button][mat-button-sm] {
+    font-size: 15px;
+    line-height: 45px;
+    padding: 0 20px;
+}
+.hoverButton{
+    background: $white;
+    // box-shadow: 0 2px 6px $tem-color;
+    transition: all 0.1s ease-in-out 0s;
+    &:hover {
+        box-shadow: 0 0 21px $tem-color;
+        
+        transform: scale(1.05);
+    }
+}
 .button{
     margin-bottom: 1rem;
     background-color: #ffff !important;
@@ -20,14 +46,29 @@ margin-left: -3rem!important;
     width: 50px;
 }
 .btn-red {
-    background-color: $color_red_orange_approx;
+    background-color: #4caf50 !important;
     color: $white;
-    border: 1px solid $color_red_orange_approx;
+    // border: 1px solid $color_red_orange_approx;
     float: right;
 } 
-.primary{
+.clickedSlot{
-    background-color: #658F9B;
+    color: white !important;
+    background-color: brown !important;
+    cursor: pointer !important;
+    width: 6rem;
+}
+.bookedSlot{
+    background-color: darkgrey;
     color: white;
+    width: 6rem;
+    cursor: no-drop !important;
+}
+.primary{
+    background-color: #00866e00;
+    color: brown;
+    width: 6rem;
+    border: 1px solid brown;
+    cursor: pointer;
 }
 ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
     background-color: #658F9B!important;
@@ -52,14 +93,15 @@ margin-left: -3rem!important;
     max-width: 1217px;
     min-width: 375px;
     margin: 0 auto;
-    margin-right: 0rem;
+    // margin-right: 0rem;
 }
  .flx{
     flex: 1 1 0%!important;
     display: initial!important;
 }
 .card-mat{
-    max-width: 66%;
+    // max-width: 100%;
+    min-width: -webkit-fill-available;
     padding: 1rem !important;
 }
 @media only screen and (max-width: 600px) {

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

@@ -17,6 +17,7 @@ export class SlotBookingDetailsComponent implements OnInit {
   slotTime:any;
   form: FormGroup;
   local_data:any;
+  pipe = new DatePipe('en-US'); 
   element: HTMLElement;
   slot_array:any=[];
   selected: Date | null;
@@ -37,6 +38,9 @@ export class SlotBookingDetailsComponent implements OnInit {
   ];
   workingHours: any;
   getHours: any;
+  slots: any[];
+  public Currentdate: Date;
+  slotIndex: any;
   constructor(private router:Router,private datepipe:DatePipe) { 
      // Set the minimum to January 1st 20 years in the past and December 31st a year in the future.
      const currentYear:any = new Date();
@@ -66,11 +70,40 @@ export class SlotBookingDetailsComponent implements OnInit {
      let getDuration = JSON.parse(localStorage.getItem('servicedetails'))
      console.log(getDuration.duration)
 
-     const startTime = moment(this.getHours[0].startTime);
+     function convertTime12to24  (time12h)  {
-     const endTime = moment(this.getHours[0].endTime);
+      const [time, modifier] = time12h.split(' ');
+    
+      let [hours, minutes] = time.split(':');
+    
+      if (hours === '12') {
+        hours = '00';
+      }
+    
+      if (modifier === 'pm') {
+        hours = parseInt(hours, 10) + 12;
+      }
+    
+      return `${hours}:${minutes}`;
+    }
+    
+    console.log(convertTime12to24(this.getHours[0].startTime));
+
+    this.Currentdate = new Date();
+     console.log(this.Currentdate.toISOString().slice(0,10));
+     let todayDate = this.Currentdate.toISOString().slice(0,10)
+     let startmomentDate = todayDate + 'T' + convertTime12to24(this.getHours[0].startTime) + ':00'
+     console.log(startmomentDate)
+     let endmomentDate = todayDate + 'T' + convertTime12to24(this.getHours[0].endTime) + ':00'
+
+    //  let fristIndex = this.getHours[0].startTime.split(':')
+    //  console.log(fristIndex[0])
+    //  let secondIndex = fristIndex[1].endTime.split('')
+
+     const startTime = moment(startmomentDate);
+     const endTime = moment(endmomentDate);
      
      // Define the interval duration in minutes
-     const intervalDurationInMinutes = 30;
+     const intervalDurationInMinutes = getDuration.duration;
      
      // Define an array to store the intervals
      const intervals = [];
@@ -93,7 +126,17 @@ export class SlotBookingDetailsComponent implements OnInit {
      
      // Output the intervals
      console.log(intervals);
+     this.slots = intervals
      
+    //  this.slots = []
+    //  intervals.forEach(element => {
+    //   console.log(element.startTime)
+    //   this.slots.push(element.service)
+    //   //  element.startTime.forEach(e => {
+    //   //    console.log(e)
+    //   //  });
+     
+    //  });
     // const timeSlices = splitTime(this.getHours[0].startTime,this.getHours[0].endTime,getDuration.duration); 
    
 
@@ -115,15 +158,17 @@ export class SlotBookingDetailsComponent implements OnInit {
   //   console.log(this.form.value);
   // }
 
-  toggleActive(event:any,param:any){
+  toggleActive(event:any,param:any,i:any){
+    console.log(event,param,i)
     // debugger;
     //  event.preventDefault();
+    this.slotIndex = i
     this.slotTime = param
-     if(this.element !== undefined){
+    //  if(this.element !== undefined){
-       this.element.style.backgroundColor = "#658f9b";       
+    //    this.element.style.backgroundColor = "#658f9b";       
-     } 
+    //  } 
-     var target = event.currentTarget;
+    //  var target = event.currentTarget;
-     target.style.backgroundColor = "#0c8f00";
+    //  target.style.backgroundColor = "#0c8f00";
      console.log(this.date,param)
      this.slot_array.push({date:this.date,slots:param})
     }

ng-seed/src/environments/environment.ts

@@ -6,5 +6,5 @@
 export const environment = {
   production: false,
   environmentName: 'Testing Environment',//Localhost Environment.
-  apiEndpoint:'http://venbainfotech.com:5000/api/',
+  apiEndpoint:'http://192.168.1.20:8080/api/',
 };