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

end user url

Browse Source
This commit is contained in:
bitbucket 2023-03-24 18:01:45 +05:30
parent a7e3e3037b
commit eab89de820
32 changed files with 764 additions and 434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ng-seed/src/app/app.routing.ts
View File

@ -47,6 +47,10 @@ export const AppRoutes: Routes = [{
]
}, {
path: 'customer',
loadChildren: () => import('./end-user/end-user.module').then(m => m.EndUserModule)
},{
path: '',
component: AuthLayoutComponent,
children: [{

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

@ -0,0 +1,77 @@
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div fxLayout="row wrap" fxLayoutAlign="center center">
<div class="column" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<mat-card class="p-2 radius">
<h3 class="base-border summaryHeading">Your Booking Summary</h3>
<mat-card-content>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head"># Booking ID</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: AP-00001</span>
</div>
<div fxFlex.xs="50" fxFlex.sm="25" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" fxLayoutAlign="end">
<div><span class="head">Status:</span><span style="color: green;">Confirmed</span></div>
</div>
</div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Service</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: ENT</span><span> 15mins</span>
</div>
</div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Practitioner</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: Gopi</span>
</div>
</div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Date & Time</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: 27 Mar 2023 03:30</span>
</div>
</div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Contact Details</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: 5689741230</span>
<!-- <br> -->
<!-- <span>gopi@gmail.com</span> -->
</div>
</div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Booked On</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: 27 Mar 2023</span>
</div>
</div>
</mat-card-content>
<div style="border-bottom: 2px solid #000;margin-bottom: 15px;"></div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<!-- <div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<button mat-raised-button><mat-icon>add</mat-icon> Add To Calender</button>
</div> -->
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<button mat-raised-button><mat-icon>download</mat-icon> Download as PDF</button>
</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" fxLayoutAlign="end">
<button mat-raised-button>Book Another Appointment</button>
</div>
</div>
</mat-card>
</div>
</div>

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

@ -0,0 +1,13 @@
.summaryHeading{
text-align: center;
border-bottom: 2px solid #000;
padding: 20px;
}
.head{
color: #7c7f81;
}
mat-toolbar{
background-color: #227f6e;
color:#fff;
}

12
ng-seed/src/app/end-user/consultants/consultants-details/consultants-details.component.spec.ts → ng-seed/src/app/end-user/booking-summary/booking-summary.component.spec.ts
View File

@ -1,20 +1,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ConsultantsDetailsComponent } from './consultants-details.component';
import { BookingSummaryComponent } from './booking-summary.component';
describe('ConsultantsDetailsComponent', () => {
let component: ConsultantsDetailsComponent;
let fixture: ComponentFixture<ConsultantsDetailsComponent>;
describe('BookingSummaryComponent', () => {
let component: BookingSummaryComponent;
let fixture: ComponentFixture<BookingSummaryComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ConsultantsDetailsComponent ]
declarations: [ BookingSummaryComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ConsultantsDetailsComponent);
fixture = TestBed.createComponent(BookingSummaryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

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

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

19
ng-seed/src/app/end-user/business-centers/centers-list.component.ts
View File

@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BusinessService } from 'app/appoinment/business/business-service/business.service';
import { EndUserService } from '../end-user.service';
@Component({
selector: 'app-centers-list',
@ -9,17 +11,28 @@ import { BusinessService } from 'app/appoinment/business/business-service/busine
export class CentersListComponent implements OnInit {
public filterdata = null;
businessList: any;
constructor(public _bus:BusinessService) { }
constructor(public enduser:EndUserService, private router: Router,) { }
ngOnInit(): void {
this.getServicesList()
}
getServicesList() {
let URL = this.router.url;
console.log(URL);
let URL_AS_LIST = URL.split('/');
console.log(URL_AS_LIST);
//this._pd.getTabStatusPdDetails(this.tabStatus)
this._bus.getBusinessListDetails().subscribe(res => {
let params = {
"randStr":URL_AS_LIST[3],
"queryName":URL_AS_LIST[2]
}
console.log(params);
this.enduser.getcusServicesMapDetails(params).subscribe(res => {
if (res.status == 200) {
this.businessList = res.data;
// this.businessList = res.data;
}
});
}

107
ng-seed/src/app/end-user/consultants/consultants-details/consultants-details.component.html
View File

@ -1,107 +0,0 @@
<h4>
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
>
<mat-icon>close</mat-icon>
</button>
</h4>
<h6 class="mb-1">Date & Time: </h6>
<p>{{selected | date:'mediumDate'}}</p>
<div class="d-flex calender-time">
<div class="calender">
<mat-card class="demo-inline-calendar-card">
<mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
</div>
<!-- <h5>Slot Availability</h5> -->
<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">9:00AM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">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 mat-dialog-content class="my-table">
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="field">
<mat-form-field class="mat-pane">
<mat-select placeholder="Select Workspace" formControlName="workspace" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let business of selects" [value]="business.workspace">
{{business.workspace}}
</mat-option>
</mat-select>
<mat-error *ngIf="workspace.hasError('required')">Please choose an Workspace</mat-error>
<mat-error *ngIf="workspace.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
</div>
</form>
</div>
</div>
</div>
<div class="success">
<p>I have read and un derstood the Terms & Conditions of usage of 24x7,
Privacy policy, Refund Policy and consent to the same.</p>
</div>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" >PROCEED</button>

49
ng-seed/src/app/end-user/consultants/consultants-details/consultants-details.component.scss
View File

@ -1,49 +0,0 @@
$color_red_orange_approx: #4caf50;
$white: #fff;
.button{
margin-bottom: 1rem;
background-color: #ffff !important;
margin-top: -3rem;
float: right;
}
.calender{
margin-left: -1rem;
padding-right: 6rem;
}
mat-card{
width: 140%;
}
::ng-deep .mat-tab-label {
margin-left: -3rem!important;
}
.img{
width: 50px;
}
.btn-red {
background-color: $color_red_orange_approx;
color: $white;
border: 1px solid $color_red_orange_approx;
float: right;
}
h6{
color: #0087ba;
font-weight: 600;
}
.primary{
background-color: #658F9B;
color: white;
}
::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;
}

59
ng-seed/src/app/end-user/consultants/consultants-details/consultants-details.component.ts
View File

@ -1,59 +0,0 @@
import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export interface DialogData {
animal: string;
name: string;
}
export interface UsersData {
workspace: string;
}
@Component({
selector: 'app-consultants-details',
templateUrl: './consultants-details.component.html',
styleUrls: ['./consultants-details.component.scss']
})
export class ConsultantsDetailsComponent implements OnInit {
form: FormGroup;
local_data:any;
selected: Date | null;
name = 'Angular';
date = new Date();
control = new FormControl(
{
from: this.date,
// to: new Date(this.date.getTime() + 1 * 24 * 60 * 60 * 1000),
},
Validators.required
);
workspace = new FormControl('', [Validators.required]);
selects = [
{workspace: 'test 1'},
{workspace: 'test 2'},
{workspace: 'test 3'},
];
constructor(
public dialogRef: MatDialogRef<ConsultantsDetailsComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
onNoClick(): void {
this.dialogRef.close();
}
close() {
// console.log(this.form.value);
this.dialogRef.close();
}
ngOnInit(): void {
this.form = new FormGroup({
workspace: new FormControl('', [Validators.required]),
});
console.log(this.local_data, this.selects)
// this.form.controls['note'].setValue('Sample')
this.form.patchValue(this.local_data)
}
submit(){
console.log(this.form.value);
}
}

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

@ -1,17 +1,21 @@
<mat-toolbar>
<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">consultant List</h3>
<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 appearance="fill">
<mat-label>Search consultant</mat-label>
<mat-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 fxLayout="row wrap mt-2 mb-2">
<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">
@ -23,21 +27,21 @@
<div class="consultant-card-cover">
<div>
<div class="text-center consultant-thumb">
<img class="img-responsive img-circle" src="{{consultant.image}}" width="120" height="120" alt="user list image">
<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.name}}</h5>
<span class="silk-block consultant-span">{{consultant.specialist}}</span><br>
<span class="silk-block mb-1 consultant-year">{{consultant.year}}</span><br>
<span class="silk-block mb-1 consultant-qualification">{{consultant.qualification}}</span><br>
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.payment}}</span> </span><br>
<h5 class="text-primary">{{consultant.userName}}</h5>
<span class="silk-block consultant-span">{{consultant.specialist || "ENT" }}</span><br>
<span class="silk-block mb-1 consultant-year">{{consultant.year || "1 YRS EXP"}}</span><br>
<span class="silk-block mb-1 consultant-qualification">{{consultant.qualification || "MBBS"}}</span><br>
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.payment || 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.language}}</span>
<span class="mt-1 pl-1 consultant-language">{{consultant.language || "English"}}</span>
</span>
<span class="d-flex mb">
<mat-icon>location_on</mat-icon>
@ -60,4 +64,5 @@
</div>
</div>
</ng-scrollbar>
</ng-scrollbar>
</div>

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

@ -9,6 +9,9 @@ $black_60: rgba(0, 0, 0, 0.6);
padding: 0rem 0.5rem 1rem;
padding-bottom: 4rem;
}
.flexRow{
display: flex !important;
}
.page-h{
color: #217e69;
font-family: sans-serif;
@ -113,4 +116,8 @@ $black_60: rgba(0, 0, 0, 0.6);
mat-icon{
color: #979797;
font-size: 20px;
}
mat-toolbar{
background-color: #227f6e;
color:#fff;
}

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

@ -1,7 +1,6 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { ConsultantsDetailsComponent } from '../consultants-details/consultants-details.component';
@Component({
selector: 'app-consultants-list',
@ -11,93 +10,104 @@ import { ConsultantsDetailsComponent } from '../consultants-details/consultants-
export class ConsultantsListComponent implements OnInit {
animal: string;
name: string;
consultants:any =[];
public filterdata = null;
constructor(private router:Router,public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(ConsultantsDetailsComponent, {
width: '60%',
data: {name: this.name, animal: this.animal}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
}
ngOnInit(): void {
}
consultants: Object[] = [{
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'
let tmp = localStorage.getItem('cusServiceData')
let practitioner = JSON.parse(tmp)
console.log(practitioner)
let arr_val=[]
practitioner.forEach(element => {
},{
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'
element.user.forEach(e => {
arr_val.push(e)
});
});
let filter = arr_val.filter(arr=>{return arr.role == "PRACTITIONER" && arr.busId =="abc123"})
console.log(arr_val,filter)
this.consultants = filter;
// 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'
// },{
// 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'
// }
// ];
}
];
goToSlotBooking(){
this.router.navigate(['/slot-booking'])
let URL = this.router.url;
console.log(URL)
// console.log(URL+"/"+data.randStr+"/practitioner")
this.router.navigate([URL+"/slot"])
}
}

85
ng-seed/src/app/end-user/customer-info/customer-info.component.html Normal file
View File

@ -0,0 +1,85 @@
<ng-scrollbar class="scrollHV">
<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">
<h2 class="base-border">Customer Information</h2>
<form [formGroup]="form" (ngSubmit)="submit()">
<div fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field style="width: 100%">
<input matInput placeholder="Name" type="text" name="cusName" formControlName="cusName" required>
<mat-error *ngIf="myError('cusName', 'required')">Name is required</mat-error>
<mat-error *ngIf="myError('cusName', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="E Mail" type="email" name="email" formControlName="email" required>
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
Email is required
</mat-error>
</mat-form-field>
<div [ngSwitch]="otpData">
<div fxLayout="row">
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
<mat-form-field style="width: 100%">
<input matInput placeholder="Phone No" type="text" name="phone" formControlName="phoneNo" required>
<mat-error *ngIf="myError('phoneNo', 'required')">Phone No is required</mat-error>
<mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
</div>
<div *ngIf="verifyOTP != '1'" fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
<button mat-raised-button (click)="getOPT(1)" color="primary" class="mr-1 mb-1">Get OTP</button>
</div>
<span *ngIf="verifyOTP == '1'"><mat-icon style="color: #4CAF50;">verified</mat-icon></span>
</div>
<div *ngSwitchCase="1">
<div fxLayout="row" *ngIf="verifyOTP != '1'">
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
<mat-form-field style="width: 100%">
<input matInput placeholder="Enter OTP" #otp type="text" maxlength="6">
</mat-form-field>
</div>
<div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
<button (click)="verify(1)" mat-raised-button class="mr-1 mb-1" matTooltip="VERIFY" matTooltipPosition="below" style="background-color: #4CAF50;color:#fff;">VERIFY</button>
</div>
</div>
<div fxLayout="row" *ngIf="verifyOTP != '1'">
<button *ngIf="timeLeft != 0" mat-raised-button color="primary">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
<button *ngIf="timeLeft == 0" mat-raised-button color="primary" (click)="resendOTP()">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
</div>
</div>
</div>
<mat-form-field style="width: 100%">
<input matInput placeholder="Address" type="text" name="address" formControlName="address_1">
<mat-error *ngIf="myError('address_1', 'required')">Address is required</mat-error>
<mat-error *ngIf="myError('address_1', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%" class="mb-1">
<input matInput placeholder="State" type="text" name="state" formControlName="state">
<mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
<mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%" class="mb-1">
<input matInput placeholder="City" type="text" name="city" formControlName="city">
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%" class="mb-1">
<input matInput placeholder="Pincode" type="text" name="pincode" formControlName="pincode">
<mat-error *ngIf="myError('pincode', 'required')">City is required</mat-error>
<mat-error *ngIf="myError('pincode', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<button class="mat-green" type="submit" mat-raised-button>Submit</button>
</div>
</form>
</mat-card>
</div>
</div>
</ng-scrollbar>

7
ng-seed/src/app/end-user/customer-info/customer-info.component.scss Normal file
View File

@ -0,0 +1,7 @@
.radius{
border-radius: 10px !important;
}
mat-toolbar{
background-color: #227f6e;
color:#fff;
}

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

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

91
ng-seed/src/app/end-user/customer-info/customer-info.component.ts Normal file
View File

@ -0,0 +1,91 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, RequiredValidator, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { EndUserService } from '../end-user.service';
@Component({
selector: 'app-customer-info',
templateUrl: './customer-info.component.html',
styleUrls: ['./customer-info.component.scss']
})
export class CustomerInfoComponent implements OnInit {
form: FormGroup;
otpData: any = 0;
timeLeft: number = 0;
interval;
verifyOTP: any = 0;
constructor(private router: Router,private formBuilder: FormBuilder,public _cus:EndUserService) {}
ngOnInit(): void {
this.form = new FormGroup({
cusName: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
),]),
address_1: new FormControl('', [Validators.maxLength(50)]),
city: new FormControl('', [Validators.maxLength(10)]),
state: new FormControl('', [Validators.maxLength(10)]),
pincode: new FormControl('',[Validators.maxLength(6)]),
phoneNo: new FormControl('', [Validators.required, Validators.maxLength(10)]),
});
}
public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName);
}
submit(){
console.log(this.form.value)
console.log('add')
let row_obj = this.form.value
console.log(row_obj)
let addFormData = {
cusName: row_obj.cusName,
email: row_obj.email,
address_1: row_obj.address_1,
phoneNo: row_obj.phoneNo,
pincode: row_obj.pincode,
state: row_obj.state,
city: row_obj.city,
};
this._cus.addCusDetails(addFormData).subscribe(res => {
if (res.status == 200) {
console.log(res)
let URL = this.router.url;
console.log(URL)
this.router.navigate([URL+"/pt"])
}
});
}
getOPT(event){
this.otpData = event
this.timeLeft = 10;
this.interval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft--;
} else {
clearInterval(this.interval);
}
},1000)
}
resendOTP() {
this.timeLeft = 10;
this.interval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft--;
} else {
clearInterval(this.interval);
}
},1000)
}
verify(event){
this.verifyOTP = event
}
}

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

@ -1,7 +1,10 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BookingSummaryComponent } from './booking-summary/booking-summary.component';
import { CentersListComponent } from './business-centers/centers-list.component';
import { ConsultantsListComponent } from './consultants/consultants-list.component';
import { CustomerInfoComponent } from './customer-info/customer-info.component';
import { PaymentComponent } from './payment/payment.component';
import { SearchCategoryComponent } from './search-category/search-category.component';
import { ServiceListComponent } from './service-list-details/service-list.component';
import { SlotBookingDetailsComponent } from './slot-booking/slot-booking-details.component';
@ -28,6 +31,39 @@ const routes: Routes = [
path: 'services',
component: ServiceListComponent
},
{
path: 'service/:randstr',
component: ServiceListComponent
},
{
path: 'consultant/:randstr',
component: ConsultantsListComponent
},
{
path: 'busniness/:randstr',
component: ServiceListComponent
},
{
path: 'busniness/:randstr/:randstrs/practitioner',
component: ConsultantsListComponent
},
{
path: 'busniness/:randstr/:randstrs/practitioner/slot',
component: SlotBookingDetailsComponent
},
{
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus',
component: CustomerInfoComponent
},
{
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus/pt',
component: PaymentComponent
},
{
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus/pt/bts',
component: BookingSummaryComponent
},
// {
// path: 'calendar-list',
// component: CalendarListComponent

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

@ -10,8 +10,11 @@ import { ServiceListComponent } from './service-list-details/service-list.compon
import { SearchCategoryComponent } from './search-category/search-category.component';
import { CentersListComponent } from './business-centers/centers-list.component';
import { ConsultantsListComponent } from './consultants/consultants-list.component';
import { DialogBoxComponent } from './service-list-details/dialog-box/dialog-box.component';
import { ConsultantsDetailsComponent } from './consultants/consultants-details/consultants-details.component';
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';
@NgModule({
@ -21,15 +24,17 @@ import { ConsultantsDetailsComponent } from './consultants/consultants-details/c
SearchCategoryComponent,
ConsultantsListComponent,
CentersListComponent,
DialogBoxComponent,
ConsultantsDetailsComponent
],
PaymentComponent,CustomerInfoComponent, BookingSummaryComponent
],
imports: [
CommonModule,
EndUserRoutingModule,
DemoMaterialModule,
NgScrollbarModule,
SharedModule
],
providers:[
EndUserService
]
})
export class EndUserModule { }

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

@ -1,9 +1,57 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'environments/environment';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class EndUserService {
constructor() { }
private apiUrl = environment.apiEndpoint;
constructor(private _http: HttpClient) { }
getServicesListDetails(): Observable<any> {
console.log('IN')
return this._http.get<any[]>(this.apiUrl + "getServicesDetails ")
// .pipe(
// catchError(this.handleError('role', []))
// )
}
addFormDetails(addParams): Observable<any> {
return this._http.post(this.apiUrl + 'CreateService', addParams)
}
getcusServicesMapDetails(Params): Observable<any> {
return this._http.post(this.apiUrl + 'getcusServicesMapDetails', Params)
}
getBusinessListDetails(): Observable<any>{
return this._http.get<any[]>(this.apiUrl + "businessDetailList")
.pipe(
catchError(this.handleError('role', []))
)
}
getUsersListDetails(): Observable<any> {
console.log('IN')
return this._http.get<any[]>(this.apiUrl + "getusers")
// .pipe(
// catchError(this.handleError('role', []))
// )
}
addCusDetails(addParams): Observable<any> {
return this._http.post(this.apiUrl + 'CreateCustomers', addParams)
// .pipe(
// catchError(this.handleError('role', []))
// )
}
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
throw new Error('Method not implemented.');
}
}

42
ng-seed/src/app/end-user/payment/payment.component.html Normal file
View File

@ -0,0 +1,42 @@
<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">
<h3 class="base-border">Payment By</h3>
<ng-template mat-tab-label>Credit/Debit Cards</ng-template>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="submit()">
<div fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field style="width: 100%">
<input matInput placeholder="Card Holder Name" type="text" name="name" formControlName="cardName" required>
<mat-error *ngIf="myError('cardName', 'required')">Name is required</mat-error>
<!-- <mat-error *ngIf="myError('cardName', 'maxlength')">Limit exceed</mat-error> -->
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Card Number" type="text" name="cardno" formControlName="cardNo" required>
<mat-error *ngIf="myError('cardNo', 'required')">Name is required</mat-error>
<mat-error *ngIf="myError('cardNo', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="CVV" type="text" name="name" formControlName="cvv" required>
<mat-error *ngIf="myError('cvv', 'required')">Name is required</mat-error>
<mat-error *ngIf="myError('cvv', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Expiration Date: 01/16" type="text" name="ctry" formControlName="expiryDate" required>
<mat-error *ngIf="myError('expiryDate', 'required')">Name is required</mat-error>
<mat-error *ngIf="myError('expiryDate', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<button class="mat-green" type="submit" mat-raised-button>Submit</button>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>

4
ng-seed/src/app/end-user/payment/payment.component.scss Normal file
View File

@ -0,0 +1,4 @@
mat-toolbar{
background-color: #227f6e;
color:#fff;
}

12
ng-seed/src/app/end-user/service-list-details/dialog-box/dialog-box.component.spec.ts → ng-seed/src/app/end-user/payment/payment.component.spec.ts
View File

@ -1,20 +1,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddUserComponent } from './add-user.component';
import { PaymentComponent } from './payment.component';
describe('AddUserComponent', () => {
let component: AddUserComponent;
let fixture: ComponentFixture<AddUserComponent>;
describe('PaymentComponent', () => {
let component: PaymentComponent;
let fixture: ComponentFixture<PaymentComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddUserComponent ]
declarations: [ PaymentComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AddUserComponent);
fixture = TestBed.createComponent(PaymentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

35
ng-seed/src/app/end-user/payment/payment.component.ts Normal file
View File

@ -0,0 +1,35 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.scss']
})
export class PaymentComponent implements OnInit {
form: FormGroup;
constructor(private router:Router) { }
ngOnInit(): void {
this.form = new FormGroup({
cardName: new FormControl('', [Validators.required]),
cardNo: new FormControl('', [Validators.required, Validators.maxLength(16)]),
cvv: new FormControl('', [Validators.required, Validators.maxLength(3)]),
expiryDate: new FormControl('', [Validators.required]),
});
}
public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName);
}
submit(){
console.log(this.form.value)
let URL = this.router.url;
console.log(URL)
this.router.navigate([URL+"/bts"])
}
}

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

@ -1,20 +0,0 @@
<h5 mat-dialog-title> <strong>{{action}} Services</strong>
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
><mat-icon>close</mat-icon></button></h5>
<form [formGroup]="form" (ngSubmit)="submit()">
<div mat-dialog-content class="my-table">
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder="servicesName" matInput formControlName="servicesName">
<mat-error *ngIf="myError('servicesName', 'required')">ServiceName is required</mat-error>
<mat-error *ngIf="myError('servicesName', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<ng-template #elseTemplate>
Sure to delete <b>{{local_data.servicesName}}</b>?
</ng-template>
</div>
<div mat-dialog-actions>
<button mat-button type="submit" class="mat-green" mat-raised-button >{{action}}</button>
<button mat-button (click)="closeDialog()" >Cancel</button>
</div>
</form>

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

@ -1,11 +0,0 @@
.button{
// float: right;
margin-bottom: 1rem;
background-color: #ffff;
margin-top: -1rem;
// margin-left: 6rem;
float: right;
}
.mat-pane{
width: 20rem;
}

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

@ -1,58 +0,0 @@
import { Component, Inject, OnInit, Optional } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Router } from '@angular/router';
export interface UsersData {
servicesName: string;
id: number;
}
@Component({
selector: 'app-add-service',
templateUrl: './add-service.component.html',
styleUrls: ['./add-service.component.scss']
})
export class AddServiceComponent implements OnInit {
form: FormGroup;
local_data:any;
action:string;
constructor(private router: Router,private formBuilder: FormBuilder,
public dialogRef: MatDialogRef<AddServiceComponent>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
console.log(data);
this.local_data = {...data};
this.action = this.local_data.action;
}
get f(){
return this.form.controls;
}
close() {
this.dialogRef.close();
}
closeDialog(){
this.dialogRef.close({event:'Cancel'});
}
ngOnInit() {
this.form = new FormGroup({
servicesName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
});
this.form.patchValue(this.local_data)
}
public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName);
}
submit(){
console.log(this.form.value);
let tmp = this.form.value
tmp.serviceId = this.local_data.serviceId
this.dialogRef.close({event:this.action,data:tmp});
console.log(this.form.value);
console.log(this.action,this.local_data)
}
}

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

@ -1,3 +1,8 @@
<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>
@ -21,12 +26,14 @@
</div>
</div>
<mat-card-title-group>
<mat-card-title class="service-info mb">{{serviceListDetails.servicesName}}</mat-card-title>
<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>
@ -34,3 +41,10 @@
</div>
</div>
</div>
</div>
<footer>
<p>
© 2021 Venba Information Technology Pvt Ltd. All Rights Reserved
</p>
</footer>

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

@ -113,3 +113,15 @@ $main-color: #f44336;
::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
background-color: #fff0 !important;
}
mat-toolbar{
background-color: #227f6e;
color:#fff;
}
footer {
background-color: #d1d1d1;
height:50px;
width: 100%;
position: absolute;
bottom: 0;
}

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

@ -1,9 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { AddServiceComponent } from 'app/appoinment/service-list-details/add-service/add-service.component';
import Swal from 'sweetalert2';
import { AddServiceComponent } from '../add-service/add-service.component';
import { ApiServiceService } from '../service-api-services/api-service.service';
import { EndUserService } from '../end-user.service';
@Component({
selector: 'app-service-list',
@ -22,9 +23,11 @@ export class ServiceListComponent implements OnInit {
id: number;
serviceId: number;
public filterdata = null;
servicesList_array:any =[];
public servicesList:any = new MatTableDataSource();
full_data: any=[];
constructor(public _api:ApiServiceService, public dialog: MatDialog) { }
constructor(public _api:EndUserService, public dialog: MatDialog,public enduser:EndUserService, private router: Router,) { }
ngOnInit(): void {
@ -46,10 +49,51 @@ export class ServiceListComponent implements OnInit {
}
getServicesList() {
let URL = this.router.url;
console.log(URL);
let URL_AS_LIST = URL.split('/');
console.log(URL_AS_LIST);
//this._pd.getTabStatusPdDetails(this.tabStatus)
let params = {
"randStr":URL_AS_LIST[3],
"queryName":URL_AS_LIST[2]
}
console.log(params);
this.enduser.getcusServicesMapDetails(params).subscribe(res => {
if (res.status == 200) {
console.log(res)
this.full_data = res['data']
let tmp =[];
localStorage.setItem('cusServiceData',JSON.stringify(res['data']))
res['data'].forEach(element => {
// tmp.push(element.service)
element.service.forEach(e => {
this.servicesList_array.push(e)
});
});
console.log(tmp, this.servicesList_array)
this.servicesList_array
let result = this.servicesList_array.filter((obj, index, self) =>
index === self.findIndex((t) => (
t.serviceId === obj.serviceId
))
);
console.log(result)
this.servicesList = result
// this.businessList = res.data;
}
});
//this._pd.getTabStatusPdDetails(this.tabStatus)
this._api.getServicesListDetails().subscribe(res => {
if (res.status == 200) {
this.servicesList = res.data;
// this.servicesList = res.data;
// console.log(this.servicesList)
// this.dataSource = res.data.length;
// console.log(this.dataSource)
@ -165,5 +209,12 @@ let updatevalue = { serviceId: row_obj.serviceId,
// alert(error.html_format);
});
}
goto(data){
let URL = this.router.url;
console.log(URL,data)
console.log(URL+"/"+data.randStr+"/practitioner")
this.router.navigate([URL+"/"+data.randStr+"/practitioner"])
}
}

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

@ -1,5 +1,9 @@
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div class="container mt-1">
<mat-card>
<div fxLayout="row wrap">
<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>
@ -27,8 +31,8 @@
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary">9:00AM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">9:30AM</button>
<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>
@ -87,6 +91,7 @@
</div>
</div>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" >PROCEED</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" (click)="submit()">PROCEED</button>
</div>
</mat-card>
</mat-card>
</div>

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

@ -1,4 +1,4 @@
$color_red_orange_approx: #4caf50;
$color_red_orange_approx: #107c14;
$white: #fff;
.button{
margin-bottom: 1rem;
@ -46,4 +46,9 @@ h6{
color: #0087ba;
font-weight: 600;
border-radius: 10px;
}
}
mat-toolbar{
background-color: #227f6e;
color:#fff;
}

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

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-slot-booking-details',
@ -9,6 +10,8 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
export class SlotBookingDetailsComponent implements OnInit {
form: FormGroup;
local_data:any;
element: HTMLElement;
slot_array:any=[];
selected: Date | null;
name = 'Angular';
date = new Date();
@ -25,7 +28,7 @@ export class SlotBookingDetailsComponent implements OnInit {
{workspace: 'test 2'},
{workspace: 'test 3'},
];
constructor() { }
constructor(private router:Router,) { }
ngOnInit(): void {
@ -37,8 +40,30 @@ console.log(this.local_data, this.selects)
// this.form.controls['note'].setValue('Sample')
this.form.patchValue(this.local_data)
}
submit(){
console.log(this.form.value);
}
// submit(){
// console.log(this.form.value);
// }
toggleActive(event:any,param:any){
// debugger;
// event.preventDefault();
if(this.element !== undefined){
this.element.style.backgroundColor = "#658f9b";
}
var target = event.currentTarget;
target.style.backgroundColor = "#0c8f00";
console.log(param)
this.slot_array.push(param)
}
submit(){
console.log( this.slot_array)
let URL = this.router.url;
console.log(URL)
this.router.navigate([URL+"/cus"])
}
}