edit monthley attendance

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

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

@ -14,7 +14,7 @@ import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-re
@Component({
selector: 'app-circle-calendar',
templateUrl: './circle-calendar.component.html',
styleUrls: ['./circle-calendar.component.scss'],
styleUrls: ['./circle-calendar.component.scss']
})
export class CircleCalendarComponent implements OnInit {
@Input() eventsdateDayOff: any = [];
@ -170,6 +170,7 @@ export class CircleCalendarComponent implements OnInit {
}
onCurrentDateChanged(event) {
console.log("onCurrentDateChanged");
if (this.isFirst) {
const today = new Date();
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({
component: DateInfoModalComponent,
showBackdrop: true,
backdropDismiss: true,
componentProps: {
TODAYDATE: todayDate
TODAYDATE: todayDate,
SHIFTDETAILS: shiftDetails
}
});
modal.cssClass = "advanced-search-modal";
modal.cssClass = "calendar-modal";
await modal.present();
}
@ -298,9 +300,9 @@ export class CircleCalendarComponent implements OnInit {
getScheduleShiftDetails() {
getScheduleShiftDetails(RTP_ID) {
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_LIMIT = 10;
console.log(GetShiftDetailRequestObject);
@ -308,6 +310,7 @@ export class CircleCalendarComponent implements OnInit {
if (this.common.validResponse(result)) {
console.log(result);
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/////////////////////////
public getDayHoursTypeDetails(month, year) {
this.monthTitle.emit(month);
this.currentYear.emit(year);
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
@ -397,7 +401,9 @@ export class CircleCalendarComponent implements OnInit {
fullDate = allData[i].SCHEDULE_DATE.split(" ")
if(fullDate[0] == date){
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();
}
}

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

@ -1,26 +1,37 @@
.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%);
h2 {
font-size: 38px;
font-size: 25px;
font-family: WorkSans-Bold;
// font-family: WorkSans-Bold;
font-weight: bold;
margin: 0 auto;
@ -39,6 +50,114 @@
font-size: 12px;
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 { ModalController, NavParams } from '@ionic/angular';
import { Component, OnInit, Input, ViewChild } from '@angular/core';
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({
selector: 'app-date-info-modal',
@ -7,62 +9,226 @@ import { ModalController, NavParams } from '@ionic/angular';
styleUrls: ['./date-info-modal.component.scss'],
})
export class DateInfoModalComponent implements OnInit {
[x: string]: any;
gaugeType = "full";
gaugeValue = 28.3;
gaugeLabel = "Days";
@Input() TODAYDATE: any;
@Input() SHIFTDETAILS:any;
today: any;
todayDate: any;
month: any;
monthDate: any;
constructor(public modalController: ModalController, public navParams: NavParams) { }
ngOnInit() {
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);
}
excess: any;
shortage:any;
lateIn:any;
scheduled:any;
earlyOut:any;
shiftTime:any;
startDate:any;
endDate:any;
shift:any;
percentage:any;
data:any;
scheduleDate:any;
tests:any;
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 = {
cutoutPercentage: 80,
cutoutPercentage: 85,
tooltips: { enabled: false },
legend: { display: false }
};
constructor(public modalController: ModalController, public navParams: NavParams, public ts:TranslatorService,
) { }
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)
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)
// 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
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);
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 data = {
datasets: [
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()];
data: [120, 50],
}
// @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
// public options = {
// cutoutPercentage: 80,
backgroundColor: [
// tooltips: { enabled: false },
'#094875'
],
// legend: { display: false }
borderWidth: 2
// };
}]
//
//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,13 +14,14 @@ import * as moment from 'moment';
})
export class ShiftDetailsComponent implements OnInit {
public selectedShift: any;
// public selectedShiftDay: any;
public shiftDetailsData: any = [];
public swipeDetailsData: any = [];
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
public sharedData: SharedDataService) { }
ngOnInit() {
this.selectedShift = this.sharedData.getSharedData('selectedShift', false);
console.log(this.selectedShift);
@ -29,9 +30,18 @@ export class ShiftDetailsComponent implements OnInit {
} else if (this.selectedShift.origin === 'shiftSwipes') {
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() {
console.log("getScheduleShiftDetails");
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.RTP_ID;
GetShiftDetailRequestObject.P_PAGE_NUM = 1;
@ -41,11 +51,14 @@ export class ShiftDetailsComponent implements OnInit {
if (this.common.validResponse(result)) {
console.log(result);
this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
// this.common.sharedService.setSharedData(this.shiftDetailsData,'shiftDetailsData');
}
});
})
}
getSwipesDetails() {
console.log("getSwipesDetails");
const GetSwipesRequestObject = new GetSwipesRequest();
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);

@ -1,13 +1,13 @@
<ion-header>
<!-- <ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/eit/homepage"></ion-back-button>
</ion-buttons>
<ion-title color="light" >My Time Card</ion-title>
</ion-toolbar>
</ion-header>
</ion-header> -->
<ion-content>
<!-- <ion-content> -->
<!-- <div class="time-card-details-container">
<ion-segment
(ionChange)="segmentChanged($event)"
@ -381,12 +381,55 @@
<!------------------------------------------ ENAD CODE ------------------------------------------->
<div class="header-div">
<ion-content class="colorBG">
<div class="header-div">
<p style="position: absolute; left: 40%; bottom: 65%;">{{monthTitle}}</p>
<ion-slides>
<ion-slide>
<ion-grid class="headerGrid">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<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;">
<!-- <ngx-gauge
[type]="gaugeType"
@ -397,14 +440,14 @@
<div class="request-heading">
<span>Open Request Analysis</span>
<span> {{ts.trPK('attendance-tracking','attendance-statistics')}}</span>
</div>
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}} Days</h2>
<h2>{{totalAttendancePrecentage}}</h2>
<p>{{ts.trPK('absenceList','days')}}</p>
<!-- <span>TOTAL <br> OPEN REQUEST</span> -->
</div>
@ -412,41 +455,73 @@
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 79%;
bottom: 35px;
<!-- <div style="position: relative;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
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 style="position: relative;
left: 79%;
bottom: 10px;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
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 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 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-slide>
</ion-slides>
</div>
</div>
<div style="margin-top: 45%;">
<div style="margin-top: 10%;">
<ion-grid>
<ion-row>
<ion-col>
<ion-grid class="labelGrid">
<ion-row>
<ion-col>
<label style="font-size: 13px;">SCHEDULE</label>
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','schedule')}}</label>
</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>
</ion-col>
</ion-row>
@ -456,29 +531,29 @@
<ion-grid class="labelGrid">
<ion-row>
<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-row>
<ion-row>
<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: 45%; font-size: 25px;">0</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: 37%; font-size: 25px;">0</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<label style="font-size: 13px;">NON ANALYZED</label>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','non-analyzed')}}</label>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 36%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 36%; font-size: 25px;">0</h2>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<label style="font-size: 13px;">SHORTAGE HOURS</label>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 18%; font-size: 25px;">{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','shortage-hours')}}</label>
<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>
</ion-grid>
</ion-col>
@ -487,6 +562,7 @@
</div>
<div >
<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>
</ion-grid>
</div>

@ -24,6 +24,30 @@ ion-title{
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{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px;
@ -154,23 +178,32 @@ ion-title{
//////////////////////////////////////////ENAD CODE////////////////////////////////////////////
.colorBG {
.colorBG{
--background: #f0efef;
}
}
.header-div {
background: #22c6b3;
color: var(--light);
background-color: #22C6B3;
text-transform: capitalize;
display: block;
height: 180px;
position: relative;
height: 210px;
margin-bottom: 60px;
margin-top: 1%;
border-radius: 10px;
display: block;
margin-bottom: -28px;
}
.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 {
--background: rgb(116, 108, 108) !important;
@ -219,29 +252,74 @@ height: 250px !important;
}
.headerGrid{
margin-bottom: 550px !important;
margin-top: 80px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
margin-top: 5px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color: white !important;
border-radius: 20px !important;
height: 250px !important;
border: 1px solid #d6d4d4;
}
.bodyGrid{
margin-bottom: 550px !important;
margin-top: 20px !important;
.green-label{
font-size: 12px;
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-right: 15px !important;
background-color:white !important;
background-color: white !important;
border-radius: 20px !important;
height: 270px !important;
height: 321px !important;
border: 1px solid #d6d4d4 !important;
}
.labelGrid{
// margin-top: -30px !important;
// background-color:white !important;
// border-radius: 20px !important;
// height: 100px !important;
// border: 1px solid #d6d4d4;
margin-top: -30px !important;
background-color:white !important;
border-radius: 20px !important;
height: 100px !important;
background-color: white !important;
border-radius: 23px !important;
height: 100px !important;
border: 1px solid #d6d4d4;
padding-right: 0px;
}
.ionSliders{
@ -313,13 +391,20 @@ height: 250px !important;
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 {
padding: 0;
@ -362,9 +440,8 @@ height: 250px !important;
position: absolute;
left: 50%;
top: 50%;
left: 38%;
top: 60%;
display: block;
@ -377,12 +454,23 @@ height: 250px !important;
font-size: 25px;
font-family: WorkSans-Bold;
color: black !important;
margin: 0 auto;
line-height: 36px;
}
p {
font-size: 20px;
color: black !important;
// font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
@ -393,7 +481,7 @@ height: 250px !important;
margin: 0 auto;
font-size: 12px;
color: black !important;
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 * as moment from 'moment';
import { getDate } from 'date-fns';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
@Component({
selector: 'app-time-card-details',
@ -16,13 +17,31 @@ import { getDate } from 'date-fns';
styleUrls: ['./time-card-details.component.scss'],
})
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(
public timeCardService: TimeCardService,
public common: CommonService,
public modalController: ModalController,
public sharedData: SharedDataService
public sharedData: SharedDataService,
public ts: TranslatorService
) { }
@ViewChild('sliderRef') protected sliderRef: IonSlides;
public activeSegment: any = 'time-card-summary';
public showMore: any = true;
public menuType: any;
@ -45,17 +64,15 @@ export class TimeCardDetailsComponent implements OnInit {
public yearDate: any;
public absentDays: number;
public attendedDays: number;
public futrueDays: number =0;
public totalAttendancePrecentage: number = 0;
public futrueDays = 0;
public totalAttendancePrecentage = 0;
public arrDaysAttendance: any = [];
public arrDaysAbsent: any = [];
public arrDaysOff: any = [];
public monthTitle: string = moment().format('MMMM');
public yearTitle: string;
public isChange: boolean = false;
public isChange = false;
public activeMonth: any;
public options = {
cutoutPercentage: 80,
@ -90,34 +107,60 @@ export class TimeCardDetailsComponent implements OnInit {
};
ngOnInit() {
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();
this.getDayHoursTypeDetails();
this.nextMonth = new Date().getMonth() + 2;
this.preMonth = new Date().getMonth() - 2;
if (this.preMonth < 0) {
this.preMonth = this.preMonth * - 1;
} 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) {
console.log('segmentChanged');
this.activeSegment = event.detail.value;
if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) {
this.getDayHoursTypeDetails();
} else {
this.rightIconActive = true;
this.leftIconActive = false;
}
}
public toggleButton() {
console.log('toggleButton');
this.showMore = !this.showMore;
}
public getDayHoursTypeDetails() {
public getDayHoursTypeDetails(month?, year?) {
console.log('getDayHoursTypeDetails');
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
// this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ');
// this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ');
this.monthName = moment().format('MMMM');
this.yearDate = moment().format('YYYY');
this.monthName = month; // moment().format('MMMM');
this.yearDate = year; // moment().format('YYYY');
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, 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) => {
if (this.common.validResponse(result)) {
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.loadMoreDateHoursData = false;
const daysDataLength = result.GetDayHoursTypeDetailsList.length;
@ -176,39 +219,47 @@ export class TimeCardDetailsComponent implements OnInit {
// isoTime:"09:00:00",
// allDay: false
countAllAttendDays(allDays) {
console.log('countAllAttendDays');
for (let i = 0; i < allDays.length; i++) {
if (allDays[i].DAY_TYPE == "Off") {
//offDay
this.arrDaysOff.push({startTime:new Date(allDays[i].SCHEDULE_DATE),
if (allDays[i].DAY_TYPE === 'Off') {
// offDay
this.arrDaysOff.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else if (allDays[i].DAY_TYPE == "SCHEDULED") {
//attendace
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
} else if (allDays[i].DAY_TYPE === 'SCHEDULED') {
// attendace
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else {
//absent
// absent
this.arrDaysAbsent.push(
{startTime: new Date(allDays[i].SCHEDULE_DATE),
{startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: "09:00:00",
isoTime: '09:00:00',
allDay: false
}
);
}
}
}
public getTimeCardSummaryDetails() {
public getTimeCardSummaryDetails(month?, year?) {
console.log('getTimeCardSummaryDetails');
const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
if(this.isChange){
this.monthName = this.monthTitle;
this.yearDate = this.yearTitle;
}else{
this.monthName = moment().format('MMMM');
this.yearDate = moment().format('YYYY');
if (this.isChange) {
// this.monthName = this.monthTitle;
// this.yearDate = this.yearTitle;
this.monthName = month;
console.log('' + this.monthName);
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.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
@ -240,16 +291,27 @@ export class TimeCardDetailsComponent implements OnInit {
if (this.common.validResponse(result)) {
this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
this.absentDays = this.timeCardSummaryData.ABSENT_DAYS;
// console.log("absent: "+ this.absentDays);
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 = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
if(this.absentDays ==0 && this.attendedDays ==0){
if (this.absentDays === 0 && this.attendedDays === 0) {
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 = {
datasets: [
{
@ -296,6 +358,7 @@ export class TimeCardDetailsComponent implements OnInit {
}
slideChanged(ev: any) {
console.log('slideChanged');
const prom1 = this.sliderRef.isBeginning();
const prom2 = this.sliderRef.isEnd();
@ -312,6 +375,8 @@ export class TimeCardDetailsComponent implements OnInit {
}
showShiftDetails(origin: string) {
console.log('showShiftDetails');
this.sliderRef.getActiveIndex().then((index: number) => {
this.selectedShift = this.dayHoursData[index];
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() {
if (this.loadMoreDateHoursData && this.loadMore) {
this.dayAndHoursPageNumber++;
this.getDayHoursTypeDetails();
let currentYear = new Date().getFullYear();
if (this.nextMonth > 12) {
currentYear = currentYear + 1;
this.nextMonth = 1;
}
this.sliderRef.slideNext();
this.sliderRef.getActiveIndex().then((index: number) => {
if (index === (this.dayHoursData.length - 1)) {
this.loadMoreDateHoursData = true;
}
});
this.calendarConfig(this.getMonthName(this.nextMonth) , currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.preMonth + 1;
}
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.isChange = true;
this.getTimeCardSummaryDetails();
}
changeYear(year){
changeYear(year) {
console.log('changeYear');
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": {
"ar": "الحضور",
"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": {
@ -2152,12 +2168,42 @@
"en": "Late In",
"ar":"Late In"
},
"shortage":{
"en": "Shortage",
"ar":"عجز"
},
"excess":{
"en": "Excess",
"ar":"فائض"
},
"early-out":{
"en": "Early Out",
"ar":""
},
"today-time-left":{
"en": "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":{
"en": "Are you sure, you want to",
"ar":"Are you sure, you want to"
@ -2171,7 +2217,7 @@
"ar":"You did't complate today shift"
},
"shift-time":{
"en":"SHIFT TIME",
"en":"Shift Time",
"ar":"SHIFT TIME"
}
},

@ -1003,6 +1003,10 @@ border:0px
}
gfhfhg{
}
@ -1017,6 +1021,15 @@ border:0px
--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{
border:0 !important;

Loading…
Cancel
Save