fixed design issues for attendance tracking

itg-new-design
umasoodch 6 years ago
parent 9177721b59
commit 7bd0701d75

@ -1,16 +1,29 @@
<ion-header> <!-- <ion-header>
<ion-toolbar class="header-toolbar"> <ion-toolbar class="header-toolbar">
<ion-title color="light">Attendance Tracking </ion-title> <ion-title color="light">Attendance Tracking </ion-title>
<ion-buttons slot="start"> <ion-buttons slot="start">
<nav-buttons></nav-buttons> <nav-buttons></nav-buttons>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header> -->
<!-- <ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<nav-buttons backLink="/home"></nav-buttons>
</ion-buttons>
<ion-title>Attendance Tracking</ion-title>
</ion-toolbar>
</ion-header> -->
<ion-content> <ion-content>
<div class="back-button-container">
<nav-buttons backLink="/home"></nav-buttons>
</div>
<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; font-size: 20px;"> {{curentDate}}</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"> <div class="fixed-shift-timer">
@ -46,32 +59,29 @@
</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-col [size]="12" class="colBorder" style="border-right: none;">
<br /><br /> <ion-label class="shift-title">{{ts.trPK('attendance-tracking','shift-time')}}</ion-label>
<ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SHT_NAME}} </ion-label> <ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SHT_NAME}} </ion-label>
</ion-col>
</ion-row> </ion-row>
<ion-row class="rowBorder"> <ion-row class="rowBorder">
<ion-col class="colBorder"> <ion-col [size]="6" class="colBorder">
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-in')}}</ion-label> <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-in')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00</ion-label> <ion-label class="shift-text shift-title">08:00</ion-label>
</ion-col> </ion-col>
<ion-col> <ion-col [size]="6" class="colBorder">
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-out')}}</ion-label> <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-out')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00 </ion-label> <ion-label class="shift-text shift-title">08:00 </ion-label>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row style="text-align: center"> <ion-row style="text-align: center">
<ion-col class="colBorder"> <ion-col [size]="6" class="colBorder">
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','late-in')}}</ion-label> <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','late-in')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00 </ion-label> <ion-label class="shift-text shift-title">08:00 </ion-label>
</ion-col> </ion-col>
<ion-col> <ion-col [size]="6" class="colBorder">
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','regular')}}</ion-label> <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','regular')}}</ion-label>
<br /><br /> <ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SCHEDULED_HOURS | slice:0:-3}} </ion-label>
<ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SCHEDULED_HOURS}} </ion-label>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>

@ -1,26 +1,29 @@
ion-content {
font-family: WorkSans-Regular;
}
ion-grid {
padding:30px 15px;
}
.timer-chart{ .timer-chart{
padding-top:18px; background: #094773;
background: #094773; text-align: center;
// height: 50%; line-height: .7cm;
text-align: center;
} }
.tracking-content{ .tracking-content{
background: #053c63; background: #053c63;
height: 50%; min-height: 50%;
} }
.rowBorder{ .rowBorder{
text-align: center; text-align: center;
border-bottom: var(--lightblue) solid 1px; border-bottom: var(--lightblue) solid 1px;
} }
.shift-text{ .shift-text{
// text-align: center; font-size: 36px;
// width: 100%; line-height: 36px;
// color: white !important; display: block;
margin-bottom: 12px;
margin-top: -9px;
font-size: 30px;
} }
.shift-title{ .shift-title{
width: 100%; width: 100%;
@ -34,24 +37,32 @@ height: 50%;
} }
.divstopBtn{ .divstopBtn{
text-align: center; text-align: center;
} }
.stopBtn{ .stopBtn{
height: 70px; height: 89px;
width: 70px; width: 89px;
background-color: var(--lightblue) !important; background-color: var(--lightblue) !important;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
margin-top: -24px; margin-top: -40px;
border: solid 3px #053c63; border: solid 5px #053c63;
} }
.colBorder{ .colBorder{
padding: 20px 0px;
text-align: center;
}
.colBorder:nth-child(1){
border-right: var(--lightblue) solid 1px; border-right: var(--lightblue) solid 1px;
} }
.fixed-shift-timer{ .fixed-shift-timer{
margin-top: -50px; margin-top: -50px;
margin-bottom: -30px; margin-bottom: -10px;
}
.back-button-container{
background: #094773;
} }

@ -22,7 +22,6 @@ export class HomeComponent implements OnInit {
public isCheckedIn = undefined; public isCheckedIn = undefined;
public displayTime: any; public displayTime: any;
public percent: any; public percent: any;
constructor( constructor(
public cs: CommonService, public cs: CommonService,
public db: DashboredService, public db: DashboredService,
@ -90,14 +89,10 @@ export class HomeComponent implements OnInit {
} }
convertAndAssignTime(data) { convertAndAssignTime(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 ? false : true; this.isCheckedIn = this.remainingTime === this.scheduledTime ? false : true;
this.initTimer(); this.initTimer();
console.log('remainingTime: ' + this.remainingTime);
console.log('scheduledTime: ' + this.scheduledTime);
console.log('isCheckedIn: ' + this.isCheckedIn);
} }
showAttendanceTracking() { showAttendanceTracking() {

@ -152,7 +152,7 @@ export class HomePage implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.getUserDetails(); // this.getUserDetails();
// this.getCount(); // this.getCount();
// this.events.subscribe('getNotCount', badge => { // this.events.subscribe('getNotCount', badge => {
@ -160,6 +160,13 @@ export class HomePage implements OnInit {
// }); // });
} }
ionViewWillEnter() {
this.remainingTime = 0;
this.displayTime = '00:00:00';
this.runTimer = false;
this.getUserDetails();
}
initTimer() { initTimer() {
this.runTimer = false; this.runTimer = false;
this.hasStarted = false; this.hasStarted = false;
@ -255,7 +262,7 @@ export class HomePage implements OnInit {
// }); // });
// } // }
ionViewDidLoad() { ionViewDidEnter() {
this.geolocation this.geolocation
.getCurrentPosition() .getCurrentPosition()
.then(resp => { .then(resp => {
@ -494,9 +501,6 @@ export class HomePage implements OnInit {
this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':')); this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':'));
this.isCheckedIn = this.remainingTime === this.scheduledTime ? false : true; this.isCheckedIn = this.remainingTime === this.scheduledTime ? false : true;
this.initTimer(); this.initTimer();
console.log('remainingTime: ' + this.remainingTime);
console.log('scheduledTime: ' + this.scheduledTime);
console.log('isCheckedIn: ' + this.isCheckedIn);
} }
showAttendanceTracking() { showAttendanceTracking() {

@ -2137,24 +2137,24 @@
"ar":"Mark Attendance " "ar":"Mark Attendance "
}, },
"check-in":{ "check-in":{
"en": "Check In", "en": "CHECK IN",
"ar":"Check In" "ar":"CHECK IN"
}, },
"check-out":{ "check-out":{
"en": "Check Out", "en": "CHECK OUT",
"ar":"Check Out" "ar":"CHECK OUT"
}, },
"regular":{ "regular":{
"en": "Regular", "en": "REGULAR",
"ar":"Regular" "ar":"REGULAR"
}, },
"late-in":{ "late-in":{
"en": "Late In", "en": "LATE IN",
"ar":"Late In" "ar":"LATE IN"
}, },
"today-time-left":{ "today-time-left":{
"en": "TODAY TIME LEFT", "en": "TODAY'S TIME LEFT",
"ar":"TODAY TIME LEFT" "ar":"TODAY'S TIME LEFT"
}, },

@ -1001,3 +1001,6 @@ border:0px
height: 0px !important; height: 0px !important;
display: none !important; display: none !important;
} }
.header-toolbar-new{
--background: #22c6b3;
}

Loading…
Cancel
Save