completed dashboard and attendance timer work

missing-swipe
umasoodch 6 years ago
parent ecbdf62c74
commit f7002f3eae

@ -10,21 +10,41 @@
<ion-content>
<div class="timer-chart">
<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>
</div>
<ion-label class="shift-title" style="font-weight: bold"> {{curentDate}}</ion-label><br/>
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','today-time-left')}}</ion-label>
<div class="fixed-shift-timer">
<circle-progress
[titleFontSize]= '3'
[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 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>
</button>
</div>
<ion-grid>
<ion-row class="rowBorder">
<ion-label class="shift-title">{{ts.trPK('attendance-tracking','shift-time')}}</ion-label>
<br /><br />
@ -55,7 +75,5 @@
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>

@ -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;
}

@ -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')
+ "<br/>"+"<br/>"+ this.ts.trPK('attendance-tracking', 'confirm-alert1')
this.ts.trPK('attendance-tracking', 'confirm-alert3')
+ '<br/>' + '<br/>' + this.ts.trPK('attendance-tracking', 'confirm-alert1')
+ 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 { 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,

@ -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 {

@ -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
]
})

@ -140,38 +140,32 @@
</ion-col>
</ion-row> -->
</ion-grid>
<!-- {{displayTime}} -->
<div class="fixed-shift-timer" *ngIf="isCheckedIn">
<div class="fixed-shift-timer" *ngIf="isCheckedIn" (click)="openattentracking()">
<span class="subTitle">Time Left Today</span>
<circle-progress
[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">
[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">
</circle-progress>
</div>
<div class="attendance-timer" *ngIf="!isCheckedIn">
<img src="assets/icon/new-design/missing_swipe.png"/>
<span class="subTitle">Monthly Attendance</span>
</div>
<fab-button (trigger)="openattentracking()"></fab-button>
<div class="fixed-shift-timer" *ngIf="isCheckedIn === false">
<fab-button (trigger)="attendance()"></fab-button>
<page-trailer [small] = "true"></page-trailer>
</div>
</ion-content>
<!-- <ion-fab>
<ion-fab-button>Button</ion-fab-button>
</ion-fab> -->

@ -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;
// }
// }

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

Loading…
Cancel
Save