Feaure: Showing Hours worked with styling in attendances.

overlord/src/app/attendance/attendance.component.css

@@ -8,46 +8,46 @@
   justify-content: center;
 }
 
-.present {
-    background-color: #228B22;
+.present :not(.no-bg){
+  background-color: #228B22;
 }
 
-.off-day {
-    background-color: #87CEFA;
+.off-day :not(.no-bg){
+  background-color: #87CEFA;
 }
 
-.on-leave {
-    background-color: #CD5C5C;
+.on-leave :not(.no-bg){
+  background-color: #CD5C5C;
 }
 
-.absent {
-    background-color: #CD0000;
+.absent :not(.no-bg){
+  background-color: #CD0000;
 }
 
-.half-day {
-    background-color: #98FB98;
+.half-day :not(.no-bg){
+  background-color: #98FB98;
 }
 
-.double-duty {
-    background-color: #006400;
+.double-duty :not(.no-bg){
+  background-color: #006400;
 }
 
-.paid-leave-availed {
-    background-color: #EEEE00;
+.paid-leave-availed :not(.no-bg){
+  background-color: #EEEE00;
 }
 
-.casual-leave-availed {
-    background-color: #800080;
+.casual-leave-availed :not(.no-bg){
+  background-color: #800080;
 }
 
-.compensatory-off {
-    background-color: #F5DEB3;
+.compensatory-off :not(.no-bg){
+  background-color: #F5DEB3;
 }
 
-.half-day-pl {
-    background-color: #FFF68F;
+.half-day-pl :not(.no-bg){
+  background-color: #FFF68F;
 }
 
-.half-day-cl {
-    background-color: #FF00FF;
+.half-day-cl :not(.no-bg){
+  background-color: #FF00FF;
 }

overlord/src/app/attendance/attendance.component.html

@@ -54,9 +54,15 @@
         <!-- Prints Column -->
         <ng-container matColumnDef="prints">
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
-          <mat-cell *matCellDef="let row; let i = index">
+          <mat-cell *matCellDef="let row; let i = index" class="no-bg">
             {{row.prints}}
             <mat-icon *ngIf="!form.controls.attendances.controls[i].pristine">new_releases</mat-icon>
+            <mat-chip-list class="no-bg">
+              <mat-chip *ngIf="row.hours.length" class="no-bg" [selected]="row.worked !== 'Error'"
+                        [color]="row.worked === true ? 'primary' : 'warn'">
+                {{row.hours}}
+              </mat-chip>
+            </mat-chip-list>
           </mat-cell>
         </ng-container>
 

overlord/src/app/attendance/attendance.module.ts

@@ -8,6 +8,7 @@ import {
   MatButtonModule,
   MatCardModule,
   MatCheckboxModule,
+  MatChipsModule,
   MatDatepickerModule,
   MatDialogModule,
   MatFormFieldModule,
@@ -52,6 +53,7 @@ export const MY_FORMATS = {
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,
+    MatChipsModule,
     MatDatepickerModule,
     MatDialogModule,
     MatFormFieldModule,

overlord/src/app/employee-attendance/employee-attendance.component.css

@@ -8,46 +8,46 @@
   justify-content: center;
 }
 
-.present {
-    background-color: #228B22;
+.present :not(.no-bg){
+  background-color: #228B22;
 }
 
-.off-day {
-    background-color: #87CEFA;
+.off-day :not(.no-bg){
+  background-color: #87CEFA;
 }
 
-.on-leave {
-    background-color: #CD5C5C;
+.on-leave :not(.no-bg){
+  background-color: #CD5C5C;
 }
 
-.absent {
-    background-color: #CD0000;
+.absent :not(.no-bg){
+  background-color: #CD0000;
 }
 
-.half-day {
-    background-color: #98FB98;
+.half-day :not(.no-bg){
+  background-color: #98FB98;
 }
 
-.double-duty {
-    background-color: #006400;
+.double-duty :not(.no-bg){
+  background-color: #006400;
 }
 
-.paid-leave-availed {
-    background-color: #EEEE00;
+.paid-leave-availed :not(.no-bg){
+  background-color: #EEEE00;
 }
 
-.casual-leave-availed {
-    background-color: #800080;
+.casual-leave-availed :not(.no-bg){
+  background-color: #800080;
 }
 
-.compensatory-off {
-    background-color: #F5DEB3;
+.compensatory-off :not(.no-bg){
+  background-color: #F5DEB3;
 }
 
-.half-day-pl {
-    background-color: #FFF68F;
+.half-day-pl :not(.no-bg){
+  background-color: #FFF68F;
 }
 
-.half-day-cl {
-    background-color: #FF00FF;
+.half-day-cl :not(.no-bg){
+  background-color: #FF00FF;
 }

overlord/src/app/employee-attendance/employee-attendance.component.html

@@ -54,9 +54,15 @@
         <!-- Prints Column -->
         <ng-container matColumnDef="prints">
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
-          <mat-cell *matCellDef="let row; let i = index">
+          <mat-cell *matCellDef="let row; let i = index" class="no-bg">
             {{row.prints}}
             <mat-icon *ngIf="!form.controls.attendances.controls[i].pristine">new_releases</mat-icon>
+            <mat-chip-list class="no-bg">
+              <mat-chip *ngIf="row.hours.length" class="no-bg" [selected]="row.worked !== 'Error'"
+                        [color]="row.worked === true ? 'primary' : 'warn'">
+                {{row.hours}}
+              </mat-chip>
+            </mat-chip-list>
           </mat-cell>
         </ng-container>
 

overlord/src/app/employee-attendance/employee-attendance.module.ts

@@ -8,6 +8,7 @@ import {
   MatButtonModule,
   MatCardModule,
   MatCheckboxModule,
+  MatChipsModule,
   MatDatepickerModule,
   MatDialogModule,
   MatFormFieldModule,
@@ -52,6 +53,7 @@ export const MY_FORMATS = {
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,
+    MatChipsModule,
     MatDatepickerModule,
     MatDialogModule,
     MatFormFieldModule,