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-03-30 12:09:46 +05:30
commit 97c9464eca
24 changed files with 689 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,15 +6,16 @@
<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" fxLayoutAlign="end center">
<mat-form-field >
<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>
<ng-scrollbar class="scrollHV">
<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">
@ -63,7 +64,10 @@
</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>

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

@ -120,4 +120,35 @@ mat-icon{
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;
// max-width: 15%!important;
display: initial!important;
margin-top: -5rem!important;
}
.form-field{
margin-left: -3rem;
}
.search-mat{
flex: 1 1 0%!important;
display: contents!important;
}
@media only screen and (max-width: 600px) {
h3{
font-size: 18px;
margin-top: 1.5rem;
}
.flx{
margin-top: -6rem!important;
}
.btn-red{
margin: 0rem;
}
}

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

@ -3,9 +3,9 @@
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div fxLayout="row wrap" fxLayoutAlign="center center">
<div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<div class="container mt-1">
<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>
<form [formGroup]="form" (ngSubmit)="submit()">
@ -80,6 +80,10 @@
</form>
</mat-card>
</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>
</ng-scrollbar>

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

@ -4,4 +4,29 @@
mat-toolbar{
background-color: #227f6e;
color:#fff;
}
}
.container{
max-width: 1217px;
min-width: 375px;
margin: 0 auto;
margin-right: 0.5rem;
}
::ng-deep .flx{
flex: 1 1 0%!important;
display: contents!important;
}
.mat-width{
margin-left: -10rem;
// place-content: flex-start!important;
}
@media only screen and (max-width: 600px) {
.mat-width{
margin-left: 0rem!important;
}
.flx {
flex: 1 1 0% !important;
display: initial!important;
max-width: 100%!important;
margin-top: -6rem;
}
}

44
ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.html Normal file
View File

@ -0,0 +1,44 @@
<div class="profile mt-5">
<div class="row d-flex justify-content-center Centre-bacl">
<div class="col-md-7">
<div class="card p-3 py-4">
<div class="images">
<img src="assets/images/userpic2.jpg" width="100" class="rounded-circle">
</div>
<div class="media-prof">
<span class="bg-secondary p-1 px-4 rounded text-white">Pro</span>
<h5>Dr. Suganya</h5>
<p class="years">ENT | 8 YRS</p>
<div class="header">
<div class="content">
<span class="title"><img src="assets/images/Education.svg" alt="Avatar" class="img">Education</span>
<p class="message">MBBS,MS ENT,DAA</p>
</div>
<div class="content">
<span class="title"> <img src="assets/images/Location.svg" alt="Avatar" class="img">Location</span>
<p class="message">Apollo Hospitals Cancer Centre Nandanam,Chennai</p>
</div>
</div>
<div class="header">
<div class="content">
<span class="title"><img src="assets/images/Registration.svg" alt="Avatar" class="img">Registration Number</span>
<p class="message">98391</p>
</div>
<div class="content">
<span class="title"> <img src="assets/images/Languages.svg" alt="Avatar" class="img">Languages</span>
<p class="message">English, Hindi, Tamil, Kannada, Malayalam</p>
</div>
</div>
<div class="px-4 mt-1 line">
<h6 class="title-dr">About Dr. Suganya</h6>
<p class="fonts">Dr Suganya is a well-known surgeon and one of the best ENT specialists in Chennai. She is trained to treat medical and surgical conditions affecting the ear, nose and throat. ENT specialists are also called otolaryngologists. </p>
</div>
<div class="px-4 mt-1">
<h6 class="title-dr"> Clinic Address</h6>
<p class="fonts">No. 320, Padma Complex, Anna Salai,TeynampetChennai</p>
</div>
</div>
</div>
</div>
</div>
</div>

124
ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.scss Normal file
View File

@ -0,0 +1,124 @@
body{
background:#eee;
}
.profile{
padding: 2rem 2rem 2rem 2rem;
border-radius: 5px;
}
.card{
border:none;
position:relative;
overflow:hidden;
// border-radius:8px;
// cursor:pointer;
}
.card:before{
content:"";
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background-color:#E1BEE7;
transform:scaleY(1);
transition:all 0.5s;
transform-origin: bottom
}
.card:after{
content:"";
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background-color: #217e69;
transform:scaleY(0);
transition:all 0.5s;
transform-origin: bottom
}
.card:hover::after{
transform:scaleY(1);
}
.fonts{
font-size:13px;
}
.Centre-bacl{
box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}
.rounded-circle{
height: 230px;
max-width: 100%;
vertical-align: middle;
border-radius: 45px;
width: 100%;
}
h5{
color: #02475b;
margin: 0;
overflow: hidden;
font-size: 20px;
text-overflow: ellipsis;
// padding-bottom: 10px;
}
.years{
color: #217e69;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
// padding-bottom: 10px;
}
.header {
padding: 0rem 0.5rem 0rem 0.5rem;
display: flex;
}
.content {
// margin-top: 0.75rem;
margin-right: 2rem;
}
.title {
color: #595b5f;
font-size: 13px;
font-weight: 600;
line-height: 1.5rem;
}
.title-dr{
color: #595b5f;
font-size: 14px;
font-weight: 600;
line-height: 1.5rem;
}
.message {
color: #217e69;
font-size: 13px;
line-height: 10px;
word-break: break-word;
padding-left: 40px;
padding-right: 10px;
}
.img{
width: 30px;
margin-right: 10px;
}
.images{
float: right;
}
.line{
border-bottom: 0.5px solid rgba(2,71,91,0.2);
padding-bottom: 10px;
}
@media only screen and (max-width: 600px) {
.message {
padding-left: 48px;
line-height: 20px;
margin-top: 0px;
}
.p-3 {
padding: 2rem !important;
}
.header {
display: initial;
}
.media-prof{
margin-top: 18rem;
}
}

25
ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DoctorProfileComponent } from './doctor-profile.component';
describe('DoctorProfileComponent', () => {
let component: DoctorProfileComponent;
let fixture: ComponentFixture<DoctorProfileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DoctorProfileComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(DoctorProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-doctor-profile',
templateUrl: './doctor-profile.component.html',
styleUrls: ['./doctor-profile.component.scss']
})
export class DoctorProfileComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

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

@ -4,6 +4,7 @@ import { BookingSummaryComponent } from './booking-summary/booking-summary.compo
import { CentersListComponent } from './business-centers/centers-list.component';
import { ConsultantsListComponent } from './consultants/consultants-list.component';
import { CustomerInfoComponent } from './customer-info/customer-info.component';
import { DoctorProfileComponent } from './doctor-profile/doctor-profile.component';
import { PaymentComponent } from './payment/payment.component';
import { SearchCategoryComponent } from './search-category/search-category.component';
import { ServiceListComponent } from './service-list-details/service-list.component';
@ -63,6 +64,10 @@ const routes: Routes = [
path: 'business/:randstr/:randstrs/practitioner/slot/cus/pt/bts',
component: BookingSummaryComponent
},
{
path: 'doctor-profile',
component: DoctorProfileComponent
},
// {
// path: 'calendar-list',

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

@ -15,6 +15,8 @@ import { EndUserService } from './end-user.service';
import { PaymentComponent } from './payment/payment.component';
import { CustomerInfoComponent } from './customer-info/customer-info.component';
import { BookingSummaryComponent } from './booking-summary/booking-summary.component';
import { SummaryComponent } from './summary/summary.component';
import { DoctorProfileComponent } from './doctor-profile/doctor-profile.component';
@NgModule({
@ -24,7 +26,7 @@ import { BookingSummaryComponent } from './booking-summary/booking-summary.compo
SearchCategoryComponent,
ConsultantsListComponent,
CentersListComponent,
PaymentComponent,CustomerInfoComponent, BookingSummaryComponent
PaymentComponent,CustomerInfoComponent, BookingSummaryComponent, SummaryComponent, DoctorProfileComponent
],
imports: [
CommonModule,

12
ng-seed/src/app/end-user/payment/payment.component.html
View File

@ -1,10 +1,10 @@
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div fxLayout="row wrap" fxLayoutAlign="center center">
<div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<mat-card class="p-2 radius">
<div class="container mt-1">
<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 ">
<h3 class="base-border">Payment By</h3>
<ng-template mat-tab-label>Credit/Debit Cards</ng-template>
<mat-card-content>
@ -36,6 +36,10 @@
</mat-card-content>
</mat-card>
</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>

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

@ -1,4 +1,30 @@
mat-toolbar{
background-color: #227f6e;
color:#fff;
}
}
.container{
max-width: 1217px;
min-width: 375px;
margin: 0 auto;
margin-right: 0rem;
}
::ng-deep .flx{
flex: 1 1 0%!important;
display: initial!important;
max-width: 30%!important;
}
.mat-width{
// max-width: 68%!important;
margin-left: 11rem;
}
@media only screen and (max-width: 600px) {
.mat-width{
margin-left: 0rem!important;
}
.flx {
flex: 1 1 0% !important;
display: initial!important;
max-width: 100%!important;
margin-top: -6rem;
}
}

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

@ -1,51 +1,51 @@
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
<h3 style="margin-left:35% ;">{{full_data[0].business[0].busName}}</h3>
</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">Service List</h3>
</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">Service 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 appearance="fill" class="form-field">
<mat-label>Search Service</mat-label>
<input type="text" [(ngModel)]="filterdata" matInput placeholder="Search Service">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</div>
</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 appearance="fill">
<mat-label>Search Service</mat-label>
<input type="text" [(ngModel)]="filterdata" matInput placeholder="Search Service">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</div>
</div>
<!-- <button mat-button (click)="openDialog('Add',{})" class="buttons">Add Services</button><br> -->
<div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap flx" *ngFor="let serviceListDetails of servicesList | searchFilter:filterdata : 'service'">
<div class="Specialties-list-card">
<mat-card class="example-card d-flex Specialties-spContent">
<div class="consultant-card-cover">
<div class="text-center consultant-thumb">
<!-- <button mat-button (click)="openDialog('Add',{})" class="buttons">Add Services</button><br> -->
<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">
<mat-card class="example-card d-flex Specialties-spContent">
<div class="consultant-card-cover">
<div class="text-center consultant-thumb">
<img class="img-responsive img-circle" src="https://prodaphstorage.blob.core.windows.net/specialties/bdf0cf0d-754e-4254-aaf7-fdc7aedd7c35.jpg" alt="Online Doctor Consultation - Allergist and Clinical Immunologist" width="120" height="120" alt="user list image">
</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="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> -->
<!-- <span class="Specialties-rightArrow"><img src="https://newassets.apollo247.com/images/ic_arrow_right.svg" alt="Arrow Right - Online Doctor Consultation"></span> -->
<!-- <mat-card-subtitle class="service-Specialties">{{serviceListDetails.specialties}}</mat-card-subtitle> -->
</mat-card-title-group>
</mat-card>
</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="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> -->
<!-- <span class="Specialties-rightArrow"><img src="https://newassets.apollo247.com/images/ic_arrow_right.svg" alt="Arrow Right - Online Doctor Consultation"></span> -->
<!-- <mat-card-subtitle class="service-Specialties">{{serviceListDetails.specialties}}</mat-card-subtitle> -->
</mat-card-title-group>
</mat-card>
</div>
</div>
</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap flx" fxLayoutAlign="end center">
<app-summary></app-summary>
</div>
</div>
</div>
</div>
</div>
<footer>
<footer>
<p>
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
</p>
</footer>
</footer>

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

@ -68,9 +68,6 @@ $main-color: #f44336;
position: absolute;
padding-right: 0.5rem;
}
.flx{
width: 47%;
}
.Specialties-spContent{
width: 100%;
// padding: 0 10px 0 0;
@ -125,3 +122,35 @@ footer {
position: absolute;
bottom: 0;
}
.container{
max-width: 1217px;
min-width: 375px;
margin: 0 auto;
margin-right: 0rem;
}
.flx{
flex: 1 1 0%!important;
// max-width: 15%!important;
display: initial!important;
margin-top: -5rem!important;
// float: right;
}
.search-mat{
flex: 1 1 0%!important;
display: contents!important;
}
.form-field{
margin-left: -3rem;
}
@media only screen and (min-height: 600px) {
h3{
font-size: 20px;
margin-top: 1.5rem;
}
.flx{
margin-top: 0rem;
}
footer {
position: fixed;
}
}

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

@ -1,97 +1,98 @@
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div class="container mt-1">
<mat-card>
<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>
</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="mb-1">Date & Time: {{selected | date:'mediumDate'}}</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 class="calender">
<mat-card class="demo-inline-calendar-card cardCalender">
<mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
</div>
</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 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>
<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 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>
</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 class="calender">
<mat-card class="demo-inline-calendar-card cardCalender">
<mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
</div>
</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 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;">
</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;">
</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;">
</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>
<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>

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

@ -51,4 +51,39 @@ h6{
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: 66%;
}
@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;
}
}

32
ng-seed/src/app/end-user/summary/summary.component.html Normal file
View File

@ -0,0 +1,32 @@
<div class="card card-mob">
<h6>SUMMARY</h6>
<div class="header">
<div class="content">
<span class="title">SERVICE</span>
<p class="message">Online Video</p>
<p class="message">Counselling via Google </p>
<p class="message">Meet with Ms. A.</p>
<p class="message">Lakshmi</p>
</div>
<div class="content">
<span class="title">LOCATION</span>
<p class="message">Hope Counselling</p>
<p class="message">Services </p>
</div>
</div>
<hr class="new1">
<div class="header">
<div class="content">
<span class="title">PRACTITIONER</span>
<p class="message">A Lakshmi</p>
<p class="message">bookconsult.in/lakshmi </p>
</div>
</div>
<hr class="new1">
<div class="header">
<div class="content">
<span class="title">TOTAL PRICE</span>
<p class="message">₹700</p>
</div>
</div>
</div>

62
ng-seed/src/app/end-user/summary/summary.component.scss Normal file
View File

@ -0,0 +1,62 @@
.card {
overflow: hidden;
position: absolute!important;
text-align: left;
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;
}
.header {
padding: 0rem 0.5rem 0rem 0.5rem;
display: flex;
}
.content {
margin-top: 0.75rem;
margin-right: 2rem;
}
.title {
color: #595b5f;
font-size: 13px;
font-weight: 600;
line-height: 1.5rem;
}
.message {
margin-top: 0.5rem;
color: #217e69;
font-size: 14px;
line-height: 1.25rem;
}
hr.new1 {
flex: 0 0 50%;
position: relative;
}
.img{
width: 35px;
margin-right: 10px;
}
h6{
font-size: 14px;
color: #595b5f;
font-weight: 600;
padding: 0rem 0.5rem 0rem 0.5rem;
}
@media only screen and (max-width: 600px) {
.card-mob {
max-width: 94.5%!important;
position: absolute;
margin-top: 5rem!important;
// display: none!important;
}
}
// @media only screen and (min-height: 800px) {
// .card-mob {
// max-width: 94.5%!important;
// position: absolute;
// margin-top: 5rem!important;
// // display: none!important;
// }
// }

25
ng-seed/src/app/end-user/summary/summary.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SummaryComponent } from './summary.component';
describe('SummaryComponent', () => {
let component: SummaryComponent;
let fixture: ComponentFixture<SummaryComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SummaryComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(SummaryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

17
ng-seed/src/app/end-user/summary/summary.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component, OnInit } from '@angular/core';
import { ConsultantsListComponent } from '../consultants/consultants-list.component';
import { ServiceListComponent } from '../service-list-details/service-list.component';
@Component({
selector: 'app-summary',
templateUrl: './summary.component.html',
styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

6
ng-seed/src/assets/images/Education.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"/>
<path fill="#217e69" fill-rule="nonzero" d="M21.486 7.718l-8.51-4.484a2.12 2.12 0 0 0-1.936 0L2.53 7.718a.96.96 0 0 0 0 1.715l8.51 4.484a2.12 2.12 0 0 0 1.936 0l8.51-4.484a.973.973 0 0 0 0-1.715zM11.04 15.867L4.95 12.65v2.75c0 .72.403 1.364 1.048 1.715l5.042 2.651a2.12 2.12 0 0 0 1.936 0l5.041-2.651c.645-.351 1.049-1.014 1.049-1.716V12.65l-6.09 3.217a2.12 2.12 0 0 1-1.936 0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 563 B

6
ng-seed/src/assets/images/Languages.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"/>
<path fill="#217e69" fill-rule="nonzero" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

6
ng-seed/src/assets/images/Location.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"/>
<path fill="#217e69" fill-rule="nonzero" d="M11.778 2c4.288 0 7.778 3.435 7.778 7.656a7.562 7.562 0 0 1-1.58 4.627l-5.656 7.448a.68.68 0 0 1-1.085 0L5.58 14.283A7.562 7.562 0 0 1 4 9.656C4 5.435 7.49 2 11.778 2zm0 10.195c1.422 0 2.58-1.139 2.58-2.539 0-1.4-1.158-2.539-2.58-2.539-1.422 0-2.58 1.14-2.58 2.54 0 1.4 1.158 2.538 2.58 2.538z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 523 B

5
ng-seed/src/assets/images/Registration.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8751 14.521C14.0566 14.521 16.6357 11.942 16.6357 8.76052C16.6357 5.57907 14.0566 3 10.8751 3C7.6937 3 5.11462 5.57907 5.11462 8.76052C5.11462 11.942 7.6937 14.521 10.8751 14.521Z" fill="#217e69"/>
<path d="M15.8125 14.5211H5.9375C4.62938 14.5211 3.37473 15.0402 2.449 15.9644C1.52327 16.8887 1.00213 18.1425 1 19.4506C2.14822 20.9859 3.63861 22.2324 5.35282 23.0909C7.06702 23.9495 8.95781 24.3965 10.875 24.3965C12.7922 24.3965 14.683 23.9495 16.3972 23.0909C18.1114 22.2324 19.6018 20.9859 20.75 19.4506C20.7479 18.1425 20.2267 16.8887 19.301 15.9644C18.3753 15.0402 17.1206 14.5211 15.8125 14.5211Z" fill="#217e69"/>
<path d="M10.3264 21.3788C10.2303 21.3789 10.1352 21.36 10.0464 21.3233C9.95765 21.2865 9.87702 21.2325 9.80917 21.1645L8.34621 19.7016C8.20903 19.5644 8.13196 19.3783 8.13196 19.1843C8.13196 18.9903 8.20903 18.8043 8.34621 18.6671C8.48339 18.5299 8.66945 18.4528 8.86346 18.4528C9.05746 18.4528 9.24352 18.5299 9.38071 18.6671L10.3264 19.6129L12.7351 17.2041C12.8723 17.0669 13.0583 16.9899 13.2523 16.9899C13.4463 16.9899 13.6324 17.0669 13.7696 17.2041C13.9068 17.3413 13.9838 17.5274 13.9838 17.7214C13.9838 17.9154 13.9068 18.1014 13.7696 18.2386L10.8437 21.1645C10.7758 21.2325 10.6952 21.2865 10.6064 21.3233C10.5176 21.36 10.4225 21.3789 10.3264 21.3788Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB