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

dashboard changes

Browse Source
This commit is contained in:
Surendiran 2023-06-08 18:38:09 +05:30
parent d01df0cc2f
commit d20b47191d
3 changed files with 128 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
ng-seed/src/app/dashboard/dashboard.component.html
View File

@ -1,4 +1,4 @@
<ng-scrollbar class="scrollHV"> <ng-scrollbar class="scrollHV" *ngIf="user_role != 'PRACTITIONER'">
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap"> <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
<mat-card class="mat_height"> <mat-card class="mat_height">
@ -296,168 +296,74 @@
</div> </div>
</div> --> </div> -->
</ng-scrollbar>
<!-- <ng-scrollbar class="scrollHV" *ngIf="user_role == 'PRACTITIONER'"> -->
<!-- <section> <section *ngIf="user_role == 'PRACTITIONER'" >
<h3>Appointments</h3> <h3>Appointments</h3>
<div class="services-grid"> <div class="services-grid">
<div class="service service2"> <div class="service service2">
<i class="ti-light-bulb"></i> <h4>Today</h4>
<mat-card> <ng-scrollbar class="scrollHV service" *ngIf="user_role == 'PRACTITIONER'">
<div fxLayout="row wrap"> <mat-card *ngFor="let appoinment of appoinmentsListToday; index as i;">
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
<div>Gopi</div> <div fxLayout="row wrap" style="padding-top: 8px;padding-bottom: 8px;">
<div>7896541230</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<div style="text-align: start;margin-left: 10px"><span > {{appoinment.customer[0].cusName}}</span></div>
<div style="text-align: start;margin-left: 10px">{{appoinment.customer[0].phoneNo}}</div>
</div> </div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap"> <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<div>30/12/2023, 3:00pm</div> <div style="text-align: end;margin-right: 7px">{{appoinment.status}}</div>
<div>Status</div> <div style="text-align: start;margin-right: 7px"> <span ><b>{{appoinment.appoinmentSlots[0] | date:'dd/MM/yyyy h:mm a'}}</b></span></div>
<!-- <div style="text-align: start;margin-left: 10px"> <span ><b>{{appoinment.appoinmentSlots[0] | date:'h:mm a'}}</b></span></div> -->
</div> </div>
</div> </div>
</mat-card> </mat-card>
<mat-card> </ng-scrollbar>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
</div> </div>
<div class="service service2"> <div class="service service2">
<i class="ti-light-bulb"></i> <h4>Tomorrow</h4>
<mat-card> <ng-scrollbar class="scrollHV service" >
<div> <mat-card *ngFor="let appoinment of appoinmentsListTomorrow; index as i;">
<p>hello</p> <div fxLayout="row wrap" style="padding-top: 8px;padding-bottom: 8px;">
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<div style="text-align: start;margin-left: 10px"><span > {{appoinment.customer[0].cusName}}</span></div>
<div style="text-align: start;margin-left: 10px">{{appoinment.customer[0].phoneNo}}</div>
</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<div style="text-align: end;margin-right: 7px">{{appoinment.status}}</div>
<div style="text-align: start;margin-right: 7px"> <span ><b>{{appoinment.appoinmentSlots[0] | date:'dd/MM/yyyy h:mm a'}}</b></span></div>
<!-- <div style="text-align: start;margin-left: 10px"> <span ><b>{{appoinment.appoinmentSlots[0] | date:'h:mm a'}}</b></span></div> -->
</div>
</div> </div>
</mat-card> </mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
</div>
<div class="service service3">
<i class="ti-money"></i>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
<mat-card>
<div>
<p>hello</p>
</div>
</mat-card>
</div>
</div>
</section> -->
</ng-scrollbar> </ng-scrollbar>
</div>
<div class="service service2">
<h4>Later</h4>
<ng-scrollbar class="scrollHV service">
<mat-card *ngFor="let appoinment of appoinmentsListLater; index as i;">
<div fxLayout="row wrap" style="padding-top: 8px;padding-bottom: 8px;">
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<div style="text-align: start;margin-left: 10px"><span > {{appoinment.customer[0].cusName}}</span></div>
<div style="text-align: start;margin-left: 10px">{{appoinment.customer[0].phoneNo}}</div>
</div>
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<div style="text-align: end;margin-right: 3px">{{appoinment.status}}</div>
<div style="text-align: start;"> <span ><b>{{appoinment.appoinmentSlots[0] | date:'dd/MM/yyyy h:mm a'}}</b></span></div>
<!-- <div style="text-align: start;margin-left: 10px"> <span ><b>{{appoinment.appoinmentSlots[0] | date:'h:mm a'}}</b></span></div> -->
</div>
</div>
</mat-card>
</ng-scrollbar>
</div>
</div>
</section>
<!-- </ng-scrollbar> -->

13
ng-seed/src/app/dashboard/dashboard.component.scss
View File

@ -669,9 +669,9 @@ h3 {
} }
.service { .service {
background: #fff; background: #f1f1f1;
margin: 20px; margin: 10px;
padding: 20px; // padding: 20px;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
-webkit-box-flex: 1; -webkit-box-flex: 1;
@ -765,5 +765,10 @@ h3 {
display: flex; display: flex;
align-items: center; align-items: center;
} }
section mat-card{
background: linear-gradient(58deg, #009688, #673ab7);
color: #fff;
border-radius: 4px 4px;
font-size: 14px;
}

67
ng-seed/src/app/dashboard/dashboard.component.ts
View File

@ -5,6 +5,7 @@ import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import * as moment from 'moment'; import * as moment from 'moment';
import { CurrencyPipe, DatePipe } from '@angular/common'; import { CurrencyPipe, DatePipe } from '@angular/common';
import { AppointmentsService } from 'app/appoinment/appoinments/appointments-service/appointments.service';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
@ -330,8 +331,12 @@ messages: Object[] = [{
currency: any = 'INR'; currency: any = 'INR';
countAndRevenue: boolean = false; countAndRevenue: boolean = false;
currencyHtmlCode: any; currencyHtmlCode: any;
appoinmentsList:any =[];
constructor(private currencySymbol: CurrencyPipe,public _dash:DashboardService,private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer) { appointmentListLength:any =[]
appoinmentsListToday:any=[];
appoinmentsListTomorrow:any =[];
appoinmentsListLater:any =[];
constructor(public _app:AppointmentsService,private currencySymbol: CurrencyPipe,public _dash:DashboardService,private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer) {
// this.fetch((data) => { this.rows = data; }); // this.fetch((data) => { this.rows = data; });
Object.assign(this, {single, multi}) Object.assign(this, {single, multi})
this.matIconRegistry.addSvgIcon( this.matIconRegistry.addSvgIcon(
@ -354,6 +359,7 @@ messages: Object[] = [{
let user_role = localStorage.getItem('user_role') let user_role = localStorage.getItem('user_role')
let param let param
if(user_role == 'PRACTITIONER'){ if(user_role == 'PRACTITIONER'){
this.getAppoinmentsList()
param = {'user_id':localStorage.getItem('user_id'),'busId':localStorage.getItem('busId')} param = {'user_id':localStorage.getItem('user_id'),'busId':localStorage.getItem('busId')}
}else{ }else{
param = {'busId':localStorage.getItem('busId')} param = {'busId':localStorage.getItem('busId')}
@ -652,4 +658,61 @@ messages: Object[] = [{
return spanElement.innerHTML; return spanElement.innerHTML;
} }
getAppoinmentsList() {
this.appoinmentsList=[]
let user_role = localStorage.getItem('user_role');
let param = {"busId": localStorage.getItem('busId'),"userId":localStorage.getItem('user_id')}
console.log(param)
this._app.getAppoinmentsListDetails(param).subscribe(res => {
if (res.status == 200) {
this.appoinmentsList = res.data;
this.appoinmentsList.forEach(element => {
console.log(element)
element.appoinmentSlots = JSON.parse(element.appoinmentSlots)
});
var startDate:any = new Date();
startDate = startDate.toISOString().slice(0, 10);
this.appoinmentsList.forEach(element => {
if(element.appoinmentDate == startDate){
this.appoinmentsListToday.push(element)
}
});
// this.appoinmentsListToday = this.appoinmentsList.filter(val => val.appoinmentDate == startDate )
// this.appoinmentsList = appoinmentsListToday
localStorage.setItem('busId', res.data[0].busId
)
var startDate1:any = new Date();
startDate1.setDate(startDate1.getDate() + 1);
let Tomorrow = startDate1.toISOString().slice(0, 10)
console.log(Tomorrow)
this.appoinmentsList.forEach(element => {
if(element.appoinmentDate == Tomorrow){
this.appoinmentsListTomorrow.push(element)
}
});
this.appoinmentsList.forEach(element => {
if(element.appoinmentDate != Tomorrow && element.appoinmentDate != startDate ){
this.appoinmentsListLater.push(element)
}
});
console.log(this.appoinmentsListLater)
// this.appoinmentsListTomorrow= this.appoinmentsList.filter(val => val.appoinmentDate == Yesterday )
this.appointmentListLength = res.data.length;
console.log(this.appointmentListLength)
}
})
}
} }