monthly-attendance design

MOE_DEV_NEW_TEMPORARY_DESIGN
enadhilal 6 years ago
parent c069ae5282
commit f3fdc1454f

@ -42,7 +42,7 @@
"input": "src/app/app.scss"
}
],
"scripts": [],
"scripts": ["node_modules/chart.js/dist/Chart.js"],
"es5BrowserSupport": true
},
"configurations": {

@ -1527,9 +1527,9 @@
"dev": true
},
"@types/webpack-sources": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.5.tgz",
"integrity": "sha512-zfvjpp7jiafSmrzJ2/i3LqOyTYTuJ7u1KOXlKgDlvsj9Rr0x7ZiYu5lZbXwobL7lmsRNtPXlBfmaUD8eU2Hu8w==",
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.6.tgz",
"integrity": "sha512-FtAWR7wR5ocJ9+nP137DV81tveD/ZgB1sadnJ/axUGM3BUVfRPx8oQNMtv3JNfTeHx3VP7cXiyfR/jmtEsVHsQ==",
"dev": true,
"requires": {
"@types/node": "*",
@ -2679,14 +2679,14 @@
}
},
"browserslist": {
"version": "4.8.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
"integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
"version": "4.8.5",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.5.tgz",
"integrity": "sha512-4LMHuicxkabIB+n9874jZX/az1IaZ5a+EUuvD7KFOu9x/Bd5YHyO0DIz2ls/Kl8g0ItS4X/ilEgf4T1Br0lgSg==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001017",
"electron-to-chromium": "^1.3.322",
"node-releases": "^1.1.44"
"caniuse-lite": "^1.0.30001022",
"electron-to-chromium": "^1.3.338",
"node-releases": "^1.1.46"
}
},
"browserstack": {
@ -2873,9 +2873,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001020",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001020.tgz",
"integrity": "sha512-yWIvwA68wRHKanAVS1GjN8vajAv7MBFshullKCeq/eKpK7pJBVDgFFEqvgWTkcP2+wIDeQGYFRXECjKZnLkUjA==",
"version": "1.0.30001023",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz",
"integrity": "sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==",
"dev": true
},
"canonical-path": {
@ -5482,9 +5482,9 @@
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"electron-to-chromium": {
"version": "1.3.333",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.333.tgz",
"integrity": "sha512-7MJfCpa/tmhqYy2lZ1NEbkSxH7q3KiZiepiSs2ayTPAweAjdzGXotij+7OKPPb3OwJD2ZuBKPrA2HIuuSi6ahw==",
"version": "1.3.340",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.340.tgz",
"integrity": "sha512-hRFBAglhcj5iVYH+o8QU0+XId1WGoc0VGowJB1cuJAt3exHGrivZvWeAO5BRgBZqwZtwxjm8a5MQeGoT/Su3ww==",
"dev": true
},
"elementtree": {
@ -7653,6 +7653,11 @@
"integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
"dev": true
},
"ionic2-calendar": {
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/ionic2-calendar/-/ionic2-calendar-0.5.8.tgz",
"integrity": "sha512-+8xy/cahkCzEJTYmsqkRiAXcn7FlSSXPM72nU/BKtDj6uNKBl/5Bqu6EoKT1z4YAc1cC3uOZSdSKv9smr4GNnA=="
},
"ionicons": {
"version": "4.6.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.6.3.tgz",
@ -9417,6 +9422,14 @@
"tslib": "^1.9.0"
}
},
"ngx-gauge": {
"version": "1.0.0-beta.10",
"resolved": "https://registry.npmjs.org/ngx-gauge/-/ngx-gauge-1.0.0-beta.10.tgz",
"integrity": "sha512-j/YOntC31Pe24Et0wooi1YOmkA11Xw5YzsdBUIvYtvikvO6jwQ5tKwHimP981QAWW3S6/FQ9y94Fd/auJfyGkw==",
"requires": {
"tslib": "^1.9.0"
}
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@ -9521,9 +9534,9 @@
}
},
"node-releases": {
"version": "1.1.45",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.45.tgz",
"integrity": "sha512-cXvGSfhITKI8qsV116u2FTzH5EWZJfgG7d4cpqwF8I8+1tWpD6AsvvGRKq2onR0DNj1jfqsjkXZsm14JMS7Cyg==",
"version": "1.1.47",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz",
"integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==",
"dev": true,
"requires": {
"semver": "^6.3.0"
@ -15195,9 +15208,9 @@
"dev": true
},
"readable-stream": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
"integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz",
"integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==",
"dev": true,
"requires": {
"inherits": "^2.0.3",

@ -101,9 +101,11 @@
"cordova.plugins.diagnostic": "^5.0.1",
"core-js": "^2.5.4",
"date-fns": "^1.30.1",
"ionic2-calendar": "^0.5.8",
"mx.ferreyra.callnumber": "0.0.2",
"ng2-file-upload": "^1.3.0",
"ng2-pdf-viewer": "^5.3.2",
"ngx-gauge": "^1.0.0-beta.10",
"npm": "^6.13.1",
"phonegap-plugin-barcodescanner": "^8.1.0",
"phonegap-plugin-multidex": "^1.0.0",

@ -16,6 +16,8 @@ import { FilePath } from "@ionic-native/file-path/ngx";
import { File } from "@ionic-native/file/ngx";
import { Base64 } from "@ionic-native/base64/ngx";
import { FirebaseX } from '@ionic-native/firebase-x/ngx';
import { NgCalendarModule } from 'ionic2-calendar';
@NgModule({
declarations: [AppComponent],
@ -27,7 +29,8 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx';
hardwareBackButton: true,
}),
AppRoutingModule,
HmgCommonModule
HmgCommonModule,
NgCalendarModule
],
providers: [
StatusBar,

@ -7,6 +7,8 @@ import { IonicModule } from '@ionic/angular';
import { AttendancePage } from './attendance.page';
import { HomeComponent } from './home/home.component';
import {MonthlyAttendanceComponent} from './monthly-attendance/monthly-attendance.component';
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
const routes: Routes = [
{
@ -16,6 +18,10 @@ const routes: Routes = [
{
path: 'home',
component: HomeComponent
},
{
path: 'monthlyAttendance',
component: MonthlyAttendanceComponent
}
]
}
@ -26,8 +32,9 @@ const routes: Routes = [
CommonModule,
FormsModule,
IonicModule,
HmgCommonModule,
RouterModule.forChild(routes)
],
declarations: [AttendancePage, HomeComponent]
declarations: [AttendancePage, HomeComponent, MonthlyAttendanceComponent]
})
export class AttendancePageModule {}

@ -0,0 +1,113 @@
<ion-header>
<ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<ion-title color="light">{{ts.trPK('attendance','attendance')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<div class="header-div">
<div class="header-div">
<p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p>
<ion-slides>
<ion-slide>
<ion-grid class="headerGrid">
<div style="color: black;">
<!-- <ngx-gauge
[type]="gaugeType"
[value]="gaugeValue"
[label]="gaugeLabel">
</ngx-gauge> -->
<div class="result-graph">
<div class="request-heading">
<span>Open Request Analysis</span>
</div>
<div class="result-text-container">
<h2>287</h2>
<span>TOTAL <br> OPEN REQUEST</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 79%;
bottom: 35px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;">
</div>
<div style="position: relative;
left: 79%;
bottom: 20px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
</div>
</div>
</ion-grid>
</ion-slide>
</ion-slides>
</div>
</div>
<div style="margin-top: 45%;">
<ion-grid>
<ion-row>
<ion-col>
<ion-grid class="labelGrid">
<ion-row>
<ion-col>
<label style="font-size: 13px;">SCHEDULE</label>
</ion-col>
<ion-col>
<h2 style="margin-left: 45%; font-size: 25px;">23</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<ion-row>
<ion-col>
<label style="font-size: 12px;">OFF DAYS</label>
</ion-col>
<ion-col>
<h2 style="margin-left: 45%; font-size: 25px;">08</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<label style="font-size: 13px;">NON ANALYZED</label>
<h2 style="margin-left: 45%; font-size: 25px;">01</h2>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid class="labelGrid">
<label style="font-size: 13px;">SHORTAGE HOURS</label>
<h2 style="margin-left: 45%; font-size: 25px;">03</h2>
</ion-grid>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div >
<ion-grid class="bodyGrid">
<app-circle-calendar></app-circle-calendar>
</ion-grid>
</div>
</ion-content>

@ -0,0 +1,242 @@
.colorBG {
--background: #f0efef;
}
.header-div {
background: #22c6b3;
color: var(--light);
text-transform: capitalize;
display: block;
position: relative;
height: 210px;
margin-bottom: 60px;
}
.chart-modal .modal-Wrapper {
--background: rgb(116, 108, 108) !important;
--border-color:white!important ;
width: 85%!important ;
height: 40px !important ;
}
.navbar{
font-size: 10px !important;
--background: #22C6B3 !important;
color: aliceblue !important;
// margin-top: 10px !important;
}
.menu{
// margin-left:330px !important;
margin-top: 0px !important;
font-size: 35px !important;
background: #22C6B3;
color: aliceblue;
margin-left: 0px !important;
}
.person{
margin-left:100px !important;
margin-top: 0px !important;
font-size: 23px !important;
background: #22C6B3 !important;
color: aliceblue !important;
}
.grid{
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 250px !important;
}
.headerGrid{
margin-bottom: 550px !important;
margin-top: 80px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 250px !important;
}
.bodyGrid{
margin-bottom: 550px !important;
margin-top: 20px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color:white !important;
border-radius: 20px !important;
height: 270px !important;
}
.labelGrid{
margin-top: -30px !important;
background-color:white !important;
border-radius: 20px !important;
height: 100px !important;
}
.ionSliders{
margin: 0px !important;
padding: 0px !important;
}
.ionSlide{
margin-top: 5px !important;
margin-left: 190px !important;
color: black !important;
}
.dateLable{
margin-left: 90px !important;
color: black !important;
font-size: small !important;
margin-top: 15px !important;
}
// h1{
// font-size: 15px !important;
// text-align: center !important;
// }
.arrowDropright{
margin-left:100px !important;
font-size: 20px !important;
color: rgb(168, 165, 165) !important;
margin-top: 15px !important;
}
.arrowDropleft{
font-size: 20px !important;
margin-left: 10px !important;
margin-top: 15px !important;
color: rgb(116, 108, 108) !important;
}
.ionLable{
font-size: 10px !important;
}
.number{
font-size: 18px !important;
font-weight: bolder !important;
color: black !important;
}
.header-div{
background:var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: #22C6B3;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color:var(--light);
text-transform: capitalize;
display: block;
position: relative;
height: 210px;
margin-bottom:60px;
// border-radius: 0px 0px 70px 70px;
}
.request-heading {
span {
text-align: center;
display: block;
padding-top: 8px;
font-family: workSans-Regular;
}
}
.result-graph {
position: relative;
background: white;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 38px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
}
}

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

@ -0,0 +1,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);
}
});
}
}

@ -103,6 +103,11 @@ import { AccordinTabCustomComponent} from './ui/accordin-custom/accordin-tab-cus
import{ConfirmLoginComponent} from '../authentication/confirm-login/confirm-login.component'
import{WelcomeComponent} from './ui/welcome-login/welcome.component'
import {DashboredService} from './services/dashbored/dashbored.service'
import { CircleCalendarComponent } from './ui/circle-calendar/circle-calendar.component';
import { NgCalendarModule } from 'ionic2-calendar';
import { NgxGaugeModule } from 'ngx-gauge';
import { DateInfoModalComponent } from './ui/circle-calendar/date-info-modal/date-info-modal.component';
import { ChartModule } from 'primeng/chart';
@NgModule({
imports: [
CommonModule,
@ -112,7 +117,10 @@ import {DashboredService} from './services/dashbored/dashbored.service'
HttpClientModule,
NgxChartsModule,
ListboxModule,
PdfViewerModule
PdfViewerModule,
NgCalendarModule,
NgxGaugeModule,
ChartModule
],
declarations: [
WelcomeComponent,
@ -170,7 +178,9 @@ import {DashboredService} from './services/dashbored/dashbored.service'
FileUploderProfileComponent,
AccordinTabCustomComponent,
AccordinCustomComponent,
ConfirmLoginComponent
ConfirmLoginComponent,
CircleCalendarComponent,
DateInfoModalComponent
],
exports: [
@ -226,7 +236,12 @@ import {DashboredService} from './services/dashbored/dashbored.service'
FileUploderProfileComponent,
AccordinTabCustomComponent,
AccordinCustomComponent,
ConfirmLoginComponent
ConfirmLoginComponent,
CircleCalendarComponent,
DateInfoModalComponent,
NgCalendarModule,
NgxGaugeModule,
ChartModule
],
providers: [
@ -270,7 +285,8 @@ import {DashboredService} from './services/dashbored/dashbored.service'
//PaymentService,
MenuService,
OpenNativeSettings
]
],
entryComponents: [DateInfoModalComponent],
})
export class HmgCommonModule { }

@ -1081,6 +1081,10 @@ export class CommonService {
this.nav.navigateForward(["/authentication/confirmLogin"]);
}
public openMonthlyAttendancePage() {
this.nav.navigateForward(["/attendance/monthlyAttendance"]);
}
public reload(url: string, from: string) {
console.log("force reload called from:" + from);
// window.location.reload();

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

@ -84,6 +84,14 @@
</button>
</ion-col>
<ion-col size="6" class="col-grid">
<button ion-button block class="serviceItem" (click)="openMonthly()">
<ion-img class="serviceItemImg" src="../assets/imgs/home/paySlip.png"></ion-img>
<p>Monthly Attendance</p>
</button>
</ion-col>
<!-- <ion-col size="6" class="col-grid">
<button ion-button block class="serviceItem" (click)="Change_password()">
<ion-img class="serviceItemImg" src="../assets/imgs/home/announcements.png"></ion-img>

@ -471,6 +471,10 @@ showAttendanceTracking(){
}
openMonthly(){
this.common.openMonthlyAttendancePage();
}

@ -9,5 +9,9 @@
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';
@import '../node_modules/primeng/resources/themes/nova-light/theme.css';
@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeicons/primeicons.css";
@import "theme/styles.scss";
@import "theme/worklist.scss";

@ -925,3 +925,66 @@ border:0px
// left: 0;
// width: 100%;
//
.monthview-primary-with-event {
background-color: #fff !important;
z-index: 1;
color: #fff !important;
position: relative;
}
.monthview-selected {
background-color: #76cfb7 !important;
color: #fff !important;
}
.advanced-search-modal {
--height: 12cm !important;
--width: 80% !important;
--border-radius: 0.4cm;
}
.monthview-datetable tbody td{
border:0 !important;
}
.monthview-primary-with-event::after {
content: " ";
width: 80%;
height: 3px;
background: #77cfb8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
color: #fff;
z-index: -1;
border-radius: 50%;
}
[dir=ltr] .monthview-container .swiper-slide,
[dir=rtl] .monthview-container .swiper-slide {
margin: 0 !important;
}
table.monthview-datetable th small {
font-size: 60%;
}

Loading…
Cancel
Save