diff --git a/ng-seed/src/app/end-user/consultants/consultants-list.component.ts b/ng-seed/src/app/end-user/consultants/consultants-list.component.ts index 501ac03..df6632b 100644 --- a/ng-seed/src/app/end-user/consultants/consultants-list.component.ts +++ b/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,11 +13,11 @@ 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 { - let tmp = localStorage.getItem('cusServiceData') + let tmp = localStorage.getItem('cusServiceData') let practitioner = JSON.parse(tmp) console.log(practitioner) let arr_val=[] @@ -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"]) diff --git a/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html b/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html index 7b7fa91..126b2f0 100644 --- a/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html +++ b/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html @@ -2,46 +2,42 @@ Appointment
- -
-
-

Slot Availability

-
-
-
Date & Time: {{chooseDate | date:'mediumDate'}} - {{slotTime}}
-
-
-
-
- - - Choose a date - - - - - -
-
- - - - -
- - - -
- -
- -
- -
+
+
+ +
+
+

Slot Availability

+
+
+
Date: {{Currentdate | date:'fullDate'}}
+
+
+
+
+ + + +
+ +
+ +
+
+ +
+
diff --git a/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.scss b/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.scss index 85659d1..21a4aa4 100644 --- a/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.scss +++ b/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.scss @@ -1,5 +1,31 @@ $color_red_orange_approx: #107c14; -$white: #fff; +$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{ - background-color: #658F9B; +.clickedSlot{ + color: white !important; + background-color: brown !important; + cursor: pointer !important; + width: 6rem; +} +.bookedSlot{ + background-color: darkgrey; color: white; + width: 6rem; + cursor: no-drop !important; +} +.primary{ + background-color: #00866e00; + color: brown; + width: 6rem; + border: 1px solid brown; + cursor: pointer; } ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { background-color: #658F9B!important; @@ -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) { diff --git a/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.ts b/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.ts index ea7bd95..3dd7e62 100644 --- a/ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.ts +++ b/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); - const endTime = moment(this.getHours[0].endTime); + function convertTime12to24 (time12h) { + 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){ - this.element.style.backgroundColor = "#658f9b"; - } - var target = event.currentTarget; - target.style.backgroundColor = "#0c8f00"; + // if(this.element !== undefined){ + // this.element.style.backgroundColor = "#658f9b"; + // } + // var target = event.currentTarget; + // target.style.backgroundColor = "#0c8f00"; console.log(this.date,param) this.slot_array.push({date:this.date,slots:param}) } diff --git a/ng-seed/src/environments/environment.ts b/ng-seed/src/environments/environment.ts index 3569af2..7409a9d 100644 --- a/ng-seed/src/environments/environment.ts +++ b/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/', };