slot-time
This commit is contained in:
Smart
parent
32b71203b0
commit
95d12ccc45
@ -12,6 +12,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
|
|||||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { ConsultantSettingComponent } from './consultant-setting/consultant-setting.component';
|
import { ConsultantSettingComponent } from './consultant-setting/consultant-setting.component';
|
||||||
import { NotifierModule, NotifierOptions } from 'angular-notifier';
|
import { NotifierModule, NotifierOptions } from 'angular-notifier';
|
||||||
|
import { UnavailabilityComponent } from './unavailability/unavailability.component';
|
||||||
|
|
||||||
|
|
||||||
const customNotifierOptions: NotifierOptions = {
|
const customNotifierOptions: NotifierOptions = {
|
||||||
@ -60,7 +61,8 @@ const customNotifierOptions: NotifierOptions = {
|
|||||||
ConsultantSettingComponent,
|
ConsultantSettingComponent,
|
||||||
EditWorkingHoursComponent,
|
EditWorkingHoursComponent,
|
||||||
ExtraWorkingHoursComponent,
|
ExtraWorkingHoursComponent,
|
||||||
AssignServiceComponent
|
AssignServiceComponent,
|
||||||
|
UnavailabilityComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
|
|||||||
@ -158,19 +158,23 @@
|
|||||||
<!-- <input id="color-toggle" type="checkbox" >
|
<!-- <input id="color-toggle" type="checkbox" >
|
||||||
<label for="color-toggle" class="toggle">Customize working hours.</label> -->
|
<label for="color-toggle" class="toggle">Customize working hours.</label> -->
|
||||||
<div class="booking-url">
|
<div class="booking-url">
|
||||||
<!-- <span class="underline-title full-width hours">Working Hours</span> -->
|
<span class="underline-title full-width hours">Working Hours</span>
|
||||||
<span class="underline-title">Working Hours</span>
|
<!-- <span class="underline-title">Working Hours</span> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="alert">
|
<!-- <div class="alert">
|
||||||
<span class="closebtn">× sample follows customized working hours in (GMT +05:30) India Standard Time (Asia/Kolkata).</span>
|
<span class="closebtn">× sample follows customized working hours in (GMT +05:30) India Standard Time (Asia/Kolkata).</span>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="timing-container">
|
<div class="timing-container mt-1">
|
||||||
<div class="timing">
|
<div fxLayout="row wrap">
|
||||||
<span class="dis-flex">
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap" >
|
||||||
<i class="material-icons"></i> <span class="clock">Sunday</span>
|
<div class="timing">
|
||||||
</span>
|
<span class="dis-flex">
|
||||||
|
<img src="assets/images/Time-Icon.svg" alt="Avatar" class="img"><span class="clock">Sunday</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[0]['sunday']['hours']; ">
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" class="m-gap p-gap" >
|
||||||
|
<div class="dis-flex mt-1 dis-font" *ngFor="let item of workinghours[0]['sunday']['hours']; ">
|
||||||
<div class="dis-flex" >
|
<div class="dis-flex" >
|
||||||
<span> {{item.startTime}}
|
<span> {{item.startTime}}
|
||||||
</span>
|
</span>
|
||||||
@ -180,109 +184,149 @@
|
|||||||
<span> {{item.endTime}}</span>
|
<span> {{item.endTime}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="timing-container">
|
|
||||||
<div class="timing">
|
|
||||||
<span class="dis-flex">
|
|
||||||
<i class="material-icons"></i> <span class="clock">Monday</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[1]['monday']['hours']; ">
|
</div>
|
||||||
<div class="dis" >
|
</div>
|
||||||
<span> {{item.startTime}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span class="hyphen">-</span>
|
|
||||||
<div class="dis-flex" >
|
|
||||||
<span> {{item.endTime}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="timing-container">
|
<div class="timing-container">
|
||||||
<div class="timing">
|
<div fxLayout="row wrap">
|
||||||
<span class="dis-flex">
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap" >
|
||||||
<i class="material-icons"></i> <span class="clock">Tuesday</span>
|
<div class="timing">
|
||||||
</span>
|
<span class="dis-flex">
|
||||||
</div>
|
<!-- <i class="material-icons"></i> -->
|
||||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[2]['tuesday']['hours']; ">
|
<img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">
|
||||||
<div class="dis-flex" >
|
<span class="clock">Monday</span>
|
||||||
<span> {{item.startTime}}
|
</span>
|
||||||
</span>
|
</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="dis-flex mt-1 dis-font" *ngFor="let item of workinghours[1]['monday']['hours']; ">
|
||||||
|
<div class="dis" >
|
||||||
|
<span> {{item.startTime}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="hyphen">-</span>
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.endTime}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="hyphen">-</span>
|
|
||||||
<div class="dis-flex" >
|
|
||||||
<span> {{item.endTime}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="timing-container">
|
|
||||||
<div class="timing">
|
|
||||||
<span class="dis-flex">
|
|
||||||
<i class="material-icons"></i> <span class="clock">Wednesday</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[3]['wednesday']['hours']; ">
|
<div class="timing-container">
|
||||||
<div class="dis-flex" >
|
<div fxLayout="row wrap">
|
||||||
<span> {{item.startTime}}
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap" >
|
||||||
</span>
|
<div class="timing">
|
||||||
|
<span class="dis-flex">
|
||||||
|
<img src="assets/images/Time-Icon.svg" alt="Avatar" class="img"> <span class="clock">Tuesday</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="hyphen">-</span>
|
|
||||||
<div class="dis-flex" >
|
|
||||||
<span> {{item.endTime}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div><br />
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" class="m-gap p-gap" >
|
||||||
</div>
|
<div class="dis-flex mt-1 dis-font" *ngFor="let item of workinghours[2]['tuesday']['hours']; ">
|
||||||
<div class="timing-container">
|
<div class="dis-flex" >
|
||||||
<div class="timing">
|
<span> {{item.startTime}}
|
||||||
<span class="dis-flex">
|
</span>
|
||||||
<i class="material-icons"></i> <span class="clock">Thursday</span>
|
</div>
|
||||||
</span>
|
<span class="hyphen">-</span>
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.endTime}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[4]['thursday']['hours']; ">
|
<div class="timing-container">
|
||||||
<div class="dis-flex" >
|
<div fxLayout="row wrap">
|
||||||
<span> {{item.startTime}}
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap" >
|
||||||
</span>
|
<div class="timing">
|
||||||
|
<span class="dis-flex">
|
||||||
|
<img src="assets/images/Time-Icon.svg" alt="Avatar" class="img"><span class="clock">Wednesday</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="hyphen">-</span>
|
</div>
|
||||||
<div class="dis-flex" >
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" class="m-gap p-gap" >
|
||||||
<span> {{item.endTime}}</span>
|
<div class="dis-flex mt-1 dis-font" *ngFor="let item of workinghours[3]['wednesday']['hours']; ">
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.startTime}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="hyphen">-</span>
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.endTime}}</span>
|
||||||
|
</div>
|
||||||
|
</div><br />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timing-container">
|
||||||
|
<div fxLayout="row wrap">
|
||||||
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap" >
|
||||||
|
<div class="timing">
|
||||||
|
<span class="dis-flex">
|
||||||
|
<img src="assets/images/Time-Icon.svg" alt="Avatar" class="img"> <span class="clock">Thursday</span>
|
||||||
|
</span>
|
||||||
|
</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="dis-flex mt-1 dis-font" *ngFor="let item of workinghours[4]['thursday']['hours']; ">
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.startTime}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="hyphen">-</span>
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.endTime}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="timing-container">
|
|
||||||
<div class="timing">
|
|
||||||
<span class="dis-flex">
|
|
||||||
<i class="material-icons"></i> <span class="clock">Friday</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[5]['friday']['hours']; ">
|
</div>
|
||||||
<div class="dis-flex" >
|
<div class="timing-container">
|
||||||
<span> {{item.startTime}}
|
<div fxLayout="row wrap">
|
||||||
</span>
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap" >
|
||||||
|
<div class="timing">
|
||||||
|
<span class="dis-flex">
|
||||||
|
<img src="assets/images/Time-Icon.svg" alt="Avatar" class="img"><span class="clock">Friday</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="hyphen">-</span>
|
</div>
|
||||||
<div class="dis-flex" >
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" class="m-gap p-gap" >
|
||||||
<span> {{item.endTime}}</span>
|
<div class="dis-flex mt-1 dis-font" *ngFor="let item of workinghours[5]['friday']['hours']; ">
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.startTime}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="hyphen">-</span>
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.endTime}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timing-container">
|
||||||
|
<div fxLayout="row wrap">
|
||||||
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap" >
|
||||||
|
<div class="timing">
|
||||||
|
<span class="dis-flex">
|
||||||
|
<img src="assets/images/Time-Icon.svg" alt="Avatar" class="img"> <span class="clock">Saturday</span>
|
||||||
|
</span>
|
||||||
|
</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="dis-flex mt-1 dis-font" *ngFor="let item of workinghours[6]['saturday']['hours']; ">
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.startTime}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="hyphen">-</span>
|
||||||
|
<div class="dis-flex" >
|
||||||
|
<span> {{item.endTime}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="timing-container">
|
|
||||||
<div class="timing">
|
|
||||||
<span class="dis-flex">
|
|
||||||
<i class="material-icons"></i> <span class="clock">Saturday</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[6]['saturday']['hours']; ">
|
|
||||||
<div class="dis-flex" >
|
|
||||||
<span> {{item.startTime}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span class="hyphen">-</span>
|
|
||||||
<div class="dis-flex" >
|
|
||||||
<span> {{item.endTime}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!-- <div class="timing-container">
|
<!-- <div class="timing-container">
|
||||||
<div class="timing">
|
<div class="timing">
|
||||||
<span class="dis-flex">
|
<span class="dis-flex">
|
||||||
@ -306,7 +350,7 @@
|
|||||||
<p class="para">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
|
<p class="para">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
|
||||||
<div class="booking-url">
|
<div class="booking-url">
|
||||||
<span class="underline-title full-width hours">Unavailability</span>
|
<span class="underline-title full-width hours">Unavailability</span>
|
||||||
<button mat-button (click)="workingDialog('Add',{})" class="add-button">Add</button>
|
<button mat-button (click)="unavailability('Add',{})" class="add-button">Add</button>
|
||||||
</div>
|
</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>
|
</ng-scrollbar>
|
||||||
|
|||||||
@ -1,217 +1,240 @@
|
|||||||
:host {
|
:host {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host ::ng-deep .mat-tab-labels {
|
:host ::ng-deep .mat-tab-labels {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
color: rgba(0, 0, 0, 0.87);
|
color: rgba(0, 0, 0, 0.87);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
mat-tab-group {
|
mat-tab-group {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host ::ng-deep .mat-tab-body-wrapper {
|
:host ::ng-deep .mat-tab-body-wrapper {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
// margin-top: -9rem;
|
// margin-top: -9rem;
|
||||||
}
|
}
|
||||||
// :host ::ng-deep .mat-tab-body.mat-tab-body-active {
|
// :host ::ng-deep .mat-tab-body.mat-tab-body-active {
|
||||||
// position: absolute !important;
|
// position: absolute !important;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
mat-tab-body {
|
mat-tab-body {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host ::ng-deep mat-ink-bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.icons-info{
|
|
||||||
margin-left: -4rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
.icons{
|
|
||||||
margin-left: -1rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
.icons-Hours{
|
|
||||||
margin-left: -2rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
:host ::ng-deep.mat-tab-label.mat-tab-label-active {
|
|
||||||
background-color: transparent;
|
|
||||||
color: #666;
|
|
||||||
background-color: #eee;
|
|
||||||
border-right: 2px solid #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host ::ng-deep.mat-tab-label {
|
|
||||||
background-color: transparent;
|
|
||||||
/* background-color: lightgray; */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
:host ::ng-deep mat-ink-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
//mat-tab1start
|
||||||
|
.icons-info{
|
||||||
|
margin-left: -4rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
.staff{
|
.staff{
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #FAFAFA;
|
background-color: #FAFAFA;
|
||||||
border-bottom: 1px solid #EFEFEF;
|
border-bottom: 1px solid #EFEFEF;
|
||||||
height: 63px;
|
height: 63px;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.staff-title{
|
.staff-title{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
color: #4C4C4C;
|
color: #4C4C4C;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
}
|
|
||||||
form{
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.line{
|
|
||||||
margin-left: 6rem;
|
|
||||||
}
|
|
||||||
.form-group{
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
input{
|
|
||||||
border: none;
|
|
||||||
// border-bottom: 1px solid #d4d4d4;
|
|
||||||
}
|
|
||||||
input:focus {
|
|
||||||
outline:none;
|
|
||||||
}
|
}
|
||||||
.label-container{
|
.label-container{
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 1px solid #F5F6F8;
|
border-bottom: 1px solid #F5F6F8;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
label{
|
.line{
|
||||||
color: #666;
|
margin-left: 6rem;
|
||||||
position: relative;
|
|
||||||
text-transform: capitalize;
|
|
||||||
width: 155px;
|
|
||||||
flex: none;
|
|
||||||
margin-right: 15px;
|
|
||||||
align-self: flex-start;
|
|
||||||
padding-top: 13px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 15px;
|
|
||||||
}
|
}
|
||||||
.scrollHV {
|
.para{
|
||||||
height: calc(100vh - 190px);
|
font-size: 15px;
|
||||||
|
color: #5B6572!important;
|
||||||
}
|
}
|
||||||
|
.underline-title{
|
||||||
|
// color: #666!important;
|
||||||
|
color: #111;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 1px;
|
||||||
|
border-bottom: 1px solid #EFEFEF;
|
||||||
|
padding: 0 0 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.underline-title:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 41px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #50477E;
|
||||||
|
bottom: -1px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.full-width{
|
||||||
|
width: 90%!important;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
//mat-tab2start
|
||||||
|
.icons-Hours{
|
||||||
|
margin-left: -2rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
.working-hours{
|
||||||
|
margin: 30px 25px 30px 30px;
|
||||||
.booking-url{
|
.booking-url{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: calc(100% - 63px);
|
// height: calc(100% - 63px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 20px 35px;
|
padding: 20px 35px;
|
||||||
}
|
}
|
||||||
.booking-para{
|
.hours{
|
||||||
font-size: 14px;
|
margin-left: -2rem;
|
||||||
color: #666!important;
|
}
|
||||||
line-height: 21px;
|
.timing-container{
|
||||||
|
// display: flex;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #F5F6F8;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 7px 0;
|
||||||
|
// display: flex;
|
||||||
|
}
|
||||||
|
.timing{
|
||||||
|
color: #666;
|
||||||
|
position: relative;
|
||||||
|
text-transform: capitalize;
|
||||||
|
width: 155px;
|
||||||
|
flex: none;
|
||||||
|
margin-right: 15px;
|
||||||
|
align-self: flex-start;
|
||||||
|
padding-top: 13px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 15px;
|
||||||
|
.dis-flex{
|
||||||
|
display: flex!important;
|
||||||
|
}
|
||||||
|
.img{
|
||||||
|
width: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hyphen {
|
||||||
|
padding: 0px 60px 0px 60px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.clock{
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.scrollHV {
|
||||||
|
height: calc(100vh - 190px);
|
||||||
|
}
|
||||||
|
.add-button{
|
||||||
|
border: 1px solid #50497F;
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #50497F;
|
||||||
|
background-color: #FFF;
|
||||||
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.dis-font{
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.mat-tab-body-content {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden!important;
|
||||||
|
}
|
||||||
|
.margin{
|
||||||
|
margin-bottom: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.underline-title{
|
// .toggle{
|
||||||
// color: #666!important;
|
// padding-left: 5px;
|
||||||
color: #111;
|
// }
|
||||||
font-size: 16px;
|
// .alert{
|
||||||
margin-top: 1px;
|
// padding: 20px;
|
||||||
border-bottom: 1px solid #EFEFEF;
|
// background-color: #F4FBFF;
|
||||||
padding: 0 0 15px;
|
// border-color: #D0F6FF;
|
||||||
box-sizing: border-box;
|
// color: #5F5F5F;
|
||||||
|
// margin-top: 4rem;
|
||||||
|
// }
|
||||||
|
// .closebtn {
|
||||||
|
// margin-left: 15px;
|
||||||
|
// color: #5F5F5F;
|
||||||
|
// font-size: 12px;
|
||||||
|
// line-height: 20px;
|
||||||
|
// cursor: pointer;
|
||||||
|
// }
|
||||||
|
|
||||||
|
//mat-tab3start
|
||||||
|
.assignService{
|
||||||
|
.scrollHV {
|
||||||
|
height: calc(100vh - 461px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.p-1{
|
||||||
|
padding: 1rem !important;
|
||||||
|
.flexCard{
|
||||||
|
display: contents !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.service-info{
|
||||||
|
// line-height: 3rem!important;
|
||||||
|
font-size: 14px!important;
|
||||||
|
font-weight: 500!important;
|
||||||
|
color: #2f2c2c;
|
||||||
|
}
|
||||||
|
.service-info2{
|
||||||
|
// line-height: 3rem!important;
|
||||||
|
font-size: 12px!important;
|
||||||
|
font-weight: 500!important;
|
||||||
|
color: #5F5F5F;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
font-size: 12px!important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
color: rgba(2,71,91,.6);
|
||||||
|
// padding: 0 0 10px;
|
||||||
|
max-height: 38px;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.full-width{
|
.noAssignedService{
|
||||||
width: 90%!important;
|
font-size: large;
|
||||||
position: absolute;
|
color: #847a7a;
|
||||||
}
|
margin: 0;
|
||||||
.underline-title:after {
|
text-align: center;
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 41px;
|
|
||||||
height: 1px;
|
|
||||||
background-color: #50477E;
|
|
||||||
bottom: -1px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.dis-flex {
|
|
||||||
display: flex!important;
|
|
||||||
}
|
|
||||||
.url {
|
|
||||||
width: calc(100% - 172px);
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.customize-link {
|
|
||||||
font-size: 15px;
|
|
||||||
text-decoration: underline;
|
|
||||||
margin-top: 13px;
|
|
||||||
font-family: zohopuvi-medium;
|
|
||||||
color: #666;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
.url-button {
|
|
||||||
height: 41px;
|
|
||||||
margin: 2px 2px 0 0;
|
|
||||||
width: auto;
|
|
||||||
min-width: 90px;
|
|
||||||
margin-left: 6rem;
|
|
||||||
}
|
|
||||||
.copy-button {
|
|
||||||
background: #625A92;
|
|
||||||
border: 1px solid #625A92;
|
|
||||||
-webkit-border-radius: 2px;
|
|
||||||
-moz-border-radius: 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
color: #FFF;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.boxmiddle {
|
|
||||||
width: 91%;
|
|
||||||
background: #F7F8F9;
|
|
||||||
height: 45px;
|
|
||||||
border: 1px solid #E7E7E7;
|
|
||||||
border-radius: 3px;
|
|
||||||
margin: 30px 10px 12px 38px;
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
.booking-url-input {
|
|
||||||
color: #567FC2;
|
|
||||||
font-family: zohopuvi-regular;
|
|
||||||
border: 0;
|
|
||||||
width: 100%;
|
|
||||||
background: #F9F9F9;
|
|
||||||
font-size: 13px;
|
|
||||||
padding: 15px 10px 13px;
|
|
||||||
}
|
|
||||||
::ng-deep .mat-form-field-infix {
|
|
||||||
height: 50px!important;
|
|
||||||
}
|
|
||||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
|
|
||||||
margin-top: 10px!important;
|
|
||||||
}
|
}
|
||||||
.mat-card{
|
.mat-card{
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
@ -252,123 +275,142 @@ label{
|
|||||||
padding-top: 3rem;
|
padding-top: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.button{
|
|
||||||
float: right;
|
|
||||||
background-color: #4caf50;
|
|
||||||
color: #ffff;
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.working-hours{
|
|
||||||
margin: 30px 25px 30px 30px;
|
|
||||||
.toggle{
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
.alert{
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #F4FBFF;
|
|
||||||
border-color: #D0F6FF;
|
|
||||||
color: #5F5F5F;
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
.closebtn {
|
|
||||||
margin-left: 15px;
|
|
||||||
color: #5F5F5F;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.hours{
|
|
||||||
margin-left: -2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timing-container{
|
//mat-tab4start
|
||||||
// display: flex;
|
|
||||||
width: 100%;
|
.icons{
|
||||||
border-bottom: 1px solid #F5F6F8;
|
margin-left: -1rem;
|
||||||
box-sizing: border-box;
|
margin-right: 1rem;
|
||||||
min-height: 40px;
|
|
||||||
padding: 7px 0;
|
|
||||||
}
|
|
||||||
.timing{
|
|
||||||
color: #666;
|
|
||||||
position: relative;
|
|
||||||
text-transform: capitalize;
|
|
||||||
width: 155px;
|
|
||||||
flex: none;
|
|
||||||
margin-right: 15px;
|
|
||||||
align-self: flex-start;
|
|
||||||
padding-top: 13px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 15px;
|
|
||||||
}
|
|
||||||
.dis-flex{
|
|
||||||
display: flex!important;
|
|
||||||
}
|
|
||||||
.hyphen {
|
|
||||||
padding: 0px 60px 0px 60px;
|
|
||||||
color: #999;
|
|
||||||
}
|
}
|
||||||
.clock{
|
.booking-url{
|
||||||
margin-top: 6px;
|
width: 100%;
|
||||||
margin-left: 10px;
|
// height: calc(100% - 63px);
|
||||||
|
overflow: auto;
|
||||||
|
padding: 20px 35px;
|
||||||
|
}
|
||||||
|
.boxmiddle {
|
||||||
|
width: 91%;
|
||||||
|
background: #F7F8F9;
|
||||||
|
height: 45px;
|
||||||
|
border: 1px solid #E7E7E7;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 30px 10px 12px 38px;
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
.dis-flex {
|
||||||
|
display: flex!important;
|
||||||
|
}
|
||||||
|
.url {
|
||||||
|
width: calc(100% - 172px);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.booking-url-input {
|
||||||
|
color: #567FC2;
|
||||||
|
font-family: zohopuvi-regular;
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #F9F9F9;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 15px 10px 13px;
|
||||||
|
}
|
||||||
|
.url-button {
|
||||||
|
height: 41px;
|
||||||
|
margin: 2px 2px 0 0;
|
||||||
|
width: auto;
|
||||||
|
min-width: 90px;
|
||||||
|
margin-left: 6rem;
|
||||||
|
}
|
||||||
|
.copy-button {
|
||||||
|
background: #625A92;
|
||||||
|
border: 1px solid #625A92;
|
||||||
|
-webkit-border-radius: 2px;
|
||||||
|
-moz-border-radius: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #FFF;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.booking-para{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666!important;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
.customize-link {
|
||||||
|
font-size: 15px;
|
||||||
|
text-decoration: underline;
|
||||||
|
margin-top: 13px;
|
||||||
|
font-family: zohopuvi-medium;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
:host ::ng-deep.mat-tab-label.mat-tab-label-active {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #666;
|
||||||
|
background-color: #eee;
|
||||||
|
border-right: 2px solid #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep.mat-tab-label {
|
||||||
|
background-color: transparent;
|
||||||
|
/* background-color: lightgray; */
|
||||||
|
}
|
||||||
|
form{
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.form-group{
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
border: none;
|
||||||
|
// border-bottom: 1px solid #d4d4d4;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
color: #666;
|
||||||
|
position: relative;
|
||||||
|
text-transform: capitalize;
|
||||||
|
width: 155px;
|
||||||
|
flex: none;
|
||||||
|
margin-right: 15px;
|
||||||
|
align-self: flex-start;
|
||||||
|
padding-top: 13px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 15px;
|
||||||
}
|
}
|
||||||
.scrollHV {
|
.scrollHV {
|
||||||
height: calc(100vh - 190px);
|
height: calc(100vh - 190px);
|
||||||
}
|
}
|
||||||
.add-button{
|
::ng-deep .mat-form-field-infix {
|
||||||
border: 1px solid #50497F;
|
height: 50px!important;
|
||||||
min-width: 80px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #50497F;
|
|
||||||
background-color: #FFF;
|
|
||||||
cursor: pointer;
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
.mat-tab-body-content {
|
::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
|
||||||
height: 100%;
|
margin-top: 10px!important;
|
||||||
overflow: hidden!important;
|
|
||||||
}
|
}
|
||||||
.para{
|
.button{
|
||||||
font-size: 15px;
|
float: right;
|
||||||
color: #5B6572!important;
|
background-color: #4caf50;
|
||||||
}
|
color: #ffff;
|
||||||
.margin{
|
margin-top: 1rem;
|
||||||
margin-bottom: 10rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.checkbox{
|
.checkbox{
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
|
||||||
.service-info{
|
|
||||||
// line-height: 3rem!important;
|
|
||||||
font-size: 14px!important;
|
|
||||||
font-weight: 500!important;
|
|
||||||
color: #2f2c2c;
|
|
||||||
}
|
|
||||||
.service-info2{
|
|
||||||
// line-height: 3rem!important;
|
|
||||||
font-size: 12px!important;
|
|
||||||
font-weight: 500!important;
|
|
||||||
color: #5F5F5F;
|
|
||||||
}
|
|
||||||
.info{
|
|
||||||
font-size: 12px!important;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(2,71,91,.6);
|
|
||||||
// padding: 0 0 10px;
|
|
||||||
max-height: 38px;
|
|
||||||
display: -webkit-box;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
::ng-deep .mat-card .mat-card-title:nth-child(2) {
|
::ng-deep .mat-card .mat-card-title:nth-child(2) {
|
||||||
margin-top: -33px!important;
|
margin-top: -33px!important;
|
||||||
|
}
|
||||||
|
::ng-deep .mat-select-panel .mat-option{
|
||||||
|
height: 5em !important;
|
||||||
|
}
|
||||||
|
// css example
|
||||||
|
.indianSymbol {
|
||||||
|
content: "\20B9";
|
||||||
}
|
}
|
||||||
// .user-pro-wrap{
|
// .user-pro-wrap{
|
||||||
// background-color: #fff;
|
// background-color: #fff;
|
||||||
@ -390,29 +432,8 @@ margin-bottom: 10rem;
|
|||||||
// color: #4C4C4C;
|
// color: #4C4C4C;
|
||||||
// text-align: center;
|
// text-align: center;
|
||||||
// }
|
// }
|
||||||
.assignService{
|
|
||||||
.scrollHV {
|
|
||||||
height: calc(100vh - 461px) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::ng-deep .mat-select-panel .mat-option{
|
|
||||||
height: 5em !important;
|
|
||||||
}
|
|
||||||
// css example
|
|
||||||
.indianSymbol {
|
|
||||||
content: "\20B9";
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-1{
|
|
||||||
padding: 1rem !important;
|
|
||||||
.flexCard{
|
|
||||||
display: contents !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.noAssignedService{
|
|
||||||
font-size: large;
|
|
||||||
color: #847a7a;
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import { AssignServiceComponent } from '../assign-service/assign-service.compone
|
|||||||
import { ConsultantService } from '../consultant-service/consultant.service';
|
import { ConsultantService } from '../consultant-service/consultant.service';
|
||||||
import { EditWorkingHoursComponent } from '../edit-working-hours/edit-working-hours.component';
|
import { EditWorkingHoursComponent } from '../edit-working-hours/edit-working-hours.component';
|
||||||
import { ExtraWorkingHoursComponent } from '../extra-working-hours/extra-working-hours.component';
|
import { ExtraWorkingHoursComponent } from '../extra-working-hours/extra-working-hours.component';
|
||||||
|
import { UnavailabilityComponent } from '../unavailability/unavailability.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-consultant-setting',
|
selector: 'app-consultant-setting',
|
||||||
@ -116,6 +117,22 @@ workingDialog(action,obj) {
|
|||||||
// this.formAddUpdateAndDelete(result,result.data)
|
// this.formAddUpdateAndDelete(result,result.data)
|
||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
|
}
|
||||||
|
unavailability(action,obj) {
|
||||||
|
obj.action = action;
|
||||||
|
const dialogRef = this.dialog.open(UnavailabilityComponent, {
|
||||||
|
width: '48%',
|
||||||
|
height: '100%',
|
||||||
|
// maxWidth: '38vw',
|
||||||
|
position: { right: '0' },
|
||||||
|
data:obj
|
||||||
|
});
|
||||||
|
// dialogRef.afterClosed().subscribe(result => {
|
||||||
|
// if(result != undefined){
|
||||||
|
// console.log(result)
|
||||||
|
// this.formAddUpdateAndDelete(result,result.data)
|
||||||
|
// }
|
||||||
|
// });
|
||||||
}
|
}
|
||||||
getUsersList() {
|
getUsersList() {
|
||||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||||
|
|||||||
@ -1,66 +1,151 @@
|
|||||||
<div class="extra-working">
|
<!-- <div class="extra-working">
|
||||||
<div class="popup-header">
|
<div class="popup-header">
|
||||||
<h5>
|
<h5>
|
||||||
Add Additional Availability - Staff
|
Add Additional Availability - Staff
|
||||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||||
><mat-icon>close</mat-icon></button>
|
>
|
||||||
</h5>
|
<mat-icon>close</mat-icon>
|
||||||
</div>
|
</button>
|
||||||
<div class="availability">
|
</h5>
|
||||||
<div mat-dialog-content class="my-table">
|
</div>
|
||||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
<div class="availability">
|
||||||
<div class="mt-2">
|
<div mat-dialog-content class="my-table">
|
||||||
<div class="field ">
|
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
|
||||||
<label for="name-field" class="label-container">Name</label>
|
<div class="mt-2">
|
||||||
<mat-form-field appearance="outline" class="mat-pane">
|
<div class="field ">
|
||||||
<input placeholder="Name" matInput formControlName="name">
|
<label for="name-field" class="label-container">Name</label>
|
||||||
</mat-form-field>
|
<mat-form-field appearance="outline" class="mat-pane">
|
||||||
</div>
|
<input placeholder="Name" matInput formControlName="Name">
|
||||||
<div class="field ">
|
</mat-form-field>
|
||||||
<label for="name-field" class="mr2">All-day Availability</label>
|
|
||||||
<mat-slide-toggle></mat-slide-toggle>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="name-field" class="label-container">From</label>
|
|
||||||
<mat-form-field appearance="outline" class="mate">
|
|
||||||
<input matInput formControlName="releasedAt"
|
|
||||||
[matDatepicker]="releasedAtPicker" (click)="releasedAtPicker.open()">
|
|
||||||
<mat-datepicker-toggle matSuffix [for]="releasedAtPicker">
|
|
||||||
</mat-datepicker-toggle>
|
|
||||||
<mat-datepicker #releasedAtPicker>
|
|
||||||
</mat-datepicker>
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field appearance="outline" class="mate date-marge">
|
|
||||||
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="name-field" class="label">To</label>
|
|
||||||
<mat-form-field appearance="outline" class="mate">
|
|
||||||
<input matInput formControlName="releasedAt"
|
|
||||||
[matDatepicker]="releasedAtPickers" (click)="releasedAtPickers.open()">
|
|
||||||
<mat-datepicker-toggle matSuffix [for]="releasedAtPickers">
|
|
||||||
</mat-datepicker-toggle>
|
|
||||||
<mat-datepicker #releasedAtPickers>
|
|
||||||
</mat-datepicker>
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field appearance="outline" class="mate date-marge">
|
|
||||||
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
<div class="field ">
|
|
||||||
<label for="name-field" class="mr-8">Reason</label>
|
|
||||||
<mat-form-field appearance="outline" class="mat-pane">
|
|
||||||
<input placeholder="Reason" matInput formControlName="reason">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="popup-button mb-2">
|
|
||||||
<span class="buttons cancel">Cancel</span>
|
|
||||||
<span class="buttons add">Save</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="field">
|
||||||
|
<label for="name-field" class="mr2">All-day Availability</label>
|
||||||
|
<mat-slide-toggle class="toggle"></mat-slide-toggle>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="name-field" class="label-container">From</label>
|
||||||
|
<mat-form-field appearance="outline" class="mate">
|
||||||
|
<input matInput formControlName="releasedAt"
|
||||||
|
[matDatepicker]="releasedAtPicker" (click)="releasedAtPicker.open()">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="releasedAtPicker">
|
||||||
|
</mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #releasedAtPicker>
|
||||||
|
</mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="outline" class="mate date-marge">
|
||||||
|
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="name-field" class="label">To</label>
|
||||||
|
<mat-form-field appearance="outline" class="mate">
|
||||||
|
<input matInput formControlName="releasedAt"
|
||||||
|
[matDatepicker]="releasedAtPickers" (click)="releasedAtPickers.open()">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="releasedAtPickers">
|
||||||
|
</mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #releasedAtPickers>
|
||||||
|
</mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="outline" class="mate date-marge">
|
||||||
|
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="field ">
|
||||||
|
<label for="name-field" class="mr-8">Reason</label>
|
||||||
|
<mat-form-field appearance="outline" class="mat-pane">
|
||||||
|
<input placeholder="Reason" matInput formControlName="reason">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="popup-button mb-2">
|
||||||
|
<span class="buttons cancel">Cancel</span>
|
||||||
|
<span class="buttons add">Save</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
|
<div class="extra-working">
|
||||||
|
<div class="popup-header">
|
||||||
|
<h5>
|
||||||
|
Add Additional Availability - Staff
|
||||||
|
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||||
|
>
|
||||||
|
<mat-icon>close</mat-icon>
|
||||||
|
</button>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
<div class="availabilitys">
|
||||||
|
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
|
||||||
|
<div class="mt-2">
|
||||||
|
<div class="field mb-1">
|
||||||
|
<label class="label-container">Staff</label>
|
||||||
|
<input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel">
|
||||||
|
</div>
|
||||||
|
<!-- <div class="field mb-2">
|
||||||
|
<section class="example-section">
|
||||||
|
<label class="example-margin ">Type</label>
|
||||||
|
<mat-radio-group [(ngModel)]="labelPosition" class="mat-radio" (click)="radioData()">
|
||||||
|
<mat-radio-button class="example-margin" value="after">Time Off</mat-radio-button>
|
||||||
|
<mat-radio-button class="example-margin" value="before">Block Time</mat-radio-button>
|
||||||
|
</mat-radio-group>
|
||||||
|
</section>
|
||||||
|
</div> -->
|
||||||
|
<div class="field mb-1">
|
||||||
|
<label for="name-field" class="mr2">All-day Availability</label>
|
||||||
|
<!-- <mat-slide-toggle class="toggle" (click)="toggleData()"></mat-slide-toggle> -->
|
||||||
|
<label class="switch" >
|
||||||
|
<input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
|
||||||
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||||
|
<span class="switch-handle"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field mb-1">
|
||||||
|
<label for="name-field" class="label-container">From</label>
|
||||||
|
<mat-form-field appearance="outline"class="mate" >
|
||||||
|
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
|
||||||
|
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show">
|
||||||
|
<input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field mb-1" *ngIf="radioDisplay">
|
||||||
|
<label for="name-field" class="container-to">To</label>
|
||||||
|
<mat-form-field appearance="outline"class="mate" >
|
||||||
|
<input matInput [matDatepicker]="picker" name="to" ngModel #datesRef="ngModel">
|
||||||
|
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show">
|
||||||
|
<input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="field mb-1">
|
||||||
|
<label for="name-field" class="mr-8">Reason</label>
|
||||||
|
<textarea class="form-control" id="w3review" name="w3review" rows="4" cols="50" name="reason" ngModel #reasonRef="ngModel">
|
||||||
|
</textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="popup-button">
|
||||||
|
<span class="buttons cancel">Cancel</span>
|
||||||
|
<!-- <span class="buttons add">Save</span> -->
|
||||||
|
<button type="submit" class="btn btn-secondary buttons add" [disabled]="formRef.invalid">Save</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
// margin-bottom: 1.5rem;
|
// margin-bottom: 1.5rem;
|
||||||
// }
|
// }
|
||||||
.availability{
|
.availability{
|
||||||
margin-bottom: 7.5rem;
|
margin-bottom: 11.5rem;
|
||||||
}
|
}
|
||||||
.label-container{
|
.label-container{
|
||||||
margin-right: 8rem;
|
margin-right: 8rem;
|
||||||
@ -68,6 +68,7 @@
|
|||||||
border-top: 1px solid #4caf50;
|
border-top: 1px solid #4caf50;
|
||||||
float: left;
|
float: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
color: #4caf50;
|
color: #4caf50;
|
||||||
@ -98,9 +99,162 @@
|
|||||||
width: 145%;
|
width: 145%;
|
||||||
}
|
}
|
||||||
::ng-deep .mat-icon-button {
|
::ng-deep .mat-icon-button {
|
||||||
margin-right: -3rem;
|
margin-right: -3rem;
|
||||||
|
margin-top: -12px;
|
||||||
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
::ng-deep .mat-slide-toggle-bar {
|
::ng-deep .mat-slide-toggle-bar {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
.form-control{
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
// border: 1px solid #666;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
.container-to{
|
||||||
|
margin-right: 9rem;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||||
|
padding: 0em 0 1em 0;
|
||||||
|
}
|
||||||
|
.field{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.popup-button{
|
||||||
|
margin-top: 7rem;
|
||||||
|
}
|
||||||
|
.example-h2 {
|
||||||
|
margin: 10px;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-section {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-margin {
|
||||||
|
margin: 0 10px!important;
|
||||||
|
margin-left: 25px!important;
|
||||||
|
}
|
||||||
|
.mat-radio{
|
||||||
|
margin-left: 6rem;
|
||||||
|
}
|
||||||
|
.time-align{
|
||||||
|
padding-top: 10px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
//switch
|
||||||
|
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
// vertical-align: top;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
padding: 3px;
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
||||||
|
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
||||||
|
border-radius: 18px;
|
||||||
|
// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing:content-box;
|
||||||
|
}
|
||||||
|
.switch-input {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
box-sizing:content-box;
|
||||||
|
}
|
||||||
|
.switch-label {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: inherit;
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
// background: #eceeef;
|
||||||
|
border-radius: inherit;
|
||||||
|
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
|
||||||
|
border: 1px solid #4CAE4C;
|
||||||
|
box-sizing:content-box;
|
||||||
|
}
|
||||||
|
.switch-label:before, .switch-label:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -.5em;
|
||||||
|
line-height: 1;
|
||||||
|
-webkit-transition: inherit;
|
||||||
|
-moz-transition: inherit;
|
||||||
|
-o-transition: inherit;
|
||||||
|
transition: inherit;
|
||||||
|
box-sizing:content-box;
|
||||||
|
}
|
||||||
|
.switch-label:before {
|
||||||
|
// content: attr(data-off);
|
||||||
|
content: 'enable';
|
||||||
|
right: 11px;
|
||||||
|
color: #111111;
|
||||||
|
// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.switch-label:after {
|
||||||
|
// content: attr(data-on);
|
||||||
|
content: 'disable ';
|
||||||
|
left: 11px;
|
||||||
|
color: #111111;
|
||||||
|
// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.switch-input:checked ~ .switch-label {
|
||||||
|
background: #FFFFFF;
|
||||||
|
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.switch-input:checked ~ .switch-label:before {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.switch-input:checked ~ .switch-label:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.switch-handle {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
left: 4px;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.switch-handle:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -6px 0 0 -6px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
||||||
|
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
.switch-input:checked ~ .switch-handle {
|
||||||
|
left: 74px;
|
||||||
|
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transition
|
||||||
|
========================== */
|
||||||
|
.switch-label, .switch-handle {
|
||||||
|
transition: All 0.3s ease;
|
||||||
|
-webkit-transition: All 0.3s ease;
|
||||||
|
-moz-transition: All 0.3s ease;
|
||||||
|
-o-transition: All 0.3s ease;
|
||||||
|
}
|
||||||
@ -11,6 +11,14 @@ export interface UsersData {
|
|||||||
styleUrls: ['./extra-working-hours.component.scss']
|
styleUrls: ['./extra-working-hours.component.scss']
|
||||||
})
|
})
|
||||||
export class ExtraWorkingHoursComponent implements OnInit {
|
export class ExtraWorkingHoursComponent implements OnInit {
|
||||||
|
public show:boolean = false;
|
||||||
|
public buttonName:any = 'Show';
|
||||||
|
toDisplay = true;
|
||||||
|
radioDisplay = true;
|
||||||
|
isDisabled= false;
|
||||||
|
indeterminate = false;
|
||||||
|
labelPosition: 'before' | 'after' = 'after';
|
||||||
|
btnstate: boolean=false;
|
||||||
form: FormGroup;
|
form: FormGroup;
|
||||||
checked = false;
|
checked = false;
|
||||||
disabled = false;
|
disabled = false;
|
||||||
@ -24,6 +32,30 @@ export class ExtraWorkingHoursComponent implements OnInit {
|
|||||||
name: new FormControl('', [Validators.required]),
|
name: new FormControl('', [Validators.required]),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
this.show = !this.show;
|
||||||
|
|
||||||
|
// Change the name of the button.
|
||||||
|
if(this.show)
|
||||||
|
this.buttonName = "Hide";
|
||||||
|
else
|
||||||
|
this.buttonName = "Show";
|
||||||
|
}
|
||||||
|
toggleData() {
|
||||||
|
this.toDisplay = !this.toDisplay;
|
||||||
|
}
|
||||||
|
radioData() {
|
||||||
|
this.radioDisplay = !this.radioDisplay;
|
||||||
|
}
|
||||||
|
disableFunc(){
|
||||||
|
this.btnstate = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit(form) {
|
||||||
|
console.log(form);
|
||||||
|
}
|
||||||
|
|
||||||
submit(){
|
submit(){
|
||||||
console.log(this.form.value);
|
console.log(this.form.value);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,82 @@
|
|||||||
|
<div class="extra-working">
|
||||||
|
<div class="popup-header">
|
||||||
|
<h5>
|
||||||
|
Add Unavailability - Staff
|
||||||
|
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||||
|
>
|
||||||
|
<mat-icon>close</mat-icon>
|
||||||
|
</button>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
<div class="availabilitys">
|
||||||
|
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
|
||||||
|
<div class="mt-2">
|
||||||
|
<div class="field mb-1">
|
||||||
|
<label class="label-container">Staff</label>
|
||||||
|
<input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel">
|
||||||
|
</div>
|
||||||
|
<div class="field mb-1">
|
||||||
|
<section class="example-section">
|
||||||
|
<label class="example-margin ">Type</label>
|
||||||
|
<mat-radio-group [(ngModel)]="labelPosition" class="mat-radio" (click)="radioData()">
|
||||||
|
<mat-radio-button class="example-margin" value="after">Time Off</mat-radio-button>
|
||||||
|
<mat-radio-button class="example-margin" value="before">Block Time</mat-radio-button>
|
||||||
|
</mat-radio-group>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="field mb-1">
|
||||||
|
<label for="name-field" class="mr2">All-day Availability</label>
|
||||||
|
<label class="switch" >
|
||||||
|
<input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
|
||||||
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||||
|
<span class="switch-handle"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field mb-1">
|
||||||
|
<label for="name-field" class="label-container">From</label>
|
||||||
|
<mat-form-field appearance="outline"class="mate" >
|
||||||
|
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
|
||||||
|
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show">
|
||||||
|
<input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field mb-1" *ngIf="radioDisplay">
|
||||||
|
<label for="name-field" class="container-to">To</label>
|
||||||
|
<mat-form-field appearance="outline"class="mate" >
|
||||||
|
<input matInput [matDatepicker]="picker" name="to" ngModel #datesRef="ngModel">
|
||||||
|
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show">
|
||||||
|
<input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="field mb-1">
|
||||||
|
<label for="name-field" class="mr-8">Reason</label>
|
||||||
|
<textarea class="form-control" id="w3review" name="w3review" rows="4" cols="50" name="reason" ngModel #reasonRef="ngModel">
|
||||||
|
</textarea>
|
||||||
|
<!-- <input type="reason" class="form-control mat-pane" placeholder="reason" name="reason" ngModel #reasonRef="ngModel"> -->
|
||||||
|
</div>
|
||||||
|
<!-- <div class="form-group field">
|
||||||
|
<label class="label-container">Email</label>
|
||||||
|
<input type="email" class="form-control mat-pane" placeholder="Name" name="email" ngModel #emailRef="ngModel">
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="popup-button">
|
||||||
|
<span class="buttons cancel">Cancel</span>
|
||||||
|
<!-- <span class="buttons add">Save</span> -->
|
||||||
|
<button type="submit" class="btn btn-secondary buttons add" [disabled]="formRef.invalid">Save</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
@ -0,0 +1,261 @@
|
|||||||
|
.extra-working{
|
||||||
|
.popup-header {
|
||||||
|
background: #FFF;
|
||||||
|
// padding: 5px 5px 5px 5px;
|
||||||
|
margin-top: -1.5rem;
|
||||||
|
border-bottom: 1px solid #F5F6F8;
|
||||||
|
}
|
||||||
|
.button{
|
||||||
|
// float: right;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
background-color: #ffff;
|
||||||
|
margin-top: -1rem;
|
||||||
|
margin-left: 14rem;
|
||||||
|
}
|
||||||
|
// h5{
|
||||||
|
// margin-bottom: 1.5rem;
|
||||||
|
// }
|
||||||
|
.availability{
|
||||||
|
margin-bottom: 11.5rem;
|
||||||
|
}
|
||||||
|
.label-container{
|
||||||
|
margin-right: 8rem;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
// .outline{
|
||||||
|
// width: 18%;
|
||||||
|
// }
|
||||||
|
.mate{
|
||||||
|
width: 16% !important;
|
||||||
|
}
|
||||||
|
.date-marge{
|
||||||
|
margin-left: 4.5rem;
|
||||||
|
}
|
||||||
|
.label{
|
||||||
|
margin-right: 9rem;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
.mr-8{
|
||||||
|
margin-right: 7rem;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
.mr2{
|
||||||
|
margin-right: 3rem;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
.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: 20px;
|
||||||
|
-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;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #4caf50;
|
||||||
|
font-weight: 300;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle-button {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.example-h2 {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-section {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-margin {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
::ng-deep .mat-form-field-outline {
|
||||||
|
width: 145%;
|
||||||
|
}
|
||||||
|
::ng-deep .mat-icon-button {
|
||||||
|
margin-right: -3rem;
|
||||||
|
margin-top: -12px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
// ::ng-deep .mat-slide-toggle-bar {
|
||||||
|
// border-radius: 20px!important ;
|
||||||
|
// width: 80px!important;
|
||||||
|
// height: 35px!important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.form-control{
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
.container-to{
|
||||||
|
margin-right: 9rem;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||||
|
padding: 0em 0 1em 0;
|
||||||
|
}
|
||||||
|
.field{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.popup-button{
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
.example-h2 {
|
||||||
|
margin: 10px;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-section {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-margin {
|
||||||
|
margin: 0 10px!important;
|
||||||
|
margin-left: 25px!important;
|
||||||
|
}
|
||||||
|
.mat-radio{
|
||||||
|
margin-left: 6rem;
|
||||||
|
}
|
||||||
|
.time-align{
|
||||||
|
padding-top: 10px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
//switch
|
||||||
|
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
// vertical-align: top;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
padding: 3px;
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
||||||
|
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
||||||
|
border-radius: 18px;
|
||||||
|
// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing:content-box;
|
||||||
|
}
|
||||||
|
.switch-input {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
box-sizing:content-box;
|
||||||
|
}
|
||||||
|
.switch-label {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: inherit;
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
// background: #eceeef;
|
||||||
|
border-radius: inherit;
|
||||||
|
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
|
||||||
|
border: 1px solid #4CAE4C;
|
||||||
|
box-sizing:content-box;
|
||||||
|
}
|
||||||
|
.switch-label:before, .switch-label:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -.5em;
|
||||||
|
line-height: 1;
|
||||||
|
-webkit-transition: inherit;
|
||||||
|
-moz-transition: inherit;
|
||||||
|
-o-transition: inherit;
|
||||||
|
transition: inherit;
|
||||||
|
box-sizing:content-box;
|
||||||
|
}
|
||||||
|
.switch-label:before {
|
||||||
|
// content: attr(data-off);
|
||||||
|
content: 'enable';
|
||||||
|
right: 11px;
|
||||||
|
color: #111111;
|
||||||
|
// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.switch-label:after {
|
||||||
|
// content: attr(data-on);
|
||||||
|
content: 'disable ';
|
||||||
|
left: 11px;
|
||||||
|
color: #111111;
|
||||||
|
// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.switch-input:checked ~ .switch-label {
|
||||||
|
background: #FFFFFF;
|
||||||
|
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.switch-input:checked ~ .switch-label:before {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.switch-input:checked ~ .switch-label:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.switch-handle {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
left: 4px;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.switch-handle:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -6px 0 0 -6px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
||||||
|
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
.switch-input:checked ~ .switch-handle {
|
||||||
|
left: 74px;
|
||||||
|
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transition
|
||||||
|
========================== */
|
||||||
|
.switch-label, .switch-handle {
|
||||||
|
transition: All 0.3s ease;
|
||||||
|
-webkit-transition: All 0.3s ease;
|
||||||
|
-moz-transition: All 0.3s ease;
|
||||||
|
-o-transition: All 0.3s ease;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UnavailabilityComponent } from './unavailability.component';
|
||||||
|
|
||||||
|
describe('UnavailabilityComponent', () => {
|
||||||
|
let component: UnavailabilityComponent;
|
||||||
|
let fixture: ComponentFixture<UnavailabilityComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ UnavailabilityComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(UnavailabilityComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { MatDialogRef } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-unavailability',
|
||||||
|
templateUrl: './unavailability.component.html',
|
||||||
|
styleUrls: ['./unavailability.component.scss']
|
||||||
|
})
|
||||||
|
export class UnavailabilityComponent implements OnInit {
|
||||||
|
public show:boolean = false;
|
||||||
|
public buttonName:any = 'Show';
|
||||||
|
toDisplay = true;
|
||||||
|
radioDisplay = true;
|
||||||
|
isDisabled= false;
|
||||||
|
indeterminate = false;
|
||||||
|
labelPosition: 'before' | 'after' = 'after';
|
||||||
|
btnstate: boolean=false;
|
||||||
|
form: FormGroup;
|
||||||
|
checked = false;
|
||||||
|
disabled = false;
|
||||||
|
constructor(public dialogRef: MatDialogRef<UnavailabilityComponent>) { }
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.form = new FormGroup({
|
||||||
|
name: new FormControl('', [Validators.required]),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
this.show = !this.show;
|
||||||
|
|
||||||
|
// Change the name of the button.
|
||||||
|
if(this.show)
|
||||||
|
this.buttonName = "Hide";
|
||||||
|
else
|
||||||
|
this.buttonName = "Show";
|
||||||
|
}
|
||||||
|
toggleData() {
|
||||||
|
this.toDisplay = !this.toDisplay;
|
||||||
|
}
|
||||||
|
radioData() {
|
||||||
|
this.radioDisplay = !this.radioDisplay;
|
||||||
|
}
|
||||||
|
disableFunc(){
|
||||||
|
this.btnstate = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit(form) {
|
||||||
|
console.log(form);
|
||||||
|
}
|
||||||
|
|
||||||
|
submit(){
|
||||||
|
console.log(this.form.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -56,7 +56,7 @@
|
|||||||
<a>{{bookedAppointment.practitionerInfos[0].designtion
|
<a>{{bookedAppointment.practitionerInfos[0].designtion
|
||||||
|
|
||||||
}}</a><br />
|
}}</a><br />
|
||||||
<button mat-raised-button (click)="goToSlotBooking()" style=" background-color: #e7c953;">Appointment Booking</button>
|
<button mat-raised-button (click)="goToSlotBooking()" style=" background-color: #e7c953;">Book Appointment</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="doctor_info">
|
<div class="doctor_info">
|
||||||
|
|||||||
24
ng-seed/src/assets/images/Time-Icon.svg
Normal file
24
ng-seed/src/assets/images/Time-Icon.svg
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 25.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 517 495.6" style="enable-background:new 0 0 517 495.6;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#217e69;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M253.9,85.1h-12.2c-3.2,0-5.7-2.6-5.7-5.7V55.4c0-3.2,2.6-5.7,5.7-5.7h12.2c3.2,0,5.7,2.6,5.7,5.7v24.1
|
||||||
|
C259.6,82.6,257.1,85.1,253.9,85.1z"/>
|
||||||
|
<path class="st0" d="M85.1,241.7v12.2c0,3.2-2.6,5.7-5.7,5.7H55.4c-3.2,0-5.7-2.6-5.7-5.7v-12.2c0-3.2,2.6-5.7,5.7-5.7h24.1
|
||||||
|
C82.6,236,85.1,238.5,85.1,241.7z"/>
|
||||||
|
<path class="st0" d="M241.7,410.5h12.2c3.2,0,5.7,2.6,5.7,5.7v24.1c0,3.2-2.6,5.7-5.7,5.7h-12.2c-3.2,0-5.7-2.6-5.7-5.7v-24.1
|
||||||
|
C236,413,238.5,410.5,241.7,410.5z"/>
|
||||||
|
<path class="st0" d="M410.5,253.9v-12.2c0-3.2,2.6-5.7,5.7-5.7h24.1c3.2,0,5.7,2.6,5.7,5.7v12.2c0,3.2-2.6,5.7-5.7,5.7h-24.1
|
||||||
|
C413,259.6,410.5,257.1,410.5,253.9z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<path class="st0" d="M436,153.5c14.3,28.4,22.3,60.4,22.3,94.3c0,116.1-94.4,210.5-210.5,210.5S37.3,363.9,37.3,247.8
|
||||||
|
S131.7,37.3,247.8,37.3c52.3,0,100.3,19.2,137.1,50.9l29.9-23.3C370.8,24.6,312.1,0,247.8,0C111.2,0,0,111.2,0,247.8
|
||||||
|
s111.2,247.8,247.8,247.8s247.8-111.2,247.8-247.8c0-42.5-10.8-82.6-29.7-117.6L436,153.5z"/>
|
||||||
|
<polygon class="st0" points="517,68 487.7,30.5 252.4,213.8 182.8,125.2 145.4,154.7 244.3,280.6 "/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -7,8 +7,8 @@ export const environment = {
|
|||||||
production: false,
|
production: false,
|
||||||
environmentName: 'Testing Environment',//Localhost Environment.
|
environmentName: 'Testing Environment',//Localhost Environment.
|
||||||
// apiEndpoint:'http://venbainfotech.com:5000/api/',
|
// apiEndpoint:'http://venbainfotech.com:5000/api/',
|
||||||
apiEndpoint:'http://192.168.1.20:8080/api/',
|
// apiEndpoint:'http://192.168.1.20:8080/api/',
|
||||||
// apiEndpoint:'https://api.venbait.in/api/',
|
apiEndpoint:'https://api.venbait.in/api/',
|
||||||
|
|
||||||
firebase: {
|
firebase: {
|
||||||
apiKey: "AIzaSyCKbfDJ5Qf0rDP3WKppa94u9xuVaVabaDw",
|
apiKey: "AIzaSyCKbfDJ5Qf0rDP3WKppa94u9xuVaVabaDw",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user