Moved from tslint to eslint as tslint was depreciated.

Added prettier and also prettied all the typescript files using prettier

ESLint is using the AirBnB rules which are the most strict to lint the files.

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

@@ -4,39 +4,73 @@
   </mat-card-title-group>
   <mat-card-content>
     <form [formGroup]="form" fxLayout="column">
-      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px"
-           fxLayoutAlign="space-around start">
+      <div
+        fxLayout="row"
+        fxLayout.lt-md="column"
+        fxLayoutGap="20px"
+        fxLayoutGap.lt-md="0px"
+        fxLayoutAlign="space-around start"
+      >
         <mat-form-field fxFlex>
-          <input matInput [matDatepicker]="startDate" (focus)="startDate.open()" placeholder="Start Date"
-                 formControlName="startDate" autocomplete="off">
+          <input
+            matInput
+            [matDatepicker]="startDate"
+            (focus)="startDate.open()"
+            placeholder="Start Date"
+            formControlName="startDate"
+            autocomplete="off"
+          />
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field fxFlex>
-          <input matInput [matDatepicker]="finishDate" (focus)="finishDate.open()" placeholder="Finish Date"
-                 formControlName="finishDate" autocomplete="off">
+          <input
+            matInput
+            [matDatepicker]="finishDate"
+            (focus)="finishDate.open()"
+            placeholder="Finish Date"
+            formControlName="finishDate"
+            autocomplete="off"
+          />
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px"
-           fxLayoutAlign="space-around start">
+      <div
+        fxLayout="row"
+        fxLayout.lt-md="column"
+        fxLayoutGap="20px"
+        fxLayoutGap.lt-md="0px"
+        fxLayoutAlign="space-around start"
+      >
         <mat-form-field fxFlex="80">
-          <input type="text" matInput #employeeElement placeholder="Employee" [matAutocomplete]="auto"
-                 formControlName="employee" autocomplete="off">
-          <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn"
-                            (optionSelected)="selected($event)">
-            <mat-option *ngFor="let employee of employees | async" [value]="employee">{{employee.name}}</mat-option>
+          <input
+            type="text"
+            matInput
+            #employeeElement
+            placeholder="Employee"
+            [matAutocomplete]="auto"
+            formControlName="employee"
+            autocomplete="off"
+          />
+          <mat-autocomplete
+            #auto="matAutocomplete"
+            autoActiveFirstOption
+            [displayWith]="displayFn"
+            (optionSelected)="selected($event)"
+          >
+            <mat-option *ngFor="let employee of employees | async" [value]="employee">{{
+              employee.name
+            }}</mat-option>
           </mat-autocomplete>
         </mat-form-field>
         <button fxFlex="20" mat-raised-button color="primary" (click)="show()">Show</button>
       </div>
       <mat-table #table [dataSource]="dataSource" formArrayName="attendances">
-
         <!-- Date Column -->
         <ng-container matColumnDef="date">
           <mat-header-cell *matHeaderCellDef class="center">Date</mat-header-cell>
-          <mat-cell *matCellDef="let row" class="center">{{row.date}}</mat-cell>
+          <mat-cell *matCellDef="let row" class="center">{{ row.date }}</mat-cell>
         </ng-container>
 
         <!-- Status Column -->
@@ -55,23 +89,34 @@
         <ng-container matColumnDef="prints">
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
           <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>
+            {{ 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.hoursWorked.length" class="no-bg" [selected]="true"
-                        [color]="row.fullDay === true ? 'primary' : 'warn'">
-                {{row.hoursWorked}}
+              <mat-chip
+                *ngIf="row.hoursWorked.length"
+                class="no-bg"
+                [selected]="true"
+                [color]="row.fullDay === true ? 'primary' : 'warn'"
+              >
+                {{ row.hoursWorked }}
               </mat-chip>
             </mat-chip-list>
           </mat-cell>
         </ng-container>
 
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" [class]="getClass(i)"></mat-row>
+        <mat-row
+          *matRowDef="let row; let i = index; columns: displayedColumns"
+          [class]="getClass(i)"
+        ></mat-row>
       </mat-table>
     </form>
   </mat-card-content>
   <mat-card-actions>
-    <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
+    <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">
+      Save
+    </button>
   </mat-card-actions>
 </mat-card>