completed dashboard and attendance timer work

missing-swipe
umasoodch 6 years ago
parent ecbdf62c74
commit f7002f3eae

@ -10,21 +10,41 @@
<ion-content> <ion-content>
<div class="timer-chart"> <div class="timer-chart">
<ion-label class="shift-title" style="font-weight: bold"> {{curentDate}}</ion-label><br/>
<ion-label class="shift-title" style="font-weight: bold"> {{cuurentDate}}</ion-label><br/> <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','today-time-left')}}</ion-label>
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','today-time-left')}}</ion-label>
<div class="fixed-shift-timer">
<circle-progress
[titleFontSize]= '3'
</div> [percent]="percent"
[radius]="8"
[outerStrokeWidth]="0.25"
[innerStrokeWidth]="0.25"
[outerStrokeColor]="'#3cb9d5'"
[innerStrokeColor]="'rgba(0,0,0,0.3)'"
[animation]="true"
[animationDuration]="300"
[responsive]="true"
[space]="-0.25"
[startFromZero]="false"
[title]="displayTime"
titleFontWeight="bold"
[titleColor]="'#ffffff'"
[showUnits]="false"
[showSubtitle]="false"
[subtitleColor]="'#ffffff'"
[clockwise]="false"
[renderOnClick]="false">
</circle-progress>
</div>
</div>
<div *ngIf="attendanceTrackingList" class="tracking-content"> <div *ngIf="attendanceTrackingList" class="tracking-content">
<div class="divstopBtn"> <div class="divstopBtn">
<button *ngIf="!isCheckOut"(click)="openDialog();" class="stopBtn" ion-button> <button *ngIf="isCheckedIn"(click)="openDialog();" class="stopBtn" ion-button>
<ion-icon class="stopicon" name="pause"></ion-icon> <ion-icon class="stopicon" name="pause"></ion-icon>
</button> </button>
</div> </div>
<ion-grid> <ion-grid>
<ion-row class="rowBorder"> <ion-row class="rowBorder">
<ion-label class="shift-title">{{ts.trPK('attendance-tracking','shift-time')}}</ion-label> <ion-label class="shift-title">{{ts.trPK('attendance-tracking','shift-time')}}</ion-label>
<br /><br /> <br /><br />
@ -55,7 +75,5 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</div> </div>
</ion-content> </ion-content>

@ -1,7 +1,7 @@
.timer-chart{ .timer-chart{
padding-top:18px; padding-top:18px;
background: #094773; background: #094773;
height: 50%; // height: 50%;
text-align: center; text-align: center;
} }
@ -50,3 +50,8 @@ text-align: center;
border-right: var(--lightblue) solid 1px; border-right: var(--lightblue) solid 1px;
} }
.fixed-shift-timer{
margin-top: -50px;
margin-bottom: -30px;
}

@ -1,8 +1,8 @@
import { Component, OnInit, EventEmitter, Output } from '@angular/core'; 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 { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.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'; import { AttendanceTrackingResponse } from 'src/app/hmg-common/services/dashbored/attendance-tracking.response';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@ -10,76 +10,125 @@ import { AttendanceTrackingResponse } from 'src/app/hmg-common/services/dashbore
styleUrls: ['./home.component.scss'], styleUrls: ['./home.component.scss'],
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
attendanceTrackingList:any =[]; attendanceTrackingList: any = [];
cuurentDate:any; curentDate: any;
direction: string; 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( constructor(
public cs:CommonService, public cs: CommonService,
public db:DashboredService, public db: DashboredService,
public ts:TranslatorService, public ts: TranslatorService,
public AttendScanService:AttendScanService public attendScanService: AttendScanService
) { } ) { }
ngOnInit() { ngOnInit() {
this.attendanceTracking(); this.showAttendanceTracking();
this.cuurentDate = new Date(); this.curentDate = new Date();
this.direction = TranslatorService.getCurrentLanguageName(); this.direction = TranslatorService.getCurrentLanguageName();
this.cuurentDate =this.getHeaderDate(this.cuurentDate); this.curentDate = this.getHeaderDate(this.curentDate);
} }
// call services initTimer() {
public attendanceTracking(){ this.runTimer = false;
this.db.getAttendanceTracking(()=> {},this.ts.trPK('general', 'retry')).subscribe( this.hasStarted = false;
(result)=>{ this.hasFinished = false;
console.log("result: "+result); this.percent = 100 - ((this.remainingTime / this.scheduledTime) * 100);
this.handleRespondGetAttendanceTracking(result); 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){ getSecondsAsDigitalClock(inputSeconds: number) {
if (this.cs.validResponse(result)) { const secNum = parseInt(inputSeconds.toString(), 10); // don't forget the second param
if(result.GetAttendanceTrackingList != null){ const hours = Math.floor(secNum / 3600);
this.attendanceTrackingList=result.GetAttendanceTrackingList; const minutes = Math.floor((secNum - (hours * 3600)) / 60);
//**condition to check is checkout or not to display PUSE Button** const seconds = secNum - (hours * 3600) - (minutes * 60);
if(this.attendanceTrackingList.P_REMAINING_HOURS ==='0'){ let hoursString = '';
this.isCheckOut=true; let minutesString = '';
}else{ let secondsString = '';
this.isCheckOut=false; 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 { convertAndAssignTime(data) {
return this.cs.getMonthNameAr(date.getMonth() + 1) + ", " + date.getDate() +" "+ date.getFullYear(); 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( this.cs.confirmAlertDialogAttendance(
() => { () => {
//to open scan(); this.attendScanService.getDeviceLocation();
//this.cs.openScan(); }, this.ts.trPK('general', 'ok'),
this.AttendScanService.getDeviceLocation(); () => {}, this.ts.trPK('general', 'cancel'),
}, this.ts.trPK('general', 'ok'),
() => {}, this.ts.trPK('general', 'cancel'),
this.ts.trPK('vacation-rule', 'confirmation'), this.ts.trPK('vacation-rule', 'confirmation'),
this.ts.trPK('attendance-tracking', 'confirm-alert3') this.ts.trPK('attendance-tracking', 'confirm-alert3')
+ "<br/>"+"<br/>"+ this.ts.trPK('attendance-tracking', 'confirm-alert1') + '<br/>' + '<br/>' + this.ts.trPK('attendance-tracking', 'confirm-alert1')
+ this.ts.trPK('attendance-tracking', 'confirm-alert2') + this.ts.trPK('attendance-tracking', 'confirm-alert2')
); );
} }
}// end home }

@ -100,7 +100,7 @@ import {DashboredService} from './services/dashbored/dashbored.service'
import {FabButtonComponent} from './ui/fab-button/fab-button.component' import {FabButtonComponent} from './ui/fab-button/fab-button.component'
import { AttendScanService } from './services/attend-services/attend-scan.service'; import { AttendScanService } from './services/attend-services/attend-scan.service';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { NgCircleProgressModule } from 'ng-circle-progress';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
@ -110,7 +110,8 @@ import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
HttpClientModule, HttpClientModule,
NgxChartsModule, NgxChartsModule,
ListboxModule, ListboxModule,
PdfViewerModule PdfViewerModule,
NgCircleProgressModule.forRoot()
], ],
declarations: [ declarations: [
FabButtonComponent, FabButtonComponent,
@ -228,7 +229,8 @@ import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
AccordinCustomComponent, AccordinCustomComponent,
StatsButtonComponent, StatsButtonComponent,
ServicesButtonComponent, ServicesButtonComponent,
ConfirmLoginComponent ConfirmLoginComponent,
NgCircleProgressModule
], ],
providers: [ providers: [
AttendScanService, AttendScanService,

@ -7,8 +7,8 @@ ion-fab-button{
background-size: cover; background-size: cover;
background-position: top right; background-position: top right;
border-radius: 50%; border-radius: 50%;
height:110px; height:112px;
width: 110px; width: 112px;
} }
.cbookApointmentBtn{ .cbookApointmentBtn{
// --background:transparent !important; // --background:transparent !important;
@ -114,32 +114,18 @@ button-inner{
} }
.wrapper .circle { .wrapper .circle {
width: 3.3cm; width: 112px;
height: 3.3cm; height: 112px;
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;
position: absolute; position: absolute;
top: 0; top: 118%;
left: 0px; left: -10%;
right: 0; right: 0;
bottom: 20px; bottom: 20px;
border-radius: 50%; border-radius: 50%;
margin: auto; margin: auto;
-webkit-transform: scale(1, 1); -webkit-transform: scale(1, 1);
transform: scale(1, 1); transform: scale(1, 1);
} }
.wrapper .circle.pulse { .wrapper .circle.pulse {

@ -6,7 +6,7 @@ import { HmgCommonModule } from '../hmg-common/hmg-common.module';
import { IonicModule } from '@ionic/angular'; import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page'; import { HomePage } from './home.page';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { NgCircleProgressModule } from 'ng-circle-progress';
const routes: Routes = [ const routes: Routes = [
{ {
path: '', path: '',
@ -20,14 +20,12 @@ const routes: Routes = [
FormsModule, FormsModule,
IonicModule, IonicModule,
HmgCommonModule, HmgCommonModule,
RouterModule.forChild(routes), RouterModule.forChild(routes)
// Specify ng-circle-progress as an import
NgCircleProgressModule.forRoot()
], ],
declarations: [ declarations: [
HomePage HomePage
], ],
providers:[ providers: [
BarcodeScanner BarcodeScanner
] ]
}) })

@ -140,38 +140,32 @@
</ion-col> </ion-col>
</ion-row> --> </ion-row> -->
</ion-grid> </ion-grid>
<!-- {{displayTime}} --> <div class="fixed-shift-timer" *ngIf="isCheckedIn" (click)="openattentracking()">
<div class="fixed-shift-timer" *ngIf="isCheckedIn">
<span class="subTitle">Time Left Today</span> <span class="subTitle">Time Left Today</span>
<circle-progress <circle-progress
[backgroundColor]= "'#094875'" [backgroundColor]= "'#094875'"
[percent]="percent" [percent]="percent"
[radius]="50" [radius]="50"
[outerStrokeWidth]="2" [outerStrokeWidth]="2"
[innerStrokeWidth]="0" [innerStrokeWidth]="0"
[outerStrokeColor]="'#ffffff'" [outerStrokeColor]="'#ffffff'"
[animation]="true" [animation]="true"
[animationDuration]="300" [animationDuration]="300"
[responsive]="false" [responsive]="false"
[space]="-4" [space]="-4"
[startFromZero]="false" [startFromZero]="false"
[title]="displayTime" [title]="displayTime"
titleFontWeight="bold" titleFontWeight="bold"
[titleColor]="'#ffffff'" [titleColor]="'#ffffff'"
[showUnits]="false" [showUnits]="false"
subtitle="" subtitle=""
[subtitleColor]="'#ffffff'" [subtitleColor]="'#ffffff'"
[clockwise]="false" [clockwise]="false"
[renderOnClick]="false"> [renderOnClick]="false">
</circle-progress> </circle-progress>
</div> </div>
<div class="attendance-timer" *ngIf="!isCheckedIn"> <div class="fixed-shift-timer" *ngIf="isCheckedIn === false">
<img src="assets/icon/new-design/missing_swipe.png"/> <fab-button (trigger)="attendance()"></fab-button>
<span class="subTitle">Monthly Attendance</span>
</div>
<fab-button (trigger)="openattentracking()"></fab-button>
<page-trailer [small] = "true"></page-trailer> <page-trailer [small] = "true"></page-trailer>
</div>
</ion-content> </ion-content>
<!-- <ion-fab>
<ion-fab-button>Button</ion-fab-button>
</ion-fab> -->

@ -114,32 +114,32 @@ ion-label{
} }
} }
.attendance-timer { // .attendance-timer {
position: fixed; // position: fixed;
bottom: 20px; // bottom: 20px;
right: 20px; // right: 20px;
z-index: 2; // z-index: 2;
height: 112px; // height: 112px;
width: 112px; // width: 112px;
background-color: #094875; // background-color: #094875;
border-radius: 50%; // border-radius: 50%;
display: inline-block; // display: inline-block;
img { // img {
position: absolute; // position: absolute;
left: 33%; // left: 33%;
top: 8%; // top: 8%;
width: 35%; // width: 35%;
} // }
span { // span {
position: absolute; // position: absolute;
left: 50%; // left: 50%;
top: 70%; // top: 70%;
-webkit-transform: translate(-50%, -50%); // -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); // transform: translate(-50%, -50%);
color: white; // color: white;
width: 80%; // width: 80%;
text-align: center; // text-align: center;
font-size: 11px; // font-size: 11px;
text-transform: uppercase; // text-transform: uppercase;
} // }
} // }

@ -113,7 +113,7 @@ export class HomePage implements OnInit {
public hasFinished = false; public hasFinished = false;
public remainingTime: any; public remainingTime: any;
public scheduledTime: any; public scheduledTime: any;
public isCheckedIn: any; public isCheckedIn = undefined;
public displayTime: any; public displayTime: any;
public menuEntries: any; public menuEntries: any;
public percent: any; public percent: any;
@ -442,6 +442,7 @@ export class HomePage implements OnInit {
.subscribe((result: Response) => { .subscribe((result: Response) => {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
this.common.presentAlert(this.ts.trPK('home', 'swipeAlertSuccess')); this.common.presentAlert(this.ts.trPK('home', 'swipeAlertSuccess'));
this.showAttendanceTracking();
} else { } else {
this.common.presentAlert(this.ts.trPK('home', 'swipeAlertFailed')); this.common.presentAlert(this.ts.trPK('home', 'swipeAlertFailed'));
} }
@ -477,7 +478,8 @@ export class HomePage implements OnInit {
convertInSeconds(time: any) { convertInSeconds(time: any) {
const hours = parseInt(time[0], 10); const hours = parseInt(time[0], 10);
const minutes = parseInt(time[1], 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; return seconds;
} }
@ -485,14 +487,14 @@ export class HomePage implements OnInit {
console.log(data); console.log(data);
this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':')); this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':'));
this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_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(); this.initTimer();
console.log('remainingTime: ' + this.remainingTime); console.log('remainingTime: ' + this.remainingTime);
console.log('scheduledTime: ' + this.scheduledTime); console.log('scheduledTime: ' + this.scheduledTime);
console.log('isCheckedIn: ' + this.isCheckedIn); console.log('isCheckedIn: ' + this.isCheckedIn);
} }
showAttendanceTracking() { // spent hours left hours showAttendanceTracking() {
this.DS.getAttendanceTracking() .subscribe((result: AttendanceTrackingResponse) => { this.DS.getAttendanceTracking() .subscribe((result: AttendanceTrackingResponse) => {
if (this.common.validResponse(result)) { if (this.common.validResponse(result)) {
const key = 'GetAttendanceTrackingList'; const key = 'GetAttendanceTrackingList';
@ -586,7 +588,7 @@ export class HomePage implements OnInit {
}); });
} }
openattentracking(){ openattentracking() {
this.common.openAttenTrackingpage(); this.common.openAttenTrackingpage();
} }

Loading…
Cancel
Save