slot ui and customer validation
This commit is contained in:
bitbucket
parent
9ff289a1b1
commit
08fd5c0836
@ -167,6 +167,8 @@ unavailability(action,obj) {
|
||||
}]
|
||||
}
|
||||
this.practitionerdetails = this.usersList['practitionerInfos'][0]
|
||||
this.practitionerdetails.skills = JSON.parse(this.practitionerdetails.skills)
|
||||
console.log( this.practitionerdetails)
|
||||
this._con.getPractitionerInfo.next( this.usersList['practitionerInfos']);
|
||||
console.log(this.practitionerdetails)
|
||||
this.id=this.practitionerdetails.id
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
<span class="head">Practitioner</span>
|
||||
</div>
|
||||
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
|
||||
<span>: {{serviceMapDetails.user[0].userName}}</span>
|
||||
<span>: Dr.{{serviceMapDetails.user[0].userName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap" style="margin-bottom: 20px;">
|
||||
@ -79,7 +79,7 @@
|
||||
<span class="head">Date & Time</span>
|
||||
</div>
|
||||
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
|
||||
<span>: {{bookingSummary.appoinmentDate | date:'fullDate'}}</span><span style="margin-left: 6px;">({{bookingSummary.appoinmentSlots | date:'shortTime'}})</span>
|
||||
<span>: {{bookingSummary.appoinmentDate | date:'fullDate'}}</span><span style="margin-left: 6px;">({{bookingSummary.appoinmentSlots[0] | date:'shortTime'}})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap" style="margin-bottom: 20px;">
|
||||
|
||||
@ -33,6 +33,7 @@ export class BookingSummaryComponent implements OnInit {
|
||||
this.end_user.summmarylist_observable$.subscribe((res) => {
|
||||
console.log('booked2', res);
|
||||
this.bookingSummary = res[0]
|
||||
this.bookingSummary.appoinmentSlots =JSON.parse( this.bookingSummary.appoinmentSlots)
|
||||
|
||||
// this.end_user.getcusServicesMapDetails()
|
||||
let param ={id:this.bookingSummary.serviceMap}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<div fxLayout="row">
|
||||
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Phone No" type="text" name="phone" formControlName="phoneNo" required>
|
||||
<input matInput placeholder="Phone No" type="text" name="phone" formControlName="phoneNo" [readonly]="verifyOTP == '1'" required>
|
||||
<mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div id="sign-in-button"></div>
|
||||
<div *ngIf="verifyOTP != '1'" fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
|
||||
<button mat-raised-button (click)="getOTP(1)" [disabled]="myError('phoneNo', 'minlength') || myError('phoneNo', 'required')" color="primary" class="mr-1 mb-1">Get OTP</button>
|
||||
<button mat-raised-button type="button" (click)="getOTP(1)" [disabled]="myError('phoneNo', 'minlength') || myError('phoneNo', 'required')" color="primary" class="mr-1 mb-1">Get OTP</button>
|
||||
|
||||
</div>
|
||||
<span *ngIf="verifyOTP == '1'"><mat-icon style="color: #4CAF50;">verified</mat-icon></span>
|
||||
@ -53,12 +53,12 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
|
||||
<button (click)="verify(1)" mat-raised-button class="mr-1 mb-1" matTooltip="VERIFY" matTooltipPosition="below" style="background-color: #4CAF50;color:#fff;">VERIFY</button>
|
||||
<button type="button" (click)="verify(1)" mat-raised-button class="mr-1 mb-1" matTooltip="VERIFY" matTooltipPosition="below" style="background-color: #4CAF50;color:#fff;">VERIFY</button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" *ngIf="verifyOTP != '1'">
|
||||
<button *ngIf="timeLeft != 0" mat-raised-button color="primary">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
||||
<button *ngIf="timeLeft == 0" mat-raised-button color="primary" (click)="resendOTP(1)">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
||||
<button type="button" *ngIf="timeLeft != 0" mat-raised-button color="primary">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
||||
<button type="button" *ngIf="timeLeft == 0" mat-raised-button color="primary" (click)="resendOTP(1)">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -45,11 +45,11 @@ export class CustomerInfoComponent implements OnInit {
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
phoneNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10), Validators.pattern('^[0-9]{10}$')]),
|
||||
address_1: new FormControl('', [Validators.maxLength(50)]),
|
||||
city: new FormControl('', [Validators.maxLength(10)]),
|
||||
state: new FormControl('', [Validators.maxLength(10)]),
|
||||
otp: new FormControl('', [Validators.maxLength(10)]),
|
||||
pincode: new FormControl('',[Validators.maxLength(6)]),
|
||||
address_1: new FormControl('', [ Validators.maxLength(50)]),
|
||||
city: new FormControl('', [ Validators.maxLength(10)]),
|
||||
state: new FormControl('', [ Validators.maxLength(10)]),
|
||||
otp: new FormControl('', [ Validators.maxLength(10)]),
|
||||
pincode: new FormControl('',[ Validators.maxLength(6)]),
|
||||
});
|
||||
}
|
||||
|
||||
@ -60,17 +60,21 @@ export class CustomerInfoComponent implements OnInit {
|
||||
submit(){
|
||||
console.log(this.form.value)
|
||||
console.log('add')
|
||||
if(!this.form.valid){
|
||||
return
|
||||
}
|
||||
let row_obj = this.form.value
|
||||
console.log(row_obj)
|
||||
let addFormData = {
|
||||
cusName: row_obj.cusName,
|
||||
email: row_obj.email,
|
||||
address_1: row_obj.address_1,
|
||||
phoneNo: row_obj.phoneNo,
|
||||
phoneNo: this.phoneNumber.substring(3) ,
|
||||
pincode: row_obj.pincode,
|
||||
state: row_obj.state,
|
||||
city: row_obj.city,
|
||||
};
|
||||
console.log(addFormData)
|
||||
|
||||
this._cus.addCusDetails(addFormData).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
|
||||
@ -68,7 +68,7 @@ export class PaymentComponent implements OnInit {
|
||||
let time = new Date().toLocaleTimeString()
|
||||
let params= {
|
||||
"busId": serviceDetails.busId,
|
||||
"cusId": URL_AS_LIST[8],
|
||||
"cusId": URL_AS_LIST[9],
|
||||
"appoinmentDate": slot_array[0].date,
|
||||
"appoinmentTime": time,
|
||||
"serviceMap": serviceMap,
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
<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">
|
||||
<mat-card class="card-mat">
|
||||
<mat-card class="card-mat"> <ng-scrollbar class="scrollHV">
|
||||
<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">
|
||||
<h4> Slot Availability</h4>
|
||||
@ -74,21 +74,30 @@
|
||||
<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" >
|
||||
<!-- <p class="text-color d-flex align-items-start" >
|
||||
<img src="assets/images/information.svg" alt="Avatar" class="img" />
|
||||
<span>Date:{{date | date:'longDate'}}</span><br />
|
||||
<span style="margin-left: 10px;">Time :{{slotTime | date:'shortTime'}}</span>
|
||||
</p>
|
||||
|
||||
</p> -->
|
||||
<p class="param"><img src="assets/images/Languages.svg" alt="Avatar" class="img">Date : </p>
|
||||
<span class="span-text"> {{date | date:'longDate'}}</span>
|
||||
<p class="param"><img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">Time : </p>
|
||||
<span class="span-text">{{slotTime | date:'shortTime'}}</span>
|
||||
<p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Amount : </p>
|
||||
<span class="span-text"><span class="ex" style="font-size: 17px;padding-bottom: 10px;line-height: 17px;">₹</span> {{user.practitionerInfos[0].days}}</span>
|
||||
</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 fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="64" fxFlex.lg="64" fxFlex.xl="64" class="p-gap d-flex">
|
||||
<div >
|
||||
<div class="innerdivs" > <mat-card class="navStyle" fxLayoutAlign="center center"> <button mat-raised-button (click)="goToSlotBooking2()" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_left</mat-icon></button><span style="width: 150px;text-align: center;">{{check(days) | date:'longDate'}}</span><button mat-raised-button (click)="goToSlotBooking()" *ngIf="clicks < 5" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_right</mat-icon></button></mat-card></div>
|
||||
<div class="innerdivs" > <mat-card class="navStyle" fxLayoutAlign="center center"> <button mat-raised-button (click)="goToSlotBooking2()" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_left</mat-icon></button><span style="width: 150px;text-align: center;">{{check(days) | date:'fullDate'}}</span><button mat-raised-button (click)="goToSlotBooking()" *ngIf="clicks < 5" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_right</mat-icon></button></mat-card></div>
|
||||
<div class="innerdivs" > <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> </div>
|
||||
|
||||
<div class="innerdivs" >
|
||||
<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>
|
||||
|
||||
@ -184,10 +193,8 @@
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</mat-card>
|
||||
|
||||
</ng-scrollbar></mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -414,4 +414,9 @@ footer {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.scrollHV {
|
||||
height: calc(100vh - 150px);
|
||||
// zoom: 90%;
|
||||
}
|
||||
|
||||
|
||||
@ -190,6 +190,7 @@ export class SlotBookingDetailsComponent implements OnInit {
|
||||
|
||||
toggleActive(event:any,param:any,i:any){
|
||||
console.log(event,param,i)
|
||||
this.slot_array =[];
|
||||
// debugger;
|
||||
// event.preventDefault();
|
||||
this.slotIndex = i
|
||||
@ -224,7 +225,7 @@ export class SlotBookingDetailsComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
|
||||
this.slot_array.push({date:this.date,slots:param})
|
||||
this.slot_array.push({date:this.date,slots:filteredTimes})
|
||||
}
|
||||
|
||||
|
||||
@ -232,8 +233,8 @@ 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)
|
||||
this.router.navigate([URL+"/cus"])
|
||||
console.log( JSON.parse(localStorage.getItem("slotData")))
|
||||
this.router.navigate([URL+"/cus"])
|
||||
}
|
||||
checkBooked(param){
|
||||
// console.log(param, this.bookedAppointment)
|
||||
|
||||
@ -10,7 +10,7 @@ export const environment = {
|
||||
// apiEndpoint:'http://192.168.1.20:8080/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.3:8080/api/',
|
||||
// apiEndpoint:'https://api.venbait.in/api/',
|
||||
|
||||
//EndUser URL
|
||||
|
||||
Loading…
Reference in New Issue
Block a user