add pull
commit
5421842188
File diff suppressed because it is too large
Load Diff
@ -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")
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
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 { attendanceSwipeScannerRequest } from '../models/attendanceSwipe.Request';
|
||||
@Injectable({
|
||||
providedIn: "root"
|
||||
})
|
||||
export class AttendanceService {
|
||||
public AttendanceSwipeURL : string ='Services/SWP.svc/REST/AuthenticateAndSwipeUser';
|
||||
constructor(
|
||||
public con: ConnectorService,
|
||||
public authService: AuthenticationService
|
||||
) {}
|
||||
public attendanceSwipeScanner(attendanceSwipeScanner: attendanceSwipeScannerRequest, onError?: any, errorLabel?: string): Observable<any> {
|
||||
const request = attendanceSwipeScanner;
|
||||
this.authService.authenticateRequest(request);
|
||||
return this.con.post(this.AttendanceSwipeURL,request,onError,errorLabel);
|
||||
}
|
||||
}
|
||||
@ -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: [
|
||||
'#094875'
|
||||
],
|
||||
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>
|
||||
<a class="image-container" href="tel:{{employeePhoneNumber}}">
|
||||
<img src="../assets/imgs/green_call_icon.png" >
|
||||
</a>
|
||||
</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,21 @@
|
||||
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;
|
||||
@Input() employeePhoneNumber: string;
|
||||
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
}
|
||||
@ -1,158 +1,282 @@
|
||||
<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">
|
||||
<a class="action-button-icon" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
|
||||
<img src="../assets/imgs/call_icon.png">
|
||||
</a>
|
||||
<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'"
|
||||
[employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER"
|
||||
(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,76 +1,82 @@
|
||||
<!-- <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'"
|
||||
[employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER"
|
||||
(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 +1,14 @@
|
||||
|
||||
.dynamicFields{
|
||||
width: 93%;
|
||||
border: #dbdbdb solid 1px;
|
||||
border-radius: 16px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.msgConfirm{
|
||||
text-align: center;
|
||||
font-size: 20px !important;
|
||||
// font-weight: bold;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue