fixed merging conflicts

MOE_DEV_NEW_TEMPORARY_DESIGN
umasoodch 6 years ago
commit 4bf4d4fc24

@ -1527,9 +1527,9 @@
"dev": true
},
"@types/webpack-sources": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.5.tgz",
"integrity": "sha512-zfvjpp7jiafSmrzJ2/i3LqOyTYTuJ7u1KOXlKgDlvsj9Rr0x7ZiYu5lZbXwobL7lmsRNtPXlBfmaUD8eU2Hu8w==",
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.6.tgz",
"integrity": "sha512-FtAWR7wR5ocJ9+nP137DV81tveD/ZgB1sadnJ/axUGM3BUVfRPx8oQNMtv3JNfTeHx3VP7cXiyfR/jmtEsVHsQ==",
"dev": true,
"requires": {
"@types/node": "*",
@ -2679,14 +2679,14 @@
}
},
"browserslist": {
"version": "4.8.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
"integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
"version": "4.8.5",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.5.tgz",
"integrity": "sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001017",
"electron-to-chromium": "^1.3.322",
"node-releases": "^1.1.44"
"caniuse-lite": "^1.0.30001022",
"electron-to-chromium": "^1.3.338",
"node-releases": "^1.1.46"
}
},
"browserstack": {
@ -2873,9 +2873,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001020",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001020.tgz",
"integrity": "sha512-yWIvwA68wRHKanAVS1GjN8vajAv7MBFshullKCeq/eKpK7pJBVDgFFEqvgWTkcP2+wIDeQGYFRXECjKZnLkUjA==",
"version": "1.0.30001023",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz",
"integrity": "sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==",
"dev": true
},
"canonical-path": {
@ -5613,9 +5613,9 @@
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"electron-to-chromium": {
"version": "1.3.333",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.333.tgz",
"integrity": "sha512-7MJfCpa/tmhqYy2lZ1NEbkSxH7q3KiZiepiSs2ayTPAweAjdzGXotij+7OKPPb3OwJD2ZuBKPrA2HIuuSi6ahw==",
"version": "1.3.340",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.340.tgz",
"integrity": "sha512-hRFBAglhcj5iVYH+o8QU0+XId1WGoc0VGowJB1cuJAt3exHGrivZvWeAO5BRgBZqwZtwxjm8a5MQeGoT/Su3ww==",
"dev": true
},
"elementtree": {
@ -7784,6 +7784,11 @@
"integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
"dev": true
},
"ionic2-calendar": {
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/ionic2-calendar/-/ionic2-calendar-0.5.8.tgz",
"integrity": "sha512-+8xy/cahkCzEJTYmsqkRiAXcn7FlSSXPM72nU/BKtDj6uNKBl/5Bqu6EoKT1z4YAc1cC3uOZSdSKv9smr4GNnA=="
},
"ionicons": {
"version": "4.6.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.6.3.tgz",
@ -9668,9 +9673,9 @@
}
},
"node-releases": {
"version": "1.1.45",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.45.tgz",
"integrity": "sha512-cXvGSfhITKI8qsV116u2FTzH5EWZJfgG7d4cpqwF8I8+1tWpD6AsvvGRKq2onR0DNj1jfqsjkXZsm14JMS7Cyg==",
"version": "1.1.47",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz",
"integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==",
"dev": true,
"requires": {
"semver": "^6.3.0"
@ -15771,9 +15776,9 @@
"dev": true
},
"readable-stream": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
"integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz",
"integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==",
"dev": true,
"requires": {
"inherits": "^2.0.3",

@ -101,6 +101,7 @@
"cordova.plugins.diagnostic": "^5.0.1",
"core-js": "^2.5.4",
"date-fns": "^1.30.1",
"ionic2-calendar": "^0.5.8",
"mx.ferreyra.callnumber": "0.0.2",
"ng-circle-progress": "^1.5.1",
"ng2-file-upload": "^1.3.0",

@ -15,6 +15,9 @@ import { FilePath } from '@ionic-native/file-path/ngx';
import { File } from '@ionic-native/file/ngx';
import { Base64 } from '@ionic-native/base64/ngx';
import { FirebaseX } from '@ionic-native/firebase-x/ngx';
import { NgCalendarModule } from 'ionic2-calendar';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
@ -25,7 +28,8 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx';
hardwareBackButton: true,
}),
AppRoutingModule,
HmgCommonModule
HmgCommonModule,
NgCalendarModule
],
providers: [
StatusBar,

@ -7,6 +7,8 @@ import { IonicModule } from '@ionic/angular';
import { AttendancePage } from './attendance.page';
import { HomeComponent } from './home/home.component';
import {MonthlyAttendanceComponent} from './monthly-attendance/monthly-attendance.component';
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
const routes: Routes = [
{
@ -16,6 +18,10 @@ const routes: Routes = [
{
path: 'home',
component: HomeComponent
},
{
path: 'monthlyAttendance',
component: MonthlyAttendanceComponent
}
]
}
@ -26,8 +32,9 @@ const routes: Routes = [
CommonModule,
FormsModule,
IonicModule,
HmgCommonModule,
RouterModule.forChild(routes)
],
declarations: [AttendancePage, HomeComponent]
declarations: [AttendancePage, HomeComponent, MonthlyAttendanceComponent]
})
export class AttendancePageModule {}

@ -0,0 +1,113 @@
<ion-header>
<ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<ion-title color="light">{{ts.trPK('attendance','attendance')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<div class="header-div">
<div class="header-div">
<p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p>
<ion-slides>
<ion-slide>
<ion-grid class="headerGrid">
<div style="color: black;">
<!-- <ngx-gauge
[type]="gaugeType"
[value]="gaugeValue"
[label]="gaugeLabel">
</ngx-gauge> -->
<div class="result-graph">
<div class="request-heading">
<span>Open Request Analysis</span>
</div>
<div class="result-text-container">
<h2>287</h2>
<span>TOTAL <br> OPEN REQUEST</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 79%;
bottom: 35px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;">
</div>
<div style="position: relative;
left: 79%;
bottom: 20px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
</div>
</div>
</ion-grid>
</ion-slide>
</ion-slides>
</div>
</div>
<div style="margin-top: 45%;">
<ion-grid>
<ion-row>
<ion-col>
<ion-grid class="labelGrid">
<ion-row>
<ion-col>
<label style="font-size: 13px;">SCHEDULE</label>
</ion-col>
<ion-col>
<h2 style="margin-left: 45%; font-size: 25px;">23</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<ion-row>
<ion-col>
<label style="font-size: 12px;">OFF DAYS</label>
</ion-col>
<ion-col>
<h2 style="margin-left: 45%; font-size: 25px;">08</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<label style="font-size: 13px;">NON ANALYZED</label>
<h2 style="margin-left: 45%; font-size: 25px;">01</h2>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<label style="font-size: 13px;">SHORTAGE HOURS</label>
<h2 style="margin-left: 45%; font-size: 25px;">03</h2>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div >
<ion-grid class="bodyGrid">
<app-circle-calendar></app-circle-calendar>
</ion-grid>
</div>
</ion-content>

@ -0,0 +1,242 @@
.colorBG {
--background: #f0efef;
}
.header-div {
background: #22c6b3;
color: var(--light);
text-transform: capitalize;
display: block;
position: relative;
height: 210px;
margin-bottom: 60px;
}
.chart-modal .modal-Wrapper {
--background: rgb(116, 108, 108) !important;
--border-color:white!important ;
width: 85%!important ;
height: 40px !important ;
}
.navbar{
font-size: 10px !important;
--background: #22C6B3 !important;
color: aliceblue !important;
// margin-top: 10px !important;
}
.menu{
// margin-left:330px !important;
margin-top: 0px !important;
font-size: 35px !important;
background: #22C6B3;
color: aliceblue;
margin-left: 0px !important;
}
.person{
margin-left:100px !important;
margin-top: 0px !important;
font-size: 23px !important;
background: #22C6B3 !important;
color: aliceblue !important;
}
.grid{
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 250px !important;
}
.headerGrid{
margin-bottom: 550px !important;
margin-top: 80px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 250px !important;
}
.bodyGrid{
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 270px !important;
}
.labelGrid{
margin-top: -30px !important;
background-color:white !important;
border-radius: 20px !important;
height: 100px !important;
}
.ionSliders{
margin: 0px !important;
padding: 0px !important;
}
.ionSlide{
margin-top: 5px !important;
margin-left: 190px !important;
color: black !important;
}
.dateLable{
margin-left: 90px !important;
color: black !important;
font-size: small !important;
margin-top: 15px !important;
}
// h1{
// font-size: 15px !important;
// text-align: center !important;
// }
.arrowDropright{
margin-left:100px !important;
font-size: 20px !important;
color: rgb(168, 165, 165) !important;
margin-top: 15px !important;
}
.arrowDropleft{
font-size: 20px !important;
margin-left: 10px !important;
margin-top: 15px !important;
color: rgb(116, 108, 108) !important;
}
.ionLable{
font-size: 10px !important;
}
.number{
font-size: 18px !important;
font-weight: bolder !important;
color: black !important;
}
.header-div{
background:var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: #22C6B3;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color:var(--light);
text-transform: capitalize;
display: block;
position: relative;
height: 210px;
margin-bottom:60px;
// border-radius: 0px 0px 70px 70px;
}
.request-heading {
span {
text-align: center;
display: block;
padding-top: 8px;
font-family: workSans-Regular;
}
}
.result-graph {
position: relative;
background: white;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 38px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
}
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MonthlyAttendanceComponent } from './monthly-attendance.component';
describe('MonthlyAttendanceComponent', () => {
let component: MonthlyAttendanceComponent;
let fixture: ComponentFixture<MonthlyAttendanceComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MonthlyAttendanceComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MonthlyAttendanceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,101 @@
import { Component, OnInit } from '@angular/core';
import { CommonService } from '../../hmg-common/services/common/common.service';
import { TranslatorService } from '../../hmg-common/services/translator/translator.service';
import { SharedDataService } from '../../hmg-common/services/shared-data-service/shared-data.service';
import { GetSubordinatesAttdStatusRequest } from 'src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest';
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { GetSubordinatesAttdStatusResponse } from 'src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusResponse';
@Component({
selector: 'app-monthly-attendance',
templateUrl: './monthly-attendance.component.html',
styleUrls: ['./monthly-attendance.component.scss'],
})
export class MonthlyAttendanceComponent implements OnInit {
constructor(
private cs: CommonService,
public ts: TranslatorService,
public sharedData: SharedDataService,
public DS: DashboredService) { }
gaugeType = 'full';
gaugeValue = 28.3;
gaugeLabel = 'Days';
// gaugeAppendText = "km/hr";
currentMonth: any;
todayYear: any;
todayMonth: any;
public options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
public data = {
datasets: [
{
data: [120, 50],
backgroundColor: [
'#22c6b3',
'#094875',
],
borderWidth: 2
}]
};
ngOnInit() { }
ionViewWillEnter() {
this.currentMonth = this.sharedData.getSharedData("currentMonth");
console.log(this.currentMonth);
let day = this.currentMonth.split(" ");
this.todayMonth =day[0];
this.todayYear = day[1];
this.todayYear = parseInt(this.todayYear);
console.log("MONTH: " +this.todayMonth);
console.log("YEAR: " +this.todayYear);
this.getSubordinatesAttStatus()
}
getSubordinatesAttStatus() {
let request: GetSubordinatesAttdStatusRequest = new GetSubordinatesAttdStatusRequest();
// request.P_SCHEDULE_DATE_FROM = "/Date(1578603600000+0300)/"; //test
// request.P_SCHEDULE_DATE_TO = "/Date(1576011600000+0300)/";//test
console.log(this.currentMonth);
request.SearchMonth = this.todayMonth;
request.SearchYear = 2019//this.todayYear;
this.DS.getSubordinatesAttStatus(request, () => { console.log("Error "); }).subscribe((result: GetSubordinatesAttdStatusResponse) => {
if (this.cs.validResponse(result)) {
console.log("response");
console.log(result);
}
});
}
x(){
console.log("ENAD CHANge")
}
}

@ -21,7 +21,6 @@
<div [ngClass]="{'selectedDiv': selectedMenu == i,'notSelected': selectedMenu != i }">
<ion-text>
<b>{{menuItem.PROMPT}}</b>
</ion-text>
</div>
<!-- Child Pages -->
@ -30,7 +29,7 @@
(click)="openPage(subPage)">
<ion-row>
<ion-col size="12" class="menu-name"><span ion-text color="color2">&nbsp;{{subPage.PROMPT}}</span>
</ion-col>
</ion-col>
</ion-row>
</ion-item>
</ion-list>

@ -55,6 +55,9 @@ export class HomeComponent implements OnInit {
if (menuEntry.REQUEST_TYPE === 'PAYSLIP'){
this.cs.openPayslipPage();
}
if (menuEntry.REQUEST_TYPE === 'TIME_CARD') {
this.cs.openTimeCardPage();
}
}
}

@ -110,10 +110,12 @@ import {FabButtonComponent} from './ui/fab-button/fab-button.component'
import { AttendScanService } from './services/attend-services/attend-scan.service';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { NgCircleProgressModule } from 'ng-circle-progress';
import {ChartModule} from 'primeng/chart';
import { CardFilterComponent } from './ui/card-filter/card-filter.component';
import { EmployeeInformationComponent } from './ui/employee-information/employee-information.component';
import { CircleCalendarComponent } from './ui/circle-calendar/circle-calendar.component';
import { NgCalendarModule } from 'ionic2-calendar';
import { DateInfoModalComponent } from './ui/circle-calendar/date-info-modal/date-info-modal.component';
import { ChartModule } from 'primeng/chart';
@NgModule({
imports: [
CommonModule,
@ -125,8 +127,9 @@ import { EmployeeInformationComponent } from './ui/employee-information/employee
ListboxModule,
PdfViewerModule,
NgCircleProgressModule.forRoot(),
ChartModule,
NgxGaugeModule
NgCalendarModule,
NgxGaugeModule,
ChartModule
],
declarations: [
FabButtonComponent,
@ -188,7 +191,11 @@ import { EmployeeInformationComponent } from './ui/employee-information/employee
ServicesButtonComponent,
ConfirmLoginComponent,
CardFilterComponent,
EmployeeInformationComponent
EmployeeInformationComponent,
ConfirmLoginComponent,
CircleCalendarComponent,
DateInfoModalComponent
],
exports: [
FabButtonComponent,
@ -250,7 +257,14 @@ import { EmployeeInformationComponent } from './ui/employee-information/employee
NgCircleProgressModule,
ChartModule,
CardFilterComponent,
EmployeeInformationComponent
EmployeeInformationComponent,
ConfirmLoginComponent,
CircleCalendarComponent,
DateInfoModalComponent,
NgCalendarModule,
NgxGaugeModule,
ChartModule
],
providers: [
AttendScanService,
@ -294,7 +308,8 @@ import { EmployeeInformationComponent } from './ui/employee-information/employee
MenuService,
OpenNativeSettings,
BarcodeScanner
]
],
entryComponents: [DateInfoModalComponent],
})
export class HmgCommonModule { }

@ -1189,6 +1189,9 @@ public getMonthNameAr(value: number): string {
public openPayslipPage() {
this.nav.navigateForward(['/payslip/home']);
}
public openTimeCardPage() {
this.nav.navigateForward(["/time-card/time-card-details"]);
}
public openEarningsPage() {
this.nav.navigateForward(['/payslip/Earnings']);
}
@ -1206,6 +1209,10 @@ public getMonthNameAr(value: number): string {
}
public navigatePage(path) {
this.nav.navigateForward([path]);
}
public reload(url: string, from: string) {
console.log('force reload called from:' + from);
// window.location.reload();

@ -2,6 +2,9 @@ import { Request } from '../../../services/models/request'
export class GetSubordinatesAttdStatusRequest extends Request{
//public static SHARED_DATA = '';
public P_SCHEDULE_DATE_FROM :any;
public P_SCHEDULE_DATE_TO :any;
public P_SCHEDULE_DATE_FROM: any;
public P_SCHEDULE_DATE_TO: any;
public SearchMonth: string;
public SearchYear: number;
}

@ -0,0 +1,14 @@
<calendar #slider [dateFormatter]="calendar.dateFormatter"
[monthviewEventDetailTemplate]="template"
[calendarMode]="calendar.mode"
[currentDate]="currentAvailableAppoDate"
[lockSwipes]="true"
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onTimeSelected)="onDayClicked($event)">
</calendar>
<ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
</ng-template>

@ -0,0 +1,124 @@
// .modalCss .modal-Wrapper {
// width: 600px;
// height: 300px;
// }
.chart-modal .modal-Wrapper {
--background: rgb(116, 108, 108) !important;
--border-color:white!important ;
width: 85%!important ;
height: 40px !important ;
}
.navbar{
font-size: 10px !important;
--background: #22C6B3 !important;
color: aliceblue !important;
// margin-top: 10px !important;
}
.menu{
// margin-left:330px !important;
margin-top: 0px !important;
font-size: 35px !important;
background: #22C6B3;
color: aliceblue;
margin-left: 0px !important;
}
.person{
margin-left:100px !important;
margin-top: 0px !important;
font-size: 23px !important;
background: #22C6B3 !important;
color: aliceblue !important;
}
.grid{
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 250px !important;
}
.ionSliders{
margin: 0px !important;
padding: 0px !important;
}
.ionSlide{
margin-top: 5px !important;
margin-left: 190px !important;
color: black !important;
}
.dateLable{
margin-left: 90px !important;
color: black !important;
font-size: small !important;
margin-top: 15px !important;
}
// h1{
// font-size: 15px !important;
// text-align: center !important;
// }
.arrowDropright{
margin-left:100px !important;
font-size: 20px !important;
color: rgb(168, 165, 165) !important;
margin-top: 15px !important;
}
.arrowDropleft{
font-size: 20px !important;
margin-left: 10px !important;
margin-top: 15px !important;
color: rgb(116, 108, 108) !important;
}
.ionLable{
font-size: 10px !important;
}
.number{
font-size: 18px !important;
font-weight: bolder !important;
color: black !important;
}
.header-div{
background:var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: #22C6B3;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color:var(--light);
text-transform: capitalize;
display: block;
position: relative;
height: 210px;
margin-bottom:60px;
// border-radius: 0px 0px 70px 70px;
}
.advanced-search-modal {
--height: 12cm !important;
--width: 80% !important;
--border-radius: 0.4cm;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CircleCalendarComponent } from './circle-calendar.component';
describe('CircleCalendarComponent', () => {
let component: CircleCalendarComponent;
let fixture: ComponentFixture<CircleCalendarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CircleCalendarComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CircleCalendarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,470 @@
import { Component, OnInit, Output, Input, ViewChild, ElementRef, EventEmitter } from '@angular/core';
import { TimeSlot } from './time.slot';
import { SharedDataService } from '../../services/shared-data-service/shared-data.service';
import { ModalController } from '@ionic/angular';
import { DateInfoModalComponent } from './date-info-modal/date-info-modal.component';
import { MenuResponse } from '../../services/menu/models/menu-response';
import * as moment from 'moment';
import { CommonService } from '../../services/common/common.service';
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { GetShiftDetailRequest } from 'src/app/time-card/service/models/get-shift-detail.request';
import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-request';
@Component({
selector: 'app-circle-calendar',
templateUrl: './circle-calendar.component.html',
styleUrls: ['./circle-calendar.component.scss']
})
export class CircleCalendarComponent implements OnInit {
@Input() eventsdateDayOff: any = [];
@Input() eventsdateAttend: any = [];
@Input() eventsdateAbsent: any = [];
@Output() monthTitle = new EventEmitter();
@Output() currentYear = new EventEmitter();
/////////////////////////////////TIME AND DATE VALUES///////////////////////////////
public monthName: any;
public yearDate: any;
public selEmp: string;
public selMenu: MenuResponse = new MenuResponse();
public respID: number;
public menuType: any;
public dayAndHoursPageNumber = 1;
public selectedFilters: any = {};
public selectedShiftFilter: any;
public arrDaysAttendance: any = [];
public arrDaysAbsent: any = [];
public arrDaysOff: any = [];
public selectedShift: any;
public shiftDetailsData: any = [];
public swipeDetailsData: any = [];
public arrOfAllList: any = [];
///////////////////////////////END//////////////////////////////////////////////////
eventsdata: any = [];
calendarModes = [
{ key: 'month', value: 'Month' },
{ key: 'week', value: 'Week' },
{ key: 'day', value: 'Day' },
];
public calendar = {
mode: this.calendarModes[0].key,
currentDate: new Date(),
currentAvailableAppoDate: new Date(),
dateFormatter: {
formatMonthViewDayHeader: (date: Date) => {
return this.getHeaderDay(date);
}
}
}
public currentAvailableAppoDate: any;
public eventsInput: any = [];
public events: TimeSlot[] = [];
public selectedTime: string;
public selectedDate: string;
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
public lockSwipeToPrev: any = true;
public currentDate: any;
public selectedDateObject: any;
public currentDateToSwipe: any;
public activeMonth: any;
isFirst: boolean;
arrFutrueDays: any;
eventsdateFutrue: any;
detailData: any;
constructor(
public sharedData: SharedDataService,
public mod: ModalController,
public common: CommonService,
public timeCardService: TimeCardService) { }
@ViewChild("slider") slides: ElementRef;
ngOnInit() {
this.isFirst = false;
this.reRenderCalendar();
}
ngAfterViewInit() {
setTimeout(() => {
this.reRenderCalendar();
}, 1000);
}
getHeaderDay(date: any) {
return this.weekDaysEnSort[date.getDay()];
}
reRenderCalendar() {
this.renderDate(this.eventsdateAbsent, 'absent');
this.renderDate(this.eventsdateAttend, 'present');
this.renderDate(this.eventsdateDayOff, 'dayoff');
}
dayClicked(data: any): void {
if (data.isPast) {
this.eventsInput = [];
this.selectedTime = null;
} else {
// At least one slot
if (data.events.length > 0) {
this.selectedDate = this.getDateISO(data.selectedTime);
//TODO replace later later
for (let i = 0; i < data.events.length; i++) {
}
this.presentTimeSlots(data.events, data.selectedTime);
this.currentDate = this.getHeaderDate(data.selectedTime);
} else {
this.eventsInput = [];
this.selectedTime = null;
}
//}
}
}
async presentTimeSlots(events: TimeSlot[], date: Date) {
this.eventsInput = [];
let index = 1;
for (let event of events) {
// event.end = this.cs.getKSATimeZone(event.end);
this.eventsInput.push({
name: 'radio' + index,
type: 'radio',
label: event.isoTime.substring(0, event.isoTime.length - 3),
value: event,
checked: index === 1
});
if (index == 1) {
this.selectedTime = event.isoTime;
this.selectedDateObject = new Date(event.end);
}
++index;
}
}
public getDateISO(date: Date): string {
return (
date.getFullYear().toString() +
"-" +
this.trailerZero(date.getMonth() + 1) +
"-" +
this.trailerZero(date.getDate())
);
}
onCurrentDateChanged(event) {
console.log("onCurrentDateChanged");
if (this.isFirst) {
const today = new Date();
this.currentDateToSwipe = event;
if (this.calendar.mode === 'month') {
if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
this.lockSwipeToPrev = true;
} else {
this.lockSwipeToPrev = false;
}
}
this.activeMonth = this.getHeaderMonth(event);
this.currentDate = this.getHeaderDate(event);
this.sharedData.setSharedData(this.activeMonth, "currentMonth");
let dateData = this.currentDate.toString()
dateData = dateData.split(" ")
this.getDayHoursTypeDetails(dateData[2], dateData[3]);
this.reRenderCalendar();
} else {
const today = new Date();
this.currentDateToSwipe = event;
if (this.calendar.mode === 'month') {
if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
this.lockSwipeToPrev = true;
} else {
this.lockSwipeToPrev = false;
}
}
this.activeMonth = this.getHeaderMonth(event);
this.currentDate = this.getHeaderDate(event);
this.sharedData.setSharedData(this.activeMonth, "currentMonth");
this.isFirst = true;
}
}
getHeaderDate(date: any) {
return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
}
private trailerZero(value: number): string {
const str = value.toString();
return str.length > 1 ? str : "" + str;
}
getHeaderMonth(date: any) {
return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
}
public getMonthName(value: number): string {
switch (value) {
case 1:
return "January";
case 2:
return "February";
case 3:
return "March";
case 4:
return "April";
case 5:
return "May";
case 6:
return "June";
case 7:
return "July";
case 8:
return "August";
case 9:
return "September";
case 10:
return "October";
case 11:
return "November";
case 12:
return "December";
}
}
public async dateModal(todayDate, shiftDetails) {
const modal = await this.mod.create({
component: DateInfoModalComponent,
showBackdrop: true,
backdropDismiss: true,
componentProps: {
TODAYDATE: todayDate,
SHIFTDETAILS: shiftDetails
}
});
modal.cssClass = "calendar-modal";
await modal.present();
}
public renderDate(arrayDays, cssClass) {
const td = document.querySelectorAll(".swiper-slide-active .monthview-datetable td:not(.text-muted)");
arrayDays.forEach(dateObj => {
const date = dateObj.startTime;
td.forEach(element => {
// tslint:disable-next-line: triple-equals
if (date.getDate() == element.textContent.trim()) {
element.classList.add(cssClass);
}
});
});
}
onDayClicked(x) {
// this.dateModal(this.currentDate);
let fullDate;
let arrOfFullDate;
for (let i = 0; i < this.arrOfAllList.length; i++) {
fullDate = this.arrOfAllList[i].SCHEDULE_DATE.split(" ")
if (this.common.convertISODateToJsonDate(fullDate[0]) == this.common.convertISODateToJsonDate(this.getDateISO(x.selectedTime))) {
arrOfFullDate = fullDate[0].split("/")
this.showDetails(this.arrOfAllList, fullDate[0]);
// console.log(arrOfFullDate[2])
// this.getDayHoursTypeDetails(this.getMonthName(parseInt(arrOfFullDate[0])),parseInt(arrOfFullDate[2]),true, fullDate[0])
} else {
console.log("NOT match");
}
}
}
getScheduleShiftDetails(RTP_ID) {
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = RTP_ID;
GetShiftDetailRequestObject.P_PAGE_NUM = 1;
GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
console.log(GetShiftDetailRequestObject);
this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
this.dateModal(this.detailData,result);
}
});
}
getSwipesDetails() {
const GetSwipesRequestObject = new GetSwipesRequest();
GetSwipesRequestObject.P_SELECTED_EMPLOYEE_NUMBER = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
GetSwipesRequestObject.P_SCHEDULE_DATE = this.common.convertISODateToJsonDate(this.selectedShift.SCHEDULE_DATE);
GetSwipesRequestObject.P_PAGE_NUM = 1;
GetSwipesRequestObject.P_PAGE_LIMIT = 10;
this.timeCardService.getSwipes(GetSwipesRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
this.swipeDetailsData = result.GetSwipesList;
}
});
}
/////////////////////////this function should be in common service/////////////////////////
public getDayHoursTypeDetails(month, year) {
this.monthTitle.emit(month);
this.currentYear.emit(year);
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
this.monthName = month//moment().format('MMMM');
this.yearDate = year//moment().format('YYYY');
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.menuType = this.selMenu.List_Menu.MENU_TYPE;
dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
dayAndHoursReqObj.SearchMonth = this.monthName;
dayAndHoursReqObj.SearchYear = this.yearDate;
dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
dayAndHoursReqObj.P_PAGE_LIMIT = 100;
if (Object.keys(this.selectedFilters).length !== 0) {
dayAndHoursReqObj.P_SHT_TYPE = this.selectedShiftFilter;
dayAndHoursReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
dayAndHoursReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
dayAndHoursReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
dayAndHoursReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
dayAndHoursReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
dayAndHoursReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
dayAndHoursReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
dayAndHoursReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
dayAndHoursReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
dayAndHoursReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
dayAndHoursReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
}
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.arrOfAllList = result.GetDayHoursTypeDetailsList;
this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'calendarDateValue');
// this.common.openTimeCardPage();
}
});
}
showDetails(allData, date){
let fullDate;
for (let i = 0; i < allData.length; i++) {
fullDate = allData[i].SCHEDULE_DATE.split(" ")
if(fullDate[0] == date){
this.detailData = allData[i]
console.log("date details:")
console.log(this.detailData);
this.getScheduleShiftDetails(this.detailData.RTP_ID);
}
}
}
countAllAttendDays(allDays) {
this.eventsdateDayOff = [];
this.eventsdateAttend = [];
this.eventsdateAbsent = [];
this.arrDaysOff = [];
this.arrDaysAttendance = [];
this.arrDaysAbsent = [];
this.eventsdateFutrue = [];
this.arrFutrueDays = [];
for (let i = 0; i < allDays.length; i++) {
if (allDays[i].DAY_TYPE == "OFF") {
//offDay
this.arrDaysOff.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && !allDays[i].REMARKS) {
//attendace
this.arrDaysAttendance.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && allDays[i].REMARKS) {
//absent
this.arrDaysAbsent.push(
{
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: "09:00:00",
allDay: false
}
);
} else {
this.arrFutrueDays.push(
{
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: "09:00:00",
allDay: false
}
);
}
}
// this.common.sharedService.setSharedData(this.arrDaysOff,'calendarDayOffDateValue');
// this.common.sharedService.setSharedData(this.arrDaysAttendance,'calendarAttendanceDateValue');
// this.common.sharedService.setSharedData( this.arrDaysAbsent,'calendarDaysAbsentDateValue');
this.eventsdateDayOff = this.arrDaysOff;
this.eventsdateAttend = this.arrDaysAttendance;
this.eventsdateAbsent = this.arrDaysAbsent;
this.eventsdateFutrue = this.arrFutrueDays;
this.reRenderCalendar();
}
}

@ -0,0 +1,176 @@
<ion-grid class="headerGrid">
<ion-row style="margin-left: -130px; margin-top: 27px;">
<ion-col size="10">
<div style="width: 100%;">
<div class="result-graph">
<div class="request-heading">
<span></span>
</div>
<div class="result-text-container">
<h2 class="percentage">{{percentage}}</h2>
<span>Completed <br><br><br><br></span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div>
</ion-col>
<ion-col size="2">
<div class="div" >
<!-- <p class="p1">{{scheduleDate}}</p> -->
<ion-row >
<p class="p0">{{nameDay}}</p>
</ion-row>
<ion-row >
<p class="p1">{{day}}</p>
</ion-row>
<ion-row >
<p class="p2">{{nameMonth}}</p>
</ion-row>
<ion-row >
<p class="p3">{{year}}</p>
</ion-row>
<ion-row>
<p class="p5">{{ts.trPK('attendance','present')}}</p>
</ion-row>
<!-- <p class="p2">{{todayDate}}</p>
<p class="p3">{{monthDate}}</p>
<p class="p4">{{month}}</p> -->
</div>
</ion-col>
</ion-row>
</ion-grid>
<div >
<ion-grid class="grid">
<ion-row class="gridrow">
<ion-col class="liftcol">
<ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','shift-time')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"><p >{{scheduled}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','regular')}}</p>
</ion-row>
</ion-col>
</ion-row>
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow" >
<ion-col class="liftcol">
<ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-in')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"> <p >{{endDate}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-out')}} </p>
</ion-row>
</ion-col>
</ion-row >
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow">
<ion-col class="liftcol">
<ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','late-in')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"> <p >{{excess}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','excess')}}</p>
</ion-row>
</ion-col>
</ion-row >
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow">
<ion-col class="liftcol">
<ion-row class="amountlabel"> <p >{{shortage}}</p> </ion-row>
<ion-row class="rowlabel">
<p>{{ts.trPK('attendance-tracking','shortage')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"> <p >{{earlyOut}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','early-out')}}</p>
</ion-row>
</ion-col>
</ion-row>
<!-- //////////////////////////////////////////////////////////////// -->
<!-- <ion-row>
<ion-col>
<p style="position: relative; left: 20px;">{{shiftTime}}</p>
<p style="position: relative; left: 25px; color: gray;">{{ts.trPK('attendance-tracking','shift-time')}}</p>
</ion-col>
</ion-row>
<div style="background-color: gray; height: 1px;"></div>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{scheduled}}</p>
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','regular')}}</p>
</ion-col>
</ion-row>
<div style="background-color: gray; height: 0.3px;"></div>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{startDate}}</p>
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','check-in')}}</p>
<p style="position: relative; left: 20px; color: gray;">CHECK-IN</p> -->
<!-- </ion-col>
</ion-row>
<div style="background-color: gray; height: 1px;"></div>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{endDate}}</p>
<p style="position: relative; left: 40px; color: gray;">{{ts.trPK('attendance-tracking','check-out')}} </p> -->
<!-- <p style="position: relative; left: 40px; color: gray;">CHECK-OUT</p> -->
<!-- </ion-col>
</ion-row> -->
<!-- <div style="background-color: gray; height: 0.3px;"></div> -->
<!-- </ion-grid>
</div>
<div style="background-color: gray;height: 100%;margin-left: 150px;margin-top: -60px;margin-right: 150px;">
<ion-grid style="width: 140px;">
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{lateIn}}</p>
<p style="position: relative; left: 30px; color: gray;">{{ts.trPK('attendance-tracking','late-in')}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{excess}}</p>
<p style="position: relative; left: 30px; color: gray;">{{ts.trPK('attendance-tracking','excess')}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{shortage}}</p>
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','shortage')}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{earlyOut}}</p>
<p style="position: relative; left: 40px; color: gray;">{{ts.trPK('attendance-tracking','early-out')}}</p>
</ion-col>
</ion-row> -->
</ion-grid>
</div>

@ -0,0 +1,163 @@
.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;
margin: 0;
position: absolute;
left: 58%;
top: 67%;
display: block;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
h2 {
font-size: 25px;
// font-family: WorkSans-Bold;
font-weight: bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
color: rgb(163, 163, 163) !important;
}
}
.today-graph{
display: block;
height: 127px;
width: 288px;
}
.amountlabel{
color: black !important;
font-weight: bold !important;
font-size: 13px !important;
// border-top: 1px solid rgb(163, 163, 163) !important;
margin-left: 0px !important;
margin-bottom: -29px !important;
}
.rowlabel{
color: rgb(163, 163, 163) !important;
font-size: 13px !important;
font-family: WorkSans-Bold;
}
.grid{
padding-bottom: -20px !important;
padding-top: -20px !important;
height: 360px !important;
}
.liftcol{
// padding-top: 1px !important;
// padding-bottom: 1px !important;
border-right: 1px solid rgb(163, 163, 163) !important;
}
.rightcol{
margin-left: 5px !important;
}
.gridrow{
border-top: 1px solid rgb(163, 163, 163) !important;
margin-left: 19px;
margin-right: 12px;
}
.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-radius: 9px;
width: 241%;
margin-right: -226px;
}
.p0{ margin-bottom: -15px !important;
color: black !important;
margin-left: 24px;
font-weight: bold !important;
font-size: 17px !important;
margin-top: 8px;
}
.p1{
margin-bottom: -7px !important;
color: black !important;
/* margin-right: 25px !important; */
font-family: WorkSans-Bold !important;
margin-left: 36px;
/* margin-bottom: -82px; */
font-size: 33px;
margin-top: 10px;
}
.p2{ font-weight: bold !important;
font-size: 17px !important;
margin-bottom: 43px !important;
margin-top: 0px !important;
color: black !important;
font-weight: bold !important;
margin-left: 33px;
}
.p3{ /* margin-bottom: -72px !important; */
color: black !important;
font-weight: bold !important;
font-size: 19px;
margin-top: -43px;
margin-left: 27px;
}
.p4{ margin-bottom: 56px !important;
margin-top: -26px !important;
color: black !important;
}
// .pdiv{background-color: gray;height: 26px;}
.p5{
font-size: 14px;
text-align: center;
background-color: #094875;
color: white;
margin-top: -13px;
margin-bottom: -3px;
height: 21px;
width: 110px;
padding-top: 7px;
/* font-family: WorkSans-Bold !important; */
padding-bottom: 21px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DateInfoModalComponent } from './date-info-modal.component';
describe('DateInfoModalComponent', () => {
let component: DateInfoModalComponent;
let fixture: ComponentFixture<DateInfoModalComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DateInfoModalComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DateInfoModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,234 @@
import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { ModalController, NavParams, IonInfiniteScroll } from '@ionic/angular';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
// import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
@Component({
selector: 'app-date-info-modal',
templateUrl: './date-info-modal.component.html',
styleUrls: ['./date-info-modal.component.scss'],
})
export class DateInfoModalComponent implements OnInit {
[x: string]: any;
gaugeType = "full";
gaugeValue = 28.3;
gaugeLabel = "Days";
@Input() TODAYDATE: any;
@Input() SHIFTDETAILS:any;
today: any;
todayDate: any;
month: any;
monthDate: any;
excess: any;
shortage:any;
lateIn:any;
scheduled:any;
earlyOut:any;
shiftTime:any;
startDate:any;
endDate:any;
shift:any;
percentage:any;
data:any;
scheduleDate:any;
tests:any;
year: any;
nameMonth:any;
nameDay: any;
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
// public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
public options = {
cutoutPercentage: 85,
tooltips: { enabled: false },
legend: { display: false }
};
constructor(public modalController: ModalController, public navParams: NavParams, public ts:TranslatorService,
) { }
ngOnInit() {
// this.shift =this.common.sharedService.getSharedData('shiftDetailsData');
console.log(this.TODAYDATE.SCHEDULE_DATE.split(" ")[0].split(" "))
//22/2/2019
console.log(this.TODAYDATE.EXCESS_HRS)
this.excess = this.TODAYDATE.EXCESS_HRS
console.log(this.TODAYDATE.LATE_IN_HRS)
this.lateIn = this.TODAYDATE.LATE_IN_HRS
console.log(this.TODAYDATE.SHORTAGE_HRS)
this.shortage = this.TODAYDATE.SHORTAGE_HRS
console.log(this.TODAYDATE.SCHEDULED_HRS)
this.scheduled = this.TODAYDATE.SCHEDULED_HRS
console.log(this.TODAYDATE.EARLY_OUT_HRS )
this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS
this.scheduleDate = this.TODAYDATE. SCHEDULE_DATE
console.log(this.TODAYDATE. SCHEDULE_DATE)
// console.log(this.SHIFTDETAILS)
// console.log(this.SHIFTDETAILS.SHT_NAME)
this.shiftTime= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_NAME
this.startDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_TIME
this.endDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_TIME
this.percentage=this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].PERCENTAGE
this.percChart= this.percentage.substring(0,this.percentage.indexOf("%"));
let test = this.scheduleDate;
let splitdate =test.split(" ");
let date =splitdate[0];
let test1 =date.split("/");
console.log("" + test1);
this. month =test1[1];
console.log("" + this.month);
this. year =test1[2];
console.log("" + this.year);
this.day =test1[0];
console.log("date: "+ date);
console.log("this.percChart: " +this.percChart);
this.nameMonth=this.getMonthName(parseInt(this.month))
console.log("" + this.nameMonth)
console.log("" + this.month)
this.nameDay=this.getHeaderDay(new Date(date))
console.log("" + this.nameDay)
// let testnamdeday=this.weekDaysEnSort[new Date(date).getDay()];
// console.log("testnamdeday" + testnamdeday)
let d = new Date(date);
let dayName = d.toString().split(' ')[0];
this.data = {
labels: ['percentage'],
datasets: [
{
data: [this.percChart],
// data: [96],
backgroundColor: [
'#22C6B3',
// '#22C6B3'
],
borderWidth: 2
}]
};
// this.startDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_DATETIME;
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_TIME)
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_DATETIME );
// this.endDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_DATETIME ;
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_TIME )
// SHT_ACTUAL_START_DATETIME
// SHT_ACTUAL_START_TIME
// SHT_ACTUAL_END_DATETIME
// SHT_ACTUAL_END_TIME
//let dateData = this.TODAYDATE.split(' ');
// console.log(dateData)
// this.today = dateData[0];
// this.todayDate = dateData[1];
// this.monthDate = dateData[2];
// this.month = dateData[3];
// console.log(this.todayDate);
// console.log(this.today);
// console.log(this.monthDate);
// console.log(this.month);
}
public getMonthName(value: number): string {
switch (value) {
case 1:
return "Jan";
case 2:
return "Feb";
case 3:
return "Mar";
case 4:
return "Apr";
case 5:
return "May";
case 6:
return "Jun";
case 7:
return "Jul";
case 8:
return "Aug";
case 9:
return "Sep";
case 10:
return "Oct";
case 11:
return "Nov";
case 12:
return "Dec";
}
}
getHeaderDay(date: any) {
// return this.weekDaysEnSort[date.getDay()];
return this.weekDaysEn[date.getDay()];
}
// @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
// public options = {
// cutoutPercentage: 80,
// tooltips: { enabled: false },
// legend: { display: false }
// };
//
//return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
// create muthod recive date
// them get day date.getDay()
// them get month name this.getMonthName(date.getMonth() + 1)
// date.getFullYear()
//implemeition this.getMonthName()
//SCHEDULE_DATE: "2/1/2020 12:00:00 AM"
//GetDayHoursTypeDetailsList
// // date = {scheduleDate};
// let a = date.split(" ");
// let date = a[0];
//test=date.split("/")
// test[0]
// test[1]
// test[3]
// let date2 = date.split("/");
// String part1 = parts[0];
// String part2 = parts[1];
// String part3 = parts[2];
}

@ -0,0 +1,21 @@
export class TimeSlot {
constructor(isoTime: string, startDate: string, end: string) {
this.isoTime = isoTime;
this.start = startDate;
this.end = end;
this.allDay = true;
this.draggable = false;
}
public eventTimeLabel() {
return new Date(this.end).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
}
// event time in iso format
isoTime: string;
// start of event day
start: string;
// event date time
end: string;
allDay: boolean;
draggable: boolean;
}

@ -15,24 +15,27 @@ import { attendanceSwipeScannerRequest } from './models/attendanceSwipe.Request'
import { Response } from 'src/app/hmg-common/services/models/response';
import { AttendanceService } from './services/attendance.services';
import { LoginRequest } from '../hmg-common/services/authentication/models/login.request';
import {FileUploaderComponent} from '../hmg-common/ui/file-uploader/file-uploader.component'
import { Camera} from '@ionic-native/Camera/ngx';
import { FileUploaderComponent } from '../hmg-common/ui/file-uploader/file-uploader.component'
import { Camera } from '@ionic-native/Camera/ngx';
import { File } from '@ionic-native/file/ngx';
import { DomSanitizer } from '@angular/platform-browser';
import { SharedDataService } from '../hmg-common/services/shared-data-service/shared-data.service';
import { DevicePermissionsService } from '../hmg-common/services/device-permissions/device-permissions.service';
import { DashboredService } from '../hmg-common/services/dashbored/dashbored.service';
import { OrganizationSalariesResponse } from '../hmg-common/services/dashbored/organization-salaries.response';
import { OpenMissingSwipesResponse} from '../hmg-common/services/dashbored/open-missing-swipes.response';
import {PerformanceAppraisalResponse} from '../hmg-common/services/dashbored/performance-appraisal.response';
import { OpenMissingSwipesResponse } from '../hmg-common/services/dashbored/open-missing-swipes.response';
import { PerformanceAppraisalResponse } from '../hmg-common/services/dashbored/performance-appraisal.response';
import { AttendanceTrackingResponse } from '../hmg-common/services/dashbored/attendance-tracking.response';
import { OpenPeriodDatesResponse } from '../hmg-common/services/dashbored/models/openPeriodDatesResponse';
import {GetSubordinatesAttdStatusRequest} from '../hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest';
import {GetSubordinatesLeavesRequest} from '../hmg-common/services/dashbored/models/GetSubordinatesLeavesRequest'
import {GetOpenNotificationsResponse} from '../hmg-common/services/dashbored/models/GetOpenNotificationsResponse'
import {GetSubordinatesAttdStatusResponse} from '../hmg-common/services/dashbored/models/GetSubordinatesAttdStatusResponse'
import {GetSubordinatesLeavesResponse} from '../hmg-common/services/dashbored/models/GetSubordinatesLeavesResponse'
import { GetSubordinatesAttdStatusRequest } from '../hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest';
import { GetSubordinatesLeavesRequest } from '../hmg-common/services/dashbored/models/GetSubordinatesLeavesRequest'
import { GetOpenNotificationsResponse } from '../hmg-common/services/dashbored/models/GetOpenNotificationsResponse'
import { GetSubordinatesAttdStatusResponse } from '../hmg-common/services/dashbored/models/GetSubordinatesAttdStatusResponse'
import { GetSubordinatesLeavesResponse } from '../hmg-common/services/dashbored/models/GetSubordinatesLeavesResponse'
import { AccrualService } from '../accrual-balances/services/accrual.service';
import { GetDayAndHoursDetailsRequest } from '../time-card/service/models/get-day-hours-type-details.request';
import * as moment from 'moment';
import { TimeCardService } from '../time-card/service/time-card.service';
@Component({
selector: 'app-home',
@ -106,8 +109,8 @@ export class HomePage implements OnInit {
// ];
public slideOptsOne = {
slidesPerView: 3.5,
spaceBetween: 10
slidesPerView: 3.5,
spaceBetween: 10
};
public slideOptsTwo = {
slidesPerView: 3.2,
@ -122,7 +125,22 @@ export class HomePage implements OnInit {
public displayTime: any;
public menuEntries: any;
public percent: any;
/////////////////////////////////TIME AND DATE VALUES///////////////////////////////
public monthName: any;
public yearDate: any;
public selEmp: string;
public selMenu: MenuResponse = new MenuResponse();
public respID: number;
public menuType: any;
public dayAndHoursPageNumber = 1;
public selectedFilters: any = {};
public selectedShiftFilter: any;
public arrDaysAttendance: any = [];
public arrDaysAbsent: any = [];
public arrDaysOff: any = [];
public arrFutrueDays: any =[];
///////////////////////////////END//////////////////////////////////////////////////
constructor(
public ts: TranslatorService,
public menu: MenuController,
@ -143,13 +161,16 @@ export class HomePage implements OnInit {
private file: File,
private permissions: DevicePermissionsService,
public DS: DashboredService,
public accrualService: AccrualService
public accrualService: AccrualService,
////////////////////////////////////////TIME AND DATE////////////////////////////
public timeCardService: TimeCardService
/////////////////////END/////////////////////////////////////////////////////////
) {
this.events.subscribe('img-change', displayImg => {
this.userImage = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,' + displayImg);
console.log('html saved img: ' + this.userImage);
});
}
}
ngOnInit() {
// this.getUserDetails();
@ -174,7 +195,7 @@ export class HomePage implements OnInit {
this.percent = 100 - ((this.remainingTime / this.scheduledTime) * 100);
this.displayTime = this.getSecondsAsDigitalClock(this.remainingTime);
this.startTimer();
}
}
startTimer() {
this.runTimer = true;
@ -214,7 +235,7 @@ export class HomePage implements OnInit {
getDeviceLocation() {
const isVirtual = this.device.isVirtual;
if (isVirtual === true){
if (isVirtual === true) {
alert('emulater>>>>>>>' + isVirtual);
alert('You are using virtual device');
return false;
@ -249,17 +270,17 @@ export class HomePage implements OnInit {
}
// getCount() {
// const req: any = {};
// this.menuService.getNotificationCount(req).subscribe((result: any) => {
// if (this.common.validResponse(result)) {
// this.notBadge =
// result.GetOpenNotificationsNumList.P_OPEN_NOTIFICATIONS_NUM;
// if (this.notBadge <= 0) {
// this.notBadge = null;
// }
// this.events.publish("getNotCount", this.notBadge);
// }
// });
// const req: any = {};
// this.menuService.getNotificationCount(req).subscribe((result: any) => {
// if (this.common.validResponse(result)) {
// this.notBadge =
// result.GetOpenNotificationsNumList.P_OPEN_NOTIFICATIONS_NUM;
// if (this.notBadge <= 0) {
// this.notBadge = null;
// }
// this.events.publish("getNotCount", this.notBadge);
// }
// });
// }
ionViewDidEnter() {
@ -293,64 +314,64 @@ export class HomePage implements OnInit {
console.log(user);
}
});
}
}
callDashboardServices() {
this.getMenu();
this.setServicesPrivilage();
this.openNotificationsDashbored();
this.showOpenMissingSwipes();
this.showAttendanceTracking();
this.getAccrualBalance();
}
callDashboardServices() {
this.getMenu();
this.setServicesPrivilage();
this.openNotificationsDashbored();
this.showOpenMissingSwipes();
this.showAttendanceTracking();
this.getAccrualBalance();
}
public Vacation_Rule() {
this.common.navigateForward('/vacation-rule/home');
}
public Vacation_Rule() {
this.common.navigateForward('/vacation-rule/home');
}
private getMenu() {
this.menuService.getMenu().subscribe((result: MenuResponse) => {
this.handleMenuResult(result);
});
}
private getMenu() {
this.menuService.getMenu().subscribe((result: MenuResponse) => {
this.handleMenuResult(result);
});
}
private handleMenuResult(result) {
if (this.common.validResponse(result)) {
if (this.common.hasData(result.List_Menu)) {
console.log('list menu');
this.menuList = result.List_Menu;
this.getMenuDetails();
}
private handleMenuResult(result) {
if (this.common.validResponse(result)) {
if (this.common.hasData(result.List_Menu)) {
console.log('list menu');
this.menuList = result.List_Menu;
this.getMenuDetails();
}
}
}
private accrualBalance() {
this.common.openAccuralPage();
}
private accrualBalance() {
this.common.openAccuralPage();
}
private changeImage() {
this.common.openChangeImagePage();
}
private changeImage() {
this.common.openChangeImagePage();
}
public getMenuDetails() {
const item = this.menuList[0];
const selMenu: MenuResponse = new MenuResponse();
selMenu.List_Menu = item;
selMenu.userid = this.userData.EMPLOYEE_NUMBER;
console.log('menu: ' + selMenu.List_Menu);
this.common.sharedService.setSharedData(selMenu, MenuResponse.SHARED_DATA);
this.getMenuEntries(item);
// if (item.MENU_TYPE === 'M') {
// this.common.openMyTeamPage();
// // this.navCtrl.push("MySubordinatePage");
// } else if (item.MENU_TYPE === 'S') {
// this.common.sharedService.setSharedData(item, 'mySpecList');
// this.common.openMySpecialistPage();
// // this.navCtrl.push('MySpecialistPage',{"mySpecList":item});
// } else {
// this.getMenuEntries(item);
// }
}
public getMenuDetails() {
const item = this.menuList[0];
const selMenu: MenuResponse = new MenuResponse();
selMenu.List_Menu = item;
selMenu.userid = this.userData.EMPLOYEE_NUMBER;
console.log('menu: ' + selMenu.List_Menu);
this.common.sharedService.setSharedData(selMenu, MenuResponse.SHARED_DATA);
this.getMenuEntries(item);
// if (item.MENU_TYPE === 'M') {
// this.common.openMyTeamPage();
// // this.navCtrl.push("MySubordinatePage");
// } else if (item.MENU_TYPE === 'S') {
// this.common.sharedService.setSharedData(item, 'mySpecList');
// this.common.openMySpecialistPage();
// // this.navCtrl.push('MySpecialistPage',{"mySpecList":item});
// } else {
// this.getMenuEntries(item);
// }
}
openMyTeamPage() {
this.common.openMyTeamPage();
@ -373,113 +394,117 @@ export class HomePage implements OnInit {
LoginRequest.NATIONALITY_CODE,
false
);
request.P_SELECTED_EMPLOYEE_NUMBER = selEmpNo;
request.P_MENU_TYPE = item.MENU_TYPE;
request.NationalityCode = nationality;
// set emp and resp id
console.log('set data');
this.common.sharedService.setSharedData(
selEmpNo,
MenuResponse.SHARED_SEL_EMP
);
this.common.sharedService.setSharedData(
request.P_SELECTED_RESP_ID,
MenuResponse.SHARED_SEL_RESP_ID
);
this.eitService
.getMenuEntries(request)
.subscribe((result: MenuResponse) => {
this.handleMenuEntiresResult(result);
});
}
nationality = this.common.sharedService.getSharedData(
LoginRequest.NATIONALITY_CODE,
false
);
request.P_SELECTED_EMPLOYEE_NUMBER = selEmpNo;
request.P_MENU_TYPE = item.MENU_TYPE;
request.NationalityCode = nationality;
// set emp and resp id
console.log('set data');
this.common.sharedService.setSharedData(
selEmpNo,
MenuResponse.SHARED_SEL_EMP
);
this.common.sharedService.setSharedData(
request.P_SELECTED_RESP_ID,
MenuResponse.SHARED_SEL_RESP_ID
);
this.eitService
.getMenuEntries(request)
.subscribe((result: MenuResponse) => {
this.handleMenuEntiresResult(result);
});
}
sortMenuEntires(list) {
const tree = this.common.list_to_tree(list);
this.menuEntries = tree;
console.log(this.menuEntries);
this.common.sharedService.setSharedData(tree, 'menuEntries');
// this.common.navigateForward("/eit/homepage");
// this.common.openEITPage();
}
sortMenuEntires(list) {
const tree = this.common.list_to_tree(list);
this.menuEntries = tree;
console.log(this.menuEntries);
this.common.sharedService.setSharedData(tree, 'menuEntries');
// this.common.navigateForward("/eit/homepage");
// this.common.openEITPage();
}
private handleMenuEntiresResult(result) {
if (this.common.validResponse(result)) {
if (this.common.hasData(result.GetMenuEntriesList)) {
this.sortMenuEntires(result.GetMenuEntriesList);
}
private handleMenuEntiresResult(result) {
if (this.common.validResponse(result)) {
if (this.common.hasData(result.GetMenuEntriesList)) {
this.sortMenuEntires(result.GetMenuEntriesList);
}
}
}
parentFn($event: string) {
console.log($event); // this will output 'hello from child'
}
parentFn($event: string) {
console.log($event); // this will output 'hello from child'
}
private Change_password() {
this.common.openChangePassword();
}
private Change_password() {
this.common.openChangePassword();
}
private openPayslip() {
this.common.openPayslipPage();
}
private openPayslip() {
this.common.openPayslipPage();
}
private attendance() {
this.permissions.requestCameraAutherization().then(granted => {
this.camera = granted as boolean;
if (this.camera) {
this.scanCode();
}
}
);
private attendance() {
this.permissions.requestCameraAutherization().then(granted => {
this.camera = granted as boolean;
if (this.camera) {
this.scanCode();
}
}
);
}
scanCode() {
this.barcodeScanner.scan().then(barcodeData => {
this.scannedResult = barcodeData;
this.deviceID = this.device.uuid;
this.swipeAttendance();
}).catch(err => {
console.log('Error', err);
});
}
scanCode() {
this.barcodeScanner.scan().then(barcodeData => {
this.scannedResult = barcodeData;
this.deviceID = this.device.uuid;
this.swipeAttendance();
}).catch(err => {
console.log('Error', err);
});
}
swipeAttendance() {
const request: attendanceSwipeScannerRequest = new attendanceSwipeScannerRequest();
request.Latitude = this.lat;
request.Longitude = this.longt;
request.QRValue = this.scannedResult.text;
request.UID = this.deviceID;
request.UserName = this.userData.EMPLOYEE_NUMBER;
console.log(JSON.stringify(request));
this.attendanceService
.attendanceSwipeScanner(request, () => {
console.log('Error inside in swipe attendance');
})
.subscribe((result: Response) => {
if (this.common.validResponse(result)) {
this.common.presentAlert(this.ts.trPK('home', 'swipeAlertSuccess'));
this.showAttendanceTracking();
}
// else {
// this.common.presentAlert(this.ts.trPK('home', 'swipeAlertFailed'));
// }
});
}
swipeAttendance() {
const request: attendanceSwipeScannerRequest = new attendanceSwipeScannerRequest();
request.Latitude = this.lat;
request.Longitude = this.longt;
request.QRValue = this.scannedResult.text;
request.UID = this.deviceID;
request.UserName = this.userData.EMPLOYEE_NUMBER;
console.log(JSON.stringify(request));
this.attendanceService
.attendanceSwipeScanner(request, () => {
console.log('Error inside in swipe attendance');
})
.subscribe((result: Response) => {
if (this.common.validResponse(result)) {
this.common.presentAlert(this.ts.trPK('home', 'swipeAlertSuccess'));
this.showAttendanceTracking();
} else {
this.common.presentAlert(this.ts.trPK('home', 'swipeAlertFailed'));
}
});
}
openPersonalInfo() {
this.common.openProfile();
}
openPersonalInfo() {
this.common.openProfile();
}
/*************************************Dashboards Services**********************************************************8 */
/*************************************Dashboards Services**********************************************************8 */
showOrganizationSalaries() {
this.DS.getOrganizationSalaries() .subscribe((result: OrganizationSalariesResponse ) => {
showOrganizationSalaries() {
this.DS.getOrganizationSalaries().subscribe((result: OrganizationSalariesResponse) => {
});
}
showOpenMissingSwipes() {
this.DS.getOpenMissingSwipes() .subscribe((result: OpenMissingSwipesResponse) => {
showOpenMissingSwipes() {
this.DS.getOpenMissingSwipes().subscribe((result: OpenMissingSwipesResponse) => {
if (this.common.validResponse(result)) {
const key = 'GetOpenMissingSwipesList';
this.statsButtons[2].statsValue = result[key].P_OPEN_MISSING_SWIPES;
@ -487,12 +512,12 @@ export class HomePage implements OnInit {
});
}
showPerformanceAppraisal() {
this.DS.getPerformanceAppraisal() .subscribe((result: PerformanceAppraisalResponse) => {
showPerformanceAppraisal() {
this.DS.getPerformanceAppraisal().subscribe((result: PerformanceAppraisalResponse) => {
});
}
convertInSeconds(time: any) {
convertInSeconds(time: any) {
const hours = parseInt(time[0], 10);
const minutes = parseInt(time[1], 10);
let seconds = parseInt(time[2], 10);
@ -500,7 +525,7 @@ export class HomePage implements OnInit {
return seconds;
}
convertAndAssignTime(data) {
convertAndAssignTime(data) {
console.log(data);
this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':'));
this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':'));
@ -508,8 +533,8 @@ export class HomePage implements OnInit {
this.initTimer();
}
showAttendanceTracking() {
this.DS.getAttendanceTracking() .subscribe((result: AttendanceTrackingResponse) => {
showAttendanceTracking() {
this.DS.getAttendanceTracking().subscribe((result: AttendanceTrackingResponse) => {
if (this.common.validResponse(result)) {
const key = 'GetAttendanceTrackingList';
this.convertAndAssignTime(result[key]);
@ -517,16 +542,16 @@ export class HomePage implements OnInit {
});
}
openPeriodDateDashbored() {
this.DS.getOpenPeriodDates( () => {console.log('Error '); } ).subscribe((result: OpenPeriodDatesResponse) => {
openPeriodDateDashbored() {
this.DS.getOpenPeriodDates(() => { console.log('Error '); }).subscribe((result: OpenPeriodDatesResponse) => {
if (this.common.validResponse(result)) {
console.log('response');
}
});
}
openNotificationsDashbored() { // work list
this.DS.getOpenNotifications( () => { console.log('Error '); }).subscribe((result: GetOpenNotificationsResponse) => {
openNotificationsDashbored() { // work list
this.DS.getOpenNotifications(() => { console.log('Error '); }).subscribe((result: GetOpenNotificationsResponse) => {
if (this.common.validResponse(result)) {
const key = 'P_OPEN_NTF_NUMBER';
this.statsButtons[0].statsValue = result[key];
@ -535,11 +560,11 @@ export class HomePage implements OnInit {
});
}
getSubordinatesLeaves() {
getSubordinatesLeaves() {
const request: GetSubordinatesLeavesRequest = new GetSubordinatesLeavesRequest();
request.P_DATE_FROM = '/Date(1578603600000+0300)/'; // test
request.P_DATE_TO = '/Date(1576011600000+0300)/'; // test
this.DS.getSubordinatesLeaves( request, () => {console.log('Error '); } ).subscribe((result: GetSubordinatesLeavesResponse) => {
this.DS.getSubordinatesLeaves(request, () => { console.log('Error '); }).subscribe((result: GetSubordinatesLeavesResponse) => {
if (this.common.validResponse(result)) {
console.log('response');
console.log(result);
@ -548,11 +573,11 @@ export class HomePage implements OnInit {
}
getSubordinatesAttStatus() {
getSubordinatesAttStatus() {
const request: GetSubordinatesAttdStatusRequest = new GetSubordinatesAttdStatusRequest();
request.P_SCHEDULE_DATE_FROM = '/Date(1578603600000+0300)/'; // test
request.P_SCHEDULE_DATE_TO = '/Date(1576011600000+0300)/'; // test
this.DS.getSubordinatesAttStatus( request, () => {console.log('Error '); }).subscribe((result: GetSubordinatesAttdStatusResponse) => {
this.DS.getSubordinatesAttStatus(request, () => { console.log('Error '); }).subscribe((result: GetSubordinatesAttdStatusResponse) => {
if (this.common.validResponse(result)) {
console.log('response');
console.log(result);
@ -560,7 +585,7 @@ export class HomePage implements OnInit {
});
}
openPage(subMenu) {
openPage(subMenu) {
let selMenu: MenuResponse = new MenuResponse();
selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
selMenu.GetMenuEntriesList = subMenu;
@ -573,49 +598,144 @@ export class HomePage implements OnInit {
if (subMenu.REQUEST_TYPE === 'PAYSLIP') {
this.common.openPayslipPage();
}
if (subMenu.REQUEST_TYPE === 'TIME_CARD') {
this.getDayHoursTypeDetails();
}
}
getAccrualBalance() {
const today = new Date();
const day = today.getDate();
const month = today.getMonth() + 1;
const year = today.getFullYear();
const todayDate = month + '/' + day + '/' + year;
const effectiveDate = todayDate;
const request = {
P_SELECTED_EMPLOYEE_NUMBER: this.userData.EMPLOYEE_NUMBER,
P_EFFECTIVE_DATE: effectiveDate
};
this.accrualService
.getAccrualBalances(request)
.subscribe((result: any) => {
if (this.common.validResponse(result)) {
let totalTicketsLeft = 0;
for (const accrualBalance of result.GetAccrualBalancesList) {
if (accrualBalance.ACCURAL_PLAN_NAME === 'HMG Annual Vacation Accrual Plan') {
this.statsButtons[3].statsValue = accrualBalance.ACCRUAL_NET_ENTITLEMENT;
} else {
totalTicketsLeft = totalTicketsLeft + accrualBalance.ACCRUAL_NET_ENTITLEMENT;
}
getAccrualBalance() {
const today = new Date();
const day = today.getDate();
const month = today.getMonth() + 1;
const year = today.getFullYear();
const todayDate = month + '/' + day + '/' + year;
const effectiveDate = todayDate;
const request = {
P_SELECTED_EMPLOYEE_NUMBER: this.userData.EMPLOYEE_NUMBER,
P_EFFECTIVE_DATE: effectiveDate
};
this.accrualService
.getAccrualBalances(request)
.subscribe((result: any) => {
if (this.common.validResponse(result)) {
let totalTicketsLeft = 0;
for (const accrualBalance of result.GetAccrualBalancesList) {
if (accrualBalance.ACCURAL_PLAN_NAME === 'HMG Annual Vacation Accrual Plan') {
this.statsButtons[3].statsValue = accrualBalance.ACCRUAL_NET_ENTITLEMENT;
} else {
totalTicketsLeft = totalTicketsLeft + accrualBalance.ACCRUAL_NET_ENTITLEMENT;
}
this.statsButtons[4].statsValue = totalTicketsLeft;
}
});
this.statsButtons[4].statsValue = totalTicketsLeft;
}
});
}
openattentracking() {
openattentracking() {
this.common.openAttenTrackingpage();
}
openProfilePage() {
openProfilePage() {
this.common.openEditProfile();
}
openStatsButton(link: string) {
openStatsButton(link: string) {
console.log(link);
this.common.openPage(link);
}
//////calling time and date to load it in calendar///////
public getDayHoursTypeDetails() {
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
this.monthName = moment().format('MMMM');
this.yearDate = moment().format('YYYY');
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.menuType = this.selMenu.List_Menu.MENU_TYPE;
dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
dayAndHoursReqObj.SearchMonth = this.monthName;
dayAndHoursReqObj.SearchYear = this.yearDate;
dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
dayAndHoursReqObj.P_PAGE_LIMIT = 100;
if (Object.keys(this.selectedFilters).length !== 0) {
dayAndHoursReqObj.P_SHT_TYPE = this.selectedShiftFilter;
dayAndHoursReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
dayAndHoursReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
dayAndHoursReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
dayAndHoursReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
dayAndHoursReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
dayAndHoursReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
dayAndHoursReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
dayAndHoursReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
dayAndHoursReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
dayAndHoursReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
dayAndHoursReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
}
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
// this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'calendarDateValue');
this.common.openTimeCardPage();
}
});
}
countAllAttendDays(allDays) {
for (let i = 0; i < allDays.length; i++) {
if (allDays[i].DAY_TYPE == "OFF") {
//offDay
this.arrDaysOff.push({startTime:new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && !allDays[i].REMARKS) {
//attendace
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else if(allDays[i].DAY_TYPE == "SCHEDULED" && allDays[i].REMARKS) {
//absent
this.arrDaysAbsent.push(
{
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: "09:00:00",
allDay: false
}
);
}else{
this.arrFutrueDays.push(
{
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: "09:00:00",
allDay: false
}
);
}
}
this.common.sharedService.setSharedData(this.arrDaysOff,'calendarDayOffDateValue');
this.common.sharedService.setSharedData(this.arrDaysAttendance,'calendarAttendanceDateValue');
this.common.sharedService.setSharedData( this.arrDaysAbsent,'calendarDaysAbsentDateValue');
this.common.sharedService.setSharedData( this.arrFutrueDays,'calendarDaysFutrueDateValue');
}
}

@ -1,3 +1,34 @@
<p>
home works!
</p>
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" ></ion-back-button>
</ion-buttons>
<ion-title color="light" >Time and Attendance</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="time-card-home-container">
<ion-card
(click)="openDetailPage(timeCard.pageLink)"
*ngFor="let timeCard of timeCardOptions ; let i = index">
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col [size]="4" class="time-card-image">
<img src="../assets/imgs/time-card/{{timeCard.imageName}}">
</ion-col>
<ion-col [size]="6" class="time-card-details">
<h1 class="time-card-heading">{{timeCard.heading}}</h1>
<span class="time-card-description">{{timeCard.description}}</span>
</ion-col>
<ion-col [size]="2">
<img class="time-card-rightIcon"
src="../assets/imgs/time-card/ArrowRight.png">
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
</ion-content>

@ -0,0 +1,59 @@
ion-header{
overflow: hidden;
}
ion-content{
--ion-background-color: #f2f2f3;
}
ion-card-content {
padding: 0px;
}
ion-card {
box-shadow: none !important;
background-color: white;
margin-bottom: 15px;
}
ion-header {
background: #f2f2f3;
}
ion-title{
text-align: center;
font-family: WorkSans-Bold;
font-size: 18px;
}
.time-card-home-container{
margin-right: 10px;
margin-left: 10px;
margin-top: 20px
}
.header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
.time-card-image{
padding: 10px;
}
.time-card-details{
padding: 0px;
margin-top: 25px;
line-height: 10px;
}
.time-card-heading{
font-weight: bold;
font-size: 13px;
color: #666666;
font-family: WorkSans-Bold;
}
.time-card-description{
font-size: 10px;
}
.time-card-rightIcon{
padding: 8px;
margin-top: 18px;
}

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
@Component({
selector: 'app-home',
@ -7,8 +8,38 @@ import { Component, OnInit } from '@angular/core';
})
export class HomeComponent implements OnInit {
constructor() { }
public timeCardOptions: any = [
{
imageName: 'MyTimeCard.png',
heading: 'My Time Card',
description: 'View your attendance records.',
pageLink: '/time-card/time-card-details'
},
{
imageName: 'Timeback.png',
heading: 'Time Back',
description: 'View and use your extra work time.',
pageLink: '/time-card/home'
},
{
imageName: 'MissingSwipe.png',
heading: 'Missing Swipe',
description: 'Resolve swipe and attendance records',
pageLink: '/time-card/home'
},
{
imageName: 'WorkOnBreak.png',
heading: 'Work on Break',
description: 'Record your work time in during break.',
pageLink: '/time-card/home'
}
];
constructor(public common: CommonService) {}
ngOnInit() {}
public openDetailPage(path) {
this.common.navigatePage(path);
}
}

@ -0,0 +1,61 @@
<ion-content>
<div class="date-container">
<ion-row class="ion-justify-content-center">
<ion-col [size]="11">
<ion-item>
<div class="date-time-icon date-primary"></div>
<ion-label>Date From</ion-label>
<ion-datetime
[placeholder]="Select"
display-format="DD/MM/YYYY"
[min]="1900"
[max]="2100"
[(ngModel)]="dateFrom"
doneText="Done"
cancelText="Cancel"
></ion-datetime>
</ion-item>
</ion-col>
<ion-col [size]="11">
<ion-item>
<div class="date-time-icon date-primary"></div>
<ion-label>Date To</ion-label>
<ion-datetime
[placeholder]="Select"
display-format="DD/MM/YYYY"
[min]="1900"
[max]="2100"
[(ngModel)]="dateTo"
doneText="Done"
cancelText="Cancel"
></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
</div>
<div class="filters-container">
<span
*ngFor="let filter of filtersArray; let i = index"
[ngClass]="{'selected': filter.active == true,'notSelected': filter.active == false }"
class="filter-tag-button"
(click)="changeFiltersSelection(i)">
{{filter.name}}
</span>
</div>
<ion-list>
<ion-radio-group [(ngModel)]="selectedShiftType">
<ion-list-header>
Shift type
</ion-list-header>
<ion-item *ngFor="let shift of shiftTypesArray">
<ion-label>{{shift.SHT_TYPE_DESC}}</ion-label>
<ion-radio value="{{shift.SHT_TYPE}}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-button (click)="dismissModal()">Search</ion-button>
</ion-content>

@ -0,0 +1,30 @@
.footer-modal-button{
position: absolute;
bottom: 0;
color: white;
width: 100%;
text-align: center;
}
.footer-modal-button button{
font-size: 20px;
background: white;
line-height: 2;
}
.filters-container{
display: inline-block;
text-align: center;
margin-top: 10px;
}
.filter-tag-button{
display: inline-block;
border-radius: 5px;
border: 2px solid #A3D077;
color: #606161;
text-align: center;
font-size: 18px;
padding: 5px;
margin: 5px;
}
.filters-container .selected {
background-color: #d4f0e4;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SelectPeriodComponent } from './select-period.component';
describe('SelectPeriodComponent', () => {
let component: SelectPeriodComponent;
let fixture: ComponentFixture<SelectPeriodComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SelectPeriodComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SelectPeriodComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,128 @@
import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
@Component({
selector: 'app-select-period',
templateUrl: './select-period.component.html',
styleUrls: ['./select-period.component.scss'],
})
export class SelectPeriodComponent implements OnInit {
public shiftTypesArray: any = [];
public dateFrom: any;
public dateTo: any;
public selectedShiftType: any;
public filtersArray: any = [
{
name: 'Excess',
active: false,
key: 'P_EXCESS_FLAG',
value: ''
},
{
name: 'Timeback',
active: false,
key: 'P_TIMEBACK_FLAG',
value: ''
},
{
name: 'Comp Off',
active: false,
key: 'P_COMP_OFF_FLAG',
value: ''
},
{
name: 'Non scheduled',
active: false,
key: 'P_NON_SCHEDULED_FLAG',
value: ''
},
{
name: 'Late In',
active: false,
key: 'P_LATE_IN_FLAG',
value: ''
},
{
name: 'Early Out',
active: false,
key: 'P_EARLY_OUT_FLAG',
value: ''
},
{
name: 'Shortage',
active: false,
key: 'P_SHORTAGE_FLAG',
value: ''
},
{
name: 'Missing Swipe',
active: false,
key: 'P_MISSING_SWIPE_FLAG',
value: ''
},
{
name: 'Work On Break',
active: false,
key: 'P_ACTUAL_WOB_SEC',
value: ''
},
{
name: 'Analyzed',
active: false,
key: 'P_ANALAYZED_FLAG',
value: ''
},
{
name: 'Approved Timeback',
active: false,
key: 'P_APPR_TIMEBACK_FLAG',
value: ''
},
];
constructor(
public modalController: ModalController,
public common: CommonService,
public timeCardService: TimeCardService,
public navParams: NavParams) { }
ngOnInit() {
this.getShiftTypes();
this.dateFrom = this.navParams.get('dateFrom');
this.dateTo = this.navParams.get('dateTo');
}
public dismissModal() {
const selectedFilters: any = {};
for (const filter of this.filtersArray) {
selectedFilters[filter.key] = filter;
}
this.modalController.dismiss({
dismissed: true,
keySelectedFilters: selectedFilters,
selectedShiftType: this.selectedShiftType,
dateFrom: this.dateFrom,
dateTo: this.dateTo
});
}
public changeFiltersSelection(i: any) {
this.filtersArray[i].active = !this.filtersArray[i].active;
if (this.filtersArray[i].active) {
this.filtersArray[i].value = 'Y';
} else {
this.filtersArray[i].value = '';
}
}
public getShiftTypes() {
this.timeCardService.getShiftType().subscribe((result) => {
if (this.common.validResponse(result)) {
this.shiftTypesArray = result.GetShiftTypesList;
}
});
}
}

@ -5,8 +5,8 @@ export class GetDayAndHoursDetailsRequest extends Request {
public P_SELECTED_EMPLOYEE_NUMBER: string;
public P_MENU_TYPE: string;
public P_SELECTED_RESP_ID: number;
public P_SCHEDULE_DATE_FROM: DateTimeInput;
public P_SCHEDULE_DATE_TO: DateTimeInput;
public P_SCHEDULE_DATE_FROM: string;
public P_SCHEDULE_DATE_TO: string;
public P_EXCESS_FLAG: string;
public P_TIMEBACK_FLAG: string;
public P_COMP_OFF_FLAG: string;
@ -21,4 +21,6 @@ export class GetDayAndHoursDetailsRequest extends Request {
public P_ACTUAL_WOB_SEC: string;
public P_PAGE_NUM: number;
public P_PAGE_LIMIT: number;
public SearchMonth: string;
public SearchYear: number;
}

@ -3,7 +3,7 @@ import { DateTimeInput } from "src/app/uI-elements/date-time.input";
export class GetSwipesRequest extends Request {
public P_SELECTED_EMPLOYEE_NUMBER: string;
public P_SCHEDULE_DATE: DateTimeInput;
public P_SCHEDULE_DATE: string;
public P_PAGE_NUM: number;
public P_PAGE_LIMIT: number;
}

@ -5,8 +5,8 @@ export class GetTimeCardSummaryRequest extends Request {
public P_SELECTED_EMPLOYEE_NUMBER: string;
public P_MENU_TYPE: string;
public P_SELECTED_RESP_ID: number;
public P_SCHEDULE_DATE_FROM: DateTimeInput;
public P_SCHEDULE_DATE_TO: DateTimeInput;
public P_SCHEDULE_DATE_FROM: string;
public P_SCHEDULE_DATE_TO: string;
public P_EXCESS_FLAG: string;
public P_TIMEBACK_FLAG: string;
public P_COMP_OFF_FLAG: string;
@ -19,4 +19,6 @@ export class GetTimeCardSummaryRequest extends Request {
public P_APPR_TIMEBACK_FLAG: string;
public P_SHT_TYPE: string;
public P_ACTUAL_WOB_SEC: string;
public SearchMonth: string;
public SearchYear: number;
}

@ -1,27 +1,27 @@
import { Injectable } from "@angular/core";
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { ConnectorService } from "src/app/hmg-common/services/connector/connector.service";
import { Request } from "src/app/hmg-common/services/models/request";
import { Injectable } from '@angular/core';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { ConnectorService } from 'src/app/hmg-common/services/connector/connector.service';
import { Request } from 'src/app/hmg-common/services/models/request';
import { Observable } from "rxjs";
import { GetShiftTypeResponse } from "./models/get-shift-type.response";
import { GetDayAndHoursDetailsResponse } from "./models/get-day-hours-type-details.response";
import { GetTimeCardSummaryResponse } from "./models/get-time-card-summary.response";
import { GetShiftDetailResponse } from "./models/get-shift-detail.response";
import { GetSwipesResponse } from "./models/get-swipes-response";
import { Observable } from 'rxjs';
import { GetShiftTypeResponse } from './models/get-shift-type.response';
import { GetDayAndHoursDetailsResponse } from './models/get-day-hours-type-details.response';
import { GetTimeCardSummaryResponse } from './models/get-time-card-summary.response';
import { GetShiftDetailResponse } from './models/get-shift-detail.response';
import { GetSwipesResponse } from './models/get-swipes-response';
@Injectable({
providedIn: "root"
providedIn: 'root'
})
export class TimeCardService {
public static getShiftTypeUrl = "Services/ERP.svc/REST/GET_SHIFT_TYPES";
public static getShiftTypeUrl = 'Services/ERP.svc/REST/GET_SHIFT_TYPES';
public static getTimeCardSummaryUrl =
"Services/ERP.svc/REST/GET_TIME_CARD_SUMMARY";
'Services/ERP.svc/REST/GET_TIME_CARD_SUMMARY';
public static getDayHourDetailsUrl =
"Services/ERP.svc/REST/GET_DAY_HOURS_TYPE_DETAILS";
'Services/ERP.svc/REST/GET_DAY_HOURS_TYPE_DETAILS';
public static getShiftDetailUrl =
"Services/ERP.svc/REST/GET_SCHEDULE_SHIFTS_DETAILS";
public static getSwipeUrl = "Services/ERP.svc/REST/GET_SWIPES";
'Services/ERP.svc/REST/GET_SCHEDULE_SHIFTS_DETAILS';
public static getSwipeUrl = 'Services/ERP.svc/REST/GET_SWIPES';
constructor(
public con: ConnectorService,

@ -0,0 +1,191 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" ></ion-back-button>
</ion-buttons>
<ion-title color="light" >Shift Details</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="ion-padding shift-container" *ngIf="shiftDetailsData.length > 0 && selectedShift.origin === 'shiftDetails'">
<ion-card *ngFor="let shiftData of shiftDetailsData;">
<ion-card-content>
<h2 class="card-summary-heading">Shift details</h2>
<h2 class="card-summary-heading">{{ shiftData.SCHEDULE_DATE | date }}</h2>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="8">
Shift type
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_TYPE_DESC}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Shift
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_NAME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Break
</ion-col>
<ion-col [size]="4">
{{shiftData.BREAK_NAME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Work On Break
</ion-col>
<ion-col [size]="4">
{{shiftData.ACTUAL_WOB_HRS}}
</ion-col>
</ion-row>
<ion-row>
<h2 class="card-summary-heading">Actual Swipe(s)</h2>
</ion-row>
<ion-row>
<ion-col [size]="8">
Start
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_ACTUAL_START_TIME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
End
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_ACTUAL_END_TIME}}
</ion-col>
</ion-row>
<ion-row>
<h2 class="card-summary-heading">Approved Swipe(s)</h2>
</ion-row>
<ion-row>
<ion-col [size]="8">
Start
</ion-col>
<ion-col [size]="4">
{{shiftData.APPROVED_START_TIME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Start Reason
</ion-col>
<ion-col [size]="4">
{{shiftData.APPROVED_START_REASON_DESC}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
End
</ion-col>
<ion-col [size]="4">
{{shiftData.APPROVED_END_TIME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
End Reason
</ion-col>
<ion-col [size]="4">
{{shiftData.APPROVED_END_REASON_DESC}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Actual Hours
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_ACTUAL_HRS}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
<div class="ion-padding shift-container" *ngIf="swipeDetailsData && selectedShift.origin === 'shiftSwipes'">
<ion-card *ngFor="let swipeData of swipeDetailsData;">
<ion-card-content>
<h2 class="card-summary-heading">Employee Swipe(s)</h2>
<h2 class="card-summary-heading">{{ swipeData.SCHEDULE_DATE | date }}</h2>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="8">
Swipe Date
</ion-col>
<ion-col [size]="4">
{{swipeData.SWIPE_DATE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Swipe Time
</ion-col>
<ion-col [size]="4">
{{swipeData.SWIPE_TIME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Swipe Status
</ion-col>
<ion-col [size]="4">
{{swipeData.SWIPE_STATUS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Machine Location
</ion-col>
<ion-col [size]="4">
{{swipeData.MACHINE_LOCATION}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Unit Number
</ion-col>
<ion-col [size]="4">
{{swipeData.UNIT_NUMBER}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Unit Name
</ion-col>
<ion-col [size]="4">
{{swipeData.UNIT_NAME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Exclude
</ion-col>
<ion-col [size]="4">
{{swipeData.EXCLUDE_FLAG}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Error Message
</ion-col>
<ion-col [size]="4">
{{swipeData.RETURN_MESSAGE}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
</ion-content>

@ -0,0 +1,30 @@
ion-header{
overflow: hidden;
background: #f2f2f3;
}
ion-content{
--ion-background-color: #f2f2f3;
}
ion-card-content {
padding: 0px;
}
ion-card {
box-shadow: none !important;
background-color: white;
margin: 10px;
}
ion-title{
text-align: center;
font-family: WorkSans-Bold;
font-size: 18px;
margin-right: 45px;
}
.header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ShiftDetailsComponent } from './shift-details.component';
describe('ShiftDetailsComponent', () => {
let component: ShiftDetailsComponent;
let fixture: ComponentFixture<ShiftDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ShiftDetailsComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ShiftDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,75 @@
import { Component, OnInit } from '@angular/core';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { GetShiftDetailRequest } from 'src/app/time-card/service/models/get-shift-detail.request';
import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-request';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import * as moment from 'moment';
@Component({
selector: 'app-shift-details',
templateUrl: './shift-details.component.html',
styleUrls: ['./shift-details.component.scss'],
})
export class ShiftDetailsComponent implements OnInit {
public selectedShift: any;
// public selectedShiftDay: any;
public shiftDetailsData: any = [];
public swipeDetailsData: any = [];
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
public sharedData: SharedDataService) { }
ngOnInit() {
this.selectedShift = this.sharedData.getSharedData('selectedShift', false);
console.log(this.selectedShift);
if (this.selectedShift.origin === 'shiftDetails') {
this.getScheduleShiftDetails();
} else if (this.selectedShift.origin === 'shiftSwipes') {
this.getSwipesDetails();
}
// this.selectedShiftDay = this.sharedData.getSharedData('selectedShiftDay', false);
// console.log(this.selectedShiftDay);
// if (this.selectedShiftDay.origin === 'shiftDetails') {
// this.getScheduleShiftDetails();
// } else if (this.selectedShiftDay.origin === 'shiftSwipes') {
// this.getSwipesDetails();
// }
}
getScheduleShiftDetails() {
console.log("getScheduleShiftDetails");
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.RTP_ID;
GetShiftDetailRequestObject.P_PAGE_NUM = 1;
GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
console.log(GetShiftDetailRequestObject);
this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
// this.common.sharedService.setSharedData(this.shiftDetailsData,'shiftDetailsData');
}
})
}
getSwipesDetails() {
console.log("getSwipesDetails");
const GetSwipesRequestObject = new GetSwipesRequest();
GetSwipesRequestObject.P_SELECTED_EMPLOYEE_NUMBER = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
GetSwipesRequestObject.P_SCHEDULE_DATE = this.common.convertISODateToJsonDate(this.selectedShift.SCHEDULE_DATE);
GetSwipesRequestObject.P_PAGE_NUM = 1;
GetSwipesRequestObject.P_PAGE_LIMIT = 10;
this.timeCardService.getSwipes(GetSwipesRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
this.swipeDetailsData = result.GetSwipesList;
}
});
}
}

@ -1,3 +1,576 @@
<p>
time-card-details works!
</p>
<!-- <ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/eit/homepage"></ion-back-button>
</ion-buttons>
<ion-title color="light" >My Time Card</ion-title>
</ion-toolbar>
</ion-header> -->
<!-- <ion-content> -->
<!-- <div class="time-card-details-container">
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment"
style="font-family: WorkSans-Bold;margin-top: 10px;">
<ion-segment-button
value="time-card-details"
[ngClass]="activeSegment == 'time-card-details' ? 'active-Segment' : 'normal-Segment'" >
<ion-label>Time Card Details</ion-label>
</ion-segment-button>
<ion-segment-button
value="time-card-summary"
[ngClass]="activeSegment == 'time-card-summary' ? 'active-Segment' : 'normal-Segment'">
<ion-label>Time Card Summary</ion-label>
</ion-segment-button>
</ion-segment>
<div class="ion-padding" *ngIf="activeSegment === 'time-card-summary' && timeCardSummaryData">
<ion-card>
<ion-card-content>
<h2 class="card-summary-heading">Days</h2>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="8">
Period Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.PERIOD_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Schedule Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.SCHEDULE_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Off days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.OFF_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Attended Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.ATTENDED_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Absent Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.ABSENT_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Non Schedule Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.NON_SCHEDULE_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Not Analyzed Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.NOT_ANALYZED_DAYS}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="6" class="card-summary-heading-hours">
Hours
</ion-col>
<ion-col [size]="3" class="card-summary-heading-hours-extended-heading">
Actual
</ion-col>
<ion-col [size]="3" class="card-summary-heading-hours-extended-heading">
Schedule
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Regular
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.ACTUAL_HRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Planned OT
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.PLANNED_OTHRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_PLANNED_OT_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
On Call
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.ON_CALL_HRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_ON_CALL_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Excess
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.EXCESS_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Time Back
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIMEBACK_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Approved Time Back
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIMEBACK_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Time Back Balance
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIME_BACK_BALANCE}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Late In
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.LATE_IN_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Early Out
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.EARLY_OUT_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 class="card-summary-heading">Leaves & Holidays</h2>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="7">
Half-Day Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.HALF_DAY_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Unauthorized Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col>
Business Trip
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.BUSINESS_TRIP}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Sick Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.SICK_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Paid Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.PAID_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Unpaid Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.UNPAID_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Puclic Holiday
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.PUBLIC_HOLIDAY}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
<div *ngIf="activeSegment === 'time-card-details' && dayHoursData.length > 0" class="time-card-details">
<ion-slides #sliderRef (ionSlideWillChange)="slideChanged($event)" class="fadeIn">
<ion-slide *ngFor="let dayHours of dayHoursData; let i = index">
<ion-grid>
<ion-row style="text-align: center;">
<ion-col [size]="12" class="time-card-details-heading-two">
<h2>{{ dayHours.SCHEDULE_DATE | date }}</h2>
<h2>Time card details</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/TimeBackIcon.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Time Back:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.TIMEBACK_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Remarks.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Remarks:</span>
</ion-col>
<ion-col [size]="4" style="font-size: 12px;">
{{dayHours.REMARKS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Shift Hours.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Shift Hours:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.SCHEDULED_HRS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/ExcessTime.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Excess Time:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.EXCESS_HRS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/PlannedOT.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Planned OT:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.PLANNED_OT_HRS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/LateIn.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Late In:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.LATE_IN_HRS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/EarlyOut.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Early Out:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.EARLY_OUT_HRS}}
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
</ion-slides>
<div class="dayhours-button-container">
<button class="dayhours-button" (click)="showShiftDetails('shiftDetails')">Shift details</button>
<button class="dayhours-button" (click)="showShiftDetails('shiftSwipes')">Swipes</button>
</div>
</div>
</div>
<div class="right-slider-icon" *ngIf="activeSegment === 'time-card-details'">
<img *ngIf="rightIconActive && dayHoursData.length > 1" (click)="nextSlide()" style="height: 35%;" src="../assets/imgs/time-card/Asset 18.png">
<img *ngIf="!rightIconActive || dayHoursData.length == 1" style="height: 35%;" src="../assets/imgs/time-card/Asset 20.png">
</div>
<div class="left-slider-icon" *ngIf="activeSegment === 'time-card-details'">
<img *ngIf="leftIconActive && dayHoursData.length > 1" (click)="previousSlide()" style="height: 35%;" src="../assets/imgs/time-card/Asset 19.png">
<img *ngIf="!leftIconActive || dayHoursData.length == 1" style="height: 35%;" src="../assets/imgs/time-card/Asset 21.png">
</div> -->
<!------------------------------------------ ENAD CODE ------------------------------------------->
<ion-content class="colorBG">
<div class="header-div">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<ion-title class="Title"> {{ts.trPK('attendance','monthly-attendance')}}</ion-title>
</div>
<div class="">
<div class="header">
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{monthTitle}}</p> -->
<div class="slider">
<ion-row>
<ion-col>
<button ion-button icon-start class="slidPrev" (click)="previousSlide(sliderOne,slideWithNav)">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon>
</button>
</ion-col>
<ion-col>
<p style="position: absolute; left: 27%; bottom: 0%; font-family: WorkSans-Bold;">{{month}}</p>
<!-- <p style="position: absolute; left: 22%; bottom: 0%; font-family: WorkSans-Bold;">{{yearTitle}}</p> -->
</ion-col>
<ion-col>
<p style="position: absolute; left: 25%; bottom: 0%; font-family: WorkSans-Bold;">{{year}}</p>
</ion-col>
<ion-col>
<button ion-button icon-end class="slidNext" (click)="nextSlide(sliderOne,slideWithNav)">
<ion-icon class="disabledArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
</ion-icon>
</button>
</ion-col>
</ion-row>
</div>
<!-- <ion-slides [options]="slideOptsOne" #sliderRef (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide >
<ion-grid class="headerGrid"> -->
<ion-slides [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide >
<ion-grid class="headerGrid">
<div style="color: black;">
<!-- <ngx-gauge
[type]="gaugeType"
[value]="gaugeValue"
[label]="gaugeLabel">
</ngx-gauge> -->
<div class="result-graph">
<div class="request-heading">
<span> {{ts.trPK('attendance-tracking','attendance-statistics')}}</span>
</div>
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}}</h2>
<p>{{ts.trPK('absenceList','days')}}</p>
<!-- <span>TOTAL <br> OPEN REQUEST</span> -->
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<!-- <div style="position: relative;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;">
<label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;"> {{ts.trPK('attendance','present')}} <strong>{{attendedDays}}</strong></label>
</div>
<div style="position: relative;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
<label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;">{{ts.trPK('attendance','absent')}} <strong>{{absentDays}}</strong></label>
</div>
</div> -->
<div style="position: relative;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('attendance','present')}}</label>
</ion-row>
<ion-row>
<label class="green-amount">{{attendedDays}}</label>
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('attendance','absent')}}</label>
</ion-row>
<ion-row>
<label class="blue-amount" for="">{{absentDays}}</label>
</ion-row>
</ion-col>
</div>
</div>
</ion-grid>
<!-- //////////////////////////////////////// -->
</ion-slide>
</ion-slides>
</div>
</div>
<div style="margin-top: 10%;">
<ion-grid>
<ion-row>
<ion-col>
<ion-grid class="labelGrid">
<ion-row>
<ion-col>
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','schedule')}}</label>
</ion-col>
<ion-col>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 45%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<ion-row>
<ion-col>
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','off-days')}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 37%; margin-top: 18px; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.OFF_DAYS}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 37%; font-size: 25px;">0</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','non-analyzed')}}</label>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 36%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 36%; font-size: 25px;">0</h2>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','shortage-hours')}}</label>
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 18%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div >
<ion-grid class="bodyGrid">
<p style="font-weight: bold; font-size: 17px;"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</p>
<app-circle-calendar [eventsdateAttend]='arrDaysAttendance' [eventsdateAbsent]='arrDaysAbsent' [eventsdateDayOff]='arrDaysOff' (monthTitle)='changeMonthTitle($event)' (currentYear)=changeYear($event)></app-circle-calendar>
</ion-grid>
</div>
</ion-content>
<!-- <div *ngIf="activeSegment === 'time-card-details'" class="footer-modal-button">
<button ion-button (click)="openSelectPeriodModal()">
Select Period
</button>
</div> -->

@ -0,0 +1,488 @@
ion-header{
overflow: hidden;
background: #f2f2f3;
}
ion-content{
--ion-background-color: #f2f2f3;
}
ion-card-content {
padding: 0px;
}
ion-card {
box-shadow: none !important;
background-color: white;
margin: 10px -15px;
margin-bottom: 20px;
}
ion-title{
text-align: center;
font-family: WorkSans-Bold;
font-size: 18px;
margin-right: 35px;
}
///////////////////////////////here
.slidPrev{
// margin-top: 8px;
margin-left: 10px;
background: transparent;
}
.slidNext{
background: transparent;
margin-top: -1px;
margin-left: 43px;
}
.activeArrow{
height: 20px;
width: 20px;
color: white;
}
.disabledArrow{
height: 20px;
width: 20px;
color: gray;
// margin-right: 5px;
}
.header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
.active-Segment {
border-radius: 5px !important;
font-size: 0.3cm !important;
background: white !important;
color: #fff !important;
font-weight: bold !important;
border: 1px solid white !important;
text-transform: none;
--color-checked: none;
}
.active-Segment ion-label{
// color: #A3D077 !important;
color: #11975F !important;
font-size: 11px;
}
.normal-Segment ion-label{
// color: #A3D077 !important;
color: white !important;
font-size: 11px;
}
.normal-Segment {
border-radius: 5px !important;
font-size: 0.3cm !important;
background: #A3D077 !important;
color: #fff !important;
font-weight: bold !important;
border: 1px solid white !important;
text-transform: none;
--color-checked: none;
}
.time-card-details-container{
margin-right: 20px;
margin-left: 20px;
}
.card-summary-heading{
margin-left: 10px;
margin-top: 12px;
color: #606161;
font-family: WorkSans-Bold;
}
.card-summary-heading-hours{
color: #606161;
font-family: WorkSans-Bold;
}
.card-summary-heading-hours-extended-heading{
color: #D3D3D3;
font-family: WorkSans-Bold;
}
/////////////////////////////////
.time-card-details {
background: white;
margin: 20px;
border-radius: 5px;
}
.time-card-details-heading-two {
color: #606161;
font-family: WorkSans-Bold;
}
.time-card-details-heading-two h2 {
margin-top: 15px;
font-size: 15px;
}
.time-card-span img{
height: 30px;
margin-top: -5px;
margin-left: 10px;
}
.dayhours-button-container{
width: 100%;
padding-right: 5px;
padding-left: 5px;
}
.dayhours-button{
width: 50%;
height: 35px;
font-size: 15px;
color: white;
background: #606161;
}
/////////////////////////////////////
.footer-modal-button{
position: absolute;
bottom: 0;
color: white;
width: 100%;
text-align: center;
}
.footer-modal-button button{
font-size: 20px;
background: white;
line-height: 2;
margin: -42px auto 0;
display: block;
}
////////////////////////////
.right-slider-icon{
float: right;
height: 100%;
width: 15%;
position: fixed;
right: -5%;
top: 31%;
}
.left-slider-icon{
width: 15%;
position: fixed;
top: 32%;
left: -4%;
height: 100%;
}
//////////////////////////////////////////ENAD CODE////////////////////////////////////////////
.colorBG{
--background: #f0efef;
}
.header-div {
background-color: #22C6B3;
text-transform: capitalize;
height: 180px;
position: relative;
display: block;
margin-bottom: -28px;
}
.Title{
text-align: center !important;
color: white !important;
margin-top: -86px !important;
font-size: 17px !important;
font-family: workSans-Regular;
}
.header{
margin-top: -221px;
}
.chart-modal .modal-Wrapper {
--background: rgb(116, 108, 108) !important;
--border-color:white!important ;
width: 85%!important ;
height: 40px !important ;
}
.navbar{
font-size: 10px !important;
--background: #22C6B3 !important;
color: aliceblue !important;
// margin-top: 10px !important;
}
.menu{
// margin-left:330px !important;
margin-top: 0px !important;
font-size: 35px !important;
background: #22C6B3;
color: aliceblue;
margin-left: 0px !important;
}
.person{
margin-left:100px !important;
margin-top: 0px !important;
font-size: 23px !important;
background: #22C6B3 !important;
color: aliceblue !important;
}
.grid{
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 250px !important;
}
.headerGrid{
margin-top: 5px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color: white !important;
border-radius: 20px !important;
height: 250px !important;
border: 1px solid #d6d4d4;
}
.green-label{
font-size: 12px;
margin-top: -13px;
}
.green-amount{
font-size: 17px;
font-family: WorkSans-Bold;
margin-top: -3px;
}
.blue-label{
font-size: 12px;
margin-top: -13px;
}
.blue-amount{
font-size: 17px;
font-family: WorkSans-Bold;
margin-top: -4px;
}
.today-graph{
display:block !important;
height: 150px !important;
width: 300 !important;
margin-left: -70px !important;
}
.bodyGrid{
// margin-bottom: 550px !important;
// margin-top: 7px !important;
// margin-left: 15px !important;
// margin-right: 15px !important;
// background-color:white !important;
// border-radius: 20px !important;
// height: 270px !important;
// border: 1px solid #d6d4d4 !important;
margin-top: 7px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color: white !important;
border-radius: 20px !important;
height: 321px !important;
border: 1px solid #d6d4d4 !important;
}
.labelGrid{
// margin-top: -30px !important;
// background-color:white !important;
// border-radius: 20px !important;
// height: 100px !important;
// border: 1px solid #d6d4d4;
margin-top: -30px !important;
background-color: white !important;
border-radius: 23px !important;
height: 100px !important;
border: 1px solid #d6d4d4;
padding-right: 0px;
}
.ionSliders{
margin: 0px !important;
padding: 0px !important;
}
.ionSlide{
margin-top: 5px !important;
margin-left: 190px !important;
color: black !important;
}
.dateLable{
margin-left: 90px !important;
color: black !important;
font-size: small !important;
margin-top: 15px !important;
}
// h1{
// font-size: 15px !important;
// text-align: center !important;
// }
.arrowDropright{
margin-left:100px !important;
font-size: 20px !important;
color: rgb(168, 165, 165) !important;
margin-top: 15px !important;
}
.arrowDropleft{
font-size: 20px !important;
margin-left: 10px !important;
margin-top: 15px !important;
color: rgb(116, 108, 108) !important;
}
.ionLable{
font-size: 10px !important;
}
.number{
font-size: 18px !important;
font-weight: bolder !important;
color: black !important;
}
.header-div{
background:var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: #22C6B3;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color:var(--light);
text-transform: capitalize;
display: block;
position: relative;
height: 210px;
margin-bottom:60px;
// border-radius: 0px 0px 70px 70px;
}
.request-heading {
span {
// text-align: center;
// display: block;
// padding-top: 8px;
// font-family: workSans-Regular;
// text-align: center;
display: block;
padding-top: 8px;
/* font-family: workSans-Regular; */
margin-left: -157px;
margin-top: -19px;
padding-bottom: 16px;
}
}
.result-graph {
position: relative;
background: white;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 38%;
top: 60%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 25px;
font-family: WorkSans-Bold;
color: black !important;
margin: 0 auto;
line-height: 36px;
}
p {
font-size: 20px;
color: black !important;
// font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
color: black !important;
font-family: workSans-Regular;
}
}

@ -1,4 +1,15 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { ModalController, IonSlides } from '@ionic/angular';
import { SelectPeriodComponent } from '../select-period/select-period.component';
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-time-card-summary.request';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import * as moment from 'moment';
import { getDate } from 'date-fns';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
@Component({
selector: 'app-time-card-details',
@ -6,9 +17,502 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./time-card-details.component.scss'],
})
export class TimeCardDetailsComponent implements OnInit {
slideView: any;
sliderOne: any;
@ViewChild('slides') slides: IonSlides;
@ViewChild('slideWithNav') slideWithNav: IonSlides;
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay: true
};
month: any;
year: any;
preMonth: number;
nextMonth: any;
constructor() { }
ngOnInit() {}
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
public modalController: ModalController,
public sharedData: SharedDataService,
public ts: TranslatorService
) { }
@ViewChild('sliderRef') protected sliderRef: IonSlides;
public activeSegment: any = 'time-card-summary';
public showMore: any = true;
public menuType: any;
public selEmp: string;
public dateFrom: any = new Date();
public dateTo: any = new Date();
public selMenu: MenuResponse = new MenuResponse();
public respID: number;
public timeCardSummaryData: any = [];
public dayHoursData: any = [];
public selectedShift: any;
public rightIconActive = false;
public leftIconActive = false;
public loadMore = false;
public dayAndHoursPageNumber = 1;
public selectedFilters: any = {};
public selectedShiftFilter: any;
public loadMoreDateHoursData = false;
public monthName: any;
public yearDate: any;
public absentDays: number;
public attendedDays: number;
public futrueDays = 0;
public totalAttendancePrecentage = 0;
public arrDaysAttendance: any = [];
public arrDaysAbsent: any = [];
public arrDaysOff: any = [];
public monthTitle: string = moment().format('MMMM');
public yearTitle: string;
public isChange = false;
public activeMonth: any;
public options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
public data = {
datasets: [
{
data: [120, 50],
backgroundColor: [
'#22c6b3',
'#094875',
],
borderWidth: 2
}]
};
ngOnInit() {
this.nextMonth = new Date().getMonth() + 2;
this.preMonth = new Date().getMonth() - 2;
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());
}
calendarConfig(month?, year?) {
console.log('ngOnInit');
this.month = month;
this.year = year;
this.arrDaysOff = this.common.sharedService.getSharedData('calendarDayOffDateValue', false);
this.arrDaysAttendance = this.common.sharedService.getSharedData('calendarAttendanceDateValue', false);
this.arrDaysAbsent = this.common.sharedService.getSharedData('calendarDaysAbsentDateValue', false);
this.getTimeCardSummaryDetails(month, year);
this.getDayHoursTypeDetails(month, year);
}
public segmentChanged(event: any) {
console.log('segmentChanged');
this.activeSegment = event.detail.value;
if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) {
this.getDayHoursTypeDetails();
} else {
this.rightIconActive = true;
this.leftIconActive = false;
}
}
public toggleButton() {
console.log('toggleButton');
this.showMore = !this.showMore;
}
public getDayHoursTypeDetails(month?, year?) {
console.log('getDayHoursTypeDetails');
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
// this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ');
// this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ');
this.monthName = month; // moment().format('MMMM');
this.yearDate = year; // moment().format('YYYY');
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.menuType = this.selMenu.List_Menu.MENU_TYPE;
dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
// dayAndHoursReqObj.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom);
// dayAndHoursReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo);
dayAndHoursReqObj.SearchMonth = this.monthName;
dayAndHoursReqObj.SearchYear = this.yearDate;
dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
dayAndHoursReqObj.P_PAGE_LIMIT = 100;
if (Object.keys(this.selectedFilters).length !== 0) {
dayAndHoursReqObj.P_SHT_TYPE = this.selectedShiftFilter;
dayAndHoursReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
dayAndHoursReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
dayAndHoursReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
dayAndHoursReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
dayAndHoursReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
dayAndHoursReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
dayAndHoursReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
dayAndHoursReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
dayAndHoursReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
dayAndHoursReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
dayAndHoursReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
}
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result.GetDayHoursTypeDetailsList);
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'RTP_IDs');
this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
this.loadMoreDateHoursData = false;
const daysDataLength = result.GetDayHoursTypeDetailsList.length;
this.loadMore = daysDataLength === 10 ? true : false;
if (this.dayAndHoursPageNumber > 1 && daysDataLength !== 0) {
this.rightIconActive = true;
this.dayHoursData = this.dayHoursData.concat(result.GetDayHoursTypeDetailsList);
setTimeout(() => {
this.nextSlide();
}, 1000);
} else if (this.dayAndHoursPageNumber === 1 && daysDataLength <= 10 && daysDataLength !== 0) {
this.rightIconActive = true;
this.dayHoursData = result.GetDayHoursTypeDetailsList;
}
}
});
}
// startTime:new Date(new Date().getTime() +( 60000*60 * 24)),
// endTime: new Date(new Date().getTime() +( 60000*60 * 24)),
// isoTime:"09:00:00",
// allDay: false
countAllAttendDays(allDays) {
console.log('countAllAttendDays');
for (let i = 0; i < allDays.length; i++) {
if (allDays[i].DAY_TYPE === 'Off') {
// offDay
this.arrDaysOff.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else if (allDays[i].DAY_TYPE === 'SCHEDULED') {
// attendace
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else {
// absent
this.arrDaysAbsent.push(
{startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: '09:00:00',
allDay: false
}
);
}
}
}
public getTimeCardSummaryDetails(month?, year?) {
console.log('getTimeCardSummaryDetails');
const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
if (this.isChange) {
// this.monthName = this.monthTitle;
// this.yearDate = this.yearTitle;
this.monthName = month;
console.log('' + this.monthName);
this.yearDate = year;
console.log('' + this.yearDate);
} else {
this.monthName = month; // moment().format('MMMM');
this.yearDate = year; // moment().format('YYYY');
}
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.menuType = this.selMenu.List_Menu.MENU_TYPE;
timeCardSummaryReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
timeCardSummaryReqObj.P_MENU_TYPE = this.menuType;
timeCardSummaryReqObj.P_SELECTED_RESP_ID = this.respID;
// timeCardSummaryReqObj.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom);
// timeCardSummaryReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo);
timeCardSummaryReqObj.SearchMonth = this.monthName;
timeCardSummaryReqObj.SearchYear = this.yearDate;
if (Object.keys(this.selectedFilters).length !== 0) {
timeCardSummaryReqObj.P_SHT_TYPE = this.selectedShiftFilter;
timeCardSummaryReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
timeCardSummaryReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
timeCardSummaryReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
timeCardSummaryReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
timeCardSummaryReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
timeCardSummaryReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
timeCardSummaryReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
timeCardSummaryReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
timeCardSummaryReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
timeCardSummaryReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
timeCardSummaryReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
}
this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
this.absentDays = this.timeCardSummaryData.ABSENT_DAYS;
// console.log("absent: "+ this.absentDays);
this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS;
// console.log("attendedDays: "+ this.attendedDays);
this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS;
this.options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
if (this.absentDays === 0 && this.attendedDays === 0) {
this.futrueDays = this.totalAttendancePrecentage;
}
//////////////////////////////////////////////
// console.log("absent: "+ this.absentDays);
// console.log("attend: "+ this.attendedDays);
// console.log("future"+ this.futrueDays);
// in chart "this.futrueDays"
// in calender "this.futrueDays == white"
// timecard sumery return not match data with GET_DAY_HOURS_TYPE_DETAILS
this.data = {
datasets: [
{
data: [this.absentDays, this.attendedDays, this.futrueDays],
backgroundColor: [
'#094875',
'#22c6b3',
'#9e9e9e'
],
borderWidth: 2
}]
};
}
});
}
async openSelectPeriodModal() {
const modal = await this.modalController.create({
component: SelectPeriodComponent,
cssClass: 'select-period-custom-modal',
componentProps: {
dateFrom: this.dateFrom,
dateTo: this.dateTo
}
});
modal.onDidDismiss().then(result => {
this.loadMore = false;
this.rightIconActive = false;
this.leftIconActive = false;
this.dayHoursData = [];
this.timeCardSummaryData = [];
this.dayAndHoursPageNumber = 1;
this.loadMoreDateHoursData = false;
this.dateFrom = result.data.dateFrom;
this.dateTo = result.data.dateTo;
this.selectedFilters = result.data.keySelectedFilters;
this.selectedShiftFilter = result.data.selectedShiftType;
if (this.dateFrom && this.dateTo) {
this.getDayHoursTypeDetails();
this.getTimeCardSummaryDetails();
}
});
return await modal.present();
}
slideChanged(ev: any) {
console.log('slideChanged');
const prom1 = this.sliderRef.isBeginning();
const prom2 = this.sliderRef.isEnd();
Promise.all([prom1, prom2]).then((data) => {
data[0] ? this.leftIconActive = false : this.leftIconActive = true;
if (data[1]) {
if (!this.loadMore) {
this.rightIconActive = false;
}
} else {
this.rightIconActive = true;
}
});
}
showShiftDetails(origin: string) {
console.log('showShiftDetails');
this.sliderRef.getActiveIndex().then((index: number) => {
this.selectedShift = this.dayHoursData[index];
this.selectedShift.origin = origin;
this.sharedData.setSharedData(this.selectedShift, 'selectedShift');
this.common.navigatePage('/time-card/shift-details');
});
}
/////////////////////////////////////////////////// here
// slideNext(object, slideView) {
// if (this.loadMoreDateHoursData && this.loadMore) {
// this.dayAndHoursPageNumber++;
// this.getDayHoursTypeDetails();
// }
// this.sliderRef.slideNext();
// this.sliderRef.getActiveIndex().then((index: number) => {
// if (index === (this.dayHoursData.length - 1)) {
// this.loadMoreDateHoursData = true;
// }
// });
// }
// slidePrev(object, slideView) {
// this.sliderRef.slidePrev();
// }
/////////////////////////////////
nextSlide() {
let currentYear = new Date().getFullYear();
if (this.nextMonth > 12) {
currentYear = currentYear + 1;
this.nextMonth = 1;
}
this.calendarConfig(this.getMonthName(this.nextMonth) , currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.preMonth + 1;
}
previousSlide() {
let currentYear = new Date().getFullYear();
if (this.preMonth === 0) {
currentYear = currentYear - 1;
this.preMonth = 12;
}
this.calendarConfig(this.getMonthName(this.preMonth) , currentYear);
this.preMonth = this.preMonth - 1;
this.nextMonth = this.nextMonth - 1;
}
changeMonthTitle(title) {
console.log('changeMonthTitle');
this.monthTitle = title;
this.isChange = true;
this.getTimeCardSummaryDetails();
}
changeYear(year) {
console.log('changeYear');
this.yearTitle = year;
}
///////////////////////////////////////////////////////////////////////// here
getHeaderMonth(date: any) {
return this.getMonthName(date.getMonth() + 1) + ' ' + date.getFullYear();
}
public getMonthName(value: any): any {
switch (value) {
case 1:
return 'January';
case 2:
return 'February';
case 3:
return 'March';
case 4:
return 'April';
case 5:
return 'May';
case 6:
return 'June';
case 7:
return 'July';
case 8:
return 'August';
case 9 :
return 'September';
case 10:
return 'October';
case 11:
return 'November';
case 12:
return 'December';
}
}
// getHeaderMonth(date: any) {
// if (monthName = "December") {
// }
// return monthName;
// else
// return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
// }
// public getMonthName(value: any): any {
// switch (value) {
// case "Januray":
// return "February";
// case "February":
// return "March";
// case "March":
// return "April";
// case "April":
// return "May";
// case "May":
// return "June";
// case "June":
// return "July";
// case "July":
// return "August";
// case "August":
// return "September" ;
// case "September" :
// return "October";
// case "October":
// return "November";
// case "November":
// return "December";
// case "December":
// return "January";
// }
// }
}

@ -8,6 +8,11 @@ import { IonicModule } from '@ionic/angular';
import { TimeCardPage } from './time-card.page';
import { TimeCardDetailsComponent } from './time-card-details/time-card-details.component';
import { HomeComponent } from './home/home.component';
import { SelectPeriodComponent } from './select-period/select-period.component';
import { ShiftDetailsComponent } from './shift-details/shift-details.component';
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
const routes: Routes = [
{
@ -21,6 +26,10 @@ const routes: Routes = [
{
path: 'time-card-details',
component: TimeCardDetailsComponent
},
{
path: 'shift-details',
component: ShiftDetailsComponent
}
]
}
@ -31,12 +40,18 @@ const routes: Routes = [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
RouterModule.forChild(routes),
HmgCommonModule
],
declarations: [
TimeCardPage,
HomeComponent,
TimeCardDetailsComponent
]
TimeCardDetailsComponent,
SelectPeriodComponent,
ShiftDetailsComponent
],
entryComponents: [
SelectPeriodComponent
],
})
export class TimeCardPageModule {}

Binary file not shown.

After

Width:  |  Height:  |  Size: 698 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 720 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 557 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 914 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 556 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 833 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 653 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 682 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 658 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

@ -1037,6 +1037,22 @@
"attendance": {
"ar": "الحضور",
"en": "Attendance"
},
"monthly-attendance": {
"ar": "الحضور الشهري",
"en": "Monthly Attendance"
},
"monthly-attendance-calendar": {
"ar": "تقويم الحضور الشهري",
"en": "Monthly Attendance Calendar"
},
"present": {
"ar": "حضور",
"en": "Present"
},
"absent": {
"ar": "غياب",
"en": "Absent"
}
},
"vacation-rule": {
@ -2189,12 +2205,42 @@
"en": "LATE IN",
"ar":"LATE IN"
},
"shortage":{
"en": "Shortage",
"ar":"عجز"
},
"excess":{
"en": "Excess",
"ar":"فائض"
},
"early-out":{
"en": "Early Out",
"ar":""
},
"today-time-left":{
"en": "TODAY'S TIME LEFT",
"ar":"TODAY'S TIME LEFT"
},
"shortage-hours":{
"en": "SHORTAGE HOURS",
"ar":""
},
"schedule":{
"en": "SCHEDULE",
"ar":""
},
"off-days":{
"en": "OFF DAYS",
"ar":"ايام الراحه"
},
"non-analyzed":{
"en": "NON ANALYZED",
"ar":""
},
"attendance-statistics":{
"en": "Attendance Statistics",
"ar":""
},
"confirm-alert1":{
"en": "Are you sure, you want to",
"ar":"Are you sure, you want to"
@ -2208,7 +2254,7 @@
"ar":"You did't complate today shift"
},
"shift-time":{
"en":"SHIFT TIME",
"en":"Shift Time",
"ar":"SHIFT TIME"
}
},

@ -1023,3 +1023,84 @@ border:0px
// }
// }
// }
.monthview-primary-with-event, .absent, .present, .dayoff {
background-color: #fff !important;
z-index: 1;
color: #fff !important;
position: relative;
}
.monthview-selected {
background-color: gray !important;
color: #fff !important;
}
.advanced-search-modal {
--height: 12cm !important;
--width: 80% !important;
--border-radius: 0.4cm;
}
.calendar-modal {
--height: 15cm !important;
--width: 88% !important;
--border-radius: 0.4cm;
// height: 544px !important;
// width: 332px !important;
}
.monthview-datetable tbody td{
border:0 !important;
}
.monthview-primary-with-event::after, .absent::after, .present::after, .dayoff::after {
content: " ";
width: 80%;
height: 3px;
background: #77cfb8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
color: #fff;
z-index: -1;
border-radius: 50%;
}
.absent::after{
background: #094875;
}
.present::after{
background: #77cfb8;
}
.dayoff::after{
background: gray;
}
[dir=ltr] .monthview-container .swiper-slide,
[dir=rtl] .monthview-container .swiper-slide {
margin: 0 !important;
}
table.monthview-datetable th small {
font-size: 60%;
}

Loading…
Cancel
Save