diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index f7fe85f6d..65da222c8 100644 --- a/src/app/app-routing.module.ts +++ b/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}, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4aeaf92c6..d211b1109 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,18 +4,20 @@ 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, @@ -23,6 +25,7 @@ import { ProjectListHoverComponent } from './components/shared/project-list-hove UserComponent, SidebarComponent, ClockComponent, + TimeClockComponent, ProjectManagementComponent, ProjectListComponent, CreateProjectComponent, diff --git a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts index 5bb8ecb36..bff58d1a2 100644 --- a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts +++ b/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!'); })); diff --git a/src/app/components/options-sidebar/reports/reports.component.spec.ts b/src/app/components/options-sidebar/reports/reports.component.spec.ts index 45b9dbdf9..f2f2f33e7 100644 --- a/src/app/components/options-sidebar/reports/reports.component.spec.ts +++ b/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!'); })); -}); +}); \ No newline at end of file diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html index 1474cef3e..d92c43de2 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.html +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html @@ -1,20 +1,85 @@ -
-
-
-
PROJECTS
- -
-
- -
+
+ + -
-
-
Timer Here!
-
+ +
+
+
+
+ Time clock +
+
+ +
+
+
+ +
+

{{ username }} clocked in at {{ clockInUsername }}

+

{{ username }} clocked out at {{ clockOutUsername }}

+
Totals
+
+
+
+
Current
+

-

+
+
+
Day
+

4:22

+
+
+
Week
+

14:00

+
+
+
Projects
+
+
+ +
+
+

Top

+
    + +
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
-
-
+
\ No newline at end of file diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts index a6f8761a5..9d13312c0 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts @@ -1,11 +1,11 @@ -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; let de: DebugElement; @@ -30,20 +30,21 @@ 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); diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index 1a9be2774..2a9c9a7f6 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -1,25 +1,61 @@ -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; showFields: boolean; - constructor() {} + constructor() { + this.isClockIn = true; + this.isEnterTechnology = false; + } - ngOnInit(): void {} + employeClockIn(): boolean { + this.isClockIn = !this.isClockIn; + return this.isClockIn; + } + + employeClockOut() { + if ( this.isEnterTechnology === false ) { + this.isClockIn = false; + this.showAlertEnterTecnology = true; + } else { + this.isClockIn = true; + this.isEnterTechnology = false; + this.showAlertEnterTecnology = false; + } + } - setShowFields(show: boolean) { + 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 {} } diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts index ee057a38e..304646888 100644 --- a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts +++ b/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!'); })); -}); +}); \ No newline at end of file diff --git a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts index 4035649cd..8aa6ed544 100644 --- a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts +++ b/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!'); })); });