Merge branch 'master' of bitbucket.org:venbainformationtechnology/appointments_frontend
This commit is contained in:
Smart
commit
501442e44e
@ -38,7 +38,7 @@
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="datetime">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Date and Time </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.appoinmentDate | date:'dd-MMM-YYYY'}}, {{row.appoinmentSlots | date:'shortTime'}} </mat-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.appoinmentDate | date:'dd-MMM-YYYY'}}, {{row.appoinmentSlots[0] | date:'shortTime'}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
|
||||
@ -76,30 +76,58 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
}
|
||||
|
||||
getAppoinmentsList() {
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
this._app.getAppoinmentsListDetails().subscribe(res => {
|
||||
|
||||
if (res.status == 200) {
|
||||
this.isLoading = false
|
||||
this.appoinmentsList = res.data;
|
||||
localStorage.setItem('busId', res.data[0].busId
|
||||
)
|
||||
console.log(this.appoinmentsList)
|
||||
this.appointmentListLength = res.data.length;
|
||||
console.log(this.appointmentListLength)
|
||||
this.appointmentListSource['data'] = this.appoinmentsList;
|
||||
console.log(this.appointmentListSource)
|
||||
this.recordStatus=false;
|
||||
console.log(this.appoinmentsList)
|
||||
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
this.appoinmentsList.forEach(element => {
|
||||
console.log(element)
|
||||
element.appoinmentSlots = JSON.parse(element.appoinmentSlots)
|
||||
});
|
||||
console.log(this.appoinmentsList)
|
||||
|
||||
|
||||
if(user_role == 'PRACTITIONER'){
|
||||
console.log('if ')
|
||||
let id = localStorage.getItem('user_id')
|
||||
console.log(id)
|
||||
this.appointmentListSource['data'] = this.appoinmentsList;
|
||||
this.appointmentListSource
|
||||
console.log(this.appointmentListSource)
|
||||
let filter = this.appointmentListSource['data'].filter(arr=>{return arr["ServicesMapDetail.userId"] == id})
|
||||
console.log(filter)
|
||||
filter.sort((a: any, b: any) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
this.appointmentListSource['data'] = filter
|
||||
this.appointmentListLength = filter.length;
|
||||
console.log(this.appointmentListSource)
|
||||
|
||||
} else {
|
||||
console.log('else')
|
||||
this.appointmentListLength = res.data.length;
|
||||
console.log(this.appointmentListLength)
|
||||
this.appoinmentsList.sort((a: any, b: any) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
this.appointmentListSource['data'] = this.appoinmentsList;
|
||||
console.log(this.appointmentListSource)
|
||||
|
||||
}
|
||||
this.recordStatus=false;
|
||||
}
|
||||
else{
|
||||
this.appoinmentsList=[];
|
||||
@ -161,7 +189,7 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(DialogBoxComponent, {
|
||||
width: '55%',
|
||||
width: '40%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
|
||||
@ -10,7 +10,8 @@ import { DialogBoxComponent } from './dialog-box/dialog-box.component';
|
||||
import { DemoMaterialModule } from 'app/shared/demo.module';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { NotifierModule, NotifierOptions } from 'angular-notifier';
|
||||
import { DataTableModule } from 'ornamentum'
|
||||
import { DataTableModule } from 'ornamentum';
|
||||
import { AppointmentAddcustomerComponent } from './appointment-addcustomer/appointment-addcustomer.component'
|
||||
// import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
|
||||
|
||||
|
||||
@ -58,7 +59,8 @@ const customNotifierOptions: NotifierOptions = {
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppoinmentsListComponent,
|
||||
DialogBoxComponent
|
||||
DialogBoxComponent,
|
||||
AppointmentAddcustomerComponent
|
||||
],
|
||||
imports: [
|
||||
DemoMaterialModule,
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
|
||||
<mat-card class="cardDesign2" >
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<div class="pad">
|
||||
<h6 class="new">+ New Customer <button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" ><mat-icon>close</mat-icon></button></h6>
|
||||
|
||||
<mat-form-field appearance="outline" class="card-mat-pane">
|
||||
<mat-label>Name</mat-label>
|
||||
<input placeholder=" Name" formControlName="name" matInput>
|
||||
<!-- <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 appearance="outline" class="card-mat-pane">
|
||||
<mat-label>Email</mat-label>
|
||||
<input type="email" placeholder=" Email" formControlName="email" matInput >
|
||||
<!-- <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="myError('email', 'required')">email is required</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>
|
||||
<mat-form-field appearance="outline" class="card-mat-pane">
|
||||
<mat-label>Phone</mat-label>
|
||||
<input placeholder=" Phone" matInput formControlName="phoneNo">
|
||||
<!-- <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error> -->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="popup-button">
|
||||
<!-- <span class="buttons cancel" (click)="close()">Cancel</span> -->
|
||||
<button type="button"class="buttons cancel" (click)="close()" >Cancel</button>
|
||||
<button type="submit"class="buttons add" (click)="save()" >Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
@ -0,0 +1,252 @@
|
||||
$color_red_orange_approx: #107c14;
|
||||
$white: #fff;
|
||||
$black_10: rgba(0, 0, 0, 0.1);
|
||||
$black_30: rgba(0, 0, 0, 0.3);
|
||||
$icon-size: 3rem;
|
||||
$icon-color: #D8D8D8;
|
||||
$main-color: #f44336;
|
||||
$tem-color : #217e69;
|
||||
.mat-pane{
|
||||
width: 27rem;
|
||||
}
|
||||
.button{
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff!important;
|
||||
margin-top: -1rem;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
::ng-deep body .mat-card {
|
||||
box-shadow:none!important;
|
||||
}
|
||||
|
||||
// @include media-breakpoint-down(lg) {
|
||||
// padding-top: 150px;
|
||||
// }
|
||||
// @include media-breakpoint-down(md) {
|
||||
// padding-top: 100px;
|
||||
// }
|
||||
// @include media-breakpoint-down(sm) {
|
||||
// padding-top: 100px;
|
||||
// }
|
||||
|
||||
|
||||
// @media only screen and (max-width: 600px) {
|
||||
// .cdk-overlay-pane{
|
||||
// width: 90%!important;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (max-width: 959px){
|
||||
.cdk-overlay-pane{
|
||||
width: 90%!important;
|
||||
}
|
||||
}
|
||||
|
||||
.field{
|
||||
display: flex;
|
||||
}
|
||||
.label-container{
|
||||
flex: 1;
|
||||
color: #666;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
width: 100px;
|
||||
flex: none;
|
||||
margin-right: 20px;
|
||||
align-self: flex-start;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
line-height: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.Date-container{
|
||||
margin-right: 40px!important;
|
||||
}
|
||||
// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
|
||||
// margin: 0.25em 0;
|
||||
// width: 175%!important;
|
||||
// }
|
||||
.mate{
|
||||
width: 43% !important;
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.field-inline{
|
||||
display: inline-flex;
|
||||
}
|
||||
// ::ng-deep .swal2-height-auto {
|
||||
// // height: auto!important;
|
||||
// }
|
||||
::ng-deep .mat-dialog-content {
|
||||
max-height: 75vh!important;
|
||||
overflow: unset!important;
|
||||
// overflow: hidden!important;
|
||||
}
|
||||
::ng-deep .mat-dialog-container{
|
||||
overflow: hidden!important;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 190px);
|
||||
}
|
||||
.notes{
|
||||
margin-left: 7.5rem;
|
||||
margin-top: 2rem;
|
||||
color: #666;
|
||||
}
|
||||
//popup
|
||||
.card {
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
transition: 0.3s;
|
||||
width: 100%;
|
||||
// padding: 10px;
|
||||
}
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background: #52518F;
|
||||
color: #ffff;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
// display: flex;
|
||||
}
|
||||
.days{
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
}
|
||||
// .flexxx{
|
||||
|
||||
// display: flex;
|
||||
// // margin-top: 1rem;
|
||||
// // border-top:1px solid #ccc;
|
||||
// }
|
||||
// .date-time{
|
||||
// position: absolute;
|
||||
// // top: -11px;
|
||||
// bottom: 0px;
|
||||
// }
|
||||
// .date-position{
|
||||
// position: relative;
|
||||
// }
|
||||
.add-customer{
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.navStyle{
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #227f6e;
|
||||
color: #fff;
|
||||
}
|
||||
.innerdivs{
|
||||
width:100%;
|
||||
// float:left;
|
||||
}
|
||||
.innerdivs2{
|
||||
width:100%;
|
||||
// float:left;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
.cardDesign{
|
||||
border: 1px solid #e8edef;
|
||||
width: 89%;
|
||||
background-color: #227f6e21;
|
||||
// box-shadow: 0 2px 0 rgb(0 0 0 / 3%)
|
||||
}
|
||||
.hoverButton{
|
||||
background: $white;
|
||||
// box-shadow: 0 2px 6px $tem-color;
|
||||
transition: all 0.1s ease-in-out 0s;
|
||||
&:hover {
|
||||
box-shadow: 0 0 8px $tem-color;
|
||||
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
.primary{
|
||||
background-color: #00866e00;
|
||||
color: brown;
|
||||
width: auto;
|
||||
border: 1px solid brown;
|
||||
cursor: pointer;
|
||||
}
|
||||
.clickedSlot{
|
||||
color: white !important;
|
||||
background-color: brown !important;
|
||||
cursor: pointer !important;
|
||||
width: auto;
|
||||
}
|
||||
.bookedSlot{
|
||||
background-color: darkgrey;
|
||||
color: white;
|
||||
width: 6rem;
|
||||
cursor: no-drop !important;
|
||||
}
|
||||
.newCustomer{
|
||||
color: #227f6e;
|
||||
text-align: center;
|
||||
border: 1px solid #e8edef;
|
||||
}
|
||||
|
||||
.cardDesign2{
|
||||
border: 1px dashed #227f6e;
|
||||
width: 75%;
|
||||
height: 348px;
|
||||
margin-left: 3rem;
|
||||
background-color: #fcfcfc;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.card-mat-pane{
|
||||
width: 20rem;
|
||||
}
|
||||
.new{
|
||||
color: #227f6e;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
.popup-button {
|
||||
// margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
.cancel {
|
||||
background: #F5F5F5;
|
||||
color: #111;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttons {
|
||||
width: 50%;
|
||||
background: #FFF;
|
||||
color: #111;
|
||||
font-size: 15px;
|
||||
// font-family: zohopuvi-medium;
|
||||
text-align: center;
|
||||
border-top: 1px solid #E2E2E2;
|
||||
padding: 10px;
|
||||
-webkit-transition: all .2s ease-in;
|
||||
-moz-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
.add {
|
||||
background-color: #4caf50;
|
||||
color: #FFF;
|
||||
border-top: 1px solid #4caf50;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pad{
|
||||
padding: 20px !important;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AppointmentAddcustomerComponent } from './appointment-addcustomer.component';
|
||||
|
||||
describe('AppointmentAddcustomerComponent', () => {
|
||||
let component: AppointmentAddcustomerComponent;
|
||||
let fixture: ComponentFixture<AppointmentAddcustomerComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AppointmentAddcustomerComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AppointmentAddcustomerComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,52 @@
|
||||
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { AppointmentsService } from '../appointments-service/appointments.service';
|
||||
import { CustomersService } from 'app/appoinment/customers/customers-service/customers.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-appointment-addcustomer',
|
||||
templateUrl: './appointment-addcustomer.component.html',
|
||||
styleUrls: ['./appointment-addcustomer.component.scss']
|
||||
})
|
||||
export class AppointmentAddcustomerComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
@Output() childButtonEvent = new EventEmitter();
|
||||
constructor(public _app:AppointmentsService,public _cus:CustomersService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.form = new FormGroup({
|
||||
name: new FormControl('', [Validators.required]),
|
||||
email: new FormControl('', [Validators.required]),
|
||||
phoneNo: new FormControl('', [Validators.required]),
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
save(){
|
||||
|
||||
}
|
||||
close(){
|
||||
|
||||
}
|
||||
submit(){
|
||||
|
||||
console.log(this.form.value)
|
||||
|
||||
|
||||
|
||||
let form ={
|
||||
"cusName":this.form.value.name,
|
||||
"email":this.form.value.email,
|
||||
"phoneNo":this.form.value.phoneNo,
|
||||
"busId":localStorage.getItem('busId')
|
||||
|
||||
}
|
||||
this._cus.addFormDetails(form).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.childButtonEvent.emit(res);
|
||||
// this._app.customerlist.next(res)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,16 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { environment } from 'environments/environment';
|
||||
import { Observable } from 'rxjs';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AppointmentsService {
|
||||
|
||||
|
||||
public customerlist:BehaviorSubject<any> = new BehaviorSubject<any>([]);
|
||||
public customerlist_observable$ = this.customerlist.asObservable();
|
||||
private apiUrl = environment.apiEndpoint;
|
||||
constructor(private _http: HttpClient) { }
|
||||
|
||||
@ -33,6 +35,10 @@ export class AppointmentsService {
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
getSlots(Params){
|
||||
|
||||
return this._http.post(this.apiUrl + 'getSlots', Params)
|
||||
}
|
||||
|
||||
|
||||
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
|
||||
|
||||
@ -1,225 +1,125 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title>
|
||||
<strong>{{action}} Appoinment</strong>
|
||||
<!-- <mat-card class="settings-panel" > -->
|
||||
<h5 mat-dialog-title> <strong>{{action}} Appoinment</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</h5>
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div mat-dialog-content class="my-table">
|
||||
><mat-icon>close</mat-icon></button></h5>
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div mat-dialog-content class="my-table">
|
||||
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Business
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Business" formControlName="busname" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of name" [value]="business.busname">
|
||||
{{business.busname}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Business</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<!-- <mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-label>Business</mat-label>
|
||||
<mat-select placeholder="Select Business" formControlName="busname" required>
|
||||
<mat-option *ngFor="let business of name" [value]="business.busname">
|
||||
{{business.busname}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Business</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field> -->
|
||||
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Service
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Service" formControlName="service" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of select" [value]="business.service">
|
||||
{{business.service}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Practitioner
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Practitioner" formControlName="practitioner" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of practitioners" [value]="business.practitioner">
|
||||
{{business.practitioner}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Practitioner</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 date-position">
|
||||
<label for="name-field" class="label-container Date-container">
|
||||
Date & Time
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mate">
|
||||
<mat-datepicker #picker4></mat-datepicker>
|
||||
<mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle>
|
||||
<input matInput [matDatepicker]="picker4" placeholder="Choose a date" formControlName="appoinmentDate" >
|
||||
<!-- {{business.appoinmentDate}} -->
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge" (click)="toggle()" id="bt">
|
||||
<input matInput name="week" formControlName="appoinmentTime">
|
||||
</mat-form-field>
|
||||
<!-- <mat-form-field appearance="outline" class="mate date-marge" (click)="toggle()" id="bt">
|
||||
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
|
||||
</mat-form-field> -->
|
||||
|
||||
<div class="date-time" *ngIf="show">
|
||||
<div class="topnav">
|
||||
Wed, 12 Apr 2023
|
||||
</div>
|
||||
<div class="card">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="95" fxFlex.lg="95" fxFlex.xl="95" class="m-gap p-gap flx">
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-label>Business</mat-label>
|
||||
<input matInput placeholder="Business" name="Business" formControlName="busname" readonly>
|
||||
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
|
||||
<div class="mt-1 days">
|
||||
MORNING
|
||||
</div>
|
||||
<div class="flexxx d-flex mt-2">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:00am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:15am</button>
|
||||
<!-- <button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:30am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:45am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:00am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:15am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:30am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:45am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:00am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:15am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:30am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:45am</button> -->
|
||||
</div>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-label>Service</mat-label>
|
||||
<mat-select placeholder="Select Service" formControlName="service" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of servicesList_array" (click)="serviceData(business)" [value]="business.serviceId
|
||||
">
|
||||
{{business.servicesName}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- <mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-label>Practitioner</mat-label>
|
||||
<mat-select placeholder="Select Practitioner" formControlName="practitioner" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of practitioners" [value]="business.practitioner">
|
||||
{{business.practitioner}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Practitioner</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field> -->
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-label>Practitioner</mat-label>
|
||||
<input matInput placeholder="practitioner" name="practitioner" formControlName="practitioner" readonly>
|
||||
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="mate">
|
||||
<mat-label>Choose a date</mat-label>
|
||||
<mat-datepicker #picker4></mat-datepicker>
|
||||
<mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle>
|
||||
<input matInput [matDatepicker]="picker4" placeholder="Choose a date" formControlName="appoinmentDate" >
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge" (click)="toggle()" id="bt">
|
||||
<mat-label>Choose a Time</mat-label>
|
||||
<input matInput placeholder="Select Time" name="week" [readonly]="!form.get('service').value" formControlName="appoinmentTime">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-card class="cardDesign" *ngIf="show">
|
||||
<div class="innerdivs navStyle" fxLayoutAlign="center center">
|
||||
<button mat-raised-button (click)="goToSlotBooking2()" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_left</mat-icon></button><span style="width: 150px;text-align: center;">12 thursday 2023</span><button mat-raised-button (click)="goToSlotBooking()" *ngIf="clicks < 5" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_right</mat-icon></button>
|
||||
</div>
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
|
||||
<div class="mt-1 days">
|
||||
AFTERNOON
|
||||
</div>
|
||||
<div class="flexxx d-flex mt-2">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >12:00pm</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >12:15pm</button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
|
||||
<div class="mt-1 days">
|
||||
EVENING
|
||||
</div>
|
||||
<div class="flexxx d-flex mt-2">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >04:00pm</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >04:00pm</button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
|
||||
<div class="mt-1 days">
|
||||
NIGHT
|
||||
</div>
|
||||
<div class="flexxx mt-2">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >No Slots</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="innerdivs2" >
|
||||
<!-- <button *ngFor="let slot of slots;let i=index" mat-raised-button class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i } " (click)="toggleActive($event,slot,i)" >{{slot | date:'shortTime'}}</button> -->
|
||||
<button type="button" *ngFor="let slot of slots;let i=index" mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" (click)="toggleActive($event,slot,i)">{{slot | date:'shortTime'}}</button>
|
||||
<!-- <button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >09:45am</button>
|
||||
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >10:00am</button>
|
||||
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >10:15am</button>
|
||||
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >10:30am</button>
|
||||
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >10:45am</button>
|
||||
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >11:00am</button>
|
||||
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >11:15am</button>
|
||||
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >11:30am</button>
|
||||
<button mat-raised-button class="mr-1 mt-1 hoverButton buttontimeline" >11:45am</button> -->
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
|
||||
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Customer
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Customer" formControlName="customer" required>
|
||||
<!-- <div class="add-customer"> Add customer</div> -->
|
||||
<mat-option >Add customer</mat-option>
|
||||
<mat-option *ngFor="let business of customers" [value]="business.customer">
|
||||
{{business.customer}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="customer.hasError('required')">Please choose an Customer</mat-error>
|
||||
<mat-error *ngIf="customer.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="field-inline">
|
||||
<label for="name-field" class="label-container">Notes</label>
|
||||
<textarea rows="5" cols="41" name="comment" formControlName="note"></textarea>
|
||||
</div>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-label>Customer</mat-label>
|
||||
<mat-select placeholder="Select Customer" formControlName="customer" required>
|
||||
<!-- <div class="add-customer"> Add customer</div> -->
|
||||
<mat-option class="newCustomer" (click)="addCustomerList(1)">+ New Customer</mat-option>
|
||||
<mat-option *ngFor="let business of customersList" [value]="business.id" (click)="customerIdvalue(business.id)" >
|
||||
{{business.cusName
|
||||
}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="customer.hasError('required')">Please choose an Customer</mat-error>
|
||||
<mat-error *ngIf="customer.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
<app-appointment-addcustomer (childButtonEvent)="receivedMessageHandler($event)"
|
||||
(onInitEvent)="receiveAutoMsgHandler($event)" *ngIf="customerCard == 1"></app-appointment-addcustomer>
|
||||
|
||||
<!-- <mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-label>Customer</mat-label>
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput rows="5" cols="40" placeholder="Description" formControlName="note"></textarea>
|
||||
</mat-form-field> -->
|
||||
|
||||
<div class="notes">
|
||||
<input type="checkbox" id="scales" name="scales" checked>
|
||||
<label for="scales">Send notifications for customer</label>
|
||||
</div>
|
||||
<!-- <div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Workspace
|
||||
</label>
|
||||
<mat-form-field appearance="outline" 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> -->
|
||||
|
||||
<!-- <div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Assign Staff
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Staff" formControlName="staff" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of staffs" [value]="business.staff">
|
||||
{{business.staff}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="staff.hasError('required')">Please choose an Staff</mat-error>
|
||||
<mat-error *ngIf="staff.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div> -->
|
||||
<!-- <div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Slots
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Slot" formControlName="appoinmentSlots" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of slots" [value]="business.appoinmentSlots">
|
||||
{{business.appoinmentSlots}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="appoinmentSlots.hasError('required')">Please choose an Slots</mat-error>
|
||||
<mat-error *ngIf="appoinmentSlots.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
<ng-template #elseTemplate>
|
||||
Sure to delete <b>{{local_data.name}}</b>?
|
||||
</ng-template>
|
||||
<br>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="doAction()" class="mat-green" mat-raised-button >{{action}}</button>
|
||||
<button mat-button (click)="closeDialog()" >Cancel</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
<!-- <img class="image" [src]="url" height="50">
|
||||
<input type='file' (change)="onSelectFile($event)" formControlName="image"> -->
|
||||
<ng-template #elseTemplate>
|
||||
Sure to delete <b>{{local_data.cusName}}</b>?
|
||||
</ng-template>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
<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>
|
||||
<notifier-container></notifier-container>
|
||||
@ -1,8 +1,13 @@
|
||||
// ::ng-deep .cdk-overlay-pane{
|
||||
// width: 60%!important;
|
||||
// }
|
||||
$color_red_orange_approx: #107c14;
|
||||
$white: #fff;
|
||||
$black_10: rgba(0, 0, 0, 0.1);
|
||||
$black_30: rgba(0, 0, 0, 0.3);
|
||||
$icon-size: 3rem;
|
||||
$icon-color: #D8D8D8;
|
||||
$main-color: #f44336;
|
||||
$tem-color : #217e69;
|
||||
.mat-pane{
|
||||
width: 20rem;
|
||||
width: 27rem;
|
||||
}
|
||||
.button{
|
||||
margin-bottom: 1rem;
|
||||
@ -72,7 +77,7 @@
|
||||
// width: 175%!important;
|
||||
// }
|
||||
.mate{
|
||||
width: 22% !important;
|
||||
width: 43% !important;
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 1.5rem;
|
||||
@ -138,4 +143,110 @@
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.navStyle{
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #227f6e;
|
||||
color: #fff;
|
||||
}
|
||||
.innerdivs{
|
||||
width:100%;
|
||||
// float:left;
|
||||
}
|
||||
.innerdivs2{
|
||||
width:100%;
|
||||
// float:left;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
.cardDesign{
|
||||
border: 1px solid #e8edef;
|
||||
width: 89%;
|
||||
background-color: #227f6e21;
|
||||
// box-shadow: 0 2px 0 rgb(0 0 0 / 3%)
|
||||
}
|
||||
.hoverButton{
|
||||
background: $white;
|
||||
// box-shadow: 0 2px 6px $tem-color;
|
||||
transition: all 0.1s ease-in-out 0s;
|
||||
&:hover {
|
||||
box-shadow: 0 0 8px $tem-color;
|
||||
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
.primary{
|
||||
background-color: #00866e00;
|
||||
color: brown;
|
||||
width: auto;
|
||||
border: 1px solid brown;
|
||||
cursor: pointer;
|
||||
}
|
||||
.clickedSlot{
|
||||
color: white !important;
|
||||
background-color: brown !important;
|
||||
cursor: pointer !important;
|
||||
width: auto;
|
||||
}
|
||||
.bookedSlot{
|
||||
background-color: darkgrey;
|
||||
color: white;
|
||||
width: 6rem;
|
||||
cursor: no-drop !important;
|
||||
}
|
||||
.newCustomer{
|
||||
color: #227f6e;
|
||||
text-align: center;
|
||||
border: 1px solid #e8edef;
|
||||
}
|
||||
|
||||
.cardDesign2{
|
||||
border: 1px dashed #227f6e;
|
||||
width: 75%;
|
||||
height: 348px;
|
||||
margin-left: 3rem;
|
||||
background-color: #fcfcfc;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.card-mat-pane{
|
||||
width: 20rem;
|
||||
}
|
||||
.new{
|
||||
color: #227f6e;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
.popup-button {
|
||||
// margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
.cancel {
|
||||
background: #F5F5F5;
|
||||
color: #111;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttons {
|
||||
width: 50%;
|
||||
background: #FFF;
|
||||
color: #111;
|
||||
font-size: 15px;
|
||||
// font-family: zohopuvi-medium;
|
||||
text-align: center;
|
||||
border-top: 1px solid #E2E2E2;
|
||||
padding: 10px;
|
||||
-webkit-transition: all .2s ease-in;
|
||||
-moz-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
.add {
|
||||
background-color: #4caf50;
|
||||
color: #FFF;
|
||||
border-top: 1px solid #4caf50;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pad{
|
||||
padding: 20px !important;
|
||||
}
|
||||
@ -2,6 +2,12 @@ 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';
|
||||
import { AppointmentsService } from '../appointments-service/appointments.service';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { ConsultantService } from 'app/appoinment/consultant-setting/consultant-service/consultant.service';
|
||||
import { CustomersService } from 'app/appoinment/customers/customers-service/customers.service';
|
||||
import { EndUserService } from 'app/end-user/end-user.service';
|
||||
import { NotifierService } from 'angular-notifier';
|
||||
export interface UsersData {
|
||||
// id: number;
|
||||
busname: string;
|
||||
@ -78,27 +84,30 @@ export class DialogBoxComponent implements OnInit {
|
||||
{staff: 'Devi.k'},
|
||||
];
|
||||
appoinmentSlots = new FormControl('', [Validators.required]);
|
||||
slots = [
|
||||
{appoinmentSlots: '9AM - 9.30AM'},
|
||||
{appoinmentSlots: '10AM - 10.30AM'},
|
||||
{appoinmentSlots: '11AM - 11.30AM'},
|
||||
{appoinmentSlots: '12AM - 12.30AM'},
|
||||
{appoinmentSlots: '01PM - 01.30PM'},
|
||||
{appoinmentSlots: '02PM - 02.30PM'},
|
||||
{appoinmentSlots: '03PM - 03.30PM'},
|
||||
{appoinmentSlots: '04PM - 04.30PM'},
|
||||
{appoinmentSlots: '05PM - 05.30PM'},
|
||||
{appoinmentSlots: '06PM - 06.30PM'},
|
||||
{appoinmentSlots: '07PM - 07.30PM'},
|
||||
];
|
||||
slots:any =[];
|
||||
|
||||
|
||||
constructor(private router: Router,private formBuilder: FormBuilder,
|
||||
public dialogRef: MatDialogRef<DialogBoxComponent>,
|
||||
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
|
||||
clicks:any = 0;
|
||||
customerCard: any;
|
||||
slot_array: any;
|
||||
date: any;
|
||||
servicesList_array: any[];
|
||||
servicesList_data: any;
|
||||
assignService: any=[];
|
||||
duration: any;
|
||||
userData: any;
|
||||
appoinmentsIds: any=[];
|
||||
customersList: any;
|
||||
customerId: any;
|
||||
slotsResult: any;
|
||||
ServiceId: any;
|
||||
constructor(private notifierService: NotifierService,private router: Router,private formBuilder: FormBuilder, public _cus:CustomersService,
|
||||
public dialogRef: MatDialogRef<DialogBoxComponent>,public _api:ConsultantService, public _con:ConsultantService,
|
||||
@Inject(MAT_DIALOG_DATA) public data: UsersData,public _app:AppointmentsService,public end_user:EndUserService) {
|
||||
console.log(data);
|
||||
this.local_data = {...data};
|
||||
this.action = this.local_data.action;
|
||||
|
||||
|
||||
}
|
||||
get f(){
|
||||
return this.form.controls;
|
||||
@ -127,41 +136,264 @@ export class DialogBoxComponent implements OnInit {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.show = !this.show;
|
||||
|
||||
// Change the name of the button.
|
||||
if(this.show)
|
||||
this.buttonName = "Hide";
|
||||
else
|
||||
this.buttonName = "Show";
|
||||
}
|
||||
toggle() {
|
||||
this.show = !this.show;
|
||||
// Change the name of the button.
|
||||
if(this.show)
|
||||
this.buttonName = "Hide";
|
||||
else
|
||||
this.buttonName = "Show";
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
busname: new FormControl('', [Validators.required]),
|
||||
service: new FormControl('', [Validators.required]),
|
||||
practitioner: new FormControl('', [Validators.required]),
|
||||
appoinmentDate: new FormControl('', [Validators.required]),
|
||||
appoinmentTime: new FormControl('', [Validators.required]),
|
||||
customer: new FormControl('', [Validators.required]),
|
||||
note: new FormControl('', [Validators.required]),
|
||||
ngOnInit() {
|
||||
// this._app.customerlist_observable$.subscribe((res) => {
|
||||
// console.log('cus', res);
|
||||
|
||||
// if(res){
|
||||
|
||||
|
||||
// }
|
||||
|
||||
// })
|
||||
this.getSlots()
|
||||
let userId = localStorage.getItem('user_id')
|
||||
let busId = localStorage.getItem('busId')
|
||||
this.getServicesList(userId, busId)
|
||||
this.getApiData()
|
||||
this.form = new FormGroup({
|
||||
busname: new FormControl('', [Validators.required]),
|
||||
service: new FormControl('', [Validators.required]),
|
||||
practitioner: new FormControl('', [Validators.required]),
|
||||
appoinmentDate: new FormControl('', [Validators.required]),
|
||||
appoinmentTime: new FormControl('', [Validators.required]),
|
||||
customer: new FormControl('', [Validators.required]),
|
||||
// note: new FormControl('', [Validators.required]),
|
||||
|
||||
workspace: new FormControl('', [Validators.required]),
|
||||
staff: new FormControl('', [Validators.required]),
|
||||
slot: new FormControl('', [Validators.required]),
|
||||
appoinmentSlots: new FormControl('', [Validators.required]),
|
||||
|
||||
|
||||
|
||||
appoinmentSlots: new FormControl('', [Validators.required]),
|
||||
|
||||
});
|
||||
console.log(this.local_data, this.selects)
|
||||
// this.form.controls['note'].setValue('Sample')
|
||||
this.form.patchValue(this.local_data)
|
||||
let id = localStorage.getItem('user_id')
|
||||
console.log(id)
|
||||
this._con.getUsersListDetails(id).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
console.log(res)
|
||||
|
||||
this.userData = res.data[0]
|
||||
this.form.controls['busname'].setValue( this.userData.BusinessDetails[0].busName
|
||||
);
|
||||
|
||||
this.form.controls['practitioner'].setValue( this.userData.userName);
|
||||
}
|
||||
})
|
||||
}
|
||||
public myError = (controlName: string, errorName: string) =>{
|
||||
return this.form.controls[controlName].hasError(errorName);
|
||||
}
|
||||
submit(){
|
||||
console.log(this.form.value);
|
||||
|
||||
let paramsmap= {
|
||||
"serviceId": ""+this.ServiceId+"",
|
||||
"userId":localStorage.getItem('user_id'),
|
||||
"busId": localStorage.getItem('busId')
|
||||
}
|
||||
this.end_user.CreatecusServicesMapDetails(paramsmap).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
let serviceMap = res['data'][0].id
|
||||
let paramsData= {
|
||||
"busId": localStorage.getItem('busId'),
|
||||
"cusId": this.customerId,
|
||||
"appoinmentDate": this.form.value.appoinmentDate,
|
||||
"appoinmentTime": this.form.value.appoinmentTime,
|
||||
"serviceMap":serviceMap,
|
||||
"appoinmentSlots": this.slotsResult,
|
||||
//"servicemap" :this.bookedAppointment_servicemap
|
||||
}
|
||||
console.log(paramsData)
|
||||
this._app.addFormDetails(paramsData).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.notifierService.notify('success', 'Appointment Added Successfully');
|
||||
this.dialogRef.close();
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
goToSlotBooking(){
|
||||
// this.days[]
|
||||
if(this.clicks <5){
|
||||
this.clicks += 1;
|
||||
}
|
||||
}
|
||||
goToSlotBooking2(){
|
||||
// this.days[]
|
||||
if( this.clicks >0){
|
||||
this.clicks -= 1;
|
||||
}
|
||||
console.log( this.clicks)
|
||||
}
|
||||
check(param){
|
||||
return param[this.clicks];
|
||||
}
|
||||
|
||||
addCustomerList(param){
|
||||
this.customerCard = param
|
||||
}
|
||||
save(){
|
||||
|
||||
}
|
||||
|
||||
getSlots(){
|
||||
let id = localStorage.getItem('user_id')
|
||||
let params ={"id": id}
|
||||
this._app.getSlots(params).subscribe((res:any) => {
|
||||
if (res.status == 200) {
|
||||
console.log(res)
|
||||
let data = res['data'];
|
||||
this.slots = data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
toggleActive(event:any,param:any,i:any){
|
||||
console.log(event,param,i)
|
||||
this.slot_array =[];
|
||||
// debugger;
|
||||
// // event.preventDefault();
|
||||
// this.slotIndex = i
|
||||
// this.slotTime = param
|
||||
let resultDate = new DatePipe('en-US').transform(param, 'shortTime')
|
||||
this.form.controls['appoinmentTime'].setValue(resultDate)
|
||||
this.date= param
|
||||
console.log(this.date,param,this.duration)
|
||||
let thirtyMinutes = this.duration * 60 * 1000; // convert 30 minutes to milliseconds
|
||||
let date1 = new Date(param);
|
||||
let date2 = new Date(date1.getTime() + thirtyMinutes);
|
||||
console.log(date1);
|
||||
console.log(date2);
|
||||
const currentTime = new Date(); // Get the current time
|
||||
//const filteredTimes = this.slots.filter(time => new Date(time) > date1);
|
||||
|
||||
const rangeDate = new Date(date2);
|
||||
|
||||
const resultArray = this.slots.filter(slot => {
|
||||
const date = new Date(slot);
|
||||
return date >= rangeDate;
|
||||
});
|
||||
|
||||
const firstSlt = new Date(date1);
|
||||
const lastSlt = new Date( resultArray[0]);
|
||||
const filteredTimes = this.slots.filter(time => new Date(time) >= firstSlt && new Date(time) <= lastSlt);
|
||||
|
||||
console.log(resultArray,filteredTimes);
|
||||
let result = filteredTimes.pop();
|
||||
console.log(result);
|
||||
this.slotsResult = filteredTimes
|
||||
this.show = false;
|
||||
// this.slots.forEach(element => {
|
||||
// if(element <date2){
|
||||
// console.log(element);
|
||||
// }
|
||||
// });
|
||||
|
||||
this.slot_array.push({date:this.date,slots:filteredTimes})
|
||||
}
|
||||
|
||||
getServicesList(id,busId) {
|
||||
this.servicesList_array = []
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
this._api.getServicesListDetails(id,busId).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.servicesList_data = res.data;
|
||||
res['data'].forEach(element => {
|
||||
// tmp.push(element.service)
|
||||
element.service.forEach(e => {
|
||||
console.log(e)
|
||||
this.servicesList_array.push(e)
|
||||
this.assignService.push(e.servicesName)
|
||||
});
|
||||
});
|
||||
console.log(this.servicesList_array)
|
||||
}
|
||||
// this.getAssignedList(this.usersList.busId)
|
||||
});
|
||||
// this.assignService = this.checkedArray
|
||||
}
|
||||
serviceData(data){
|
||||
this.ServiceId = data.serviceId
|
||||
|
||||
this.duration = data.duration
|
||||
|
||||
}
|
||||
|
||||
getApiData(){
|
||||
this._app.getAppoinmentsListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
let appoinmentsList = res.data;
|
||||
let id = localStorage.getItem('user_id')
|
||||
console.log(id)
|
||||
console.log(appoinmentsList)
|
||||
let filter = appoinmentsList.filter(arr=>{return arr["ServicesMapDetail.userId"]
|
||||
== id})
|
||||
console.log(filter)
|
||||
filter.forEach(element => {
|
||||
this.appoinmentsIds.push( element.customer[0].id)
|
||||
});
|
||||
this.getCustomerDetails()
|
||||
}
|
||||
})
|
||||
}
|
||||
getCustomerDetails(){
|
||||
this._cus.getCustomersListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
|
||||
this.customersList = res.data;
|
||||
|
||||
|
||||
console.log(this.customersList,this.appoinmentsIds)
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
if(user_role == 'PRACTITIONER'){
|
||||
const activeIds = this.appoinmentsIds
|
||||
const serviceList = this.customersList
|
||||
console.log(activeIds,serviceList)
|
||||
|
||||
const result = serviceList.filter(({id}) => activeIds.includes(id));
|
||||
console.log(result)
|
||||
this.customersList = result
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
|
||||
});
|
||||
console.log(this.local_data, this.selects)
|
||||
// this.form.controls['note'].setValue('Sample')
|
||||
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);
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
receivedMessageHandler(res) {
|
||||
|
||||
console.log(res)
|
||||
this.customersList.push(res.data)
|
||||
this.customerId = res.data.id
|
||||
this.form.controls['customer'].setValue( res.data.id);
|
||||
this.customerCard = 0
|
||||
}
|
||||
|
||||
receiveAutoMsgHandler(p) {
|
||||
console.log(p)
|
||||
}
|
||||
customerIdvalue(id){
|
||||
console.log(id)
|
||||
this.customerId = id
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -64,6 +64,9 @@ export class BusinessListComponent implements OnInit {
|
||||
console.log(this.businessList)
|
||||
this.businessListLength = res.data.length;
|
||||
console.log(this.businessListLength)
|
||||
this.businessList.sort((a: any, b: any) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
this.businessListSource['data'] = this.businessList;
|
||||
console.log(this.businessListSource)
|
||||
this.recordStatus=false;
|
||||
|
||||
@ -112,10 +112,18 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Caption <span style="margin-left: 4rem;">-</span></label>
|
||||
<a style="padding: 10px;" *ngIf="isEditable == false">{{practitionerdetails.caption}}</a>
|
||||
<mat-form-field style="width: 60%;" *ngIf="isEditable == true">
|
||||
<mat-label>Caption</mat-label>
|
||||
<textarea matInput rows="3" cols="30" placeholder="Caption" [(ngModel)]="caption"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Description <span style="margin-left: 4rem;">-</span></label>
|
||||
<a style="padding: 10px;" *ngIf="isEditable == false">{{practitionerdetails.description}}</a>
|
||||
<mat-form-field class="example-full-width" *ngIf="isEditable == true">
|
||||
<mat-form-field style="width: 60%;" *ngIf="isEditable == true">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput rows="5" cols="40" placeholder="Description" [(ngModel)]="description"></textarea>
|
||||
</mat-form-field>
|
||||
@ -371,7 +379,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="booking-url">
|
||||
<!-- <div class="booking-url">
|
||||
<span class="underline-title full-width hours">Special Working Hours</span>
|
||||
<button mat-button (click)="workingDialog('Add',{})" class="add-button">Add</button>
|
||||
</div>
|
||||
@ -380,7 +388,7 @@
|
||||
<span class="underline-title full-width hours">Unavailability</span>
|
||||
<button mat-button (click)="unavailability('Add',{})" class="add-button">Add</button>
|
||||
</div>
|
||||
<p class="para margin">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
|
||||
<p class="para margin">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p> -->
|
||||
</ng-scrollbar>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
@ -384,7 +384,7 @@ box-sizing: border-box;
|
||||
line-height: 15px;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 190px);
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
::ng-deep .mat-form-field-infix {
|
||||
height: 50px!important;
|
||||
@ -405,9 +405,9 @@ margin-left: 1rem;
|
||||
::ng-deep .mat-card .mat-card-title:nth-child(2) {
|
||||
margin-top: -33px!important;
|
||||
}
|
||||
::ng-deep .mat-select-panel .mat-option{
|
||||
height: 5em !important;
|
||||
}
|
||||
// ::ng-deep .mat-select-panel .mat-option{
|
||||
// height: 5em !important;
|
||||
// }
|
||||
// css example
|
||||
.indianSymbol {
|
||||
content: "\20B9";
|
||||
|
||||
@ -46,6 +46,7 @@ export class ConsultantSettingComponent implements OnInit {
|
||||
gender: any=[];
|
||||
description:any=[];
|
||||
skills:any = [];
|
||||
caption:any = [];
|
||||
dob: any=[];
|
||||
languages: any=[];
|
||||
designtion: any=[];
|
||||
@ -162,18 +163,22 @@ unavailability(action,obj) {
|
||||
"gender": null,
|
||||
"description":null,
|
||||
"skills": null,
|
||||
"caption": null,
|
||||
"isActive": "1",
|
||||
|
||||
}]
|
||||
}
|
||||
this.practitionerdetails = this.usersList['practitionerInfos'][0]
|
||||
this.practitionerdetails.skills = JSON.parse(this.practitionerdetails.skills)
|
||||
console.log( this.practitionerdetails)
|
||||
this._con.getPractitionerInfo.next( this.usersList['practitionerInfos']);
|
||||
console.log(this.practitionerdetails)
|
||||
this.id=this.practitionerdetails.id
|
||||
this.userName = this.usersList.userName
|
||||
this.gender=this.practitionerdetails.gender
|
||||
this.description=this.practitionerdetails.description
|
||||
this.skills=this.practitionerdetails.skills
|
||||
this.skills= JSON.parse(this.practitionerdetails.skills)
|
||||
this.caption = this.practitionerdetails.caption
|
||||
this.dob=this.practitionerdetails.dob
|
||||
this.exp=this.practitionerdetails.exp
|
||||
this.languages=this.practitionerdetails.languages
|
||||
@ -240,7 +245,7 @@ unavailability(action,obj) {
|
||||
//if(this.working_customize == false){
|
||||
// obj.action = action;
|
||||
const dialogRef = this.dialog.open(EditWorkingHoursComponent, {
|
||||
width: '48%',
|
||||
width: '45%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
@ -337,6 +342,7 @@ unavailability(action,obj) {
|
||||
"gender": this.gender,
|
||||
"description": this.description,
|
||||
"skills": this.skills,
|
||||
"caption": this.caption,
|
||||
"userName": this.userName,
|
||||
"userId":userid
|
||||
}
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
<div class="edit-working">
|
||||
<!-- <ng-scrollbar class="scrollHV"> -->
|
||||
<div class="popup-header">
|
||||
<h5>
|
||||
<h5 class="mar">
|
||||
Edit Working Hours
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<form [formGroup]="dynamicForm">
|
||||
<div formArrayName="filters">
|
||||
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
|
||||
@ -521,7 +522,7 @@
|
||||
</button> -->
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ng-scrollbar>
|
||||
<div class="popup-button mb-2">
|
||||
<span class="buttons cancel" (click)="close()">Cancel</span>
|
||||
<span (click)="save()" class="buttons add">Save</span>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.edit-working{
|
||||
.edit-working{
|
||||
.popup-header {
|
||||
background: #FFF;
|
||||
padding: 5px 5px 5px 5px;
|
||||
@ -91,12 +91,12 @@
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
// .scrollHV {
|
||||
// height: calc(100vh - 190px);
|
||||
// }
|
||||
.scrollHV {
|
||||
height: calc(100vh - 152px);
|
||||
}
|
||||
.popup-button {
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.cancel {
|
||||
background: #F5F5F5;
|
||||
@ -137,3 +137,9 @@
|
||||
mat-checkbox{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mar{
|
||||
margin: 0px !important;
|
||||
}
|
||||
.mat-dialog-container{
|
||||
padding: 24px 0px 0px 0px !important;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<!-- <div class="calender ">
|
||||
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']"></i>
|
||||
</div> -->
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add customers</button>
|
||||
<!-- <button mat-button (click)="openDialog('Add',{})" class="button">Add customers</button> -->
|
||||
|
||||
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
|
||||
@ -98,7 +98,7 @@ export class CustomersListComponent implements OnInit {
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getCustomerDetails()
|
||||
// this.getCustomerDetails()
|
||||
}
|
||||
|
||||
getCustomerDetails(){
|
||||
@ -106,25 +106,32 @@ export class CustomersListComponent implements OnInit {
|
||||
if (res.status == 200) {
|
||||
this.isLoading = false
|
||||
this.customersList = res.data;
|
||||
console.log(this.customersList)
|
||||
this.customersListLength = res.data.length;
|
||||
console.log(this.customersListLength)
|
||||
this.customersListSource['data'] = this.customersList;
|
||||
console.log(this.customersListSource)
|
||||
this.recordStatus=false;
|
||||
|
||||
console.log(this.customersList)
|
||||
console.log(this.customersList,this.appoinmentsIds)
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
if(user_role == 'PRACTITIONER'){
|
||||
const activeIds = this.appoinmentsIds
|
||||
const serviceList = this.customersList
|
||||
console.log(activeIds,serviceList)
|
||||
const activeIds = this.appoinmentsIds
|
||||
const serviceList = this.customersList
|
||||
console.log(activeIds,serviceList)
|
||||
|
||||
const result = serviceList.filter(({id}) => activeIds.includes(id));
|
||||
console.log(result)
|
||||
this.customersList = result
|
||||
this.customersListSource['data'] = this.customersList;
|
||||
}
|
||||
const result = serviceList.filter(({id}) => activeIds.includes(id));
|
||||
console.log(result)
|
||||
this.customersList = result
|
||||
this.customersListLength = this.customersList.length;
|
||||
this.customersList.sort((a: any, b: any) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
this.customersListSource['data'] = this.customersList;
|
||||
} else{
|
||||
this.customersListLength = res.data.length;
|
||||
console.log(this.customersListLength)
|
||||
this.customersList.sort((a: any, b: any) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
this.customersListSource['data'] = this.customersList;
|
||||
console.log(this.customersListSource)
|
||||
this.recordStatus=false;
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
|
||||
@ -66,6 +66,9 @@ export class ServiceListComponent implements OnInit {
|
||||
console.log(this.servicesList)
|
||||
this.servicesListLength = res.data.length;
|
||||
console.log(this.servicesListLength)
|
||||
this.servicesList.sort((a: any, b: any) => {
|
||||
return b.serviceId - a.serviceId;
|
||||
});
|
||||
this.servicesListSource['data'] = this.servicesList;
|
||||
console.log(this.servicesListSource)
|
||||
this.recordStatus=false;
|
||||
|
||||
@ -81,6 +81,9 @@ export class UserListComponent implements OnInit {
|
||||
if (res.status == 200) {
|
||||
this.isLoading = false
|
||||
let usersList = res.data
|
||||
usersList.sort((a: any, b: any) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
this.usersList['data'] = usersList;
|
||||
this.usersListLength = res.data.length;
|
||||
this.recordStatus=false;
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
<span class="head">Practitioner</span>
|
||||
</div>
|
||||
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
|
||||
<span>: {{serviceMapDetails.user[0].userName}}</span>
|
||||
<span>: Dr.{{serviceMapDetails.user[0].userName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap" style="margin-bottom: 20px;">
|
||||
@ -79,7 +79,7 @@
|
||||
<span class="head">Date & Time</span>
|
||||
</div>
|
||||
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
|
||||
<span>: {{bookingSummary.appoinmentDate | date:'fullDate'}}</span><span style="margin-left: 6px;">({{bookingSummary.appoinmentSlots | date:'shortTime'}})</span>
|
||||
<span>: {{bookingSummary.appoinmentDate | date:'fullDate'}}</span><span style="margin-left: 6px;">({{bookingSummary.appoinmentSlots[0] | date:'shortTime'}})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap" style="margin-bottom: 20px;">
|
||||
|
||||
@ -33,6 +33,7 @@ export class BookingSummaryComponent implements OnInit {
|
||||
this.end_user.summmarylist_observable$.subscribe((res) => {
|
||||
console.log('booked2', res);
|
||||
this.bookingSummary = res[0]
|
||||
this.bookingSummary.appoinmentSlots =JSON.parse( this.bookingSummary.appoinmentSlots)
|
||||
|
||||
// this.end_user.getcusServicesMapDetails()
|
||||
let param ={id:this.bookingSummary.serviceMap}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<div *ngIf="consultants.length != 0">
|
||||
|
||||
<mat-toolbar>
|
||||
<span style="text-align: center;">Appointment</span>
|
||||
<h3 style="margin-left:35% ;">{{busName}}</h3>
|
||||
</mat-toolbar>
|
||||
<div class="container mt-1">
|
||||
<!-- <ng-scrollbar class="scrollHV"> -->
|
||||
<div *ngIf="consultants.length != 0">
|
||||
<div fxLayout="row wrap">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="m-gap p-gap">
|
||||
<div fxLayout="row wrap">
|
||||
@ -84,12 +85,13 @@
|
||||
<!-- </ng-scrollbar> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p>
|
||||
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div *ngIf="consultants.length == 0">
|
||||
<div fxLayout="row" class="flexCard">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
|
||||
@ -98,7 +100,7 @@
|
||||
</div>
|
||||
<div fxLayout="row" class="flexCard">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
|
||||
<h3 class="noAssignedService">No Service</h3>
|
||||
<h3 class="noAssignedService">No Doctor</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<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>
|
||||
<input matInput placeholder="Phone No" type="text" name="phone" formControlName="phoneNo" [readonly]="verifyOTP == '1'" required>
|
||||
<mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div id="sign-in-button"></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)="getOTP(1)" [disabled]="myError('phoneNo', 'minlength') || myError('phoneNo', 'required')" color="primary" class="mr-1 mb-1">Get OTP</button>
|
||||
<button mat-raised-button type="button" (click)="getOTP(1)" [disabled]="myError('phoneNo', 'minlength') || myError('phoneNo', 'required')" color="primary" class="mr-1 mb-1">Get OTP</button>
|
||||
|
||||
</div>
|
||||
<span *ngIf="verifyOTP == '1'"><mat-icon style="color: #4CAF50;">verified</mat-icon></span>
|
||||
@ -53,12 +53,12 @@
|
||||
</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>
|
||||
<button type="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(1)">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
||||
<button type="button" *ngIf="timeLeft != 0" mat-raised-button color="primary">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
||||
<button type="button" *ngIf="timeLeft == 0" mat-raised-button color="primary" (click)="resendOTP(1)">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -45,11 +45,11 @@ export class CustomerInfoComponent implements OnInit {
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
phoneNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10), Validators.pattern('^[0-9]{10}$')]),
|
||||
address_1: new FormControl('', [Validators.maxLength(50)]),
|
||||
city: new FormControl('', [Validators.maxLength(10)]),
|
||||
state: new FormControl('', [Validators.maxLength(10)]),
|
||||
otp: new FormControl('', [Validators.maxLength(10)]),
|
||||
pincode: new FormControl('',[Validators.maxLength(6)]),
|
||||
address_1: new FormControl('', [ Validators.maxLength(50)]),
|
||||
city: new FormControl('', [ Validators.maxLength(10)]),
|
||||
state: new FormControl('', [ Validators.maxLength(10)]),
|
||||
otp: new FormControl('', [ Validators.maxLength(10)]),
|
||||
pincode: new FormControl('',[ Validators.maxLength(6)]),
|
||||
});
|
||||
}
|
||||
|
||||
@ -60,17 +60,21 @@ export class CustomerInfoComponent implements OnInit {
|
||||
submit(){
|
||||
console.log(this.form.value)
|
||||
console.log('add')
|
||||
if(!this.form.valid){
|
||||
return
|
||||
}
|
||||
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,
|
||||
phoneNo: this.phoneNumber.substring(3) ,
|
||||
pincode: row_obj.pincode,
|
||||
state: row_obj.state,
|
||||
city: row_obj.city,
|
||||
};
|
||||
console.log(addFormData)
|
||||
|
||||
this._cus.addCusDetails(addFormData).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
|
||||
@ -42,6 +42,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<mat-toolbar>
|
||||
<span style="text-align: center;">Appointment</span>
|
||||
<h3 style="margin-left:35% ;">{{busName}}</h3>
|
||||
@ -70,10 +71,10 @@
|
||||
<span class="pr-1">Phone :</span>
|
||||
<span> {{bookedAppointment.contactNo}}</span>
|
||||
</li>
|
||||
<li>
|
||||
<!-- <li>
|
||||
<span class="pr-1">Office :</span>
|
||||
<span> {{bookedAppointment.contactNo}}</span>
|
||||
</li>
|
||||
</li> -->
|
||||
<li>
|
||||
<span class="pr-1">Email:</span>
|
||||
<span> {{bookedAppointment.email}} </span>
|
||||
@ -91,115 +92,49 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="last-of-type ">
|
||||
<!-- <div class="last-of-type ">
|
||||
<div class="emergency-case ">
|
||||
<h2>EMERGENCY CASES</h2>
|
||||
<div>(225) 679-9399</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" class="m-gap p-gap" >
|
||||
<div class="padding-lt">
|
||||
<div class="elementor-container">
|
||||
<p>“I highly appreciate your help for my family in our most difficult time. We owed everyone at @dr.changes a big thank you and our life.”</p>
|
||||
<p>“{{profileDetails.caption}}”</p>
|
||||
</div>
|
||||
<div class="elementor-container">
|
||||
<p class="para">
|
||||
More than 15 years ago, a small group of families, community activists, and civil servants in New York came together to form an organization called Dr.Changes. They provide services for those struggling to care for a loved one who did not “fit” into traditional health systems: stroke, Parkinson’s, Alzheimer’s disease, traumatic brain injury, debilitating disorders, etc. The diagnoses were different, but the families shared common challenges: few community resources, isolation, lack of information, and drastic changes in family roles.
|
||||
{{profileDetails.description}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="elementor-container">
|
||||
<h3>SKILLS</h3>
|
||||
<div class="elementor-row ">
|
||||
<div class="elementor-div">
|
||||
<ul>
|
||||
<li>
|
||||
<h3 style="margin-bottom:2rem;">SKILLS</h3>
|
||||
<div fxLayout="row wrap">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap" *ngFor="let skillsList of skillsDetails">
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text"> Assisting with walking from bed to wheelchair</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text">
|
||||
Bathing, dressing and grooming assistance</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text"> Medication reminders</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text"> Safety and fall prevention</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text"> Status reporting to family</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="elementor-div">
|
||||
<ul>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text"> Assisting with walking from bed to wheelchair</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text">
|
||||
Bathing, dressing and grooming assistance</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text"> Medication reminders</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text"> Safety and fall prevention</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<mat-icon > beenhere </mat-icon>
|
||||
</span>
|
||||
<span class="list-text"> Status reporting to family</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<span class="list-text"> {{skillsList}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-container">
|
||||
<!-- <div class="elementor-container">
|
||||
<h3 class="care">CARE COVERAGE</h3>
|
||||
<p class="para">
|
||||
The task force’s early efforts had three lasting results: the formation of Dr.Changes caregiver center; the genesis of community social caregiver groups; and the beginnings of an evolutional movement to change the ideology of long-term health care and caregivers intended for the ill and elderly in our country.
|
||||
</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="elementor-container">
|
||||
<div class="elementor-row ">
|
||||
<div class="elementor-div">
|
||||
<h3>LANGUAGE</h3>
|
||||
<p class="language">English</p>
|
||||
<p class="language">French</p>
|
||||
<p class="language">{{profileDetails.languages}}</p>
|
||||
</div>
|
||||
<div class="elementor-div">
|
||||
<h3>QUALIFICATIONS</h3>
|
||||
<p>Master of Science</p>
|
||||
<p>University Limerick</p>
|
||||
<p>{{profileDetails.qualification}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -208,8 +143,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
<footer>
|
||||
<footer>
|
||||
<p>
|
||||
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
|
||||
</p>
|
||||
</footer>
|
||||
<!--
|
||||
<div *ngIf="bookedAppointment.length == 0">
|
||||
<div fxLayout="row" class="flexCard">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
|
||||
<div><img src="assets/images/service.png" width="300" height="300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" class="flexCard">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
|
||||
<h3 class="noAssignedService">No Service</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#178a78" type = "square-jelly-box" [fullScreen] = "true"><p style="color: white" > Please Wait...... </p></ngx-spinner>
|
||||
|
||||
@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { EndUserService } from '../end-user.service';
|
||||
import { environment } from 'environments/environment';
|
||||
import { NgxSpinnerService } from 'ngx-spinner';
|
||||
|
||||
@Component({
|
||||
selector: 'app-doctor-profile',
|
||||
@ -13,8 +14,12 @@ export class DoctorProfileComponent implements OnInit {
|
||||
private apiUrl = environment.apiEndpoint;
|
||||
dp: any =[];
|
||||
busName: any=[];
|
||||
profileDetails: any;
|
||||
skillsDetails: any = [];
|
||||
|
||||
constructor(private router:Router,public end_user:EndUserService) { }
|
||||
constructor(private router:Router,public end_user:EndUserService,private spinner:NgxSpinnerService) {
|
||||
this.spinner.show()
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.busName = localStorage.getItem('busName')
|
||||
@ -23,11 +28,16 @@ export class DoctorProfileComponent implements OnInit {
|
||||
console.log(serviceDetails)
|
||||
|
||||
this.end_user.appointmentBooked_observable$.subscribe((res) => {
|
||||
|
||||
console.log('booked', res);
|
||||
if(res.length>0){
|
||||
this.bookedAppointment=res[0].user[0]
|
||||
this.bookedAppointment = res[0].user[0]
|
||||
this.dp = this.apiUrl+'imageViewer?img_name='+ this.bookedAppointment.logo
|
||||
console.log(this.dp)
|
||||
this.profileDetails = this.bookedAppointment.practitionerInfos[0]
|
||||
console.log(this.profileDetails)
|
||||
this.skillsDetails = JSON.parse(this.profileDetails.skills)
|
||||
console.log(this.skillsDetails)
|
||||
}else{
|
||||
|
||||
let URL = this.router.url;
|
||||
@ -36,7 +46,10 @@ export class DoctorProfileComponent implements OnInit {
|
||||
console.log(URL_AS_LIST);
|
||||
// this.router.navigate(['customer/business/'+URL_AS_LIST[3]])
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
/** spinner ends after 5 seconds */
|
||||
this.spinner.hide();
|
||||
}, 1000);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -68,7 +68,7 @@ export class PaymentComponent implements OnInit {
|
||||
let time = new Date().toLocaleTimeString()
|
||||
let params= {
|
||||
"busId": serviceDetails.busId,
|
||||
"cusId": URL_AS_LIST[8],
|
||||
"cusId": URL_AS_LIST[9],
|
||||
"appoinmentDate": slot_array[0].date,
|
||||
"appoinmentTime": time,
|
||||
"serviceMap": serviceMap,
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
|
||||
<div *ngIf="servicesList.length != 0">
|
||||
|
||||
<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 *ngIf="servicesList.length != 0">
|
||||
<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>
|
||||
@ -17,6 +18,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <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="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
@ -45,12 +47,13 @@
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p>
|
||||
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div *ngIf="servicesList.length == 0">
|
||||
<div fxLayout="row" class="flexCard">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
<div class="container mt-1">
|
||||
<div fxLayout="row wrap" dir="ltr" fxLayoutAlign="center center">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="m-gap p-gap flx">
|
||||
|
||||
<mat-card class="card-mat">
|
||||
<div fxLayout="row wrap mt-2">
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
|
||||
@ -63,10 +64,6 @@
|
||||
<p class="text-color">Teero would like to schedule an interview with you! Pick a time & date.</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<!-- <p class="param">
|
||||
<img src="/assets/images/Time-Icon.svg" alt="Avatar" class="img"> -->
|
||||
<!-- <p class=" mt-1 param"><img src="/assets/images/Time-Icon.svg" alt="Avatar" class="img"> <span class="">{{Currentdate | date:'fullDate'}}</span></p> -->
|
||||
<!-- </p> -->
|
||||
<p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Business </p>
|
||||
<span class="span-text">{{busName}}</span>
|
||||
<p class="param"><img src="assets/images/person.svg" alt="Avatar" class="img"> Practitioner </p>
|
||||
@ -74,25 +71,42 @@
|
||||
<p class="param"><img src="assets/images/information.svg" alt="Avatar" class="img"> Service </p>
|
||||
<span class="span-text"> {{servicesName.servicesName}} ({{servicesName.duration
|
||||
}} Mins)</span>
|
||||
<p class="text-color d-flex align-items-start" >
|
||||
<!-- <p class="text-color d-flex align-items-start" >
|
||||
<img src="assets/images/information.svg" alt="Avatar" class="img" />
|
||||
<span>Date:{{date | date:'longDate'}}</span><br />
|
||||
<span style="margin-left: 10px;">Time :{{slotTime | date:'shortTime'}}</span>
|
||||
</p>
|
||||
</p> -->
|
||||
<p class="param"><img src="assets/images/Languages.svg" alt="Avatar" class="img">Date : </p>
|
||||
<span class="span-text"> {{date | date:'longDate'}}</span>
|
||||
<p class="param"><img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">Time : </p>
|
||||
<span class="span-text">{{slotTime | date:'shortTime'}}</span>
|
||||
<p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Amount : </p>
|
||||
<span class="span-text"><span class="ex" style="font-size: 17px;padding-bottom: 10px;line-height: 17px;">₹</span> {{user.practitionerInfos[0].days}}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div style="border: 1px solid #ccc;" fxFlex.md="1"></div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="64" fxFlex.lg="64" fxFlex.xl="64" class="p-gap d-flex">
|
||||
<div >
|
||||
<div class="innerdivs" > <mat-card class="navStyle" fxLayoutAlign="center center"> <button mat-raised-button (click)="goToSlotBooking2()" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_left</mat-icon></button><span style="width: 150px;text-align: center;">{{check(days) | date:'longDate'}}</span><button mat-raised-button (click)="goToSlotBooking()" *ngIf="clicks < 5" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_right</mat-icon></button></mat-card></div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="64" fxFlex.lg="64" fxFlex.xl="64" class="p-gap">
|
||||
<div fxLayout="row wrap mt-2" fxLayoutAlign="center center">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="p-gap">
|
||||
<mat-card class="navStyle" fxLayoutAlign="center center"> <button mat-raised-button (click)="goToSlotBooking2()" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_left</mat-icon></button><span style="width: 150px;text-align: center;">{{check(days) | date:'longDate'}}</span><button mat-raised-button (click)="goToSlotBooking()" *ngIf="clicks < 5" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_right</mat-icon></button></mat-card>
|
||||
</div>
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="p-gap" style="text-align: center;">
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<button *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i } " (click)="toggleActive($event,slot,i)" >{{slot | date:'shortTime'}}</button>
|
||||
</ng-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div >
|
||||
<div class="innerdivs" ></div>
|
||||
<div class="innerdivs" > <div style="margin: 1%;">
|
||||
<button *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i } " (click)="toggleActive($event,slot,i)" >{{slot | date:'shortTime'}}</button>
|
||||
</div> </div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div> -->
|
||||
<div>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" [ngStyle]="{'background':slot_array.length ==0 ? '#ccc':'#4caf50' }" [disabled]="slot_array.length ==0" (click)="submit()">PROCEED</button>
|
||||
</div>
|
||||
<!-- <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
|
||||
<mat-tab [label]="tab | date:'longDate' " *ngFor="let tab of days">
|
||||
<div style="margin: 1%;">
|
||||
@ -183,10 +197,7 @@
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mt-3">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" [ngStyle]="{'background':slot_array.length ==0 ? '#ccc':'#4caf50' }" [disabled]="slot_array.length ==0" (click)="submit()">PROCEED</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,145 +1,3 @@
|
||||
// $color_red_orange_approx: #107c14;
|
||||
// $white: #fff;
|
||||
// $black_10: rgba(0, 0, 0, 0.1);
|
||||
// $black_30: rgba(0, 0, 0, 0.3);
|
||||
// $icon-size: 3rem;
|
||||
// $icon-color: #D8D8D8;
|
||||
// $main-color: #f44336;
|
||||
// $tem-color : #217e69;
|
||||
// .toggleSize{
|
||||
// width: 12rem;
|
||||
// height: 4rem;
|
||||
// border-radius: 5px !important;
|
||||
// }
|
||||
// [mat-raised-button][mat-button-sm] {
|
||||
// font-size: 15px;
|
||||
// line-height: 45px;
|
||||
// padding: 0 20px;
|
||||
// }
|
||||
// .hoverButton{
|
||||
// background: $white;
|
||||
// // box-shadow: 0 2px 6px $tem-color;
|
||||
// transition: all 0.1s ease-in-out 0s;
|
||||
// &:hover {
|
||||
// box-shadow: 0 0 21px $tem-color;
|
||||
|
||||
// transform: scale(1.05);
|
||||
// }
|
||||
// }
|
||||
// .button{
|
||||
// margin-bottom: 1rem;
|
||||
// background-color: #ffff !important;
|
||||
// margin-top: -3rem;
|
||||
// float: right;
|
||||
// }
|
||||
// .calender{
|
||||
// margin-left: -1rem;
|
||||
// padding-right: 6rem;
|
||||
// }
|
||||
// .cardCalender{
|
||||
// width: 140%;
|
||||
// }
|
||||
// ::ng-deep .mat-tab-label {
|
||||
// margin-left: -3rem!important;
|
||||
// }
|
||||
// .img{
|
||||
// width: 50px;
|
||||
// }
|
||||
// .btn-red {
|
||||
// // background-color: #4caf50 !important;
|
||||
// color: $white;
|
||||
// // border: 1px solid $color_red_orange_approx;
|
||||
// float: right;
|
||||
// }
|
||||
// .clickedSlot{
|
||||
// color: white !important;
|
||||
// background-color: brown !important;
|
||||
// cursor: pointer !important;
|
||||
// width: 6rem;
|
||||
// }
|
||||
// .bookedSlot{
|
||||
// background-color: darkgrey;
|
||||
// color: white;
|
||||
// width: 6rem;
|
||||
// cursor: no-drop !important;
|
||||
// }
|
||||
// .primary{
|
||||
// background-color: #00866e00;
|
||||
// color: brown;
|
||||
// width: 6rem;
|
||||
// border: 1px solid brown;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
|
||||
// background-color: #658F9B!important;
|
||||
// }
|
||||
// // ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
||||
// // width: 250%;
|
||||
// // }
|
||||
// .success {
|
||||
// background: #fff;
|
||||
// box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||||
// padding: 5px;
|
||||
// color: #0087ba;
|
||||
// font-weight: 600;
|
||||
// border-radius: 10px;
|
||||
// }
|
||||
|
||||
// mat-toolbar{
|
||||
// background-color: #227f6e;
|
||||
// color:#fff;
|
||||
// }
|
||||
// .container{
|
||||
// max-width: 1217px;
|
||||
// min-width: 375px;
|
||||
// margin: 0 auto;
|
||||
// // margin-right: 0rem;
|
||||
// }
|
||||
// .flx{
|
||||
// flex: 1 1 0%!important;
|
||||
// display: initial!important;
|
||||
// }
|
||||
// .card-mat{
|
||||
// // max-width: 100%;
|
||||
// min-width: -webkit-fill-available;
|
||||
// padding: 1rem !important;
|
||||
// }
|
||||
// @media only screen and (max-width: 600px) {
|
||||
// h3{
|
||||
// font-size: 20px;
|
||||
// margin-top: 2rem;
|
||||
// }
|
||||
// .card-mat{
|
||||
// max-width: 95%;
|
||||
// }
|
||||
// .container{
|
||||
// display: flow-root!important;
|
||||
// }
|
||||
// .img {
|
||||
// margin-right: 2rem;
|
||||
// margin-left: 1rem;
|
||||
// }
|
||||
// .img-sun{
|
||||
// margin-right: 2rem;
|
||||
// }
|
||||
// .img-set{
|
||||
// margin-right: 2rem;
|
||||
// }
|
||||
// }
|
||||
// ::ng-deep body{
|
||||
// background-color: #f7f8f5 !important;
|
||||
// }
|
||||
// .dateTime{
|
||||
// margin:0 !important;
|
||||
// color: #0087ba;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
// .datecolor{
|
||||
// color: black !important;
|
||||
// font-weight: 500 !important;
|
||||
// }
|
||||
|
||||
|
||||
$color_red_orange_approx: #107c14;
|
||||
$white: #fff;
|
||||
$black_10: rgba(0, 0, 0, 0.1);
|
||||
@ -246,6 +104,7 @@ margin-left: -3rem!important;
|
||||
// max-width: 100%;
|
||||
min-width: -webkit-fill-available;
|
||||
padding: 1rem !important;
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
h3{
|
||||
@ -304,10 +163,11 @@ margin-left: -3rem!important;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
h4{
|
||||
color: #227f6e;;
|
||||
color: #227f6e;
|
||||
margin: 0;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 105px);
|
||||
height: calc(100vh - 338px);
|
||||
}
|
||||
.flexxx{
|
||||
flex-direction: column;
|
||||
@ -414,4 +274,9 @@ footer {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.scrollHV {
|
||||
height: calc(100vh - 150px);
|
||||
// zoom: 90%;
|
||||
}
|
||||
|
||||
|
||||
@ -190,6 +190,7 @@ export class SlotBookingDetailsComponent implements OnInit {
|
||||
|
||||
toggleActive(event:any,param:any,i:any){
|
||||
console.log(event,param,i)
|
||||
this.slot_array =[];
|
||||
// debugger;
|
||||
// event.preventDefault();
|
||||
this.slotIndex = i
|
||||
@ -224,7 +225,7 @@ export class SlotBookingDetailsComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
|
||||
this.slot_array.push({date:this.date,slots:param})
|
||||
this.slot_array.push({date:this.date,slots:filteredTimes})
|
||||
}
|
||||
|
||||
|
||||
@ -232,8 +233,8 @@ export class SlotBookingDetailsComponent implements OnInit {
|
||||
console.log( this.slot_array)
|
||||
localStorage.setItem("slotData",JSON.stringify(this.slot_array))
|
||||
let URL = this.router.url;
|
||||
//console.log(URL)
|
||||
this.router.navigate([URL+"/cus"])
|
||||
console.log( JSON.parse(localStorage.getItem("slotData")))
|
||||
this.router.navigate([URL+"/cus"])
|
||||
}
|
||||
checkBooked(param){
|
||||
// console.log(param, this.bookedAppointment)
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
<mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'"
|
||||
[opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
|
||||
<div class="opt-side relative ">
|
||||
<div class="sidebar-container ">
|
||||
<div class="sidebar-container " *ngIf="userLength.length > 0">
|
||||
<div class="branding text-center">
|
||||
<!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> Appointment</span>
|
||||
</h2> -->
|
||||
<h2><i class="fa fa-calendar" aria-hidden="true"></i> <span> Appointment</span>
|
||||
<h2><i class="fa fa-calendar" aria-hidden="true"></i> <span> {{getUserData.BusinessDetails[0].busName}}</span>
|
||||
</h2>
|
||||
|
||||
</div>
|
||||
@ -18,8 +18,9 @@
|
||||
<div class="user-pro-wrap">
|
||||
<div class="user-profile-thumb text-center">
|
||||
<div class="user-i">
|
||||
<img src="assets/images/userpic.png" class="rad-full mb-1" width="100" height="100" alt="">
|
||||
<div> <span>{{getUser}}</span></div>
|
||||
<img [src]="getUserData.logo != '' ? image_view(getUserData.logo) : 'assets/images/userpic.png'" class="rad-full mb-1" width="100" height="100" alt="">
|
||||
<div> <span>{{getUserData.userName}}</span></div>
|
||||
<div> <span>({{getUserData.role}})</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="most-used text-center">
|
||||
|
||||
@ -11,6 +11,8 @@ import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface,
|
||||
PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { RoleMenuItemsPipe } from '../role-menu-items.pipe';
|
||||
import { ConsultantService } from 'app/appoinment/consultant-setting/consultant-service/consultant.service';
|
||||
import { environment } from 'environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
@ -46,11 +48,16 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
|
||||
|
||||
@ViewChild('sidemenu', {static: true}) sidemenu;
|
||||
public config: PerfectScrollbarConfigInterface = {};
|
||||
getUser: string;
|
||||
|
||||
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService ) {
|
||||
getUser: any;
|
||||
// usersLogo: any;
|
||||
private apiUrl = environment.apiEndpoint;
|
||||
getUserData: any;
|
||||
userLength: any = [];
|
||||
constructor(public _con:ConsultantService,private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService ) {
|
||||
const browserLang: string = translate.getBrowserLang();
|
||||
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
|
||||
this.getUser = localStorage.getItem('user_role')
|
||||
this.getUserDetails()
|
||||
}
|
||||
|
||||
//08/02/2023
|
||||
@ -61,9 +68,7 @@ users() {
|
||||
}
|
||||
//
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this.getUser = localStorage.getItem('user_role')
|
||||
ngOnInit(): void {
|
||||
|
||||
const elemSidebar = <HTMLElement>document.querySelector('.sidebar-container ');
|
||||
|
||||
@ -84,6 +89,24 @@ users() {
|
||||
// Ps.update(elemContent);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
getUserDetails(){
|
||||
let userID = localStorage.getItem('user_id')
|
||||
console.log('in')
|
||||
this._con.getUsersListDetails(userID).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.userLength = res.data
|
||||
this.getUserData = res.data[0]
|
||||
// this.usersLogo = res.data[0].logo;
|
||||
console.log(this.getUserData)
|
||||
}
|
||||
})
|
||||
}
|
||||
image_view(image){
|
||||
return this.apiUrl+'imageViewer?img_name='+image;
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
@ -100,7 +123,10 @@ users() {
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this._router.unsubscribe();
|
||||
if (this._router) {
|
||||
this._router.unsubscribe();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
isOver(): boolean {
|
||||
|
||||
@ -10,7 +10,7 @@ export const environment = {
|
||||
// apiEndpoint:'http://192.168.1.20:8080/api/',
|
||||
// apiEndpoint:'https://api.venbait.in/api/',
|
||||
// apiEndpoint:'http://venbainfotech.com:5000/api/',
|
||||
apiEndpoint:'http://192.168.1.17:8080/api/',
|
||||
apiEndpoint:'http://192.168.1.3:8080/api/',
|
||||
// apiEndpoint:'https://api.venbait.in/api/',
|
||||
|
||||
//EndUser URL
|
||||
|
||||
Loading…
Reference in New Issue
Block a user