add attend-tracking

attend-tracking
ashwaq 6 years ago
parent e90be39807
commit 5df30f114b

@ -1,32 +1,33 @@
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'authentication/login', pathMatch: 'full' },
{
path: 'authentication', loadChildren: './authentication/authentication.module#AuthenticationPageModule'},
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
{ path: 'vacation-rule', loadChildren: './vacation-rule/vacation-rule.module#VacationRulePageModule' },
{ path: 'accrual-balances', loadChildren: './accrual-balances/accrual-balances.module#AccrualBalancesPageModule' },
{ path: 'my-team', loadChildren: './my-team/my-team.module#MyTeamPageModule' },
{ path: 'attendance', loadChildren: './attendance/attendance.module#AttendancePageModule' },
{ path: 'eit', loadChildren: './eit/eit.module#EITPageModule' },
{ path: 'absence', loadChildren: './absence/absence.module#AbsencePageModule' },
{ path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
{ path: 'my-specialist', loadChildren: './my-specialist/my-specialist.module#MySpecialistPageModule' },
{ path: 'my-subordinate', loadChildren: './my-subordinate/my-subordinate.module#MySubordinatePageModule' },
{ path: 'time-card', loadChildren: './time-card/time-card.module#TimeCardPageModule' },
{ path: 'payslip', loadChildren: './payslip/payslip.module#PayslipPageModule' }, { path: 'attendance-tracking', loadChildren: './attendance-tracking/attendance-tracking.module#AttendanceTrackingPageModule' }
const routes: Routes = [
{ path: '', redirectTo: 'authentication/login', pathMatch: 'full' },
{
path: 'authentication', loadChildren: './authentication/authentication.module#AuthenticationPageModule'},
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
{ path: 'vacation-rule', loadChildren: './vacation-rule/vacation-rule.module#VacationRulePageModule' },
{ path: 'accrual-balances', loadChildren: './accrual-balances/accrual-balances.module#AccrualBalancesPageModule' },
{ path: 'my-team', loadChildren: './my-team/my-team.module#MyTeamPageModule' },
{ path: 'attendance', loadChildren: './attendance/attendance.module#AttendancePageModule' },
{ path: 'eit', loadChildren: './eit/eit.module#EITPageModule' },
{ path: 'absence', loadChildren: './absence/absence.module#AbsencePageModule' },
{ path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
{ path: 'my-specialist', loadChildren: './my-specialist/my-specialist.module#MySpecialistPageModule' },
{ path: 'my-subordinate', loadChildren: './my-subordinate/my-subordinate.module#MySubordinatePageModule' },
{ path: 'time-card', loadChildren: './time-card/time-card.module#TimeCardPageModule' },
{ path: 'payslip', loadChildren: './payslip/payslip.module#PayslipPageModule' }
];
@NgModule({
imports: [
/*RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules}),*/
RouterModule.forRoot(routes),
],
exports: [RouterModule]
})
export class AppRoutingModule { }
];
@NgModule({
imports: [
/*RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules}),*/
RouterModule.forRoot(routes),
],
exports: [RouterModule]
})
export class AppRoutingModule { }

@ -0,0 +1,38 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { AttendanceTrackingPage } from './attendance-tracking.page';
import {HomeComponent} from './home/home.component'
import { HmgCommonModule } from "./../hmg-common/hmg-common.module";
const routes: Routes = [
{
path: '',
component: AttendanceTrackingPage,
children:[
{
path: 'home',
component:HomeComponent
}
]
},
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HmgCommonModule,
RouterModule.forChild(routes)
],
declarations: [AttendanceTrackingPage,HomeComponent]
})
export class AttendanceTrackingPageModule {}

@ -0,0 +1,3 @@
<ion-content>
<ion-router-outlet></ion-router-outlet>
</ion-content>

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

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-attendance-tracking',
templateUrl: './attendance-tracking.page.html',
styleUrls: ['./attendance-tracking.page.scss'],
})
export class AttendanceTrackingPage implements OnInit {
constructor() { }
ngOnInit() {
}
}

@ -0,0 +1,61 @@
<ion-header>
<ion-toolbar class="header-toolbar">
<ion-title color="light">Attendance Tracking </ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="timer-chart">
<ion-label class="shift-title" style="font-weight: bold"> {{cuurentDate}}</ion-label><br/>
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','today-time-left')}}</ion-label>
</div>
<div *ngIf="attendanceTrackingList" class="tracking-content">
<div class="divstopBtn">
<button ngIf="!checkOut"(click)="openDialog();" class="stopBtn" ion-button>
<ion-icon class="stopicon" name="pause"></ion-icon>
</button>
</div>
<ion-grid>
<ion-row class="rowBorder">
<ion-label class="shift-title">{{ts.trPK('attendance-tracking','shift-time')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00 - 17:00 </ion-label>
</ion-row>
<ion-row class="rowBorder">
<ion-col class="colBorder">
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-in')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00</ion-label>
</ion-col>
<ion-col>
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-out')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00 </ion-label>
</ion-col>
</ion-row>
<ion-row style="text-align: center">
<ion-col class="colBorder">
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','late-in')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00 </ion-label>
</ion-col>
<ion-col>
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','regular')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SCHEDULED_HOURS}} </ion-label>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>

@ -0,0 +1,52 @@
.timer-chart{
padding-top:18px;
background: #094773;
height: 50%;
text-align: center;
}
.tracking-content{
background: #053c63;
height: 50%;
}
.rowBorder{
text-align: center;
border-bottom: var(--lightblue) solid 1px;
}
.shift-text{
// text-align: center;
// width: 100%;
// color: white !important;
margin-bottom: 12px;
margin-top: -9px;
font-size: 30px;
}
.shift-title{
width: 100%;
text-align: center;
color: white !important;
}
.stopicon{
width: 50px;
height: 39px;
color: #053c63;
}
.divstopBtn{
text-align: center;
}
.stopBtn{
height: 70px;
width: 70px;
background-color: var(--lightblue) !important;
border-radius: 50%;
display: inline-block;
margin-top: -24px;
border: solid 3px #053c63;
}
.colBorder{
border-right: var(--lightblue) solid 1px;
}

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

@ -0,0 +1,83 @@
import { Component, OnInit } from '@angular/core';
import { CommonService } from "src/app/hmg-common/services/common/common.service";
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { AttendanceTrackingResponse } from 'src/app/hmg-common/services/dashbored/attendance-tracking.response';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
attendanceTrackingList:any =[];
cuurentDate:any;
direction: string;
checkOut:boolean= true;
constructor(
public cs:CommonService,
public db:DashboredService,
public ts:TranslatorService
) { }
ngOnInit() {
this.attendanceTracking();
this.cuurentDate = new Date();
this.direction = TranslatorService.getCurrentLanguageName();
this.cuurentDate =this.getHeaderDate(this.cuurentDate);
//**condition to check is checkout or not to display PUSE Button**
// if(ischeckOut){
// this.checkOut=true;
// }else{
// this.checkOut=false;
// }
}
// call services
public attendanceTracking(){
this.db.getAttendanceTracking(()=> {},this.ts.trPK('general', 'retry')).subscribe(
(result)=>{
console.log("result: "+result);
this.handleRespondGetAttendanceTracking(result);
}
)
}
public handleRespondGetAttendanceTracking(result){
if (this.cs.validResponse(result)) {
this.attendanceTrackingList=result.GetAttendanceTrackingList;
}
}
getHeaderDate(date: any) {
if (this.direction == "en") {
return this.cs.getMonthName(date.getMonth() + 1) + ", " + date.getDate() +" "+ date.getFullYear();
} else {
return this.cs.getMonthNameAr(date.getMonth() + 1) + ", " + date.getDate() +" "+ date.getFullYear();
}
}
openDialog(){
this.cs.confirmAlertDialogAttendance(
() => {
//to open scan();
}, this.ts.trPK('general', 'ok'),
() => {}, this.ts.trPK('general', 'cancel'),
this.ts.trPK('vacation-rule', 'confirmation'),
this.ts.trPK('attendance-tracking', 'confirm-alert3')
+ "<br/>"+"<br/>"+ this.ts.trPK('attendance-tracking', 'confirm-alert1')
+ this.ts.trPK('attendance-tracking', 'confirm-alert2')
);
}
}// end home

@ -101,6 +101,7 @@ import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';
import { AccordinCustomComponent } from './ui/accordin-custom/accordin-custom.component';
import { AccordinTabCustomComponent} from './ui/accordin-custom/accordin-tab-custom/accordin-tab-custom.component'
import {DashboredService} from './services/dashbored/dashbored.service'
import {FabButtonComponent} from './ui/fab-button/fab-button.component'
@NgModule({
imports: [
CommonModule,
@ -113,6 +114,7 @@ import {DashboredService} from './services/dashbored/dashbored.service'
PdfViewerModule
],
declarations: [
FabButtonComponent,
NumberRangeComponent,
SSpacerComponent,
MSpacerComponent,
@ -169,6 +171,7 @@ import {DashboredService} from './services/dashbored/dashbored.service'
AccordinCustomComponent
],
exports: [
FabButtonComponent,
NumberRangeComponent,
SSpacerComponent,
MSpacerComponent,

@ -112,6 +112,64 @@ export class CommonService {
this.nav.pop();
}
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 getMonthNameAr(value: number): string {
switch (value) {
case 1:
return "يناير";
case 2:
return " فبراير";
case 3:
return "مارس";
case 4:
return "أبريل";
case 5:
return "مايو";
case 6:
return "يونيو";
case 7:
return "يوليو";
case 8:
return "أغسطس";
case 9:
return "سبتمبر";
case 10:
return " اكتوبر";
case 11:
return " نوفمبر";
case 12:
return "ديسمبر";
}
}
public round(value: number, decimal: number): string {
const valueStr = value.toString();
const dotIndex = valueStr.indexOf(".");
@ -453,6 +511,51 @@ export class CommonService {
}
async confirmAlertDialogAttendance(
onAccept: any,
acceptLabel: string,
onCancel: any,
cancelLabel: string,
title: string,
message: string
) {
this.clearAllAlerts();
const alert = await this.alertControllerIonic.create({
header: this.ts.trPK("general", "confirm"),
message: message,
buttons: [
{
text: cancelLabel,
role: "cancel",
cssClass: "checkOutCancelBtn",
handler: () => {
if (onCancel) {
onCancel();
}
this.alertControllerIonic.dismiss();
}
},
{
text: acceptLabel,
role: "Confirm",
cssClass: "checkOutOkBtn",
handler: () => {
if (onAccept) {
onAccept();
}
this.alertControllerIonic.dismiss();
}
}
]
});
// this.alerts.push(alert);
await alert.present();
}
public clearAllAlerts() {
// custom solutions because of async issue
const alerts = document.getElementsByTagName("ion-alert");
@ -969,6 +1072,10 @@ export class CommonService {
/*
open calls
*/
public openAttenTrackingpage(){
this.nav.navigateForward(["/attendance-tracking/home"]);
}
public openEitListPage() {
this.nav.navigateForward(["/eit/eit-list"]);
}

@ -0,0 +1,14 @@
<div [class]=" direction == 'rtl' ? ' wrapper wrapper_left' : 'wrapper wrapper_right '">
<div class="circle pulse"></div>
<div class="circle">
<ion-fab class="fab-i ">
<ion-fab-button class="cbookApointmentBtn" (click)="onClick()" >
<!-- <img style="width: 39%; margin-top: -29%;" src="assets/icon/booking.png" /> -->
<ion-icon class="iconFab" name="finger-print"></ion-icon>
<p class="fab-p">{{ 'attendance-tracking,title' | translate }} </p>
</ion-fab-button>
</ion-fab>
</div>
</div>

@ -0,0 +1,233 @@
////////////////////book btn/////////////////////
ion-fab-button{
--background: var(--darkblue)!important;
// background: url(/assets/icon/sliderBG.jpg);
background-size: cover;
background-position: top right;
border-radius: 50%;
height:110px;
width: 110px;
}
.cbookApointmentBtn{
// --background:transparent !important;
--background-focused: transparent;
--background-hover:transparent;
--background-activated: transparent;
--background: transparent;
}
.fab-p{
// position: absolute;
// bottom: 0;
// left: 0;
// right: 0;
// line-height: 0;
// margin: 12px;
// margin-bottom: 28%;
// margin-top: 27px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* line-height: 0; */
margin: 12px;
margin-bottom: 14%;
white-space: pre-line;
font-size: 13px;
}
.fab-i{
top:0px;
left:0px;
}
button-inner{
--top: -11px !important;
}
.iconFab{
margin-top: -37px;
width: 100px;
height: 60px;
}
////////////////animation/////////////////////////
// .wrapper {
// position: fixed;
// width: 60px;
// height: 60px;
// margin: 0 auto;
// left: 65px;
// bottom: 84px;
// z-index: 100;
// }
// .wrapper1{
// left:inherit;
// right: 65px;
// }
// .wrapper .circle {
// width: 110px;
// height: 110px;
// position: absolute;
// top: 0;
// left: -40px;
// right: 0;
// bottom: 20px;
// border-radius: 50%;
// margin: auto;
// -webkit-transform: scale(1, 1);
// transform: scale(1, 1);
// }
.wrapper {
position: fixed;
width: 3cm;
height: 3cm;
/* margin: 0 auto; */
bottom: 2.1cm;
padding: 0;
z-index: 100;
}
.wrapper1{
left:inherit;
right: 65px;
}
.wrapper_left {
left: 4%;
}
.wrapper_right {
right: 4%;
}
.wrapper .circle {
width: 3.3cm;
height: 3.3cm;
position: absolute;
top: 0;
left: 0px;
right: 0;
bottom: 20px;
border-radius: 50%;
margin: auto;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.wrapper .circle {
width: 110px;
height: 110px;
position: absolute;
top: 0;
left: 0px;
right: 0;
bottom: 20px;
border-radius: 50%;
margin: auto;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.wrapper .circle.pulse {
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
background-color: var(--ion-color-secondary-tint);
opacity: 0.7;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@media only screen and (max-width: 350px) {
ion-fab-button{
--background: var(--ion-color-secondary);
height:90px;
width: 90px;
left: 0px;
}
.wrapper .circle {
width: 90px;
height: 90px;
position: absolute;
top: 0;
left: 0px;
right: 0;
bottom: 20px;
border-radius: 50%;
margin: auto;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
.dashboard-container {
margin-bottom: 0.9cm;
}
.clicked {
}
.clicked:hover {
background-color: green;
}
.clicked:focus {
background-color: orange;
}

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

@ -0,0 +1,24 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { TranslatorService } from '../../services/translator/translator.service';
@Component({
selector: 'fab-button',
templateUrl: './fab-button.component.html',
styleUrls: ['./fab-button.component.scss'],
})
export class FabButtonComponent implements OnInit {
@Output() trigger = new EventEmitter();
public direction: any;
constructor(
) { }
ngOnInit() {
this.direction = TranslatorService.getCurrentDirection();
}
public onClick() {
this.trigger.emit();
}
}

@ -114,4 +114,6 @@
</div>
</div>
<fab-button (trigger)="openattentracking()"></fab-button>
<page-trailer [small] = "true"></page-trailer>
</ion-content>

@ -471,7 +471,11 @@ showAttendanceTracking(){
}
openattentracking(){
this.common.openAttenTrackingpage();
//this.cs.navigateForward('/eservices/doctors/search');
}
}

@ -2082,5 +2082,53 @@
"ar":"المجموع "
}
},
"attendance-tracking": {
"title":{
"en": "Mark Attendance",
"ar":"Mark Attendance "
},
"check-in":{
"en": "Check In",
"ar":"Check In"
},
"check-out":{
"en": "Check Out",
"ar":"Check Out"
},
"regular":{
"en": "Regular",
"ar":"Regular"
},
"late-in":{
"en": "Late In",
"ar":"Late In"
},
"today-time-left":{
"en": "TODAY TIME LEFT",
"ar":"TODAY TIME LEFT"
},
"confirm-alert1":{
"en": "Are you sure, you want to",
"ar":"Are you sure, you want to"
},
"confirm-alert2":{
"en":" check out",
"ar":" check out"
},
"confirm-alert3":{
"en":"You did't complate today shift",
"ar":"You did't complate today shift"
},
"shift-time":{
"en":"SHIFT TIME",
"ar":"SHIFT TIME"
}
}
}

@ -845,7 +845,41 @@ color: var(--dark);
margin: 8px !important;
}
.checkOutOkBtn{
margin-left: 55px !important;
margin-right: 55px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
border-radius: 5px !important;
height: 32px !important;
min-height: 30px !important;
background: var(--lightblue) !important;
-webkit-box-flex: 1;
flex: 1 1 auto;
border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
color: white !important;
border: none !important;
}
.checkOutCancelBtn{
margin-left: 55px !important;
margin-right: 55px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
border-radius: 5px !important;
height: 32px !important;
min-height: 30px !important;
background: var(--darkblue) !important;
-webkit-box-flex: 1;
flex: 1 1 auto;
border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
color: white !important;
border: none !important;
}
// .slides-gray-bullets .swiper-wrapper {
// margin-top: 14px !important;
// }

@ -69,6 +69,10 @@
--red:#BE1E2D;
--blue:#223262;
--cyanblue:#1b75bc;
--darkblue:#094875;//dublicate in login branch
--lightblue:#3cb9d5;//dublicate in login branch
// $font-family-base: $fontFamilyMediumEN !default;
// $font-family-ios-base: $fontFamilyMediumEN !default;

Loading…
Cancel
Save