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

@ -1,26 +1,29 @@
ion-content {
font-family: WorkSans-Regular;
}
ion-grid {
padding:30px 15px;
}
.timer-chart{
padding-top:18px;
background: #094773;
// height: 50%;
text-align: center;
background: #094773;
text-align: center;
line-height: .7cm;
}
.tracking-content{
background: #053c63;
height: 50%;
background: #053c63;
min-height: 50%;
}
.rowBorder{
text-align: center;
border-bottom: var(--lightblue) solid 1px;
}
.shift-text{
// text-align: center;
// width: 100%;
// color: white !important;
margin-bottom: 12px;
margin-top: -9px;
font-size: 30px;
font-size: 36px;
line-height: 36px;
display: block;
}
.shift-title{
width: 100%;
@ -34,24 +37,32 @@ height: 50%;
}
.divstopBtn{
text-align: center;
text-align: center;
}
.stopBtn{
height: 70px;
width: 70px;
height: 89px;
width: 89px;
background-color: var(--lightblue) !important;
border-radius: 50%;
display: inline-block;
margin-top: -24px;
border: solid 3px #053c63;
margin-top: -40px;
border: solid 5px #053c63;
}
.colBorder{
padding: 20px 0px;
text-align: center;
}
.colBorder:nth-child(1){
border-right: var(--lightblue) solid 1px;
}
.fixed-shift-timer{
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 displayTime: any;
public percent: any;
constructor(
public cs: CommonService,
public db: DashboredService,
@ -90,14 +89,10 @@ export class HomeComponent implements OnInit {
}
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() {

@ -152,7 +152,7 @@ export class HomePage implements OnInit {
}
ngOnInit() {
this.getUserDetails();
// this.getUserDetails();
// this.getCount();
// 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() {
this.runTimer = false;
this.hasStarted = false;
@ -255,7 +262,7 @@ export class HomePage implements OnInit {
// });
// }
ionViewDidLoad() {
ionViewDidEnter() {
this.geolocation
.getCurrentPosition()
.then(resp => {
@ -494,9 +501,6 @@ export class HomePage implements OnInit {
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() {

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

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

Loading…
Cancel
Save