slot split
This commit is contained in:
surendar.m@watermelon.us
parent
af9645a99b
commit
be28eab8e3
@ -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"])
|
||||
|
||||
|
||||
@ -2,46 +2,42 @@
|
||||
<span style="text-align: center;">Appointment</span>
|
||||
</mat-toolbar>
|
||||
<div class="container mt-1">
|
||||
<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>
|
||||
</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 class="d-flex calender-time">
|
||||
<div class="calender">
|
||||
<mat-card class="demo-inline-calendar-card cardCalender">
|
||||
<mat-calendar [min]="minDate" [max]="maxDate" [(selected)]="selected"></mat-calendar>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div> -->
|
||||
<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">
|
||||
<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 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">
|
||||
<app-summary></app-summary>
|
||||
</div>
|
||||
<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: <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="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">
|
||||
<mat-calendar [min]="minDate" [max]="maxDate" [(selected)]="selected"></mat-calendar>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <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-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlexAlign="center" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" class="p-gap"> -->
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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})
|
||||
}
|
||||
|
||||
@ -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/',
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user