monthly-attendance design
parent
c069ae5282
commit
f3fdc1454f
@ -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,81 @@
|
||||
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';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-monthly-attendance',
|
||||
templateUrl: './monthly-attendance.component.html',
|
||||
styleUrls: ['./monthly-attendance.component.scss'],
|
||||
})
|
||||
export class MonthlyAttendanceComponent implements OnInit {
|
||||
gaugeType = "full";
|
||||
gaugeValue = 28.3;
|
||||
gaugeLabel = "Days";
|
||||
// gaugeAppendText = "km/hr";
|
||||
|
||||
|
||||
currentMonth: any;
|
||||
currentDate;
|
||||
|
||||
constructor(private cs: CommonService, public ts: TranslatorService, public sharedData: SharedDataService, public DS :DashboredService) { }
|
||||
ngOnInit() {}
|
||||
|
||||
ionViewWillEnter(){
|
||||
this.currentMonth = this.sharedData.getSharedData("currentMonth");
|
||||
}
|
||||
public options = {
|
||||
|
||||
cutoutPercentage: 80,
|
||||
|
||||
tooltips: { enabled: false },
|
||||
|
||||
legend: { display: false }
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
public data = {
|
||||
|
||||
datasets: [
|
||||
|
||||
{
|
||||
|
||||
data: [120,50],
|
||||
|
||||
backgroundColor: [
|
||||
|
||||
'#22c6b3',
|
||||
|
||||
'#094875',
|
||||
],
|
||||
|
||||
borderWidth: 2
|
||||
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
getSubordinatesAttStatus(){
|
||||
let request: GetSubordinatesAttdStatusRequest = new GetSubordinatesAttdStatusRequest();
|
||||
request.P_SCHEDULE_DATE_FROM="/Date(1578603600000+0300)/"; //test
|
||||
request.P_SCHEDULE_DATE_TO="/Date(1576011600000+0300)/";//test
|
||||
|
||||
this.DS.getSubordinatesAttStatus( request,()=> {console.log("Error ");} ).subscribe((result:GetSubordinatesAttdStatusResponse)=>{
|
||||
if (this.cs.validResponse(result)) {
|
||||
console.log("response");
|
||||
console.log(result);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
|
||||
<calendar #slider [dateFormatter]="calendar.dateFormatter" [lockSwipeToPrev]="lockSwipeToPrev"
|
||||
[monthviewEventDetailTemplate]="template" [eventSource]="eventsdata" [calendarMode]="calendar.mode"
|
||||
[currentDate]="currentAvailableAppoDate"
|
||||
(onCurrentDateChanged)="onCurrentDateChanged($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,208 @@
|
||||
import { Component, OnInit, Output } 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';
|
||||
@Component({
|
||||
selector: 'app-circle-calendar',
|
||||
templateUrl: './circle-calendar.component.html',
|
||||
styleUrls: ['./circle-calendar.component.scss'],
|
||||
})
|
||||
export class CircleCalendarComponent implements OnInit {
|
||||
eventsdata: any = [{
|
||||
startTime:new Date(new Date().getTime() +( 60000*60 * 24)),
|
||||
endTime: new Date(new Date().getTime() +( 60000*60 * 24)),
|
||||
isoTime:"09:00:00",
|
||||
allDay: false
|
||||
}];
|
||||
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;
|
||||
constructor(public sharedData: SharedDataService, public mod: ModalController) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.isFirst = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
getHeaderDay(date: any) {
|
||||
return this.weekDaysEnSort[date.getDay()];
|
||||
|
||||
}
|
||||
|
||||
|
||||
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");
|
||||
this.dateModal(this.currentDate);
|
||||
}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();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -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,70 @@
|
||||
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 x = this.TODAYDATE.split(" ")
|
||||
console.log(x)
|
||||
this.today = x[0];
|
||||
this.todayDate = x[1];
|
||||
this.monthDate = x[2];
|
||||
this.month = x[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