diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html index a4cb0c8c..07960e77 100644 --- a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html @@ -3,6 +3,7 @@ [monthviewEventDetailTemplate]="template" [calendarMode]="calendar.mode" [currentDate]="currentAvailableAppoDate" +[lockSwipes]="true" (onCurrentDateChanged)="onCurrentDateChanged($event)" (onTimeSelected)="onDayClicked($event)"> diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts index 18b63a04..8acfdf27 100644 --- a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts @@ -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(); } + + } diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html index cefe1f3f..03d27609 100644 --- a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html @@ -1,5 +1,5 @@ - +
@@ -11,10 +11,8 @@
-

74%

- +

{{percentage}}

Completed



-
@@ -23,76 +21,156 @@
-
-

{{today}}

-

{{todayDate}}

-

{{monthDate}}

-

{{month}}

-
-

Permenent

-
+
+ + + +

{{nameDay}}

+
+ +

{{day}}

+
+ +

{{nameMonth}}

+
+ +

{{year}}

+
+ +

{{ts.trPK('attendance','present')}}

+
+ + + +
-
- - +
+ + + +

{{shiftTime}}

+ +

{{ts.trPK('attendance-tracking','shift-time')}}

+
+
+ +

{{scheduled}}

+ +

{{ts.trPK('attendance-tracking','regular')}}

+
+
+
+ + + +

{{startDate}}

+ +

{{ts.trPK('attendance-tracking','check-in')}}

+
+
+ +

{{endDate}}

+ +

{{ts.trPK('attendance-tracking','check-out')}}

+
+
+
+ + + +

{{lateIn}}

+ +

{{ts.trPK('attendance-tracking','late-in')}}

+
+
+ +

{{excess}}

+ +

{{ts.trPK('attendance-tracking','excess')}}

+
+
+
+ + + +

{{shortage}}

+ +

{{ts.trPK('attendance-tracking','shortage')}}

+
+
+ +

{{earlyOut}}

+ +

{{ts.trPK('attendance-tracking','early-out')}}

+
+
+
+ + + + + + + -
+
diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss index 5c5bea3f..c0ca54c1 100644 --- a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss @@ -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; } } - \ No newline at end of file + +.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; + } \ No newline at end of file diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts index 640d4f8b..3f3fb1d8 100644 --- a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts @@ -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]; } diff --git a/Mohem/src/app/time-card/shift-details/shift-details.component.ts b/Mohem/src/app/time-card/shift-details/shift-details.component.ts index 1362b9ff..cd3cb9f2 100644 --- a/Mohem/src/app/time-card/shift-details/shift-details.component.ts +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.ts @@ -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); diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.html b/Mohem/src/app/time-card/time-card-details/time-card-details.component.html index 167d73c6..71f0c3ef 100644 --- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.html +++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.html @@ -1,13 +1,13 @@ - + - + -
+ + + +
-

{{monthTitle}}

- - - + + + + {{ts.trPK('attendance','monthly-attendance')}} +
+
+
+ + + +
+ + + + + +

{{month}}

+ +
+ +

{{year}}

+
+ + + +
+
+ + + + + + + +
@@ -412,41 +455,73 @@
-
- +
- +
+
--> +
+ + + + + + + + +
+
+ + + + + + + +
+
+
-
+
- + -

{{timeCardSummaryData.SCHEDULE_DAYS}}

+

{{timeCardSummaryData.SCHEDULE_DAYS}}

0

@@ -456,29 +531,29 @@ - + -

{{timeCardSummaryData.OFF_DAYS}}

-

0

+

{{timeCardSummaryData.OFF_DAYS}}

+

0

- -

{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}

-

0

+ +

{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}

+

0

- -

{{timeCardSummaryData.SHORTAGE_HRS}}

+ +

{{timeCardSummaryData.SHORTAGE_HRS}}

0

@@ -487,6 +562,7 @@
+

{{ts.trPK('attendance','monthly-attendance-calendar')}}

diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss b/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss index 3c3280b4..ec026364 100644 --- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss +++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss @@ -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; } } diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts b/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts index f2d97e90..28a94ae6 100644 --- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts +++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts @@ -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"; + + // } + // } } diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index 9d52c4fd..770bcea9 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -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" } }, diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss index e71da148..638830d6 100644 --- a/Mohem/src/theme/styles.scss +++ b/Mohem/src/theme/styles.scss @@ -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;