Merge branch 'master' of bitbucket.org:venbainformationtechnology/appointments_frontend
This commit is contained in:
bitbucket
commit
eea59cf123
@ -7,12 +7,14 @@
|
||||
<div mat-dialog-content class="my-table">
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<mat-label>Name</mat-label>
|
||||
<input placeholder=" Name" matInput formControlName="busName">
|
||||
<mat-error *ngIf="myError('busName', 'required')">Name is required</mat-error>
|
||||
<mat-error *ngIf="myError('busName', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<mat-label>Email</mat-label>
|
||||
<input type="email" placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
|
||||
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
@ -23,6 +25,7 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<mat-label>Phone No</mat-label>
|
||||
<input placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo">
|
||||
<mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No </mat-error>
|
||||
@ -30,16 +33,19 @@
|
||||
<mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<mat-label>Address</mat-label>
|
||||
<input placeholder=" Address" matInput [(ngModel)]="local_data.address" formControlName="address">
|
||||
<mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
|
||||
<mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<mat-label>State</mat-label>
|
||||
<input placeholder=" State" matInput [(ngModel)]="local_data.state" formControlName="state">
|
||||
<mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
|
||||
<mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<mat-label>City</mat-label>
|
||||
<input placeholder=" City" matInput [(ngModel)]="local_data.city" formControlName="city">
|
||||
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
|
||||
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
<div class="availabilitys">
|
||||
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
|
||||
<div class="mt-2">
|
||||
<div class="field mb-1">
|
||||
<div class="field mb-2">
|
||||
<label class="label-container">Staff</label>
|
||||
<input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel">
|
||||
</div>
|
||||
@ -94,24 +94,33 @@
|
||||
</mat-radio-group>
|
||||
</section>
|
||||
</div> -->
|
||||
<div class="field mb-1">
|
||||
|
||||
|
||||
<div class="field mb-2">
|
||||
<label for="name-field" class="mr2">All-day Availability</label>
|
||||
<!-- <mat-slide-toggle class="toggle" (click)="toggleData()"></mat-slide-toggle> -->
|
||||
<label class="switch" >
|
||||
<!-- <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>
|
||||
</label> -->
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
|
||||
<label class="onoffswitch-label" for="myonoffswitch" (click)="toggle()" id="bt" >
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field mb-1">
|
||||
<div class="field">
|
||||
<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">
|
||||
<mat-form-field appearance="outline" class="mates 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>
|
||||
@ -123,7 +132,7 @@
|
||||
<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">
|
||||
<mat-form-field appearance="outline" class="mates 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>
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
.label-container{
|
||||
margin-right: 8rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
// .outline{
|
||||
// width: 18%;
|
||||
@ -28,6 +29,12 @@
|
||||
.mate{
|
||||
width: 16% !important;
|
||||
}
|
||||
.mates{
|
||||
width: 16% !important;
|
||||
::ng-deep .mat-form-field-outline {
|
||||
width: 115%!important;
|
||||
}
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
@ -38,10 +45,12 @@
|
||||
.mr-8{
|
||||
margin-right: 7rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
.mr2{
|
||||
margin-right: 3rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
.cancel {
|
||||
background: #F5F5F5;
|
||||
@ -100,8 +109,8 @@
|
||||
}
|
||||
::ng-deep .mat-icon-button {
|
||||
margin-right: -3rem;
|
||||
margin-top: -12px;
|
||||
padding-top: 10px;
|
||||
// margin-top: -12px;
|
||||
// padding-top: 10px;
|
||||
}
|
||||
::ng-deep .mat-slide-toggle-bar {
|
||||
width: 50px;
|
||||
@ -116,6 +125,7 @@
|
||||
.container-to{
|
||||
margin-right: 9rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
padding: 0em 0 1em 0;
|
||||
@ -146,115 +156,199 @@
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.time-align{
|
||||
padding-top: 10px!important;
|
||||
padding-top: 10px !important;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
//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);
|
||||
}
|
||||
// .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;
|
||||
// /* 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;
|
||||
// }
|
||||
|
||||
.onoffswitch {
|
||||
position: relative;
|
||||
width: 135px;
|
||||
// -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
|
||||
}
|
||||
.onoffswitch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.onoffswitch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
// border: 2px solid #4CAE4C;
|
||||
border-radius: 20px;
|
||||
// box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
.onoffswitch-inner {
|
||||
display: block;
|
||||
width: 200%;
|
||||
margin-left: -100%;
|
||||
// transition: margin 0.3s ease-in 0s;
|
||||
|
||||
}
|
||||
.onoffswitch-inner:before, .onoffswitch-inner:after {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
content: " Enable";
|
||||
padding-left: 10px;
|
||||
background-color: #FFFFFF; color: #4C4C4C;
|
||||
border: 1px solid #4CAE4C;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
// box-shadow: 0 0 10px rgb(82 81 144 / 38%);
|
||||
}
|
||||
.onoffswitch-inner:after {
|
||||
content: "Disable";
|
||||
padding-right: 10px;
|
||||
background-color: #FFFFFF; color: #4C4C4C;;
|
||||
text-align: right;
|
||||
border: 1px solid #999999;
|
||||
// border: 1px solid #DDD;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
// box-shadow: 0 0 10px rgb(82 81 144 / 38%);
|
||||
}
|
||||
|
||||
.onoffswitch-switch {
|
||||
display: block;
|
||||
width: 25px;
|
||||
margin: 2px;
|
||||
background: #999999;
|
||||
position: absolute; top: 0; bottom: 0;
|
||||
right: 105px;
|
||||
// border: 1px solid #999999;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
// .onoffswitch-switch:after {
|
||||
// display: block;
|
||||
// background: #999999!important;
|
||||
// }
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
// border: 1px solid #999999;
|
||||
}
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||
right: 0px;
|
||||
background: #4CAE4C;
|
||||
// border: 1px solid #999999;
|
||||
|
||||
}
|
||||
@ -26,21 +26,28 @@
|
||||
</div>
|
||||
<div class="field mb-1">
|
||||
<label for="name-field" class="mr2">All-day Availability</label>
|
||||
<label class="switch" >
|
||||
<!-- <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>
|
||||
</label> -->
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
|
||||
<label class="onoffswitch-label" for="myonoffswitch" (click)="toggle()" id="bt" >
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field mb-1">
|
||||
<div class="field">
|
||||
<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">
|
||||
<mat-form-field appearance="outline" class="mates 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>
|
||||
@ -52,7 +59,7 @@
|
||||
<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">
|
||||
<mat-form-field appearance="outline" class="mates 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>
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
.label-container{
|
||||
margin-right: 8rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
// .outline{
|
||||
// width: 18%;
|
||||
@ -28,6 +29,12 @@
|
||||
.mate{
|
||||
width: 16% !important;
|
||||
}
|
||||
.mates{
|
||||
width: 16% !important;
|
||||
::ng-deep .mat-form-field-outline {
|
||||
width: 115%!important;
|
||||
}
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
@ -38,10 +45,12 @@
|
||||
.mr-8{
|
||||
margin-right: 7rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
.mr2{
|
||||
margin-right: 3rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
.cancel {
|
||||
background: #F5F5F5;
|
||||
@ -100,23 +109,23 @@
|
||||
}
|
||||
::ng-deep .mat-icon-button {
|
||||
margin-right: -3rem;
|
||||
margin-top: -12px;
|
||||
padding-top: 10px;
|
||||
// margin-top: -12px;
|
||||
// padding-top: 10px;
|
||||
}
|
||||
::ng-deep .mat-slide-toggle-bar {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
}
|
||||
// ::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 #666;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.container-to{
|
||||
margin-right: 9rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
padding: 0em 0 1em 0;
|
||||
@ -125,7 +134,7 @@
|
||||
display: flex;
|
||||
}
|
||||
.popup-button{
|
||||
margin-top: 3rem;
|
||||
margin-top: 7rem;
|
||||
}
|
||||
.example-h2 {
|
||||
margin: 10px;
|
||||
@ -142,120 +151,199 @@
|
||||
.example-margin {
|
||||
margin: 0 10px!important;
|
||||
margin-left: 25px!important;
|
||||
color: #666;
|
||||
}
|
||||
.mat-radio{
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.time-align{
|
||||
padding-top: 10px!important;
|
||||
padding-top: 10px !important;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
//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);
|
||||
}
|
||||
// .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;
|
||||
// /* 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;
|
||||
// }
|
||||
|
||||
.onoffswitch {
|
||||
position: relative;
|
||||
width: 135px;
|
||||
// -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
|
||||
}
|
||||
.onoffswitch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.onoffswitch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
// border: 2px solid #4CAE4C;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.onoffswitch-inner {
|
||||
display: block;
|
||||
width: 200%;
|
||||
margin-left: -100%;
|
||||
// transition: margin 0.3s ease-in 0s;
|
||||
|
||||
}
|
||||
.onoffswitch-inner:before, .onoffswitch-inner:after {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
content: " Enable";
|
||||
padding-left: 10px;
|
||||
background-color: #FFFFFF; color: #4C4C4C;
|
||||
border: 1px solid #4CAE4C;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.onoffswitch-inner:after {
|
||||
content: "Disable";
|
||||
padding-right: 10px;
|
||||
background-color: #FFFFFF; color: #4C4C4C;;
|
||||
text-align: right;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.onoffswitch-switch {
|
||||
display: block;
|
||||
width: 25px;
|
||||
margin: 2px;
|
||||
background: #999999;
|
||||
position: absolute; top: 0; bottom: 0;
|
||||
right: 105px;
|
||||
// border: 1px solid #999999;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
// .onoffswitch-switch:after {
|
||||
// display: block;
|
||||
// background: #999999!important;
|
||||
// }
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
// border: 1px solid #999999;
|
||||
}
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||
right: 0px;
|
||||
background: #4CAE4C;
|
||||
// border: 1px solid #999999;
|
||||
|
||||
}
|
||||
@ -58,12 +58,24 @@
|
||||
<mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
|
||||
<mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<!-- <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<mat-label>Password</mat-label>
|
||||
<input placeholder="Password" matInput formControlName="password">
|
||||
<mat-error *ngIf="myError('password', 'required')">Password is required</mat-error>
|
||||
<mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
</mat-form-field> -->
|
||||
|
||||
<mat-form-field appearance="outline" class="mat-pane user-mate">
|
||||
<mat-label>Password</mat-label>
|
||||
<input matInput type="password" placeholder="Password" formControlName="password" [type]="hide ? 'password' : 'text'" name="password">
|
||||
<mat-error *ngIf="!form.get('password')?.errors?.required">
|
||||
Password length must be greater than or equal to 8 and password must contain one or more uppercase ,
|
||||
lowercase , numeric and special characters
|
||||
</mat-error>
|
||||
<mat-error *ngIf="form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched) && form.get('password')?.errors?.required">
|
||||
Password is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
|
||||
<img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
|
||||
|
||||
@ -59,4 +59,12 @@ input[type=file]::file-selector-button {
|
||||
.imgSizeValidation{
|
||||
color: red;
|
||||
font-family: ui-serif;
|
||||
}
|
||||
.user-mate{
|
||||
::ng-deep .mat-form-field-subscript-wrapper {
|
||||
position: inherit!important;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@ -58,7 +58,10 @@ export class AddUserComponent implements OnInit {
|
||||
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
password: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
// password: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
password: new FormControl('', [Validators.required,Validators.pattern(
|
||||
'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
|
||||
)]),
|
||||
logo: new FormControl('', null),
|
||||
// confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
createdBy:new FormControl(userrole,null),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user