Appointment/appointments_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui changes

Browse Source
This commit is contained in:
bitbucket 2023-04-01 14:41:56 +05:30
parent 54b4cf052c
commit 135da139f3
12 changed files with 170 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
ng-seed/src/app/end-user/booking-summary/booking-summary.component.html
View File

@ -1,19 +1,60 @@
<mat-toolbar>
<span style="text-align: center;">Appointment</span>
</mat-toolbar>
<div fxLayout="row wrap" fxLayoutAlign="center center" *ngIf="summary==false">
<div class="column" fxFlex.xs="60" fxFlex.sm="60" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" >
<mat-card class="p-2 radius1 ">
<div id="success-frame" class="col-12 border my-auto frame-container" *ngIf="summary==false" >
<div style=" text-align: center;">
<img id="success-icon" class="mt-0 mb-2" src="https://demo.easyappointments.org/assets/img/success.png">
</div>
<div style=" text-align: center;">
<h3 >Your appointment has been successfully registered.</h3>
<p>
An email with the appointment details has been sent to you. </p>
<p>
<strong>
Please check your spam folder if the email does not arrive within a few minutes. </strong>
</p>
<div >
<button mat-raised-button (click)="Summaryhide()">Booking Summary</button>
</div>
</div>
<div class="mt-2" style=" text-align: center;">
<small>
Powered by
<a href="https://venbainfotech.com/VenbaIT/">Venba Information Technology Pvt Ltd</a>
</small>
</div>
</div>
</mat-card>
</div>
</div>
<div *ngIf="summary==true">
<div fxLayout="row wrap" fxLayoutAlign="center center">
<div class="column" fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<mat-card class="p-2 radius">
<div class="column" fxFlex.xs="60" fxFlex.sm="60" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" fxLayoutAlign="center center">
<mat-card class="p-2 radius ">
<h3 class="base-border summaryHeading">Your Booking Summary</h3>
<mat-card-content>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head"># Booking ID</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: AP-00001</span>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<span>:{{bookingSummary.bookingId}}</span>
</div>
<div fxFlex.xs="50" fxFlex.sm="25" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" fxLayoutAlign="end">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" fxLayoutAlign="end">
<div><span class="head">Status:</span><span style="color: green;">Confirmed</span></div>
</div>
</div>
@ -21,32 +62,32 @@
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Service</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: ENT</span><span> 15mins</span>
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
<span>: {{serviceMapDetails.service[0].servicesName}}</span><span> ( {{serviceMapDetails.service[0].duration}} Minutes)</span>
</div>
</div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Practitioner</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: Gopi</span>
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
<span>: {{serviceMapDetails.user[0].userName}}</span>
</div>
</div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Date & Time</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: 27 Mar 2023 03:30</span>
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
<span>: {{bookingSummary.appoinmentDate | date:'fullDate'}}</span><span style="margin-left: 6px;">({{bookingSummary.appoinmentSlots | date:'shortTime'}})</span>
</div>
</div>
<div fxLayout="row wrap" style="margin-bottom: 20px;">
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Contact Details</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: 5689741230</span>
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
<span>: {{serviceMapDetails.user[0].contactNo}}</span>
<!-- <br> -->
<!-- <span>gopi@gmail.com</span> -->
</div>
@ -55,8 +96,8 @@
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span class="head">Booked On</span>
</div>
<div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
<span>: 27 Mar 2023</span>
<div fxFlex.xs="75" fxFlex.sm="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75">
<span>: {{bookingSummary.createdAt | date:'fullDate'}}</span>
</div>
</div>
</mat-card-content>
@ -72,6 +113,8 @@
<button mat-raised-button>Add To Google Calander</button>
</div>
</div>
</mat-card>
</div>
</div>
</div>

8
ng-seed/src/app/end-user/booking-summary/booking-summary.component.scss
View File

@ -13,4 +13,12 @@ mat-toolbar{
}
::ng-deep body{
background-color: #f7f8f5 !important;
}
.radius{
width: 100%;
margin-top: 5%;
}
.radius1{
margin-top: 5%;
}

41
ng-seed/src/app/end-user/booking-summary/booking-summary.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { EndUserService } from '../end-user.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-booking-summary',
@ -6,10 +8,45 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./booking-summary.component.scss']
})
export class BookingSummaryComponent implements OnInit {
bookingSummary: any=[];
serviceMapDetails: any=[];
summary:any= false;
constructor(public end_user:EndUserService,private router:Router,) {
this.end_user.summmarylist_observable$.subscribe((res) => {
console.log('booked', res);
if(res.length>0){
// this.bookedAppointment_servicemap=res[0].id;
}else{
let URL = this.router.url;
console.log(URL)
let URL_AS_LIST = URL.split('/');
console.log(URL_AS_LIST);
this.router.navigate(['customer/business/'+URL_AS_LIST[3]])
}
})
constructor() { }
}
ngOnInit(): void {
}
this.end_user.summmarylist_observable$.subscribe((res) => {
console.log('booked2', res);
this.bookingSummary = res[0]
// this.end_user.getcusServicesMapDetails()
let param ={id:this.bookingSummary.serviceMap}
this.end_user.getcusServicesMapDetails(param).subscribe(res => {
if (res.status == 200) {
console.log(res)
this.serviceMapDetails = res['data'][0]
}
})
})
}
Summaryhide(){
this.summary = true;
}
}

8
ng-seed/src/app/end-user/consultants/consultants-list.component.html
View File

@ -19,7 +19,7 @@
</div>
<div fxLayout="row wrap mt-2 mb-2" class="flexRow">
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap" *ngFor="let consultant of consultants | searchFilter:filterdata : 'consultants'">
<div class="consultant-list-card card-inner-circle-orange" (click)="goToSlotBooking(consultant)">
<div class="consultant-list-card card-inner-circle-orange" [style.background]="bgColorPast[1]" (click)="goToSlotBooking(consultant)">
<!-- <div class="consultant-content"> -->
<div class="pad-wrap" >
<!-- <div class="consultant-img">
@ -60,7 +60,7 @@
<a><img src="assets/images/instagram.svg" alt="Avatar" class="img"></a>
</div>
<p class="message text-center">Apollo Hospitals Cancer Centre Nandanam,Chennai</p>
<button class="button pill-shape text-center" routerLink="/customer/doctor-profile"> View Profile</button>
<button class="button pill-shape text-center" routerLink="/customer/doctor-profile"> View Profile</button>
<!-- <div class="align-self-center">
<button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
<span class="material-icons"> bookmark_add </span><span class="button-text">Book Appoinment</span>
@ -71,9 +71,9 @@
</div>
</div>
</div>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap">
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap">
<app-summary></app-summary>
</div>
</div> -->
</div>
<!-- </ng-scrollbar> -->

12
ng-seed/src/app/end-user/consultants/consultants-list.component.ts
View File

@ -14,10 +14,12 @@ export class ConsultantsListComponent implements OnInit {
name: string;
consultants:any =[];
public filterdata = null;
bgColorPast: any=[];
constructor(private router:Router,public dialog: MatDialog,public end_user:EndUserService) {}
ngOnInit(): void {
let tmp = localStorage.getItem('cusServiceData')
let practitioner = JSON.parse(tmp)
console.log(practitioner)
@ -56,6 +58,16 @@ export class ConsultantsListComponent implements OnInit {
console.log(workinghrs)
}
random_ng_past()
{
for(let id of this.consultants){
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
this.bgColorPast.push("rgb(" + x + "," + y + "," + z + ")");
}
}
goToSlotBooking(param){
let URL = this.router.url;

4
ng-seed/src/app/end-user/customer-info/customer-info.component.html
View File

@ -80,9 +80,9 @@
</form>
</mat-card>
</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap flx" fxLayoutAlign="end center">
<!-- <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap flx" fxLayoutAlign="end center">
<app-summary></app-summary>
</div>
</div> -->
</div>
</div>
</ng-scrollbar>

2
ng-seed/src/app/end-user/end-user.service.ts
View File

@ -12,6 +12,8 @@ export class EndUserService {
public appointmentBooked:BehaviorSubject<any> = new BehaviorSubject<any>([]);
public appointmentBooked_observable$ = this.appointmentBooked.asObservable();
public summmarylist:BehaviorSubject<any> = new BehaviorSubject<any>([]);
public summmarylist_observable$ = this.summmarylist.asObservable();
private apiUrl = environment.apiEndpoint;
constructor(private _http: HttpClient) { }

4
ng-seed/src/app/end-user/payment/payment.component.html
View File

@ -36,9 +36,9 @@
</mat-card-content>
</mat-card>
</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap flx" fxLayoutAlign="end center">
<!-- <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap flx" fxLayoutAlign="end center">
<app-summary></app-summary>
</div>
</div> -->
</div>
</div>

30
ng-seed/src/app/end-user/payment/payment.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { EndUserService } from '../end-user.service';
@Component({
@ -10,7 +10,24 @@ import { EndUserService } from '../end-user.service';
})
export class PaymentComponent implements OnInit {
form: FormGroup;
constructor(private router:Router,public enduser:EndUserService, ) { }
bookedAppointment_servicemap: any;
constructor(private router:Router,public enduser:EndUserService, private route: ActivatedRoute, ) {
this.enduser.appointmentBooked_observable$.subscribe((res) => {
console.log('booked', res);
if(res.length>0){
this.bookedAppointment_servicemap=res[0].id;
}else{
let URL = this.router.url;
console.log(URL)
let URL_AS_LIST = URL.split('/');
console.log(URL_AS_LIST);
this.router.navigate(['customer/business/'+URL_AS_LIST[3]])
}
})
}
ngOnInit(): void {
this.form = new FormGroup({
@ -45,21 +62,24 @@ export class PaymentComponent implements OnInit {
this.enduser.CreatecusServicesMapDetails(paramsmap).subscribe(res => {
if (res.status == 200) {
console.log(res)
let serviceMap = res['data'].id
let serviceMap = res['data'][0].id
let time = new Date().toLocaleTimeString()
let params= {
"busId": serviceDetails.busId,
"cusId": URL_AS_LIST[8],
"appoinmentDate": slot_array[0].date,
"appoinmentTime": time,
"serviceMap": serviceMap,
"serviceMap": serviceMap,
"appoinmentSlots": slot_array[0].slots,
//"servicemap" :this.bookedAppointment_servicemap
}
console.log(params)
this.enduser.CreateAppoinmentsCus(params).subscribe(res => {
if (res.status == 200) {
console.log(res)
localStorage.setItem('summarylist',JSON.stringify(res.data))
this.enduser.summmarylist.next(res.data)
// localStorage.setItem('summarylist',JSON.stringify(res.data))
this.router.navigate([URL+"/bts"])
}
})

6
ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.html
View File

@ -30,14 +30,14 @@
</mat-form-field>
</div>
<div fxFlexAlign="center" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" class="p-gap"> -->
<button *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i,'bookedSlot':checkBooked(slot.startTime | date:'shortTime')== '0' } " (click)="toggleActive($event,slot.startTime,i)">{{slot.startTime | date:'shortTime'}}</button>
<button *ngFor="let slot of slots;let i=index" mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i,'clickedSlot':slotIndex == i,'bookedSlot':checkBooked(slot.startTime | date:'shortTime')== '0' } " [disabled]="checkBooked(slot.startTime | date:'shortTime')== 0" (click)="toggleActive($event,slot.startTime,i)">{{slot.startTime | date:'shortTime'}}</button>
</div>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" (click)="submit()">PROCEED</button>
</div>
</mat-card>
</div>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap flx" fxLayoutAlign="end center">
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="m-gap p-gap flx" fxLayoutAlign="end center">
<app-summary></app-summary>
</div>
</div> -->
</div>
</div>

13
ng-seed/src/app/end-user/slot-booking/slot-booking-details.component.ts
View File

@ -48,9 +48,18 @@ export class SlotBookingDetailsComponent implements OnInit {
console.log('booked', res);
if(res.length>0){
this.bookedAppointment=res[0].appoinment
}
}else{
let URL = this.router.url;
console.log(URL)
let URL_AS_LIST = URL.split('/');
console.log(URL_AS_LIST);
this.router.navigate(['customer/business/'+URL_AS_LIST[3]])
}
})
// Set the minimum to January 1st 20 years in the past and December 31st a year in the future.
this.slot_Split()
@ -193,7 +202,7 @@ export class SlotBookingDetailsComponent implements OnInit {
// console.log("sksjfjdhkfhsdfcgdjsh")
return '0';
}else{
return 1
return 0
}
});

5
ng-seed/src/app/end-user/summary/summary.component.ts
View File

@ -10,7 +10,10 @@ import { ServiceListComponent } from '../service-list-details/service-list.compo
export class SummaryComponent implements OnInit {
serviceName: any=[];
constructor() { }
constructor() {
}
ngOnInit(): void {
let tmp = localStorage.getItem("servicedetails")