new-time-card
commit
2f55272c91
@ -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,13 @@
|
||||
|
||||
<calendar #slider [dateFormatter]="calendar.dateFormatter"
|
||||
[monthviewEventDetailTemplate]="template"
|
||||
[calendarMode]="calendar.mode"
|
||||
[currentDate]="currentAvailableAppoDate"
|
||||
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onTimeSelected)="onDayClicked($event)">
|
||||
</calendar>
|
||||
|
||||
|
||||
<ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
|
||||
|
||||
</ng-template>
|
||||
|
||||
@ -0,0 +1,124 @@
|
||||
|
||||
|
||||
|
||||
// .modalCss .modal-Wrapper {
|
||||
// width: 600px;
|
||||
// height: 300px;
|
||||
// }
|
||||
|
||||
.chart-modal .modal-Wrapper {
|
||||
--background: rgb(116, 108, 108) !important;
|
||||
--border-color:white!important ;
|
||||
width: 85%!important ;
|
||||
height: 40px !important ;
|
||||
|
||||
}
|
||||
|
||||
.navbar{
|
||||
font-size: 10px !important;
|
||||
--background: #22C6B3 !important;
|
||||
color: aliceblue !important;
|
||||
// margin-top: 10px !important;
|
||||
|
||||
}
|
||||
|
||||
.menu{
|
||||
// margin-left:330px !important;
|
||||
margin-top: 0px !important;
|
||||
font-size: 35px !important;
|
||||
background: #22C6B3;
|
||||
color: aliceblue;
|
||||
margin-left: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
.person{
|
||||
|
||||
margin-left:100px !important;
|
||||
margin-top: 0px !important;
|
||||
font-size: 23px !important;
|
||||
background: #22C6B3 !important;
|
||||
color: aliceblue !important;
|
||||
|
||||
}
|
||||
|
||||
.grid{
|
||||
margin-bottom: 550px !important;
|
||||
margin-top: 20px !important;
|
||||
margin-left: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
background-color:white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.ionSliders{
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ionSlide{
|
||||
margin-top: 5px !important;
|
||||
margin-left: 190px !important;
|
||||
color: black !important;
|
||||
|
||||
}
|
||||
.dateLable{
|
||||
|
||||
margin-left: 90px !important;
|
||||
color: black !important;
|
||||
font-size: small !important;
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
// h1{
|
||||
// font-size: 15px !important;
|
||||
// text-align: center !important;
|
||||
// }
|
||||
.arrowDropright{
|
||||
margin-left:100px !important;
|
||||
font-size: 20px !important;
|
||||
color: rgb(168, 165, 165) !important;
|
||||
margin-top: 15px !important;
|
||||
|
||||
}
|
||||
.arrowDropleft{
|
||||
font-size: 20px !important;
|
||||
margin-left: 10px !important;
|
||||
margin-top: 15px !important;
|
||||
color: rgb(116, 108, 108) !important;
|
||||
}
|
||||
|
||||
.ionLable{
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.number{
|
||||
|
||||
font-size: 18px !important;
|
||||
font-weight: bolder !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.header-div{
|
||||
background:var(--primary);
|
||||
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
|
||||
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
|
||||
background: #22C6B3;
|
||||
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
|
||||
color:var(--light);
|
||||
text-transform: capitalize;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 210px;
|
||||
margin-bottom:60px;
|
||||
// border-radius: 0px 0px 70px 70px;
|
||||
}
|
||||
|
||||
.advanced-search-modal {
|
||||
--height: 12cm !important;
|
||||
--width: 80% !important;
|
||||
--border-radius: 0.4cm;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CircleCalendarComponent } from './circle-calendar.component';
|
||||
|
||||
describe('CircleCalendarComponent', () => {
|
||||
let component: CircleCalendarComponent;
|
||||
let fixture: ComponentFixture<CircleCalendarComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CircleCalendarComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CircleCalendarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,462 @@
|
||||
import { Component, OnInit, Output, Input, ViewChild, ElementRef, EventEmitter } from '@angular/core';
|
||||
import { TimeSlot } from './time.slot';
|
||||
import { SharedDataService } from '../../services/shared-data-service/shared-data.service';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { DateInfoModalComponent } from './date-info-modal/date-info-modal.component';
|
||||
import { MenuResponse } from '../../services/menu/models/menu-response';
|
||||
import * as moment from 'moment';
|
||||
import { CommonService } from '../../services/common/common.service';
|
||||
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
|
||||
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
|
||||
import { GetShiftDetailRequest } from 'src/app/time-card/service/models/get-shift-detail.request';
|
||||
import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-request';
|
||||
|
||||
@Component({
|
||||
selector: 'app-circle-calendar',
|
||||
templateUrl: './circle-calendar.component.html',
|
||||
styleUrls: ['./circle-calendar.component.scss'],
|
||||
})
|
||||
export class CircleCalendarComponent implements OnInit {
|
||||
@Input() eventsdateDayOff: any = [];
|
||||
@Input() eventsdateAttend: any = [];
|
||||
@Input() eventsdateAbsent: any = [];
|
||||
@Output() monthTitle = new EventEmitter();
|
||||
@Output() currentYear = new EventEmitter();
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////TIME AND DATE VALUES///////////////////////////////
|
||||
public monthName: any;
|
||||
public yearDate: any;
|
||||
public selEmp: string;
|
||||
public selMenu: MenuResponse = new MenuResponse();
|
||||
public respID: number;
|
||||
public menuType: any;
|
||||
public dayAndHoursPageNumber = 1;
|
||||
public selectedFilters: any = {};
|
||||
public selectedShiftFilter: any;
|
||||
public arrDaysAttendance: any = [];
|
||||
public arrDaysAbsent: any = [];
|
||||
public arrDaysOff: any = [];
|
||||
public selectedShift: any;
|
||||
public shiftDetailsData: any = [];
|
||||
public swipeDetailsData: any = [];
|
||||
public arrOfAllList: any = [];
|
||||
///////////////////////////////END//////////////////////////////////////////////////
|
||||
|
||||
|
||||
eventsdata: any = [];
|
||||
|
||||
calendarModes = [
|
||||
{ key: 'month', value: 'Month' },
|
||||
{ key: 'week', value: 'Week' },
|
||||
{ key: 'day', value: 'Day' },
|
||||
];
|
||||
|
||||
public calendar = {
|
||||
mode: this.calendarModes[0].key,
|
||||
currentDate: new Date(),
|
||||
currentAvailableAppoDate: new Date(),
|
||||
dateFormatter: {
|
||||
formatMonthViewDayHeader: (date: Date) => {
|
||||
return this.getHeaderDay(date);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
public currentAvailableAppoDate: any;
|
||||
public eventsInput: any = [];
|
||||
public events: TimeSlot[] = [];
|
||||
public selectedTime: string;
|
||||
public selectedDate: string;
|
||||
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
public lockSwipeToPrev: any = true;
|
||||
public currentDate: any;
|
||||
public selectedDateObject: any;
|
||||
public currentDateToSwipe: any;
|
||||
public activeMonth: any;
|
||||
isFirst: boolean;
|
||||
arrFutrueDays: any;
|
||||
eventsdateFutrue: any;
|
||||
detailData: any;
|
||||
constructor(
|
||||
public sharedData: SharedDataService,
|
||||
public mod: ModalController,
|
||||
public common: CommonService,
|
||||
public timeCardService: TimeCardService) { }
|
||||
@ViewChild("slider") slides: ElementRef;
|
||||
|
||||
ngOnInit() {
|
||||
this.isFirst = false;
|
||||
this.reRenderCalendar();
|
||||
}
|
||||
|
||||
|
||||
ngAfterViewInit() {
|
||||
setTimeout(() => {
|
||||
this.reRenderCalendar();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
|
||||
getHeaderDay(date: any) {
|
||||
return this.weekDaysEnSort[date.getDay()];
|
||||
|
||||
}
|
||||
|
||||
reRenderCalendar() {
|
||||
this.renderDate(this.eventsdateAbsent, 'absent');
|
||||
this.renderDate(this.eventsdateAttend, 'present');
|
||||
this.renderDate(this.eventsdateDayOff, 'dayoff');
|
||||
}
|
||||
|
||||
|
||||
dayClicked(data: any): void {
|
||||
|
||||
if (data.isPast) {
|
||||
this.eventsInput = [];
|
||||
this.selectedTime = null;
|
||||
} else {
|
||||
// At least one slot
|
||||
if (data.events.length > 0) {
|
||||
this.selectedDate = this.getDateISO(data.selectedTime);
|
||||
//TODO replace later later
|
||||
for (let i = 0; i < data.events.length; i++) {
|
||||
|
||||
}
|
||||
this.presentTimeSlots(data.events, data.selectedTime);
|
||||
this.currentDate = this.getHeaderDate(data.selectedTime);
|
||||
} else {
|
||||
this.eventsInput = [];
|
||||
this.selectedTime = null;
|
||||
}
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async presentTimeSlots(events: TimeSlot[], date: Date) {
|
||||
this.eventsInput = [];
|
||||
let index = 1;
|
||||
for (let event of events) {
|
||||
// event.end = this.cs.getKSATimeZone(event.end);
|
||||
this.eventsInput.push({
|
||||
name: 'radio' + index,
|
||||
type: 'radio',
|
||||
label: event.isoTime.substring(0, event.isoTime.length - 3),
|
||||
value: event,
|
||||
checked: index === 1
|
||||
});
|
||||
if (index == 1) {
|
||||
this.selectedTime = event.isoTime;
|
||||
this.selectedDateObject = new Date(event.end);
|
||||
|
||||
}
|
||||
++index;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public getDateISO(date: Date): string {
|
||||
return (
|
||||
date.getFullYear().toString() +
|
||||
"-" +
|
||||
this.trailerZero(date.getMonth() + 1) +
|
||||
"-" +
|
||||
this.trailerZero(date.getDate())
|
||||
);
|
||||
}
|
||||
|
||||
onCurrentDateChanged(event) {
|
||||
if (this.isFirst) {
|
||||
const today = new Date();
|
||||
this.currentDateToSwipe = event;
|
||||
if (this.calendar.mode === 'month') {
|
||||
if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
|
||||
this.lockSwipeToPrev = true;
|
||||
} else {
|
||||
this.lockSwipeToPrev = false;
|
||||
}
|
||||
}
|
||||
this.activeMonth = this.getHeaderMonth(event);
|
||||
this.currentDate = this.getHeaderDate(event);
|
||||
this.sharedData.setSharedData(this.activeMonth, "currentMonth");
|
||||
let dateData = this.currentDate.toString()
|
||||
dateData = dateData.split(" ")
|
||||
this.getDayHoursTypeDetails(dateData[2], dateData[3]);
|
||||
this.reRenderCalendar();
|
||||
} else {
|
||||
const today = new Date();
|
||||
this.currentDateToSwipe = event;
|
||||
if (this.calendar.mode === 'month') {
|
||||
if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
|
||||
this.lockSwipeToPrev = true;
|
||||
} else {
|
||||
this.lockSwipeToPrev = false;
|
||||
}
|
||||
}
|
||||
this.activeMonth = this.getHeaderMonth(event);
|
||||
this.currentDate = this.getHeaderDate(event);
|
||||
this.sharedData.setSharedData(this.activeMonth, "currentMonth");
|
||||
this.isFirst = true;
|
||||
}
|
||||
}
|
||||
|
||||
getHeaderDate(date: any) {
|
||||
|
||||
return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
|
||||
|
||||
}
|
||||
|
||||
private trailerZero(value: number): string {
|
||||
const str = value.toString();
|
||||
return str.length > 1 ? str : "" + str;
|
||||
}
|
||||
getHeaderMonth(date: any) {
|
||||
|
||||
return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
|
||||
|
||||
}
|
||||
|
||||
public getMonthName(value: number): string {
|
||||
switch (value) {
|
||||
case 1:
|
||||
return "January";
|
||||
case 2:
|
||||
return "February";
|
||||
case 3:
|
||||
return "March";
|
||||
case 4:
|
||||
return "April";
|
||||
case 5:
|
||||
return "May";
|
||||
case 6:
|
||||
return "June";
|
||||
case 7:
|
||||
return "July";
|
||||
case 8:
|
||||
return "August";
|
||||
case 9:
|
||||
return "September";
|
||||
case 10:
|
||||
return "October";
|
||||
case 11:
|
||||
return "November";
|
||||
case 12:
|
||||
return "December";
|
||||
}
|
||||
}
|
||||
|
||||
public async dateModal(todayDate) {
|
||||
const modal = await this.mod.create({
|
||||
component: DateInfoModalComponent,
|
||||
showBackdrop: true,
|
||||
backdropDismiss: true,
|
||||
componentProps: {
|
||||
TODAYDATE: todayDate
|
||||
}
|
||||
});
|
||||
modal.cssClass = "advanced-search-modal";
|
||||
await modal.present();
|
||||
}
|
||||
|
||||
public renderDate(arrayDays, cssClass) {
|
||||
const td = document.querySelectorAll(".swiper-slide-active .monthview-datetable td:not(.text-muted)");
|
||||
arrayDays.forEach(dateObj => {
|
||||
const date = dateObj.startTime;
|
||||
td.forEach(element => {
|
||||
// tslint:disable-next-line: triple-equals
|
||||
if (date.getDate() == element.textContent.trim()) {
|
||||
element.classList.add(cssClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onDayClicked(x) {
|
||||
// this.dateModal(this.currentDate);
|
||||
let fullDate;
|
||||
let arrOfFullDate;
|
||||
for (let i = 0; i < this.arrOfAllList.length; i++) {
|
||||
fullDate = this.arrOfAllList[i].SCHEDULE_DATE.split(" ")
|
||||
if (this.common.convertISODateToJsonDate(fullDate[0]) == this.common.convertISODateToJsonDate(this.getDateISO(x.selectedTime))) {
|
||||
arrOfFullDate = fullDate[0].split("/")
|
||||
this.showDetails(this.arrOfAllList, fullDate[0]);
|
||||
// console.log(arrOfFullDate[2])
|
||||
// this.getDayHoursTypeDetails(this.getMonthName(parseInt(arrOfFullDate[0])),parseInt(arrOfFullDate[2]),true, fullDate[0])
|
||||
} else {
|
||||
console.log("NOT match");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
getScheduleShiftDetails() {
|
||||
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
|
||||
GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.RTP_ID;
|
||||
GetShiftDetailRequestObject.P_PAGE_NUM = 1;
|
||||
GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
|
||||
console.log(GetShiftDetailRequestObject);
|
||||
this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => {
|
||||
if (this.common.validResponse(result)) {
|
||||
console.log(result);
|
||||
this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
getSwipesDetails() {
|
||||
const GetSwipesRequestObject = new GetSwipesRequest();
|
||||
GetSwipesRequestObject.P_SELECTED_EMPLOYEE_NUMBER = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
|
||||
GetSwipesRequestObject.P_SCHEDULE_DATE = this.common.convertISODateToJsonDate(this.selectedShift.SCHEDULE_DATE);
|
||||
GetSwipesRequestObject.P_PAGE_NUM = 1;
|
||||
GetSwipesRequestObject.P_PAGE_LIMIT = 10;
|
||||
this.timeCardService.getSwipes(GetSwipesRequestObject).subscribe((result) => {
|
||||
if (this.common.validResponse(result)) {
|
||||
console.log(result);
|
||||
this.swipeDetailsData = result.GetSwipesList;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////this function should be in common service/////////////////////////
|
||||
public getDayHoursTypeDetails(month, year) {
|
||||
this.monthTitle.emit(month);
|
||||
this.currentYear.emit(year);
|
||||
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
|
||||
this.monthName = month//moment().format('MMMM');
|
||||
this.yearDate = year//moment().format('YYYY');
|
||||
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
|
||||
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
|
||||
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
|
||||
this.menuType = this.selMenu.List_Menu.MENU_TYPE;
|
||||
|
||||
dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
|
||||
dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
|
||||
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
|
||||
dayAndHoursReqObj.SearchMonth = this.monthName;
|
||||
dayAndHoursReqObj.SearchYear = this.yearDate;
|
||||
dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
|
||||
dayAndHoursReqObj.P_PAGE_LIMIT = 100;
|
||||
|
||||
if (Object.keys(this.selectedFilters).length !== 0) {
|
||||
dayAndHoursReqObj.P_SHT_TYPE = this.selectedShiftFilter;
|
||||
dayAndHoursReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
|
||||
dayAndHoursReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
|
||||
}
|
||||
|
||||
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
|
||||
if (this.common.validResponse(result)) {
|
||||
this.arrOfAllList = result.GetDayHoursTypeDetailsList;
|
||||
this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
|
||||
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'calendarDateValue');
|
||||
// this.common.openTimeCardPage();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
showDetails(allData, date){
|
||||
let fullDate;
|
||||
for (let i = 0; i < allData.length; i++) {
|
||||
fullDate = allData[i].SCHEDULE_DATE.split(" ")
|
||||
if(fullDate[0] == date){
|
||||
this.detailData = allData[i]
|
||||
this.dateModal(this.detailData);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
countAllAttendDays(allDays) {
|
||||
this.eventsdateDayOff = [];
|
||||
this.eventsdateAttend = [];
|
||||
this.eventsdateAbsent = [];
|
||||
this.arrDaysOff = [];
|
||||
this.arrDaysAttendance = [];
|
||||
this.arrDaysAbsent = [];
|
||||
this.eventsdateFutrue = [];
|
||||
this.arrFutrueDays = [];
|
||||
|
||||
for (let i = 0; i < allDays.length; i++) {
|
||||
if (allDays[i].DAY_TYPE == "OFF") {
|
||||
//offDay
|
||||
this.arrDaysOff.push({
|
||||
startTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
endTime: new Date(allDays[i].SCHEDULE_DATE)
|
||||
});
|
||||
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && !allDays[i].REMARKS) {
|
||||
//attendace
|
||||
this.arrDaysAttendance.push({
|
||||
startTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
endTime: new Date(allDays[i].SCHEDULE_DATE)
|
||||
});
|
||||
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && allDays[i].REMARKS) {
|
||||
//absent
|
||||
this.arrDaysAbsent.push(
|
||||
{
|
||||
startTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
endTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
isoTime: "09:00:00",
|
||||
allDay: false
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.arrFutrueDays.push(
|
||||
{
|
||||
startTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
endTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
isoTime: "09:00:00",
|
||||
allDay: false
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
// this.common.sharedService.setSharedData(this.arrDaysOff,'calendarDayOffDateValue');
|
||||
// this.common.sharedService.setSharedData(this.arrDaysAttendance,'calendarAttendanceDateValue');
|
||||
// this.common.sharedService.setSharedData( this.arrDaysAbsent,'calendarDaysAbsentDateValue');
|
||||
this.eventsdateDayOff = this.arrDaysOff;
|
||||
this.eventsdateAttend = this.arrDaysAttendance;
|
||||
this.eventsdateAbsent = this.arrDaysAbsent;
|
||||
this.eventsdateFutrue = this.arrFutrueDays;
|
||||
this.reRenderCalendar();
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
<ion-grid class="headerGrid">
|
||||
<ion-row style="margin-left: -95px; margin-bottom: 1px;">
|
||||
<ion-col size="10">
|
||||
<div style="width: 100%;">
|
||||
<div class="result-graph">
|
||||
|
||||
<div class="request-heading">
|
||||
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="result-text-container">
|
||||
|
||||
<h2>74%</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 style="border: 1px gray solid; margin-left: -45px; text-align:center; width: 245%; border-radius: 5%; height: 100%;">
|
||||
<p style=" margin-bottom: -25px;">{{today}}</p>
|
||||
<p style="font-weight:bold ;font-size: 28px; margin-bottom: -16px;">{{todayDate}}</p>
|
||||
<p style=" margin-bottom: -15px;">{{monthDate}}</p>
|
||||
<p style=" margin-bottom: 2px;">{{month}}</p>
|
||||
<div style="background-color: gray;height: 26px;">
|
||||
<p>Permenent</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<div style="background-color: gray; height: 0.3px; margin-bottom: 60px;">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 20px;">19:00 - 07:00</p>
|
||||
<p style="position: relative; left: 25px; color: gray;">SHIFT TIME</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<div style="background-color: gray; height: 1px;"></div>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">11:30</p>
|
||||
<p style="position: relative; left: 20px; color: gray;">REGULAR</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<div style="background-color: gray; height: 0.3px;"></div>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">19:20</p>
|
||||
<p style="position: relative; left: 20px; color: gray;">CHECK-IN</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<div style="background-color: gray; height: 1px;"></div>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">7:50</p>
|
||||
<p style="position: relative; left: 40px; color: gray;">CHECK-OUT</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<!-- <div style="background-color: gray; height: 0.3px;"></div> -->
|
||||
</ion-grid>
|
||||
</div>
|
||||
<div style="background-color: gray;height: 100%;margin-left: 150px;margin-top: -60px;margin-right: 150px;">
|
||||
<ion-grid style="width: 140px;">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">00:20</p>
|
||||
<p style="position: relative; left: 30px; color: gray;">LATE-IN</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">00:30</p>
|
||||
<p style="position: relative; left: 30px; color: gray;">EXCESS</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">00:00</p>
|
||||
<p style="position: relative; left: 20px; color: gray;">SHORTAGE</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">00:00</p>
|
||||
<p style="position: relative; left: 40px; color: gray;">EARLY-OUT</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
.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 { 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,68 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { ModalController, NavParams } 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 {
|
||||
gaugeType = "full";
|
||||
gaugeValue = 28.3;
|
||||
gaugeLabel = "Days";
|
||||
@Input() TODAYDATE: any;
|
||||
today: any;
|
||||
todayDate: any;
|
||||
month: any;
|
||||
monthDate: any;
|
||||
|
||||
constructor(public modalController: ModalController, public navParams: NavParams) { }
|
||||
|
||||
ngOnInit() {
|
||||
let dateData = this.TODAYDATE.split(' ');
|
||||
console.log(dateData)
|
||||
this.today = dateData[0];
|
||||
this.todayDate = dateData[1];
|
||||
this.monthDate = dateData[2];
|
||||
this.month = dateData[3];
|
||||
console.log(this.todayDate);
|
||||
console.log(this.today);
|
||||
console.log(this.monthDate);
|
||||
console.log(this.month);
|
||||
}
|
||||
|
||||
|
||||
public options = {
|
||||
cutoutPercentage: 80,
|
||||
|
||||
tooltips: { enabled: false },
|
||||
|
||||
legend: { display: false }
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
public data = {
|
||||
|
||||
datasets: [
|
||||
|
||||
{
|
||||
|
||||
data: [120, 50],
|
||||
|
||||
backgroundColor: [
|
||||
|
||||
'#094875'
|
||||
],
|
||||
|
||||
borderWidth: 2
|
||||
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
export class TimeSlot {
|
||||
constructor(isoTime: string, startDate: string, end: string) {
|
||||
this.isoTime = isoTime;
|
||||
this.start = startDate;
|
||||
this.end = end;
|
||||
this.allDay = true;
|
||||
this.draggable = false;
|
||||
}
|
||||
|
||||
public eventTimeLabel() {
|
||||
return new Date(this.end).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
|
||||
}
|
||||
// event time in iso format
|
||||
isoTime: string;
|
||||
// start of event day
|
||||
start: string;
|
||||
// event date time
|
||||
end: string;
|
||||
allDay: boolean;
|
||||
draggable: boolean;
|
||||
}
|
||||
Loading…
Reference in New Issue