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

slot

Browse Source
This commit is contained in:
surendar.m@watermelon.us 2023-03-30 18:34:46 +05:30
parent 53a84623e4
commit af9645a99b
19 changed files with 242 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ng-seed/src/app/end-user/booking-summary/booking-summary.component.scss
View File

@ -10,4 +10,7 @@
mat-toolbar{
background-color: #227f6e;
color:#fff;
}
::ng-deep body{
background-color: #f7f8f5 !important;
}

4
ng-seed/src/app/end-user/business-centers/centers-list.component.scss
View File

@ -117,4 +117,8 @@ $black_60: rgba(0, 0, 0, 0.6);
mat-icon{
color: #979797;
font-size: 16px;
}
::ng-deep body{
background-color: #f7f8f5 !important;
}

131
ng-seed/src/app/end-user/consultants/consultants-list.component.html
View File

@ -2,72 +2,73 @@
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div class="container mt-1">
<div fxLayout="row wrap">
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
<h3 class="page-h">Practitioner List</h3>
</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap search-mat" fxLayoutAlign="end center">
<mat-form-field class="form-field">
<mat-label>Search practitioner</mat-label>
<input type="text" [(ngModel)]="filterdata" matInput placeholder="Search Service">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</div>
</div>
<div class="container mt-1">
<!-- <ng-scrollbar class="scrollHV"> -->
<div fxLayout="row wrap mt-2 mb-2" class="flexRow">
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap" *ngFor="let consultant of consultants | searchFilter:filterdata : 'consultants'">
<div class="consultant-list-card">
<div class="consultant-content">
<div class="pad-wrap d-flex">
<div class="consultant-img">
<img src="https://newassets.apollo247.com/specialties/ic_oncology.png " alt="Online Doctor Consultation - Medical Oncology" style="width: 40px;">
<!-- <img src="{{consultant.img}}" style="width: 40px;"> -->
<div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" class="m-gap p-gap">
<div fxLayout="row wrap">
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<h3 class="page-h">Practitioner List</h3>
</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap" fxLayoutAlign="end center">
<mat-form-field class="form-field">
<mat-label>Search practitioner</mat-label>
<input type="text" [(ngModel)]="filterdata" matInput placeholder="Search Service">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap mt-2 mb-2" class="flexRow">
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap" *ngFor="let consultant of consultants | searchFilter:filterdata : 'consultants'">
<div class="consultant-list-card" (click)="goToSlotBooking(consultant)">
<div class="consultant-content">
<div class="pad-wrap d-flex">
<div class="consultant-img">
<img src="https://newassets.apollo247.com/specialties/ic_oncology.png " alt="Online Doctor Consultation - Medical Oncology" style="width: 40px;">
<!-- <img src="{{consultant.img}}" style="width: 40px;"> -->
</div>
<div class="consultant-card-cover">
<div>
<div class="text-center consultant-thumb">
<img class="img-responsive img-circle" src="assets/images/face4.jpg" width="120" height="120" alt="user list image">
</div>
</div>
</div>
<div class="consultant-profile">
<h5 class="text-primary">{{consultant.userName}}</h5>
<span class="silk-block consultant-span">{{consultant.practitionerInfos[0].designtion
|| "ENT" }}</span><br>
<span class="silk-block mb-1 consultant-year">{{consultant.practitionerInfos[0].exp || null}}</span><br>
<span class="silk-block mb-1 consultant-qualification">{{consultant.practitionerInfos[0].qualification || null}}</span><br>
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.practitionerInfos[0].fees || 100}}</span> </span><br>
</div>
</div>
<span class="d-flex mb">
<mat-icon class="mt-1">transcribe</mat-icon>
<span class="mt-1 pl-1 consultant-language">{{consultant.practitionerInfos[0].languages || ""}}</span>
</span>
<span class="d-flex mb">
<mat-icon>location_on</mat-icon>
<span class="consultant-language pl-1">{{consultant.city}}</span>
</span>
<span class="d-flex mb">
<mat-icon>access_time</mat-icon>
<span class="consultant-language pl-1">{{consultant.time}}</span>
</span>
<!-- <div class="align-self-center">
<button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
<span class="material-icons"> bookmark_add </span><span class="button-text">Book Appoinment</span>
</button>
</div> -->
</div>
</div>
<div class="consultant-card-cover">
<div>
<div class="text-center consultant-thumb">
<img class="img-responsive img-circle" src="assets/images/face4.jpg" width="120" height="120" alt="user list image">
</div>
</div>
</div>
<div class="consultant-profile">
<h5 class="text-primary">{{consultant.userName}}</h5>
<span class="silk-block consultant-span">{{consultant.practitionerInfos[0].designtion
|| "ENT" }}</span><br>
<span class="silk-block mb-1 consultant-year">{{consultant.practitionerInfos[0].exp || null}}</span><br>
<span class="silk-block mb-1 consultant-qualification">{{consultant.practitionerInfos[0].qualification || null}}</span><br>
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.practitionerInfos[0].fees || 100}}</span> </span><br>
</div>
</div>
<span class="d-flex mb">
<mat-icon class="mt-1">transcribe</mat-icon>
<span class="mt-1 pl-1 consultant-language">{{consultant.practitionerInfos[0].languages || ""}}</span>
</span>
<span class="d-flex mb">
<mat-icon>location_on</mat-icon>
<span class="consultant-language pl-1">{{consultant.city}}</span>
</span>
<span class="d-flex mb">
<mat-icon>access_time</mat-icon>
<span class="consultant-language pl-1">{{consultant.time}}</span>
</span>
<div class="align-self-center">
<!-- <button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button">
<span class="button-text">Accept</span>
</button> -->
<button type="button" (click)="goToSlotBooking(consultant)" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
<span class="material-icons"> bookmark_add </span><span class="button-text">Book Appoinment</span>
</button>
</div>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap">
<app-summary></app-summary>
</div>
</div>
<!-- </ng-scrollbar> -->
</div>
</div>

9
ng-seed/src/app/end-user/consultants/consultants-list.component.scss
View File

@ -7,7 +7,7 @@ $color_red_orange_approx: #4caf50;
$black_60: rgba(0, 0, 0, 0.6);
.consultant-content {
padding: 0rem 0.5rem 1rem;
padding-bottom: 4rem;
// padding-bottom: 4rem;
}
.flexRow{
display: flex !important;
@ -20,6 +20,7 @@ $black_60: rgba(0, 0, 0, 0.6);
height: calc(100vh - 105px);
}
.consultant-list-card {
border-radius: 10px;
background: $white;
box-shadow: 0 2px 6px $black_10;
transition: all 0.3s ease-in-out 0s;
@ -151,4 +152,8 @@ mat-toolbar{
.btn-red{
margin: 0rem;
}
}
}
::ng-deep body{
background-color: #f7f8f5 !important;
}

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

@ -42,76 +42,17 @@ export class ConsultantsListComponent implements OnInit {
))
);
this.consultants = result;
// this.consultants = [{
// name: 'Dr. Suganya',
// specialist: 'ENT',
// year: '1 YRS EXP',
// qualification: 'MBBS, MS',
// payment: '800',
// language: 'TAMIL, ENGILSH',
// city: 'Apollo Hospital Chennai',
// image:'assets/images/face1.jpg',
// time: 'Available in 3 mins',
// img:'assets/images/stethoscope.png'
console.log(this.consultants)
let workinghrs = []
this.consultants.forEach(element => {
console.log(element)
element.practitionerInfos.forEach(e => {
workinghrs.push(e)
});
// },{
// name: 'Dr. Indhu Mathi',
// specialist: 'ORTHOPAEDICS',
// year: '2 YRS EXP',
// qualification: 'MBBS, MS',
// payment: '800',
// language: 'TAMIL, ENGILSH',
// city: 'Apollo Hospital Chennai',
// image:'assets/images/face2.jpg',
// time: 'Available in 4 mins',
// img:'assets/images/stethoscope.png'
// },{
// name: 'Dr. Gaurav Kumar',
// specialist: 'BREAST SURGERY',
// year: '3 YRS EXP',
// qualification: 'MBBS, MS',
// payment: '800',
// language: 'TAMIL, ENGILSH',
// city: 'Apollo Hospital Chennai',
// image:'assets/images/face3.jpg',
// time: 'Available in 5 mins',
// img:'assets/images/stethoscope.png'
// },{
// name: 'Dr. Saloni Sinha',
// specialist: 'CARDIOLOGY',
// year: '4 YRS EXP',
// qualification: 'MBBS, MS',
// payment: '800',
// language: 'TAMIL, ENGILSH',
// city: 'Apollo Hospital Chennai',
// image:'assets/images/face4.jpg',
// time: 'Available in 6 mins',
// img:'assets/images/stethoscope.png'
// },{
// name: 'Dr. Padmaja',
// specialist: 'DIABETOLOGY',
// year: '5 YRS EXP',
// qualification: 'MBBS, MS',
// payment: '800',
// language: 'TAMIL, ENGILSH',
// city: 'Apollo Hospital Chennai',
// image:'assets/images/face5.jpg',
// time: 'Available in 7 mins',
// img:'assets/images/stethoscope.png'
// },{
// name: 'Dr. Pradeep ',
// specialist: 'ENDOCRINOLOGY',
// year: '6 YRS EXP',
// qualification: 'MBBS, MS',
// payment: '800',
// language: 'TAMIL, ENGILSH',
// city: 'Apollo Hospital Chennai',
// image:'assets/images/face6.jpg',
// time: 'Available in 8 mins',
// img:'assets/images/stethoscope.png'
// }
// ];
});
console.log(workinghrs)
localStorage.setItem('workingHrs',workinghrs[0].workingHours)
}
goToSlotBooking(param){

4
ng-seed/src/app/end-user/customer-info/customer-info.component.html
View File

@ -4,7 +4,7 @@
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div class="container mt-1">
<div fxLayout="row wrap" fxLayoutAlign="center ">
<div fxLayout="row wrap" fxLayoutAlign="center">
<div class="column mat-width" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<mat-card class="p-2 radius">
<h2 class="base-border">Customer Information</h2>
@ -82,7 +82,7 @@
</div>
<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>
</div>
</div>
</ng-scrollbar>

6
ng-seed/src/app/end-user/customer-info/customer-info.component.scss
View File

@ -29,4 +29,8 @@ mat-toolbar{
max-width: 100%!important;
margin-top: -6rem;
}
}
}
::ng-deep body{
background-color: #f7f8f5 !important;
}

3
ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.scss
View File

@ -121,4 +121,7 @@ h5{
.media-prof{
margin-top: 18rem;
}
}
::ng-deep body{
background-color: #f7f8f5 !important;
}

5
ng-seed/src/app/end-user/end-user.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CommonModule, DatePipe } from '@angular/common';
import { EndUserRoutingModule } from './end-user-routing.module';
import { DemoMaterialModule } from 'app/shared/demo.module';
@ -36,7 +36,8 @@ import { DoctorProfileComponent } from './doctor-profile/doctor-profile.componen
SharedModule
],
providers:[
EndUserService
EndUserService,
DatePipe
]
})
export class EndUserModule { }

2
ng-seed/src/app/end-user/end-user.service.ts
View File

@ -15,7 +15,7 @@ private apiUrl = environment.apiEndpoint;
getServicesListDetails(): Observable<any> {
console.log('IN')
return this._http.get<any[]>(this.apiUrl + "getServicesDetails",{})
return this._http.post(this.apiUrl + "getServicesDetails",{})
// .pipe(
// catchError(this.handleError('role', []))
// )

5
ng-seed/src/app/end-user/payment/payment.component.scss
View File

@ -27,4 +27,7 @@ mat-toolbar{
max-width: 100%!important;
margin-top: -6rem;
}
}
}
::ng-deep body{
background-color: #f7f8f5 !important;
}

3
ng-seed/src/app/end-user/search-category/search-category.component.scss
View File

@ -361,4 +361,7 @@ $black_60: rgba(0, 0, 0, 0.6);
::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
background-color: #fff0 !important;
}
}
::ng-deep body{
background-color: #f7f8f5 !important;
}

4
ng-seed/src/app/end-user/service-list-details/service-list.component.html
View File

@ -19,7 +19,7 @@
<div fxLayout="row wrap">
<div fxLayout="row wrap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="66.66" fxFlex.lg="66.66" fxFlex.xl="66.66">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap" *ngFor="let serviceListDetails of servicesList | searchFilter:filterdata : 'service'">
<div class="Specialties-list-card">
<div class="Specialties-list-card" (click)="goto(serviceListDetails)">
<mat-card class="example-card d-flex Specialties-spContent">
<div class="consultant-card-cover">
<div class="text-center consultant-thumb">
@ -27,7 +27,7 @@
</div>
</div>
<mat-card-title-group>
<mat-card-title class="service-info mb" (click)="goto(serviceListDetails)" >{{serviceListDetails.servicesName}}</mat-card-title>
<mat-card-title class="service-info mb">{{serviceListDetails.servicesName}}</mat-card-title>
<!-- <mat-card-title class="info service-list">{{serviceListDetails.info}}</mat-card-title> -->
<!-- <a (click)="openDialog('Update',serviceListDetails)" class="Specialties-rightUpdate"><span class="material-icons edit-color">edit</span></a> -->
<!-- <a (click)="confirmBox('Delete',serviceListDetails)" class="Specialties-rightArrow"><span class="material-icons edit-color delete">delete</span></a> -->

6
ng-seed/src/app/end-user/service-list-details/service-list.component.scss
View File

@ -153,4 +153,8 @@ footer {
footer {
position: fixed;
}
}
}
::ng-deep body{
background-color: #f7f8f5 !important;
}

28
ng-seed/src/app/end-user/service-list-details/service-list.component.ts
View File

@ -65,7 +65,7 @@ export class ServiceListComponent implements OnInit {
this.enduser.getcusServicesMapDetails(params).subscribe(res => {
if (res.status == 200) {
console.log(res)
this.full_data = res['data']
this.full_data = res['data']
let tmp =[];
localStorage.setItem('cusServiceData',JSON.stringify(res['data']))
res['data'].forEach(element => {
@ -74,7 +74,6 @@ export class ServiceListComponent implements OnInit {
this.servicesList_array.push(e)
});
});
console.log(tmp, this.servicesList_array)
this.servicesList_array
@ -91,27 +90,10 @@ export class ServiceListComponent implements OnInit {
}
});
//this._pd.getTabStatusPdDetails(this.tabStatus)
this._api.getServicesListDetails().subscribe(res => {
if (res.status == 200) {
// this.servicesList = res.data;
// console.log(this.servicesList)
// this.dataSource = res.data.length;
// console.log(this.dataSource)
// this.dataSource.data = this.servicesList;
// console.log(this.dataSource.data)
// this.recordStatus=false;
}
else{
// this.servicesList=[];
// this.dataSource = null;
// this.recordStatus=true;
}
}
,error => {
// this.errorMessage.push(error);
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
// alert(error.html_format);
});
// this._api.getServicesListDetails().subscribe(res => {
// if (res.status == 200) {
// }
// });
}
confirmBox(event,element){

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

@ -8,86 +8,35 @@
<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="mb-1">Date & Time: {{selected | date:'mediumDate'}}</h6>
<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" fxLayoutAlign="center center">
<div class="d-flex calender-time">
<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 [(selected)]="selected"></mat-calendar>
<mat-calendar [min]="minDate" [max]="maxDate" [(selected)]="selected"></mat-calendar>
</mat-card>
</div>
</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" fxLayoutAlign="start center">
<div class="time">
<mat-tab-group class="">
<mat-tab>
<ng-template mat-tab-label>
<a class="toolbar-avatar">
<img src="assets/images/morning.png" class="img">
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary" (click)="toggleActive($event,'9.00 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>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<a class="toolbar-avatar">
<img src="assets/images/sun.png" style="width: 33px;" class="img-sun">
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary">01:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">01:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">02:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">02:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">03:00PM</button><br>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">03:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">04:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">04:30PM</button>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<a class="toolbar-avatar">
<img src="assets/images/sunset.png" style="width: 40px;" class="img-set">
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary">05:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">05:50PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">06:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">06:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary ">07:00PM</button><br>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">07:30PM</button>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<a class="toolbar-avatar">
<img src="assets/images/moon.png" style="width: 30px;" class="img-moon">
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary">08:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">08:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">09:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">09:30PM</button>
</mat-card-content>
</mat-tab>
</mat-tab-group>
</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>

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

@ -24,11 +24,7 @@ margin-left: -3rem!important;
color: $white;
border: 1px solid $color_red_orange_approx;
float: right;
}
h6{
color: #0087ba;
font-weight: 600;
}
}
.primary{
background-color: #658F9B;
color: white;
@ -64,6 +60,7 @@ h6{
}
.card-mat{
max-width: 66%;
padding: 1rem !important;
}
@media only screen and (max-width: 600px) {
h3{
@ -86,4 +83,16 @@ h6{
.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;
}

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

@ -1,13 +1,20 @@
import { DatePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import * as moment from 'moment';
@Component({
selector: 'app-slot-booking-details',
templateUrl: './slot-booking-details.component.html',
styleUrls: ['./slot-booking-details.component.scss']
styleUrls: ['./slot-booking-details.component.scss'],
providers:[DatePipe]
})
export class SlotBookingDetailsComponent implements OnInit {
minDate: Date;
maxDate: Date;
chooseDate:Date | null;
slotTime:any;
form: FormGroup;
local_data:any;
element: HTMLElement;
@ -28,22 +35,80 @@ export class SlotBookingDetailsComponent implements OnInit {
{workspace: 'test 2'},
{workspace: 'test 3'},
];
constructor(private router:Router,) { }
workingHours: any;
getHours: 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();
console.log(currentYear)
this.minDate = currentYear
this.maxDate = new Date(currentYear + 5);
// this.maxDate = new Date(currentYear + 1, 11, 31);
console.log(this.maxDate)
this.workingHours = localStorage.getItem('workingHrs')
let formatDate = this.datepipe.transform(new Date(),'EEEE')
let findDate = formatDate.toLowerCase()
console.log(findDate)
console.log(JSON.parse(this.workingHours))
this.workingHours = JSON.parse(this.workingHours)
this.workingHours.forEach((value,index) => {
console.log(value[findDate],index)
if(value[findDate] != undefined){
this.getHours = value[findDate]['hours']
console.log(this.getHours[0])
}
//value.filter(val => findDate == val.)
// for(const [key,value1] of Object.entries(value)) {
// console.log(key,value1)
// }
});
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);
// Define the interval duration in minutes
const intervalDurationInMinutes = 30;
// Define an array to store the intervals
const intervals = [];
// Iterate over the time range and split it into intervals
let currentIntervalStartTime = startTime;
while (currentIntervalStartTime < endTime) {
// Calculate the end time of the interval
const currentIntervalEndTime = moment.min(currentIntervalStartTime.clone().add(intervalDurationInMinutes, 'minutes'), endTime);
// Add the interval to the array
intervals.push({
startTime: currentIntervalStartTime.toDate(),
endTime: currentIntervalEndTime.toDate(),
});
// Move to the next interval
currentIntervalStartTime = currentIntervalEndTime;
}
// Output the intervals
console.log(intervals);
// const timeSlices = splitTime(this.getHours[0].startTime,this.getHours[0].endTime,getDuration.duration);
}
ngOnInit(): void {
this.form = new FormGroup({
workspace: new FormControl('', [Validators.required]),
});
let service = localStorage.getItem("servicedetails")
let serviceDetails = JSON.parse(service)
console.log(serviceDetails)
// this.form.controls['note'].setValue('Sample')
console.log(serviceDetails)
// this.form.controls['note'].setValue('Sample')
this.form.patchValue(this.local_data)
}
// submit(){
@ -53,10 +118,9 @@ export class SlotBookingDetailsComponent implements OnInit {
toggleActive(event:any,param:any){
// debugger;
// event.preventDefault();
this.slotTime = param
if(this.element !== undefined){
this.element.style.backgroundColor = "#658f9b";
this.element.style.backgroundColor = "#658f9b";
}
var target = event.currentTarget;
target.style.backgroundColor = "#0c8f00";

11
ng-seed/src/app/end-user/summary/summary.component.scss
View File

@ -5,9 +5,9 @@
border-radius: 0.5rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
background-color: #fff;
width: 100%;
height: 100%;
max-width: 28.5%!important;
// width: 100%;
// height: 100%;
// max-width: 28.5%!important;
}
.header {
padding: 0rem 0.5rem 0rem 0.5rem;
@ -59,4 +59,7 @@ h6{
// margin-top: 5rem!important;
// // display: none!important;
// }
// }
// }
::ng-deep body{
background-color: #f7f8f5 !important;
}