diff --git a/Mohem/package-lock.json b/Mohem/package-lock.json index fff46afa..d24e5843 100644 --- a/Mohem/package-lock.json +++ b/Mohem/package-lock.json @@ -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": { @@ -5613,9 +5613,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": { @@ -7784,6 +7784,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", @@ -9668,9 +9673,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" @@ -15771,9 +15776,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", diff --git a/Mohem/package.json b/Mohem/package.json index 67522aca..c75115de 100755 --- a/Mohem/package.json +++ b/Mohem/package.json @@ -101,6 +101,7 @@ "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", "ng-circle-progress": "^1.5.1", "ng2-file-upload": "^1.3.0", diff --git a/Mohem/src/app/app.module.ts b/Mohem/src/app/app.module.ts index f6013cf6..436caf2a 100644 --- a/Mohem/src/app/app.module.ts +++ b/Mohem/src/app/app.module.ts @@ -15,6 +15,9 @@ 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], entryComponents: [], @@ -25,7 +28,8 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; hardwareBackButton: true, }), AppRoutingModule, - HmgCommonModule + HmgCommonModule, + NgCalendarModule ], providers: [ StatusBar, diff --git a/Mohem/src/app/attendance/attendance.module.ts b/Mohem/src/app/attendance/attendance.module.ts index 851b4691..7d5acba4 100644 --- a/Mohem/src/app/attendance/attendance.module.ts +++ b/Mohem/src/app/attendance/attendance.module.ts @@ -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 {} diff --git a/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.html b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.html new file mode 100644 index 00000000..d1812a7d --- /dev/null +++ b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.html @@ -0,0 +1,113 @@ + + + + + + {{ts.trPK('attendance','attendance')}} + + + + + +
+
+

{{currentMonth}}

+ + + +
+ +
+ +
+ + Open Request Analysis + +
+ +
+ +

287

+ + TOTAL
OPEN REQUEST
+ +
+ + + +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + + + + + + + + + +

23

+
+
+
+
+ + + + + + + +

08

+
+
+
+
+ + + +

01

+
+
+ + + +

03

+
+
+
+
+
+
+ + + +
+
\ No newline at end of file diff --git a/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.scss b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.scss new file mode 100644 index 00000000..730bfcfe --- /dev/null +++ b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.scss @@ -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; + } + } + \ No newline at end of file diff --git a/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.spec.ts b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.spec.ts new file mode 100644 index 00000000..39779b1a --- /dev/null +++ b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.spec.ts @@ -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; + + 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(); + }); +}); diff --git a/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.ts b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.ts new file mode 100644 index 00000000..13b560f4 --- /dev/null +++ b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.ts @@ -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") + } + + + +} diff --git a/Mohem/src/app/eit/home/home.component.html b/Mohem/src/app/eit/home/home.component.html index 944ae6ef..2aedb05f 100644 --- a/Mohem/src/app/eit/home/home.component.html +++ b/Mohem/src/app/eit/home/home.component.html @@ -21,7 +21,6 @@
{{menuItem.PROMPT}} -
@@ -30,7 +29,7 @@ (click)="openPage(subPage)">  {{subPage.PROMPT}} - + diff --git a/Mohem/src/app/eit/home/home.component.ts b/Mohem/src/app/eit/home/home.component.ts index 75909a97..c7127fd1 100644 --- a/Mohem/src/app/eit/home/home.component.ts +++ b/Mohem/src/app/eit/home/home.component.ts @@ -55,6 +55,9 @@ export class HomeComponent implements OnInit { if (menuEntry.REQUEST_TYPE === 'PAYSLIP'){ this.cs.openPayslipPage(); } + if (menuEntry.REQUEST_TYPE === 'TIME_CARD') { + this.cs.openTimeCardPage(); + } } } diff --git a/Mohem/src/app/hmg-common/hmg-common.module.ts b/Mohem/src/app/hmg-common/hmg-common.module.ts index 5b7919e2..5eb6da7c 100644 --- a/Mohem/src/app/hmg-common/hmg-common.module.ts +++ b/Mohem/src/app/hmg-common/hmg-common.module.ts @@ -110,10 +110,12 @@ import {FabButtonComponent} from './ui/fab-button/fab-button.component' import { AttendScanService } from './services/attend-services/attend-scan.service'; import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; import { NgCircleProgressModule } from 'ng-circle-progress'; -import {ChartModule} from 'primeng/chart'; import { CardFilterComponent } from './ui/card-filter/card-filter.component'; import { EmployeeInformationComponent } from './ui/employee-information/employee-information.component'; - +import { CircleCalendarComponent } from './ui/circle-calendar/circle-calendar.component'; +import { NgCalendarModule } from 'ionic2-calendar'; +import { DateInfoModalComponent } from './ui/circle-calendar/date-info-modal/date-info-modal.component'; +import { ChartModule } from 'primeng/chart'; @NgModule({ imports: [ CommonModule, @@ -125,8 +127,9 @@ import { EmployeeInformationComponent } from './ui/employee-information/employee ListboxModule, PdfViewerModule, NgCircleProgressModule.forRoot(), - ChartModule, - NgxGaugeModule + NgCalendarModule, + NgxGaugeModule, + ChartModule ], declarations: [ FabButtonComponent, @@ -188,7 +191,11 @@ import { EmployeeInformationComponent } from './ui/employee-information/employee ServicesButtonComponent, ConfirmLoginComponent, CardFilterComponent, - EmployeeInformationComponent + EmployeeInformationComponent, + ConfirmLoginComponent, + CircleCalendarComponent, + DateInfoModalComponent + ], exports: [ FabButtonComponent, @@ -250,7 +257,14 @@ import { EmployeeInformationComponent } from './ui/employee-information/employee NgCircleProgressModule, ChartModule, CardFilterComponent, - EmployeeInformationComponent + EmployeeInformationComponent, + ConfirmLoginComponent, + CircleCalendarComponent, + DateInfoModalComponent, + NgCalendarModule, + NgxGaugeModule, + ChartModule + ], providers: [ AttendScanService, @@ -294,7 +308,8 @@ import { EmployeeInformationComponent } from './ui/employee-information/employee MenuService, OpenNativeSettings, BarcodeScanner - ] + ], + entryComponents: [DateInfoModalComponent], }) export class HmgCommonModule { } diff --git a/Mohem/src/app/hmg-common/services/common/common.service.ts b/Mohem/src/app/hmg-common/services/common/common.service.ts index d6bf1a7b..2b01c93a 100644 --- a/Mohem/src/app/hmg-common/services/common/common.service.ts +++ b/Mohem/src/app/hmg-common/services/common/common.service.ts @@ -1189,6 +1189,9 @@ public getMonthNameAr(value: number): string { public openPayslipPage() { this.nav.navigateForward(['/payslip/home']); } + public openTimeCardPage() { + this.nav.navigateForward(["/time-card/time-card-details"]); + } public openEarningsPage() { this.nav.navigateForward(['/payslip/Earnings']); } @@ -1206,6 +1209,10 @@ public getMonthNameAr(value: number): string { } + public navigatePage(path) { + this.nav.navigateForward([path]); + } + public reload(url: string, from: string) { console.log('force reload called from:' + from); // window.location.reload(); diff --git a/Mohem/src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest.ts b/Mohem/src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest.ts index 740656b8..858449b3 100644 --- a/Mohem/src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest.ts +++ b/Mohem/src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest.ts @@ -2,6 +2,9 @@ import { Request } from '../../../services/models/request' export class GetSubordinatesAttdStatusRequest extends Request{ //public static SHARED_DATA = ''; - public P_SCHEDULE_DATE_FROM :any; - public P_SCHEDULE_DATE_TO :any; + public P_SCHEDULE_DATE_FROM: any; + public P_SCHEDULE_DATE_TO: any; + public SearchMonth: string; + public SearchYear: number; + } \ No newline at end of file diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html new file mode 100644 index 00000000..07960e77 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html @@ -0,0 +1,14 @@ + + + + + + + + + \ No newline at end of file diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.scss b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.scss new file mode 100644 index 00000000..f265cb6e --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.scss @@ -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; + } \ No newline at end of file diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.spec.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.spec.ts new file mode 100644 index 00000000..7e402bac --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.spec.ts @@ -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; + + 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(); + }); +}); diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts new file mode 100644 index 00000000..8acfdf27 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts @@ -0,0 +1,470 @@ +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) { + console.log("onCurrentDateChanged"); + 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, shiftDetails) { + const modal = await this.mod.create({ + component: DateInfoModalComponent, + showBackdrop: true, + backdropDismiss: true, + componentProps: { + TODAYDATE: todayDate, + SHIFTDETAILS: shiftDetails + } + }); + modal.cssClass = "calendar-modal"; + await modal.present(); + } + + public renderDate(arrayDays, cssClass) { + const td = document.querySelectorAll(".swiper-slide-active .monthview-datetable td:not(.text-muted)"); + arrayDays.forEach(dateObj => { + const date = dateObj.startTime; + td.forEach(element => { + // tslint:disable-next-line: triple-equals + if (date.getDate() == element.textContent.trim()) { + element.classList.add(cssClass); + } + }); + }); + } + + onDayClicked(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(RTP_ID) { + const GetShiftDetailRequestObject = new GetShiftDetailRequest(); + GetShiftDetailRequestObject.P_RTP_ID = 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; + this.dateModal(this.detailData,result); + } + }); + } + + + 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] + console.log("date details:") + console.log(this.detailData); + this.getScheduleShiftDetails(this.detailData.RTP_ID); + } + } + } + + + + + 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(); + } + + + +} diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html new file mode 100644 index 00000000..03d27609 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html @@ -0,0 +1,176 @@ + + + +
+
+ +
+ + +
+ +
+ +

{{percentage}}

+ Completed



+
+ + + +
+
+
+ +
+ + + +

{{nameDay}}

+
+ +

{{day}}

+
+ +

{{nameMonth}}

+
+ +

{{year}}

+
+ +

{{ts.trPK('attendance','present')}}

+
+ + + + +
+
+
+
+ +
+ + + +

{{shiftTime}}

+ +

{{ts.trPK('attendance-tracking','shift-time')}}

+
+
+ +

{{scheduled}}

+ +

{{ts.trPK('attendance-tracking','regular')}}

+
+
+
+ + + +

{{startDate}}

+ +

{{ts.trPK('attendance-tracking','check-in')}}

+
+
+ +

{{endDate}}

+ +

{{ts.trPK('attendance-tracking','check-out')}}

+
+
+
+ + + +

{{lateIn}}

+ +

{{ts.trPK('attendance-tracking','late-in')}}

+
+
+ +

{{excess}}

+ +

{{ts.trPK('attendance-tracking','excess')}}

+
+
+
+ + + +

{{shortage}}

+ +

{{ts.trPK('attendance-tracking','shortage')}}

+
+
+ +

{{earlyOut}}

+ +

{{ts.trPK('attendance-tracking','early-out')}}

+
+
+
+ + + + + + + + + +
+
diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss new file mode 100644 index 00000000..c0ca54c1 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss @@ -0,0 +1,163 @@ +.result-text-container { + + // padding: 0; + + // margin: 0; + + // position: absolute; + + // left: 50%; + + // top: 50%; + + // display: block; + + // text-align: center; + + // transform: translate(-50%, -50%); +//////////////////////////here + padding: 0; + margin: 0; + position: absolute; + left: 58%; + top: 67%; + display: block; + text-align: center; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + + h2 { + + font-size: 25px; + + // font-family: WorkSans-Bold; + font-weight: bold; + + margin: 0 auto; + + line-height: 36px; + + } + + span { + + width: 125px; + + display: block; + + margin: 0 auto; + + font-size: 12px; + + font-family: workSans-Regular; + color: rgb(163, 163, 163) !important; + } +} + +.today-graph{ + display: block; + height: 127px; + width: 288px; +} +.amountlabel{ + color: black !important; + font-weight: bold !important; + font-size: 13px !important; +// border-top: 1px solid rgb(163, 163, 163) !important; + margin-left: 0px !important; + margin-bottom: -29px !important; +} + .rowlabel{ +color: rgb(163, 163, 163) !important; +font-size: 13px !important; +font-family: WorkSans-Bold; + } + .grid{ +padding-bottom: -20px !important; +padding-top: -20px !important; +height: 360px !important; + + } + .liftcol{ + // padding-top: 1px !important; + // padding-bottom: 1px !important; + border-right: 1px solid rgb(163, 163, 163) !important; + } + + .rightcol{ + + margin-left: 5px !important; + } + .gridrow{ + border-top: 1px solid rgb(163, 163, 163) !important; + margin-left: 19px; + margin-right: 12px; + } + + .div{ + // border: 1px solid #a3a3a3 !important; + // text-align: center; + // width: 274%; + // border-radius: 8%; + // height: 40%; + // margin-right: -11px; + border: 1px solid #a3a3a3 !important; + border-radius: 9px; + width: 241%; + margin-right: -226px; + + + } + .p0{ margin-bottom: -15px !important; + color: black !important; + margin-left: 24px; + font-weight: bold !important; + font-size: 17px !important; + margin-top: 8px; + + } + .p1{ + margin-bottom: -7px !important; + color: black !important; + /* margin-right: 25px !important; */ + font-family: WorkSans-Bold !important; + margin-left: 36px; + /* margin-bottom: -82px; */ + font-size: 33px; + margin-top: 10px; + } + .p2{ font-weight: bold !important; + font-size: 17px !important; + margin-bottom: 43px !important; + margin-top: 0px !important; + color: black !important; + font-weight: bold !important; + margin-left: 33px; + } + .p3{ /* margin-bottom: -72px !important; */ + color: black !important; + font-weight: bold !important; + font-size: 19px; + margin-top: -43px; + margin-left: 27px; + } + .p4{ margin-bottom: 56px !important; + margin-top: -26px !important; + color: black !important; + } + // .pdiv{background-color: gray;height: 26px;} + .p5{ + font-size: 14px; + text-align: center; + background-color: #094875; + color: white; + margin-top: -13px; + margin-bottom: -3px; + height: 21px; + width: 110px; + padding-top: 7px; + /* font-family: WorkSans-Bold !important; */ + padding-bottom: 21px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } \ No newline at end of file diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.spec.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.spec.ts new file mode 100644 index 00000000..ffb04f8b --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.spec.ts @@ -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; + + 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(); + }); +}); diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts new file mode 100644 index 00000000..3f3fb1d8 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts @@ -0,0 +1,234 @@ +import { Component, OnInit, Input, ViewChild } from '@angular/core'; +import { ModalController, NavParams, IonInfiniteScroll } from '@ionic/angular'; +import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; +// import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service'; + +@Component({ + selector: 'app-date-info-modal', + templateUrl: './date-info-modal.component.html', + styleUrls: ['./date-info-modal.component.scss'], +}) +export class DateInfoModalComponent implements OnInit { + [x: string]: any; + gaugeType = "full"; + gaugeValue = 28.3; + gaugeLabel = "Days"; + @Input() TODAYDATE: any; + @Input() SHIFTDETAILS:any; + today: any; + todayDate: any; + month: any; + monthDate: any; + excess: any; + shortage:any; + lateIn:any; + scheduled:any; + earlyOut:any; + shiftTime:any; + startDate:any; + endDate:any; + shift:any; + percentage:any; + data:any; + scheduleDate:any; + tests:any; + year: any; + nameMonth:any; + nameDay: any; + @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll; + // public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + + public options = { + cutoutPercentage: 85, + + tooltips: { enabled: false }, + + legend: { display: false } + + }; + + constructor(public modalController: ModalController, public navParams: NavParams, public ts:TranslatorService, + + ) { } + + ngOnInit() { + // this.shift =this.common.sharedService.getSharedData('shiftDetailsData'); + console.log(this.TODAYDATE.SCHEDULE_DATE.split(" ")[0].split(" ")) +//22/2/2019 + console.log(this.TODAYDATE.EXCESS_HRS) + + this.excess = this.TODAYDATE.EXCESS_HRS + console.log(this.TODAYDATE.LATE_IN_HRS) + this.lateIn = this.TODAYDATE.LATE_IN_HRS + console.log(this.TODAYDATE.SHORTAGE_HRS) + this.shortage = this.TODAYDATE.SHORTAGE_HRS + console.log(this.TODAYDATE.SCHEDULED_HRS) + this.scheduled = this.TODAYDATE.SCHEDULED_HRS + console.log(this.TODAYDATE.EARLY_OUT_HRS ) + this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS + this.scheduleDate = this.TODAYDATE. SCHEDULE_DATE + + console.log(this.TODAYDATE. SCHEDULE_DATE) + + + // console.log(this.SHIFTDETAILS) + // console.log(this.SHIFTDETAILS.SHT_NAME) + this.shiftTime= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_NAME + this.startDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_TIME + this.endDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_TIME + this.percentage=this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].PERCENTAGE + + this.percChart= this.percentage.substring(0,this.percentage.indexOf("%")); + let test = this.scheduleDate; + let splitdate =test.split(" "); + let date =splitdate[0]; + let test1 =date.split("/"); + console.log("" + test1); + this. month =test1[1]; + console.log("" + this.month); + this. year =test1[2]; + console.log("" + this.year); + this.day =test1[0]; + console.log("date: "+ date); + console.log("this.percChart: " +this.percChart); + + this.nameMonth=this.getMonthName(parseInt(this.month)) + console.log("" + this.nameMonth) + console.log("" + this.month) + + this.nameDay=this.getHeaderDay(new Date(date)) + console.log("" + this.nameDay) + + + // let testnamdeday=this.weekDaysEnSort[new Date(date).getDay()]; + + // console.log("testnamdeday" + testnamdeday) + + + let d = new Date(date); + let dayName = d.toString().split(' ')[0]; + + this.data = { + labels: ['percentage'], + datasets: [ + + { + + data: [this.percChart], + // data: [96], + backgroundColor: [ + '#22C6B3', + + // '#22C6B3' + ], + + borderWidth: 2 + + }] + + }; + + + + // this.startDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_DATETIME; + + // console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_TIME) + + + // console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_DATETIME ); + // this.endDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_DATETIME ; + + // console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_TIME ) + + // SHT_ACTUAL_START_DATETIME + // SHT_ACTUAL_START_TIME + // SHT_ACTUAL_END_DATETIME + // SHT_ACTUAL_END_TIME + + + //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 getMonthName(value: number): string { + switch (value) { + case 1: + return "Jan"; + case 2: + return "Feb"; + case 3: + return "Mar"; + case 4: + return "Apr"; + case 5: + return "May"; + case 6: + return "Jun"; + case 7: + return "Jul"; + case 8: + return "Aug"; + case 9: + return "Sep"; + case 10: + return "Oct"; + case 11: + return "Nov"; + case 12: + return "Dec"; + } + } + + getHeaderDay(date: any) { + // return this.weekDaysEnSort[date.getDay()]; + return this.weekDaysEn[date.getDay()]; + + } + // @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll; + // public options = { + // cutoutPercentage: 80, + + // tooltips: { enabled: false }, + + // legend: { display: false } + + // }; + + // + //return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear(); + // create muthod recive date + // them get day date.getDay() + // them get month name this.getMonthName(date.getMonth() + 1) + // date.getFullYear() + //implemeition this.getMonthName() + +//SCHEDULE_DATE: "2/1/2020 12:00:00 AM" +//GetDayHoursTypeDetailsList + + +// // date = {scheduleDate}; +// let a = date.split(" "); +// let date = a[0]; +//test=date.split("/") +// test[0] +// test[1] +// test[3] + + +// let date2 = date.split("/"); +// String part1 = parts[0]; +// String part2 = parts[1]; +// String part3 = parts[2]; + +} diff --git a/Mohem/src/app/hmg-common/ui/circle-calendar/time.slot.ts b/Mohem/src/app/hmg-common/ui/circle-calendar/time.slot.ts new file mode 100644 index 00000000..99760881 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/time.slot.ts @@ -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; +} diff --git a/Mohem/src/app/home/home.page.ts b/Mohem/src/app/home/home.page.ts index 9d9efb32..3a8e3ea5 100644 --- a/Mohem/src/app/home/home.page.ts +++ b/Mohem/src/app/home/home.page.ts @@ -15,24 +15,27 @@ import { attendanceSwipeScannerRequest } from './models/attendanceSwipe.Request' import { Response } from 'src/app/hmg-common/services/models/response'; import { AttendanceService } from './services/attendance.services'; import { LoginRequest } from '../hmg-common/services/authentication/models/login.request'; -import {FileUploaderComponent} from '../hmg-common/ui/file-uploader/file-uploader.component' -import { Camera} from '@ionic-native/Camera/ngx'; +import { FileUploaderComponent } from '../hmg-common/ui/file-uploader/file-uploader.component' +import { Camera } from '@ionic-native/Camera/ngx'; import { File } from '@ionic-native/file/ngx'; import { DomSanitizer } from '@angular/platform-browser'; import { SharedDataService } from '../hmg-common/services/shared-data-service/shared-data.service'; import { DevicePermissionsService } from '../hmg-common/services/device-permissions/device-permissions.service'; import { DashboredService } from '../hmg-common/services/dashbored/dashbored.service'; import { OrganizationSalariesResponse } from '../hmg-common/services/dashbored/organization-salaries.response'; -import { OpenMissingSwipesResponse} from '../hmg-common/services/dashbored/open-missing-swipes.response'; -import {PerformanceAppraisalResponse} from '../hmg-common/services/dashbored/performance-appraisal.response'; +import { OpenMissingSwipesResponse } from '../hmg-common/services/dashbored/open-missing-swipes.response'; +import { PerformanceAppraisalResponse } from '../hmg-common/services/dashbored/performance-appraisal.response'; import { AttendanceTrackingResponse } from '../hmg-common/services/dashbored/attendance-tracking.response'; import { OpenPeriodDatesResponse } from '../hmg-common/services/dashbored/models/openPeriodDatesResponse'; -import {GetSubordinatesAttdStatusRequest} from '../hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest'; -import {GetSubordinatesLeavesRequest} from '../hmg-common/services/dashbored/models/GetSubordinatesLeavesRequest' -import {GetOpenNotificationsResponse} from '../hmg-common/services/dashbored/models/GetOpenNotificationsResponse' -import {GetSubordinatesAttdStatusResponse} from '../hmg-common/services/dashbored/models/GetSubordinatesAttdStatusResponse' -import {GetSubordinatesLeavesResponse} from '../hmg-common/services/dashbored/models/GetSubordinatesLeavesResponse' +import { GetSubordinatesAttdStatusRequest } from '../hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest'; +import { GetSubordinatesLeavesRequest } from '../hmg-common/services/dashbored/models/GetSubordinatesLeavesRequest' +import { GetOpenNotificationsResponse } from '../hmg-common/services/dashbored/models/GetOpenNotificationsResponse' +import { GetSubordinatesAttdStatusResponse } from '../hmg-common/services/dashbored/models/GetSubordinatesAttdStatusResponse' +import { GetSubordinatesLeavesResponse } from '../hmg-common/services/dashbored/models/GetSubordinatesLeavesResponse' import { AccrualService } from '../accrual-balances/services/accrual.service'; +import { GetDayAndHoursDetailsRequest } from '../time-card/service/models/get-day-hours-type-details.request'; +import * as moment from 'moment'; +import { TimeCardService } from '../time-card/service/time-card.service'; @Component({ selector: 'app-home', @@ -106,8 +109,8 @@ export class HomePage implements OnInit { // ]; public slideOptsOne = { - slidesPerView: 3.5, - spaceBetween: 10 + slidesPerView: 3.5, + spaceBetween: 10 }; public slideOptsTwo = { slidesPerView: 3.2, @@ -122,7 +125,22 @@ export class HomePage implements OnInit { public displayTime: any; public menuEntries: any; public percent: any; - +/////////////////////////////////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 arrFutrueDays: any =[]; + +///////////////////////////////END////////////////////////////////////////////////// constructor( public ts: TranslatorService, public menu: MenuController, @@ -143,13 +161,16 @@ export class HomePage implements OnInit { private file: File, private permissions: DevicePermissionsService, public DS: DashboredService, - public accrualService: AccrualService + public accrualService: AccrualService, + ////////////////////////////////////////TIME AND DATE//////////////////////////// + public timeCardService: TimeCardService + /////////////////////END///////////////////////////////////////////////////////// ) { this.events.subscribe('img-change', displayImg => { this.userImage = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,' + displayImg); console.log('html saved img: ' + this.userImage); }); - } + } ngOnInit() { // this.getUserDetails(); @@ -174,7 +195,7 @@ export class HomePage implements OnInit { this.percent = 100 - ((this.remainingTime / this.scheduledTime) * 100); this.displayTime = this.getSecondsAsDigitalClock(this.remainingTime); this.startTimer(); - } + } startTimer() { this.runTimer = true; @@ -214,7 +235,7 @@ export class HomePage implements OnInit { getDeviceLocation() { const isVirtual = this.device.isVirtual; - if (isVirtual === true){ + if (isVirtual === true) { alert('emulater>>>>>>>' + isVirtual); alert('You are using virtual device'); return false; @@ -249,17 +270,17 @@ export class HomePage implements OnInit { } // getCount() { - // const req: any = {}; - // this.menuService.getNotificationCount(req).subscribe((result: any) => { - // if (this.common.validResponse(result)) { - // this.notBadge = - // result.GetOpenNotificationsNumList.P_OPEN_NOTIFICATIONS_NUM; - // if (this.notBadge <= 0) { - // this.notBadge = null; - // } - // this.events.publish("getNotCount", this.notBadge); - // } - // }); + // const req: any = {}; + // this.menuService.getNotificationCount(req).subscribe((result: any) => { + // if (this.common.validResponse(result)) { + // this.notBadge = + // result.GetOpenNotificationsNumList.P_OPEN_NOTIFICATIONS_NUM; + // if (this.notBadge <= 0) { + // this.notBadge = null; + // } + // this.events.publish("getNotCount", this.notBadge); + // } + // }); // } ionViewDidEnter() { @@ -293,64 +314,64 @@ export class HomePage implements OnInit { console.log(user); } }); - } + } - callDashboardServices() { - this.getMenu(); - this.setServicesPrivilage(); - this.openNotificationsDashbored(); - this.showOpenMissingSwipes(); - this.showAttendanceTracking(); - this.getAccrualBalance(); - } + callDashboardServices() { + this.getMenu(); + this.setServicesPrivilage(); + this.openNotificationsDashbored(); + this.showOpenMissingSwipes(); + this.showAttendanceTracking(); + this.getAccrualBalance(); + } - public Vacation_Rule() { - this.common.navigateForward('/vacation-rule/home'); - } + public Vacation_Rule() { + this.common.navigateForward('/vacation-rule/home'); + } - private getMenu() { - this.menuService.getMenu().subscribe((result: MenuResponse) => { - this.handleMenuResult(result); - }); - } + private getMenu() { + this.menuService.getMenu().subscribe((result: MenuResponse) => { + this.handleMenuResult(result); + }); + } - private handleMenuResult(result) { - if (this.common.validResponse(result)) { - if (this.common.hasData(result.List_Menu)) { - console.log('list menu'); - this.menuList = result.List_Menu; - this.getMenuDetails(); - } + private handleMenuResult(result) { + if (this.common.validResponse(result)) { + if (this.common.hasData(result.List_Menu)) { + console.log('list menu'); + this.menuList = result.List_Menu; + this.getMenuDetails(); } } + } - private accrualBalance() { - this.common.openAccuralPage(); - } + private accrualBalance() { + this.common.openAccuralPage(); + } - private changeImage() { - this.common.openChangeImagePage(); - } + private changeImage() { + this.common.openChangeImagePage(); + } - public getMenuDetails() { - const item = this.menuList[0]; - const selMenu: MenuResponse = new MenuResponse(); - selMenu.List_Menu = item; - selMenu.userid = this.userData.EMPLOYEE_NUMBER; - console.log('menu: ' + selMenu.List_Menu); - this.common.sharedService.setSharedData(selMenu, MenuResponse.SHARED_DATA); - this.getMenuEntries(item); - // if (item.MENU_TYPE === 'M') { - // this.common.openMyTeamPage(); - // // this.navCtrl.push("MySubordinatePage"); - // } else if (item.MENU_TYPE === 'S') { - // this.common.sharedService.setSharedData(item, 'mySpecList'); - // this.common.openMySpecialistPage(); - // // this.navCtrl.push('MySpecialistPage',{"mySpecList":item}); - // } else { - // this.getMenuEntries(item); - // } - } + public getMenuDetails() { + const item = this.menuList[0]; + const selMenu: MenuResponse = new MenuResponse(); + selMenu.List_Menu = item; + selMenu.userid = this.userData.EMPLOYEE_NUMBER; + console.log('menu: ' + selMenu.List_Menu); + this.common.sharedService.setSharedData(selMenu, MenuResponse.SHARED_DATA); + this.getMenuEntries(item); + // if (item.MENU_TYPE === 'M') { + // this.common.openMyTeamPage(); + // // this.navCtrl.push("MySubordinatePage"); + // } else if (item.MENU_TYPE === 'S') { + // this.common.sharedService.setSharedData(item, 'mySpecList'); + // this.common.openMySpecialistPage(); + // // this.navCtrl.push('MySpecialistPage',{"mySpecList":item}); + // } else { + // this.getMenuEntries(item); + // } + } openMyTeamPage() { this.common.openMyTeamPage(); @@ -373,113 +394,117 @@ export class HomePage implements OnInit { LoginRequest.NATIONALITY_CODE, false ); - request.P_SELECTED_EMPLOYEE_NUMBER = selEmpNo; - request.P_MENU_TYPE = item.MENU_TYPE; - request.NationalityCode = nationality; - // set emp and resp id - console.log('set data'); - this.common.sharedService.setSharedData( - selEmpNo, - MenuResponse.SHARED_SEL_EMP - ); - this.common.sharedService.setSharedData( - request.P_SELECTED_RESP_ID, - MenuResponse.SHARED_SEL_RESP_ID - ); - - this.eitService - .getMenuEntries(request) - .subscribe((result: MenuResponse) => { - this.handleMenuEntiresResult(result); - }); } + nationality = this.common.sharedService.getSharedData( + LoginRequest.NATIONALITY_CODE, + false + ); + request.P_SELECTED_EMPLOYEE_NUMBER = selEmpNo; + request.P_MENU_TYPE = item.MENU_TYPE; + request.NationalityCode = nationality; + // set emp and resp id + console.log('set data'); +this.common.sharedService.setSharedData( + selEmpNo, + MenuResponse.SHARED_SEL_EMP + ); +this.common.sharedService.setSharedData( + request.P_SELECTED_RESP_ID, + MenuResponse.SHARED_SEL_RESP_ID + ); + +this.eitService + .getMenuEntries(request) + .subscribe((result: MenuResponse) => { + this.handleMenuEntiresResult(result); + }); + } - sortMenuEntires(list) { - const tree = this.common.list_to_tree(list); - this.menuEntries = tree; - console.log(this.menuEntries); - this.common.sharedService.setSharedData(tree, 'menuEntries'); - // this.common.navigateForward("/eit/homepage"); - // this.common.openEITPage(); - } +sortMenuEntires(list) { + const tree = this.common.list_to_tree(list); + this.menuEntries = tree; + console.log(this.menuEntries); + this.common.sharedService.setSharedData(tree, 'menuEntries'); + // this.common.navigateForward("/eit/homepage"); + // this.common.openEITPage(); + } - private handleMenuEntiresResult(result) { - if (this.common.validResponse(result)) { - if (this.common.hasData(result.GetMenuEntriesList)) { - this.sortMenuEntires(result.GetMenuEntriesList); - } + private handleMenuEntiresResult(result) { + if (this.common.validResponse(result)) { + if (this.common.hasData(result.GetMenuEntriesList)) { + this.sortMenuEntires(result.GetMenuEntriesList); } } + } - parentFn($event: string) { - console.log($event); // this will output 'hello from child' - } +parentFn($event: string) { + console.log($event); // this will output 'hello from child' + } - private Change_password() { - this.common.openChangePassword(); - } + private Change_password() { + this.common.openChangePassword(); + } - private openPayslip() { - this.common.openPayslipPage(); - } + private openPayslip() { + this.common.openPayslipPage(); + } - private attendance() { - this.permissions.requestCameraAutherization().then(granted => { - this.camera = granted as boolean; - if (this.camera) { - this.scanCode(); - } - } - ); + private attendance() { + this.permissions.requestCameraAutherization().then(granted => { + this.camera = granted as boolean; + if (this.camera) { + this.scanCode(); + } } + ); + } - scanCode() { - this.barcodeScanner.scan().then(barcodeData => { - this.scannedResult = barcodeData; - this.deviceID = this.device.uuid; - this.swipeAttendance(); - }).catch(err => { - console.log('Error', err); - }); - } +scanCode() { + this.barcodeScanner.scan().then(barcodeData => { + this.scannedResult = barcodeData; + this.deviceID = this.device.uuid; + this.swipeAttendance(); + }).catch(err => { + console.log('Error', err); + }); + } - swipeAttendance() { - const request: attendanceSwipeScannerRequest = new attendanceSwipeScannerRequest(); - request.Latitude = this.lat; - request.Longitude = this.longt; - request.QRValue = this.scannedResult.text; - request.UID = this.deviceID; - request.UserName = this.userData.EMPLOYEE_NUMBER; - console.log(JSON.stringify(request)); - this.attendanceService - .attendanceSwipeScanner(request, () => { - console.log('Error inside in swipe attendance'); - }) - .subscribe((result: Response) => { - if (this.common.validResponse(result)) { - this.common.presentAlert(this.ts.trPK('home', 'swipeAlertSuccess')); - this.showAttendanceTracking(); - } - // else { - // this.common.presentAlert(this.ts.trPK('home', 'swipeAlertFailed')); - // } - }); - } + swipeAttendance() { + const request: attendanceSwipeScannerRequest = new attendanceSwipeScannerRequest(); + request.Latitude = this.lat; + request.Longitude = this.longt; + request.QRValue = this.scannedResult.text; + request.UID = this.deviceID; + request.UserName = this.userData.EMPLOYEE_NUMBER; + console.log(JSON.stringify(request)); + this.attendanceService + .attendanceSwipeScanner(request, () => { + console.log('Error inside in swipe attendance'); + }) + .subscribe((result: Response) => { + if (this.common.validResponse(result)) { + this.common.presentAlert(this.ts.trPK('home', 'swipeAlertSuccess')); + this.showAttendanceTracking(); + } else { + this.common.presentAlert(this.ts.trPK('home', 'swipeAlertFailed')); + } + }); + } - openPersonalInfo() { - this.common.openProfile(); - } +openPersonalInfo() { + this.common.openProfile(); + } -/*************************************Dashboards Services**********************************************************8 */ + /*************************************Dashboards Services**********************************************************8 */ - showOrganizationSalaries() { - this.DS.getOrganizationSalaries() .subscribe((result: OrganizationSalariesResponse ) => { +showOrganizationSalaries() { + this.DS.getOrganizationSalaries().subscribe((result: OrganizationSalariesResponse) => { }); } - showOpenMissingSwipes() { - this.DS.getOpenMissingSwipes() .subscribe((result: OpenMissingSwipesResponse) => { +showOpenMissingSwipes() { + this.DS.getOpenMissingSwipes().subscribe((result: OpenMissingSwipesResponse) => { if (this.common.validResponse(result)) { const key = 'GetOpenMissingSwipesList'; this.statsButtons[2].statsValue = result[key].P_OPEN_MISSING_SWIPES; @@ -487,12 +512,12 @@ export class HomePage implements OnInit { }); } - showPerformanceAppraisal() { - this.DS.getPerformanceAppraisal() .subscribe((result: PerformanceAppraisalResponse) => { +showPerformanceAppraisal() { + this.DS.getPerformanceAppraisal().subscribe((result: PerformanceAppraisalResponse) => { }); } - convertInSeconds(time: any) { +convertInSeconds(time: any) { const hours = parseInt(time[0], 10); const minutes = parseInt(time[1], 10); let seconds = parseInt(time[2], 10); @@ -500,7 +525,7 @@ export class HomePage implements OnInit { return seconds; } - convertAndAssignTime(data) { +convertAndAssignTime(data) { console.log(data); this.remainingTime = this.convertInSeconds(data.P_REMAINING_HOURS.split(':')); this.scheduledTime = this.convertInSeconds(data.P_SCHEDULED_HOURS.split(':')); @@ -508,8 +533,8 @@ export class HomePage implements OnInit { this.initTimer(); } - showAttendanceTracking() { - this.DS.getAttendanceTracking() .subscribe((result: AttendanceTrackingResponse) => { +showAttendanceTracking() { + this.DS.getAttendanceTracking().subscribe((result: AttendanceTrackingResponse) => { if (this.common.validResponse(result)) { const key = 'GetAttendanceTrackingList'; this.convertAndAssignTime(result[key]); @@ -517,16 +542,16 @@ export class HomePage implements OnInit { }); } - openPeriodDateDashbored() { - this.DS.getOpenPeriodDates( () => {console.log('Error '); } ).subscribe((result: OpenPeriodDatesResponse) => { +openPeriodDateDashbored() { + this.DS.getOpenPeriodDates(() => { console.log('Error '); }).subscribe((result: OpenPeriodDatesResponse) => { if (this.common.validResponse(result)) { console.log('response'); } }); } - openNotificationsDashbored() { // work list - this.DS.getOpenNotifications( () => { console.log('Error '); }).subscribe((result: GetOpenNotificationsResponse) => { +openNotificationsDashbored() { // work list + this.DS.getOpenNotifications(() => { console.log('Error '); }).subscribe((result: GetOpenNotificationsResponse) => { if (this.common.validResponse(result)) { const key = 'P_OPEN_NTF_NUMBER'; this.statsButtons[0].statsValue = result[key]; @@ -535,11 +560,11 @@ export class HomePage implements OnInit { }); } - getSubordinatesLeaves() { +getSubordinatesLeaves() { const request: GetSubordinatesLeavesRequest = new GetSubordinatesLeavesRequest(); request.P_DATE_FROM = '/Date(1578603600000+0300)/'; // test request.P_DATE_TO = '/Date(1576011600000+0300)/'; // test - this.DS.getSubordinatesLeaves( request, () => {console.log('Error '); } ).subscribe((result: GetSubordinatesLeavesResponse) => { + this.DS.getSubordinatesLeaves(request, () => { console.log('Error '); }).subscribe((result: GetSubordinatesLeavesResponse) => { if (this.common.validResponse(result)) { console.log('response'); console.log(result); @@ -548,11 +573,11 @@ export class HomePage implements OnInit { } - getSubordinatesAttStatus() { +getSubordinatesAttStatus() { const 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) => { + this.DS.getSubordinatesAttStatus(request, () => { console.log('Error '); }).subscribe((result: GetSubordinatesAttdStatusResponse) => { if (this.common.validResponse(result)) { console.log('response'); console.log(result); @@ -560,7 +585,7 @@ export class HomePage implements OnInit { }); } - openPage(subMenu) { +openPage(subMenu) { let selMenu: MenuResponse = new MenuResponse(); selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false); selMenu.GetMenuEntriesList = subMenu; @@ -573,49 +598,144 @@ export class HomePage implements OnInit { if (subMenu.REQUEST_TYPE === 'PAYSLIP') { this.common.openPayslipPage(); } + if (subMenu.REQUEST_TYPE === 'TIME_CARD') { + this.getDayHoursTypeDetails(); + } } - getAccrualBalance() { - const today = new Date(); - const day = today.getDate(); - const month = today.getMonth() + 1; - const year = today.getFullYear(); - const todayDate = month + '/' + day + '/' + year; - const effectiveDate = todayDate; - const request = { - P_SELECTED_EMPLOYEE_NUMBER: this.userData.EMPLOYEE_NUMBER, - P_EFFECTIVE_DATE: effectiveDate - }; - this.accrualService - .getAccrualBalances(request) - .subscribe((result: any) => { - if (this.common.validResponse(result)) { - let totalTicketsLeft = 0; - for (const accrualBalance of result.GetAccrualBalancesList) { - if (accrualBalance.ACCURAL_PLAN_NAME === 'HMG Annual Vacation Accrual Plan') { - this.statsButtons[3].statsValue = accrualBalance.ACCRUAL_NET_ENTITLEMENT; - } else { - totalTicketsLeft = totalTicketsLeft + accrualBalance.ACCRUAL_NET_ENTITLEMENT; - } +getAccrualBalance() { + const today = new Date(); + const day = today.getDate(); + const month = today.getMonth() + 1; + const year = today.getFullYear(); + const todayDate = month + '/' + day + '/' + year; + const effectiveDate = todayDate; + const request = { + P_SELECTED_EMPLOYEE_NUMBER: this.userData.EMPLOYEE_NUMBER, + P_EFFECTIVE_DATE: effectiveDate + }; + this.accrualService + .getAccrualBalances(request) + .subscribe((result: any) => { + if (this.common.validResponse(result)) { + let totalTicketsLeft = 0; + for (const accrualBalance of result.GetAccrualBalancesList) { + if (accrualBalance.ACCURAL_PLAN_NAME === 'HMG Annual Vacation Accrual Plan') { + this.statsButtons[3].statsValue = accrualBalance.ACCRUAL_NET_ENTITLEMENT; + } else { + totalTicketsLeft = totalTicketsLeft + accrualBalance.ACCRUAL_NET_ENTITLEMENT; } - this.statsButtons[4].statsValue = totalTicketsLeft; } - }); + this.statsButtons[4].statsValue = totalTicketsLeft; + } + }); } - openattentracking() { +openattentracking() { this.common.openAttenTrackingpage(); } - openProfilePage() { +openProfilePage() { this.common.openEditProfile(); } - openStatsButton(link: string) { +openStatsButton(link: string) { console.log(link); this.common.openPage(link); } + + + + + + + //////calling time and date to load it in calendar/////// + public getDayHoursTypeDetails() { + const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest(); + this.monthName = moment().format('MMMM'); + this.yearDate = 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.countAllAttendDays(result.GetDayHoursTypeDetailsList); + // this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'calendarDateValue'); + this.common.openTimeCardPage(); + } + }); + + } + + + + +countAllAttendDays(allDays) { + 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.common.sharedService.setSharedData( this.arrFutrueDays,'calendarDaysFutrueDateValue'); + } + } + + + diff --git a/Mohem/src/app/time-card/home/home.component.html b/Mohem/src/app/time-card/home/home.component.html index afc16a36..f853e899 100644 --- a/Mohem/src/app/time-card/home/home.component.html +++ b/Mohem/src/app/time-card/home/home.component.html @@ -1,3 +1,34 @@ -

- home works! -

+ + + + + + Time and Attendance + + + + +
+ + + + + + + + +

{{timeCard.heading}}

+ {{timeCard.description}} +
+ + + +
+
+
+
+
+
diff --git a/Mohem/src/app/time-card/home/home.component.scss b/Mohem/src/app/time-card/home/home.component.scss index e69de29b..1477aa51 100644 --- a/Mohem/src/app/time-card/home/home.component.scss +++ b/Mohem/src/app/time-card/home/home.component.scss @@ -0,0 +1,59 @@ +ion-header{ + overflow: hidden; +} +ion-content{ + --ion-background-color: #f2f2f3; +} + +ion-card-content { + padding: 0px; +} + +ion-card { + box-shadow: none !important; + background-color: white; + margin-bottom: 15px; +} +ion-header { + background: #f2f2f3; +} +ion-title{ + text-align: center; + font-family: WorkSans-Bold; + font-size: 18px; +} +.time-card-home-container{ + margin-right: 10px; + margin-left: 10px; + margin-top: 20px +} +.header-toolbar-new{ + --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%); + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; +} + +.time-card-image{ + padding: 10px; +} +.time-card-details{ + padding: 0px; + margin-top: 25px; + line-height: 10px; +} + +.time-card-heading{ + font-weight: bold; + font-size: 13px; + color: #666666; + font-family: WorkSans-Bold; +} + +.time-card-description{ + font-size: 10px; +} + +.time-card-rightIcon{ + padding: 8px; + margin-top: 18px; +} diff --git a/Mohem/src/app/time-card/home/home.component.ts b/Mohem/src/app/time-card/home/home.component.ts index a7aad8ad..a33764ae 100644 --- a/Mohem/src/app/time-card/home/home.component.ts +++ b/Mohem/src/app/time-card/home/home.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; @Component({ selector: 'app-home', @@ -7,8 +8,38 @@ import { Component, OnInit } from '@angular/core'; }) export class HomeComponent implements OnInit { - constructor() { } + public timeCardOptions: any = [ + { + imageName: 'MyTimeCard.png', + heading: 'My Time Card', + description: 'View your attendance records.', + pageLink: '/time-card/time-card-details' + }, + { + imageName: 'Timeback.png', + heading: 'Time Back', + description: 'View and use your extra work time.', + pageLink: '/time-card/home' + }, + { + imageName: 'MissingSwipe.png', + heading: 'Missing Swipe', + description: 'Resolve swipe and attendance records', + pageLink: '/time-card/home' + }, + { + imageName: 'WorkOnBreak.png', + heading: 'Work on Break', + description: 'Record your work time in during break.', + pageLink: '/time-card/home' + } + ]; + + constructor(public common: CommonService) {} ngOnInit() {} + public openDetailPage(path) { + this.common.navigatePage(path); + } } diff --git a/Mohem/src/app/time-card/select-period/select-period.component.html b/Mohem/src/app/time-card/select-period/select-period.component.html new file mode 100644 index 00000000..0bc9515f --- /dev/null +++ b/Mohem/src/app/time-card/select-period/select-period.component.html @@ -0,0 +1,61 @@ + + +
+ + + +
+ Date From + +
+
+ + +
+ Date To + +
+
+
+
+ +
+ + {{filter.name}} + +
+ + + + + Shift type + + + {{shift.SHT_TYPE_DESC}} + + + + + + Search +
diff --git a/Mohem/src/app/time-card/select-period/select-period.component.scss b/Mohem/src/app/time-card/select-period/select-period.component.scss new file mode 100644 index 00000000..038155ad --- /dev/null +++ b/Mohem/src/app/time-card/select-period/select-period.component.scss @@ -0,0 +1,30 @@ +.footer-modal-button{ + position: absolute; + bottom: 0; + color: white; + width: 100%; + text-align: center; + } + .footer-modal-button button{ + font-size: 20px; + background: white; + line-height: 2; + } + .filters-container{ + display: inline-block; + text-align: center; + margin-top: 10px; + } + .filter-tag-button{ + display: inline-block; + border-radius: 5px; + border: 2px solid #A3D077; + color: #606161; + text-align: center; + font-size: 18px; + padding: 5px; + margin: 5px; + } + .filters-container .selected { + background-color: #d4f0e4; + } \ No newline at end of file diff --git a/Mohem/src/app/time-card/select-period/select-period.component.spec.ts b/Mohem/src/app/time-card/select-period/select-period.component.spec.ts new file mode 100644 index 00000000..bde45178 --- /dev/null +++ b/Mohem/src/app/time-card/select-period/select-period.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SelectPeriodComponent } from './select-period.component'; + +describe('SelectPeriodComponent', () => { + let component: SelectPeriodComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SelectPeriodComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SelectPeriodComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mohem/src/app/time-card/select-period/select-period.component.ts b/Mohem/src/app/time-card/select-period/select-period.component.ts new file mode 100644 index 00000000..5ecc7a18 --- /dev/null +++ b/Mohem/src/app/time-card/select-period/select-period.component.ts @@ -0,0 +1,128 @@ +import { Component, OnInit } from '@angular/core'; +import { ModalController, NavParams } from '@ionic/angular'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { TimeCardService } from 'src/app/time-card/service/time-card.service'; + +@Component({ + selector: 'app-select-period', + templateUrl: './select-period.component.html', + styleUrls: ['./select-period.component.scss'], +}) +export class SelectPeriodComponent implements OnInit { + public shiftTypesArray: any = []; + public dateFrom: any; + public dateTo: any; + public selectedShiftType: any; + + public filtersArray: any = [ + { + name: 'Excess', + active: false, + key: 'P_EXCESS_FLAG', + value: '' + }, + { + name: 'Timeback', + active: false, + key: 'P_TIMEBACK_FLAG', + value: '' + }, + { + name: 'Comp Off', + active: false, + key: 'P_COMP_OFF_FLAG', + value: '' + }, + { + name: 'Non scheduled', + active: false, + key: 'P_NON_SCHEDULED_FLAG', + value: '' + }, + { + name: 'Late In', + active: false, + key: 'P_LATE_IN_FLAG', + value: '' + }, + { + name: 'Early Out', + active: false, + key: 'P_EARLY_OUT_FLAG', + value: '' + }, + { + name: 'Shortage', + active: false, + key: 'P_SHORTAGE_FLAG', + value: '' + }, + { + name: 'Missing Swipe', + active: false, + key: 'P_MISSING_SWIPE_FLAG', + value: '' + }, + { + name: 'Work On Break', + active: false, + key: 'P_ACTUAL_WOB_SEC', + value: '' + }, + { + name: 'Analyzed', + active: false, + key: 'P_ANALAYZED_FLAG', + value: '' + }, + { + name: 'Approved Timeback', + active: false, + key: 'P_APPR_TIMEBACK_FLAG', + value: '' + }, + ]; + constructor( + public modalController: ModalController, + public common: CommonService, + public timeCardService: TimeCardService, + public navParams: NavParams) { } + + ngOnInit() { + this.getShiftTypes(); + this.dateFrom = this.navParams.get('dateFrom'); + this.dateTo = this.navParams.get('dateTo'); + } + + public dismissModal() { + const selectedFilters: any = {}; + for (const filter of this.filtersArray) { + selectedFilters[filter.key] = filter; + } + this.modalController.dismiss({ + dismissed: true, + keySelectedFilters: selectedFilters, + selectedShiftType: this.selectedShiftType, + dateFrom: this.dateFrom, + dateTo: this.dateTo + }); + } + + public changeFiltersSelection(i: any) { + this.filtersArray[i].active = !this.filtersArray[i].active; + if (this.filtersArray[i].active) { + this.filtersArray[i].value = 'Y'; + } else { + this.filtersArray[i].value = ''; + } + } + + public getShiftTypes() { + this.timeCardService.getShiftType().subscribe((result) => { + if (this.common.validResponse(result)) { + this.shiftTypesArray = result.GetShiftTypesList; + } + }); + } + +} diff --git a/Mohem/src/app/time-card/service/models/get-day-hours-type-details.request.ts b/Mohem/src/app/time-card/service/models/get-day-hours-type-details.request.ts index 987dc09c..2bca5468 100644 --- a/Mohem/src/app/time-card/service/models/get-day-hours-type-details.request.ts +++ b/Mohem/src/app/time-card/service/models/get-day-hours-type-details.request.ts @@ -5,8 +5,8 @@ export class GetDayAndHoursDetailsRequest extends Request { public P_SELECTED_EMPLOYEE_NUMBER: string; public P_MENU_TYPE: string; public P_SELECTED_RESP_ID: number; - public P_SCHEDULE_DATE_FROM: DateTimeInput; - public P_SCHEDULE_DATE_TO: DateTimeInput; + public P_SCHEDULE_DATE_FROM: string; + public P_SCHEDULE_DATE_TO: string; public P_EXCESS_FLAG: string; public P_TIMEBACK_FLAG: string; public P_COMP_OFF_FLAG: string; @@ -21,4 +21,6 @@ export class GetDayAndHoursDetailsRequest extends Request { public P_ACTUAL_WOB_SEC: string; public P_PAGE_NUM: number; public P_PAGE_LIMIT: number; + public SearchMonth: string; + public SearchYear: number; } diff --git a/Mohem/src/app/time-card/service/models/get-swipes-request.ts b/Mohem/src/app/time-card/service/models/get-swipes-request.ts index 006f16e3..b0afbf15 100644 --- a/Mohem/src/app/time-card/service/models/get-swipes-request.ts +++ b/Mohem/src/app/time-card/service/models/get-swipes-request.ts @@ -3,7 +3,7 @@ import { DateTimeInput } from "src/app/uI-elements/date-time.input"; export class GetSwipesRequest extends Request { public P_SELECTED_EMPLOYEE_NUMBER: string; - public P_SCHEDULE_DATE: DateTimeInput; + public P_SCHEDULE_DATE: string; public P_PAGE_NUM: number; public P_PAGE_LIMIT: number; } diff --git a/Mohem/src/app/time-card/service/models/get-time-card-summary.request.ts b/Mohem/src/app/time-card/service/models/get-time-card-summary.request.ts index 7e5036f0..05aed6fa 100644 --- a/Mohem/src/app/time-card/service/models/get-time-card-summary.request.ts +++ b/Mohem/src/app/time-card/service/models/get-time-card-summary.request.ts @@ -5,8 +5,8 @@ export class GetTimeCardSummaryRequest extends Request { public P_SELECTED_EMPLOYEE_NUMBER: string; public P_MENU_TYPE: string; public P_SELECTED_RESP_ID: number; - public P_SCHEDULE_DATE_FROM: DateTimeInput; - public P_SCHEDULE_DATE_TO: DateTimeInput; + public P_SCHEDULE_DATE_FROM: string; + public P_SCHEDULE_DATE_TO: string; public P_EXCESS_FLAG: string; public P_TIMEBACK_FLAG: string; public P_COMP_OFF_FLAG: string; @@ -19,4 +19,6 @@ export class GetTimeCardSummaryRequest extends Request { public P_APPR_TIMEBACK_FLAG: string; public P_SHT_TYPE: string; public P_ACTUAL_WOB_SEC: string; + public SearchMonth: string; + public SearchYear: number; } diff --git a/Mohem/src/app/time-card/service/time-card.service.ts b/Mohem/src/app/time-card/service/time-card.service.ts index 7e8f2cc3..b4fba9fe 100644 --- a/Mohem/src/app/time-card/service/time-card.service.ts +++ b/Mohem/src/app/time-card/service/time-card.service.ts @@ -1,27 +1,27 @@ -import { Injectable } from "@angular/core"; -import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service"; -import { ConnectorService } from "src/app/hmg-common/services/connector/connector.service"; -import { Request } from "src/app/hmg-common/services/models/request"; +import { Injectable } from '@angular/core'; +import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service'; +import { ConnectorService } from 'src/app/hmg-common/services/connector/connector.service'; +import { Request } from 'src/app/hmg-common/services/models/request'; -import { Observable } from "rxjs"; -import { GetShiftTypeResponse } from "./models/get-shift-type.response"; -import { GetDayAndHoursDetailsResponse } from "./models/get-day-hours-type-details.response"; -import { GetTimeCardSummaryResponse } from "./models/get-time-card-summary.response"; -import { GetShiftDetailResponse } from "./models/get-shift-detail.response"; -import { GetSwipesResponse } from "./models/get-swipes-response"; +import { Observable } from 'rxjs'; +import { GetShiftTypeResponse } from './models/get-shift-type.response'; +import { GetDayAndHoursDetailsResponse } from './models/get-day-hours-type-details.response'; +import { GetTimeCardSummaryResponse } from './models/get-time-card-summary.response'; +import { GetShiftDetailResponse } from './models/get-shift-detail.response'; +import { GetSwipesResponse } from './models/get-swipes-response'; @Injectable({ - providedIn: "root" + providedIn: 'root' }) export class TimeCardService { - public static getShiftTypeUrl = "Services/ERP.svc/REST/GET_SHIFT_TYPES"; + public static getShiftTypeUrl = 'Services/ERP.svc/REST/GET_SHIFT_TYPES'; public static getTimeCardSummaryUrl = - "Services/ERP.svc/REST/GET_TIME_CARD_SUMMARY"; + 'Services/ERP.svc/REST/GET_TIME_CARD_SUMMARY'; public static getDayHourDetailsUrl = - "Services/ERP.svc/REST/GET_DAY_HOURS_TYPE_DETAILS"; + 'Services/ERP.svc/REST/GET_DAY_HOURS_TYPE_DETAILS'; public static getShiftDetailUrl = - "Services/ERP.svc/REST/GET_SCHEDULE_SHIFTS_DETAILS"; - public static getSwipeUrl = "Services/ERP.svc/REST/GET_SWIPES"; + 'Services/ERP.svc/REST/GET_SCHEDULE_SHIFTS_DETAILS'; + public static getSwipeUrl = 'Services/ERP.svc/REST/GET_SWIPES'; constructor( public con: ConnectorService, diff --git a/Mohem/src/app/time-card/shift-details/shift-details.component.html b/Mohem/src/app/time-card/shift-details/shift-details.component.html new file mode 100644 index 00000000..2e8a1ee3 --- /dev/null +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.html @@ -0,0 +1,191 @@ + + + + + + Shift Details + + + + +
+ + +

Shift details

+

{{ shiftData.SCHEDULE_DATE | date }}

+ + + + Shift type + + + {{shiftData.SHT_TYPE_DESC}} + + + + + Shift + + + {{shiftData.SHT_NAME}} + + + + + Break + + + {{shiftData.BREAK_NAME}} + + + + + Work On Break + + + {{shiftData.ACTUAL_WOB_HRS}} + + + +

Actual Swipe(s)

+
+ + + Start + + + {{shiftData.SHT_ACTUAL_START_TIME}} + + + + + End + + + {{shiftData.SHT_ACTUAL_END_TIME}} + + + +

Approved Swipe(s)

+
+ + + Start + + + {{shiftData.APPROVED_START_TIME}} + + + + + Start Reason + + + {{shiftData.APPROVED_START_REASON_DESC}} + + + + + End + + + {{shiftData.APPROVED_END_TIME}} + + + + + End Reason + + + {{shiftData.APPROVED_END_REASON_DESC}} + + + + + Actual Hours + + + {{shiftData.SHT_ACTUAL_HRS}} + + +
+
+
+
+ +
+ + +

Employee Swipe(s)

+

{{ swipeData.SCHEDULE_DATE | date }}

+ + + + + Swipe Date + + + {{swipeData.SWIPE_DATE}} + + + + + Swipe Time + + + {{swipeData.SWIPE_TIME}} + + + + + Swipe Status + + + {{swipeData.SWIPE_STATUS}} + + + + + Machine Location + + + {{swipeData.MACHINE_LOCATION}} + + + + + Unit Number + + + {{swipeData.UNIT_NUMBER}} + + + + + Unit Name + + + {{swipeData.UNIT_NAME}} + + + + + Exclude + + + {{swipeData.EXCLUDE_FLAG}} + + + + + Error Message + + + {{swipeData.RETURN_MESSAGE}} + + + +
+
+
+
\ No newline at end of file diff --git a/Mohem/src/app/time-card/shift-details/shift-details.component.scss b/Mohem/src/app/time-card/shift-details/shift-details.component.scss new file mode 100644 index 00000000..976ada04 --- /dev/null +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.scss @@ -0,0 +1,30 @@ +ion-header{ + overflow: hidden; + background: #f2f2f3; +} +ion-content{ + --ion-background-color: #f2f2f3; +} + +ion-card-content { + padding: 0px; +} + +ion-card { + box-shadow: none !important; + background-color: white; + margin: 10px; +} + +ion-title{ + text-align: center; + font-family: WorkSans-Bold; + font-size: 18px; + margin-right: 45px; +} + +.header-toolbar-new{ + --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%); + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; +} diff --git a/Mohem/src/app/time-card/shift-details/shift-details.component.spec.ts b/Mohem/src/app/time-card/shift-details/shift-details.component.spec.ts new file mode 100644 index 00000000..808e6498 --- /dev/null +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ShiftDetailsComponent } from './shift-details.component'; + +describe('ShiftDetailsComponent', () => { + let component: ShiftDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ShiftDetailsComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ShiftDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mohem/src/app/time-card/shift-details/shift-details.component.ts b/Mohem/src/app/time-card/shift-details/shift-details.component.ts new file mode 100644 index 00000000..cd3cb9f2 --- /dev/null +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.ts @@ -0,0 +1,75 @@ +import { Component, OnInit } from '@angular/core'; +import { TimeCardService } from 'src/app/time-card/service/time-card.service'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.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'; +import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response'; +import * as moment from 'moment'; + +@Component({ + selector: 'app-shift-details', + templateUrl: './shift-details.component.html', + styleUrls: ['./shift-details.component.scss'], +}) +export class ShiftDetailsComponent implements OnInit { + public selectedShift: any; + // public selectedShiftDay: any; + public shiftDetailsData: any = []; + public swipeDetailsData: any = []; + constructor( + public timeCardService: TimeCardService, + public common: CommonService, + public sharedData: SharedDataService) { } + + ngOnInit() { + this.selectedShift = this.sharedData.getSharedData('selectedShift', false); + console.log(this.selectedShift); + if (this.selectedShift.origin === 'shiftDetails') { + this.getScheduleShiftDetails(); + } else if (this.selectedShift.origin === 'shiftSwipes') { + this.getSwipesDetails(); + } + + // this.selectedShiftDay = this.sharedData.getSharedData('selectedShiftDay', false); + // console.log(this.selectedShiftDay); + // if (this.selectedShiftDay.origin === 'shiftDetails') { + // this.getScheduleShiftDetails(); + // } else if (this.selectedShiftDay.origin === 'shiftSwipes') { + // this.getSwipesDetails(); + // } + } + + getScheduleShiftDetails() { + console.log("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; + // this.common.sharedService.setSharedData(this.shiftDetailsData,'shiftDetailsData'); + } + }) + } + + getSwipesDetails() { + console.log("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; + } + }); + } + +} diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.html b/Mohem/src/app/time-card/time-card-details/time-card-details.component.html index 633c94d1..71f0c3ef 100644 --- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.html +++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.html @@ -1,3 +1,576 @@ -

- time-card-details works! -

+ + + + + + + + + + + + +
+ + + + {{ts.trPK('attendance','monthly-attendance')}} +
+
+
+ + + +
+ + + + + +

{{month}}

+ +
+ +

{{year}}

+
+ + + +
+
+ + + + + + + + +
+ +
+ +
+ + {{ts.trPK('attendance-tracking','attendance-statistics')}} + +
+ +
+ +

{{totalAttendancePrecentage}}

+

{{ts.trPK('absenceList','days')}}

+ + +
+ + + +
+ +
+ + + + + + + + +
+
+ + + + + + + + +
+
+
+ + +
+
+
+
+
+ + + + + + + + + +

{{timeCardSummaryData.SCHEDULE_DAYS}}

+

0

+
+
+
+
+ + + + + + + + + + +

{{timeCardSummaryData.OFF_DAYS}}

+

0

+
+
+
+
+ + + +

{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}

+

0

+
+
+ + + +

{{timeCardSummaryData.SHORTAGE_HRS}}

+

0

+
+
+
+
+
+
+ +

{{ts.trPK('attendance','monthly-attendance-calendar')}}

+ +
+
+
+ + + \ No newline at end of file diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss b/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss index e69de29b..ec026364 100644 --- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss +++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss @@ -0,0 +1,488 @@ +ion-header{ + overflow: hidden; + background: #f2f2f3; +} +ion-content{ + --ion-background-color: #f2f2f3; +} + +ion-card-content { + padding: 0px; +} + +ion-card { + box-shadow: none !important; + background-color: white; + margin: 10px -15px; + margin-bottom: 20px; +} + +ion-title{ + text-align: center; + font-family: WorkSans-Bold; + font-size: 18px; + margin-right: 35px; +} + +///////////////////////////////here +.slidPrev{ + // margin-top: 8px; + margin-left: 10px; + background: transparent; +} + +.slidNext{ + background: transparent; + margin-top: -1px; + margin-left: 43px; +} +.activeArrow{ + height: 20px; + width: 20px; +color: white; +} +.disabledArrow{ + height: 20px; + width: 20px; +color: gray; +// margin-right: 5px; +} + +.header-toolbar-new{ + --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%); + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; +} + +.active-Segment { + border-radius: 5px !important; + font-size: 0.3cm !important; + background: white !important; + color: #fff !important; + font-weight: bold !important; + border: 1px solid white !important; + text-transform: none; + --color-checked: none; + } + .active-Segment ion-label{ + // color: #A3D077 !important; + color: #11975F !important; + font-size: 11px; + } + .normal-Segment ion-label{ + // color: #A3D077 !important; + color: white !important; + font-size: 11px; + } + .normal-Segment { + border-radius: 5px !important; + font-size: 0.3cm !important; + background: #A3D077 !important; + color: #fff !important; + font-weight: bold !important; + border: 1px solid white !important; + text-transform: none; + --color-checked: none; + } + .time-card-details-container{ + margin-right: 20px; + margin-left: 20px; + } + + .card-summary-heading{ + margin-left: 10px; + margin-top: 12px; + color: #606161; + font-family: WorkSans-Bold; + } + .card-summary-heading-hours{ + color: #606161; + font-family: WorkSans-Bold; + } + + .card-summary-heading-hours-extended-heading{ + color: #D3D3D3; + font-family: WorkSans-Bold; + } + + ///////////////////////////////// + + .time-card-details { + background: white; + margin: 20px; + border-radius: 5px; + } + + .time-card-details-heading-two { + color: #606161; + font-family: WorkSans-Bold; + } + .time-card-details-heading-two h2 { + margin-top: 15px; + font-size: 15px; + } + + .time-card-span img{ + height: 30px; + margin-top: -5px; + margin-left: 10px; + } + .dayhours-button-container{ + width: 100%; + padding-right: 5px; + padding-left: 5px; + } + + .dayhours-button{ + width: 50%; + height: 35px; + font-size: 15px; + color: white; + background: #606161; + } + + ///////////////////////////////////// +.footer-modal-button{ + position: absolute; + bottom: 0; + color: white; + width: 100%; + text-align: center; +} +.footer-modal-button button{ + font-size: 20px; + background: white; + line-height: 2; + margin: -42px auto 0; + display: block; +} + +//////////////////////////// +.right-slider-icon{ + float: right; + height: 100%; + width: 15%; + position: fixed; + right: -5%; + top: 31%; +} + +.left-slider-icon{ + width: 15%; + position: fixed; + top: 32%; + left: -4%; + height: 100%; +} + + +//////////////////////////////////////////ENAD CODE//////////////////////////////////////////// + + +.colorBG{ + --background: #f0efef; + } + +.header-div { + + background-color: #22C6B3; + text-transform: capitalize; + height: 180px; + position: relative; + display: block; + margin-bottom: -28px; +} +.Title{ + text-align: center !important; + color: white !important; + margin-top: -86px !important; + font-size: 17px !important; + font-family: workSans-Regular; +} + +.header{ + + margin-top: -221px; +} + +.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-top: 5px !important; + margin-left: 15px !important; + margin-right: 15px !important; + background-color: white !important; + border-radius: 20px !important; +height: 250px !important; +border: 1px solid #d6d4d4; + } + + .green-label{ + font-size: 12px; + margin-top: -13px; + } + + .green-amount{ + font-size: 17px; + font-family: WorkSans-Bold; + margin-top: -3px; + } + + .blue-label{ + font-size: 12px; + margin-top: -13px; + } + + .blue-amount{ + font-size: 17px; + font-family: WorkSans-Bold; + margin-top: -4px; + } + +.today-graph{ + display:block !important; + height: 150px !important; + width: 300 !important; + margin-left: -70px !important; +} + .bodyGrid{ + // margin-bottom: 550px !important; + // margin-top: 7px !important; + // margin-left: 15px !important; + // margin-right: 15px !important; + // background-color:white !important; + // border-radius: 20px !important; + // height: 270px !important; + // border: 1px solid #d6d4d4 !important; + + margin-top: 7px !important; + margin-left: 15px !important; + margin-right: 15px !important; + background-color: white !important; + border-radius: 20px !important; + height: 321px !important; + border: 1px solid #d6d4d4 !important; + + } + .labelGrid{ + // margin-top: -30px !important; + // background-color:white !important; + // border-radius: 20px !important; + // height: 100px !important; + // border: 1px solid #d6d4d4; + margin-top: -30px !important; + background-color: white !important; + border-radius: 23px !important; + height: 100px !important; + border: 1px solid #d6d4d4; + padding-right: 0px; + } + +.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; + // text-align: center; + display: block; + padding-top: 8px; + /* font-family: workSans-Regular; */ + margin-left: -157px; + margin-top: -19px; + padding-bottom: 16px; + + } + + } + + + + .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: 38%; + top: 60%; + + display: block; + + text-align: center; + + transform: translate(-50%, -50%); + + h2 { + + font-size: 25px; + + font-family: WorkSans-Bold; + color: black !important; + margin: 0 auto; + + line-height: 36px; + + } + p { + + font-size: 20px; + color: black !important; + // font-family: WorkSans-Bold; + + margin: 0 auto; + + line-height: 36px; + + } + + span { + + width: 125px; + + display: block; + + margin: 0 auto; + + font-size: 12px; + color: black !important; + font-family: workSans-Regular; + } + } + \ No newline at end of file diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts b/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts index 8fa456db..28a94ae6 100644 --- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts +++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts @@ -1,4 +1,15 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, Input } from '@angular/core'; +import { TimeCardService } from 'src/app/time-card/service/time-card.service'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service'; +import { ModalController, IonSlides } from '@ionic/angular'; +import { SelectPeriodComponent } from '../select-period/select-period.component'; +import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request'; +import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-time-card-summary.request'; +import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response'; +import * as moment from 'moment'; +import { getDate } from 'date-fns'; +import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; @Component({ selector: 'app-time-card-details', @@ -6,9 +17,502 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./time-card-details.component.scss'], }) export class TimeCardDetailsComponent implements OnInit { + slideView: any; + sliderOne: any; + @ViewChild('slides') slides: IonSlides; + @ViewChild('slideWithNav') slideWithNav: IonSlides; + slideOptsOne = { + initialSlide: 0, + slidesPerView: 1, + autoplay: true + }; + month: any; + year: any; + preMonth: number; + nextMonth: any; - constructor() { } - ngOnInit() {} + constructor( + public timeCardService: TimeCardService, + public common: CommonService, + public modalController: ModalController, + public sharedData: SharedDataService, + public ts: TranslatorService + ) { } + @ViewChild('sliderRef') protected sliderRef: IonSlides; + + public activeSegment: any = 'time-card-summary'; + public showMore: any = true; + public menuType: any; + public selEmp: string; + public dateFrom: any = new Date(); + public dateTo: any = new Date(); + public selMenu: MenuResponse = new MenuResponse(); + public respID: number; + public timeCardSummaryData: any = []; + public dayHoursData: any = []; + public selectedShift: any; + public rightIconActive = false; + public leftIconActive = false; + public loadMore = false; + public dayAndHoursPageNumber = 1; + public selectedFilters: any = {}; + public selectedShiftFilter: any; + public loadMoreDateHoursData = false; + public monthName: any; + public yearDate: any; + public absentDays: number; + public attendedDays: number; + public futrueDays = 0; + public totalAttendancePrecentage = 0; + public arrDaysAttendance: any = []; + public arrDaysAbsent: any = []; + public arrDaysOff: any = []; + public monthTitle: string = moment().format('MMMM'); + public yearTitle: string; + public isChange = false; + public activeMonth: any; + public options = { + + cutoutPercentage: 80, + + tooltips: { enabled: false }, + + legend: { display: false } + + }; + + + + public data = { + + datasets: [ + + { + + data: [120, 50], + + backgroundColor: [ + + '#22c6b3', + + '#094875', + ], + + borderWidth: 2 + + }] + + }; + + ngOnInit() { + this.nextMonth = new Date().getMonth() + 2; + this.preMonth = new Date().getMonth() - 2; + if (this.preMonth < 0) { + this.preMonth = this.preMonth * - 1; + } else { + this.preMonth = this.preMonth * - 1; + } + this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear()); + } + + + + + calendarConfig(month?, year?) { + + console.log('ngOnInit'); + this.month = month; + this.year = year; + this.arrDaysOff = this.common.sharedService.getSharedData('calendarDayOffDateValue', false); + this.arrDaysAttendance = this.common.sharedService.getSharedData('calendarAttendanceDateValue', false); + this.arrDaysAbsent = this.common.sharedService.getSharedData('calendarDaysAbsentDateValue', false); + this.getTimeCardSummaryDetails(month, year); + this.getDayHoursTypeDetails(month, year); + } + + + + + + public segmentChanged(event: any) { + console.log('segmentChanged'); + this.activeSegment = event.detail.value; + if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) { + this.getDayHoursTypeDetails(); + } else { + + this.rightIconActive = true; + this.leftIconActive = false; + } + } + + public toggleButton() { + console.log('toggleButton'); + + this.showMore = !this.showMore; + } + + public getDayHoursTypeDetails(month?, year?) { + console.log('getDayHoursTypeDetails'); + const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest(); + // this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ'); + // this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ'); + 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.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom); + // dayAndHoursReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo); + 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)) { + console.log(result.GetDayHoursTypeDetailsList); + this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'RTP_IDs'); + this.countAllAttendDays(result.GetDayHoursTypeDetailsList); + this.loadMoreDateHoursData = false; + const daysDataLength = result.GetDayHoursTypeDetailsList.length; + this.loadMore = daysDataLength === 10 ? true : false; + if (this.dayAndHoursPageNumber > 1 && daysDataLength !== 0) { + this.rightIconActive = true; + this.dayHoursData = this.dayHoursData.concat(result.GetDayHoursTypeDetailsList); + setTimeout(() => { + this.nextSlide(); + }, 1000); + } else if (this.dayAndHoursPageNumber === 1 && daysDataLength <= 10 && daysDataLength !== 0) { + this.rightIconActive = true; + this.dayHoursData = result.GetDayHoursTypeDetailsList; + } + } + }); + + } + + // startTime:new Date(new Date().getTime() +( 60000*60 * 24)), + // endTime: new Date(new Date().getTime() +( 60000*60 * 24)), + // isoTime:"09:00:00", + // allDay: false + countAllAttendDays(allDays) { + console.log('countAllAttendDays'); + + 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') { + // attendace + this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE), + endTime: new Date(allDays[i].SCHEDULE_DATE)}); + } else { + // absent + this.arrDaysAbsent.push( + {startTime: new Date(allDays[i].SCHEDULE_DATE), + endTime: new Date(allDays[i].SCHEDULE_DATE), + isoTime: '09:00:00', + allDay: false + } + + ); + } + } + } + + public getTimeCardSummaryDetails(month?, year?) { + console.log('getTimeCardSummaryDetails'); + const timeCardSummaryReqObj = new GetTimeCardSummaryRequest(); + if (this.isChange) { + // this.monthName = this.monthTitle; + // this.yearDate = this.yearTitle; + this.monthName = month; + console.log('' + this.monthName); + this.yearDate = year; + console.log('' + this.yearDate); + + } else { + 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; + + timeCardSummaryReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp; + timeCardSummaryReqObj.P_MENU_TYPE = this.menuType; + timeCardSummaryReqObj.P_SELECTED_RESP_ID = this.respID; + // timeCardSummaryReqObj.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom); + // timeCardSummaryReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo); + timeCardSummaryReqObj.SearchMonth = this.monthName; + timeCardSummaryReqObj.SearchYear = this.yearDate; + + if (Object.keys(this.selectedFilters).length !== 0) { + timeCardSummaryReqObj.P_SHT_TYPE = this.selectedShiftFilter; + timeCardSummaryReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value; + timeCardSummaryReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value; + timeCardSummaryReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value; + timeCardSummaryReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value; + timeCardSummaryReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value; + timeCardSummaryReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value; + timeCardSummaryReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value; + timeCardSummaryReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value; + timeCardSummaryReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value; + timeCardSummaryReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value; + timeCardSummaryReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value; + } + this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => { + if (this.common.validResponse(result)) { + this.timeCardSummaryData = result.GetTimeCardSummaryList[0]; + this.absentDays = this.timeCardSummaryData.ABSENT_DAYS; + // console.log("absent: "+ this.absentDays); + + this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS; + // console.log("attendedDays: "+ this.attendedDays); + + this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS; + this.options = { + cutoutPercentage: 80, + tooltips: { enabled: false }, + legend: { display: false } + }; + if (this.absentDays === 0 && this.attendedDays === 0) { + this.futrueDays = this.totalAttendancePrecentage; + } +////////////////////////////////////////////// + // console.log("absent: "+ this.absentDays); + // console.log("attend: "+ this.attendedDays); + // console.log("future"+ this.futrueDays); + // in chart "this.futrueDays" + // in calender "this.futrueDays == white" + // timecard sumery return not match data with GET_DAY_HOURS_TYPE_DETAILS + this.data = { + datasets: [ + { + data: [this.absentDays, this.attendedDays, this.futrueDays], + backgroundColor: [ + '#094875', + '#22c6b3', + '#9e9e9e' + ], + borderWidth: 2 + }] + }; + } + }); + } + + async openSelectPeriodModal() { + const modal = await this.modalController.create({ + component: SelectPeriodComponent, + cssClass: 'select-period-custom-modal', + componentProps: { + dateFrom: this.dateFrom, + dateTo: this.dateTo + } + }); + modal.onDidDismiss().then(result => { + this.loadMore = false; + this.rightIconActive = false; + this.leftIconActive = false; + this.dayHoursData = []; + this.timeCardSummaryData = []; + this.dayAndHoursPageNumber = 1; + this.loadMoreDateHoursData = false; + this.dateFrom = result.data.dateFrom; + this.dateTo = result.data.dateTo; + this.selectedFilters = result.data.keySelectedFilters; + this.selectedShiftFilter = result.data.selectedShiftType; + if (this.dateFrom && this.dateTo) { + this.getDayHoursTypeDetails(); + this.getTimeCardSummaryDetails(); + } + }); + return await modal.present(); + } + + slideChanged(ev: any) { + console.log('slideChanged'); + const prom1 = this.sliderRef.isBeginning(); + const prom2 = this.sliderRef.isEnd(); + + Promise.all([prom1, prom2]).then((data) => { + data[0] ? this.leftIconActive = false : this.leftIconActive = true; + if (data[1]) { + if (!this.loadMore) { + this.rightIconActive = false; + } + } else { + this.rightIconActive = true; + } + }); + } + + showShiftDetails(origin: string) { + console.log('showShiftDetails'); + + this.sliderRef.getActiveIndex().then((index: number) => { + this.selectedShift = this.dayHoursData[index]; + this.selectedShift.origin = origin; + this.sharedData.setSharedData(this.selectedShift, 'selectedShift'); + this.common.navigatePage('/time-card/shift-details'); + }); + } + + + /////////////////////////////////////////////////// here +// slideNext(object, slideView) { +// if (this.loadMoreDateHoursData && this.loadMore) { +// this.dayAndHoursPageNumber++; +// this.getDayHoursTypeDetails(); +// } +// this.sliderRef.slideNext(); +// this.sliderRef.getActiveIndex().then((index: number) => { +// if (index === (this.dayHoursData.length - 1)) { +// this.loadMoreDateHoursData = true; +// } +// }); +// } + +// slidePrev(object, slideView) { +// this.sliderRef.slidePrev(); +// } +///////////////////////////////// + + + nextSlide() { + let currentYear = new Date().getFullYear(); + if (this.nextMonth > 12) { + currentYear = currentYear + 1; + this.nextMonth = 1; + } + this.calendarConfig(this.getMonthName(this.nextMonth) , currentYear); + this.nextMonth = this.nextMonth + 1; + this.preMonth = this.preMonth + 1; + } + + previousSlide() { + let currentYear = new Date().getFullYear(); + if (this.preMonth === 0) { + currentYear = currentYear - 1; + this.preMonth = 12; + } + this.calendarConfig(this.getMonthName(this.preMonth) , currentYear); + this.preMonth = this.preMonth - 1; + this.nextMonth = this.nextMonth - 1; + } + + changeMonthTitle(title) { + console.log('changeMonthTitle'); + this.monthTitle = title; + this.isChange = true; + this.getTimeCardSummaryDetails(); + } + changeYear(year) { + console.log('changeYear'); + + this.yearTitle = year; + } + + + ///////////////////////////////////////////////////////////////////////// here + getHeaderMonth(date: any) { + + return this.getMonthName(date.getMonth() + 1) + ' ' + date.getFullYear(); + + } + + public getMonthName(value: any): any { + 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'; + + } + } + + // getHeaderMonth(date: any) { + // if (monthName = "December") { + // } + // return monthName; + // else + // return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear(); + + // } + // public getMonthName(value: any): any { + // switch (value) { + // case "Januray": + // return "February"; + // case "February": + // return "March"; + // case "March": + // return "April"; + // case "April": + // return "May"; + // case "May": + // return "June"; + // case "June": + // return "July"; + // case "July": + // return "August"; + // case "August": + // return "September" ; + // case "September" : + // return "October"; + // case "October": + // return "November"; + // case "November": + // return "December"; + // case "December": + // return "January"; + + // } + // } } diff --git a/Mohem/src/app/time-card/time-card.module.ts b/Mohem/src/app/time-card/time-card.module.ts index e79e452f..6ea5c17b 100644 --- a/Mohem/src/app/time-card/time-card.module.ts +++ b/Mohem/src/app/time-card/time-card.module.ts @@ -8,6 +8,11 @@ import { IonicModule } from '@ionic/angular'; import { TimeCardPage } from './time-card.page'; import { TimeCardDetailsComponent } from './time-card-details/time-card-details.component'; import { HomeComponent } from './home/home.component'; +import { SelectPeriodComponent } from './select-period/select-period.component'; +import { ShiftDetailsComponent } from './shift-details/shift-details.component'; +import { HmgCommonModule } from '../hmg-common/hmg-common.module'; + + const routes: Routes = [ { @@ -21,6 +26,10 @@ const routes: Routes = [ { path: 'time-card-details', component: TimeCardDetailsComponent + }, + { + path: 'shift-details', + component: ShiftDetailsComponent } ] } @@ -31,12 +40,18 @@ const routes: Routes = [ CommonModule, FormsModule, IonicModule, - RouterModule.forChild(routes) + RouterModule.forChild(routes), + HmgCommonModule ], declarations: [ TimeCardPage, HomeComponent, - TimeCardDetailsComponent - ] + TimeCardDetailsComponent, + SelectPeriodComponent, + ShiftDetailsComponent + ], + entryComponents: [ + SelectPeriodComponent + ], }) export class TimeCardPageModule {} diff --git a/Mohem/src/assets/imgs/time-card/ArrowDown.png b/Mohem/src/assets/imgs/time-card/ArrowDown.png new file mode 100644 index 00000000..19693c85 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/ArrowDown.png differ diff --git a/Mohem/src/assets/imgs/time-card/ArrowRight.png b/Mohem/src/assets/imgs/time-card/ArrowRight.png new file mode 100644 index 00000000..e04b5a21 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/ArrowRight.png differ diff --git a/Mohem/src/assets/imgs/time-card/ArrowUp.png b/Mohem/src/assets/imgs/time-card/ArrowUp.png new file mode 100644 index 00000000..faaa61e8 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/ArrowUp.png differ diff --git a/Mohem/src/assets/imgs/time-card/Asset 18.png b/Mohem/src/assets/imgs/time-card/Asset 18.png new file mode 100644 index 00000000..df97a248 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Asset 18.png differ diff --git a/Mohem/src/assets/imgs/time-card/Asset 19.png b/Mohem/src/assets/imgs/time-card/Asset 19.png new file mode 100644 index 00000000..585150ba Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Asset 19.png differ diff --git a/Mohem/src/assets/imgs/time-card/Asset 20.png b/Mohem/src/assets/imgs/time-card/Asset 20.png new file mode 100644 index 00000000..661cb83e Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Asset 20.png differ diff --git a/Mohem/src/assets/imgs/time-card/Asset 21.png b/Mohem/src/assets/imgs/time-card/Asset 21.png new file mode 100644 index 00000000..e03be489 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Asset 21.png differ diff --git a/Mohem/src/assets/imgs/time-card/EarlyOut.png b/Mohem/src/assets/imgs/time-card/EarlyOut.png new file mode 100644 index 00000000..d7c3e48e Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/EarlyOut.png differ diff --git a/Mohem/src/assets/imgs/time-card/ExcessTime.png b/Mohem/src/assets/imgs/time-card/ExcessTime.png new file mode 100644 index 00000000..2f7105e1 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/ExcessTime.png differ diff --git a/Mohem/src/assets/imgs/time-card/LateIn.png b/Mohem/src/assets/imgs/time-card/LateIn.png new file mode 100644 index 00000000..829cf045 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/LateIn.png differ diff --git a/Mohem/src/assets/imgs/time-card/MissingSwipe.png b/Mohem/src/assets/imgs/time-card/MissingSwipe.png new file mode 100644 index 00000000..ec7ffcf5 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/MissingSwipe.png differ diff --git a/Mohem/src/assets/imgs/time-card/MyTimeCard.png b/Mohem/src/assets/imgs/time-card/MyTimeCard.png new file mode 100644 index 00000000..9ff482cc Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/MyTimeCard.png differ diff --git a/Mohem/src/assets/imgs/time-card/Notification.png b/Mohem/src/assets/imgs/time-card/Notification.png new file mode 100644 index 00000000..a4ff12a7 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Notification.png differ diff --git a/Mohem/src/assets/imgs/time-card/PlannedOT.png b/Mohem/src/assets/imgs/time-card/PlannedOT.png new file mode 100644 index 00000000..188e7306 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/PlannedOT.png differ diff --git a/Mohem/src/assets/imgs/time-card/Remarks.png b/Mohem/src/assets/imgs/time-card/Remarks.png new file mode 100644 index 00000000..e1a07b3d Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Remarks.png differ diff --git a/Mohem/src/assets/imgs/time-card/Shift Hours.png b/Mohem/src/assets/imgs/time-card/Shift Hours.png new file mode 100644 index 00000000..9d2000b6 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Shift Hours.png differ diff --git a/Mohem/src/assets/imgs/time-card/SwipeIn.png b/Mohem/src/assets/imgs/time-card/SwipeIn.png new file mode 100644 index 00000000..82b381e1 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/SwipeIn.png differ diff --git a/Mohem/src/assets/imgs/time-card/SwipeOut.png b/Mohem/src/assets/imgs/time-card/SwipeOut.png new file mode 100644 index 00000000..a84e1c9d Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/SwipeOut.png differ diff --git a/Mohem/src/assets/imgs/time-card/TimeBackIcon.png b/Mohem/src/assets/imgs/time-card/TimeBackIcon.png new file mode 100644 index 00000000..42f13fb5 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/TimeBackIcon.png differ diff --git a/Mohem/src/assets/imgs/time-card/Timeback.png b/Mohem/src/assets/imgs/time-card/Timeback.png new file mode 100644 index 00000000..287f57ab Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Timeback.png differ diff --git a/Mohem/src/assets/imgs/time-card/TotalHours.png b/Mohem/src/assets/imgs/time-card/TotalHours.png new file mode 100644 index 00000000..f1ec0e8c Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/TotalHours.png differ diff --git a/Mohem/src/assets/imgs/time-card/WorkOnBreak.png b/Mohem/src/assets/imgs/time-card/WorkOnBreak.png new file mode 100644 index 00000000..f1f1faa2 Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/WorkOnBreak.png differ diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index e5e24418..c6ae914d 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -1037,6 +1037,22 @@ "attendance": { "ar": "الحضور", "en": "Attendance" + }, + "monthly-attendance": { + "ar": "الحضور الشهري", + "en": "Monthly Attendance" + }, + "monthly-attendance-calendar": { + "ar": "تقويم الحضور الشهري", + "en": "Monthly Attendance Calendar" + }, + "present": { + "ar": "حضور", + "en": "Present" + }, + "absent": { + "ar": "غياب", + "en": "Absent" } }, "vacation-rule": { @@ -2189,12 +2205,42 @@ "en": "LATE IN", "ar":"LATE IN" }, + "shortage":{ + "en": "Shortage", + "ar":"عجز" + }, + "excess":{ + "en": "Excess", + "ar":"فائض" + }, + "early-out":{ + "en": "Early Out", + "ar":"" + }, "today-time-left":{ "en": "TODAY'S TIME LEFT", "ar":"TODAY'S TIME LEFT" }, - - + "shortage-hours":{ + "en": "SHORTAGE HOURS", + "ar":"" + }, + "schedule":{ + "en": "SCHEDULE", + "ar":"" + }, + "off-days":{ + "en": "OFF DAYS", + "ar":"ايام الراحه" + }, + "non-analyzed":{ + "en": "NON ANALYZED", + "ar":"" + }, + "attendance-statistics":{ + "en": "Attendance Statistics", + "ar":"" + }, "confirm-alert1":{ "en": "Are you sure, you want to", "ar":"Are you sure, you want to" @@ -2208,7 +2254,7 @@ "ar":"You did't complate today shift" }, "shift-time":{ - "en":"SHIFT TIME", + "en":"Shift Time", "ar":"SHIFT TIME" } }, diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss index 4c90cfc0..8d18b9fe 100644 --- a/Mohem/src/theme/styles.scss +++ b/Mohem/src/theme/styles.scss @@ -1023,3 +1023,84 @@ border:0px // } // } // } + +.monthview-primary-with-event, .absent, .present, .dayoff { + + background-color: #fff !important; + z-index: 1; + color: #fff !important; + position: relative; + +} + + + + +.monthview-selected { + background-color: gray !important; + color: #fff !important; +} + +.advanced-search-modal { + --height: 12cm !important; + --width: 80% !important; + --border-radius: 0.4cm; +} + +.calendar-modal { + --height: 15cm !important; + --width: 88% !important; + --border-radius: 0.4cm; + + // height: 544px !important; + // width: 332px !important; +} + + +.monthview-datetable tbody td{ + border:0 !important; +} + +.monthview-primary-with-event::after, .absent::after, .present::after, .dayoff::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%; +} +.absent::after{ + background: #094875; +} + +.present::after{ + background: #77cfb8; +} +.dayoff::after{ + background: gray; +} + + +[dir=ltr] .monthview-container .swiper-slide, + +[dir=rtl] .monthview-container .swiper-slide { + + margin: 0 !important; + +} + + + +table.monthview-datetable th small { + + font-size: 60%; + +} +