handled multiple shifts and added slider.

myteam
umasoodch 6 years ago
parent 0928d55171
commit 536e8a9c5a

@ -1,11 +1,3 @@
// .modalCss .modal-Wrapper {
// width: 600px;
// height: 300px;
// }
.chart-modal .modal-Wrapper { .chart-modal .modal-Wrapper {
--background: rgb(116, 108, 108) !important; --background: rgb(116, 108, 108) !important;
--border-color:white!important ; --border-color:white!important ;
@ -18,12 +10,9 @@
font-size: 10px !important; font-size: 10px !important;
--background: #22C6B3 !important; --background: #22C6B3 !important;
color: aliceblue !important; color: aliceblue !important;
// margin-top: 10px !important;
} }
.menu{ .menu {
// margin-left:330px !important;
margin-top: 0px !important; margin-top: 0px !important;
font-size: 35px !important; font-size: 35px !important;
background: #22C6B3; background: #22C6B3;
@ -33,7 +22,6 @@
} }
.person{ .person{
margin-left:100px !important; margin-left:100px !important;
margin-top: 0px !important; margin-top: 0px !important;
font-size: 23px !important; font-size: 23px !important;
@ -43,20 +31,19 @@
} }
.grid{ .grid{
margin-bottom: 550px !important; margin-bottom: 550px !important;
margin-top: 20px !important; margin-top: 20px !important;
margin-left: 15px !important; margin-left: 15px !important;
margin-right: 15px !important; margin-right: 15px !important;
background-color:white !important; background-color:white !important;
border-radius: 20px !important; border-radius: 20px !important;
height: 250px !important; height: 250px !important;
} }
.ionSliders{ .ionSliders{
margin: 0px !important; margin: 0px !important;
padding: 0px !important; padding: 0px !important;
}
}
.ionSlide{ .ionSlide{

@ -1,104 +1,100 @@
<ion-content>
<!-- <ion-slides [options]="slideOptsOne" (ionSlideDidChange)="slideChanged($event)"> <ion-slides [options]="slideOptsOne" (ionSlideDidChange)="slideChanged($event)" #slides>
<ion-slide *ngFor="let shift of SHIFTDETAILS.GetScheduleShiftsDetailsList; let i=index"> --> <ion-slide *ngFor="let shift of SHIFTDETAILS.GetScheduleShiftsDetailsList; let i=index">
<!-- <div> --> <ion-grid class="headerGrid">
<ion-grid class="headerGrid"> <ion-row style="padding: 5px 10px;">
<ion-row style="margin-left: -130px; margin-top: 27px;"> <ion-col size="8">
<ion-col size="10"> <div style="width: 100%;">
<div style="width: 100%;"> <div class="result-graph">
<div class="result-graph"> <div class="result-text-container">
<div class="result-text-container"> <h2 class="percentage">{{percentage}}</h2>
<h2 class="percentage">{{percentage}}</h2> <span>Completed <br><br><br><br></span>
<span>Completed <br><br><br><br></span> </div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div> </div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart> </div>
</div> </ion-col>
</div> <ion-col size="4">
</ion-col> <div class="div" >
<ion-col size="2"> <ion-row >
<div class="div" > <p class="p0">{{nameDay}}</p>
</ion-row>
<ion-row >
<p class="p1">{{day}}</p>
</ion-row>
<ion-row > <ion-row >
<p class="p0">{{nameDay}}</p> <p class="p2">{{nameMonth}}</p>
</ion-row> </ion-row>
<ion-row > <ion-row >
<p class="p1">{{day}}</p> <p class="p3">{{year}}</p>
</ion-row> </ion-row>
<ion-row > <ion-row>
<p class="p2">{{nameMonth}}</p> <p class="p5">{{ts.trPK('attendance','present')}}</p>
</ion-row> </ion-row>
<ion-row > </div>
<p class="p3">{{year}}</p> </ion-col>
</ion-row> </ion-row>
<ion-row>
<p class="p5">{{ts.trPK('attendance','present')}}</p>
</ion-row>
</div>
</ion-col>
</ion-row>
</ion-grid>
<div>
<ion-grid class="grid">
<ion-row class="gridrow"> <ion-row class="gridrow">
<ion-col class="liftcol"> <ion-col [size]="6" style="border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;">
<ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row> <ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row>
<ion-row class="rowlabel"> <ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','shift-time')}}</p> <p >{{ts.trPK('attendance-tracking','shift-time')}}</p>
</ion-row> </ion-row>
</ion-col> </ion-col>
<ion-col class="rightcol">
<ion-col [size]="6" style="border-bottom: 1px solid #ccc;">
<ion-row class="amountlabel"><p >{{scheduled}}</p> </ion-row> <ion-row class="amountlabel"><p >{{scheduled}}</p> </ion-row>
<ion-row class="rowlabel"> <ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','regular')}}</p> <p >{{ts.trPK('attendance-tracking','regular')}}</p>
</ion-row> </ion-row>
</ion-col> </ion-col>
</ion-row>
<ion-row class="gridrow" >
<ion-col class="liftcol"> <ion-col [size]="6" style="border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;">
<ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row> <ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row>
<ion-row class="rowlabel"> <ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-in')}}</p> <p >{{ts.trPK('attendance-tracking','check-in')}}</p>
</ion-row> </ion-row>
</ion-col> </ion-col>
<ion-col class="rightcol">
<ion-col [size]="6" style="border-bottom: 1px solid #ccc;">
<ion-row class="amountlabel"> <p >{{endDate}}</p> </ion-row> <ion-row class="amountlabel"> <p >{{endDate}}</p> </ion-row>
<ion-row class="rowlabel"> <ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-out')}} </p> <p >{{ts.trPK('attendance-tracking','check-out')}} </p>
</ion-row> </ion-row>
</ion-col> </ion-col>
</ion-row >
<ion-row class="gridrow"> <ion-col [size]="6" style="border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;">
<ion-col class="liftcol">
<ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row> <ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row>
<ion-row class="rowlabel"> <ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','late-in')}}</p> <p >{{ts.trPK('attendance-tracking','late-in')}}</p>
</ion-row> </ion-row>
</ion-col> </ion-col>
<ion-col class="rightcol">
<ion-col [size]="6" style="border-bottom: 1px solid #ccc;">
<ion-row class="amountlabel"> <p >{{excess}}</p> </ion-row> <ion-row class="amountlabel"> <p >{{excess}}</p> </ion-row>
<ion-row class="rowlabel"> <ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','excess')}}</p> <p >{{ts.trPK('attendance-tracking','excess')}}</p>
</ion-row> </ion-row>
</ion-col> </ion-col>
</ion-row>
<ion-row class="gridrow"> <ion-col [size]="6" style="border-right: 1px solid #ccc;">
<ion-col class="liftcol">
<ion-row class="amountlabel"> <p >{{shortage}}</p> </ion-row> <ion-row class="amountlabel"> <p >{{shortage}}</p> </ion-row>
<ion-row class="rowlabel"> <ion-row class="rowlabel">
<p>{{ts.trPK('attendance-tracking','shortage')}}</p> <p>{{ts.trPK('attendance-tracking','shortage')}}</p>
</ion-row> </ion-row>
</ion-col> </ion-col>
<ion-col class="rightcol">
<ion-col [size]="6">
<ion-row class="amountlabel"> <p >{{earlyOut}}</p> </ion-row> <ion-row class="amountlabel"> <p >{{earlyOut}}</p> </ion-row>
<ion-row class="rowlabel"> <ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','early-out')}}</p> <p >{{ts.trPK('attendance-tracking','early-out')}}</p>
</ion-row> </ion-row>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</div> </ion-slide>
<!-- </div> --> </ion-slides>
</ion-content>
<!-- </ion-slide>
</ion-slides> -->

@ -1,54 +1,23 @@
.result-text-container { .result-text-container {
// padding: 0;
// margin: 0;
// position: absolute;
// left: 50%;
// top: 50%;
// display: block;
// text-align: center;
// transform: translate(-50%, -50%);
//////////////////////////here
padding: 0; padding: 0;
margin: 0; margin: 0;
position: absolute; position: absolute;
left: 58%; left: 42%;
top: 67%; top: 60%;
display: block; display: block;
text-align: center; text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 25px; font-size: 25px;
// font-family: WorkSans-Bold;
font-weight: bold; font-weight: bold;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
font-size: 12px; font-size: 12px;
font-family: workSans-Regular; font-family: workSans-Regular;
color: rgb(163, 163, 163) !important; color: rgb(163, 163, 163) !important;
} }
@ -57,20 +26,26 @@
.today-graph{ .today-graph{
display: block; display: block;
height: 127px; height: 127px;
width: 288px; width: 270px;
margin-left: -60px;
} }
.amountlabel{ .amountlabel{
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 13px !important; font-size: 13px !important;
// border-top: 1px solid rgb(163, 163, 163) !important; margin-bottom: -29px !important;
margin-left: 0px !important; width: 100%;
margin-bottom: -29px !important; display: block;
text-align: center;
} }
.rowlabel{ .rowlabel{
color: rgb(163, 163, 163) !important; color: #a3a3a3 !important;
font-size: 13px !important; font-size: 13px !important;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
display: block;
width: 100%;
text-align: center;
padding: 1px;
} }
.grid{ .grid{
padding-bottom: -20px !important; padding-bottom: -20px !important;
@ -95,18 +70,9 @@ height: 360px !important;
} }
.div{ .div{
// border: 1px solid #a3a3a3 !important;
// text-align: center;
// width: 274%;
// border-radius: 8%;
// height: 40%;
// margin-right: -11px;
border: 1px solid #a3a3a3 !important; border: 1px solid #a3a3a3 !important;
border-radius: 9px; border-radius: 10px;
width: 241%; margin-bottom:10px;
margin-right: -226px;
} }
.p0{ .p0{
margin-bottom: -13px !important; margin-bottom: -13px !important;
@ -128,22 +94,28 @@ height: 360px !important;
display: block; display: block;
width: 100%; width: 100%;
} }
.p2{ font-weight: bold !important; .p2{
font-weight: bold !important;
font-size: 17px !important; font-size: 17px !important;
margin-bottom: 43px !important; margin-bottom: 43px !important;
margin-top: 0px !important; margin-top: 0px !important;
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
margin-left: 33px; text-align: center;
} display: block;
.p3{ /* margin-bottom: -72px !important; */ width: 100%;
}
.p3{
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 19px; font-size: 19px;
margin-top: -43px; margin-top: -43px;
margin-left: 27px; text-align: center;
display: block;
width: 100%;
} }
.p4{ margin-bottom: 56px !important; .p4{
margin-bottom: 56px !important;
margin-top: -26px !important; margin-top: -26px !important;
color: black !important; color: black !important;
} }
@ -158,23 +130,7 @@ height: 360px !important;
height: 21px; height: 21px;
width: 110px; width: 110px;
padding-top: 7px; padding-top: 7px;
/* font-family: WorkSans-Bold !important; */
padding-bottom: 21px; padding-bottom: 21px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
// .less{ background-color: #22C6B3;
// background-color: #22C6B3;
// border: none;
// color: white;
// text-align: center;
// text-decoration: none;
// display: inline-block;
// font-size: 12px;
// border-radius: 30px;
// height: 26px;
// padding: 6px 24px;
// margin-left: 123px;
// /* margin-top: -19px; */
// margin-bottom: 17px;
// }

@ -98,7 +98,7 @@ export class DateInfoModalComponent implements OnInit {
slideChanged(ev) { slideChanged(ev) {
this.slides.getActiveIndex().then(index => { this.slides.getActiveIndex().then(index => {
const shiftDetails = this.SHIFTDETAILS[index]; const shiftDetails = this.SHIFTDETAILS.GetScheduleShiftsDetailsList[index];
this.assignData(shiftDetails); this.assignData(shiftDetails);
}); });
} }

@ -132,12 +132,7 @@ export class DetailsComponent implements OnInit {
this.currentDate = new Date(); this.currentDate = new Date();
this.showData = false; this.showData = false;
this.nextMonth = new Date().getMonth() + 2; this.nextMonth = new Date().getMonth() + 2;
this.preMonth = new Date().getMonth() - 2; this.preMonth = new Date().getMonth();
if (this.preMonth < 0) {
this.preMonth = this.preMonth * - 1;
} else {
this.preMonth = this.preMonth * - 1;
}
this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear()); this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
} }
@ -210,6 +205,7 @@ export class DetailsComponent implements OnInit {
} }
changeMonthTitle(title) { changeMonthTitle(title) {
this.monthTitle = title; this.monthTitle = title;
this.getTimeCardSummaryDetails(); this.getTimeCardSummaryDetails();

@ -76,12 +76,7 @@ export class TimeCardDetailsComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.showData = false; this.showData = false;
this.nextMonth = new Date().getMonth() + 2; this.nextMonth = new Date().getMonth() + 2;
this.preMonth = new Date().getMonth() - 2; this.preMonth = new Date().getMonth();
if (this.preMonth < 0) {
this.preMonth = this.preMonth * - 1;
} else {
this.preMonth = this.preMonth * - 1;
}
this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear()); this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
} }
@ -218,7 +213,6 @@ export class TimeCardDetailsComponent implements OnInit {
}); });
} }
nextSlide() { nextSlide() {
this.normalDays = []; this.normalDays = [];
if (this.currentMonthName !== this.month) { if (this.currentMonthName !== this.month) {

@ -1284,12 +1284,9 @@ border:0px
} }
.calendar-modal { .calendar-modal {
--height: 15cm !important; --height: 13cm !important;
--width: 88% !important; --width: 88% !important;
--border-radius: 0.4cm; --border-radius: 0.4cm;
// height: 544px !important;
// width: 332px !important;
} }

Loading…
Cancel
Save