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();
}