diff --git a/Mohem/src/app/attendance-tracking/home/home.component.html b/Mohem/src/app/attendance-tracking/home/home.component.html index b99c4ead..1a28a602 100644 --- a/Mohem/src/app/attendance-tracking/home/home.component.html +++ b/Mohem/src/app/attendance-tracking/home/home.component.html @@ -10,21 +10,41 @@
- - {{cuurentDate}}
- {{ts.trPK('attendance-tracking','today-time-left')}} - - - -
+ {{curentDate}}
+ {{ts.trPK('attendance-tracking','today-time-left')}} + +
+ + +
+
-
- {{ts.trPK('attendance-tracking','shift-time')}}

@@ -55,7 +75,5 @@
- -
\ No newline at end of file diff --git a/Mohem/src/app/attendance-tracking/home/home.component.scss b/Mohem/src/app/attendance-tracking/home/home.component.scss index 3df2c17a..f09a8a87 100644 --- a/Mohem/src/app/attendance-tracking/home/home.component.scss +++ b/Mohem/src/app/attendance-tracking/home/home.component.scss @@ -1,7 +1,7 @@ .timer-chart{ padding-top:18px; background: #094773; -height: 50%; +// height: 50%; text-align: center; } @@ -50,3 +50,8 @@ text-align: center; border-right: var(--lightblue) solid 1px; } +.fixed-shift-timer{ + margin-top: -50px; + margin-bottom: -30px; +} + diff --git a/Mohem/src/app/attendance-tracking/home/home.component.ts b/Mohem/src/app/attendance-tracking/home/home.component.ts index 276b32ab..a872b22a 100644 --- a/Mohem/src/app/attendance-tracking/home/home.component.ts +++ b/Mohem/src/app/attendance-tracking/home/home.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit, EventEmitter, Output } from '@angular/core'; -import { CommonService } from "src/app/hmg-common/services/common/common.service"; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; -import {AttendScanService} from '../../hmg-common/services/attend-services/attend-scan.service' +import {AttendScanService} from '../../hmg-common/services/attend-services/attend-scan.service'; import { AttendanceTrackingResponse } from 'src/app/hmg-common/services/dashbored/attendance-tracking.response'; @Component({ selector: 'app-home', @@ -10,76 +10,125 @@ import { AttendanceTrackingResponse } from 'src/app/hmg-common/services/dashbore styleUrls: ['./home.component.scss'], }) export class HomeComponent implements OnInit { - attendanceTrackingList:any =[]; - cuurentDate:any; + attendanceTrackingList: any = []; + curentDate: any; direction: string; - isCheckOut:boolean= false; + isCheckOut = false; + public runTimer = false; + public hasStarted = false; + public hasFinished = false; + public remainingTime: any; + public scheduledTime: any; + public isCheckedIn = undefined; + public displayTime: any; + public percent: any; constructor( - public cs:CommonService, - public db:DashboredService, - public ts:TranslatorService, - public AttendScanService:AttendScanService + public cs: CommonService, + public db: DashboredService, + public ts: TranslatorService, + public attendScanService: AttendScanService ) { } ngOnInit() { - this.attendanceTracking(); - this.cuurentDate = new Date(); + this.showAttendanceTracking(); + this.curentDate = new Date(); this.direction = TranslatorService.getCurrentLanguageName(); - this.cuurentDate =this.getHeaderDate(this.cuurentDate); + this.curentDate = this.getHeaderDate(this.curentDate); } - // call services - public attendanceTracking(){ - this.db.getAttendanceTracking(()=> {},this.ts.trPK('general', 'retry')).subscribe( - (result)=>{ - console.log("result: "+result); - this.handleRespondGetAttendanceTracking(result); + initTimer() { + this.runTimer = false; + this.hasStarted = false; + this.hasFinished = false; + this.percent = 100 - ((this.remainingTime / this.scheduledTime) * 100); + this.displayTime = this.getSecondsAsDigitalClock(this.remainingTime); + this.startTimer(); + } - } - ) + startTimer() { + this.runTimer = true; + this.hasStarted = true; + this.timerTick(); } + timerTick() { + setTimeout(() => { + if (!this.runTimer) { return; } + this.remainingTime--; + this.displayTime = this.getSecondsAsDigitalClock(this.remainingTime); + if (this.remainingTime > 0) { + const newPercent: any = ((this.remainingTime / this.scheduledTime) * 100).toFixed(2); + this.percent = 100 - newPercent; + this.timerTick(); + } else { + this.hasFinished = true; + } + }, 1000); + } - public handleRespondGetAttendanceTracking(result){ - if (this.cs.validResponse(result)) { - if(result.GetAttendanceTrackingList != null){ - this.attendanceTrackingList=result.GetAttendanceTrackingList; - //**condition to check is checkout or not to display PUSE Button** - if(this.attendanceTrackingList.P_REMAINING_HOURS ==='0'){ - this.isCheckOut=true; - }else{ - this.isCheckOut=false; - } - } - } + getSecondsAsDigitalClock(inputSeconds: number) { + const secNum = parseInt(inputSeconds.toString(), 10); // don't forget the second param + const hours = Math.floor(secNum / 3600); + const minutes = Math.floor((secNum - (hours * 3600)) / 60); + const seconds = secNum - (hours * 3600) - (minutes * 60); + let hoursString = ''; + let minutesString = ''; + let secondsString = ''; + hoursString = (hours < 10) ? '0' + hours : hours.toString(); + minutesString = (minutes < 10) ? '0' + minutes : minutes.toString(); + secondsString = (seconds < 10) ? '0' + seconds : seconds.toString(); + return hoursString + ':' + minutesString + ':' + secondsString; + } + convertInSeconds(time: any) { + const hours = parseInt(time[0], 10); + const minutes = parseInt(time[1], 10); + let seconds = parseInt(time[2], 10); + seconds = seconds + (hours * 60 * 60) + (minutes * 60); + return seconds; } - getHeaderDate(date: any) { - if (this.direction == "en") { - return this.cs.getMonthName(date.getMonth() + 1) + ", " + date.getDate() +" "+ date.getFullYear(); - } else { - return this.cs.getMonthNameAr(date.getMonth() + 1) + ", " + date.getDate() +" "+ date.getFullYear(); + convertAndAssignTime(data) { + console.log(data); + this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':')); + this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':')); + this.isCheckedIn = this.remainingTime === this.scheduledTime ? false : true; + this.initTimer(); + console.log('remainingTime: ' + this.remainingTime); + console.log('scheduledTime: ' + this.scheduledTime); + console.log('isCheckedIn: ' + this.isCheckedIn); + } + showAttendanceTracking() { + this.db.getAttendanceTracking() .subscribe((result: AttendanceTrackingResponse) => { + if (this.cs.validResponse(result)) { + const key = 'GetAttendanceTrackingList'; + this.convertAndAssignTime(result[key]); + this.attendanceTrackingList = result[key]; + } + }); + } + + getHeaderDate(date: any) { + if (this.direction === 'en') { + return this.cs.getMonthName(date.getMonth() + 1) + ', ' + date.getDate() + ' ' + date.getFullYear(); + } else { + return this.cs.getMonthNameAr(date.getMonth() + 1) + ', ' + date.getDate() + ' ' + date.getFullYear(); } } -openDialog(){ - +openDialog() { this.cs.confirmAlertDialogAttendance( () => { - //to open scan(); - //this.cs.openScan(); - this.AttendScanService.getDeviceLocation(); - }, this.ts.trPK('general', 'ok'), - () => {}, this.ts.trPK('general', 'cancel'), + this.attendScanService.getDeviceLocation(); + }, this.ts.trPK('general', 'ok'), + () => {}, this.ts.trPK('general', 'cancel'), this.ts.trPK('vacation-rule', 'confirmation'), - this.ts.trPK('attendance-tracking', 'confirm-alert3') - + "
"+"
"+ this.ts.trPK('attendance-tracking', 'confirm-alert1') + this.ts.trPK('attendance-tracking', 'confirm-alert3') + + '
' + '
' + this.ts.trPK('attendance-tracking', 'confirm-alert1') + this.ts.trPK('attendance-tracking', 'confirm-alert2') ); - } -}// end home +} diff --git a/Mohem/src/app/hmg-common/hmg-common.module.ts b/Mohem/src/app/hmg-common/hmg-common.module.ts index a3acc824..44dbe250 100644 --- a/Mohem/src/app/hmg-common/hmg-common.module.ts +++ b/Mohem/src/app/hmg-common/hmg-common.module.ts @@ -100,7 +100,7 @@ import {DashboredService} from './services/dashbored/dashbored.service' import {FabButtonComponent} from './ui/fab-button/fab-button.component' import { AttendScanService } from './services/attend-services/attend-scan.service'; import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; - +import { NgCircleProgressModule } from 'ng-circle-progress'; @NgModule({ imports: [ CommonModule, @@ -110,7 +110,8 @@ import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; HttpClientModule, NgxChartsModule, ListboxModule, - PdfViewerModule + PdfViewerModule, + NgCircleProgressModule.forRoot() ], declarations: [ FabButtonComponent, @@ -228,7 +229,8 @@ import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; AccordinCustomComponent, StatsButtonComponent, ServicesButtonComponent, - ConfirmLoginComponent + ConfirmLoginComponent, + NgCircleProgressModule ], providers: [ AttendScanService, diff --git a/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.scss b/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.scss index 811e2e55..e6cfd86d 100644 --- a/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.scss +++ b/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.scss @@ -7,8 +7,8 @@ ion-fab-button{ background-size: cover; background-position: top right; border-radius: 50%; - height:110px; - width: 110px; + height:112px; + width: 112px; } .cbookApointmentBtn{ // --background:transparent !important; @@ -114,32 +114,18 @@ button-inner{ } .wrapper .circle { - width: 3.3cm; - height: 3.3cm; - position: absolute; - top: 0; - left: 0px; - right: 0; - bottom: 20px; - border-radius: 50%; - margin: auto; - -webkit-transform: scale(1, 1); - transform: scale(1, 1); -} - - .wrapper .circle { - width: 110px; - height: 110px; + width: 112px; + height: 112px; position: absolute; - top: 0; - left: 0px; + top: 118%; + left: -10%; right: 0; bottom: 20px; border-radius: 50%; margin: auto; -webkit-transform: scale(1, 1); - transform: scale(1, 1); - } + transform: scale(1, 1); +} .wrapper .circle.pulse { diff --git a/Mohem/src/app/home/home.module.ts b/Mohem/src/app/home/home.module.ts index 781a20ec..3df41b48 100644 --- a/Mohem/src/app/home/home.module.ts +++ b/Mohem/src/app/home/home.module.ts @@ -6,7 +6,7 @@ import { HmgCommonModule } from '../hmg-common/hmg-common.module'; import { IonicModule } from '@ionic/angular'; import { HomePage } from './home.page'; import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; -import { NgCircleProgressModule } from 'ng-circle-progress'; + const routes: Routes = [ { path: '', @@ -20,14 +20,12 @@ const routes: Routes = [ FormsModule, IonicModule, HmgCommonModule, - RouterModule.forChild(routes), - // Specify ng-circle-progress as an import - NgCircleProgressModule.forRoot() + RouterModule.forChild(routes) ], declarations: [ HomePage ], - providers:[ + providers: [ BarcodeScanner ] }) diff --git a/Mohem/src/app/home/home.page.html b/Mohem/src/app/home/home.page.html index 8b0f8400..ab687c35 100644 --- a/Mohem/src/app/home/home.page.html +++ b/Mohem/src/app/home/home.page.html @@ -140,38 +140,32 @@ --> - -
+
Time Left Today + [backgroundColor]= "'#094875'" + [percent]="percent" + [radius]="50" + [outerStrokeWidth]="2" + [innerStrokeWidth]="0" + [outerStrokeColor]="'#ffffff'" + [animation]="true" + [animationDuration]="300" + [responsive]="false" + [space]="-4" + [startFromZero]="false" + [title]="displayTime" + titleFontWeight="bold" + [titleColor]="'#ffffff'" + [showUnits]="false" + subtitle="" + [subtitleColor]="'#ffffff'" + [clockwise]="false" + [renderOnClick]="false">
-
- - Monthly Attendance -
- +
+ +
- diff --git a/Mohem/src/app/home/home.page.scss b/Mohem/src/app/home/home.page.scss index 118eda9d..8143cf6e 100644 --- a/Mohem/src/app/home/home.page.scss +++ b/Mohem/src/app/home/home.page.scss @@ -114,32 +114,32 @@ ion-label{ } } -.attendance-timer { - position: fixed; - bottom: 20px; - right: 20px; - z-index: 2; - height: 112px; - width: 112px; - background-color: #094875; - border-radius: 50%; - display: inline-block; - img { - position: absolute; - left: 33%; - top: 8%; - width: 35%; - } - span { - position: absolute; - left: 50%; - top: 70%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - color: white; - width: 80%; - text-align: center; - font-size: 11px; - text-transform: uppercase; - } -} +// .attendance-timer { +// position: fixed; +// bottom: 20px; +// right: 20px; +// z-index: 2; +// height: 112px; +// width: 112px; +// background-color: #094875; +// border-radius: 50%; +// display: inline-block; +// img { +// position: absolute; +// left: 33%; +// top: 8%; +// width: 35%; +// } +// span { +// position: absolute; +// left: 50%; +// top: 70%; +// -webkit-transform: translate(-50%, -50%); +// transform: translate(-50%, -50%); +// color: white; +// width: 80%; +// text-align: center; +// font-size: 11px; +// text-transform: uppercase; +// } +// } diff --git a/Mohem/src/app/home/home.page.ts b/Mohem/src/app/home/home.page.ts index 1130fd14..95e58003 100644 --- a/Mohem/src/app/home/home.page.ts +++ b/Mohem/src/app/home/home.page.ts @@ -113,7 +113,7 @@ export class HomePage implements OnInit { public hasFinished = false; public remainingTime: any; public scheduledTime: any; - public isCheckedIn: any; + public isCheckedIn = undefined; public displayTime: any; public menuEntries: any; public percent: any; @@ -442,6 +442,7 @@ export class HomePage implements OnInit { .subscribe((result: Response) => { if (this.common.validResponse(result)) { this.common.presentAlert(this.ts.trPK('home', 'swipeAlertSuccess')); + this.showAttendanceTracking(); } else { this.common.presentAlert(this.ts.trPK('home', 'swipeAlertFailed')); } @@ -477,7 +478,8 @@ export class HomePage implements OnInit { convertInSeconds(time: any) { const hours = parseInt(time[0], 10); const minutes = parseInt(time[1], 10); - const seconds = (hours * 60 * 60) + (minutes * 60); + let seconds = parseInt(time[2], 10); + seconds = seconds + (hours * 60 * 60) + (minutes * 60); return seconds; } @@ -485,14 +487,14 @@ export class HomePage implements OnInit { console.log(data); this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':')); this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':')); - this.isCheckedIn = this.remainingTime === this.scheduledTime ? true : false; + this.isCheckedIn = this.remainingTime === this.scheduledTime ? false : true; this.initTimer(); console.log('remainingTime: ' + this.remainingTime); console.log('scheduledTime: ' + this.scheduledTime); console.log('isCheckedIn: ' + this.isCheckedIn); } - showAttendanceTracking() { // spent hours left hours + showAttendanceTracking() { this.DS.getAttendanceTracking() .subscribe((result: AttendanceTrackingResponse) => { if (this.common.validResponse(result)) { const key = 'GetAttendanceTrackingList'; @@ -586,7 +588,7 @@ export class HomePage implements OnInit { }); } - openattentracking(){ + openattentracking() { this.common.openAttenTrackingpage(); }