add worklist fix conflict
@ -1,32 +1,33 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
|
||||
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'authentication/login', pathMatch: 'full' },
|
||||
{
|
||||
path: 'authentication', loadChildren: './authentication/authentication.module#AuthenticationPageModule'},
|
||||
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
|
||||
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
|
||||
{ path: 'vacation-rule', loadChildren: './vacation-rule/vacation-rule.module#VacationRulePageModule' },
|
||||
{ path: 'accrual-balances', loadChildren: './accrual-balances/accrual-balances.module#AccrualBalancesPageModule' },
|
||||
{ path: 'my-team', loadChildren: './my-team/my-team.module#MyTeamPageModule' },
|
||||
{ path: 'attendance', loadChildren: './attendance/attendance.module#AttendancePageModule' },
|
||||
{ path: 'eit', loadChildren: './eit/eit.module#EITPageModule' },
|
||||
{ path: 'absence', loadChildren: './absence/absence.module#AbsencePageModule' },
|
||||
{ path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
|
||||
{ path: 'my-specialist', loadChildren: './my-specialist/my-specialist.module#MySpecialistPageModule' },
|
||||
{ path: 'my-subordinate', loadChildren: './my-subordinate/my-subordinate.module#MySubordinatePageModule' },
|
||||
{ path: 'time-card', loadChildren: './time-card/time-card.module#TimeCardPageModule' },
|
||||
{ path: 'payslip', loadChildren: './payslip/payslip.module#PayslipPageModule' },
{ path: 'attendance-tracking', loadChildren: './attendance-tracking/attendance-tracking.module#AttendanceTrackingPageModule' }
|
||||
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'authentication/login', pathMatch: 'full' },
|
||||
{
|
||||
path: 'authentication', loadChildren: './authentication/authentication.module#AuthenticationPageModule'},
|
||||
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
|
||||
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
|
||||
{ path: 'vacation-rule', loadChildren: './vacation-rule/vacation-rule.module#VacationRulePageModule' },
|
||||
{ path: 'accrual-balances', loadChildren: './accrual-balances/accrual-balances.module#AccrualBalancesPageModule' },
|
||||
{ path: 'my-team', loadChildren: './my-team/my-team.module#MyTeamPageModule' },
|
||||
{ path: 'attendance', loadChildren: './attendance/attendance.module#AttendancePageModule' },
|
||||
{ path: 'eit', loadChildren: './eit/eit.module#EITPageModule' },
|
||||
{ path: 'absence', loadChildren: './absence/absence.module#AbsencePageModule' },
|
||||
{ path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
|
||||
{ path: 'my-specialist', loadChildren: './my-specialist/my-specialist.module#MySpecialistPageModule' },
|
||||
{ path: 'my-subordinate', loadChildren: './my-subordinate/my-subordinate.module#MySubordinatePageModule' },
|
||||
{ path: 'time-card', loadChildren: './time-card/time-card.module#TimeCardPageModule' },
|
||||
{ path: 'payslip', loadChildren: './payslip/payslip.module#PayslipPageModule' }
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
/*RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules}),*/
|
||||
RouterModule.forRoot(routes),
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
/*RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules}),*/
|
||||
RouterModule.forRoot(routes),
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
import { AttendanceTrackingPage } from './attendance-tracking.page';
|
||||
import {HomeComponent} from './home/home.component'
|
||||
import { HmgCommonModule } from "./../hmg-common/hmg-common.module";
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: AttendanceTrackingPage,
|
||||
children:[
|
||||
{
|
||||
path: 'home',
|
||||
component:HomeComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
HmgCommonModule,
|
||||
RouterModule.forChild(routes)
|
||||
],
|
||||
declarations: [AttendanceTrackingPage,HomeComponent]
|
||||
})
|
||||
export class AttendanceTrackingPageModule {}
|
||||
@ -0,0 +1,3 @@
|
||||
<ion-content>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-content>
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AttendanceTrackingPage } from './attendance-tracking.page';
|
||||
|
||||
describe('AttendanceTrackingPage', () => {
|
||||
let component: AttendanceTrackingPage;
|
||||
let fixture: ComponentFixture<AttendanceTrackingPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ AttendanceTrackingPage ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AttendanceTrackingPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-attendance-tracking',
|
||||
templateUrl: './attendance-tracking.page.html',
|
||||
styleUrls: ['./attendance-tracking.page.scss'],
|
||||
})
|
||||
export class AttendanceTrackingPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<ion-title color="light">Attendance Tracking </ion-title>
|
||||
<ion-buttons slot="start">
|
||||
<nav-buttons></nav-buttons>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<div class="timer-chart">
|
||||
<ion-label class="shift-title" style="font-weight: bold"> {{curentDate}}</ion-label><br/>
|
||||
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','today-time-left')}}</ion-label>
|
||||
|
||||
<div class="fixed-shift-timer">
|
||||
<circle-progress
|
||||
[titleFontSize]= '3'
|
||||
[percent]="percent"
|
||||
[radius]="8"
|
||||
[outerStrokeWidth]="0.25"
|
||||
[innerStrokeWidth]="0.25"
|
||||
[outerStrokeColor]="'#3cb9d5'"
|
||||
[innerStrokeColor]="'rgba(0,0,0,0.3)'"
|
||||
[animation]="true"
|
||||
[animationDuration]="300"
|
||||
[responsive]="true"
|
||||
[space]="-0.25"
|
||||
[startFromZero]="false"
|
||||
[title]="displayTime"
|
||||
titleFontWeight="bold"
|
||||
[titleColor]="'#ffffff'"
|
||||
[showUnits]="false"
|
||||
[showSubtitle]="false"
|
||||
[subtitleColor]="'#ffffff'"
|
||||
[clockwise]="false"
|
||||
[renderOnClick]="false">
|
||||
</circle-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="attendanceTrackingList" class="tracking-content">
|
||||
<div class="divstopBtn">
|
||||
<button *ngIf="isCheckedIn"(click)="openDialog();" class="stopBtn" ion-button>
|
||||
<ion-icon class="stopicon" name="pause"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<ion-grid>
|
||||
<ion-row class="rowBorder">
|
||||
<ion-label class="shift-title">{{ts.trPK('attendance-tracking','shift-time')}}</ion-label>
|
||||
<br /><br />
|
||||
<ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SHT_NAME}} </ion-label>
|
||||
</ion-row>
|
||||
<ion-row class="rowBorder">
|
||||
<ion-col class="colBorder">
|
||||
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-in')}}</ion-label>
|
||||
<br /><br />
|
||||
<ion-label class="shift-text shift-title">08:00</ion-label>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-out')}}</ion-label>
|
||||
<br /><br />
|
||||
<ion-label class="shift-text shift-title">08:00 </ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row style="text-align: center">
|
||||
<ion-col class="colBorder">
|
||||
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','late-in')}}</ion-label>
|
||||
<br /><br />
|
||||
<ion-label class="shift-text shift-title">08:00 </ion-label>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','regular')}}</ion-label>
|
||||
<br /><br />
|
||||
<ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SCHEDULED_HOURS}} </ion-label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -0,0 +1,57 @@
|
||||
.timer-chart{
|
||||
padding-top:18px;
|
||||
background: #094773;
|
||||
// height: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tracking-content{
|
||||
background: #053c63;
|
||||
height: 50%;
|
||||
}
|
||||
.rowBorder{
|
||||
text-align: center;
|
||||
border-bottom: var(--lightblue) solid 1px;
|
||||
}
|
||||
|
||||
.shift-text{
|
||||
// text-align: center;
|
||||
// width: 100%;
|
||||
// color: white !important;
|
||||
margin-bottom: 12px;
|
||||
margin-top: -9px;
|
||||
font-size: 30px;
|
||||
}
|
||||
.shift-title{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: white !important;
|
||||
}
|
||||
.stopicon{
|
||||
width: 50px;
|
||||
height: 39px;
|
||||
color: #053c63;
|
||||
}
|
||||
|
||||
.divstopBtn{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stopBtn{
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background-color: var(--lightblue) !important;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-top: -24px;
|
||||
border: solid 3px #053c63;
|
||||
}
|
||||
.colBorder{
|
||||
border-right: var(--lightblue) solid 1px;
|
||||
}
|
||||
|
||||
.fixed-shift-timer{
|
||||
margin-top: -50px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
let fixture: ComponentFixture<HomeComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HomeComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,134 @@
|
||||
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
|
||||
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';
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.scss'],
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
attendanceTrackingList: any = [];
|
||||
curentDate: any;
|
||||
direction: string;
|
||||
isCheckOut = false;
|
||||
public runTimer = false;
|
||||
public hasStarted = false;
|
||||
public hasFinished = false;
|
||||
public remainingTime: any;
|
||||
public scheduledTime: any;
|
||||
public isCheckedIn = undefined;
|
||||
public displayTime: any;
|
||||
public percent: any;
|
||||
|
||||
constructor(
|
||||
public cs: CommonService,
|
||||
public db: DashboredService,
|
||||
public ts: TranslatorService,
|
||||
public attendScanService: AttendScanService
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.showAttendanceTracking();
|
||||
this.curentDate = new Date();
|
||||
this.direction = TranslatorService.getCurrentLanguageName();
|
||||
this.curentDate = this.getHeaderDate(this.curentDate);
|
||||
}
|
||||
|
||||
initTimer() {
|
||||
this.runTimer = false;
|
||||
this.hasStarted = false;
|
||||
this.hasFinished = false;
|
||||
this.percent = 100 - ((this.remainingTime / this.scheduledTime) * 100);
|
||||
this.displayTime = this.getSecondsAsDigitalClock(this.remainingTime);
|
||||
this.startTimer();
|
||||
}
|
||||
|
||||
startTimer() {
|
||||
this.runTimer = true;
|
||||
this.hasStarted = true;
|
||||
this.timerTick();
|
||||
}
|
||||
|
||||
timerTick() {
|
||||
setTimeout(() => {
|
||||
if (!this.runTimer) { return; }
|
||||
this.remainingTime--;
|
||||
this.displayTime = this.getSecondsAsDigitalClock(this.remainingTime);
|
||||
if (this.remainingTime > 0) {
|
||||
const newPercent: any = ((this.remainingTime / this.scheduledTime) * 100).toFixed(2);
|
||||
this.percent = 100 - newPercent;
|
||||
this.timerTick();
|
||||
} else {
|
||||
this.hasFinished = true;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
getSecondsAsDigitalClock(inputSeconds: number) {
|
||||
const secNum = parseInt(inputSeconds.toString(), 10); // don't forget the second param
|
||||
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;
|
||||
}
|
||||
|
||||
convertInSeconds(time: any) {
|
||||
const hours = parseInt(time[0], 10);
|
||||
const minutes = parseInt(time[1], 10);
|
||||
let seconds = parseInt(time[2], 10);
|
||||
seconds = seconds + (hours * 60 * 60) + (minutes * 60);
|
||||
return seconds;
|
||||
}
|
||||
|
||||
convertAndAssignTime(data) {
|
||||
console.log(data);
|
||||
this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':'));
|
||||
this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':'));
|
||||
this.isCheckedIn = this.remainingTime === this.scheduledTime ? false : true;
|
||||
this.initTimer();
|
||||
console.log('remainingTime: ' + this.remainingTime);
|
||||
console.log('scheduledTime: ' + this.scheduledTime);
|
||||
console.log('isCheckedIn: ' + this.isCheckedIn);
|
||||
}
|
||||
|
||||
showAttendanceTracking() {
|
||||
this.db.getAttendanceTracking() .subscribe((result: AttendanceTrackingResponse) => {
|
||||
if (this.cs.validResponse(result)) {
|
||||
const key = 'GetAttendanceTrackingList';
|
||||
this.convertAndAssignTime(result[key]);
|
||||
this.attendanceTrackingList = result[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getHeaderDate(date: any) {
|
||||
if (this.direction === 'en') {
|
||||
return this.cs.getMonthName(date.getMonth() + 1) + ', ' + date.getDate() + ' ' + date.getFullYear();
|
||||
} else {
|
||||
return this.cs.getMonthNameAr(date.getMonth() + 1) + ', ' + date.getDate() + ' ' + date.getFullYear();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
openDialog() {
|
||||
this.cs.confirmAlertDialogAttendance(
|
||||
() => {
|
||||
this.attendScanService.getDeviceLocation();
|
||||
}, this.ts.trPK('general', 'ok'),
|
||||
() => {}, this.ts.trPK('general', 'cancel'),
|
||||
this.ts.trPK('vacation-rule', 'confirmation'),
|
||||
this.ts.trPK('attendance-tracking', 'confirm-alert3')
|
||||
+ '<br/>' + '<br/>' + this.ts.trPK('attendance-tracking', 'confirm-alert1')
|
||||
+ this.ts.trPK('attendance-tracking', 'confirm-alert2')
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import { FeedbackDirective } from './feedback.directive';
|
||||
|
||||
describe('FeedbackDirective', () => {
|
||||
it('should create an instance', () => {
|
||||
const directive = new FeedbackDirective();
|
||||
expect(directive).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,24 @@
|
||||
import { Directive, ElementRef, HostListener } from '@angular/core';
|
||||
import { TranslatorService } from '../../services/translator/translator.service';
|
||||
import { CommonService } from '../../services/common/common.service';
|
||||
import { FeedbackService } from './feedback.service';
|
||||
|
||||
@Directive({
|
||||
selector: '[feedback]'
|
||||
})
|
||||
export class FeedbackDirective {
|
||||
|
||||
constructor(
|
||||
private cs: CommonService,
|
||||
private ts: TranslatorService,
|
||||
private el: ElementRef,
|
||||
private feedBackService: FeedbackService
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
@HostListener('mousedown') onMouseEnter() {
|
||||
this.feedBackService.vibrate();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FeedbackService } from './feedback.service';
|
||||
|
||||
describe('FeedbackService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: FeedbackService = TestBed.get(FeedbackService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,20 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Vibration } from '@ionic-native/vibration/ngx';
|
||||
// import { SettingsService } from 'src/app/settings/service/settings.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FeedbackService {
|
||||
// constructor(private vibration: Vibration, private settings: SettingsService) {}
|
||||
constructor(private vibration: Vibration) {}
|
||||
|
||||
public async vibrate() {
|
||||
try {
|
||||
const on = true;
|
||||
if (on) {
|
||||
this.vibration.vibrate(500);
|
||||
}} catch (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AttendScanService } from './attend-scan.service';
|
||||
|
||||
describe('AttendScanService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: AttendScanService = TestBed.get(AttendScanService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,123 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
// import { DevicePermissionsService } from '../device-permissions/device-permissions.service';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { SharedDataService } from '../shared-data-service/shared-data.service';
|
||||
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
|
||||
import { AttendanceService } from 'src/app/home/services/attendance.services';
|
||||
import { ZBar } from '@ionic-native/zbar/ngx';
|
||||
import { Geolocation } from "@ionic-native/geolocation/ngx";
|
||||
import { attendanceSwipeScannerRequest } from 'src/app/home/models/attendanceSwipe.Request';
|
||||
import { AuthenticatedUser } from '../authentication/models/authenticated-user';
|
||||
import { CommonService } from '../common/common.service';
|
||||
import { TranslatorService } from '../translator/translator.service';
|
||||
import { Response } from "src/app/hmg-common/services/models/response";
|
||||
import { Camera, CameraOptions,PictureSourceType} from "@ionic-native/Camera/ngx";
|
||||
import { DevicePermissionsService } from '../../services/device-permissions/device-permissions.service'
|
||||
import { Device } from "@ionic-native/device/ngx";
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AttendScanService {
|
||||
location: boolean;
|
||||
camera: boolean;
|
||||
lat: any;
|
||||
longt: any;
|
||||
deviceID: string;
|
||||
scannedResult: any;
|
||||
userData: any = {};
|
||||
constructor(private device: Device,
|
||||
private zbar: ZBar,
|
||||
private geolocation: Geolocation,
|
||||
private attendance_service: AttendanceService,
|
||||
private barcodeScanner: BarcodeScanner,
|
||||
private cameraController: Camera,
|
||||
public sharedData: SharedDataService,
|
||||
private sanitizer: DomSanitizer,
|
||||
private permissions: DevicePermissionsService,
|
||||
public common:CommonService,
|
||||
public ts: TranslatorService,) {
|
||||
this.userData =this.common.sharedService.getSharedData(AuthenticatedUser.SHARED_DATA,false);
|
||||
}
|
||||
|
||||
public getDeviceLocation() {
|
||||
let isVirtual = this.device.isVirtual;
|
||||
if(isVirtual==true){
|
||||
alert("emulater>>>>>>>"+isVirtual);
|
||||
alert("You are using virtual device");
|
||||
return false;
|
||||
}
|
||||
|
||||
this.permissions.requestLocationAutherization().then(granted => {
|
||||
this.location = granted as boolean;
|
||||
if (this.location) {
|
||||
this.geolocation
|
||||
.getCurrentPosition({ maximumAge: 3000, timeout: 10000, enableHighAccuracy: true })
|
||||
.then(resp => {
|
||||
// console.log(resp.coords.latitude);
|
||||
// console.log(resp.coords.longitude);
|
||||
this.lat = resp.coords.latitude;
|
||||
this.longt = resp.coords.longitude;
|
||||
this.attendance();
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Error getting location", error);
|
||||
});
|
||||
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
public attendance() {
|
||||
this.permissions.requestCameraAutherization().then(granted => {
|
||||
this.camera = granted as boolean;
|
||||
if (this.camera) {
|
||||
this.scanCode();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
public scanCode() {
|
||||
this.barcodeScanner.scan().then(barcodeData => {
|
||||
console.log('Barcode data', barcodeData);
|
||||
// let strResult = JSON.parse(barcodeData);
|
||||
// console.log(strResult.QRValue);
|
||||
this.scannedResult = barcodeData;
|
||||
this.deviceID = this.device.uuid;
|
||||
this.swipeAttendance();
|
||||
}).catch(err => {
|
||||
console.log('Error', err);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
public swipeAttendance() {
|
||||
let request: attendanceSwipeScannerRequest = new attendanceSwipeScannerRequest();
|
||||
request.Latitude = this.lat;
|
||||
request.Longitude = this.longt;
|
||||
request.QRValue = this.scannedResult.text;
|
||||
request.UID = this.deviceID;
|
||||
request.UserName = this.userData.EMPLOYEE_NUMBER;
|
||||
console.log("request");
|
||||
console.log(JSON.stringify(request));
|
||||
this.attendance_service
|
||||
.attendanceSwipeScanner(request, () => {
|
||||
console.log("Error inside in swipe attendance");
|
||||
})
|
||||
.subscribe((result: Response) => {
|
||||
if (this.common.validResponse(result)) {
|
||||
console.log("response");
|
||||
console.log(result);
|
||||
this.common.presentAlert(this.ts.trPK("home", "swipeAlertSuccess"));
|
||||
} else {
|
||||
this.common.presentAlert(this.ts.trPK("home", "swipeAlertFailed"));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
|
||||
|
||||
export class AttendanceTrackingList{
|
||||
public SCHEDULED_HOURS :string;
|
||||
public SPENT_HOURS : string;
|
||||
public REMAINING_HOURS : string;
|
||||
public RETURN_STATUS : string;
|
||||
public RETURN_MSG : string;
|
||||
}
|
||||
export class AttendanceTrackingList {
|
||||
public P_REMAINING_HOURS: string;
|
||||
public P_RETURN_MSG: string;
|
||||
public P_RETURN_STATUS: string;
|
||||
public P_SCHEDULED_HOURS: string;
|
||||
public P_SHT_NAME: string;
|
||||
public P_SPENT_HOURS: string;
|
||||
}
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
|
||||
|
||||
export class OpenMissingSwipesList{
|
||||
public OPEN_MISSING_SWIPES :number;
|
||||
public RETURN_STATUS : string;
|
||||
public RETURN_MSG : string;
|
||||
|
||||
export class OpenMissingSwipesList {
|
||||
public P_OPEN_MISSING_SWIPES: number;
|
||||
public P_RETURN_STATUS: string;
|
||||
public P_RETURN_MSG: string;
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
|
||||
import { Response } from "src/app/hmg-common/services/models/response";
|
||||
import { Response } from 'src/app/hmg-common/services/models/response';
|
||||
import { AttendanceTrackingList } from './AttensanceTrackingList';
|
||||
|
||||
export class AttendanceTrackingResponse extends Response{
|
||||
public GetGetAttendanceTrackingList : AttendanceTrackingList[];
|
||||
}
|
||||
|
||||
export class AttendanceTrackingResponse extends Response {
|
||||
public GetGetAttendanceTrackingList: AttendanceTrackingList[];
|
||||
}
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
export class GetOpenNotificationsList
|
||||
|
||||
{
|
||||
public ITEM_TYPE: number;
|
||||
|
||||
public ITEM_TYPE_DISPLAY_NAME:number;
|
||||
|
||||
public OPEN_NTF_NUMBER:number;
|
||||
|
||||
|
||||
}
|
||||
export class GetOpenNotificationsList {
|
||||
public ITEM_TYPE: number;
|
||||
public ITEM_TYPE_DISPLAY_NAME: number;
|
||||
public OPEN_NTF_NUMBER: number;
|
||||
public P_OPEN_NTF_NUMBER: number;
|
||||
}
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
<div [class]=" direction == 'rtl' ? ' wrapper wrapper_left' : 'wrapper wrapper_right '">
|
||||
<div class="circle pulse"></div>
|
||||
<div class="circle">
|
||||
<ion-fab class="fab-i ">
|
||||
|
||||
<ion-fab-button class="cbookApointmentBtn" (click)="onClick()" >
|
||||
<!-- <img style="width: 39%; margin-top: -29%;" src="assets/icon/booking.png" /> -->
|
||||
<ion-icon class="iconFab" name="finger-print"></ion-icon>
|
||||
<p class="fab-p">{{ 'attendance-tracking,title' | translate }} </p>
|
||||
</ion-fab-button>
|
||||
|
||||
</ion-fab>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,219 @@
|
||||
|
||||
|
||||
////////////////////book btn/////////////////////
|
||||
ion-fab-button{
|
||||
--background: var(--darkblue)!important;
|
||||
// background: url(/assets/icon/sliderBG.jpg);
|
||||
background-size: cover;
|
||||
background-position: top right;
|
||||
border-radius: 50%;
|
||||
height:112px;
|
||||
width: 112px;
|
||||
}
|
||||
.cbookApointmentBtn{
|
||||
// --background:transparent !important;
|
||||
|
||||
--background-focused: transparent;
|
||||
--background-hover:transparent;
|
||||
--background-activated: transparent;
|
||||
--background: transparent;
|
||||
}
|
||||
|
||||
|
||||
.fab-p{
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// line-height: 0;
|
||||
// margin: 12px;
|
||||
// margin-bottom: 28%;
|
||||
// margin-top: 27px;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* line-height: 0; */
|
||||
margin: 12px;
|
||||
margin-bottom: 14%;
|
||||
white-space: pre-line;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fab-i{
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
button-inner{
|
||||
--top: -11px !important;
|
||||
}
|
||||
|
||||
.iconFab{
|
||||
margin-top: -37px;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
|
||||
////////////////animation/////////////////////////
|
||||
|
||||
|
||||
|
||||
// .wrapper {
|
||||
// position: fixed;
|
||||
// width: 60px;
|
||||
// height: 60px;
|
||||
// margin: 0 auto;
|
||||
// left: 65px;
|
||||
// bottom: 84px;
|
||||
// z-index: 100;
|
||||
// }
|
||||
// .wrapper1{
|
||||
// left:inherit;
|
||||
// right: 65px;
|
||||
|
||||
|
||||
// }
|
||||
// .wrapper .circle {
|
||||
// width: 110px;
|
||||
// height: 110px;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: -40px;
|
||||
// right: 0;
|
||||
// bottom: 20px;
|
||||
// border-radius: 50%;
|
||||
// margin: auto;
|
||||
// -webkit-transform: scale(1, 1);
|
||||
// transform: scale(1, 1);
|
||||
// }
|
||||
|
||||
.wrapper {
|
||||
position: fixed;
|
||||
width: 3cm;
|
||||
height: 3cm;
|
||||
/* margin: 0 auto; */
|
||||
bottom: 2.1cm;
|
||||
padding: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.wrapper1{
|
||||
left:inherit;
|
||||
right: 65px;
|
||||
|
||||
}
|
||||
|
||||
.wrapper_left {
|
||||
|
||||
left: 4%;
|
||||
}
|
||||
.wrapper_right {
|
||||
right: 4%;
|
||||
}
|
||||
|
||||
.wrapper .circle {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
position: absolute;
|
||||
top: 118%;
|
||||
left: -10%;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
|
||||
.wrapper .circle.pulse {
|
||||
-webkit-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
-webkit-animation: pulse 2s infinite;
|
||||
animation: pulse 2s infinite;
|
||||
background-color: var(--ion-color-secondary-tint);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1.2, 1.2);
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1.2, 1.2);
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
ion-fab-button{
|
||||
--background: var(--ion-color-secondary);
|
||||
height:90px;
|
||||
width: 90px;
|
||||
left: 0px;
|
||||
|
||||
}
|
||||
.wrapper .circle {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dashboard-container {
|
||||
margin-bottom: 0.9cm;
|
||||
}
|
||||
|
||||
.clicked {
|
||||
|
||||
}
|
||||
.clicked:hover {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
|
||||
.clicked:focus {
|
||||
background-color: orange;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FabButtonComponent } from './fab-button.component';
|
||||
|
||||
describe('FabButtonComponent', () => {
|
||||
let component: FabButtonComponent;
|
||||
let fixture: ComponentFixture<FabButtonComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ FabButtonComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FabButtonComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,24 @@
|
||||
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
|
||||
import { TranslatorService } from '../../services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'fab-button',
|
||||
templateUrl: './fab-button.component.html',
|
||||
styleUrls: ['./fab-button.component.scss'],
|
||||
})
|
||||
export class FabButtonComponent implements OnInit {
|
||||
|
||||
@Output() trigger = new EventEmitter();
|
||||
public direction: any;
|
||||
constructor(
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.direction = TranslatorService.getCurrentDirection();
|
||||
}
|
||||
|
||||
public onClick() {
|
||||
this.trigger.emit();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,3 +1,8 @@
|
||||
.float-left{
|
||||
float: left;
|
||||
}
|
||||
ion-menu-button {
|
||||
font-size: 0.8cm;
|
||||
color: white;
|
||||
background: #22c6b3;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
<div feedback class="custom-button">
|
||||
<div class="iconBox">
|
||||
<img [src]="icon" class="icon">
|
||||
</div>
|
||||
<div class="titleBox">
|
||||
<p class="pClass">{{title}}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
.custom-button {
|
||||
background: white;
|
||||
margin-bottom: 0px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
max-width: 105px;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
min-width: 96px;
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: static;
|
||||
}
|
||||
.iconBox img{
|
||||
margin: 0px auto 10px;
|
||||
display: block;
|
||||
// max-width: 35%;
|
||||
}
|
||||
|
||||
.titleBox {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pClass {
|
||||
font-size: 12PX;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ServicesButtonComponent } from './services-button.component';
|
||||
|
||||
describe('ServicesButtonComponent', () => {
|
||||
let component: ServicesButtonComponent;
|
||||
let fixture: ComponentFixture<ServicesButtonComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ServicesButtonComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ServicesButtonComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,28 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
|
||||
import { TranslatorService } from '../../services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-services-button',
|
||||
templateUrl: './services-button.component.html',
|
||||
styleUrls: ['./services-button.component.scss'],
|
||||
})
|
||||
export class ServicesButtonComponent implements OnInit {
|
||||
|
||||
@Input() class: any = '';
|
||||
@Input() buttonClass: any = '';
|
||||
@Input() icon: string;
|
||||
@Input() title: string;
|
||||
@Output() trigger = new EventEmitter();
|
||||
@Input() focusicon: string;
|
||||
@Input() disabled = false;
|
||||
public direction: string;
|
||||
public style: any;
|
||||
constructor(
|
||||
public ts: TranslatorService
|
||||
) {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
public onClicked() {}
|
||||
}
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
<div feedback class="custom-button">
|
||||
<div class="iconBox">
|
||||
<img [src]="icon" class="icon">
|
||||
</div>
|
||||
<div class="titleBox">
|
||||
<span>{{statsValue}}</span>
|
||||
<p class="pClass">{{title}}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,42 @@
|
||||
.custom-button {
|
||||
background: white;
|
||||
margin-bottom: 0px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
max-width: 105px;
|
||||
height: 160px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.iconBox {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: static;
|
||||
img {
|
||||
display: block;
|
||||
max-width: 45%;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.titleBox {
|
||||
display: block;
|
||||
span {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.pClass {
|
||||
color: black;
|
||||
width: 85%;
|
||||
margin-top: 5px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { StatsButtonComponent } from './stats-button.component';
|
||||
|
||||
describe('StatsButtonComponent', () => {
|
||||
let component: StatsButtonComponent;
|
||||
let fixture: ComponentFixture<StatsButtonComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ StatsButtonComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StatsButtonComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
|
||||
import { TranslatorService } from '../../services/translator/translator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-stats-button',
|
||||
templateUrl: './stats-button.component.html',
|
||||
styleUrls: ['./stats-button.component.scss'],
|
||||
})
|
||||
export class StatsButtonComponent implements OnInit {
|
||||
|
||||
@Input() class: any = '';
|
||||
@Input() buttonClass: any = '';
|
||||
@Input() icon: string;
|
||||
@Input() title: string;
|
||||
@Input() statsValue: string;
|
||||
@Output() trigger = new EventEmitter();
|
||||
@Input() focusicon: string;
|
||||
@Input() disabled = false;
|
||||
public direction: string;
|
||||
public style: any;
|
||||
constructor(
|
||||
public ts: TranslatorService
|
||||
) {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
public onClicked() {}
|
||||
|
||||
}
|
||||
@ -1,117 +1,171 @@
|
||||
<!-- <ion-header no-shadow no-border>
|
||||
<ion-toolbar>
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar-new">
|
||||
<nav-buttons [enableMenu]="true" [enableBack]="false" [navigate]="false"></nav-buttons>
|
||||
<ion-title>home </ion-title>
|
||||
<ion-badge id="homeBadgeBtn" item-end>{{notBadge}}</ion-badge>
|
||||
<ion-title>DASHBOARD</ion-title>
|
||||
<div class="profile-image-container" (click)="openProfilePage()">
|
||||
<img [src]="userImage"/>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header> -->
|
||||
<ion-content class="colorBG">
|
||||
<div class="header-div">
|
||||
<button ion-button icon-only menuToggle class="menubutton" (click)="openMenu()">
|
||||
<img class="menuImg" src="../assets/imgs/home/burgerMenu.png"/>
|
||||
<ion-badge id="homeBadgeBtn" slot="end" color="danger">{{notBadge}}</ion-badge>
|
||||
</button>
|
||||
<!-- <button ion-button icon-only menuToggle class="menubuttonTrans" (click)="openMenu()">
|
||||
<img class="transImg" src="../assets/imgs/home/arabicSwitch.png"/>
|
||||
</button> -->
|
||||
<div class="centerDiv homeBox" (click)="openPersonalInfo()">
|
||||
<p class="TxtPlace">{{ts.trPK('home','hello')}}, {{userData.EMPLOYEE_DISPLAY_NAME}}</p>
|
||||
<div class="profileDiv">
|
||||
<!-- <ion-img class="profileImg" src="{{user_image}}"></ion-img> -->
|
||||
<img class="profileImg" [src]="user_image">
|
||||
</ion-header>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="changeImgBtn">
|
||||
<button ion-button icon-only menuToggle class="menubutton" (click)="changeImage()">
|
||||
<ion-icon class="changeIcon" name="camera"></ion-icon></button>
|
||||
|
||||
<!-- <app-file-uploder-profile >
|
||||
|
||||
</app-file-uploder-profile>
|
||||
-->
|
||||
<!-- <file-uploader (fileSelected)="attachmentSelected($event)" [maxFileSize]="maxFileSize" [multiupload]="false"></file-uploader> -->
|
||||
<ion-content class="main-dashboard-container">
|
||||
<ion-grid class="main-container contentBg">
|
||||
<ion-row class="slideFullWidth">
|
||||
<ion-slides [options]="slideOptsOne" class="padding-slide slide">
|
||||
<ion-slide *ngFor="let button of statsButtons; let i=index;">
|
||||
<app-stats-button
|
||||
[title]="button.title"
|
||||
[statsValue]="button.statsValue"
|
||||
[icon]="button.icon">
|
||||
</app-stats-button>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
</ion-row>
|
||||
|
||||
<ion-row *ngFor="let menuItem of menuEntries; let i=index">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ion-row class="attendance-module" *ngIf="i == 1">
|
||||
<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-col [size]="12">
|
||||
<ion-label>{{menuItem.PROMPT}}</ion-label>
|
||||
</ion-col>
|
||||
<ion-slides [options]="slideOptsTwo">
|
||||
|
||||
<ion-slide *ngFor="let subMenu of menuItem.children; let j=index">
|
||||
<app-services-button
|
||||
(click)="openPage(subMenu)"
|
||||
[title]="subMenu.PROMPT"
|
||||
icon="assets/icon/new-design/leave_balance.png">
|
||||
</app-services-button>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
</ion-row>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<p class="dash-header text-caps">{{ts.trPK('home','dashboard')}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<ion-grid class="cus-grid">
|
||||
<ion-row>
|
||||
<ion-col size="6" class="col-grid" *ngFor="let item of menuList; let i=index">
|
||||
<button ion-button block class="serviceItem" (click)="getMeunDetails(i)">
|
||||
<img class="serviceItemImg" src="../assets/imgs/{{item.MENU_TYPE}}.png"/>
|
||||
<p> {{ item.MENU_NAME }} {{item.SUB_MENU_NAME}}</p>
|
||||
</button>
|
||||
</ion-col>
|
||||
<ion-col size="6" class="col-grid">
|
||||
<button ion-button block class="serviceItem" (click)="getDeviceLocation()">
|
||||
<ion-img class="serviceItemImg" src="../assets/imgs/home/attendanceSwipe.png"></ion-img>
|
||||
<p>{{ts.trPK('attendance','attendance')}}</p>
|
||||
</button>
|
||||
</ion-col>
|
||||
<ion-col size="6" class="col-grid" >
|
||||
<button ion-button block class="serviceItem" id="vacationRule" (click)="Vacation_Rule()">
|
||||
<ion-img class="serviceItemImg" src="../assets/imgs/home/vacationRule.png"></ion-img>
|
||||
<p>{{ts.trPK('vacation-rule','vacationRule')}}</p>
|
||||
</button>
|
||||
</ion-col>
|
||||
<ion-col size="6" class="col-grid">
|
||||
<button ion-button block class="serviceItem" id="accrualBalance" (click)="accrualBalance()">
|
||||
<ion-img class="serviceItemImg" src="../assets/imgs/home/accrualBalances.png"></ion-img>
|
||||
<p>{{ts.trPK('absenceList','accrualBalances')}}</p>
|
||||
</button>
|
||||
</ion-col>
|
||||
|
||||
<ion-col size="6" class="col-grid">
|
||||
<button ion-button block class="serviceItem" (click)="Change_password()">
|
||||
<ion-img class="serviceItemImg" src="../assets/imgs/home/changePasword.png"></ion-img>
|
||||
<p>{{ts.trPK('changePassword','changePassword')}}</p>
|
||||
</button>
|
||||
<!-- <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="6" class="col-grid">
|
||||
<button ion-button block class="serviceItem" (click)="openPayslip()">
|
||||
<ion-img class="serviceItemImg" src="../assets/imgs/home/paySlip.png"></ion-img>
|
||||
<p>{{ts.trPK('login','payslip')}}</p>
|
||||
</button>
|
||||
<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="6" class="col-grid">
|
||||
<button ion-button block class="serviceItem" (click)="Change_password()">
|
||||
<ion-img class="serviceItemImg" src="../assets/imgs/home/announcements.png"></ion-img>
|
||||
<p>{{ts.trPK('login','announcement')}}</p>
|
||||
</button>
|
||||
<ion-col [size]="4">
|
||||
<app-services-button
|
||||
title="Vacations Rules"
|
||||
icon="assets/icon/new-design/vacation_rules.png">
|
||||
</app-services-button>
|
||||
</ion-col>
|
||||
<ion-col size="6" class="col-grid">
|
||||
<button ion-button block class="serviceItem" (click)="Change_password()">
|
||||
<ion-img class="serviceItemImg" src="../assets/imgs/home/timeAttendance.png"></ion-img>
|
||||
<p>{{ts.trPK('home','timeAndAttendance')}}</p>
|
||||
</button>
|
||||
</ion-col> -->
|
||||
|
||||
<!-- <ion-col size="6" class="col-grid">
|
||||
<button ion-button block class="serviceItem" (click)="openPayslip()">
|
||||
<ion-img class="serviceItemImg" src="../assets/imgs/changepass.png"></ion-img>
|
||||
<p>{{ts.trPK('payslip','title')}}</p>
|
||||
</button>
|
||||
</ion-col> -->
|
||||
</ion-row>
|
||||
</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> -->
|
||||
|
||||
<!-- <button class="menu-item" ion-item menuClose ion-item *ngFor="let item of menuList; let i=index" (click)="getMeunDetails(i)" >
|
||||
<img width="30" src="../assets/imgs/arrownew.png" item-left class="flipImg">
|
||||
{{ item.MENU_NAME }} {{item.SUB_MENU_NAME}}
|
||||
</button> -->
|
||||
<!--
|
||||
<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-grid>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<circle-progress
|
||||
[backgroundColor]= "'#094875'"
|
||||
[percent]="percent"
|
||||
[radius]="50"
|
||||
[outerStrokeWidth]="2"
|
||||
[innerStrokeWidth]="0"
|
||||
[outerStrokeColor]="'#ffffff'"
|
||||
[animation]="true"
|
||||
[animationDuration]="300"
|
||||
[responsive]="false"
|
||||
[space]="-4"
|
||||
[startFromZero]="false"
|
||||
[title]="displayTime"
|
||||
titleFontWeight="bold"
|
||||
[titleColor]="'#ffffff'"
|
||||
[showUnits]="false"
|
||||
subtitle=""
|
||||
[subtitleColor]="'#ffffff'"
|
||||
[clockwise]="false"
|
||||
[renderOnClick]="false">
|
||||
</circle-progress>
|
||||
</div>
|
||||
<div class="fixed-shift-timer" *ngIf="isCheckedIn === false">
|
||||
<fab-button (trigger)="attendance()"></fab-button>
|
||||
<page-trailer [small] = "true"></page-trailer>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@ -1,153 +1,145 @@
|
||||
.button-menutoggle.button-menutoggle-md,button-menutoggle.button-menutoggle-ios,
|
||||
.bar-buttons.bar-buttons-ios.button.button-ios.button-default.button-default-ios.button-menutoggle.button-menutoggle-ios{
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow:none;
|
||||
-moz-box-shadow: none;
|
||||
background: transparent !important;
|
||||
}
|
||||
.colorBG{
|
||||
--background: #f0efef;
|
||||
}
|
||||
ion-row {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.menubutton{
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 47px;
|
||||
background: transparent;
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
}
|
||||
.menubuttonTrans{
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 47px;
|
||||
background: transparent;
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 315px
|
||||
}
|
||||
#homeBadgeBtn{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 20px;
|
||||
font-size: 10px;
|
||||
height: 20px;
|
||||
padding: 0px;
|
||||
line-height: 2;
|
||||
min-width: auto;
|
||||
min-height: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.homeBox{
|
||||
|
||||
|
||||
}
|
||||
.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: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
|
||||
color:var(--light);
|
||||
text-transform: capitalize;
|
||||
|
||||
display: block;
|
||||
.header-toolbar-new{
|
||||
--background: #22c6b3;
|
||||
}
|
||||
.profile-image-container{
|
||||
position: relative;
|
||||
height: 210px;
|
||||
margin-bottom:60px;
|
||||
border-radius: 0px 0px 70px 70px;
|
||||
}
|
||||
|
||||
.dash-header{
|
||||
text-align: center;
|
||||
margin: 16px 0 0 0;
|
||||
|
||||
}
|
||||
|
||||
.TxtPlace {
|
||||
margin: 0;
|
||||
padding: 50px 0 10px 0;
|
||||
z-index: 999;
|
||||
img {
|
||||
width: 32px;
|
||||
float: right;
|
||||
margin-top: -42px;
|
||||
border-radius: 20px;
|
||||
height: 32px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
ion-title{
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.serviceItem {
|
||||
// min-height: 160px !important;
|
||||
// padding: 0;
|
||||
// width: 95%;
|
||||
// border: 0px solid #e4e5e7;
|
||||
// background: white;
|
||||
// color: var(--dark);
|
||||
// border-radius: 7px;
|
||||
min-height: 200px !important;
|
||||
padding-top: 0;
|
||||
width: 95%;
|
||||
margin-left: 4px;
|
||||
margin-bottom: 13px;
|
||||
border: 0px solid #e4e5e7;
|
||||
background: white;
|
||||
color: var(--dark);
|
||||
border-radius: 7px;
|
||||
p{
|
||||
margin-top: 0px; margin-bottom:0px;
|
||||
font-weight: normal;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
font-size: 0.42cm;
|
||||
font-weight: bold;
|
||||
height: 100%;
|
||||
}
|
||||
ion-label{
|
||||
display: block;
|
||||
color: black !important;
|
||||
font-size: 14px;
|
||||
min-height: 20px;
|
||||
// white-space: normal;
|
||||
text-align: center;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
}
|
||||
.main-dashboard-container{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.header-md:after {
|
||||
height: 0px !important;
|
||||
display: none !important;
|
||||
}
|
||||
.contentBg:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: #22c6b3;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
.main-container{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
padding-bottom: 130px;
|
||||
}
|
||||
.attendance-module{
|
||||
border-radius: 20px;
|
||||
background-color: #094875;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
width: 100%;
|
||||
h3{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
|
||||
span{
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
}
|
||||
.serviceItemImg {
|
||||
min-width: 60px !important;
|
||||
min-height: 70px !important;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 10px auto;
|
||||
background: transparent !important;
|
||||
img{
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
.serviceItem.button,.serviceItem.button-md, .serviceItem.button-ios{
|
||||
background: transparent !important;
|
||||
color:var(--dark);
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow:none;
|
||||
-moz-box-shadow: none;
|
||||
border: 2px solid var(--gray);
|
||||
min-width: auto;
|
||||
}
|
||||
//test
|
||||
.changeImgBtn{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 53%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
//test
|
||||
.changeIcon{
|
||||
background: #c1c1c1;
|
||||
width: 40px;
|
||||
height: 39px;
|
||||
border-radius: 50% !important;
|
||||
position: relative;
|
||||
left: 51px;
|
||||
top:16px;
|
||||
}
|
||||
.menuImg{
|
||||
max-width: 30px;
|
||||
}
|
||||
.transImg{
|
||||
max-width: 45px;
|
||||
}
|
||||
|
||||
ion-button{
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
background: #3CB9DF;
|
||||
--background: transparent;
|
||||
--box-shadow: none !important;
|
||||
height: auto;
|
||||
min-height: inherit;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.fixed-shift-timer{
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 2;
|
||||
span.subTitle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 62%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
// .attendance-timer {
|
||||
// position: fixed;
|
||||
// bottom: 20px;
|
||||
// right: 20px;
|
||||
// z-index: 2;
|
||||
// height: 112px;
|
||||
// width: 112px;
|
||||
// background-color: #094875;
|
||||
// border-radius: 50%;
|
||||
// display: inline-block;
|
||||
// img {
|
||||
// position: absolute;
|
||||
// left: 33%;
|
||||
// top: 8%;
|
||||
// width: 35%;
|
||||
// }
|
||||
// span {
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// top: 70%;
|
||||
// -webkit-transform: translate(-50%, -50%);
|
||||
// transform: translate(-50%, -50%);
|
||||
// color: white;
|
||||
// width: 80%;
|
||||
// text-align: center;
|
||||
// font-size: 11px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -0,0 +1,77 @@
|
||||
<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>
|
||||
<p class="proTitles">{{ts.trPK('userProfile','title')}}</p>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<div class="centerDiv homeBox" (click)="openPersonalInfo()">
|
||||
<!-- <div class="profileDiv"> -->
|
||||
<img class="profileImg" [src]="user_image">
|
||||
</div>
|
||||
|
||||
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
|
||||
<div *ngIf="personalInfo">
|
||||
<p class="empName">{{User_name_Emp}}</p>
|
||||
<p class="empJob"> {{User_Job_name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ion-grid *ngIf="personalInfo">
|
||||
<div class="gridService">
|
||||
<ion-row>
|
||||
<ion-col class="columns">
|
||||
<label class="service">{{personalInfo.SERVICE_YEARS}}</label>
|
||||
<br> <label class="services">YEARS</label>
|
||||
</ion-col>
|
||||
<ion-col class="columns">
|
||||
<label class="service">{{personalInfo.SERVICE_MONTHS}}</label>
|
||||
<br> <label class="services">MONTHS</label>
|
||||
</ion-col>
|
||||
<ion-col class="columns">
|
||||
<label class="service">{{personalInfo.SERVICE_DAYS}}</label>
|
||||
<br> <label class="services">DAYS</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
</div>
|
||||
</ion-grid>
|
||||
|
||||
|
||||
<div class="list">
|
||||
<ion-list class="list-ios">
|
||||
<div class="p">
|
||||
<p>Years of Services</p>
|
||||
</div>
|
||||
|
||||
<ion-item class="itemline" (click)="openEditprofile()">
|
||||
<ion-thumbnail slot="start" class="menu-thumb">
|
||||
<img style= "height: 22px !important;" src="../assets/imgs/profile_icon.png" item-left>
|
||||
</ion-thumbnail>
|
||||
|
||||
<ion-label class="profile">
|
||||
{{ts.trPK('userProfile','edit-profile')}}
|
||||
</ion-label>
|
||||
<ion-icon style= "width: 20px; height: 22px !important;" name="arrow-forward" item-right></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="itemlins" (click)="openPerormance()">
|
||||
<ion-thumbnail slot="start" class="menu-thumb">
|
||||
<ion-icon style= "width: 23px; height: 24px !important;" name="speedometer" item-left></ion-icon>
|
||||
|
||||
</ion-thumbnail>
|
||||
<ion-label class="profile">
|
||||
{{ts.trPK('userProfile','performance-evaluation')}}
|
||||
</ion-label>
|
||||
<ion-icon style= "width: 20px; height: 22px !important;" name="arrow-forward" item-right></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -0,0 +1,153 @@
|
||||
|
||||
|
||||
.list-ios {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
background: var(--ion-item-background,var(--ion-background-color,#fff));
|
||||
}
|
||||
|
||||
.colorBG{
|
||||
--background: #f0efef;
|
||||
}
|
||||
.header-div{
|
||||
text-transform: capitalize;
|
||||
background: #22C6B3;
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 160px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
|
||||
.profileImg{
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
display: -webkit-inline-box;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
/* background: transparent; */
|
||||
border-radius: 78% !important;
|
||||
position: relative;
|
||||
top: 34px;
|
||||
// background: white;
|
||||
background: transparent;
|
||||
margin-left: -3px;
|
||||
|
||||
}
|
||||
|
||||
.proTitles {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: white;
|
||||
margin-top: -33px;
|
||||
}
|
||||
|
||||
.Text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 34px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
ion-thumbnail.menu-thumb{
|
||||
width:20px;
|
||||
height:20px;
|
||||
// margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.profile{
|
||||
color: black !important;
|
||||
// font-weight: bolder !important;
|
||||
|
||||
}
|
||||
|
||||
.gridService{
|
||||
|
||||
// background-color: #094875;
|
||||
margin-top: 87px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: -49px;
|
||||
margin-left: 14px;
|
||||
margin-right: 14px;
|
||||
|
||||
}
|
||||
.columns{
|
||||
margin: 10px;
|
||||
background: #094875;
|
||||
border-radius: 27px;
|
||||
padding-left: 30px;
|
||||
padding-right: 6px;
|
||||
padding-top: 19px;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
|
||||
|
||||
.service{
|
||||
font-size: 28px;
|
||||
// font-weight: bolder;
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.services{
|
||||
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.list{
|
||||
margin-left: 14px;
|
||||
margin-right: 14px;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
border: solid #bebbbb !important;
|
||||
padding: 2px;
|
||||
}
|
||||
.p{
|
||||
color: black !important;
|
||||
font-size: medium;
|
||||
text-align: center;
|
||||
border-bottom: rgb(190, 187, 187) solid 1px;
|
||||
}
|
||||
.itemline{
|
||||
border-bottom: rgb(190, 187, 187) solid 1px;
|
||||
}
|
||||
.itemlins{
|
||||
border-bottom: rgb(190, 187, 187) solid 1px;
|
||||
margin-bottom: 209px;
|
||||
|
||||
|
||||
}
|
||||
.empName {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 38px;
|
||||
|
||||
}
|
||||
.empJob{
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 4px;
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditProfileComponent } from './edit-profile.component';
|
||||
|
||||
describe('EditProfileComponent', () => {
|
||||
let component: EditProfileComponent;
|
||||
let fixture: ComponentFixture<EditProfileComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EditProfileComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditProfileComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,112 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Platform, Events, MenuController } from "@ionic/angular";
|
||||
import { CommonService } from "src/app/hmg-common/services/common/common.service";
|
||||
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
|
||||
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
|
||||
import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/models/authenticated-user";
|
||||
import { PerformanceAppraisalResponse } from 'src/app/hmg-common/services/dashbored/performance-appraisal.response';
|
||||
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
|
||||
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
|
||||
// import { DomSanitizer } from '@angular/platform-browser';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-profile',
|
||||
templateUrl: './edit-profile.component.html',
|
||||
styleUrls: ['./edit-profile.component.scss'],
|
||||
})
|
||||
export class EditProfileComponent implements OnInit {
|
||||
|
||||
|
||||
User_name_Emp: string = "";
|
||||
User_Job_name: string;
|
||||
|
||||
private menu: MenuController;
|
||||
setImage:any;
|
||||
// imageSrc: any = "../assets/imgs/profile.png";
|
||||
user_image: any = "../assets/imgs/profile.png";
|
||||
personalInfo: any;
|
||||
appraisalArr :any =[];
|
||||
public performanceData: any=[];
|
||||
public static PERFORMANCE_DATA = 'perAppData';
|
||||
|
||||
constructor(
|
||||
public ts: TranslatorService,
|
||||
public cs: CommonService,
|
||||
public authService: AuthenticationService,
|
||||
public DS :DashboredService,
|
||||
public sharedData: SharedDataService
|
||||
// private events: Events,
|
||||
// private sanitizer: DomSanitizer,
|
||||
|
||||
)
|
||||
{
|
||||
// this.events.subscribe("img-change", displayImg => {
|
||||
// console.log("app compont: "+displayImg);
|
||||
// this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);
|
||||
|
||||
// });
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getProfile();
|
||||
}
|
||||
|
||||
getProfile() {
|
||||
console.log("getProfile");
|
||||
this.authService
|
||||
.loadAuthenticatedUser()
|
||||
.subscribe((user: AuthenticatedUser) => {
|
||||
if (user) {
|
||||
this.personalInfo = user;
|
||||
this.User_name_Emp=this.personalInfo.EMPLOYEE_NAME;
|
||||
this.User_Job_name=this.personalInfo.JOB_NAME;
|
||||
this.user_image = user.EMPLOYEE_IMAGE
|
||||
? "data:image/png;base64," + user.EMPLOYEE_IMAGE
|
||||
: "../assets/imgs/profile.png";
|
||||
console.log("name: "+ this.personalInfo.EMPLOYEE_NAME);
|
||||
console.log("user name: "+ user.EMPLOYEE_NAME);
|
||||
console.log("name: "+ this.personalInfo.JOB_NAME);
|
||||
console.log("job name: "+ user.JOB_NAME);
|
||||
|
||||
|
||||
}});
|
||||
}
|
||||
|
||||
openEditprofile(){
|
||||
this.cs.openProfile();
|
||||
}
|
||||
|
||||
openPerormance(){
|
||||
this.showPerformanceAppraisal();
|
||||
|
||||
}
|
||||
|
||||
showPerformanceAppraisal(){
|
||||
this.DS.getPerformanceAppraisal(()=>{
|
||||
this.showPerformanceAppraisal();
|
||||
}).subscribe((result: PerformanceAppraisalResponse) => {
|
||||
this.handlePerformanceAppraisalResult(result);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
private handlePerformanceAppraisalResult(result){
|
||||
if (this.cs.validResponse(result)) {
|
||||
if (this.cs.hasData(result.GetPerformanceAppraisalList)) {
|
||||
this.appraisalArr =result.GetPerformanceAppraisalList;
|
||||
this.performanceData=[];
|
||||
|
||||
for(let i=0;i<this.appraisalArr.length;i++){
|
||||
this.performanceData.push({name:this.appraisalArr[i].APPRAISAL_YEAR,value :this.appraisalArr[i].APPRAISAL_SCORE});
|
||||
}
|
||||
console.log("PerformanceAppraisalResponse");
|
||||
this.sharedData.setSharedData(this.performanceData, PerformanceAppraisalResponse.PERFORMANCE_DATA);
|
||||
//localStorage.setItem("performanceData", this.performanceData)
|
||||
this.cs.openPerformanceevaluation();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,111 +1,168 @@
|
||||
<ion-header>
|
||||
<!-- <ion-header>
|
||||
|
||||
<div class="profileHead">
|
||||
<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('userProfile','title')}}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<ion-card *ngIf="personalInfo">
|
||||
|
||||
<ion-card-header class="boxHdr">
|
||||
<div class="hrTitle">{{personalInfo.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]="imageSrc"></ion-img>
|
||||
</div>
|
||||
<ion-grid class="profile-grid">
|
||||
<div>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label> {{ts.trPK('userProfile','empNo')}}</label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.EMPLOYEE_NUMBER}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','busG')}}</label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.BUSINESS_GROUP_NAME}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','job')}}</label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.JOB_NAME}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','locName')}}</label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.LOCATION_NAME}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','payrol')}}</label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.PAYROLL_NAME}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','orgEmail')}}</label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','orgName')}} </label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.ORGANIZATION_NAME}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','position')}}</label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.POSITION_NAME}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','grade')}} </label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.GRADE_NAME}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col class="colBold" size="5">
|
||||
<label>{{ts.trPK('userProfile','category')}}</label>
|
||||
</ion-col>
|
||||
<ion-col size="7">
|
||||
<label>{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</ion-grid>
|
||||
</div>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-content>
|
||||
</div>
|
||||
</ion-header> -->
|
||||
|
||||
|
||||
<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>
|
||||
<p class="proTitles">{{ts.trPK('userProfile','title')}}</p>
|
||||
|
||||
<!-- <div class="centerDiv profileDiv"> -->
|
||||
<div class="centerDiv homeBox">
|
||||
<div class="centerDiv homeBox" (click)="openPersonalInfo()">
|
||||
<!-- <div class="profileDiv"> -->
|
||||
<img class="profileImg" [src]="imageSrc">
|
||||
</div>
|
||||
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
|
||||
<!-- <div class="Text">{{personalInfo.EMPLOYEE_NAME}}</div> -->
|
||||
<div *ngIf="personalInfo">
|
||||
<p class="Text">{{personalInfo.EMPLOYEE_NAME}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="changeImgBtn">
|
||||
<button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
|
||||
<ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end header-div -->
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<!-- <ion-card *ngIf="personalInfo"> -->
|
||||
|
||||
<!-- <ion-card-header class="boxHdr">
|
||||
<div class="hrTitle">{{personalInfo.EMPLOYEE_NAME}}</div>
|
||||
</ion-card-header> -->
|
||||
<!-- <ion-card-content> -->
|
||||
<div *ngIf="personalInfo">
|
||||
|
||||
<ion-grid>
|
||||
<div class="profileGrid">
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col class="line">
|
||||
<ion-row>
|
||||
<label class="lebl">
|
||||
{{ts.trPK('userProfile','empNo')}}</label></ion-row>
|
||||
<ion-row > <label
|
||||
class="rowBolds">{{personalInfo.EMPLOYEE_NUMBER}}</label> </ion-row>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-row> <label class="lebl">{{ts.trPK('userProfile','category')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</label> </ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','address')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds"></label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('general','mobile')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYEE_MOBILE_NUMBER}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','busG')}}</label>
|
||||
</ion-row>
|
||||
<ion-row> <label class="rowBolds">{{personalInfo.BUSINESS_GROUP_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','job')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.JOB_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','payrol')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.PAYROLL_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','orgEmail')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','position')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.POSITION_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="lebl">{{ts.trPK('userProfile','grade')}} </label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="rowBolds">{{personalInfo.GRADE_NAME}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
</div>
|
||||
</ion-grid>
|
||||
</div>
|
||||
<!-- </ion-card-content> -->
|
||||
<!-- </ion-card> -->
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -1,3 +1,132 @@
|
||||
ion-col.colBold, ion-col.colBold > label{
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
|
||||
.colorBG{
|
||||
--background: #f0efef;
|
||||
}
|
||||
.header-div{
|
||||
text-transform: capitalize;
|
||||
background: #22C6B3;
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 160px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
// .profileCont{
|
||||
// background-color: #d9d7d7 !important;
|
||||
|
||||
|
||||
.menubutton{
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 39px;
|
||||
background: #f0ecec;
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
width: 35px !important;
|
||||
height: 19px;
|
||||
box-shadow: 3px 0px 7px 0px #c5c2c2;
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.changeIcon{
|
||||
/* background: #c1c1c1; */
|
||||
width: 21px;
|
||||
/* height: 26px; */
|
||||
border-radius: 50% !important;
|
||||
position: relative;
|
||||
color: #7f8c8d;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.changeImgBtn{
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 65%;
|
||||
}
|
||||
.profileImg{
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
display: -webkit-inline-box;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
// background: transparent;
|
||||
border-radius: 69% !important;
|
||||
position: relative;
|
||||
top: 34px;
|
||||
// background: white;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.Text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line{
|
||||
|
||||
padding-top: 0px !important;
|
||||
/* margin-bottom: 0px; */
|
||||
/* margin: 0px; */
|
||||
border-right: 1px #c5c2c2 solid !important;
|
||||
line-height: 10px !important;
|
||||
|
||||
}
|
||||
.proTitles {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: white;
|
||||
margin-top: -33px;
|
||||
}
|
||||
|
||||
|
||||
.profileGrid{
|
||||
border: #bebbbb solid 1px;
|
||||
border-radius: 9px;
|
||||
padding: 0px;
|
||||
margin-top: 54px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: black;
|
||||
// font-weight: bold;
|
||||
background: white;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.lebl{
|
||||
|
||||
color: black;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold !important;
|
||||
padding-top: 9px;
|
||||
padding-left: 5px;
|
||||
|
||||
}
|
||||
.rowBolds{
|
||||
color: black !important;
|
||||
font-size: 14px !important;
|
||||
/* padding: 6px !important; */
|
||||
padding-bottom: 9px;
|
||||
padding-left: 5px;
|
||||
padding-top: 4px;
|
||||
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
<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>
|
||||
<p class="proTitles">{{ts.trPK('userProfile','performance')}}</p>
|
||||
|
||||
<div class="profilediv" (click)="openPersonalInfo()">
|
||||
<img class="profileImg" [src]="user_image">
|
||||
</div>
|
||||
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
|
||||
|
||||
|
||||
|
||||
<ion-grid>
|
||||
<div class="grid">
|
||||
<ion-row>
|
||||
<p class="Text">Performance Evaluation</p>
|
||||
|
||||
<div class="gauge">
|
||||
|
||||
|
||||
<ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100"
|
||||
[angleSpan]="240" [startAngle]="-120" [bigSegments]="5"
|
||||
[smallSegments]="10" (select)="onSelect($event)">
|
||||
</ngx-charts-gauge>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</ion-row>
|
||||
</div>
|
||||
|
||||
<!-- <div>
|
||||
<div *ngFor="let data of performanceData">
|
||||
<ion-row class="gridvalue">
|
||||
<ion-col >
|
||||
<div class="performancecolor" [style.background]="data.color"></div>
|
||||
<br>
|
||||
<label class="label"> Your Performance In </label>
|
||||
<label class="labelvalue"> {{data.value}} </label>
|
||||
<label class="label"> {{data.name}} </label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- class="gridvalue" -->
|
||||
<!-- ///// -->
|
||||
|
||||
<div>
|
||||
<div *ngIf="performanceData">
|
||||
<div >
|
||||
<ion-row >
|
||||
<ion-col *ngFor="let data of performanceData ;let i = index" [ngClass]="length % 2 != 0 && i == length - 1 ? 'rightgrid' : 'leftgrid'" >
|
||||
<div class="performancecolor" [style.background]="data.color"></div>
|
||||
<br>
|
||||
<label class="label"> Your Performance In </label>
|
||||
<label class="label"> {{data.name}} </label>
|
||||
<br>
|
||||
<label class="labelvalue"> {{data.value}} </label>
|
||||
<label class="percentage"> %</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</ion-grid>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</ion-content>
|
||||
@ -0,0 +1,144 @@
|
||||
|
||||
|
||||
|
||||
.colorBG{
|
||||
--background: #f0efef;
|
||||
}
|
||||
.header-div{
|
||||
text-transform: capitalize;
|
||||
background: #22C6B3;
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 160px;
|
||||
margin-bottom: 60px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.btnBack{
|
||||
background: var(--customnavy);
|
||||
white-space: normal;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
min-height: 45px;
|
||||
margin-top: -8px !important;
|
||||
}
|
||||
|
||||
.profilediv{
|
||||
|
||||
margin-left: 337px;
|
||||
}
|
||||
.profileImg{
|
||||
width: 25px;
|
||||
height: 24px;
|
||||
/* display: -webkit-inline-box; */
|
||||
/* display: inline-flex; */
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 90% !important;
|
||||
position: relative;
|
||||
top: -22px;
|
||||
// margin-left: 337px;
|
||||
|
||||
}
|
||||
|
||||
.proTitles {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: white;
|
||||
margin-top: -33px;
|
||||
}
|
||||
|
||||
.grid{
|
||||
|
||||
background-color: #f9f9f9;
|
||||
margin-top: 9px;
|
||||
margin-bottom: 7px !important;
|
||||
border-radius: 21px;
|
||||
margin-bottom: 26px;
|
||||
margin-left: 14px;
|
||||
margin-right: 14px;
|
||||
padding-bottom: 1px;
|
||||
border: solid #d7d4d4 !important;
|
||||
|
||||
}
|
||||
.Text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
margin-left: 74px;
|
||||
}
|
||||
|
||||
.leftgrid{
|
||||
margin-left: 10px;
|
||||
background: white;
|
||||
border: solid #d7d4d4;
|
||||
margin: 7px;
|
||||
border-radius: 24px;
|
||||
width: 30% !important;
|
||||
padding-bottom: 9px;
|
||||
padding-top: 11px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.rightgrid{
|
||||
margin-left: 10px;
|
||||
background: white;
|
||||
border: solid #d7d4d4;
|
||||
// margin: 7px;
|
||||
border-radius: 24px;
|
||||
width: 30% !important;
|
||||
padding-bottom: 9px;
|
||||
padding-top: 11px;
|
||||
padding-left: 10px;
|
||||
margin-right: 189px;
|
||||
|
||||
}
|
||||
|
||||
.performancecolor{
|
||||
border: solid #bebbbb 1px !important;
|
||||
border-radius: 13px;
|
||||
margin-top: 0px !important;
|
||||
height: 10px;
|
||||
padding-right: 8px !important;
|
||||
width: 65px;
|
||||
margin-bottom: -10px;
|
||||
|
||||
}
|
||||
|
||||
.label{
|
||||
|
||||
font-size: 13px !important;
|
||||
margin-top: -7px !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.labelvalue{
|
||||
font-size: 28px !important;
|
||||
font-weight: bold !important;
|
||||
margin-top: 7px !important;
|
||||
margin-left: 72px !important;
|
||||
}
|
||||
|
||||
.percentage{
|
||||
font-size: 15px !important;
|
||||
margin-top: 15px !important;
|
||||
|
||||
}
|
||||
|
||||
.gauge{
|
||||
transform: translate(-24px, -65px);
|
||||
margin-bottom: -187px;
|
||||
margin-top: -20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PerformanceEvaluationComponent } from './performance-evaluation.component';
|
||||
|
||||
describe('PerformanceEvaluationComponent', () => {
|
||||
let component: PerformanceEvaluationComponent;
|
||||
let fixture: ComponentFixture<PerformanceEvaluationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PerformanceEvaluationComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PerformanceEvaluationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,88 @@
|
||||
import { Component, OnInit, NgModule } from '@angular/core';
|
||||
import { Platform, Events, MenuController } from "@ionic/angular";
|
||||
import { CommonService } from "src/app/hmg-common/services/common/common.service";
|
||||
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
|
||||
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
|
||||
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
|
||||
import { PerformanceAppraisalResponse } from 'src/app/hmg-common/services/dashbored/performance-appraisal.response';
|
||||
// import { DomSanitizer } from '@angular/platform-browser';
|
||||
// import {NgxGaugeModule} from 'ngx-gauge';
|
||||
import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/models/authenticated-user";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-performance-evaluation',
|
||||
templateUrl: './performance-evaluation.component.html',
|
||||
styleUrls: ['./performance-evaluation.component.scss'],
|
||||
})
|
||||
export class PerformanceEvaluationComponent implements OnInit {
|
||||
personalInfo: any;
|
||||
user_image: any = "../assets/imgs/profile.png";
|
||||
setImage:any;
|
||||
view: any = [380, 450];
|
||||
public performanceData: any=[];
|
||||
public length;
|
||||
|
||||
|
||||
constructor( public ts: TranslatorService,
|
||||
public cs: CommonService,
|
||||
public DS :DashboredService,
|
||||
public authService: AuthenticationService,
|
||||
// private events: Events,
|
||||
// private sanitizer: DomSanitizer,
|
||||
|
||||
) {
|
||||
|
||||
// this.events.subscribe("img-change", displayImg => {
|
||||
// console.log("app compont: "+displayImg);
|
||||
// this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);
|
||||
|
||||
// });
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
colorScheme = {
|
||||
domain: ['#22C6B3', '#094875','#3CB9D5','#1FA269','#0D155E']
|
||||
};
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.getProfile();
|
||||
|
||||
this.performanceData = this.cs.sharedService.getSharedData(
|
||||
PerformanceAppraisalResponse.PERFORMANCE_DATA,
|
||||
true
|
||||
);
|
||||
console.log(this.performanceData.length);
|
||||
//i % 2 == 0
|
||||
this.length=this.performanceData.length;
|
||||
|
||||
for(let i=0;i<this.performanceData.length;i++){
|
||||
this.performanceData[i].color =this.colorScheme.domain[i];
|
||||
console.log( i+" : "+this.performanceData[i].name)
|
||||
|
||||
}
|
||||
console.log( this.performanceData[0].color)
|
||||
}
|
||||
|
||||
|
||||
|
||||
getProfile() {
|
||||
console.log("getProfile");
|
||||
this.authService
|
||||
.loadAuthenticatedUser()
|
||||
.subscribe((user: AuthenticatedUser) => {
|
||||
if (user) {
|
||||
this.personalInfo = user;
|
||||
this.user_image = user.EMPLOYEE_IMAGE
|
||||
? "data:image/png;base64," + user.EMPLOYEE_IMAGE
|
||||
: "../assets/imgs/profile.png";
|
||||
|
||||
|
||||
}});
|
||||
}
|
||||
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 853 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 815 B |
|
After Width: | Height: | Size: 975 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 864 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 999 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 984 B |
|
After Width: | Height: | Size: 759 B |