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:
bitbucket 2023-03-30 18:38:40 +05:30
commit 4d66ba6ffd
18 changed files with 241 additions and 262 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

@ -11,3 +11,6 @@ mat-toolbar{
background-color: #227f6e; background-color: #227f6e;
color:#fff; color:#fff;
} }
::ng-deep body{
background-color: #f7f8f5 !important;
}

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

@ -118,3 +118,7 @@ mat-icon{
color: #979797; color: #979797;
font-size: 16px; 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> <span style="text-align: center;">Appointment</span>
</mat-toolbar> </mat-toolbar>
<div class="container mt-1"> <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"> --> <!-- <ng-scrollbar class="scrollHV"> -->
<div fxLayout="row wrap mt-2 mb-2" class="flexRow"> <div fxLayout="row wrap">
<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 fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" class="m-gap p-gap">
<div class="consultant-list-card"> <div fxLayout="row wrap">
<div class="consultant-content"> <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<div class="pad-wrap d-flex"> <h3 class="page-h">Practitioner List</h3>
<div class="consultant-img"> </div>
<img src="https://newassets.apollo247.com/specialties/ic_oncology.png " alt="Online Doctor Consultation - Medical Oncology" style="width: 40px;"> <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap" fxLayoutAlign="end center">
<!-- <img src="{{consultant.img}}" style="width: 40px;"> --> <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>
<div class="consultant-card-cover"> </div>
<div> </div>
<div class="text-center consultant-thumb"> </div>
<img class="img-responsive img-circle" src="assets/images/face4.jpg" width="120" height="120" alt="user list image"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap">
</div> <app-summary></app-summary>
</div> </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>
<!-- </ng-scrollbar> --> <!-- </ng-scrollbar> -->
</div>
</div> </div>

7
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); $black_60: rgba(0, 0, 0, 0.6);
.consultant-content { .consultant-content {
padding: 0rem 0.5rem 1rem; padding: 0rem 0.5rem 1rem;
padding-bottom: 4rem; // padding-bottom: 4rem;
} }
.flexRow{ .flexRow{
display: flex !important; display: flex !important;
@ -20,6 +20,7 @@ $black_60: rgba(0, 0, 0, 0.6);
height: calc(100vh - 105px); height: calc(100vh - 105px);
} }
.consultant-list-card { .consultant-list-card {
border-radius: 10px;
background: $white; background: $white;
box-shadow: 0 2px 6px $black_10; box-shadow: 0 2px 6px $black_10;
transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;
@ -152,3 +153,7 @@ mat-toolbar{
margin: 0rem; 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 = result;
// this.consultants = [{ console.log(this.consultants)
// name: 'Dr. Suganya', let workinghrs = []
// specialist: 'ENT', this.consultants.forEach(element => {
// year: '1 YRS EXP', console.log(element)
// qualification: 'MBBS, MS', element.practitionerInfos.forEach(e => {
// payment: '800', workinghrs.push(e)
// language: 'TAMIL, ENGILSH', });
// city: 'Apollo Hospital Chennai',
// image:'assets/images/face1.jpg',
// time: 'Available in 3 mins',
// img:'assets/images/stethoscope.png'
// },{
// 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){ 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> <span style="text-align: center;">Appointment</span>
</mat-toolbar> </mat-toolbar>
<div class="container mt-1"> <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"> <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"> <mat-card class="p-2 radius">
<h2 class="base-border">Customer Information</h2> <h2 class="base-border">Customer Information</h2>
@ -82,7 +82,7 @@
</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"> <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> <app-summary></app-summary>
</div> </div>
</div> </div>
</div> </div>
</ng-scrollbar> </ng-scrollbar>

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

@ -30,3 +30,7 @@ mat-toolbar{
margin-top: -6rem; 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

@ -122,3 +122,6 @@ h5{
margin-top: 18rem; 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 { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule, DatePipe } from '@angular/common';
import { EndUserRoutingModule } from './end-user-routing.module'; import { EndUserRoutingModule } from './end-user-routing.module';
import { DemoMaterialModule } from 'app/shared/demo.module'; import { DemoMaterialModule } from 'app/shared/demo.module';
@ -36,7 +36,8 @@ import { DoctorProfileComponent } from './doctor-profile/doctor-profile.componen
SharedModule SharedModule
], ],
providers:[ providers:[
EndUserService EndUserService,
DatePipe
] ]
}) })
export class EndUserModule { } export class EndUserModule { }

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

@ -28,3 +28,6 @@ mat-toolbar{
margin-top: -6rem; 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

@ -362,3 +362,6 @@ $black_60: rgba(0, 0, 0, 0.6);
background-color: #fff0 !important; 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">
<div fxLayout="row wrap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="66.66" fxFlex.lg="66.66" fxFlex.xl="66.66"> <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 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"> <mat-card class="example-card d-flex Specialties-spContent">
<div class="consultant-card-cover"> <div class="consultant-card-cover">
<div class="text-center consultant-thumb"> <div class="text-center consultant-thumb">
@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<mat-card-title-group> <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> --> <!-- <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)="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> --> <!-- <a (click)="confirmBox('Delete',serviceListDetails)" class="Specialties-rightArrow"><span class="material-icons edit-color delete">delete</span></a> -->

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

@ -154,3 +154,7 @@ footer {
position: fixed; 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 => { this.enduser.getcusServicesMapDetails(params).subscribe(res => {
if (res.status == 200) { if (res.status == 200) {
console.log(res) console.log(res)
this.full_data = res['data'] this.full_data = res['data']
let tmp =[]; let tmp =[];
localStorage.setItem('cusServiceData',JSON.stringify(res['data'])) localStorage.setItem('cusServiceData',JSON.stringify(res['data']))
res['data'].forEach(element => { res['data'].forEach(element => {
@ -74,7 +74,6 @@ export class ServiceListComponent implements OnInit {
this.servicesList_array.push(e) this.servicesList_array.push(e)
}); });
}); });
console.log(tmp, this.servicesList_array) console.log(tmp, this.servicesList_array)
this.servicesList_array this.servicesList_array
@ -91,27 +90,10 @@ export class ServiceListComponent implements OnInit {
} }
}); });
//this._pd.getTabStatusPdDetails(this.tabStatus) //this._pd.getTabStatusPdDetails(this.tabStatus)
this._api.getServicesListDetails().subscribe(res => { // this._api.getServicesListDetails().subscribe(res => {
if (res.status == 200) { // 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);
});
} }
confirmBox(event,element){ 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> <h3>Slot Availability</h3>
</div> </div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap"> <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> </div>
<div fxLayout="row wrap" fxLayoutAlign="center center"> <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 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="d-flex calender-time">
<div class="calender"> <div class="calender">
<mat-card class="demo-inline-calendar-card cardCalender"> <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> </mat-card>
</div> </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>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" class="p-gap" fxLayoutAlign="start center"> <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" class="p-gap">
<div class="time"> <button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary" (click)="toggleActive($event,'9.30 AM')">9:00AM</button>
<mat-tab-group class=""> <button mat-raised-button mat-button-sm class="mr-1 mb-1 primary" (click)="toggleActive($event,'9.30 AM')">9:30AM</button>
<mat-tab> <button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">10:00AM</button>
<ng-template mat-tab-label> <button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">10:30AM</button>
<a class="toolbar-avatar"> <button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">11:00AM</button><br>
<img src="assets/images/morning.png" class="img"> <button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">11:30AM</button>
</a> <button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">12:00AM</button>
</ng-template> <button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">12:30AM</button>
<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> </div>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" (click)="submit()">PROCEED</button> <button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" (click)="submit()">PROCEED</button>
</div> </div>

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

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

82
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 { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'; import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import * as moment from 'moment';
@Component({ @Component({
selector: 'app-slot-booking-details', selector: 'app-slot-booking-details',
templateUrl: './slot-booking-details.component.html', 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 { export class SlotBookingDetailsComponent implements OnInit {
minDate: Date;
maxDate: Date;
chooseDate:Date | null;
slotTime:any;
form: FormGroup; form: FormGroup;
local_data:any; local_data:any;
element: HTMLElement; element: HTMLElement;
@ -28,22 +35,80 @@ export class SlotBookingDetailsComponent implements OnInit {
{workspace: 'test 2'}, {workspace: 'test 2'},
{workspace: 'test 3'}, {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 { ngOnInit(): void {
this.form = new FormGroup({ this.form = new FormGroup({
workspace: new FormControl('', [Validators.required]), workspace: new FormControl('', [Validators.required]),
}); });
let service = localStorage.getItem("servicedetails") let service = localStorage.getItem("servicedetails")
let serviceDetails = JSON.parse(service) let serviceDetails = JSON.parse(service)
console.log(serviceDetails) console.log(serviceDetails)
// this.form.controls['note'].setValue('Sample')
// this.form.controls['note'].setValue('Sample')
this.form.patchValue(this.local_data) this.form.patchValue(this.local_data)
} }
// submit(){ // submit(){
@ -53,10 +118,9 @@ export class SlotBookingDetailsComponent implements OnInit {
toggleActive(event:any,param:any){ toggleActive(event:any,param:any){
// debugger; // debugger;
// event.preventDefault(); // event.preventDefault();
this.slotTime = param
if(this.element !== undefined){ if(this.element !== undefined){
this.element.style.backgroundColor = "#658f9b"; this.element.style.backgroundColor = "#658f9b";
} }
var target = event.currentTarget; var target = event.currentTarget;
target.style.backgroundColor = "#0c8f00"; target.style.backgroundColor = "#0c8f00";

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

@ -5,9 +5,9 @@
border-radius: 0.5rem; 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); 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; background-color: #fff;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
max-width: 28.5%!important; // max-width: 28.5%!important;
} }
.header { .header {
padding: 0rem 0.5rem 0rem 0.5rem; padding: 0rem 0.5rem 0rem 0.5rem;
@ -60,3 +60,6 @@ h6{
// // display: none!important; // // display: none!important;
// } // }
// } // }
::ng-deep body{
background-color: #f7f8f5 !important;
}