timer added according to the shift hours

missing-swipe
umasoodch 6 years ago
parent c955a19ae8
commit 11432b633e

@ -138,25 +138,31 @@
</ion-row> --> </ion-row> -->
</ion-grid> </ion-grid>
<!-- {{displayTime}} --> <!-- {{displayTime}} -->
<div class="fixed-shift-timer">
<circle-progress <span class="subTitle">Time Left Today</span>
[backgroundColor]= "'#094875'" <circle-progress
[percent]="percent" [backgroundColor]= "'#094875'"
[radius]="50" [percent]="percent"
[outerStrokeWidth]="5" [radius]="50"
[innerStrokeWidth]="3" [outerStrokeWidth]="2"
[outerStrokeColor]="'#ffffff'" [innerStrokeWidth]="0"
[innerStrokeColor]="'#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"
[titleColor]="'#ffffff'" titleFontWeight="bold"
></circle-progress> [titleColor]="'#ffffff'"
{{displayTime}} [showUnits]="false"
subtitle=""
[subtitleColor]="'#ffffff'"
[clockwise]="false"
[renderOnClick]="false">
</circle-progress>
</div>
</ion-content> </ion-content>
<!-- <ion-fab> <!-- <ion-fab>

@ -46,6 +46,7 @@ ion-label{
z-index: 2; z-index: 2;
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
padding-bottom: 130px;
} }
.attendance-module{ .attendance-module{
border-radius: 20px; border-radius: 20px;
@ -83,3 +84,20 @@ ion-label{
margin: 0 !important; margin: 0 !important;
width: 100% !important; width: 100% !important;
} }
.fixed-shift-timer{
position: fixed;
bottom: 20px;
right: 20px;
z-index: 2;
span.subTitle {
position: absolute;
left: 50%;
top: 62%;
transform: translate(-50%, -50%);
color: white;
width: 80%;
text-align: center;
font-size: 11px;
text-transform: uppercase;;
}
}

@ -98,7 +98,7 @@ public slideOptsTwo = {
spaceBetween: 10 spaceBetween: 10
}; };
public timeInSeconds: any = 200; public timeInSeconds: any = .15 * 60 * 60;
public time: any; public time: any;
public runTimer = false; public runTimer = false;
public hasStarted = false; public hasStarted = false;
@ -106,8 +106,8 @@ public hasFinished = false;
public remainingTime: any; public remainingTime: any;
public displayTime: any; public displayTime: any;
public menuEntries: any; public menuEntries: any;
public titleFormat: any; public percent: any = 100 - ((this.timeInSeconds / 32400) * 100);
public percent = 10;
constructor( constructor(
public ts: TranslatorService, public ts: TranslatorService,
@ -137,22 +137,18 @@ public percent = 10;
} }
ngOnInit() { ngOnInit() {
// this.getUserDetails(); this.getUserDetails();
// this.getMenu(); this.getMenu();
// this.setServicesPrivilage(); this.setServicesPrivilage();
// this.getCount(); // this.getCount();
console.log(this.percent);
this.initTimer(); this.initTimer();
// this.events.subscribe('getNotCount', badge => { // this.events.subscribe('getNotCount', badge => {
// this.notBadge = badge; // this.notBadge = badge;
// }); // });
} }
// formatSubtitle = (time: number) : string => {
// return
// }
initTimer() { initTimer() {
this.time = this.timeInSeconds; this.time = this.timeInSeconds;
this.runTimer = false; this.runTimer = false;
@ -175,8 +171,13 @@ timerTick() {
if (!this.runTimer) { return; } if (!this.runTimer) { return; }
this.remainingTime--; this.remainingTime--;
this.displayTime = this.getSecondsAsDigitalClock(this.remainingTime); this.displayTime = this.getSecondsAsDigitalClock(this.remainingTime);
this.percent = this.percent + 1; console.log(this.remainingTime);
console.log(Math.floor((this.remainingTime / 32400) * 100));
if (this.remainingTime > 0) { if (this.remainingTime > 0) {
const newPercent: any = ((this.remainingTime / 32400) * 100).toFixed(2);
console.log(newPercent);
this.percent = 100 - newPercent;
console.log('umar:' + this.percent);
this.timerTick(); this.timerTick();
} else { } else {
this.hasFinished = true; this.hasFinished = true;

Loading…
Cancel
Save