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 { ConsultantSettingComponent } from './consultant-setting/consultant-setting.component';
|
||||
import { NotifierModule, NotifierOptions } from 'angular-notifier';
|
||||
import { UnavailabilityComponent } from './unavailability/unavailability.component';
|
||||
|
||||
|
||||
const customNotifierOptions: NotifierOptions = {
|
||||
@ -60,7 +61,8 @@ const customNotifierOptions: NotifierOptions = {
|
||||
ConsultantSettingComponent,
|
||||
EditWorkingHoursComponent,
|
||||
ExtraWorkingHoursComponent,
|
||||
AssignServiceComponent
|
||||
AssignServiceComponent,
|
||||
UnavailabilityComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
@ -158,19 +158,23 @@
|
||||
<!-- <input id="color-toggle" type="checkbox" >
|
||||
<label for="color-toggle" class="toggle">Customize working hours.</label> -->
|
||||
<div class="booking-url">
|
||||
<!-- <span class="underline-title full-width hours">Working Hours</span> -->
|
||||
<span class="underline-title">Working Hours</span>
|
||||
<span class="underline-title full-width hours">Working Hours</span>
|
||||
<!-- <span class="underline-title">Working Hours</span> -->
|
||||
</div>
|
||||
<!-- <div class="alert">
|
||||
<span class="closebtn">× sample follows customized working hours in (GMT +05:30) India Standard Time (Asia/Kolkata).</span>
|
||||
</div> -->
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Sunday</span>
|
||||
</span>
|
||||
<div class="timing-container mt-1">
|
||||
<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">Sunday</span>
|
||||
</span>
|
||||
</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" >
|
||||
<span> {{item.startTime}}
|
||||
</span>
|
||||
@ -180,109 +184,149 @@
|
||||
<span> {{item.endTime}}</span>
|
||||
</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 class="dis-flex mt-1" *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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Tuesday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[2]['tuesday']['hours']; ">
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.startTime}}
|
||||
</span>
|
||||
<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">
|
||||
<!-- <i class="material-icons"></i> -->
|
||||
<img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">
|
||||
<span class="clock">Monday</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>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.endTime}}</span>
|
||||
</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 class="dis-flex mt-1" *ngFor="let item of workinghours[3]['wednesday']['hours']; ">
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.startTime}}
|
||||
</span>
|
||||
<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">Tuesday</span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.endTime}}</span>
|
||||
</div>
|
||||
</div><br />
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Thursday</span>
|
||||
</span>
|
||||
<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[2]['tuesday']['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="dis-flex mt-1" *ngFor="let item of workinghours[4]['thursday']['hours']; ">
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.startTime}}
|
||||
</span>
|
||||
<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">Wednesday</span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.endTime}}</span>
|
||||
</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[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 class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Friday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[5]['friday']['hours']; ">
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.startTime}}
|
||||
</span>
|
||||
</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">Friday</span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.endTime}}</span>
|
||||
</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[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 class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Saturday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1" *ngFor="let item of workinghours[6]['saturday']['hours']; ">
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.startTime}}
|
||||
</span>
|
||||
<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>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> {{item.endTime}}</span>
|
||||
</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">
|
||||
@ -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>
|
||||
<div class="booking-url">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -1,217 +1,240 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-tab-labels {
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
mat-tab-group {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-tab-body-wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
margin-left: 2rem;
|
||||
// margin-top: -9rem;
|
||||
}
|
||||
// :host ::ng-deep .mat-tab-body.mat-tab-body-active {
|
||||
// position: absolute !important;
|
||||
// }
|
||||
|
||||
mat-tab-body {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:host ::ng-deep.mat-tab-label {
|
||||
background-color: transparent;
|
||||
/* background-color: lightgray; */
|
||||
}
|
||||
:host ::ng-deep .mat-tab-labels {
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
mat-tab-group {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-tab-body-wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
margin-left: 2rem;
|
||||
// margin-top: -9rem;
|
||||
}
|
||||
// :host ::ng-deep .mat-tab-body.mat-tab-body-active {
|
||||
// position: absolute !important;
|
||||
// }
|
||||
|
||||
mat-tab-body {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:host ::ng-deep mat-ink-bar {
|
||||
display: none;
|
||||
}
|
||||
//mat-tab1start
|
||||
.icons-info{
|
||||
margin-left: -4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.staff{
|
||||
display: flex;
|
||||
background-color: #FAFAFA;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
height: 63px;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
background-color: #FAFAFA;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
height: 63px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.staff-title{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 19px;
|
||||
color: #4C4C4C;
|
||||
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;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 19px;
|
||||
color: #4C4C4C;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.label-container{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #F5F6F8;
|
||||
box-sizing: border-box;
|
||||
min-height: 40px;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #F5F6F8;
|
||||
box-sizing: border-box;
|
||||
min-height: 40px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
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;
|
||||
.line{
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 190px);
|
||||
.para{
|
||||
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{
|
||||
width: 100%;
|
||||
// height: calc(100% - 63px);
|
||||
overflow: auto;
|
||||
padding: 20px 35px;
|
||||
}
|
||||
.booking-para{
|
||||
font-size: 14px;
|
||||
color: #666!important;
|
||||
line-height: 21px;
|
||||
.hours{
|
||||
margin-left: -2rem;
|
||||
}
|
||||
.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{
|
||||
// color: #666!important;
|
||||
color: #111;
|
||||
font-size: 16px;
|
||||
margin-top: 1px;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
padding: 0 0 15px;
|
||||
box-sizing: border-box;
|
||||
// .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;
|
||||
// }
|
||||
|
||||
//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;
|
||||
}
|
||||
.full-width{
|
||||
width: 90%!important;
|
||||
position: absolute;
|
||||
}
|
||||
.underline-title:after {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
.noAssignedService{
|
||||
font-size: large;
|
||||
color: #847a7a;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.mat-card{
|
||||
background-color: #FFF;
|
||||
@ -252,123 +275,142 @@ label{
|
||||
padding-top: 3rem;
|
||||
}
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
color: #ffff;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
//mat-tab4start
|
||||
|
||||
.icons{
|
||||
margin-left: -1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.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{
|
||||
// display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #F5F6F8;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
.booking-url{
|
||||
width: 100%;
|
||||
// height: calc(100% - 63px);
|
||||
overflow: auto;
|
||||
padding: 20px 35px;
|
||||
}
|
||||
.clock{
|
||||
margin-top: 6px;
|
||||
margin-left: 10px;
|
||||
.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 {
|
||||
height: calc(100vh - 190px);
|
||||
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;
|
||||
::ng-deep .mat-form-field-infix {
|
||||
height: 50px!important;
|
||||
}
|
||||
.mat-tab-body-content {
|
||||
height: 100%;
|
||||
overflow: hidden!important;
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
|
||||
margin-top: 10px!important;
|
||||
}
|
||||
.para{
|
||||
font-size: 15px;
|
||||
color: #5B6572!important;
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
color: #ffff;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.margin{
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.checkbox{
|
||||
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;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
::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{
|
||||
// background-color: #fff;
|
||||
@ -390,29 +432,8 @@ margin-bottom: 10rem;
|
||||
// color: #4C4C4C;
|
||||
// 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 { EditWorkingHoursComponent } from '../edit-working-hours/edit-working-hours.component';
|
||||
import { ExtraWorkingHoursComponent } from '../extra-working-hours/extra-working-hours.component';
|
||||
import { UnavailabilityComponent } from '../unavailability/unavailability.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-consultant-setting',
|
||||
@ -116,6 +117,22 @@ workingDialog(action,obj) {
|
||||
// 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() {
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
|
||||
@ -1,66 +1,151 @@
|
||||
<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="availability">
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<div class="mt-2">
|
||||
<div class="field ">
|
||||
<label for="name-field" class="label-container">Name</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<input placeholder="Name" matInput formControlName="name">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="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 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="availability">
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
|
||||
<div class="mt-2">
|
||||
<div class="field ">
|
||||
<label for="name-field" class="label-container">Name</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<input placeholder="Name" matInput formControlName="Name">
|
||||
</mat-form-field>
|
||||
</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;
|
||||
// }
|
||||
.availability{
|
||||
margin-bottom: 7.5rem;
|
||||
margin-bottom: 11.5rem;
|
||||
}
|
||||
.label-container{
|
||||
margin-right: 8rem;
|
||||
@ -68,6 +68,7 @@
|
||||
border-top: 1px solid #4caf50;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
h1 {
|
||||
color: #4caf50;
|
||||
@ -98,9 +99,162 @@
|
||||
width: 145%;
|
||||
}
|
||||
::ng-deep .mat-icon-button {
|
||||
margin-right: -3rem;
|
||||
margin-right: -3rem;
|
||||
margin-top: -12px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
::ng-deep .mat-slide-toggle-bar {
|
||||
width: 50px;
|
||||
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']
|
||||
})
|
||||
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;
|
||||
checked = false;
|
||||
disabled = false;
|
||||
@ -24,6 +32,30 @@ export class ExtraWorkingHoursComponent implements OnInit {
|
||||
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);
|
||||
}
|
||||
|
||||
@ -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><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 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,
|
||||
environmentName: 'Testing Environment',//Localhost Environment.
|
||||
// apiEndpoint:'http://venbainfotech.com:5000/api/',
|
||||
apiEndpoint:'http://192.168.1.20:8080/api/',
|
||||
// apiEndpoint:'https://api.venbait.in/api/',
|
||||
// apiEndpoint:'http://192.168.1.20:8080/api/',
|
||||
apiEndpoint:'https://api.venbait.in/api/',
|
||||
|
||||
firebase: {
|
||||
apiKey: "AIzaSyCKbfDJ5Qf0rDP3WKppa94u9xuVaVabaDw",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user