diff --git a/Mohem/angular.json b/Mohem/angular.json index 42b54182..eb6b8116 100644 --- a/Mohem/angular.json +++ b/Mohem/angular.json @@ -42,7 +42,7 @@ "input": "src/app/app.scss" } ], - "scripts": [], + "scripts": ["node_modules/chart.js/dist/Chart.js"], "es5BrowserSupport": true }, "configurations": { diff --git a/Mohem/package-lock.json b/Mohem/package-lock.json index 7c7d2b6c..7ed44528 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": { @@ -5482,9 +5482,9 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "electron-to-chromium": { - "version": "1.3.333", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.333.tgz", - "integrity": "sha512-7MJfCpa/tmhqYy2lZ1NEbkSxH7q3KiZiepiSs2ayTPAweAjdzGXotij+7OKPPb3OwJD2ZuBKPrA2HIuuSi6ahw==", + "version": "1.3.340", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.340.tgz", + "integrity": "sha512-hRFBAglhcj5iVYH+o8QU0+XId1WGoc0VGowJB1cuJAt3exHGrivZvWeAO5BRgBZqwZtwxjm8a5MQeGoT/Su3ww==", "dev": true }, "elementtree": { @@ -7653,6 +7653,11 @@ "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", "dev": true }, + "ionic2-calendar": { + "version": "0.5.8", + "resolved": "https://registry.npmjs.org/ionic2-calendar/-/ionic2-calendar-0.5.8.tgz", + "integrity": "sha512-+8xy/cahkCzEJTYmsqkRiAXcn7FlSSXPM72nU/BKtDj6uNKBl/5Bqu6EoKT1z4YAc1cC3uOZSdSKv9smr4GNnA==" + }, "ionicons": { "version": "4.6.3", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.6.3.tgz", @@ -9417,6 +9422,14 @@ "tslib": "^1.9.0" } }, + "ngx-gauge": { + "version": "1.0.0-beta.10", + "resolved": "https://registry.npmjs.org/ngx-gauge/-/ngx-gauge-1.0.0-beta.10.tgz", + "integrity": "sha512-j/YOntC31Pe24Et0wooi1YOmkA11Xw5YzsdBUIvYtvikvO6jwQ5tKwHimP981QAWW3S6/FQ9y94Fd/auJfyGkw==", + "requires": { + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -9521,9 +9534,9 @@ } }, "node-releases": { - "version": "1.1.45", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.45.tgz", - "integrity": "sha512-cXvGSfhITKI8qsV116u2FTzH5EWZJfgG7d4cpqwF8I8+1tWpD6AsvvGRKq2onR0DNj1jfqsjkXZsm14JMS7Cyg==", + "version": "1.1.47", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz", + "integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==", "dev": true, "requires": { "semver": "^6.3.0" @@ -15195,9 +15208,9 @@ "dev": true }, "readable-stream": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz", - "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz", + "integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==", "dev": true, "requires": { "inherits": "^2.0.3", diff --git a/Mohem/package.json b/Mohem/package.json index ed651699..ac6595b1 100755 --- a/Mohem/package.json +++ b/Mohem/package.json @@ -101,9 +101,11 @@ "cordova.plugins.diagnostic": "^5.0.1", "core-js": "^2.5.4", "date-fns": "^1.30.1", + "ionic2-calendar": "^0.5.8", "mx.ferreyra.callnumber": "0.0.2", "ng2-file-upload": "^1.3.0", "ng2-pdf-viewer": "^5.3.2", + "ngx-gauge": "^1.0.0-beta.10", "npm": "^6.13.1", "phonegap-plugin-barcodescanner": "^8.1.0", "phonegap-plugin-multidex": "^1.0.0", diff --git a/Mohem/src/app/app.module.ts b/Mohem/src/app/app.module.ts index 40ac3f80..48a6d207 100644 --- a/Mohem/src/app/app.module.ts +++ b/Mohem/src/app/app.module.ts @@ -16,6 +16,8 @@ import { FilePath } from "@ionic-native/file-path/ngx"; import { File } from "@ionic-native/file/ngx"; import { Base64 } from "@ionic-native/base64/ngx"; import { FirebaseX } from '@ionic-native/firebase-x/ngx'; +import { NgCalendarModule } from 'ionic2-calendar'; + @NgModule({ declarations: [AppComponent], @@ -27,7 +29,8 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; hardwareBackButton: true, }), AppRoutingModule, - HmgCommonModule + HmgCommonModule, + NgCalendarModule ], providers: [ StatusBar, 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..faf61852 --- /dev/null +++ b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.ts @@ -0,0 +1,81 @@ +import { Component, OnInit } from '@angular/core'; +import { CommonService } from '../../hmg-common/services/common/common.service'; +import { TranslatorService } from '../../hmg-common/services/translator/translator.service'; +import { SharedDataService } from '../../hmg-common/services/shared-data-service/shared-data.service'; +import { GetSubordinatesAttdStatusRequest } from 'src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest'; +import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service'; + + +@Component({ + selector: 'app-monthly-attendance', + templateUrl: './monthly-attendance.component.html', + styleUrls: ['./monthly-attendance.component.scss'], +}) +export class MonthlyAttendanceComponent implements OnInit { + gaugeType = "full"; + gaugeValue = 28.3; + gaugeLabel = "Days"; + // gaugeAppendText = "km/hr"; + + + currentMonth: any; + currentDate; + + constructor(private cs: CommonService, public ts: TranslatorService, public sharedData: SharedDataService, public DS :DashboredService) { } + ngOnInit() {} + + ionViewWillEnter(){ + this.currentMonth = this.sharedData.getSharedData("currentMonth"); + } + public options = { + + cutoutPercentage: 80, + + tooltips: { enabled: false }, + + legend: { display: false } + + }; + + + + public data = { + + datasets: [ + + { + + data: [120,50], + + backgroundColor: [ + + '#22c6b3', + + '#094875', + ], + + borderWidth: 2 + + }] + + }; + + + getSubordinatesAttStatus(){ + let request: GetSubordinatesAttdStatusRequest = new GetSubordinatesAttdStatusRequest(); + request.P_SCHEDULE_DATE_FROM="/Date(1578603600000+0300)/"; //test + request.P_SCHEDULE_DATE_TO="/Date(1576011600000+0300)/";//test + + this.DS.getSubordinatesAttStatus( request,()=> {console.log("Error ");} ).subscribe((result:GetSubordinatesAttdStatusResponse)=>{ + if (this.cs.validResponse(result)) { + console.log("response"); + console.log(result); + } + + }); + + } + + + +} diff --git a/Mohem/src/app/hmg-common/hmg-common.module.ts b/Mohem/src/app/hmg-common/hmg-common.module.ts index 59242c26..bd0ff8d4 100644 --- a/Mohem/src/app/hmg-common/hmg-common.module.ts +++ b/Mohem/src/app/hmg-common/hmg-common.module.ts @@ -103,6 +103,11 @@ import { AccordinTabCustomComponent} from './ui/accordin-custom/accordin-tab-cus import{ConfirmLoginComponent} from '../authentication/confirm-login/confirm-login.component' import{WelcomeComponent} from './ui/welcome-login/welcome.component' import {DashboredService} from './services/dashbored/dashbored.service' +import { CircleCalendarComponent } from './ui/circle-calendar/circle-calendar.component'; +import { NgCalendarModule } from 'ionic2-calendar'; +import { NgxGaugeModule } from 'ngx-gauge'; +import { DateInfoModalComponent } from './ui/circle-calendar/date-info-modal/date-info-modal.component'; +import { ChartModule } from 'primeng/chart'; @NgModule({ imports: [ CommonModule, @@ -112,7 +117,10 @@ import {DashboredService} from './services/dashbored/dashbored.service' HttpClientModule, NgxChartsModule, ListboxModule, - PdfViewerModule + PdfViewerModule, + NgCalendarModule, + NgxGaugeModule, + ChartModule ], declarations: [ WelcomeComponent, @@ -170,7 +178,9 @@ import {DashboredService} from './services/dashbored/dashbored.service' FileUploderProfileComponent, AccordinTabCustomComponent, AccordinCustomComponent, - ConfirmLoginComponent + ConfirmLoginComponent, + CircleCalendarComponent, + DateInfoModalComponent ], exports: [ @@ -226,7 +236,12 @@ import {DashboredService} from './services/dashbored/dashbored.service' FileUploderProfileComponent, AccordinTabCustomComponent, AccordinCustomComponent, - ConfirmLoginComponent + ConfirmLoginComponent, + CircleCalendarComponent, + DateInfoModalComponent, + NgCalendarModule, + NgxGaugeModule, + ChartModule ], providers: [ @@ -270,7 +285,8 @@ import {DashboredService} from './services/dashbored/dashbored.service' //PaymentService, MenuService, OpenNativeSettings - ] + ], + entryComponents: [DateInfoModalComponent], }) export class HmgCommonModule { } 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 532e6bd4..9611ae92 100644 --- a/Mohem/src/app/hmg-common/services/common/common.service.ts +++ b/Mohem/src/app/hmg-common/services/common/common.service.ts @@ -1081,6 +1081,10 @@ export class CommonService { this.nav.navigateForward(["/authentication/confirmLogin"]); } + public openMonthlyAttendancePage() { + this.nav.navigateForward(["/attendance/monthlyAttendance"]); + } + public reload(url: string, from: string) { console.log("force reload called from:" + from); // window.location.reload(); 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..9e39ca14 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.html @@ -0,0 +1,12 @@ + + + + + + + + + \ 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..2049e641 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts @@ -0,0 +1,208 @@ +import { Component, OnInit, Output } from '@angular/core'; +import { TimeSlot } from './time.slot'; +import { SharedDataService } from '../../services/shared-data-service/shared-data.service'; +import { ModalController } from '@ionic/angular'; +import { DateInfoModalComponent } from './date-info-modal/date-info-modal.component'; +@Component({ + selector: 'app-circle-calendar', + templateUrl: './circle-calendar.component.html', + styleUrls: ['./circle-calendar.component.scss'], +}) +export class CircleCalendarComponent implements OnInit { + eventsdata: any = [{ + startTime:new Date(new Date().getTime() +( 60000*60 * 24)), + endTime: new Date(new Date().getTime() +( 60000*60 * 24)), + isoTime:"09:00:00", + allDay: false + }]; + calendarModes = [ + { key: 'month', value: 'Month' }, + { key: 'week', value: 'Week' }, + { key: 'day', value: 'Day' }, + ]; + + public calendar = { + mode: this.calendarModes[0].key, + currentDate: new Date(), + currentAvailableAppoDate: new Date(), + dateFormatter: { + formatMonthViewDayHeader: (date: Date) => { + return this.getHeaderDay(date); + } + + } + } + public currentAvailableAppoDate: any; + public eventsInput: any = []; + public events: TimeSlot[] = []; + public selectedTime: string; + public selectedDate: string; + public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + public lockSwipeToPrev: any = true; + public currentDate: any; + public selectedDateObject: any; + public currentDateToSwipe: any; + public activeMonth: any; + isFirst: boolean; + constructor(public sharedData: SharedDataService, public mod: ModalController) {} + + ngOnInit() { + this.isFirst = false; + } + + + + getHeaderDay(date: any) { + return this.weekDaysEnSort[date.getDay()]; + + } + + + dayClicked(data: any): void { + if (data.isPast) { + this.eventsInput = []; + this.selectedTime = null; + } else { + // At least one slot + if (data.events.length > 0) { + this.selectedDate = this.getDateISO(data.selectedTime); + //TODO replace later later + for (let i = 0; i < data.events.length; i++) { + + } + this.presentTimeSlots(data.events, data.selectedTime); + this.currentDate = this.getHeaderDate(data.selectedTime); + } else { + this.eventsInput = []; + this.selectedTime = null; + } + //} + } + } + + + async presentTimeSlots(events: TimeSlot[], date: Date) { + this.eventsInput = []; + let index = 1; + for (let event of events) { + // event.end = this.cs.getKSATimeZone(event.end); + this.eventsInput.push({ + name: 'radio' + index, + type: 'radio', + label: event.isoTime.substring(0, event.isoTime.length - 3), + value: event, + checked: index === 1 + }); + if (index == 1) { + this.selectedTime = event.isoTime; + this.selectedDateObject = new Date(event.end); + + } + ++index; + } + } + + + public getDateISO(date: Date): string { + return ( + date.getFullYear().toString() + + "-" + + this.trailerZero(date.getMonth() + 1) + + "-" + + this.trailerZero(date.getDate()) + ); + } + + onCurrentDateChanged(event) { + if(this.isFirst){ + const today = new Date(); + this.currentDateToSwipe = event; + if (this.calendar.mode === 'month') { + if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) { + this.lockSwipeToPrev = true; + } else { + this.lockSwipeToPrev = false; + } + } + this.activeMonth = this.getHeaderMonth(event); + this.currentDate = this.getHeaderDate(event); + this.sharedData.setSharedData(this.activeMonth,"currentMonth"); + this.dateModal(this.currentDate); + }else{ + const today = new Date(); + this.currentDateToSwipe = event; + if (this.calendar.mode === 'month') { + if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) { + this.lockSwipeToPrev = true; + } else { + this.lockSwipeToPrev = false; + } + } + this.activeMonth = this.getHeaderMonth(event); + this.currentDate = this.getHeaderDate(event); + this.sharedData.setSharedData(this.activeMonth,"currentMonth"); + this.isFirst = true; + } + } + + getHeaderDate(date: any) { + + return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear(); + + } + + private trailerZero(value: number): string { + const str = value.toString(); + return str.length > 1 ? str : "" + str; + } + getHeaderMonth(date: any) { + + return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear(); + + } + + public getMonthName(value: number): string { + switch (value) { + case 1: + return "January"; + case 2: + return "February"; + case 3: + return "March"; + case 4: + return "April"; + case 5: + return "May"; + case 6: + return "June"; + case 7: + return "July"; + case 8: + return "August"; + case 9: + return "September"; + case 10: + return "October"; + case 11: + return "November"; + case 12: + return "December"; + } + } + + public async dateModal(todayDate) { + const modal = await this.mod.create({ + component: DateInfoModalComponent, + showBackdrop: true, + backdropDismiss: true, + componentProps: { + TODAYDATE: todayDate + } + }); + modal.cssClass = "advanced-search-modal"; + await modal.present(); + } + + +} 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..cefe1f3f --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html @@ -0,0 +1,98 @@ + + + +
+
+ +
+ + +
+ +
+ +

74%

+ + Completed



+ +
+ + + +
+
+
+ +
+

{{today}}

+

{{todayDate}}

+

{{monthDate}}

+

{{month}}

+
+

Permenent

+
+
+
+
+
+ +
+ + + +

19:00 - 07:00

+

SHIFT TIME

+
+
+
+ + +

11:30

+

REGULAR

+
+
+
+ + +

19:20

+

CHECK-IN

+
+
+
+ + +

7:50

+

CHECK-OUT

+
+
+ +
+
+
+ + + +

00:20

+

LATE-IN

+
+
+ + +

00:30

+

EXCESS

+
+
+ + +

00:00

+

SHORTAGE

+
+
+ + +

00:00

+

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..5c5bea3f --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.scss @@ -0,0 +1,44 @@ +.result-text-container { + + padding: 0; + + margin: 0; + + position: absolute; + + left: 50%; + + top: 50%; + + display: block; + + text-align: center; + + transform: translate(-50%, -50%); + + h2 { + + font-size: 38px; + + font-family: WorkSans-Bold; + + margin: 0 auto; + + line-height: 36px; + + } + + span { + + width: 125px; + + display: block; + + margin: 0 auto; + + font-size: 12px; + + font-family: workSans-Regular; + } +} + \ 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..849d9b96 --- /dev/null +++ b/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.ts @@ -0,0 +1,70 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { ModalController, NavParams } from '@ionic/angular'; + +@Component({ + selector: 'app-date-info-modal', + templateUrl: './date-info-modal.component.html', + styleUrls: ['./date-info-modal.component.scss'], +}) +export class DateInfoModalComponent implements OnInit { + gaugeType = "full"; + gaugeValue = 28.3; + gaugeLabel = "Days"; + @Input() TODAYDATE: any; + today:any; + todayDate: any; + month: any; + monthDate: any; + + constructor(public modalController: ModalController, public navParams: NavParams) { } + + ngOnInit() { + let x = this.TODAYDATE.split(" ") + console.log(x) + this.today = x[0]; + this.todayDate = x[1]; + this.monthDate = x[2]; + this.month = x[3]; + console.log(this.todayDate) + console.log(this.today) + console.log(this.monthDate) + console.log(this.month) + + } + + + public options = { + + cutoutPercentage: 80, + + tooltips: { enabled: false }, + + legend: { display: false } + + }; + + + + public data = { + + datasets: [ + + { + + data: [120,50], + + backgroundColor: [ + + '#094875' + ], + + borderWidth: 2 + + }] + + }; + + + + +} 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.html b/Mohem/src/app/home/home.page.html index fe151468..44b910d7 100644 --- a/Mohem/src/app/home/home.page.html +++ b/Mohem/src/app/home/home.page.html @@ -84,6 +84,14 @@ + + + + +