Appointment/appointments_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of bitbucket.org:venbainformationtechnology/appointments_frontend

Browse Source
This commit is contained in:
surendar.m@watermelon.us 2023-04-11 13:14:37 +05:30
commit 7c6eb8b60d
8 changed files with 412 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ng-seed/src/app/appoinment/business/add-business/add-business.component.ts
View File

@ -121,7 +121,7 @@ export class AddBusinessComponent implements OnInit {
this.formData.append('state', tmp.state);
this.formData.append('city', tmp.city);
console.log(this.formData)
this.dialogRef.close({event:this.action,data:this.formData});
this.dialogRef.close({event:this.action,data:this.formData,admincheck:tmp.admin_checked});
// console.log(this.form.value);
// console.log(this.action,this.local_data)
}

2
ng-seed/src/app/appoinment/business/business-list/business-list.component.ts
View File

@ -188,7 +188,7 @@ export class BusinessListComponent implements OnInit {
if (res.status == 200) {
// this.customersList = res.data;
this.getBusinessList()
if(result.event == 'Add' && row_obj.admin_checked == true){
if(result.event == 'Add' && result.admincheck == true){
localStorage.setItem('go_admin','0')
localStorage.setItem('busName',row_obj.busName)
this.router.navigate(['/users',])

16
ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.ts
View File

@ -126,6 +126,22 @@ workingDialog(action,obj) {
if (res.status == 200) {
this.usersList = res.data[0];
console.log(this.usersList)
if(this.usersList['practitionerInfos'].length==0){
this.usersList['practitionerInfos'] =[
{
"exp":null,
"qualification":null,
"days": null,
"languages": null,
"workingHours": "[{\"sunday\":{\"hours\":[{\"startTime\":\"09:30 am\",\"endTime\":\"09:30 pm\",\"day\":\"sunday\",\"value\":null}],\"breaks\":[]}},{\"monday\":{\"hours\":[{\"startTime\":\"09:00 am\",\"endTime\":\"09:30 pm\",\"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.practitionerdetails = this.usersList['practitionerInfos'][0]
this._con.getPractitionerInfo.next( this.usersList['practitionerInfos']);
console.log(this.practitionerdetails)

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

@ -1,4 +1,4 @@
<mat-toolbar>
<!-- <mat-toolbar>
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div class="container mt-1">
@ -14,7 +14,7 @@
</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 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">
@ -31,15 +31,150 @@
</div>
<div fxFlexAlign="center" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" class="p-gap"> -->
<!-- //<div *ngFor="let slot of slots;let i=index"> -->
<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>
<!-- <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> -->
<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>
<!-- <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>
</div>
</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> -->
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
</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">
<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">
<h4> Slot Availability</h4>
</div>
</div>
<div fxLayout="row wrap" style="height:100%;">
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="35" fxFlex.lg="35" fxFlex.xl="35" class="p-gap">
<div class="inline">
<p class="text-color">Teero would like to schedule an interview with you! Pick a time & date.</p>
</div>
<div class="">
<!-- <p class="param">
<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>
<span class="span-text">1020BD - Amsterdam, Netherlands</span>
<p class="param"><img src="assets/images/person.svg" alt="Avatar" class="img">Christain Wicks </p>
<span class="span-text">christain@teero.com</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>
</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">
<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">
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:00Am</button>
</div>
</div>
<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>
</div>
<div class="p-gap daytime">
<div class="activeday" (click)="showdays(3)" [class.phase-active]="activeButton === 3">
<span class="today-days">Next Week</span>
<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>
</div>
<div class="p-gap daytime" >
<div class="activeday mat-margin" (click)="showdays(4)" [class.phase-active]="activeButton === 4">
<span class="today-days"></span>
<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>
</div>
<div class="p-gap daytime" >
<div class="activeday mat-margin" (click)="showdays(5)" [class.phase-active]="activeButton === 5">
<span class="today-days"></span>
<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 class="p-gap">
<span class="today-days">Today</span>
<div class="days"> Saturday </div>
<span class="today-days">April05</span>
<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">
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton" >09:00Am</button>
</div>
</div> -->
<!-- <div class="p-gap">
<span class="today-days">Today</span>
<div class="days"> Sunday </div>
<span class="today-days">April05</span>
<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">
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton" >dfgdgf</button>
</div>
</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>
</div>
</div>
</div>
</div>

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

@ -1,3 +1,145 @@
// $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;
// margin-top: -3rem;
// float: right;
// }
// .calender{
// margin-left: -1rem;
// padding-right: 6rem;
// }
// .cardCalender{
// width: 140%;
// }
// ::ng-deep .mat-tab-label {
// margin-left: -3rem!important;
// }
// .img{
// width: 50px;
// }
// .btn-red {
// // background-color: #4caf50 !important;
// color: $white;
// // border: 1px solid $color_red_orange_approx;
// float: right;
// }
// .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;
// }
// // ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
// // width: 250%;
// // }
// .success {
// background: #fff;
// box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
// padding: 5px;
// color: #0087ba;
// font-weight: 600;
// border-radius: 10px;
// }
// mat-toolbar{
// background-color: #227f6e;
// color:#fff;
// }
// .container{
// max-width: 1217px;
// min-width: 375px;
// margin: 0 auto;
// // margin-right: 0rem;
// }
// .flx{
// flex: 1 1 0%!important;
// display: initial!important;
// }
// .card-mat{
// // max-width: 100%;
// min-width: -webkit-fill-available;
// padding: 1rem !important;
// }
// @media only screen and (max-width: 600px) {
// h3{
// font-size: 20px;
// margin-top: 2rem;
// }
// .card-mat{
// max-width: 95%;
// }
// .container{
// display: flow-root!important;
// }
// .img {
// margin-right: 2rem;
// margin-left: 1rem;
// }
// .img-sun{
// margin-right: 2rem;
// }
// .img-set{
// margin-right: 2rem;
// }
// }
// ::ng-deep body{
// background-color: #f7f8f5 !important;
// }
// .dateTime{
// margin:0 !important;
// color: #0087ba;
// font-weight: 600;
// }
// .datecolor{
// color: black !important;
// font-weight: 500 !important;
// }
$color_red_orange_approx: #107c14;
$white: #fff;
$black_10: rgba(0, 0, 0, 0.1);
@ -11,17 +153,15 @@ $tem-color : #217e69;
height: 4rem;
border-radius: 5px !important;
}
[mat-raised-button][mat-button-sm] {
font-size: 15px;
line-height: 45px;
padding: 0 20px;
[mat-raised-button][mat-button-sm] {
padding: 0 ;
}
.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;
box-shadow: 0 0 8px $tem-color;
transform: scale(1.05);
}
@ -51,11 +191,14 @@ margin-left: -3rem!important;
// border: 1px solid $color_red_orange_approx;
float: right;
}
.cursor{
cursor: pointer !important;
}
.clickedSlot{
color: white !important;
background-color: brown !important;
cursor: pointer !important;
width: 6rem;
width: auto;
}
.bookedSlot{
background-color: darkgrey;
@ -66,7 +209,7 @@ margin-left: -3rem!important;
.primary{
background-color: #00866e00;
color: brown;
width: 6rem;
width: auto;
border: 1px solid brown;
cursor: pointer;
}
@ -130,11 +273,104 @@ margin-left: -3rem!important;
background-color: #f7f8f5 !important;
}
.dateTime{
margin:0 !important;
// margin:0 !important;
color: #0087ba;
font-weight: 600;
}
.datecolor{
color: black !important;
font-weight: 500 !important;
}
}
.inline{
border-bottom: 1px solid #ccc;
}
.img{
width: 20px;
margin-right: 1.5rem;
}
.param{
font-size: 14px;
font-weight: 600;
// margin-left: 2rem;
margin-bottom: 8px;
}
.span-text{
font-size: 14px;
font-weight: 500;
margin-left: 2.8rem;
color: #7a7a7a;
}
.text-color{
color: #7a7a7a;
}
h4{
color: #227f6e;;
}
.scrollHV {
height: calc(100vh - 105px);
}
.flexxx{
flex-direction: column;
display: flex;
// margin-top: 1rem;
// border-top:1px solid #ccc;
}
.days{
// color: #000;
font-size: 14px;
font-weight: 600;
padding-bottom: 5px;
padding-top: 5px;
}
.today-days{
font-size: 14px;
color: #7a7a7a;
}
.margin-days{
color: #000;
margin-top: 20px!important;
}
.daytime{
cursor: pointer;
// float: left;
display: block;
// color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
// font-size: 17px;
}
.line-day{
border-top: 1px solid #ccc;
width: 683%;
margin-top: 23px;
}
.mat-margin{
margin-top: 23px;
}
.activeday{
padding: 5px;
border-radius: 5px;
}
.daytime .activeday:hover {
// background: #7a7a7a;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
// padding: 5px;
// color: #7a7a7a;
}
.phase-active{
background-color: #cef1eb !important;
color: #227f6e;
// color: #7a7a7a;
}
// .phase-active:hover {
// box-shadow: 0 4px 8px 0 rgba(228, 12, 12, 0.2);
// transition: 0.3s;
// // color: #7a7a7a;
// }

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

@ -12,6 +12,7 @@ import { EndUserService } from '../end-user.service';
providers:[DatePipe]
})
export class SlotBookingDetailsComponent implements OnInit {
activeButton
minDate: Date;
maxDate: Date;
chooseDate:Date | null;
@ -171,6 +172,10 @@ export class SlotBookingDetailsComponent implements OnInit {
// console.log(this.form.value);
// }
showdays(event){
this.activeButton = event;
}
toggleActive(event:any,param:any,i:any){
console.log(event,param,i)
// debugger;

1
ng-seed/src/assets/images/information.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="#217e69"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 383 B

1
ng-seed/src/assets/images/person.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM17.3628 15.2332C20.4482 16.0217 22.7679 18.7235 22.9836 22H20C20 19.3902 19.0002 17.0139 17.3628 15.2332ZM15.3401 12.9569C16.9728 11.4922 18 9.36607 18 7C18 5.58266 17.6314 4.25141 16.9849 3.09687C19.2753 3.55397 21 5.57465 21 8C21 10.7625 18.7625 13 16 13C15.7763 13 15.556 12.9853 15.3401 12.9569Z" fill="#217e69"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 584 B