edit monthley attendance

MOHEMM-Q3-DEV-LATEST
Fatimah.Alshammari 6 years ago
parent 2f55272c91
commit 2a71811ca2

@ -3,6 +3,7 @@
[monthviewEventDetailTemplate]="template" [monthviewEventDetailTemplate]="template"
[calendarMode]="calendar.mode" [calendarMode]="calendar.mode"
[currentDate]="currentAvailableAppoDate" [currentDate]="currentAvailableAppoDate"
[lockSwipes]="true"
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onTimeSelected)="onDayClicked($event)"> (onCurrentDateChanged)="onCurrentDateChanged($event)" (onTimeSelected)="onDayClicked($event)">
</calendar> </calendar>

@ -14,7 +14,7 @@ import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-re
@Component({ @Component({
selector: 'app-circle-calendar', selector: 'app-circle-calendar',
templateUrl: './circle-calendar.component.html', templateUrl: './circle-calendar.component.html',
styleUrls: ['./circle-calendar.component.scss'], styleUrls: ['./circle-calendar.component.scss']
}) })
export class CircleCalendarComponent implements OnInit { export class CircleCalendarComponent implements OnInit {
@Input() eventsdateDayOff: any = []; @Input() eventsdateDayOff: any = [];
@ -170,6 +170,7 @@ export class CircleCalendarComponent implements OnInit {
} }
onCurrentDateChanged(event) { onCurrentDateChanged(event) {
console.log("onCurrentDateChanged");
if (this.isFirst) { if (this.isFirst) {
const today = new Date(); const today = new Date();
this.currentDateToSwipe = event; this.currentDateToSwipe = event;
@ -249,16 +250,17 @@ export class CircleCalendarComponent implements OnInit {
} }
} }
public async dateModal(todayDate) { public async dateModal(todayDate, shiftDetails) {
const modal = await this.mod.create({ const modal = await this.mod.create({
component: DateInfoModalComponent, component: DateInfoModalComponent,
showBackdrop: true, showBackdrop: true,
backdropDismiss: true, backdropDismiss: true,
componentProps: { componentProps: {
TODAYDATE: todayDate TODAYDATE: todayDate,
SHIFTDETAILS: shiftDetails
} }
}); });
modal.cssClass = "advanced-search-modal"; modal.cssClass = "calendar-modal";
await modal.present(); await modal.present();
} }
@ -298,9 +300,9 @@ export class CircleCalendarComponent implements OnInit {
getScheduleShiftDetails() { getScheduleShiftDetails(RTP_ID) {
const GetShiftDetailRequestObject = new GetShiftDetailRequest(); const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.RTP_ID; GetShiftDetailRequestObject.P_RTP_ID = RTP_ID;
GetShiftDetailRequestObject.P_PAGE_NUM = 1; GetShiftDetailRequestObject.P_PAGE_NUM = 1;
GetShiftDetailRequestObject.P_PAGE_LIMIT = 10; GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
console.log(GetShiftDetailRequestObject); console.log(GetShiftDetailRequestObject);
@ -308,6 +310,7 @@ export class CircleCalendarComponent implements OnInit {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
console.log(result); console.log(result);
this.shiftDetailsData = result.GetScheduleShiftsDetailsList; this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
this.dateModal(this.detailData,result);
} }
}); });
} }
@ -346,6 +349,7 @@ export class CircleCalendarComponent implements OnInit {
/////////////////////////this function should be in common service///////////////////////// /////////////////////////this function should be in common service/////////////////////////
public getDayHoursTypeDetails(month, year) { public getDayHoursTypeDetails(month, year) {
this.monthTitle.emit(month); this.monthTitle.emit(month);
this.currentYear.emit(year); this.currentYear.emit(year);
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest(); const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
@ -397,7 +401,9 @@ export class CircleCalendarComponent implements OnInit {
fullDate = allData[i].SCHEDULE_DATE.split(" ") fullDate = allData[i].SCHEDULE_DATE.split(" ")
if(fullDate[0] == date){ if(fullDate[0] == date){
this.detailData = allData[i] this.detailData = allData[i]
this.dateModal(this.detailData); console.log("date details:")
console.log(this.detailData);
this.getScheduleShiftDetails(this.detailData.RTP_ID);
} }
} }
} }
@ -459,4 +465,6 @@ export class CircleCalendarComponent implements OnInit {
this.reRenderCalendar(); this.reRenderCalendar();
} }
} }

@ -1,5 +1,5 @@
<ion-grid class="headerGrid"> <ion-grid class="headerGrid">
<ion-row style="margin-left: -95px; margin-bottom: 1px;"> <ion-row style="margin-left: -130px; margin-top: 27px;">
<ion-col size="10"> <ion-col size="10">
<div style="width: 100%;"> <div style="width: 100%;">
<div class="result-graph"> <div class="result-graph">
@ -11,10 +11,8 @@
<div class="result-text-container"> <div class="result-text-container">
<h2>74%</h2> <h2 class="percentage">{{percentage}}</h2>
<span>Completed <br><br><br><br></span> <span>Completed <br><br><br><br></span>
</div> </div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart> <p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
@ -23,76 +21,156 @@
</div> </div>
</ion-col> </ion-col>
<ion-col size="2"> <ion-col size="2">
<div style="border: 1px gray solid; margin-left: -45px; text-align:center; width: 245%; border-radius: 5%; height: 100%;"> <div class="div" >
<p style=" margin-bottom: -25px;">{{today}}</p> <!-- <p class="p1">{{scheduleDate}}</p> -->
<p style="font-weight:bold ;font-size: 28px; margin-bottom: -16px;">{{todayDate}}</p>
<p style=" margin-bottom: -15px;">{{monthDate}}</p> <ion-row >
<p style=" margin-bottom: 2px;">{{month}}</p> <p class="p0">{{nameDay}}</p>
<div style="background-color: gray;height: 26px;"> </ion-row>
<p>Permenent</p> <ion-row >
</div> <p class="p1">{{day}}</p>
</ion-row>
<ion-row >
<p class="p2">{{nameMonth}}</p>
</ion-row>
<ion-row >
<p class="p3">{{year}}</p>
</ion-row>
<ion-row>
<p class="p5">{{ts.trPK('attendance','present')}}</p>
</ion-row>
<!-- <p class="p2">{{todayDate}}</p>
<p class="p3">{{monthDate}}</p>
<p class="p4">{{month}}</p> -->
</div> </div>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
<div style="background-color: gray; height: 0.3px; margin-bottom: 60px;"> <div >
<ion-grid> <ion-grid class="grid">
<ion-row> <ion-row class="gridrow">
<ion-col class="liftcol">
<ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','shift-time')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"><p >{{scheduled}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','regular')}}</p>
</ion-row>
</ion-col>
</ion-row>
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow" >
<ion-col class="liftcol">
<ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-in')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"> <p >{{endDate}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-out')}} </p>
</ion-row>
</ion-col>
</ion-row >
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow">
<ion-col class="liftcol">
<ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','late-in')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"> <p >{{excess}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','excess')}}</p>
</ion-row>
</ion-col>
</ion-row >
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow">
<ion-col class="liftcol">
<ion-row class="amountlabel"> <p >{{shortage}}</p> </ion-row>
<ion-row class="rowlabel">
<p>{{ts.trPK('attendance-tracking','shortage')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"> <p >{{earlyOut}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','early-out')}}</p>
</ion-row>
</ion-col>
</ion-row>
<!-- //////////////////////////////////////////////////////////////// -->
<!-- <ion-row>
<ion-col> <ion-col>
<p style="position: relative; left: 20px;">19:00 - 07:00</p> <p style="position: relative; left: 20px;">{{shiftTime}}</p>
<p style="position: relative; left: 25px; color: gray;">SHIFT TIME</p> <p style="position: relative; left: 25px; color: gray;">{{ts.trPK('attendance-tracking','shift-time')}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
<div style="background-color: gray; height: 1px;"></div> <div style="background-color: gray; height: 1px;"></div>
<ion-row> <ion-row>
<ion-col> <ion-col>
<p style="position: relative; left: 40px;">11:30</p> <p style="position: relative; left: 40px;">{{scheduled}}</p>
<p style="position: relative; left: 20px; color: gray;">REGULAR</p> <p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','regular')}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
<div style="background-color: gray; height: 0.3px;"></div> <div style="background-color: gray; height: 0.3px;"></div>
<ion-row> <ion-row>
<ion-col> <ion-col>
<p style="position: relative; left: 40px;">19:20</p> <p style="position: relative; left: 40px;">{{startDate}}</p>
<p style="position: relative; left: 20px; color: gray;">CHECK-IN</p> <p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','check-in')}}</p>
</ion-col> <p style="position: relative; left: 20px; color: gray;">CHECK-IN</p> -->
<!-- </ion-col>
</ion-row> </ion-row>
<div style="background-color: gray; height: 1px;"></div> <div style="background-color: gray; height: 1px;"></div>
<ion-row> <ion-row>
<ion-col> <ion-col>
<p style="position: relative; left: 40px;">7:50</p> <p style="position: relative; left: 40px;">{{endDate}}</p>
<p style="position: relative; left: 40px; color: gray;">CHECK-OUT</p> <p style="position: relative; left: 40px; color: gray;">{{ts.trPK('attendance-tracking','check-out')}} </p> -->
</ion-col> <!-- <p style="position: relative; left: 40px; color: gray;">CHECK-OUT</p> -->
</ion-row> <!-- </ion-col>
</ion-row> -->
<!-- <div style="background-color: gray; height: 0.3px;"></div> --> <!-- <div style="background-color: gray; height: 0.3px;"></div> -->
</ion-grid> <!-- </ion-grid>
</div> </div>
<div style="background-color: gray;height: 100%;margin-left: 150px;margin-top: -60px;margin-right: 150px;"> <div style="background-color: gray;height: 100%;margin-left: 150px;margin-top: -60px;margin-right: 150px;">
<ion-grid style="width: 140px;"> <ion-grid style="width: 140px;">
<ion-row> <ion-row>
<ion-col> <ion-col>
<p style="position: relative; left: 40px;">00:20</p> <p style="position: relative; left: 40px;">{{lateIn}}</p>
<p style="position: relative; left: 30px; color: gray;">LATE-IN</p> <p style="position: relative; left: 30px; color: gray;">{{ts.trPK('attendance-tracking','late-in')}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col> <ion-col>
<p style="position: relative; left: 40px;">00:30</p> <p style="position: relative; left: 40px;">{{excess}}</p>
<p style="position: relative; left: 30px; color: gray;">EXCESS</p> <p style="position: relative; left: 30px; color: gray;">{{ts.trPK('attendance-tracking','excess')}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col> <ion-col>
<p style="position: relative; left: 40px;">00:00</p> <p style="position: relative; left: 40px;">{{shortage}}</p>
<p style="position: relative; left: 20px; color: gray;">SHORTAGE</p> <p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','shortage')}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col> <ion-col>
<p style="position: relative; left: 40px;">00:00</p> <p style="position: relative; left: 40px;">{{earlyOut}}</p>
<p style="position: relative; left: 40px; color: gray;">EARLY-OUT</p> <p style="position: relative; left: 40px; color: gray;">{{ts.trPK('attendance-tracking','early-out')}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row> -->
</ion-grid> </ion-grid>
</div> </div>

@ -1,26 +1,37 @@
.result-text-container { .result-text-container {
padding: 0; // padding: 0;
margin: 0; // margin: 0;
position: absolute; // position: absolute;
left: 50%; // left: 50%;
top: 50%; // top: 50%;
display: block; // display: block;
text-align: center; // text-align: center;
// transform: translate(-50%, -50%);
//////////////////////////here
padding: 0;
margin: 0;
position: absolute;
left: 58%;
top: 67%;
display: block;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 38px; font-size: 25px;
font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
font-weight: bold;
margin: 0 auto; margin: 0 auto;
@ -39,6 +50,114 @@
font-size: 12px; font-size: 12px;
font-family: workSans-Regular; font-family: workSans-Regular;
color: rgb(163, 163, 163) !important;
} }
} }
.today-graph{
display: block;
height: 127px;
width: 288px;
}
.amountlabel{
color: black !important;
font-weight: bold !important;
font-size: 13px !important;
// border-top: 1px solid rgb(163, 163, 163) !important;
margin-left: 0px !important;
margin-bottom: -29px !important;
}
.rowlabel{
color: rgb(163, 163, 163) !important;
font-size: 13px !important;
font-family: WorkSans-Bold;
}
.grid{
padding-bottom: -20px !important;
padding-top: -20px !important;
height: 360px !important;
}
.liftcol{
// padding-top: 1px !important;
// padding-bottom: 1px !important;
border-right: 1px solid rgb(163, 163, 163) !important;
}
.rightcol{
margin-left: 5px !important;
}
.gridrow{
border-top: 1px solid rgb(163, 163, 163) !important;
margin-left: 19px;
margin-right: 12px;
}
.div{
// border: 1px solid #a3a3a3 !important;
// text-align: center;
// width: 274%;
// border-radius: 8%;
// height: 40%;
// margin-right: -11px;
border: 1px solid #a3a3a3 !important;
border-radius: 9px;
width: 241%;
margin-right: -226px;
}
.p0{ margin-bottom: -15px !important;
color: black !important;
margin-left: 24px;
font-weight: bold !important;
font-size: 17px !important;
margin-top: 8px;
}
.p1{
margin-bottom: -7px !important;
color: black !important;
/* margin-right: 25px !important; */
font-family: WorkSans-Bold !important;
margin-left: 36px;
/* margin-bottom: -82px; */
font-size: 33px;
margin-top: 10px;
}
.p2{ font-weight: bold !important;
font-size: 17px !important;
margin-bottom: 43px !important;
margin-top: 0px !important;
color: black !important;
font-weight: bold !important;
margin-left: 33px;
}
.p3{ /* margin-bottom: -72px !important; */
color: black !important;
font-weight: bold !important;
font-size: 19px;
margin-top: -43px;
margin-left: 27px;
}
.p4{ margin-bottom: 56px !important;
margin-top: -26px !important;
color: black !important;
}
// .pdiv{background-color: gray;height: 26px;}
.p5{
font-size: 14px;
text-align: center;
background-color: #094875;
color: white;
margin-top: -13px;
margin-bottom: -3px;
height: 21px;
width: 110px;
padding-top: 7px;
/* font-family: WorkSans-Bold !important; */
padding-bottom: 21px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

@ -1,5 +1,7 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular'; import { ModalController, NavParams, IonInfiniteScroll } from '@ionic/angular';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
// import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
@Component({ @Component({
selector: 'app-date-info-modal', selector: 'app-date-info-modal',
@ -7,33 +9,38 @@ import { ModalController, NavParams } from '@ionic/angular';
styleUrls: ['./date-info-modal.component.scss'], styleUrls: ['./date-info-modal.component.scss'],
}) })
export class DateInfoModalComponent implements OnInit { export class DateInfoModalComponent implements OnInit {
[x: string]: any;
gaugeType = "full"; gaugeType = "full";
gaugeValue = 28.3; gaugeValue = 28.3;
gaugeLabel = "Days"; gaugeLabel = "Days";
@Input() TODAYDATE: any; @Input() TODAYDATE: any;
@Input() SHIFTDETAILS:any;
today: any; today: any;
todayDate: any; todayDate: any;
month: any; month: any;
monthDate: any; monthDate: any;
excess: any;
constructor(public modalController: ModalController, public navParams: NavParams) { } shortage:any;
lateIn:any;
ngOnInit() { scheduled:any;
let dateData = this.TODAYDATE.split(' '); earlyOut:any;
console.log(dateData) shiftTime:any;
this.today = dateData[0]; startDate:any;
this.todayDate = dateData[1]; endDate:any;
this.monthDate = dateData[2]; shift:any;
this.month = dateData[3]; percentage:any;
console.log(this.todayDate); data:any;
console.log(this.today); scheduleDate:any;
console.log(this.monthDate); tests:any;
console.log(this.month); year: any;
} nameMonth:any;
nameDay: any;
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
// public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 85,
tooltips: { enabled: false }, tooltips: { enabled: false },
@ -41,28 +48,187 @@ export class DateInfoModalComponent implements OnInit {
}; };
constructor(public modalController: ModalController, public navParams: NavParams, public ts:TranslatorService,
) { }
public data = { ngOnInit() {
// this.shift =this.common.sharedService.getSharedData('shiftDetailsData');
console.log(this.TODAYDATE.SCHEDULE_DATE.split(" ")[0].split(" "))
//22/2/2019
console.log(this.TODAYDATE.EXCESS_HRS)
datasets: [ this.excess = this.TODAYDATE.EXCESS_HRS
console.log(this.TODAYDATE.LATE_IN_HRS)
this.lateIn = this.TODAYDATE.LATE_IN_HRS
console.log(this.TODAYDATE.SHORTAGE_HRS)
this.shortage = this.TODAYDATE.SHORTAGE_HRS
console.log(this.TODAYDATE.SCHEDULED_HRS)
this.scheduled = this.TODAYDATE.SCHEDULED_HRS
console.log(this.TODAYDATE.EARLY_OUT_HRS )
this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS
this.scheduleDate = this.TODAYDATE. SCHEDULE_DATE
{ console.log(this.TODAYDATE. SCHEDULE_DATE)
data: [120, 50],
backgroundColor: [ // console.log(this.SHIFTDETAILS)
// console.log(this.SHIFTDETAILS.SHT_NAME)
this.shiftTime= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_NAME
this.startDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_TIME
this.endDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_TIME
this.percentage=this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].PERCENTAGE
'#094875' this.percChart= this.percentage.substring(0,this.percentage.indexOf("%"));
], let test = this.scheduleDate;
let splitdate =test.split(" ");
let date =splitdate[0];
let test1 =date.split("/");
console.log("" + test1);
this. month =test1[1];
console.log("" + this.month);
this. year =test1[2];
console.log("" + this.year);
this.day =test1[0];
console.log("date: "+ date);
console.log("this.percChart: " +this.percChart);
borderWidth: 2 this.nameMonth=this.getMonthName(parseInt(this.month))
console.log("" + this.nameMonth)
console.log("" + this.month)
}] this.nameDay=this.getHeaderDay(new Date(date))
console.log("" + this.nameDay)
// let testnamdeday=this.weekDaysEnSort[new Date(date).getDay()];
// console.log("testnamdeday" + testnamdeday)
let d = new Date(date);
let dayName = d.toString().split(' ')[0];
this.data = {
labels: ['percentage'],
datasets: [
{
data: [this.percChart],
// data: [96],
backgroundColor: [
'#22C6B3',
// '#22C6B3'
],
borderWidth: 2
}]
};
// this.startDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_DATETIME;
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_TIME)
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_DATETIME );
// this.endDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_DATETIME ;
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_TIME )
// SHT_ACTUAL_START_DATETIME
// SHT_ACTUAL_START_TIME
// SHT_ACTUAL_END_DATETIME
// SHT_ACTUAL_END_TIME
//let dateData = this.TODAYDATE.split(' ');
// console.log(dateData)
// this.today = dateData[0];
// this.todayDate = dateData[1];
// this.monthDate = dateData[2];
// this.month = dateData[3];
// console.log(this.todayDate);
// console.log(this.today);
// console.log(this.monthDate);
// console.log(this.month);
}
public getMonthName(value: number): string {
switch (value) {
case 1:
return "Jan";
case 2:
return "Feb";
case 3:
return "Mar";
case 4:
return "Apr";
case 5:
return "May";
case 6:
return "Jun";
case 7:
return "Jul";
case 8:
return "Aug";
case 9:
return "Sep";
case 10:
return "Oct";
case 11:
return "Nov";
case 12:
return "Dec";
}
}
getHeaderDay(date: any) {
// return this.weekDaysEnSort[date.getDay()];
return this.weekDaysEn[date.getDay()];
}
// @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
// public options = {
// cutoutPercentage: 80,
// tooltips: { enabled: false },
// legend: { display: false }
// };
//
//return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
// create muthod recive date
// them get day date.getDay()
// them get month name this.getMonthName(date.getMonth() + 1)
// date.getFullYear()
//implemeition this.getMonthName()
//SCHEDULE_DATE: "2/1/2020 12:00:00 AM"
//GetDayHoursTypeDetailsList
};
// // date = {scheduleDate};
// let a = date.split(" ");
// let date = a[0];
//test=date.split("/")
// test[0]
// test[1]
// test[3]
// let date2 = date.split("/");
// String part1 = parts[0];
// String part2 = parts[1];
// String part3 = parts[2];
} }

@ -14,6 +14,7 @@ import * as moment from 'moment';
}) })
export class ShiftDetailsComponent implements OnInit { export class ShiftDetailsComponent implements OnInit {
public selectedShift: any; public selectedShift: any;
// public selectedShiftDay: any;
public shiftDetailsData: any = []; public shiftDetailsData: any = [];
public swipeDetailsData: any = []; public swipeDetailsData: any = [];
constructor( constructor(
@ -29,9 +30,18 @@ export class ShiftDetailsComponent implements OnInit {
} else if (this.selectedShift.origin === 'shiftSwipes') { } else if (this.selectedShift.origin === 'shiftSwipes') {
this.getSwipesDetails(); this.getSwipesDetails();
} }
// this.selectedShiftDay = this.sharedData.getSharedData('selectedShiftDay', false);
// console.log(this.selectedShiftDay);
// if (this.selectedShiftDay.origin === 'shiftDetails') {
// this.getScheduleShiftDetails();
// } else if (this.selectedShiftDay.origin === 'shiftSwipes') {
// this.getSwipesDetails();
// }
} }
getScheduleShiftDetails() { getScheduleShiftDetails() {
console.log("getScheduleShiftDetails");
const GetShiftDetailRequestObject = new GetShiftDetailRequest(); const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.RTP_ID; GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.RTP_ID;
GetShiftDetailRequestObject.P_PAGE_NUM = 1; GetShiftDetailRequestObject.P_PAGE_NUM = 1;
@ -41,11 +51,14 @@ export class ShiftDetailsComponent implements OnInit {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
console.log(result); console.log(result);
this.shiftDetailsData = result.GetScheduleShiftsDetailsList; this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
// this.common.sharedService.setSharedData(this.shiftDetailsData,'shiftDetailsData');
} }
}); })
} }
getSwipesDetails() { getSwipesDetails() {
console.log("getSwipesDetails");
const GetSwipesRequestObject = new GetSwipesRequest(); const GetSwipesRequestObject = new GetSwipesRequest();
GetSwipesRequestObject.P_SELECTED_EMPLOYEE_NUMBER = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false); GetSwipesRequestObject.P_SELECTED_EMPLOYEE_NUMBER = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
GetSwipesRequestObject.P_SCHEDULE_DATE = this.common.convertISODateToJsonDate(this.selectedShift.SCHEDULE_DATE); GetSwipesRequestObject.P_SCHEDULE_DATE = this.common.convertISODateToJsonDate(this.selectedShift.SCHEDULE_DATE);

@ -1,13 +1,13 @@
<ion-header> <!-- <ion-header>
<ion-toolbar class="header-toolbar-new"> <ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/eit/homepage"></ion-back-button> <ion-back-button color="light" class="btnBack" defaultHref="/eit/homepage"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title color="light" >My Time Card</ion-title> <ion-title color="light" >My Time Card</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header> -->
<ion-content> <!-- <ion-content> -->
<!-- <div class="time-card-details-container"> <!-- <div class="time-card-details-container">
<ion-segment <ion-segment
(ionChange)="segmentChanged($event)" (ionChange)="segmentChanged($event)"
@ -381,12 +381,55 @@
<!------------------------------------------ ENAD CODE -------------------------------------------> <!------------------------------------------ ENAD CODE ------------------------------------------->
<div class="header-div">
<ion-content class="colorBG">
<div class="header-div"> <div class="header-div">
<p style="position: absolute; left: 40%; bottom: 65%;">{{monthTitle}}</p> <ion-buttons slot="start">
<ion-slides> <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
<ion-slide> </ion-buttons>
<ion-grid class="headerGrid"> <ion-title class="Title"> {{ts.trPK('attendance','monthly-attendance')}}</ion-title>
</div>
<div class="">
<div class="header">
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{monthTitle}}</p> -->
<div class="slider">
<ion-row>
<ion-col>
<button ion-button icon-start class="slidPrev" (click)="previousSlide(sliderOne,slideWithNav)">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon>
</button>
</ion-col>
<ion-col>
<p style="position: absolute; left: 27%; bottom: 0%; font-family: WorkSans-Bold;">{{month}}</p>
<!-- <p style="position: absolute; left: 22%; bottom: 0%; font-family: WorkSans-Bold;">{{yearTitle}}</p> -->
</ion-col>
<ion-col>
<p style="position: absolute; left: 25%; bottom: 0%; font-family: WorkSans-Bold;">{{year}}</p>
</ion-col>
<ion-col>
<button ion-button icon-end class="slidNext" (click)="nextSlide(sliderOne,slideWithNav)">
<ion-icon class="disabledArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
</ion-icon>
</button>
</ion-col>
</ion-row>
</div>
<!-- <ion-slides [options]="slideOptsOne" #sliderRef (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide >
<ion-grid class="headerGrid"> -->
<ion-slides [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide >
<ion-grid class="headerGrid">
<div style="color: black;"> <div style="color: black;">
<!-- <ngx-gauge <!-- <ngx-gauge
[type]="gaugeType" [type]="gaugeType"
@ -397,14 +440,14 @@
<div class="request-heading"> <div class="request-heading">
<span>Open Request Analysis</span> <span> {{ts.trPK('attendance-tracking','attendance-statistics')}}</span>
</div> </div>
<div class="result-text-container"> <div class="result-text-container">
<h2>{{totalAttendancePrecentage}} Days</h2> <h2>{{totalAttendancePrecentage}}</h2>
<p>{{ts.trPK('absenceList','days')}}</p>
<!-- <span>TOTAL <br> OPEN REQUEST</span> --> <!-- <span>TOTAL <br> OPEN REQUEST</span> -->
</div> </div>
@ -412,41 +455,73 @@
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart> <p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div> </div>
<div style="position: relative; <!-- <div style="position: relative;
left: 79%; left: 77%;
bottom: 35px; bottom: 117px;
color: black; color: black;
background-color: #22c6b3; background-color: #22c6b3;
width: 20%; height: 6px;"> width: 20%; height: 6px;">
<label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;">Present <strong>{{attendedDays}}</strong></label> <label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;"> {{ts.trPK('attendance','present')}} <strong>{{attendedDays}}</strong></label>
</div> </div>
<div style="position: relative; <div style="position: relative;
left: 79%; left: 77%;
bottom: 10px; bottom: 67px;
color: black; color: black;
background-color: #094875; background-color: #094875;
width: 20%; height: 6px;"> width: 20%; height: 6px;">
<label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;">Absent <strong>{{absentDays}}</strong></label> <label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;">{{ts.trPK('attendance','absent')}} <strong>{{absentDays}}</strong></label>
</div> </div>
</div> -->
<div style="position: relative;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('attendance','present')}}</label>
</ion-row>
<ion-row>
<label class="green-amount">{{attendedDays}}</label>
</ion-row>
</ion-col>
</div> </div>
<div style="position: relative;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('attendance','absent')}}</label>
</ion-row>
<ion-row>
<label class="blue-amount" for="">{{absentDays}}</label>
</ion-row>
</ion-col>
</div>
</div>
</ion-grid> </ion-grid>
<!-- //////////////////////////////////////// -->
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
</div> </div>
</div> </div>
<div style="margin-top: 45%;"> <div style="margin-top: 10%;">
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col> <ion-col>
<ion-grid class="labelGrid"> <ion-grid class="labelGrid">
<ion-row> <ion-row>
<ion-col> <ion-col>
<label style="font-size: 13px;">SCHEDULE</label> <label style="font-size: 12px;">{{ts.trPK('attendance-tracking','schedule')}}</label>
</ion-col> </ion-col>
<ion-col> <ion-col>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">{{timeCardSummaryData.SCHEDULE_DAYS}}</h2> <h2 *ngIf ="timeCardSummaryData" style="margin-left: 45%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2> <h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
</ion-col> </ion-col>
</ion-row> </ion-row>
@ -456,29 +531,29 @@
<ion-grid class="labelGrid"> <ion-grid class="labelGrid">
<ion-row> <ion-row>
<ion-col> <ion-col>
<label style="font-size: 13px;">OFF DAYS</label> <label style="font-size: 12px;">{{ts.trPK('attendance-tracking','off-days')}}</label>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col> <ion-col>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 65%; margin-top: 10px; font-size: 25px;">{{timeCardSummaryData.OFF_DAYS}}</h2> <h2 *ngIf ="timeCardSummaryData" style="margin-left: 37%; margin-top: 18px; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.OFF_DAYS}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2> <h2 *ngIf ="!timeCardSummaryData" style="margin-left: 37%; font-size: 25px;">0</h2>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-col> </ion-col>
<ion-col> <ion-col>
<ion-grid class="labelGrid"> <ion-grid class="labelGrid">
<label style="font-size: 13px;">NON ANALYZED</label> <label style="font-size: 12px;">{{ts.trPK('attendance-tracking','non-analyzed')}}</label>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2> <h2 *ngIf ="timeCardSummaryData" style="margin-left: 36%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2> <h2 *ngIf ="!timeCardSummaryData" style="margin-left: 36%; font-size: 25px;">0</h2>
</ion-grid> </ion-grid>
</ion-col> </ion-col>
<ion-col> <ion-col>
<ion-grid class="labelGrid"> <ion-grid class="labelGrid">
<label style="font-size: 13px;">SHORTAGE HOURS</label> <label style="font-size: 12px;">{{ts.trPK('attendance-tracking','shortage-hours')}}</label>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 18%; font-size: 25px;">{{timeCardSummaryData.SHORTAGE_HRS}}</h2> <h2 *ngIf ="timeCardSummaryData" style="margin-left: 18%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2> <h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
</ion-grid> </ion-grid>
</ion-col> </ion-col>
@ -487,6 +562,7 @@
</div> </div>
<div > <div >
<ion-grid class="bodyGrid"> <ion-grid class="bodyGrid">
<p style="font-weight: bold; font-size: 17px;"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</p>
<app-circle-calendar [eventsdateAttend]='arrDaysAttendance' [eventsdateAbsent]='arrDaysAbsent' [eventsdateDayOff]='arrDaysOff' (monthTitle)='changeMonthTitle($event)' (currentYear)=changeYear($event)></app-circle-calendar> <app-circle-calendar [eventsdateAttend]='arrDaysAttendance' [eventsdateAbsent]='arrDaysAbsent' [eventsdateDayOff]='arrDaysOff' (monthTitle)='changeMonthTitle($event)' (currentYear)=changeYear($event)></app-circle-calendar>
</ion-grid> </ion-grid>
</div> </div>

@ -24,6 +24,30 @@ ion-title{
margin-right: 35px; margin-right: 35px;
} }
///////////////////////////////here
.slidPrev{
// margin-top: 8px;
margin-left: 10px;
background: transparent;
}
.slidNext{
background: transparent;
margin-top: -1px;
margin-left: 43px;
}
.activeArrow{
height: 20px;
width: 20px;
color: white;
}
.disabledArrow{
height: 20px;
width: 20px;
color: gray;
// margin-right: 5px;
}
.header-toolbar-new{ .header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%); --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px; border-bottom-right-radius: 30px;
@ -154,23 +178,32 @@ ion-title{
//////////////////////////////////////////ENAD CODE//////////////////////////////////////////// //////////////////////////////////////////ENAD CODE////////////////////////////////////////////
.colorBG {
.colorBG{
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
background: #22c6b3;
color: var(--light); background-color: #22C6B3;
text-transform: capitalize; text-transform: capitalize;
display: block; height: 180px;
position: relative; position: relative;
height: 210px; display: block;
margin-bottom: 60px; margin-bottom: -28px;
margin-top: 1%; }
border-radius: 10px; .Title{
text-align: center !important;
color: white !important;
margin-top: -86px !important;
font-size: 17px !important;
font-family: workSans-Regular;
} }
.header{
margin-top: -221px;
}
.chart-modal .modal-Wrapper { .chart-modal .modal-Wrapper {
--background: rgb(116, 108, 108) !important; --background: rgb(116, 108, 108) !important;
@ -219,29 +252,74 @@ height: 250px !important;
} }
.headerGrid{ .headerGrid{
margin-bottom: 550px !important; margin-top: 5px !important;
margin-top: 80px !important; margin-left: 15px !important;
margin-left: 15px !important; margin-right: 15px !important;
margin-right: 15px !important; background-color: white !important;
background-color:white !important; border-radius: 20px !important;
border-radius: 20px !important;
height: 250px !important; height: 250px !important;
border: 1px solid #d6d4d4;
} }
.bodyGrid{ .green-label{
margin-bottom: 550px !important; font-size: 12px;
margin-top: 20px !important; margin-top: -13px;
}
.green-amount{
font-size: 17px;
font-family: WorkSans-Bold;
margin-top: -3px;
}
.blue-label{
font-size: 12px;
margin-top: -13px;
}
.blue-amount{
font-size: 17px;
font-family: WorkSans-Bold;
margin-top: -4px;
}
.today-graph{
display:block !important;
height: 150px !important;
width: 300 !important;
margin-left: -70px !important;
}
.bodyGrid{
// margin-bottom: 550px !important;
// margin-top: 7px !important;
// margin-left: 15px !important;
// margin-right: 15px !important;
// background-color:white !important;
// border-radius: 20px !important;
// height: 270px !important;
// border: 1px solid #d6d4d4 !important;
margin-top: 7px !important;
margin-left: 15px !important; margin-left: 15px !important;
margin-right: 15px !important; margin-right: 15px !important;
background-color:white !important; background-color: white !important;
border-radius: 20px !important; border-radius: 20px !important;
height: 270px !important; height: 321px !important;
border: 1px solid #d6d4d4 !important;
} }
.labelGrid{ .labelGrid{
// margin-top: -30px !important;
// background-color:white !important;
// border-radius: 20px !important;
// height: 100px !important;
// border: 1px solid #d6d4d4;
margin-top: -30px !important; margin-top: -30px !important;
background-color:white !important; background-color: white !important;
border-radius: 20px !important; border-radius: 23px !important;
height: 100px !important; height: 100px !important;
border: 1px solid #d6d4d4;
padding-right: 0px;
} }
.ionSliders{ .ionSliders{
@ -313,13 +391,20 @@ height: 250px !important;
span { span {
text-align: center; // text-align: center;
display: block; // display: block;
padding-top: 8px; // padding-top: 8px;
font-family: workSans-Regular; // font-family: workSans-Regular;
// text-align: center;
display: block;
padding-top: 8px;
/* font-family: workSans-Regular; */
margin-left: -157px;
margin-top: -19px;
padding-bottom: 16px;
} }
@ -347,13 +432,6 @@ height: 250px !important;
.result-text-container { .result-text-container {
padding: 0; padding: 0;
@ -362,9 +440,8 @@ height: 250px !important;
position: absolute; position: absolute;
left: 50%; left: 38%;
top: 60%;
top: 50%;
display: block; display: block;
@ -377,12 +454,23 @@ height: 250px !important;
font-size: 25px; font-size: 25px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
color: black !important;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
p {
font-size: 20px;
color: black !important;
// font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span { span {
@ -393,7 +481,7 @@ height: 250px !important;
margin: 0 auto; margin: 0 auto;
font-size: 12px; font-size: 12px;
color: black !important;
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }

@ -9,6 +9,7 @@ import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response'; import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import * as moment from 'moment'; import * as moment from 'moment';
import { getDate } from 'date-fns'; import { getDate } from 'date-fns';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
@Component({ @Component({
selector: 'app-time-card-details', selector: 'app-time-card-details',
@ -16,13 +17,31 @@ import { getDate } from 'date-fns';
styleUrls: ['./time-card-details.component.scss'], styleUrls: ['./time-card-details.component.scss'],
}) })
export class TimeCardDetailsComponent implements OnInit { export class TimeCardDetailsComponent implements OnInit {
slideView: any;
sliderOne: any;
@ViewChild('slides') slides: IonSlides;
@ViewChild('slideWithNav') slideWithNav: IonSlides;
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay: true
};
month: any;
year: any;
preMonth: number;
nextMonth: any;
constructor( constructor(
public timeCardService: TimeCardService, public timeCardService: TimeCardService,
public common: CommonService, public common: CommonService,
public modalController: ModalController, public modalController: ModalController,
public sharedData: SharedDataService public sharedData: SharedDataService,
public ts: TranslatorService
) { } ) { }
@ViewChild('sliderRef') protected sliderRef: IonSlides; @ViewChild('sliderRef') protected sliderRef: IonSlides;
public activeSegment: any = 'time-card-summary'; public activeSegment: any = 'time-card-summary';
public showMore: any = true; public showMore: any = true;
public menuType: any; public menuType: any;
@ -45,17 +64,15 @@ export class TimeCardDetailsComponent implements OnInit {
public yearDate: any; public yearDate: any;
public absentDays: number; public absentDays: number;
public attendedDays: number; public attendedDays: number;
public futrueDays: number =0; public futrueDays = 0;
public totalAttendancePrecentage: number = 0; public totalAttendancePrecentage = 0;
public arrDaysAttendance: any = []; public arrDaysAttendance: any = [];
public arrDaysAbsent: any = []; public arrDaysAbsent: any = [];
public arrDaysOff: any = []; public arrDaysOff: any = [];
public monthTitle: string = moment().format('MMMM'); public monthTitle: string = moment().format('MMMM');
public yearTitle: string; public yearTitle: string;
public isChange: boolean = false; public isChange = false;
public activeMonth: any;
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
@ -90,34 +107,60 @@ export class TimeCardDetailsComponent implements OnInit {
}; };
ngOnInit() { ngOnInit() {
this.arrDaysOff = this.common.sharedService.getSharedData('calendarDayOffDateValue',false); this.nextMonth = new Date().getMonth() + 2;
this.arrDaysAttendance = this.common.sharedService.getSharedData('calendarAttendanceDateValue',false); this.preMonth = new Date().getMonth() - 2;
this.arrDaysAbsent = this.common.sharedService.getSharedData('calendarDaysAbsentDateValue',false); if (this.preMonth < 0) {
this.getTimeCardSummaryDetails(); this.preMonth = this.preMonth * - 1;
this.getDayHoursTypeDetails(); } else {
this.preMonth = this.preMonth * - 1;
}
this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
}
calendarConfig(month?, year?) {
console.log('ngOnInit');
this.month = month;
this.year = year;
this.arrDaysOff = this.common.sharedService.getSharedData('calendarDayOffDateValue', false);
this.arrDaysAttendance = this.common.sharedService.getSharedData('calendarAttendanceDateValue', false);
this.arrDaysAbsent = this.common.sharedService.getSharedData('calendarDaysAbsentDateValue', false);
this.getTimeCardSummaryDetails(month, year);
this.getDayHoursTypeDetails(month, year);
} }
public segmentChanged(event: any) { public segmentChanged(event: any) {
console.log('segmentChanged');
this.activeSegment = event.detail.value; this.activeSegment = event.detail.value;
if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) { if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) {
this.getDayHoursTypeDetails(); this.getDayHoursTypeDetails();
} else { } else {
this.rightIconActive = true; this.rightIconActive = true;
this.leftIconActive = false; this.leftIconActive = false;
} }
} }
public toggleButton() { public toggleButton() {
console.log('toggleButton');
this.showMore = !this.showMore; this.showMore = !this.showMore;
} }
public getDayHoursTypeDetails() { public getDayHoursTypeDetails(month?, year?) {
console.log('getDayHoursTypeDetails');
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest(); const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
// this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ'); // this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ');
// this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ'); // this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ');
this.monthName = moment().format('MMMM'); this.monthName = month; // moment().format('MMMM');
this.yearDate = moment().format('YYYY'); this.yearDate = year; // moment().format('YYYY');
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false); this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false); this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false); this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
@ -151,7 +194,7 @@ export class TimeCardDetailsComponent implements OnInit {
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => { this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
console.log(result.GetDayHoursTypeDetailsList); console.log(result.GetDayHoursTypeDetailsList);
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList,'RTP_IDs') this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'RTP_IDs');
this.countAllAttendDays(result.GetDayHoursTypeDetailsList); this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
this.loadMoreDateHoursData = false; this.loadMoreDateHoursData = false;
const daysDataLength = result.GetDayHoursTypeDetailsList.length; const daysDataLength = result.GetDayHoursTypeDetailsList.length;
@ -176,21 +219,23 @@ export class TimeCardDetailsComponent implements OnInit {
// isoTime:"09:00:00", // isoTime:"09:00:00",
// allDay: false // allDay: false
countAllAttendDays(allDays) { countAllAttendDays(allDays) {
console.log('countAllAttendDays');
for (let i = 0; i < allDays.length; i++) { for (let i = 0; i < allDays.length; i++) {
if (allDays[i].DAY_TYPE == "Off") { if (allDays[i].DAY_TYPE === 'Off') {
//offDay // offDay
this.arrDaysOff.push({startTime:new Date(allDays[i].SCHEDULE_DATE), this.arrDaysOff.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)}); endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else if (allDays[i].DAY_TYPE == "SCHEDULED") { } else if (allDays[i].DAY_TYPE === 'SCHEDULED') {
//attendace // attendace
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE), this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)}); endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else { } else {
//absent // absent
this.arrDaysAbsent.push( this.arrDaysAbsent.push(
{startTime: new Date(allDays[i].SCHEDULE_DATE), {startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE), endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: "09:00:00", isoTime: '09:00:00',
allDay: false allDay: false
} }
@ -199,14 +244,20 @@ export class TimeCardDetailsComponent implements OnInit {
} }
} }
public getTimeCardSummaryDetails() { public getTimeCardSummaryDetails(month?, year?) {
console.log('getTimeCardSummaryDetails');
const timeCardSummaryReqObj = new GetTimeCardSummaryRequest(); const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
if(this.isChange){ if (this.isChange) {
this.monthName = this.monthTitle; // this.monthName = this.monthTitle;
this.yearDate = this.yearTitle; // this.yearDate = this.yearTitle;
}else{ this.monthName = month;
this.monthName = moment().format('MMMM'); console.log('' + this.monthName);
this.yearDate = moment().format('YYYY'); this.yearDate = year;
console.log('' + this.yearDate);
} else {
this.monthName = month; // moment().format('MMMM');
this.yearDate = year; // moment().format('YYYY');
} }
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false); this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
@ -240,16 +291,27 @@ export class TimeCardDetailsComponent implements OnInit {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
this.timeCardSummaryData = result.GetTimeCardSummaryList[0]; this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
this.absentDays = this.timeCardSummaryData.ABSENT_DAYS; this.absentDays = this.timeCardSummaryData.ABSENT_DAYS;
// console.log("absent: "+ this.absentDays);
this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS; this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS;
this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS // console.log("attendedDays: "+ this.attendedDays);
this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS;
this.options = { this.options = {
cutoutPercentage: 80, cutoutPercentage: 80,
tooltips: { enabled: false }, tooltips: { enabled: false },
legend: { display: false } legend: { display: false }
}; };
if(this.absentDays ==0 && this.attendedDays ==0){ if (this.absentDays === 0 && this.attendedDays === 0) {
this.futrueDays = this.totalAttendancePrecentage; this.futrueDays = this.totalAttendancePrecentage;
} }
//////////////////////////////////////////////
// console.log("absent: "+ this.absentDays);
// console.log("attend: "+ this.attendedDays);
// console.log("future"+ this.futrueDays);
// in chart "this.futrueDays"
// in calender "this.futrueDays == white"
// timecard sumery return not match data with GET_DAY_HOURS_TYPE_DETAILS
this.data = { this.data = {
datasets: [ datasets: [
{ {
@ -296,6 +358,7 @@ export class TimeCardDetailsComponent implements OnInit {
} }
slideChanged(ev: any) { slideChanged(ev: any) {
console.log('slideChanged');
const prom1 = this.sliderRef.isBeginning(); const prom1 = this.sliderRef.isBeginning();
const prom2 = this.sliderRef.isEnd(); const prom2 = this.sliderRef.isEnd();
@ -312,6 +375,8 @@ export class TimeCardDetailsComponent implements OnInit {
} }
showShiftDetails(origin: string) { showShiftDetails(origin: string) {
console.log('showShiftDetails');
this.sliderRef.getActiveIndex().then((index: number) => { this.sliderRef.getActiveIndex().then((index: number) => {
this.selectedShift = this.dayHoursData[index]; this.selectedShift = this.dayHoursData[index];
this.selectedShift.origin = origin; this.selectedShift.origin = origin;
@ -320,29 +385,134 @@ export class TimeCardDetailsComponent implements OnInit {
}); });
} }
/////////////////////////////////////////////////// here
// slideNext(object, slideView) {
// if (this.loadMoreDateHoursData && this.loadMore) {
// this.dayAndHoursPageNumber++;
// this.getDayHoursTypeDetails();
// }
// this.sliderRef.slideNext();
// this.sliderRef.getActiveIndex().then((index: number) => {
// if (index === (this.dayHoursData.length - 1)) {
// this.loadMoreDateHoursData = true;
// }
// });
// }
// slidePrev(object, slideView) {
// this.sliderRef.slidePrev();
// }
/////////////////////////////////
nextSlide() { nextSlide() {
if (this.loadMoreDateHoursData && this.loadMore) { let currentYear = new Date().getFullYear();
this.dayAndHoursPageNumber++; if (this.nextMonth > 12) {
this.getDayHoursTypeDetails(); currentYear = currentYear + 1;
this.nextMonth = 1;
} }
this.sliderRef.slideNext(); this.calendarConfig(this.getMonthName(this.nextMonth) , currentYear);
this.sliderRef.getActiveIndex().then((index: number) => { this.nextMonth = this.nextMonth + 1;
if (index === (this.dayHoursData.length - 1)) { this.preMonth = this.preMonth + 1;
this.loadMoreDateHoursData = true;
}
});
} }
previousSlide() { previousSlide() {
this.sliderRef.slidePrev(); let currentYear = new Date().getFullYear();
if (this.preMonth === 0) {
currentYear = currentYear - 1;
this.preMonth = 12;
}
this.calendarConfig(this.getMonthName(this.preMonth) , currentYear);
this.preMonth = this.preMonth - 1;
this.nextMonth = this.nextMonth - 1;
} }
changeMonthTitle(title){ changeMonthTitle(title) {
console.log('changeMonthTitle');
this.monthTitle = title; this.monthTitle = title;
this.isChange = true; this.isChange = true;
this.getTimeCardSummaryDetails(); this.getTimeCardSummaryDetails();
} }
changeYear(year){ changeYear(year) {
console.log('changeYear');
this.yearTitle = year; this.yearTitle = year;
} }
///////////////////////////////////////////////////////////////////////// here
getHeaderMonth(date: any) {
return this.getMonthName(date.getMonth() + 1) + ' ' + date.getFullYear();
}
public getMonthName(value: any): any {
switch (value) {
case 1:
return 'January';
case 2:
return 'February';
case 3:
return 'March';
case 4:
return 'April';
case 5:
return 'May';
case 6:
return 'June';
case 7:
return 'July';
case 8:
return 'August';
case 9 :
return 'September';
case 10:
return 'October';
case 11:
return 'November';
case 12:
return 'December';
}
}
// getHeaderMonth(date: any) {
// if (monthName = "December") {
// }
// return monthName;
// else
// return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
// }
// public getMonthName(value: any): any {
// switch (value) {
// case "Januray":
// return "February";
// case "February":
// return "March";
// case "March":
// return "April";
// case "April":
// return "May";
// case "May":
// return "June";
// case "June":
// return "July";
// case "July":
// return "August";
// case "August":
// return "September" ;
// case "September" :
// return "October";
// case "October":
// return "November";
// case "November":
// return "December";
// case "December":
// return "January";
// }
// }
} }

@ -1020,6 +1020,22 @@
"attendance": { "attendance": {
"ar": "الحضور", "ar": "الحضور",
"en": "Attendance" "en": "Attendance"
},
"monthly-attendance": {
"ar": "الحضور الشهري",
"en": "Monthly Attendance"
},
"monthly-attendance-calendar": {
"ar": "تقويم الحضور الشهري",
"en": "Monthly Attendance Calendar"
},
"present": {
"ar": "حضور",
"en": "Present"
},
"absent": {
"ar": "غياب",
"en": "Absent"
} }
}, },
"vacation-rule": { "vacation-rule": {
@ -2152,12 +2168,42 @@
"en": "Late In", "en": "Late In",
"ar":"Late In" "ar":"Late In"
}, },
"shortage":{
"en": "Shortage",
"ar":"عجز"
},
"excess":{
"en": "Excess",
"ar":"فائض"
},
"early-out":{
"en": "Early Out",
"ar":""
},
"today-time-left":{ "today-time-left":{
"en": "TODAY TIME LEFT", "en": "TODAY TIME LEFT",
"ar":"TODAY TIME LEFT" "ar":"TODAY TIME LEFT"
}, },
"shortage-hours":{
"en": "SHORTAGE HOURS",
"ar":""
},
"schedule":{
"en": "SCHEDULE",
"ar":""
},
"off-days":{
"en": "OFF DAYS",
"ar":"ايام الراحه"
},
"non-analyzed":{
"en": "NON ANALYZED",
"ar":""
},
"attendance-statistics":{
"en": "Attendance Statistics",
"ar":""
},
"confirm-alert1":{ "confirm-alert1":{
"en": "Are you sure, you want to", "en": "Are you sure, you want to",
"ar":"Are you sure, you want to" "ar":"Are you sure, you want to"
@ -2171,7 +2217,7 @@
"ar":"You did't complate today shift" "ar":"You did't complate today shift"
}, },
"shift-time":{ "shift-time":{
"en":"SHIFT TIME", "en":"Shift Time",
"ar":"SHIFT TIME" "ar":"SHIFT TIME"
} }
}, },

@ -1003,6 +1003,10 @@ border:0px
} }
gfhfhg{
}
@ -1017,6 +1021,15 @@ border:0px
--border-radius: 0.4cm; --border-radius: 0.4cm;
} }
.calendar-modal {
--height: 15cm !important;
--width: 88% !important;
--border-radius: 0.4cm;
// height: 544px !important;
// width: 332px !important;
}
.monthview-datetable tbody td{ .monthview-datetable tbody td{
border:0 !important; border:0 !important;

Loading…
Cancel
Save