Clock component

src/app/app-routing.module.ts

@@ -7,7 +7,6 @@ import { TimeEntriesComponent } from './components/options-sidebar/time-entries/
 import { TimeOffComponent } from './components/options-sidebar/time-off/time-off.component';
 import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
 
-
 const routes: Routes = [
   {path: 'getting-started', component: GettingStartedComponent},
   {path: 'reports', component: ReportsComponent},

src/app/app.module.ts

@@ -4,25 +4,28 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
+
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/shared/navbar/navbar.component';
 import { UserComponent } from './components/shared/user/user.component';
 import { SidebarComponent } from './components/shared/sidebar/sidebar.component';
 import { ClockComponent } from './components/shared/clock/clock.component';
+import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
 import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
 import { ProjectListComponent } from './components/shared/project-list/project-list.component';
 import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
-import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
 import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
 import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
     NavbarComponent,
     UserComponent,
     SidebarComponent,
     ClockComponent,
+    TimeClockComponent,
     ProjectManagementComponent,
     ProjectListComponent,
     CreateProjectComponent,

src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts

@@ -35,8 +35,8 @@ describe('GettingStartedComponent', () => {
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
-    const h1tag = compile.querySelector('p');
-    expect(h1tag.textContent).toBe('getting-started works!');
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('getting-started works!');
   }));
 
 

src/app/components/options-sidebar/reports/reports.component.spec.ts

@@ -35,8 +35,8 @@ describe('ReportsComponent', () => {
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
-    const h1tag = compile.querySelector('p');
-    expect(h1tag.textContent).toBe('reports works!');
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('reports works!');
   }));
 
-});
+});

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

@@ -1,20 +1,85 @@
-<div class="container">
-  <div class="row">
-    <div class="col content-ClockIn">
-      <h5>PROJECTS</h5>
-      <app-project-list-hover
-        [projects]="projects"
-        (showFields)="setShowFields($event)"
-      ></app-project-list-hover>
-      <br />
-      <div *ngIf="showFields">
-        <app-details-fields></app-details-fields>
-      </div>
+<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>
-    <div class="col content-ClockIn">
-      <div class="timer">
-        <h5>Timer Here!</h5>
-      </div>
+
+    <div class="card">
+        <div class="card-header">
+            <div class="row">
+                <div class="col-2 text-left">
+                    <strong>Time clock</strong>
+                </div>
+                <div class="col-10 text-right">
+                    <i class="far fa-question-circle"></i>
+                </div>
+            </div>
+        </div>
+
+        <div class="card-body">
+            <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ clockInUsername }}</strong></p>
+            <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ clockOutUsername }}</strong></p>
+            <h6 class="text-left"><strong>Totals</strong></h6>
+            <hr>
+            <div class="row">
+                <div class="col-4">
+                    <h6>Current</h6>
+                    <h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+                </div>
+                <div class="col-4">
+                    <h6>Day</h6>
+                    <h3>4:22</h3>
+                </div>
+                <div class="col-4">
+                    <h6>Week</h6>
+                    <h3>14:00</h3>
+                </div>
+            </div>
+            <h6 class="text-left"><strong>Projects</strong></h6>
+            <form>
+                <div class="form-group">
+                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
+                </div>
+            </form>
+            <p class="text-left"><i class="fas fa-folder"></i><strong>  Top</strong></p>
+            <ul class="list-group">
+                <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
+            </ul>
+            <br>
+            <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">
+                        <input type="text" class="form-control">
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
+                    <div class="col-sm-10">
+                        <input type="text" class="form-control">
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
+                    <div class="col-sm-10">
+                        <input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+                    </div>
+                </div>
+            </form>
+            <hr>
+            <div class="container">
+                <div class="row">
+                    <div class="col text-left">
+                        <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Options
+                          </button>
+                    </div>
+                    <div class="col text-right">
+                        <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
+                        <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
+</div>

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

@@ -1,11 +1,10 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-import { By } from "@angular/platform-browser";
-import { DebugElement } from "@angular/core";
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { TimeClockComponent } from './time-clock.component';
+import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
 
-import { TimeClockComponent } from "./time-clock.component";
-import { ProjectListHoverComponent } from "../../shared/project-list-hover/project-list-hover.component";
-
-describe("TimeClockComponent", () => {
+describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
   let fixture: ComponentFixture<TimeClockComponent>;
   let de: DebugElement;
@@ -30,20 +29,20 @@ describe("TimeClockComponent", () => {
     fixture.detectChanges();
   });
 
-  it("should be created", () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 
-  it("should have p tag as 'time-clock works!'", async(() => {
+  it('should have p tag as \'Dario clocked out at hh:mm:ss\'', async(() => {
     // tslint:disable-next-line: no-shadowed-variable
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
-    const h1tag = compile.querySelector("p");
-    expect(h1tag.textContent).toBe("time-clock works!");
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss');
   }));
 
-  it("should set showfileds as true", () => {
+  it('should set showfileds as true', () => {
     const show = true;
     component.setShowFields(show);
     expect(component.showFields).toBe(true);

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

@@ -1,25 +1,70 @@
-import { Component, OnInit } 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';
+  clockInUsername = 'hh:mm:ss';
+  clockOutUsername = 'hh:mm:ss';
+  isClockIn: boolean;
+  isEnterTechnology: boolean;
+  showAlertEnterTecnology: boolean;
+
+  hour: number;
+  minute: number;
+  seconds: number;
+
   showFields: boolean;
 
-  constructor() {}
+  constructor() {
+    this.isClockIn = true;
+    this.isEnterTechnology = false;
+    this.hour = 0;
+    this.minute = 0;
+    this.seconds = 0;
+   }
 
-  ngOnInit(): void {}
+   employeClockIn(): boolean {
+     this.isClockIn = !this.isClockIn;
+     return this.isClockIn;
+   }
 
-  setShowFields(show: boolean) {
+   employeClockOut() {
+     if ( this.isEnterTechnology === false ) {
+       this.isClockIn = false;
+       this.showAlertEnterTecnology = true;
+     } else {
+       this.isClockIn = true;
+       this.isEnterTechnology = false;
+       this.showAlertEnterTecnology = false;
+     }
+   }
+
+   enterTechnology(data: string) {
+     if ( data.length > 0 ) {
+      this.isEnterTechnology = true;
+     } else {
+       this.isEnterTechnology = false;
+     }
+   }
+
+   setShowFields(show: boolean) {
+    this.isClockIn = false;
     this.showFields = show;
   }
+
+  ngOnInit(): void {}
+
 }

src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts

@@ -35,8 +35,8 @@ describe('TimeEntriesComponent', () => {
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
-    const h1tag = compile.querySelector('p');
-    expect(h1tag.textContent).toBe('time-entries works!');
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('time-entries works!');
   }));
 
-});
+});

src/app/components/options-sidebar/time-off/time-off.component.spec.ts

@@ -35,7 +35,7 @@ describe('TimeOffComponent', () => {
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
-    const h1tag = compile.querySelector('p');
-    expect(h1tag.textContent).toBe('time-off works!');
+    const ptag = compile.querySelector('p');
+    expect(ptag.textContent).toBe('time-off works!');
   }));
 });

src/app/components/shared/clock/clock.component.spec.ts

@@ -6,6 +6,7 @@ describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ClockComponent ]
@@ -22,4 +23,15 @@ describe('ClockComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should show the current hour of day', () => {
+    const currentHour = 11;
+    expect(component.currentDate.getHours()).toEqual(currentHour);
+  });
+
+  it('should show the current minutes of day', () => {
+    const currenMinutes = 5;
+    expect(component.currentDate.getMinutes()).toEqual(currenMinutes);
+  });
+
 });

src/app/components/shared/clock/clock.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { interval, timer } from 'rxjs';
 
 @Component({
   selector: 'app-clock',
@@ -7,23 +8,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ClockComponent implements OnInit {
 
-  currentDate: Date;
+  currentDate: Date = new Date();
   hour: number;
   minutes: number;
   seconds: number;
   displayTime: boolean;
 
   constructor() {
-    this.currentDate = new Date();
-    this.hour = this.currentDate.getHours();
-    this.minutes = this.currentDate.getMinutes();
-    this.seconds = this.currentDate.getSeconds();
+    this.showClcok();
     this.displayTime = false;
     setTimeout(() => {
       this.displayTime = true;
     }, 3000);
    }
 
+   showClcok() {
+    const timenInterval = interval(1000);
+    timenInterval.subscribe( (data) => {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minutes = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+    });
+   }
+
   ngOnInit(): void {
   }