Merge branch 'Time_Clock-Clock-In' of https://github.com/ioet/time-tracker-ui into Clock-Component

Author: daros10

src/app/components/options-sidebar/time-clock/time-clock.component.html

@@ -1,4 +1,5 @@
 <div class="text-center mt-3">
+
     <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
         Field technology is requiered. Enter this field for clock out.
     </div>
@@ -42,22 +43,10 @@ <h6 class="text-left"><strong>Projects</strong></h6>
             </form>
             <p class="text-left"><i class="fas fa-folder"></i><strong>  Top</strong></p>
             <ul class="list-group">
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    Customer › ernst-and-young
-                    <button type="button" class="btn btn-success btn-sm">Clock In</button>
-                </li>
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    Customer
-                    <i class="fas fa-chevron-right"></i>
-
-                </li>
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    Training
-                    <i class="fas fa-chevron-right"></i>
-                </li>
+                <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
             </ul>
             <br>
-            <form *ngIf="!isClockIn">
+            <form *ngIf="!isClockIn || showFields">
                 <div class="form-group row">
                     <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
                     <div class="col-sm-10">
@@ -93,3 +82,4 @@ <h6 class="text-left"><strong>Projects</strong></h6>
             </div>
         </div>
     </div>
+</div>

src/app/components/options-sidebar/time-clock/time-clock.component.ts

@@ -1,16 +1,18 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: "app-time-clock",
-  templateUrl: "./time-clock.component.html",
-  styleUrls: ["./time-clock.component.css"]
+  selector: 'app-time-clock',
+  templateUrl: './time-clock.component.html',
+  styleUrls: ['./time-clock.component.css']
 })
-export class TimeClockComponent implements OnInit {
+
+export class TimeClockComponent  implements OnInit {
+
   projects = [
-    { id: "P1", name: "Project 1" },
-    { id: "P2", name: "Project 2" },
-    { id: "P3", name: "Project 3" },
-    { id: "P4", name: "Project 4" }
+    { id: 'P1', name: 'Project 1' },
+    { id: 'P2', name: 'Project 2' },
+    { id: 'P3', name: 'Project 3' },
+    { id: 'P4', name: 'Project 4' }
   ];
 
   username = 'Dario';
@@ -19,9 +21,11 @@ export class TimeClockComponent implements OnInit {
   isClockIn: boolean;
   isEnterTechnology: boolean;
   showAlertEnterTecnology: boolean;
+
   hour: number;
   minute: number;
   seconds: number;
+
   showFields: boolean;
 
   constructor() {
@@ -55,12 +59,12 @@ export class TimeClockComponent implements OnInit {
        this.isEnterTechnology = false;
      }
    }
-  
-    setShowFields(show: boolean) {
+
+   setShowFields(show: boolean) {
+    this.isClockIn = false;
     this.showFields = show;
   }
 
-   ngOnInit(): void {
-  }
-  
+  ngOnInit(): void {}
+
 }