|
|
|
|
<ion-header>
|
|
|
|
|
<ion-toolbar class="header-toolbar-new">
|
|
|
|
|
<nav-buttons [enableMenu]="true" [enableBack]="false" [navigate]="false"></nav-buttons>
|
|
|
|
|
<ion-title>DASHBOARD</ion-title>
|
|
|
|
|
<div class="profile-image-container" (click)="openProfilePage()">
|
|
|
|
|
<img [src]="userImage"/>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-toolbar>
|
|
|
|
|
</ion-header>
|
|
|
|
|
|
|
|
|
|
<ion-content class="main-dashboard-container">
|
|
|
|
|
<ion-grid class="main-container contentBg">
|
|
|
|
|
<ion-row class="slideFullWidth">
|
|
|
|
|
<ion-slides [options]="slideOptsOne" class="padding-slide slide">
|
|
|
|
|
<ion-slide *ngFor="let button of statsButtons; let i=index;">
|
|
|
|
|
<app-stats-button
|
|
|
|
|
[title]="button.title"
|
|
|
|
|
[statsValue]="button.statsValue"
|
|
|
|
|
[icon]="button.icon"
|
|
|
|
|
(click)="openStatsButton(button.link)">
|
|
|
|
|
</app-stats-button>
|
|
|
|
|
</ion-slide>
|
|
|
|
|
</ion-slides>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row *ngFor="let menuItem of menuEntries; let i=index">
|
|
|
|
|
|
|
|
|
|
<ion-row class="attendance-module" *ngIf="i == 1">
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
<h3>Monthly Attendance</h3>
|
|
|
|
|
<span>View your Monthly Time Sheet</span>
|
|
|
|
|
<ion-button>
|
|
|
|
|
View Detail
|
|
|
|
|
</ion-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<img src="assets/icon/new-design/attendance_button_icon.png"/>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<ion-label>{{menuItem.PROMPT}}</ion-label>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-slides [options]="slideOptsTwo">
|
|
|
|
|
|
|
|
|
|
<ion-slide *ngFor="let subMenu of menuItem.children; let j=index">
|
|
|
|
|
<app-services-button
|
|
|
|
|
(click)="openPage(subMenu)"
|
|
|
|
|
[title]="subMenu.PROMPT"
|
|
|
|
|
icon="assets/icon/new-design/leave_balance.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-slide>
|
|
|
|
|
</ion-slides>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<!-- <ion-row class="attendance-module">
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
<h3>Monthly Attendance</h3>
|
|
|
|
|
<span>View your Monthly Time Sheet</span>
|
|
|
|
|
<ion-button>
|
|
|
|
|
View Detail
|
|
|
|
|
</ion-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<img src="assets/icon/new-design/attendance_button_icon.png"/>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row> -->
|
|
|
|
|
|
|
|
|
|
<!-- <ion-row>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<ion-label>My Travelling</ion-label>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="Ticket Request"
|
|
|
|
|
icon="assets/icon/new-design/ticket_request.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="Borrowing Passport"
|
|
|
|
|
icon="assets/icon/new-design/borrowing_passport.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="Vacations Rules"
|
|
|
|
|
icon="assets/icon/new-design/vacation_rules.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row> -->
|
|
|
|
|
|
|
|
|
|
<!-- <ion-row>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<ion-label>Miscellaneous</ion-label>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="Uniform Request"
|
|
|
|
|
icon="assets/icon/new-design/uniform_request.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="ID Badge Request"
|
|
|
|
|
icon="assets/icon/new-design/id_badge_request.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="Separation/ Resignation"
|
|
|
|
|
icon="assets/icon/new-design/separation_resignation.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row> -->
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="Recreational Activities"
|
|
|
|
|
icon="assets/icon/new-design/recreational_activities.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="Employee Certificate"
|
|
|
|
|
icon="assets/icon/new-design/employee_certificate.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<app-services-button
|
|
|
|
|
title="IT Forms"
|
|
|
|
|
icon="assets/icon/new-design/it_forms.png">
|
|
|
|
|
</app-services-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row> -->
|
|
|
|
|
</ion-grid>
|
|
|
|
|
<div class="fixed-shift-timer" *ngIf="isCheckedIn" (click)="openattentracking()">
|
|
|
|
|
<span class="subTitle">Time Left Today</span>
|
|
|
|
|
<circle-progress
|
|
|
|
|
[backgroundColor]= "'#094875'"
|
|
|
|
|
[percent]="percent"
|
|
|
|
|
[radius]="50"
|
|
|
|
|
[outerStrokeWidth]="2"
|
|
|
|
|
[innerStrokeWidth]="0"
|
|
|
|
|
[outerStrokeColor]="'#ffffff'"
|
|
|
|
|
[animation]="true"
|
|
|
|
|
[animationDuration]="300"
|
|
|
|
|
[responsive]="false"
|
|
|
|
|
[space]="-4"
|
|
|
|
|
[startFromZero]="false"
|
|
|
|
|
[title]="displayTime"
|
|
|
|
|
titleFontWeight="bold"
|
|
|
|
|
[titleColor]="'#ffffff'"
|
|
|
|
|
[showUnits]="false"
|
|
|
|
|
subtitle=""
|
|
|
|
|
[subtitleColor]="'#ffffff'"
|
|
|
|
|
[clockwise]="false"
|
|
|
|
|
[renderOnClick]="false">
|
|
|
|
|
</circle-progress>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fixed-shift-timer" *ngIf="isCheckedIn === false">
|
|
|
|
|
<fab-button (trigger)="attendance()"></fab-button>
|
|
|
|
|
<page-trailer [small] = "true"></page-trailer>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-content>
|