timer added according to the shift hours

MOE_DEV_NEW_TEMPORARY_DESIGN
umasoodch 6 years ago
parent c955a19ae8
commit 11432b633e

@ -203,4 +203,4 @@
"android"
]
}
}
}

@ -138,25 +138,31 @@
</ion-row> -->
</ion-grid>
<!-- {{displayTime}} -->
<div class="fixed-shift-timer">
<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">
</circle-progress>
<circle-progress
[backgroundColor]= "'#094875'"
[percent]="percent"
[radius]="50"
[outerStrokeWidth]="5"
[innerStrokeWidth]="3"
[outerStrokeColor]="'#ffffff'"
[innerStrokeColor]="'#ffffff'"
[animation]="true"
[animationDuration]="300"
[responsive]="false"
[space]="-4"
[startFromZero]="false"
[title]="displayTime"
[titleColor]="'#ffffff'"
></circle-progress>
{{displayTime}}
</div>
</ion-content>
<!-- <ion-fab>

@ -46,6 +46,7 @@ ion-label{
z-index: 2;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 130px;
}
.attendance-module{
border-radius: 20px;
@ -82,4 +83,21 @@ ion-label{
.swiper-container {
margin: 0 !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
};
public timeInSeconds: any = 200;
public timeInSeconds: any = .15 * 60 * 60;
public time: any;
public runTimer = false;
public hasStarted = false;
@ -106,8 +106,8 @@ public hasFinished = false;
public remainingTime: any;
public displayTime: any;
public menuEntries: any;
public titleFormat: any;
public percent = 10;
public percent: any = 100 - ((this.timeInSeconds / 32400) * 100);
constructor(
public ts: TranslatorService,
@ -137,22 +137,18 @@ public percent = 10;
}
ngOnInit() {
// this.getUserDetails();
// this.getMenu();
// this.setServicesPrivilage();
this.getUserDetails();
this.getMenu();
this.setServicesPrivilage();
// this.getCount();
console.log(this.percent);
this.initTimer();
// this.events.subscribe('getNotCount', badge => {
// this.notBadge = badge;
// });
}
// formatSubtitle = (time: number) : string => {
// return
// }
initTimer() {
this.time = this.timeInSeconds;
this.runTimer = false;
@ -175,8 +171,13 @@ timerTick() {
if (!this.runTimer) { return; }
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) {
const newPercent: any = ((this.remainingTime / 32400) * 100).toFixed(2);
console.log(newPercent);
this.percent = 100 - newPercent;
console.log('umar:' + this.percent);
this.timerTick();
} else {
this.hasFinished = true;

Loading…
Cancel
Save