Merge branch 'master-newdesign' into work-list

MOE_DEV_NEW_TEMPORARY_DESIGN
Mohamed Mekawy 6 years ago
commit 1f044cfb3e

17596
Mohem/package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -101,12 +101,12 @@
"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",
"ng2-pdf-viewer": "^5.3.2",
"ngx-gauge": "^1.0.0-beta.10",
"npm": "^6.13.1",
"npm": "^6.13.7",
"phonegap-plugin-barcodescanner": "^8.1.0",
"phonegap-plugin-multidex": "^1.0.0",
"primeicons": "^1.0.0",
@ -139,11 +139,11 @@
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.13.0",
"protractor": "~5.4.0",
"node-sass": "^4.13.1",
"protractor": "^5.4.3",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
"typescript": "3.1.6"
},
"description": "An Ionic project",
"cordova": {
@ -201,4 +201,4 @@
"android"
]
}
}
}

@ -1,13 +1,13 @@
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { ConnectorService } from "src/app/hmg-common/services/connector/connector.service";
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ConnectorService } from 'src/app/hmg-common/services/connector/connector.service';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
@Injectable({
providedIn: "root"
providedIn: 'root'
})
export class AccrualService {
public static GET_ACCRUAL_BALANCE =
"Services/ERP.svc/REST/GET_ACCRUAL_BALANCES";
'Services/ERP.svc/REST/GET_ACCRUAL_BALANCES';
constructor(
public con: ConnectorService,
public authService: AuthenticationService

@ -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,

@ -4,6 +4,9 @@ import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbore
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import {AttendScanService} from '../../hmg-common/services/attend-services/attend-scan.service';
import { AttendanceTrackingResponse } from 'src/app/hmg-common/services/dashbored/attendance-tracking.response';
import { SharedDataService } from '../../hmg-common/services/shared-data-service/shared-data.service';
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
@ -22,11 +25,14 @@ export class HomeComponent implements OnInit {
public isCheckedIn = undefined;
public displayTime: any;
public percent: any;
public spentHours: any;
public userData = this.sharedData.getSharedData(AuthenticatedUser.SHARED_DATA, false);
constructor(
public cs: CommonService,
public db: DashboredService,
public ts: TranslatorService,
public attendScanService: AttendScanService
public attendScanService: AttendScanService,
public sharedData: SharedDataService
) { }
ngOnInit() {
@ -91,12 +97,18 @@ export class HomeComponent implements OnInit {
convertAndAssignTime(data) {
this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':'));
this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':'));
this.isCheckedIn = this.remainingTime === this.scheduledTime ? false : true;
this.initTimer();
}
this.spentHours = this.convertInSeconds(data.P_SPENT_HOURS.split(':'));
this.isCheckedIn = this.spentHours === 0 ? false : true;
if (this.isCheckedIn) {
this.initTimer();
}
}
showAttendanceTracking() {
this.db.getAttendanceTracking() .subscribe((result: AttendanceTrackingResponse) => {
const request = {
P_SELECTED_EMPLOYEE_NUMBER: this.userData.EMPLOYEE_NUMBER
};
this.db.getAttendanceTracking(request).subscribe((result: AttendanceTrackingResponse) => {
if (this.cs.validResponse(result)) {
const key = 'GetAttendanceTrackingList';
this.convertAndAssignTime(result[key]);

@ -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")
}
}

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

@ -101,7 +101,7 @@ import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';
import { AccordinCustomComponent } from './ui/accordin-custom/accordin-custom.component';
import { AccordinTabCustomComponent} from './ui/accordin-custom/accordin-tab-custom/accordin-tab-custom.component'
import {DashboredService} from './services/dashbored/dashbored.service';
// import {NgxGaugeModule} from 'ngx-gauge';
import {NgxGaugeModule} from 'ngx-gauge';
import { StatsButtonComponent } from './ui/stats-button/stats-button.component';
import { ServicesButtonComponent } from './ui/services-button/services-button.component';
import {ConfirmLoginComponent} from '../authentication/confirm-login/confirm-login.component'
@ -110,9 +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 { 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,
@ -124,8 +127,9 @@ import { CardFilterComponent} from './ui/card-filter/card-filter.component';
ListboxModule,
PdfViewerModule,
NgCircleProgressModule.forRoot(),
NgCalendarModule,
ChartModule,
// NgxGaugeModule
NgxGaugeModule
],
declarations: [
FabButtonComponent,
@ -187,7 +191,12 @@ import { CardFilterComponent} from './ui/card-filter/card-filter.component';
StatsButtonComponent,
ServicesButtonComponent,
ConfirmLoginComponent,
CardFilterComponent
CardFilterComponent,
EmployeeInformationComponent,
ConfirmLoginComponent,
CircleCalendarComponent,
DateInfoModalComponent
],
exports: [
FabButtonComponent,
@ -243,13 +252,20 @@ import { CardFilterComponent} from './ui/card-filter/card-filter.component';
FileUploderProfileComponent,
AccordinTabCustomComponent,
AccordinCustomComponent,
// NgxGaugeModule,
NgxGaugeModule,
StatsButtonComponent,
ServicesButtonComponent,
ConfirmLoginComponent,
NgCircleProgressModule,
ChartModule,
CardFilterComponent
CardFilterComponent,
EmployeeInformationComponent,
ConfirmLoginComponent,
CircleCalendarComponent,
DateInfoModalComponent,
NgCalendarModule,
ChartModule
],
providers: [
AttendScanService,
@ -293,7 +309,8 @@ import { CardFilterComponent} from './ui/card-filter/card-filter.component';
MenuService,
OpenNativeSettings,
BarcodeScanner
]
],
entryComponents: [DateInfoModalComponent],
})
export class HmgCommonModule { }

@ -108,7 +108,6 @@ export class AuthenticationService {
request.P_USER_NAME = user.EMPLOYEE_NUMBER;
request.UserName = user.EMPLOYEE_NUMBER;
request.P_EMAIL_ADDRESS = user.EMPLOYEE_EMAIL_ADDRESS;
if (AuthenticationService.requireRelogin) {
this.sessionTimeOutDialog();
}

@ -1107,8 +1107,12 @@ public getMonthNameAr(value: number): string {
this.nav.navigateForward(['/eit/homepage']);
}
public openMyTeamPage() {
console.log('someeeeeeee');
this.nav.navigateForward(['/my-team/home']);
}
public openMyTeamDetailPage() {
this.nav.navigateForward(['/my-team/details']);
}
public openPage(link: string) {
this.nav.navigateForward([link]);
@ -1188,6 +1192,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']);
}
@ -1205,6 +1212,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();

@ -7,4 +7,9 @@ export class AttendanceTrackingList {
public P_SCHEDULED_HOURS: string;
public P_SHT_NAME: string;
public P_SPENT_HOURS: string;
public P_BREAK_HOURS: string;
public P_LATE_IN_HOURS: string;
public P_SWIPES_EXEMPTED_FLAG: string;
public P_SWIPE_IN: string;
public P_SWIPE_OUT: string;
}

@ -66,8 +66,8 @@ export class DashboredService {
oerrorLable
);
}
public getAttendanceTracking(onError ?: any ,oerrorLable ?: any): Observable<AttendanceTrackingResponse>{
const request = new Request();
public getAttendanceTracking(selectedEmployee: any, onError ?: any , oerrorLable ?: any): Observable<AttendanceTrackingResponse>{
const request = selectedEmployee;
this.authService.authenticateRequest(request);
return this.con.post(
DashboredService.attendancetrackingUrl,

@ -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;
}

@ -29,4 +29,5 @@
.text-span{
font-size: 14px;
color: #888;
margin: -1px;
}

@ -0,0 +1,14 @@
<calendar #slider [dateFormatter]="calendar.dateFormatter"
[monthviewEventDetailTemplate]="template"
[calendarMode]="calendar.mode"
[currentDate]="currentDateParent"
[lockSwipes]="true"
(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,149 @@
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 = [];
@Input() normalDays: any = [];
@Input() dayHoursTypeDetailsList: any = [];
@Input() currentDateParent: string;
@Output() monthTitle = new EventEmitter();
@Output() currentYear = new EventEmitter();
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 = [];
eventsdata: any = [];
public calendar = {
mode: 'month'
};
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;
public isFirst = false;
public selectedIndexData: any;
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.reRenderCalendar();
console.log(this.currentDateParent);
}
// tslint:disable-next-line: use-life-cycle-interface
ngAfterViewInit() {
setTimeout(() => {
this.reRenderCalendar();
}, 1000);
}
reRenderCalendar() {
this.renderDate(this.eventsdateAbsent, 'absent');
this.renderDate(this.eventsdateAttend, 'present');
this.renderDate(this.eventsdateDayOff, 'dayoff');
this.renderDate(this.normalDays, 'scheduleDay');
}
public async dateModal(shiftDetails) {
const modal = await this.mod.create({
component: DateInfoModalComponent,
showBackdrop: true,
backdropDismiss: true,
componentProps: {
TODAYDATE: this.selectedIndexData,
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(event) {
if (this.isFirst) {
console.log(event.selectedTime.getDate());
const selectedIndex = event.selectedTime.getDate();
this.selectedIndexData = this.dayHoursTypeDetailsList[selectedIndex - 1];
if (this.selectedIndexData.present) {
const rtpID = this.selectedIndexData.RTP_ID;
this.getScheduleShiftDetails(rtpID);
}
} else {
this.isFirst = true;
}
}
getScheduleShiftDetails(RTP_ID) {
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = RTP_ID;
GetShiftDetailRequestObject.P_PAGE_NUM = 1;
GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
this.dateModal(result);
}
});
}
}

@ -0,0 +1,104 @@
<!-- <ion-slides [options]="slideOptsOne" (ionSlideDidChange)="slideChanged($event)">
<ion-slide *ngFor="let shift of SHIFTDETAILS.GetScheduleShiftsDetailsList; let i=index"> -->
<!-- <div> -->
<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="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" >
<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>
</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>
<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 >
<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>
<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-grid>
</div>
<!-- </div> -->
<!-- </ion-slide>
</ion-slides> -->

@ -0,0 +1,180 @@
.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: -13px !important;
color: black !important;
font-weight: bold !important;
font-size: 15px !important;
margin-top: 8px;
text-align: center;
display: block;
width: 100%;
}
.p1{
margin-bottom: -7px !important;
color: black !important;
font-family: WorkSans-Bold !important;
font-size: 33px;
margin-top: 10px;
text-align: center;
display: block;
width: 100%;
}
.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;
}
// .less{ background-color: #22C6B3;
// background-color: #22C6B3;
// border: none;
// color: white;
// text-align: center;
// text-decoration: none;
// display: inline-block;
// font-size: 12px;
// border-radius: 30px;
// height: 26px;
// padding: 6px 24px;
// margin-left: 123px;
// /* margin-top: -19px; */
// margin-bottom: 17px;
// }

@ -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,138 @@
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 { IonSlides } from '@ionic/angular';
@Component({
selector: 'app-date-info-modal',
templateUrl: './date-info-modal.component.html',
styleUrls: ['./date-info-modal.component.scss'],
})
export class DateInfoModalComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
[x: string]: any;
gaugeType = 'full';
gaugeValue = 28.3;
gaugeLabel = 'Days';
@Input() TODAYDATE: any;
@Input() SHIFTDETAILS: any;
today: 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;
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
public options = {
cutoutPercentage: 85,
tooltips: { enabled: false },
legend: { display: false }
};
public slideOptsOne = {
slidesPerView: 1,
spaceBetween: 0
};
constructor(
public modalController: ModalController,
public navParams: NavParams,
public ts: TranslatorService
) { }
ngOnInit() {
console.log(this.TODAYDATE);
this.excess = this.TODAYDATE.EXCESS_HRS;
this.lateIn = this.TODAYDATE.LATE_IN_HRS;
this.shortage = this.TODAYDATE.SHORTAGE_HRS;
this.scheduled = this.TODAYDATE.SCHEDULED_HRS;
this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS ;
this.scheduleDate = this.TODAYDATE.SCHEDULE_DATE;
this.assignData(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0]);
}
assignData(shiftDetails) {
this.shiftTime = shiftDetails.SHT_NAME;
this.startDate = shiftDetails.SHT_ACTUAL_START_TIME;
this.endDate = shiftDetails.SHT_ACTUAL_END_TIME;
this.percentage = shiftDetails.PERCENTAGE;
this.percChart = this.percentage.substring(0, this.percentage.indexOf('%'));
const test = this.scheduleDate;
const splitdate = test.split(' ');
const date = splitdate[0];
const test1 = date.split('/');
this.day = test1[1];
this.year = test1[2];
this.month = test1[0];
// tslint:disable-next-line: radix
this.nameMonth = this.getMonthName(parseInt(this.month));
this.nameDay = this.getHeaderDay(new Date(date));
const d = new Date(date);
this.data = {
labels: ['percentage'],
datasets: [
{
data: [this.percChart],
backgroundColor: [
'#22C6B3'
],
borderWidth: 2
}]
};
}
slideChanged(ev) {
this.slides.getActiveIndex().then(index => {
const shiftDetails = this.SHIFTDETAILS[index];
this.assignData(shiftDetails);
});
}
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.weekDaysEn[date.getDay()];
}
}

@ -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;
}

@ -0,0 +1,26 @@
<div class="team-member-container">
<ion-row>
<ion-col [size]="3">
<div class="user-image-container">
<div class="user-image">
<img [src]="employeeImage" alt="Team Member Image"/>
</div>
</div>
</ion-col>
<ion-col [size]="9" style="padding: 8px 5px 0px;margin-top: 14px;">
<div>
<span class="employee-name">
<h2 class="name">{{name}}</h2>
<span class="title">{{title}}</span>
</span>
<span class="image-container">
<img src="../assets/imgs/green_call_icon.png" >
</span>
</div>
<!-- <div class="swipe-information">
<span class="check-in"><strong>Check-In:</strong> {{checkIn}}</span>
<span><strong>Check-Out:</strong> {{checkOut}}</span>
</div> -->
</ion-col>
</ion-row>
</div>

@ -0,0 +1,84 @@
.team-member-container{
background: white;
border-radius: 100px 20px 20px 100px;
margin-top: 15px;
font-family: WorkSans-Regular;
}
.user-image-container{
position: relative;
width: 70px;
height: 70px;
display: block;
margin: 0 auto;
// &:before{
// position: absolute;
// content: "";
// width: 20px;
// height: 20px;
// border-radius: 20px;
// border: 1px solid white;
// top: 0;
// right: 0;
// background-color: red;
// z-index: 9;
// }
// &.present:before{
// background-color: green !important;
// }
}
.user-image{
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
margin: 0px auto 6px;
img {
width: 100%;
max-height: 100%;
}
}
.employee-name{
display: inline-block;
width: 80%;
.name{
font-size: 16px;
color: black;
margin: 0;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.title{
font-size: 13px;
color: #888;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
}
.image-container{
width: 20%;
display: inline-block;
text-align: center;
vertical-align: top;
margin-top: 5px;
}
.swipe-information{
color: #888;
font-size: 12px;
border-top: 1px solid #ccc;
padding-top: 6px;
margin-top: 6px;
.check-in {
font-size: 12px;
margin-right: 15px;
}
}

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

@ -0,0 +1,19 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-employee-information',
templateUrl: './employee-information.component.html',
styleUrls: ['./employee-information.component.scss'],
})
export class EmployeeInformationComponent implements OnInit {
public userImage: any = '../assets/imgs/profile.png';
@Input() name: string;
@Input() title: string;
@Input() employeeImage: string;
constructor() { }
ngOnInit() {}
}

@ -23,6 +23,19 @@
</ion-slides>
</ion-row>
<ion-row *ngFor="let item of menuList; let i=index">
<ng-container *ngIf="item.MENU_TYPE === 'M'">
<ion-col [size]="12">
<ion-label>{{item.MENU_NAME}}</ion-label>
</ion-col>
<app-services-button
(click)="openMyTeamPage()"
[title]="item.MENU_NAME"
icon="assets/icon/new-design/leave_balance.png">
</app-services-button>
</ng-container>
</ion-row>
<ion-row *ngFor="let menuItem of menuEntries; let i=index">
<ion-row class="attendance-module" *ngIf="i == 1">
@ -52,94 +65,6 @@
</ion-slides>
</ion-row>
<!-- <ion-row class="attendance-module">
<ion-col [size]="8">
<h3>Monthly Attendance</h3>
<span>View your Monthly Time Sheet</span>
<ion-button>
View Detail
</ion-button>
</ion-col>
<ion-col [size]="4">
<img src="assets/icon/new-design/attendance_button_icon.png"/>
</ion-col>
</ion-row> -->
<!-- <ion-row>
<ion-col [size]="12">
<ion-label>My Travelling</ion-label>
</ion-col>
<ion-col [size]="4">
<app-services-button
title="Ticket Request"
icon="assets/icon/new-design/ticket_request.png">
</app-services-button>
</ion-col>
<ion-col [size]="4">
<app-services-button
title="Borrowing Passport"
icon="assets/icon/new-design/borrowing_passport.png">
</app-services-button>
</ion-col>
<ion-col [size]="4">
<app-services-button
title="Vacations Rules"
icon="assets/icon/new-design/vacation_rules.png">
</app-services-button>
</ion-col>
</ion-row> -->
<!-- <ion-row>
<ion-col [size]="12">
<ion-label>Miscellaneous</ion-label>
</ion-col>
<ion-col [size]="4">
<app-services-button
title="Uniform Request"
icon="assets/icon/new-design/uniform_request.png">
</app-services-button>
</ion-col>
<ion-col [size]="4">
<app-services-button
title="ID Badge Request"
icon="assets/icon/new-design/id_badge_request.png">
</app-services-button>
</ion-col>
<ion-col [size]="4">
<app-services-button
title="Separation/ Resignation"
icon="assets/icon/new-design/separation_resignation.png">
</app-services-button>
</ion-col>
</ion-row> -->
<!--
<ion-row>
<ion-col [size]="4">
<app-services-button
title="Recreational Activities"
icon="assets/icon/new-design/recreational_activities.png">
</app-services-button>
</ion-col>
<ion-col [size]="4">
<app-services-button
title="Employee Certificate"
icon="assets/icon/new-design/employee_certificate.png">
</app-services-button>
</ion-col>
<ion-col [size]="4">
<app-services-button
title="IT Forms"
icon="assets/icon/new-design/it_forms.png">
</app-services-button>
</ion-col>
</ion-row> -->
</ion-grid>
<div class="fixed-shift-timer" *ngIf="isCheckedIn" (click)="openattentracking()">
<span class="subTitle">Time Left Today</span>

@ -1,48 +1,51 @@
import { EitService } from "./../eit/services/eit.service";
import { Component, OnInit } from "@angular/core";
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
import { MenuController, Events, ActionSheetController } from "@ionic/angular";
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/models/authenticated-user";
import { MenuService } from "src/app/hmg-common/services/menu/menuservice.service";
import { MenuResponse } from "src/app/hmg-common/services/menu/models/menu-response";
import { CommonService } from "src/app/hmg-common/services/common/common.service";
import { Geolocation } from "@ionic-native/geolocation/ngx";
import { ZBar, ZBarOptions } from "@ionic-native/zbar/ngx";
import { BarcodeScanner } from "@ionic-native/barcode-scanner/ngx";
import { Device } from "@ionic-native/device/ngx";
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 { 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 { 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 { AccrualService } from "../accrual-balances/services/accrual.service";
import { WorklistMainService } from "../notification/service/work-list.main.service";
import { EitService } from './../eit/services/eit.service';
import { Component, OnInit } from '@angular/core';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { MenuController, Events, ActionSheetController } from '@ionic/angular';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
import { MenuService } from 'src/app/hmg-common/services/menu/menuservice.service';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { ZBar, ZBarOptions } from '@ionic-native/zbar/ngx';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { Device } from '@ionic-native/device/ngx';
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 { 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 { 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 { 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';
import { WorklistMainService } from '../notification/service/work-list.main.service';
@Component({
selector: "app-home",
templateUrl: "./home.page.html",
styleUrls: ["./home.page.scss"]
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss']
})
export class HomePage implements OnInit {
userData: any = {};
userImage: any = "../assets/imgs/profile.png";
userImage: any = '../assets/imgs/profile.png';
menuList: any = [];
zbarOptions: any;
scannedResult: any;
@ -59,10 +62,10 @@ export class HomePage implements OnInit {
missingSwipeRequestObject : any;
public statsButtons = [
{
title: "Work List",
title: 'Work List',
statsValue: 0,
icon: "assets/icon/new-design/work_list.png",
link: "1"
icon: 'assets/icon/new-design/work_list.png',
link: '1'
},
// {
// title: 'Pending Request',
@ -71,22 +74,22 @@ export class HomePage implements OnInit {
// link: ''
// },
{
title: "Missing Swipes",
title: 'Missing Swipes',
statsValue: 0,
icon: "assets/icon/new-design/missing_swipe.png",
link: "2"
icon: 'assets/icon/new-design/missing_swipe.png',
link: '2'
},
{
title: "Leave Balance",
title: 'Leave Balance',
statsValue: 0,
icon: "assets/icon/new-design/leave_balance.png",
link: "3"
icon: 'assets/icon/new-design/leave_balance.png',
link: '3'
},
{
title: "Ticket Balance",
title: 'Ticket Balance',
statsValue: 0,
icon: "assets/icon/new-design/ticket_balance.png",
link: "4"
icon: 'assets/icon/new-design/ticket_balance.png',
link: '4'
}
];
@ -122,12 +125,17 @@ export class HomePage implements OnInit {
public hasFinished = false;
public remainingTime: any;
public scheduledTime: any;
public spentHours: any;
public isCheckedIn = undefined;
public displayTime: any;
public menuEntries: any;
public percent: any;
public selEmp: string;
public selMenu: MenuResponse = new MenuResponse();
public respID: number;
public menuType: any;
accrualBalancesList: any;
public countAllNotification: number = 0;
public countAllNotification = 0;
constructor(
public ts: TranslatorService,
@ -150,13 +158,16 @@ export class HomePage implements OnInit {
private permissions: DevicePermissionsService,
public DS: DashboredService,
public accrualService: AccrualService,
//////////////////////////////////////// TIME AND DATE////////////////////////////
public timeCardService: TimeCardService,
///////////////////// END/////////////////////////////////////////////////////////
public workListService: WorklistMainService
) {
this.events.subscribe("img-change", displayImg => {
this.events.subscribe('img-change', displayImg => {
this.userImage = this.sanitizer.bypassSecurityTrustUrl(
"data:Image/*;base64," + displayImg
'data:Image/*;base64,' + displayImg
);
console.log("html saved img: " + this.userImage);
console.log('html saved img: ' + this.userImage);
});
}
@ -170,7 +181,7 @@ export class HomePage implements OnInit {
ionViewWillEnter() {
this.remainingTime = 0;
this.displayTime = "00:00:00";
this.displayTime = '00:00:00';
this.runTimer = false;
this.getUserDetails();
}
@ -215,20 +226,20 @@ export class HomePage implements OnInit {
const hours = Math.floor(secNum / 3600);
const minutes = Math.floor((secNum - hours * 3600) / 60);
const seconds = secNum - hours * 3600 - minutes * 60;
let hoursString = "";
let minutesString = "";
let secondsString = "";
hoursString = hours < 10 ? "0" + hours : hours.toString();
minutesString = minutes < 10 ? "0" + minutes : minutes.toString();
secondsString = seconds < 10 ? "0" + seconds : seconds.toString();
return hoursString + ":" + minutesString + ":" + secondsString;
let hoursString = '';
let minutesString = '';
let secondsString = '';
hoursString = hours < 10 ? '0' + hours : hours.toString();
minutesString = minutes < 10 ? '0' + minutes : minutes.toString();
secondsString = seconds < 10 ? '0' + seconds : seconds.toString();
return hoursString + ':' + minutesString + ':' + secondsString;
}
getDeviceLocation() {
const isVirtual = this.device.isVirtual;
if (isVirtual === true) {
alert("emulater>>>>>>>" + isVirtual);
alert("You are using virtual device");
alert('emulater>>>>>>>' + isVirtual);
alert('You are using virtual device');
return false;
}
this.permissions.requestLocationAutherization().then(granted => {
@ -246,7 +257,7 @@ export class HomePage implements OnInit {
this.attendance();
})
.catch(error => {
console.log("Error getting location", error);
console.log('Error getting location', error);
});
} else {
return false;
@ -259,9 +270,9 @@ export class HomePage implements OnInit {
if (servicePrivilage.Previlege === false) {
document
.getElementById(servicePrivilage.ServiceName)
.setAttribute("disabled", "disabled");
.setAttribute('disabled', 'disabled');
document.getElementById(servicePrivilage.ServiceName).style.filter =
"grayscale(1)";
'grayscale(1)';
}
}
}
@ -288,7 +299,7 @@ export class HomePage implements OnInit {
this.longt = resp.coords.longitude;
})
.catch(error => {
console.log("Error getting location", error);
console.log('Error getting location', error);
});
}
@ -301,14 +312,14 @@ export class HomePage implements OnInit {
.loadAuthenticatedUser()
.subscribe((user: AuthenticatedUser) => {
if (user) {
this.events.publish("setMenu");
this.events.publish('setMenu');
this.userData = user;
this.sharedData.setSharedData(
this.userData,
AuthenticatedUser.SHARED_DATA
);
this.userImage = user.EMPLOYEE_IMAGE
? "data:image/png;base64," + user.EMPLOYEE_IMAGE
? 'data:image/png;base64,' + user.EMPLOYEE_IMAGE
: this.userImage;
this.callDashboardServices();
} else {
@ -327,7 +338,7 @@ export class HomePage implements OnInit {
}
public Vacation_Rule() {
this.common.navigateForward("/vacation-rule/home");
this.common.navigateForward('/vacation-rule/home');
}
private getMenu() {
@ -339,7 +350,7 @@ export class HomePage implements OnInit {
private handleMenuResult(result) {
if (this.common.validResponse(result)) {
if (this.common.hasData(result.List_Menu)) {
console.log("list menu");
console.log('list menu');
this.menuList = result.List_Menu;
this.getMenuDetails();
}
@ -363,7 +374,7 @@ export class HomePage implements OnInit {
this.common.sharedService.setSharedData(selMenu, MenuResponse.SHARED_DATA);
this.getMenuEntries(item);
// if (item.MENU_TYPE === 'M') {
// this.common.openMyTeamPage();
// this.common.openMyTeamPage();
// // this.navCtrl.push("MySubordinatePage");
// } else if (item.MENU_TYPE === 'S') {
// this.common.sharedService.setSharedData(item, 'mySpecList');
@ -374,12 +385,15 @@ export class HomePage implements OnInit {
// }
}
openMyTeamPage() {
this.common.openMyTeamPage();
}
getMenuEntries(item) {
const request: any = {};
let selEmpNo: string = null;
let nationality: string = null;
request.P_SELECTED_RESP_ID = -999;
if (item.MENU_TYPE === "S") {
if (item.MENU_TYPE === 'S') {
request.P_SELECTED_RESP_ID = item.RESP_ID;
} else {
selEmpNo = this.common.sharedService.getSharedData(
@ -534,35 +548,33 @@ 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(":")
);
this.isCheckedIn = this.remainingTime === this.scheduledTime ? false : true;
this.initTimer();
}
this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':'));
this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':'));
this.spentHours = this.convertInSeconds(data.P_SPENT_HOURS.split(':'));
this.isCheckedIn = this.spentHours === 0 ? false : true;
if (this.isCheckedIn) {
this.initTimer();
}
}
showAttendanceTracking() {
this.DS.getAttendanceTracking().subscribe(
(result: AttendanceTrackingResponse) => {
if (this.common.validResponse(result)) {
const key = "GetAttendanceTrackingList";
this.convertAndAssignTime(result[key]);
}
showAttendanceTracking() {
const request = {
P_SELECTED_EMPLOYEE_NUMBER: this.userData.EMPLOYEE_NUMBER
};
this.DS.getAttendanceTracking(request).subscribe((result: AttendanceTrackingResponse) => {
if (this.common.validResponse(result)) {
const key = 'GetAttendanceTrackingList';
this.convertAndAssignTime(result[key]);
}
);
}
});
}
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");
console.log('response');
}
});
}
@ -573,12 +585,12 @@ export class HomePage implements OnInit {
console.log("Error ");
}).subscribe((result: GetOpenNotificationsResponse) => {
if (this.common.validResponse(result)) {
const key = "P_OPEN_NTF_NUMBER";
const key = 'P_OPEN_NTF_NUMBER';
this.countAllNotification = result[key];
this.ITGCountAllNotification();
this.common.sharedService.setSharedData(
result,
"worklistNotifications"
'worklistNotifications'
);
}
});
@ -599,13 +611,13 @@ export class HomePage implements OnInit {
console.log("Error ");
}).subscribe((result: GetSubordinatesLeavesResponse) => {
if (this.common.validResponse(result)) {
console.log("response");
console.log('response');
console.log(result);
}
});
}
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
@ -613,7 +625,7 @@ export class HomePage implements OnInit {
console.log("Error ");
}).subscribe((result: GetSubordinatesAttdStatusResponse) => {
if (this.common.validResponse(result)) {
console.log("response");
console.log('response');
console.log(result);
}
});
@ -628,19 +640,22 @@ export class HomePage implements OnInit {
);
selMenu.GetMenuEntriesList = subMenu;
this.common.sharedService.setSharedData(selMenu, MenuResponse.SHARED_DATA);
if (subMenu.REQUEST_TYPE === "ABSENCE") {
if (subMenu.REQUEST_TYPE === 'ABSENCE') {
this.common.openAbsencePage();
} else if (subMenu.REQUEST_TYPE === "EIT") {
} else if (subMenu.REQUEST_TYPE === 'EIT') {
this.common.openEitListPage();
} else if (subMenu.REQUEST_TYPE === "PAYSLIP") {
} else if (subMenu.REQUEST_TYPE === 'PAYSLIP') {
this.common.openPayslipPage();
} else if (subMenu.MENU_ENTRY_TYPE === "MENU") {
} else if (subMenu.MENU_ENTRY_TYPE === 'MENU') {
this.common.sharedService.setSharedData(
selMenu.GetMenuEntriesList,
"menuEntries"
'menuEntries'
);
this.common.openEITPage();
}
if (subMenu.REQUEST_TYPE === 'TIME_CARD') {
this.common.openTimeCardPage();
}
}
getAccrualBalance() {
@ -687,13 +702,13 @@ export class HomePage implements OnInit {
});
}
openattentracking() {
openattentracking() {
this.common.openAttenTrackingpage();
}
}
openProfilePage() {
openProfilePage() {
this.common.openEditProfile();
}
}
openStatsButton(link: any) {
// console.log(link);

@ -1,158 +1,281 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
</ion-buttons>
<ion-title>EMPLOYEE DETAIL</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<nav-buttons [navigate] = "false" (backClick)="goback()"></nav-buttons>
<ion-icon class="search-icons" color="light" name="arrow-back" *ngIf="modalFlag" (click)="dismiss()"></ion-icon>
</ion-buttons>
<ion-title color="light" >{{headerTitle}}</ion-title>
<!-- <ion-buttons slot="end">
<button ion-button icon-only class="btnBack" *ngIf="isSpecialist == false" (click)="goToSubordinate();">
<ion-icon class="search-icons" color="light" name="search"></ion-icon>
</button>
</ion-buttons> -->
</ion-toolbar>
</ion-header>
<ion-content padding>
<div *ngIf="employee">
<ion-card>
<ion-card-header class="boxHdr">
<div class="hrTitle">{{employee.EMPLOYEE_NAME}}</div>
</ion-card-header>
<ion-card-content>
<div>
<div class="centerDiv profileDiv">
<!-- <p class="TxtPlace boldTxt">{{User_name_Emp}}</p> -->
<ion-img class="profileImg"
[src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
</ion-img>
</div>
<ion-grid class="profile-grid">
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','empNo')}}</label>
</ion-col>
<ion-col col-7>
<label>{{employee.EMPLOYEE_NUMBER}}</label>
</ion-col>
</ion-row>
<!-- <ion-row>
<ion-col class="colBold" col-5>
<label>{{"userProfile.name" | translate}}</label>
</ion-col>
<ion-content>
<div class="contentBg">
<div class="result-graph" style="padding-top: 12px;">
<div class="user-info">
<div class="user-image-container">
<div class="user-image">
<img [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div>
</div>
<h1>{{employee.EMPLOYEE_NAME}}</h1>
<span>{{employee.JOB_NAME}}</span>
</div>
<div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="4">
<div class="action-button col-button">
<span class="action-button-icon">
<img src="../assets/imgs/call_icon.png">
</span>
<span>Call</span>
</div>
</ion-col>
<ion-col [size]="4" (click)="getMenuEntries(employee)">
<div class="action-button col-button">
<span class="action-button-icon">
<img src="../assets/imgs/create_request_icon.png">
</span>
<span>Create Request</span>
</div>
</ion-col>
<ion-col [size]="4" style="opacity:0.3;">
<div class="action-button col-button">
<span class="action-button-icon">
<img src="../assets/imgs/message_icon.png">
</span>
<span>Message</span>
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-7>
<label>{{employee.EMPLOYEE_NAME}}</label>
</ion-col>
</ion-row> -->
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','busG')}}</label>
</ion-col>
<ion-col col-7>
<label>{{employee.BUSINESS_GROUP_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','job')}}</label>
</ion-col>
<ion-col col-7>
<label>{{employee.JOB_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','locName')}} </label>
</ion-col>
<ion-col col-7>
<label>{{employee.LOCATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','payrol')}} </label>
</ion-col>
<ion-col col-7>
<label>{{employee.PAYROLL_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','orgEmail')}}</label>
</ion-col>
<ion-col col-7>
<label>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','orgName')}}</label>
</ion-col>
<ion-col col-7>
<label>{{employee.ORGANIZATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','position')}}</label>
</ion-col>
<ion-col col-7>
<label>{{employee.POSITION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','grade')}}</label>
</ion-col>
<ion-col col-7>
<label>{{employee.GRADE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold" col-5>
<label>{{ts.trPK('userProfile','category')}}</label>
</ion-col>
<ion-col col-7>
<label>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</label>
</ion-col>
</ion-row>
<!-- <ion-row (click)="getMenuEntries(employee);">
<ion-col col-7> -->
<!-- <label for="">Request for {{employee.EMPLOYEE_NAME}}</label> -->
<!-- </ion-col>
</ion-row> -->
</ion-grid>
</div>
</div>
<div class="segments-container">
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
<ion-segment-button
value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
<ion-label>Attendance</ion-label>
</ion-segment-button>
<ion-segment-button
value="Team Members"
[ngClass]="activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment'">
<ion-label>Team Members</ion-label>
</ion-segment-button>
<ion-segment-button
value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
<ion-label>About</ion-label>
</ion-segment-button>
</ion-segment>
</div>
<div *ngIf="activeSegment === 'Attendance'">
<div>
<p style="margin-bottom: 1px;">
{{ts.trPK('myTeam','todayAttendance')}}
</p>
<ion-row style="margin: 0 -5px;">
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','checkIn')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','checkOut')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','late')}}</span>
<h2>{{attendanceTrackingList.P_LATE_IN_HOURS | slice:0:-3}} </h2>
</div>
</ion-col>
</ion-row>
</div>
<div class="header">
<div>
<ion-row>
<ion-col [size]="2" style="text-align: left;">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}} {{year}}</span>
</ion-col>
<ion-col [size]="2" style="text-align: right;">
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row>
</div>
</div>
<div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','attendance-statistics')}}</span>
</div>
<div style="position: relative;">
<div class="label-container">
<div class="green-label-container">
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
</div>
<div class="blue-label-container">
<span class="span-one">{{ts.trPK('attendance','absent')}}</span>
<span class="span-two">{{absentDays}}</span>
</div>
</div>
<div class="graph-container">
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}}</h2>
<span>{{ts.trPK('absenceList','days')}}</span>
</div>
</ion-card-content>
</ion-card>
<div class="centerDiv">
<ion-button color="customnavy" (click)="getMenuEntries(employee)">{{ts.trPK('myTeam','requestFor')}}
{{employee.EMPLOYEE_NAME}}</ion-button>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div>
</div>
<div *ngIf="isSpecialist == false" >
<ion-list no-lines *ngIf="empSubordinate && empSubordinate.length>0">
<ion-item no-border *ngFor="let subordinate of empSubordinate;let i=index" (click)="getDetails(i);">
<ion-avatar slot="start">
<!-- <img *ngIf="subordinate.EMPLOYEE_IMAGE" src="data:image/*;base64,{{ subordinate.EMPLOYEE_IMAGE}}"> -->
<img
[src]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
</ion-avatar>
<p class="boldTxt">{{subordinate.EMPLOYEE_NAME}}</p>
<p>{{subordinate.POSITION_NAME}}</p>
<ion-badge slot="end">{{subordinate.NUM_OF_SUBORDINATES}}</ion-badge>
</ion-item>
</ion-list>
<ion-infinite-scroll threshold="100px" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-row class="attendance-summary">
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
<h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
<h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
<h2>{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
<h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
</div>
</ion-col>
</ion-row>
<div *ngIf="showData" class="calendar-container">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
<app-circle-calendar
[eventsdateAttend]='arrDaysAttendance'
[eventsdateAbsent]='arrDaysAbsent'
[eventsdateDayOff]='arrDaysOff'
[currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
[normalDays]="normalDays"
(monthTitle)='changeMonthTitle($event)'
(currentYear)=changeYear($event)>
</app-circle-calendar>
</div>
</div>
</ion-content>
<div *ngIf="activeSegment === 'Team Members'">
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
[(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)">
<ion-select-option value="Name" selected="true">{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
<ion-select-option value="User Name">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
<ion-select-option value="Email">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
</ion-select>
</ion-col>
<ion-col [size]="7" class="input-container" no-padding>
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder="Search" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col>
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployeeTwo()">
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col>
</ion-row>
</div>
<div *ngIf="isSearch">
<ion-row class="search-container">
<ion-col style="float: left;" size=[6] (click)="clearSearchTwo()">
<span style="margin-left: 5px;">Clear Search</span>
<ion-icon name="close" ></ion-icon>
</ion-col>
</ion-row>
</div>
<ng-container *ngFor="let subordinate of empSubordinate;let i=index">
<app-employee-information
[name]="subordinate.EMPLOYEE_NAME"
[title]="subordinate.POSITION_NAME"
[employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
(click)="getDetails(i)">
</app-employee-information>
</ng-container>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
<div class="employee-information-indetail" *ngIf="activeSegment === 'About'">
<ion-row>
<ion-col [size]="6" style="border-right: 1px solid #ccc;">
<h2>Employee ID</h2>
<p>{{employee.EMPLOYEE_NUMBER}}</p>
</ion-col>
<ion-col [size]="6">
<h2>Category</h2>
<p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
</ion-col>
<ion-col [size]="12">
<h2>Address</h2>
<p>{{employee.LOCATION_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<h2>Phone Number</h2>
<p>{{employee.EMPLOYEE_MOBILE_NUMBER}}</p>
</ion-col>
<ion-col [size]="12">
<h2>Business Group</h2>
<p>{{employee.ORGANIZATION_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<h2>Job</h2>
<p>{{employee.JOB_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<h2>Payroll</h2>
<p>{{employee.PAYROLL_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<h2>Organization Email Address</h2>
<p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
</ion-col>
<ion-col [size]="12">
<h2>Position</h2>
<p>{{employee.POSITION_NAME}}</p>
</ion-col>
<ion-col [size]="12" style="border-bottom: none;">
<h2>Grade</h2>
<p>{{employee.GRADE_NAME}}</p>
</ion-col>
</ion-row>
</div>
</div>
</ion-content>

@ -1 +1,415 @@
.search-icons{font-size:.7cm}
ion-content {
--ion-background-color: whitesmoke;
}
ion-title{
color: white;
position: absolute;
top: 0;
text-align: center;
left: 15%;
right: 15%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;
}
.contentBg{
padding: 0px 20px;
}
.contentBg:before {
position: absolute;
content: "";
background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
.user-info{
text-align: center;
margin-bottom: 15px;
.user-image-container{
position: relative;
width: 80px;
height: 80px;
display: block;
margin: 0 auto;
// &:before{
// position: absolute;
// content: "";
// width: 20px;
// height: 20px;
// border-radius: 20px;
// border: 1px solid white;
// top: 0;
// right: 0;
// background-color: red;
// z-index: 9;
// }
// &.present:before{
// background-color: green !important;
// }
}
.user-image{
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
margin: 0px auto 6px;
}
h1{
margin: 0;
padding: 0;
font-family: WorkSans-Bold;
font-size: 18px;
margin-bottom: 4px;
}
span{
font-size: 14px;
display: block;
color: #888
}
}
$actionBtnSize : 36px;
.user-actions{
text-align: center;
.action-button{
font-size: 11px;
white-space: nowrap;
color: #888;
.action-button-icon{
width: $actionBtnSize;
height: $actionBtnSize;
border-radius: $actionBtnSize;
margin: 0 auto;
display: block;
background-color: #22c6b3;
line-height: $actionBtnSize;
margin-bottom: 3px;
img{
margin: 0 auto;
vertical-align: middle;
}
}
}
}
.employee-information-indetail{
background: white;
margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
ion-col{
padding: 15px;
border-bottom: 1px solid #ccc;
}
h2{
font-size: 13px;
font-family: WorkSans-Bold;
margin: 0;
}
p{
font-size: 13px;
margin: 0;
}
}
.segments-container {
border-radius: 100px;
overflow: hidden;
margin-top: 15px;
background: white;
color: black;
}
.active-Segment {
font-size: 0.3cm !important;
background: #22c6b3 !important;
text-transform: none;
--color-checked: none;
border-radius: 100px;
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
.colum-container{
padding: 15px;
border-bottom: 1px solid #ccc;
}
///////////////////////// Team Members css //////////////////////@extend
.filters-row {
margin-top: 10px;
}
.search-dropdown{
background: #22c6b3;
ion-select {
.select-text{
margin-left: -10px;
}
.select-icon{
.select-icon-inner{
opacity: 1;
color: white;
margin-top: -1px;
}
}
}
}
.input-container{
background: white;
ion-input{
border-bottom-color: transparent;
}
}
.search-container{
margin-top: 15px;
ion-col{
background: white;
border-radius: 12px;
padding-right: 10px;
flex: none;
ion-icon{
margin-right: 3px;
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
span{
font-size: 12px;
vertical-align: middle;
}
}
}
/////////////////////////////////////////////////////// Attendance ///////////////////////
.header{
margin-top: 20px;
}
.slidPrev{
margin-left: 10px;
background: transparent;
}
.slidNext{
background: transparent;
margin-top: -1px;
margin-left: 43px;
}
.activeArrow{
height: 20px;
width: 20px;
color: #22c6b3;
}
.disabledArrow{
height: 20px;
width: 20px;
color: gray;
}
.result-graph {
position: relative;
background: white;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
}
.request-heading {
span {
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 10px;
}
}
.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;
}
}
.today-graph {
width: 100%;
max-height: 4cm;
}
.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;
}
.labelGrid{
background-color: white !important;
border-radius: 20px !important;
height: 88px !important;
border: 1px solid #d6d4d4;
position: relative;
padding: 10px;
label {
font-size: 9px;
line-height: 11px !important;
display: block;
}
h2 {
font-size: 25px;
font-weight: bold;
display: block;
text-align: right;
margin:0;
position: absolute;
bottom: 0;
left:0;
width: 100%;
padding: 10px;
}
}
.bodyGrid{
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;
}
.attendance-information{
background: white;
border-radius: 20px;
padding: 10px;
h2{
padding: 0;
margin: 0;
font-size: 22px;
}
span{
font-size: 11px;
}
}
.month-year-span{
font-size: 20px;
font-family: WorkSans-Bold;
}
.green-label-container{
border-top: 5px solid #22c6b3;
padding: 1px 0px;
margin: 15px 0px
}
.blue-label-container{
border-top: 5px solid #094875;
padding: 1px 0px;
margin: 15px 0px
}
.span-one{
display: block;
font-size: 12px;
color: black;
}
.span-two{
display: block;
font-size: 22px;
font-family: WorkSans-Bold;
}
.graph-container{
margin-left: -50px;
position: relative;
margin-right: 50px;
}
.label-container{
position: absolute;
width: 20%;
right: 30px;
top: 50%;
margin-top: -60px;
}
.attendance-summary .attendance-information {
span{
height: 32px;
display: block;
line-height: 14px;
}
h2{
text-align: right;
font-family: WorkSans-Bold;
}
}
.calendar-container{
background: white;
margin-bottom: 100px;
margin-top: 20px;
border-radius: 20px;
span{
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 10px;
}
}

@ -1,36 +1,99 @@
import { Component, OnInit,ViewChild } from "@angular/core";
import { Location } from "@angular/common";
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
import { CommonService } from "src/app/hmg-common/services/common/common.service";
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { MenuResponse } from "src/app/hmg-common/services/menu/models/menu-response";
import { MyTeamService } from "../service/my-team.service";
import { MenuService } from "src/app/hmg-common/services/menu/menuservice.service";
import { ModalController } from "@ionic/angular";
import { Component, OnInit, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import { MyTeamService } from '../service/my-team.service';
import { MenuService } from 'src/app/hmg-common/services/menu/menuservice.service';
import { ModalController } from '@ionic/angular';
import { IonInfiniteScroll } from '@ionic/angular';
import * as moment from 'moment';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
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 { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { AttendanceTrackingResponse } from 'src/app/hmg-common/services/dashbored/attendance-tracking.response';
@Component({
selector: "app-details",
templateUrl: "./details.component.html",
styleUrls: ["./details.component.scss"]
selector: 'app-details',
templateUrl: './details.component.html',
styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {
public static opendEmployeesARR='opend_employees_arr';
public static opendEmployeesARR = 'opend_employees_arr';
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
pageNum: number = 1;
pageLimit: number = 50;
modalFlag: any = false;
public activeSegment = 'Attendance';
pageNum = 1;
pageLimit = 50;
empSubordinate: any;
employee: any;
IsReachEnd: boolean = false;
isReachEnd = false;
searchKey: any;
public searchKeySelect: any;
public isSearch = false;
public searchKeySelect = 'Name';
public getEmployeeSubordinatesRequestObject: any;
infiniteRequest: any;
isSpecialist: boolean = false;
isSpecialist = false;
selMenu: MenuResponse = new MenuResponse();
public opendEmployees :any=[];
public headerTitle: string = "";
public opendEmployees: any = [];
public headerTitle = '';
public userImage: any = '../assets/imgs/profile.png';
public menuType: any;
public selEmp: string;
public dateFrom: any = new Date();
public dateTo: any = new Date();
public respID: number;
public timeCardSummaryData: any = [];
public dayHoursData: any = [];
public selectedShift: any;
public dayAndHoursPageNumber = 1;
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 normalDays: any = [];
public monthTitle: string = moment().format('MMMM');
public yearTitle: string;
public activeMonth: any;
public currentMonthName = this.getMonthName(new Date().getMonth() + 1);
public showData = false;
public currentYear = new Date().getFullYear();
public attendanceTrackingList: any = [];
public currentDate = new Date();
public dayHoursTypeDetailsList = [];
month: any;
year: any;
preMonth: number;
nextMonth: any;
public options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
public data = {};
public slideOptsOne = {
slidesPerView: 4,
spaceBetween: 10
};
public previousActiveIndex = 0;
public currentActiveIndex = 0;
public searchNameOrUserName = '';
public searchEmail = '';
public showEmailInput = false;
public showUserNameOrNameInput = true;
constructor(
public timeCardService: TimeCardService,
public menuService: MenuService,
public common: CommonService,
public myTeamService: MyTeamService,
@ -38,58 +101,281 @@ export class DetailsComponent implements OnInit {
public modalController: ModalController,
private location: Location,
public authService: AuthenticationService,
) {
console.log("Constuctor called");
}
public dashboardService: DashboredService,
) { }
ngOnInit() {
this.intializeMemberDetail();
this.showAttendanceTracking();
}
showAttendanceTracking() {
this.employee = this.common.sharedService.getSharedData(MyTeamService.EMPLOYEE_SHARED_DATA, false);
const request = {
P_SELECTED_EMPLOYEE_NUMBER: this.employee.EMPLOYEE_NUMBER
};
this.dashboardService.getAttendanceTracking(request).subscribe((result: AttendanceTrackingResponse) => {
if (this.common.validResponse(result)) {
const key = 'GetAttendanceTrackingList';
this.attendanceTrackingList = result[key];
}
});
}
public segmentChanged(event: any) {
this.activeSegment = event.detail.value;
if (this.activeSegment === 'Attendance') {
this.normalDays = [];
this.initAttendance();
}
}
initAttendance() {
this.showData = false;
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?) {
this.arrDaysOff = [];
this.arrDaysAttendance = [];
this.arrDaysAbsent = [];
this.month = month;
this.year = year;
this.getTimeCardSummaryDetails(month, year);
this.getDayHoursTypeDetails(month, year);
}
public getDayHoursTypeDetails(month?, year?) {
console.log('getDayHoursTypeDetails');
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
this.monthName = month;
this.yearDate = year;
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.employee.EMPLOYEE_NUMBER;
dayAndHoursReqObj.P_MENU_TYPE = 'M';
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;
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.dayHoursTypeDetailsList = result.GetDayHoursTypeDetailsList;
}
});
}
nextSlide() {
this.normalDays = [];
if (this.currentMonthName !== this.month) {
this.showData = false;
if (this.nextMonth > 12) {
this.currentYear = this.currentYear + 1;
this.nextMonth = 1;
}
this.currentDate = new Date(this.currentYear, (this.nextMonth - 1), 1);
this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2;
}
}
previousSlide() {
this.normalDays = [];
this.showData = false;
if (this.preMonth === 0) {
this.currentYear = this.currentYear - 1;
this.preMonth = 12;
}
this.currentDate = new Date(this.currentYear, (this.preMonth - 1), 1);
console.log(this.currentDate);
this.calendarConfig(this.getMonthName(this.preMonth) , this.currentYear);
this.preMonth = this.preMonth - 1;
this.nextMonth = this.preMonth + 2;
}
changeMonthTitle(title) {
this.monthTitle = title;
this.getTimeCardSummaryDetails();
}
changeYear(year) {
this.yearTitle = year;
}
intializeMemberDetail(userID?){
countAllAttendDays(allDays) {
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < allDays.length; i++) {
// tslint:disable-next-line: triple-equals
if (allDays[i].ATTENDED_FLAG == 'Y') {
allDays[i].present = true;
allDays[i].absent = false;
allDays[i].daysOff = false;
allDays[i].schedule = false;
this.arrDaysAttendance.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
// tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') {
allDays[i].present = false;
allDays[i].absent = true;
allDays[i].daysOff = false;
allDays[i].schedule = false;
this.arrDaysAbsent.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: '09:00:00',
allDay: false
});
// tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') {
allDays[i].present = false;
allDays[i].absent = false;
allDays[i].daysOff = true;
allDays[i].schedule = false;
this.arrDaysOff.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else {
allDays[i].present = false;
allDays[i].absent = false;
allDays[i].daysOff = false;
allDays[i].schedule = true;
this.normalDays.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
}
}
this.showData = true;
console.log(this.arrDaysOff);
console.log(this.arrDaysAttendance);
console.log(this.arrDaysAbsent);
console.log(this.normalDays);
}
public getTimeCardSummaryDetails(month?, year?) {
const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
this.monthName = month;
this.yearDate = year;
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.employee.EMPLOYEE_NUMBER;
timeCardSummaryReqObj.P_MENU_TYPE = 'M';
timeCardSummaryReqObj.P_SELECTED_RESP_ID = this.respID;
timeCardSummaryReqObj.SearchMonth = this.monthName;
timeCardSummaryReqObj.SearchYear = this.yearDate;
this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
this.absentDays = this.timeCardSummaryData.ABSENT_DAYS;
this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS;
// this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS;
// if (this.absentDays === 0 && this.attendedDays === 0) {
// this.futrueDays = this.totalAttendancePrecentage;
// }
this.totalAttendancePrecentage = this.absentDays + this.attendedDays;
if (this.totalAttendancePrecentage > 0) {
this.data = {
datasets: [
{
data: [this.absentDays, this.attendedDays],
backgroundColor: [
'#094875',
'#22c6b3'
],
borderWidth: 2
}]
};
}
}
});
}
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';
}
}
intializeMemberDetail(userID?) {
this.empSubordinate = [];
this.activeSegment = 'About';
this.pageLimit = 50;
this.pageNum = 1;
this.employee = this.common.sharedService.getSharedData(
MyTeamService.EMPLOYEE_SHARED_DATA,
false
);
let employees = this.common.sharedService.getSharedData( DetailsComponent.opendEmployeesARR, false);
if( employees ){
this.employee = this.common.sharedService.getSharedData(MyTeamService.EMPLOYEE_SHARED_DATA, false);
const employees = this.common.sharedService.getSharedData( DetailsComponent.opendEmployeesARR, false);
if ( employees ) {
this.opendEmployees.push(this.employee);
this.common.sharedService.setSharedData(this.opendEmployees, DetailsComponent.opendEmployeesARR);
}
//this.opendEmployees = employees;
console.log(this.employee);
this.selMenu = this.common.sharedService.getSharedData(
MenuResponse.SHARED_DATA,
false
);
this.headerTitle = this.selMenu.List_Menu.MENU_NAME;
this.isSpecialist = this.common.sharedService.getSharedData(
'isSpecialist',
false
) ? true :false;
// this.isSpecialist = this.navParams.get("isSpecialist")
// ? this.navParams.get("isSpecialist")
// : false;
if (this.employee) this.getEmpSubordinate(userID);
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.headerTitle = this.selMenu.List_Menu.MENU_NAME;
this.isSpecialist = this.common.sharedService.getSharedData('isSpecialist', false) ? true : false;
if (this.employee) {
this.getEmpSubordinate(userID);
}
}
goback() {
//this.location.back();
const user = this.authService.getAuthenticatedUser();
if(this.employee.SUPERVISOR_NUMBER==user.EMPLOYEE_NUMBER || this.opendEmployees.length == 1){
this.opendEmployees=[];
if (this.employee.SUPERVISOR_NUMBER === user.EMPLOYEE_NUMBER || this.opendEmployees.length === 1) {
this.opendEmployees = [];
this.common.openMyTeamPage();
}else{
for(let i=0;i<this.opendEmployees.length;i++){
if(this.opendEmployees[i].EMPLOYEE_NUMBER==this.employee.SUPERVISOR_NUMBER){
} else {
// tslint:disable-next-line: prefer-for-of
for (let i = 0; i < this.opendEmployees.length; i++) {
if (this.opendEmployees[i].EMPLOYEE_NUMBER === this.employee.SUPERVISOR_NUMBER) {
this.common.sharedService.setSharedData(
this.opendEmployees[i],
MyTeamService.EMPLOYEE_SHARED_DATA
@ -100,50 +386,33 @@ export class DetailsComponent implements OnInit {
this.intializeMemberDetail(this.employee.SUPERVISOR_NUMBER);
}
}
searchEmployeeTwo() {
this.isSearch = true;
this.empSubordinate = [];
this.getEmpSubordinate('');
}
clearSearchTwo() {
this.isSearch = false;
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM = 1;
this.empSubordinate = [];
this.isReachEnd = false;
this.searchNameOrUserName = '';
this.searchEmail = '';
this.getEmpSubordinate('');
}
getEmpSubordinate(userID) {
this.modalFlag = this.employee.isModal;
let selEmpNo: string = null;
this.pageNum = 1;
this.IsReachEnd = false;
let searchEmpNum = "";
let searchEmpName = "";
let searchEmpEmail = "";
if (this.searchKey) {
switch (this.searchKeySelect) {
case "1": {
searchEmpName = this.searchKey;
searchEmpNum = "";
searchEmpEmail = "";
break;
}
case "2": {
searchEmpNum = this.searchKey;
searchEmpName = "";
searchEmpEmail = "";
break;
}
case "3": {
searchEmpEmail = this.searchKey;
searchEmpNum = "";
searchEmpName = "";
break;
}
default: {
searchEmpNum = "";
searchEmpName = "";
searchEmpEmail = "";
break;
}
}
this.isReachEnd = false;
const searchEmpNum = (this.searchKeySelect === 'User Name') ? this.searchNameOrUserName : '';
const searchEmpName = (this.searchKeySelect === 'Name') ? this.searchNameOrUserName : '';
const searchEmpEmail = (this.searchKeySelect === 'Email') ? this.searchEmail : '';
if (userID) {
selEmpNo = userID;
} else {
searchEmpNum = "";
searchEmpName = "";
searchEmpEmail = "";
}
if(userID){
selEmpNo=userID;
}else{
selEmpNo = this.employee.EMPLOYEE_NUMBER;
}
const body = {
@ -154,118 +423,84 @@ export class DetailsComponent implements OnInit {
P_PAGE_NUM: this.pageNum,
P_PAGE_LIMIT: this.pageLimit
};
this.infiniteRequest = body;
this.myTeamService
.getEmployeeSubordinates(body)
.subscribe((result: any) => {
this.handleEmpResult(result);
});
this.getEmployeeSubordinatesRequestObject = body;
this.myTeamService.getEmployeeSubordinates(body).subscribe((result: any) => {
console.log('one');
if (this.common.validResponse(result)) {
this.handleEmpResult(result.GetEmployeeSubordinatesList);
}
});
}
handleEmpResult(result) {
//let employeeSubordinate=resFlag.GetEmployeeSubordinatesList;
//this.nav.push("MyTeamPage",{empSubordinate:employeeSubordinate});
if (this.common.validResponse(result)) {
if (this.common.hasData(result.GetEmployeeSubordinatesList)) {
this.empSubordinate = result.GetEmployeeSubordinatesList;
// this.pageNum++;
this.infiniteRequest.P_PAGE_NUM= this.pageNum++;
let lastItemIndex = this.empSubordinate.length - 1;
if (result.GetEmployeeSubordinatesList[lastItemIndex]) {
let lastitem = result.GetEmployeeSubordinatesList[lastItemIndex];
if (lastitem.NO_OF_ROWS == lastitem.ROW_NUM) {
this.IsReachEnd = true;
} else {
this.IsReachEnd = false;
}
const lastItemIndex = result.length - 1;
const lastItem = result[lastItemIndex];
if (lastItem) {
if (lastItem.NO_OF_ROWS === lastItem.ROW_NUM) {
this.isReachEnd = true;
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
} else {
this.empSubordinate = [];
this.isReachEnd = false;
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
}
}
}
doInfinite(infiniteScroll) {
if (!this.IsReachEnd && this.infiniteRequest) {
// this.infiniteRequest.P_PAGE_NUM = this.pageNum;
this.myTeamService
.getEmployeeSubordinates(this.infiniteRequest)
.subscribe(
(result: any) => {
if (this.common.validResponse(result)) {
this.infiniteRequest.P_PAGE_NUM= this.pageNum++;
if (this.common.hasData(result.GetEmployeeSubordinatesList)) {
result.GetEmployeeSubordinatesList.forEach(vr => {
if (vr.ROW_NUM == vr.NO_OF_ROWS) {
this.IsReachEnd = true;
} else {
this.IsReachEnd = false;
}
this.empSubordinate.push(vr);
// this.pro.GetVacationRulesList.push(vr);
});
} else {
this.IsReachEnd = true;
}
}
//this.P_PAGE_NUM++;
if (infiniteScroll) this.infiniteScroll.complete();
// console.log(resFlag);
},
Error => console.log(Error),
() => this.infiniteScroll.complete()
);
if (this.common.hasData(result)) {
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM++;
if (this.empSubordinate.length === 0) {
this.empSubordinate = result;
} else {
this.empSubordinate = this.empSubordinate.concat(result);
}
} else {
if (infiniteScroll) this.infiniteScroll.complete();
this.empSubordinate = [];
}
}
doInfinite(infiniteScroll) {
if (!this.isReachEnd) {
this.myTeamService.getEmployeeSubordinates(this.getEmployeeSubordinatesRequestObject).subscribe((result: any) => {
console.log('two');
if (this.common.validResponse(result)) {
this.handleEmpResult(result.GetEmployeeSubordinatesList);
}
this.infiniteScroll.complete();
});
} else {
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
}
}
getDetails(index) {
//this.empSubordinate[index].isModal = true;
this.common.sharedService.setSharedData(
this.empSubordinate[index],
MyTeamService.EMPLOYEE_SHARED_DATA
);
this.common.sharedService.setSharedData(this.empSubordinate[index], MyTeamService.EMPLOYEE_SHARED_DATA);
this.intializeMemberDetail();
// this.presentModal();
}
async presentModal() {
//this.modalFlag = true;
const modal = await this.modalController.create({
component: DetailsComponent,
keyboardClose: true,
animated: false
});
let dismissed = modal.onDidDismiss();
dismissed.then(() => {
this.modalFlag = false;
});
return await modal.present();
}
getMenuEntries(item) {
let selEmpNo: String = null;
let respID: any = -999;
let menuType: string = "M";
let selEmpNo = null;
const respID: any = -999;
let menuType = 'M';
let nationality: string;
if (this.isSpecialist == true) {
// respID = this.sharedData.getSharedData(
// MenuResponse.SHARED_SEL_RESP_ID,
// true
// );
menuType = "S";
if (this.isSpecialist === true) {
menuType = 'S';
}
selEmpNo = item.EMPLOYEE_NUMBER;
nationality = item.NATIONALITY_CODE;
const body = {
P_MENU_TYPE: menuType, //to check
P_MENU_TYPE: menuType, // to check
P_SELECTED_EMPLOYEE_NUMBER: selEmpNo,
P_SELECTED_RESP_ID: respID,
NationalityCode: nationality
};
//set emp and resp id
this.common.sharedService.setSharedData(selEmpNo, MenuResponse.SHARED_SEL_EMP);
this.common.sharedService.setSharedData(
// set emp and resp id
this.common.sharedService.setSharedData(selEmpNo, MenuResponse.SHARED_SEL_EMP);
this.common.sharedService.setSharedData(
body.P_SELECTED_RESP_ID,
MenuResponse.SHARED_SEL_RESP_ID
);
@ -283,35 +518,28 @@ export class DetailsComponent implements OnInit {
}
sortMenuEntires(list) {
this.close().then(() => {
});
let tree = this.common.list_to_tree(list);
this.common.sharedService.setSharedData(tree, "menuEntries");
// this.common.navigateForward("/eit/homepage");
const tree = this.common.list_to_tree(list);
this.common.sharedService.setSharedData(tree, 'menuEntries');
this.common.openEITPage();
// let tree = this.common.list_to_tree(list);
// this.navCtrl.push("MenuEntriesPage", { menuEntries: tree });
}
public async close() {
const modal = await this.modalController.getTop();
if (modal) {
modal.dismiss();
}
}
goToSubordinate() {
this.selMenu.search=true;
this.selMenu.search = true;
this.common.sharedService.setSharedData(
this.selMenu,
MenuResponse.SHARED_DATA
);
this.common.openMyTeamPage();
//this.navCtrl.push("MySubordinatePage", { isSearch: true });
}
dismiss() {
this.modalController.dismiss({
dismissed: true
});
showSelectedField(value: any) {
if (this.searchKeySelect === 'User Name' || this.searchKeySelect === 'User Name') {
this.showEmailInput = false;
this.showUserNameOrNameInput = true;
} else if (this.searchKeySelect === 'Email') {
this.showUserNameOrNameInput = false;
this.showEmailInput = true;
}
}
}

@ -1,76 +1,83 @@
<!-- <ion-header>
<ion-toolbar class="header-toolbar">
<div slot="start">
<nav-buttons></nav-buttons>
<ion-title color="light">{{headerTitle}}</ion-title>
</div>
<ion-buttons slot="end">
<ion-button style="background: none !important;" *ngIf="!isSearch" (click)="goToSubordinate()">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header> -->
<ion-header>
<ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<nav-buttons backLink="/home" *ngIf="!isSearch"></nav-buttons>
<ion-icon class="search-icons" color="light" name="arrow-back" *ngIf="isSearch" (click)="dismiss()"></ion-icon>
</ion-buttons>
<ion-title color="light" >{{headerTitle}}</ion-title>
<ion-buttons slot="end">
<button ion-button icon-only class="btnBack" *ngIf="!isSearch" (click)="goToSubordinate();">
<ion-icon class="search-icons" color="light" name="search"></ion-icon>
</button>
</ion-buttons>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<nav-buttons backLink="/home"></nav-buttons>
</ion-buttons>
<ion-title>{{ts.trPK('myTeam','myTeam-header')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="contentBg">
<div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','todayAttendance')}}</span>
</div>
<div class="result-text-container">
<h2>{{totalEmployees}}</h2>
<span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<!-- <ion-row class="filters-row">
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index">
<app-card-filter
[value]="filter.value"
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-filter>
</ion-slide>
</ion-slides>
</ion-row> -->
</ion-header>
<ion-content padding>
<ion-list *ngIf="isSearch">
<ion-item>
<ion-label>{{ts.trPK('general','search')}} </ion-label>
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
[(ngModel)]="searchKeySelect">
<ion-select-option value="1" selected="true" selected>{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
<ion-select-option value="2">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
<ion-select-option value="3">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-input [(ngModel)]="searchKey" placeholder="{{ts.trPK('general','enter')}}"></ion-input>
</ion-item>
</ion-list>
<!-- <div> -->
<ion-list no-lines *ngIf="empSubordinate && empSubordinate.length>0">
<ion-item no-border *ngFor="let subordinate of empSubordinate;let i=index" (click)="getDetails(i);">
<ion-avatar slot="start">
<!-- <img *ngIf="subordinate.EMPLOYEE_IMAGE" src="data:image/*;base64,{{ subordinate.EMPLOYEE_IMAGE}}"> -->
<img [src]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
</ion-avatar>
<p class="boldTxt">{{subordinate.EMPLOYEE_NAME}}</p>
<p>{{subordinate.POSITION_NAME}}</p>
<ion-badge slot="end" class="badge">{{subordinate.NUM_OF_SUBORDINATES}}</ion-badge>
</ion-item>
</ion-list>
<!-- </div> -->
[(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)">
<ion-select-option value="Name" selected="true">{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
<ion-select-option value="User Name">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
<ion-select-option value="Email">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
</ion-select>
</ion-col>
<ion-col [size]="7" class="input-container" no-padding>
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder="Search" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col>
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()">
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col>
</ion-row>
</div>
<!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> -->
<div *ngIf="isSearch">
<ion-row class="search-container">
<ion-col style="float: left;" size=[6] (click)="clearSearch()">
<span style="margin-left: 5px;">Clear Search</span>
<ion-icon name="close" ></ion-icon>
</ion-col>
</ion-row>
</div>
<ng-container *ngFor="let subordinate of empSubordinate;let i=index">
<app-employee-information
[name]="subordinate.EMPLOYEE_NAME"
[title]="subordinate.POSITION_NAME"
[employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
checkIn="08:15"
checkOut="-"
(click)="getDetails(i)">
</app-employee-information>
</ng-container>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
<ion-footer *ngIf="isSearch">
<div class="centerDiv">
<ion-button color="customnavy" (click)="getEmpSubordinate()">{{ts.trPK('general','search')}} </ion-button>
</div>
</ion-footer>
</ion-content>

@ -1,6 +1,163 @@
.search-icons{font-size:.7cm}
.badge{
padding: 10px;
border-radius: 50%;
width: 50px;
}
ion-title{
color: white;
position: absolute;
top: 0;
text-align: center;
left: 15%;
right: 15%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;
}
.contentBg{
padding: 0px 20px;
}
.contentBg:before {
position: absolute;
content: "";
background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
ion-content {
--ion-background-color: whitesmoke;
}
.request-heading {
span {
text-align: center;
display: block;
padding-top: 8px;
font-family: workSans-Regular;
}
}
.result-graph {
position: relative;
background: white;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
}
.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;
}
}
.today-graph {
width: 100%;
max-height: 4cm;
}
.swiper-container {
margin: 0 !important;
width: 100% !important;
}
.filters-row {
margin-top: 10px;
}
.search-input {
margin-top: 15px;
background: white;
border-radius: 15px;
ion-input {
border-bottom-color: transparent;
}
}
.search-dropdown{
background: #22c6b3;
ion-select {
.select-text{
margin-left: -10px;
}
.select-icon{
.select-icon-inner{
opacity: 1;
color: white;
margin-top: -1px;
}
}
}
}
.input-container{
background: white;
ion-input{
border-bottom-color: transparent;
}
}
.user-image-container{
position: relative;
width: 80px;
height: 80px;
display: block;
margin: 0 auto;
&:before{
position: absolute;
content: "";
width: 20px;
height: 20px;
border-radius: 20px;
border: 1px solid white;
top: 0;
right: 0;
background-color: red;
z-index: 9;
}
&.present:before{
background-color: green !important;
}
}
.user-image{
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
margin: 0px auto 6px;
}
.search-container{
margin-top: 15px;
ion-col{
background: white;
border-radius: 12px;
padding-right: 10px;
flex: none;
ion-icon{
margin-right: 3px;
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
span{
font-size: 12px;
vertical-align: middle;
}
}
}

@ -1,32 +1,87 @@
import { Component, OnInit, ViewChild } from "@angular/core";
import { Location } from "@angular/common";
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
import { CommonService } from "src/app/hmg-common/services/common/common.service";
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { MenuResponse } from "src/app/hmg-common/services/menu/models/menu-response";
import { MyTeamService } from "../service/my-team.service";
import { ModalController, IonInfiniteScroll } from "@ionic/angular";
import { Component, OnInit, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import { MyTeamService } from '../service/my-team.service';
import { ModalController, IonInfiniteScroll } from '@ionic/angular';
import { DetailsComponent } from '../details/details.component';
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.scss"]
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
pageNum: number = 1;
pageLimit: number = 50;
empSubordinate: any;
employee: any;
public headerTitle: string = "";
IsReachEnd: boolean = false;
searchKey: any;
public isSearch: boolean = false;
public searchKeySelect: any;
infiniteRequest: any;
selMenu: any;
selEmpNo: any;
public pageNum = 1;
public pageLimit = 50;
public empSubordinate = [];
public employee: any;
public isReachEnd = false;
public searchKey: any;
public isSearch = false;
public searchKeySelect = 'Name';
public getEmployeeSubordinatesRequestObject: any;
public selMenu: any;
public selEmpNo: any;
public totalEmployees = 0;
public options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
public data = {
datasets: [
{
data: [100],
backgroundColor: [
'#22c6b3'
],
borderWidth: 5
}]
};
// public filters = [
// {
// value: 0,
// name: 'All',
// active: true,
// color: '#124375'
// },
// {
// value: 0,
// name: 'Present',
// active: false,
// color: '#18a169'
// },
// {
// value: 0,
// name: 'Absent',
// active: false,
// color: '#38c9b3'
// },
// {
// value: 0,
// name: 'Late',
// active: false,
// color: '#114475'
// }
// ];
public slideOptsOne = {
slidesPerView: 4,
spaceBetween: 10
};
public previousActiveIndex = 0;
public currentActiveIndex = 0;
public searchNameOrUserName = '';
public searchEmail = '';
public showEmailInput = false;
public showUserNameOrNameInput = true;
constructor(
public ts: TranslatorService,
public authService: AuthenticationService,
@ -40,63 +95,44 @@ export class HomeComponent implements OnInit {
this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR);
this.setIntitial();
}
// activeFilter(index: number) {
// this.previousActiveIndex = this.currentActiveIndex;
// this.currentActiveIndex = index;
// this.filters[this.previousActiveIndex].active = false;
// this.filters[this.currentActiveIndex].active = true;
// }
goback() {
this.location.back();
}
getData() {}
setIntitial() {
this.selMenu = this.common.sharedService.getSharedData(
MenuResponse.SHARED_DATA,
false
);
this.headerTitle = this.selMenu.List_Menu.MENU_NAME;
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.selEmpNo = this.selMenu.userid;
this.isSearch = this.selMenu.search ? this.selMenu.search : this.isSearch;
// this.isSearch=this.navParams.get("isSearch")?this.navParams.get("isSearch") : false;
if (!this.isSearch) this.getEmpSubordinate();
if (!this.isSearch) {
this.getEmpSubordinate();
}
}
searchEmployee() {
this.isSearch = true;
this.empSubordinate = [];
this.getEmpSubordinate();
}
getEmpSubordinate() {
console.log("getEmpSubordinate my team home");
this.pageNum = 1;
this.IsReachEnd = false;
let searchEmpNum = "";
let searchEmpName = "";
let searchEmpEmail = "";
if (this.searchKey) {
switch (this.searchKeySelect) {
case "1": {
searchEmpName = this.searchKey;
searchEmpNum = "";
searchEmpEmail = "";
this.isReachEnd = false;
const searchEmpNum = (this.searchKeySelect === 'User Name') ? this.searchNameOrUserName : '';
const searchEmpName = (this.searchKeySelect === 'Name') ? this.searchNameOrUserName : '';
const searchEmpEmail = (this.searchKeySelect === 'Email') ? this.searchEmail : '';
break;
}
case "2": {
searchEmpNum = this.searchKey;
searchEmpName = "";
searchEmpEmail = "";
break;
}
case "3": {
searchEmpEmail = this.searchKey;
searchEmpNum = "";
searchEmpName = "";
break;
}
default: {
searchEmpNum = "";
searchEmpName = "";
searchEmpEmail = "";
break;
}
}
} else {
searchEmpNum = "";
searchEmpName = "";
searchEmpEmail = "";
}
if (this.isSearch) {
this.selEmpNo = null;
} else {
this.selEmpNo = this.selMenu.userid;
}
const body = {
@ -107,172 +143,85 @@ export class HomeComponent implements OnInit {
P_PAGE_NUM: this.pageNum,
P_PAGE_LIMIT: this.pageLimit
};
this.infiniteRequest = body;
this.myTeamService
.getEmployeeSubordinates(body)
.subscribe((result: any) => {
this.handleEmpResult(result);
});
this.getEmployeeSubordinatesRequestObject = body;
this.myTeamService.getEmployeeSubordinates(body).subscribe((result: any) => {
if (this.common.validResponse(result)) {
this.totalEmployees = result.P_NUM_OF_SUBORDINATES;
this.handleEmpResult(result.GetEmployeeSubordinatesList);
}
});
}
handleEmpResult(result) {
if (this.common.validResponse(result)) {
if (this.common.hasData(result.GetEmployeeSubordinatesList)) {
this.empSubordinate = result.GetEmployeeSubordinatesList;
this.infiniteRequest.P_PAGE_NUM++;
const lastItemIndex = this.empSubordinate.length - 1;
if (result.GetEmployeeSubordinatesList[lastItemIndex]) {
const lastitem = result.GetEmployeeSubordinatesList[lastItemIndex];
if (lastitem.NO_OF_ROWS == lastitem.ROW_NUM) {
this.IsReachEnd = true;
} else {
this.IsReachEnd = false;
const lastItemIndex = result.length - 1;
const lastItem = result[lastItemIndex];
if (lastItem) {
if (lastItem.NO_OF_ROWS === lastItem.ROW_NUM) {
this.isReachEnd = true;
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
} else {
this.isReachEnd = false;
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
}
}
if (this.common.hasData(result)) {
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM++;
if (this.empSubordinate.length === 0) {
this.empSubordinate = result;
} else {
this.empSubordinate = this.empSubordinate.concat(result);
}
} else {
this.empSubordinate = [];
}
}
}
doInfinite1(infiniteScroll) {
console.log("test");
if (!this.IsReachEnd && this.infiniteRequest) {
console.log("not ReachEnd");
this.infiniteRequest.P_PAGE_NUM = this.pageNum;
this.myTeamService
.getEmployeeSubordinates(this.infiniteRequest)
.subscribe(
(result: any) => {
if (this.common.validResponse(result)) {
this.pageNum++;
if (this.common.hasData(result.GetEmployeeSubordinatesList)) {
result.GetEmployeeSubordinatesList.forEach(vr => {
if (vr.ROW_NUM == vr.NO_OF_ROWS) {
this.IsReachEnd = true;
} else {
this.IsReachEnd = false;
}
this.empSubordinate.push(vr);
// this.pro.GetVacationRulesList.push(vr);
});
} else {
this.IsReachEnd = true;
}
}
//this.P_PAGE_NUM++;
if (infiniteScroll) {
infiniteScroll.complete();
}
// console.log(resFlag);
},
Error => console.log(Error),
() => infiniteScroll.complete()
);
} else {
if (infiniteScroll) {
infiniteScroll.complete();
}
}
}
doInfinite(infiniteScroll) {
//this.pageNum= this.pageNum + 1;
console.log("test doInfinite");
if (!this.IsReachEnd) {
console.log("test doInfinite not ReachEnd");
this.myTeamService
.getEmployeeSubordinates(this.infiniteRequest).subscribe(
(result: any) => {
if (!this.isReachEnd) {
this.myTeamService.getEmployeeSubordinates(this.getEmployeeSubordinatesRequestObject).subscribe((result: any) => {
if (this.common.validResponse(result)) {
this.infiniteRequest.P_PAGE_NUM++;
if (this.common.hasData(result.GetEmployeeSubordinatesList)) {
result.GetEmployeeSubordinatesList.forEach(element => {
if (element.ROW_NUM == element.NO_OF_ROWS) {
this.IsReachEnd = true;
} else {
this.IsReachEnd = false;
}
this.empSubordinate.push(element);
});
} // if list length >0
else {
this.IsReachEnd = true;
}
} // if response == 1
//this.pageNum++;
this.handleEmpResult(result.GetEmployeeSubordinatesList);
}
this.infiniteScroll.complete();
}
);
});
} else {
if (this.infiniteScroll)
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
}
} //end infiniteScroll
}
clearSearch() {
this.isSearch = false;
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM = 1;
this.empSubordinate = [];
this.isReachEnd = false;
this.searchNameOrUserName = '';
this.searchEmail = '';
this.getEmpSubordinate();
}
getDetails(index) {
this.common.sharedService.setSharedData(
this.empSubordinate[index],
MyTeamService.EMPLOYEE_SHARED_DATA
);
this.common.sharedService.setSharedData(
this.selMenu,
MenuResponse.SHARED_DATA
);
this.close().then(() => {
this.common.openMyTeamDetails();
});
//this.modalController.dismiss();
//this.navCtrl.push("MyTeamPage",{employee:this.empSubordinate[index]});
}
public async close() {
const modal = await this.modalController.getTop();
if (modal) {
modal.dismiss();
}
}
toggleSearch() {
this.isSearch = !this.isSearch;
this.common.sharedService.setSharedData(this.empSubordinate[index], MyTeamService.EMPLOYEE_SHARED_DATA);
this.common.sharedService.setSharedData(this.selMenu, MenuResponse.SHARED_DATA);
this.common.openMyTeamDetails();
}
goToSubordinate() {
//this.navCtrl.push("MySubordinatePage",{isSearch:true});
//this.getEmpSubordinate();
this.presentModal();
}
async presentModal() {
const modal = await this.modalController.create({
component: HomeComponent,
keyboardClose: true,
animated: false,
componentProps: { isSearch: true }
});
modal.cssClass="full-modal";
let dismissed = modal.onDidDismiss();
dismissed.then(() => {
this.isSearch = false;
});
return await modal.present();
// this.presentModal();
}
dismiss() {
this.modalController.dismiss({
dismissed: true
});
showSelectedField(value: any) {
if (this.searchKeySelect === 'User Name' || this.searchKeySelect === 'User Name') {
this.showEmailInput = false;
this.showUserNameOrNameInput = true;
} else if (this.searchKeySelect === 'Email') {
this.showUserNameOrNameInput = false;
this.showEmailInput = true;
}
}
}

@ -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,148 @@
<p>
time-card-details works!
</p>
<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>
<div class="header">
<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>
</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()">
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'"
ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle"></ion-icon>
</button>
</ion-col>
</ion-row>
</div>
<ion-slides [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide>
<ion-grid class="headerGrid">
<div style="color: black;">
<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>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 74%;
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: 74%;
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" *ngIf="showData">
<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>

@ -0,0 +1,487 @@
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,372 @@ 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(
public timeCardService: TimeCardService,
public common: CommonService,
public modalController: ModalController,
public sharedData: SharedDataService,
public ts: TranslatorService
) { }
@ViewChild('sliderRef') protected sliderRef: IonSlides;
constructor() { }
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 currentMonthName = this.getMonthName(new Date().getMonth() + 1);
public showData = false;
public currentYear = new Date().getFullYear();
public options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
ngOnInit() {}
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?) {
this.arrDaysOff = [];
this.arrDaysAttendance = [];
this.arrDaysAbsent = [];
this.month = month;
this.year = year;
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() {
this.showMore = !this.showMore;
}
public getDayHoursTypeDetails(month?, year?) {
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
this.monthName = month;
this.yearDate = year;
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)) {
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;
}
}
});
}
countAllAttendDays(allDays) {
// tslint:disable-next-line:prefer-for-of
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
});
}
}
this.showData = true;
}
public getTimeCardSummaryDetails(month?, year?) {
console.log('getTimeCardSummaryDetails');
const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
if (this.isChange) {
this.monthName = month;
console.log('' + this.monthName);
this.yearDate = year;
console.log('' + this.yearDate);
} else {
this.monthName = month;
this.yearDate = year;
}
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.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;
this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS;
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;
}
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();
}
showShiftDetails(origin: string) {
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');
});
}
nextSlide() {
if (this.currentMonthName !== this.month) {
this.showData = false;
if (this.nextMonth > 12) {
this.currentYear = this.currentYear + 1;
this.nextMonth = 1;
}
this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2;
}
}
previousSlide() {
this.showData = false;
if (this.preMonth === 0) {
this.currentYear = this.currentYear - 1;
this.preMonth = 12;
}
this.calendarConfig(this.getMonthName(this.preMonth) , this.currentYear);
this.preMonth = this.preMonth - 1;
this.nextMonth = this.preMonth + 2;
}
changeMonthTitle(title) {
this.monthTitle = title;
this.isChange = true;
this.getTimeCardSummaryDetails();
}
changeYear(year) {
this.yearTitle = year;
}
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';
}
}
}

@ -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: 354 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 366 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 569 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 391 B

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

@ -1041,6 +1041,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": {
@ -1321,6 +1337,38 @@
"requestFor": {
"en": "Request for",
"ar": "اطلب ل"
},
"todayAttendance": {
"en": "Today's Attendance",
"ar": "Today's Attendance"
},
"checkIn": {
"en": "Check-In",
"ar": "CheckIn"
},
"checkOut": {
"en": "Check-Out",
"ar": "CheckOut"
},
"late": {
"en": "Late",
"ar": "Late"
},
"attendance-statistics": {
"en": "Attendance Statistics",
"ar": "Attendance Statistics"
},
"myTeam-header": {
"en": "MY TEAM",
"ar": "MY TEAM"
},
"total": {
"en": "TOTAL",
"ar": "TOTAL"
},
"team-members": {
"en": "TEAM MEMBERS",
"ar": "TEAM MEMBERS"
}
},
"searchForReplacment": {
@ -2242,27 +2290,57 @@
"ar":"Mark Attendance "
},
"check-in":{
"en": "CHECK IN",
"ar":"CHECK IN"
"en": "Check In",
"ar":"وقت الدخول"
},
"check-out":{
"en": "CHECK OUT",
"ar":"CHECK OUT"
"en": "Check Out",
"ar":"وقت الخروج"
},
"regular":{
"en": "REGULAR",
"ar":"REGULAR"
"en": "Regular",
"ar":"المنتظم"
},
"late-in":{
"en": "LATE IN",
"ar":"LATE IN"
"en": "Late In",
"ar":"القدوم المتأخر"
},
"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"
@ -2276,8 +2354,8 @@
"ar":"You did't complate today shift"
},
"shift-time":{
"en":"SHIFT TIME",
"ar":"SHIFT TIME"
"en":"Shift Time",
"ar":"وقت التناوب"
}
},
"sms": {

@ -1238,6 +1238,166 @@ border:0px
font-size: 20px;
}
// .select-text{
// --margin-left: -10px;
// margin-left:0;
// }
// .search-dropdown{
// background: #22c6b3;
// ion-select {
// .select-text{
// margin-left: -10px;
// }
// .select-icon{
// .select-icon-inner{
// opacity: 1;
// color: white;
// margin-top: -1px;
// }
// }
// }
// }
.monthview-primary-with-event, .absent, .present, .dayoff {
background-color: #fff !important;
z-index: 1;
color: #fff !important;
position: relative;
}
.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 {
*{
font-size: 12px !important;
font-weight: normal !important;
}
thead th {
border:none !important;
color:#888;
}
tbody td{
border:none !important;
line-height: 40px !important;
background: none !important;
padding: 0 !important;
&.text-muted {
visibility: hidden;
}
&.monthview-selected {
color: black;
}
&.monthview-selected.present,
&.present {
color:#fff !important;
&:before {
background-color: #22c6b3 !important;
}
}
&.monthview-selected.absent,
&.absent {
color:#fff !important;
&:before {
background-color:#1a586d !important;
}
}
&.monthview-selected.dayoff,
&.dayoff {
color:#555 !important;
&:before {
background-color:#e5e5e5 !important;
}
}
&.monthview-selected.scheduleDay,
&.scheduleDay {
color: #000 !important;
&:before {
background-color: #fff !important;
border: 1px solid #ccc !important;
}
}
&:before {
content: "";
width: 40px;
height: 40px;
display: block;
border-radius: 100px;
text-align: center;
margin: 9px auto -40px;
}
}
}
.table-bordered{
border:none !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%;
}
.modal-wrapper{
border-radius: 20px !important;
}

Loading…
Cancel
Save