Skip to content

Commit a5e15ee

Browse files
enriquezreneenriquezrene
authored
Merge pull request #16 from ioet/Time_Clock-Clock-In
Time clock clock in
2 parents ddfad12 + 2e0bc6b commit a5e15ee

File tree

9 files changed

+157
-53
lines changed

9 files changed

+157
-53
lines changed

‎src/app/app-routing.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { TimeEntriesComponent } from './components/options-sidebar/time-entries/
77
import { TimeOffComponent } from './components/options-sidebar/time-off/time-off.component';
88
import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
99

10-
1110
const routes: Routes = [
1211
{path: 'getting-started', component: GettingStartedComponent},
1312
{path: 'reports', component: ReportsComponent},

‎src/app/app.module.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,28 @@ import { NgModule } from '@angular/core';
44
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
55

66
import { AppRoutingModule } from './app-routing.module';
7+
78
import { AppComponent } from './app.component';
89
import { NavbarComponent } from './components/shared/navbar/navbar.component';
910
import { UserComponent } from './components/shared/user/user.component';
1011
import { SidebarComponent } from './components/shared/sidebar/sidebar.component';
1112
import { ClockComponent } from './components/shared/clock/clock.component';
13+
import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
1214
import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
1315
import { ProjectListComponent } from './components/shared/project-list/project-list.component';
1416
import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
15-
import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
1617
import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
1718
import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
1819

20+
1921
@NgModule({
2022
declarations: [
2123
AppComponent,
2224
NavbarComponent,
2325
UserComponent,
2426
SidebarComponent,
2527
ClockComponent,
28+
TimeClockComponent,
2629
ProjectManagementComponent,
2730
ProjectListComponent,
2831
CreateProjectComponent,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ describe('GettingStartedComponent', () => {
3535
const { app, fixture } = setup();
3636
fixture.detectChanges();
3737
const compile = fixture.debugElement.nativeElement;
38-
const h1tag = compile.querySelector('p');
39-
expect(h1tag.textContent).toBe('getting-started works!');
38+
const ptag = compile.querySelector('p');
39+
expect(ptag.textContent).toBe('getting-started works!');
4040
}));
4141

4242

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ describe('ReportsComponent', () => {
3535
const { app, fixture } = setup();
3636
fixture.detectChanges();
3737
const compile = fixture.debugElement.nativeElement;
38-
const h1tag = compile.querySelector('p');
39-
expect(h1tag.textContent).toBe('reports works!');
38+
const ptag = compile.querySelector('p');
39+
expect(ptag.textContent).toBe('reports works!');
4040
}));
4141

42-
});
42+
});

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

Lines changed: 83 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,85 @@
1-
<div class="container">
2-
<div class="row">
3-
<div class="col content-ClockIn">
4-
<h5>PROJECTS</h5>
5-
<app-project-list-hover
6-
[projects]="projects"
7-
(showFields)="setShowFields($event)"
8-
></app-project-list-hover>
9-
<br />
10-
<div *ngIf="showFields">
11-
<app-details-fields></app-details-fields>
12-
</div>
1+
<div class="text-center mt-3">
2+
3+
<div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
4+
Field technology is requiered. Enter this field for clock out.
135
</div>
14-
<div class="col content-ClockIn">
15-
<div class="timer">
16-
<h5>Timer Here!</h5>
17-
</div>
6+
7+
<div class="card">
8+
<div class="card-header">
9+
<div class="row">
10+
<div class="col-2 text-left">
11+
<strong>Time clock</strong>
12+
</div>
13+
<div class="col-10 text-right">
14+
<i class="far fa-question-circle"></i>
15+
</div>
16+
</div>
17+
</div>
18+
19+
<div class="card-body">
20+
<p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ clockInUsername }}</strong></p>
21+
<p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ clockOutUsername }}</strong></p>
22+
<h6 class="text-left"><strong>Totals</strong></h6>
23+
<hr>
24+
<div class="row">
25+
<div class="col-4">
26+
<h6>Current</h6>
27+
<h3>-</h3>
28+
</div>
29+
<div class="col-4">
30+
<h6>Day</h6>
31+
<h3>4:22</h3>
32+
</div>
33+
<div class="col-4">
34+
<h6>Week</h6>
35+
<h3>14:00</h3>
36+
</div>
37+
</div>
38+
<h6 class="text-left"><strong>Projects</strong></h6>
39+
<form>
40+
<div class="form-group">
41+
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
42+
</div>
43+
</form>
44+
<p class="text-left"><i class="fas fa-folder"></i><strong> Top</strong></p>
45+
<ul class="list-group">
46+
<app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
47+
</ul>
48+
<br>
49+
<form *ngIf="!isClockIn || showFields">
50+
<div class="form-group row">
51+
<label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
52+
<div class="col-sm-10">
53+
<input type="text" class="form-control">
54+
</div>
55+
</div>
56+
<div class="form-group row">
57+
<label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
58+
<div class="col-sm-10">
59+
<input type="text" class="form-control">
60+
</div>
61+
</div>
62+
<div class="form-group row">
63+
<label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
64+
<div class="col-sm-10">
65+
<input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
66+
</div>
67+
</div>
68+
</form>
69+
<hr>
70+
<div class="container">
71+
<div class="row">
72+
<div class="col text-left">
73+
<button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
74+
Options
75+
</button>
76+
</div>
77+
<div class="col text-right">
78+
<button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
79+
<button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
1884
</div>
19-
</div>
20-
</div>
85+
</div>

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
2-
import { By } from "@angular/platform-browser";
3-
import { DebugElement } from "@angular/core";
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { By } from '@angular/platform-browser';
3+
import { DebugElement } from '@angular/core';
44

5-
import { TimeClockComponent } from "./time-clock.component";
6-
import { ProjectListHoverComponent } from "../../shared/project-list-hover/project-list-hover.component";
5+
import { TimeClockComponent } from './time-clock.component';
6+
import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
77

8-
describe("TimeClockComponent", () => {
8+
describe('TimeClockComponent', () => {
99
let component: TimeClockComponent;
1010
let fixture: ComponentFixture<TimeClockComponent>;
1111
let de: DebugElement;
@@ -30,20 +30,21 @@ describe("TimeClockComponent", () => {
3030
fixture.detectChanges();
3131
});
3232

33-
it("should be created", () => {
33+
it('should be created', () => {
3434
expect(component).toBeTruthy();
3535
});
3636

37-
it("should have p tag as 'time-clock works!'", async(() => {
37+
it('should have p tag as \'Dario clocked out at hh:mm:ss\'', async(() => {
3838
// tslint:disable-next-line: no-shadowed-variable
3939
const { app, fixture } = setup();
4040
fixture.detectChanges();
4141
const compile = fixture.debugElement.nativeElement;
42-
const h1tag = compile.querySelector("p");
43-
expect(h1tag.textContent).toBe("time-clock works!");
42+
const ptag = compile.querySelector('p');
43+
expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss');
44+
4445
}));
4546

46-
it("should set showfileds as true", () => {
47+
it('should set showfileds as true', () => {
4748
const show = true;
4849
component.setShowFields(show);
4950
expect(component.showFields).toBe(true);

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

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,61 @@
1-
import { Component, OnInit } from "@angular/core";
1+
import { Component, OnInit } from '@angular/core';
22

33
@Component({
4-
selector: "app-time-clock",
5-
templateUrl: "./time-clock.component.html",
6-
styleUrls: ["./time-clock.component.css"]
4+
selector: 'app-time-clock',
5+
templateUrl: './time-clock.component.html',
6+
styleUrls: ['./time-clock.component.css']
77
})
8-
export class TimeClockComponent implements OnInit {
8+
export class TimeClockComponent implements OnInit {
9+
910
projects = [
10-
{ id: "P1", name: "Project 1" },
11-
{ id: "P2", name: "Project 2" },
12-
{ id: "P3", name: "Project 3" },
13-
{ id: "P4", name: "Project 4" }
11+
{ id: 'P1', name: 'Project 1' },
12+
{ id: 'P2', name: 'Project 2' },
13+
{ id: 'P3', name: 'Project 3' },
14+
{ id: 'P4', name: 'Project 4' }
1415
];
1516

17+
username = 'Dario';
18+
clockInUsername = 'hh:mm:ss';
19+
clockOutUsername = 'hh:mm:ss';
20+
21+
isClockIn: boolean;
22+
isEnterTechnology: boolean;
23+
showAlertEnterTecnology: boolean;
1624
showFields: boolean;
1725

18-
constructor() {}
26+
constructor() {
27+
this.isClockIn = true;
28+
this.isEnterTechnology = false;
29+
}
1930

20-
ngOnInit(): void {}
31+
employeClockIn(): boolean {
32+
this.isClockIn = !this.isClockIn;
33+
return this.isClockIn;
34+
}
35+
36+
employeClockOut() {
37+
if ( this.isEnterTechnology === false ) {
38+
this.isClockIn = false;
39+
this.showAlertEnterTecnology = true;
40+
} else {
41+
this.isClockIn = true;
42+
this.isEnterTechnology = false;
43+
this.showAlertEnterTecnology = false;
44+
}
45+
}
2146

22-
setShowFields(show: boolean) {
47+
enterTechnology(data: string) {
48+
if ( data.length > 0 ) {
49+
this.isEnterTechnology = true;
50+
} else {
51+
this.isEnterTechnology = false;
52+
}
53+
}
54+
55+
setShowFields(show: boolean) {
56+
this.isClockIn = false;
2357
this.showFields = show;
2458
}
59+
60+
ngOnInit(): void {}
2561
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ describe('TimeEntriesComponent', () => {
3535
const { app, fixture } = setup();
3636
fixture.detectChanges();
3737
const compile = fixture.debugElement.nativeElement;
38-
const h1tag = compile.querySelector('p');
39-
expect(h1tag.textContent).toBe('time-entries works!');
38+
const ptag = compile.querySelector('p');
39+
expect(ptag.textContent).toBe('time-entries works!');
4040
}));
4141

42-
});
42+
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe('TimeOffComponent', () => {
3535
const { app, fixture } = setup();
3636
fixture.detectChanges();
3737
const compile = fixture.debugElement.nativeElement;
38-
const h1tag = compile.querySelector('p');
39-
expect(h1tag.textContent).toBe('time-off works!');
38+
const ptag = compile.querySelector('p');
39+
expect(ptag.textContent).toBe('time-off works!');
4040
}));
4141
});

0 commit comments

Comments
 (0)