From 95d12ccc457810b3bfaa4e6482800ef92de01174 Mon Sep 17 00:00:00 2001 From: Smart Date: Wed, 12 Apr 2023 14:43:20 +0530 Subject: [PATCH] slot-time --- .../consultant-setting.module.ts | 4 +- .../consultant-setting.component.html | 228 +++--- .../consultant-setting.component.scss | 669 +++++++++--------- .../consultant-setting.component.ts | 17 + .../extra-working-hours.component.html | 215 ++++-- .../extra-working-hours.component.scss | 158 ++++- .../extra-working-hours.component.ts | 32 + .../unavailability.component.html | 82 +++ .../unavailability.component.scss | 261 +++++++ .../unavailability.component.spec.ts | 25 + .../unavailability.component.ts | 61 ++ .../doctor-profile.component.html | 2 +- ng-seed/src/assets/images/Time-Icon.svg | 24 + ng-seed/src/environments/environment.ts | 4 +- 14 files changed, 1295 insertions(+), 487 deletions(-) create mode 100644 ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html create mode 100644 ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss create mode 100644 ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.spec.ts create mode 100644 ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.ts create mode 100644 ng-seed/src/assets/images/Time-Icon.svg diff --git a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts index 0fe0a78..21fc2f0 100644 --- a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts +++ b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts @@ -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, diff --git a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html index f151dc6..beb8156 100644 --- a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html +++ b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html @@ -158,19 +158,23 @@
- - Working Hours + Working Hours +
-
-
- - Sunday - +
+
+
+
+ + AvatarSunday + +
-
+
+
{{item.startTime}} @@ -180,109 +184,149 @@ {{item.endTime}}
-
-
-
- - Monday -
-
-
- {{item.startTime}} - -
- - -
- {{item.endTime}} -
-
-
+
+
-
- - Tuesday - -
-
-
- {{item.startTime}} - +
+
+
+ + + Avatar + Monday + +
+
+
+
+
+ {{item.startTime}} + +
+ - +
+ {{item.endTime}} +
- - -
- {{item.endTime}}
-
-
-
- - Wednesday -
-
-
- {{item.startTime}} - +
+
+
+
+ + Avatar Tuesday +
- - -
- {{item.endTime}}
-

-
-
-
- - Thursday - +
+
+
+ {{item.startTime}} + +
+ - +
+ {{item.endTime}} +
+
+
+
-
-
- {{item.startTime}} - +
+
+
+
+ + AvatarWednesday +
- - -
- {{item.endTime}} +
+
+
+
+ {{item.startTime}} + +
+ - +
+ {{item.endTime}} +
+

+
+
+
+
+
+
+
+ + Avatar Thursday + +
+
+
+
+
+ {{item.startTime}} + +
+ - +
+ {{item.endTime}} +
-
-
-
- - Friday -
-
-
- {{item.startTime}} - +
+
+
+
+
+ + AvatarFriday +
- - -
- {{item.endTime}}
+
+
+
+ {{item.startTime}} + +
+ - +
+ {{item.endTime}} +
+
+
-
-
-
- - Saturday -
-
-
- {{item.startTime}} - +
+
+
+
+ + Avatar Saturday +
- - -
- {{item.endTime}}
+
+
+
+ {{item.startTime}} + +
+ - +
+ {{item.endTime}} +
+
+
+
-
+ + +
+
+
+ Add Additional Availability - Staff + +
+
+
+
+
+
+ + +
+ +
+ + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + + + +
+ + +
+ + +
+
+
+ Cancel + + +
+ +
+
+ +
+ + + + diff --git a/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss b/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss index 0d734d1..405800a 100644 --- a/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss +++ b/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss @@ -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; } \ No newline at end of file diff --git a/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.ts b/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.ts index ba3dd28..0a45287 100644 --- a/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.ts +++ b/ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.ts @@ -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); } diff --git a/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html new file mode 100644 index 0000000..55e4afb --- /dev/null +++ b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html @@ -0,0 +1,82 @@ +
+
+
+ Add Unavailability - Staff + +
+
+
+
+
+
+ + +
+
+
+ + + Time Off + Block Time + +
+
+
+ + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + + + +
+ + +
+ + + +
+ +
+
+ Cancel + + +
+ +
+
+ +
+ diff --git a/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss new file mode 100644 index 0000000..220a37d --- /dev/null +++ b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss @@ -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; +} \ No newline at end of file diff --git a/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.spec.ts b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.spec.ts new file mode 100644 index 0000000..6eec66d --- /dev/null +++ b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UnavailabilityComponent } from './unavailability.component'; + +describe('UnavailabilityComponent', () => { + let component: UnavailabilityComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ UnavailabilityComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(UnavailabilityComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.ts b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.ts new file mode 100644 index 0000000..f5fdccd --- /dev/null +++ b/ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.ts @@ -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) { } + + 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); + } + + +} diff --git a/ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.html b/ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.html index 3c22ba2..e7b37fe 100644 --- a/ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.html +++ b/ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.html @@ -56,7 +56,7 @@ {{bookedAppointment.practitionerInfos[0].designtion }}
- +
diff --git a/ng-seed/src/assets/images/Time-Icon.svg b/ng-seed/src/assets/images/Time-Icon.svg new file mode 100644 index 0000000..c23daea --- /dev/null +++ b/ng-seed/src/assets/images/Time-Icon.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + diff --git a/ng-seed/src/environments/environment.ts b/ng-seed/src/environments/environment.ts index b7a2721..8e98046 100644 --- a/ng-seed/src/environments/environment.ts +++ b/ng-seed/src/environments/environment.ts @@ -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",