-
Notifications
You must be signed in to change notification settings - Fork 1
#3-Time clock find project #54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
22b7119
e15d20c
c501044
56247f6
f4b586c
de4fbd6
75b33b3
ae78b3d
e2ac439
01696cf
7c8ca50
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,4 @@ | ||
<div class="parent"> | ||
<app-create-activity class="item"> | ||
</app-create-activity> | ||
|
||
<app-activity-list [activities]="activities" class="item"> | ||
</app-activity-list> | ||
<app-create-activity class="item"></app-create-activity> | ||
<app-activity-list [activities]="activities" class="item"></app-activity-list> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,37 +1,35 @@ | ||
<div class="card-body"> | ||
<div class="scroll"> | ||
<div class="accordion" id="accordionActivities"> | ||
<div *ngIf="activities?.length > 0; else notShow"> | ||
<div class="card" *ngFor="let activity of activities; let rowIndex = index"> | ||
<div class="card-header"> | ||
<h2 class="mb-0"> | ||
<a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex"> | ||
{{activity.name}} | ||
</a> | ||
<div class="btn-group float-right" role="group"> | ||
<i class="far fa-edit btn btn-link"></i> | ||
<i class="far fa-trash-alt btn btn-link"></i> | ||
</div> | ||
</h2> | ||
</div> | ||
|
||
<div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities"> | ||
<div class="card-body"> | ||
<h5>Description:</h5> | ||
<p>{{activity.description}}</p> | ||
</div> | ||
</div> | ||
|
||
</div> | ||
<div class="scroll"> | ||
<div class="accordion" id="accordionActivities"> | ||
<div *ngIf="activities?.length > 0; else notShow"> | ||
<div class="card" *ngFor="let activity of activities; let rowIndex = index"> | ||
<div class="card-header"> | ||
<h2 class="mb-0"> | ||
<a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex"> | ||
{{activity.name}} | ||
</a> | ||
<div class="btn-group float-right" role="group"> | ||
<i class="far fa-edit btn btn-link"></i> | ||
<i class="far fa-trash-alt btn btn-link"></i> | ||
</div> | ||
</h2> | ||
</div> | ||
<div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities"> | ||
<div class="card-body"> | ||
<h5>Description:</h5> | ||
<p>{{activity.description}}</p> | ||
</div> | ||
<ng-template #notShow> | ||
<div class="card"> | ||
<div class="card-body"> | ||
<h4 class="card-text">There are no activities.</h4> | ||
<h5 class="card-text">Please, create one.</h5> | ||
</div> | ||
</div> | ||
</ng-template> | ||
</div> | ||
</div> | ||
</div> | ||
<ng-template #notShow> | ||
<div class="card"> | ||
<div class="card-body"> | ||
<h4 class="card-text">There are no activities.</h4> | ||
<h5 class="card-text">Please, create one.</h5> | ||
</div> | ||
</div> | ||
</ng-template> | ||
</div> | ||
</div> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,9 @@ | ||
<div class="parent"> | ||
<app-create-project class="item" [projectToEdit]="project" (savedProject)="updateProject($event)" (cancelForm)="cancelForm()"> | ||
</app-create-project> | ||
<app-create-project class="item" [projectToEdit]="project" (savedProject)="updateProject($event)" | ||
(cancelForm)="cancelForm()"> | ||
</app-create-project> | ||
|
||
<app-project-list class="item" [projects]="projects" (editProject)="editProject($event)" (deleteProject)="deleteProject($event)"> | ||
</app-project-list> | ||
<app-project-list class="item" [projects]="projects" (editProject)="editProject($event)" | ||
(deleteProject)="deleteProject($event)"> | ||
</app-project-list> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,3 @@ | ||
<div class="text-center mt-5"> | ||
|
||
<p>reports works!</p> | ||
|
||
<p>reports works!</p> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,79 +1,90 @@ | ||
<div class="text-center mt-5"> | ||
<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 class="card"> | ||
<div class="card-header"> | ||
<div class="row"> | ||
<div class="col-2 text-left"> | ||
<strong>Time clock</strong> | ||
</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>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p> | ||
<p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p> | ||
<h6 class="text-left"><strong>Totals</strong></h6> | ||
<hr> | ||
<div class="row"> | ||
<div class="col-4"> | ||
<h6>Current</h6> | ||
<h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}</h3> | ||
</div> | ||
<div class="col-4"> | ||
<h6>Day</h6> | ||
<h3>00:00</h3> | ||
</div> | ||
<div class="col-4"> | ||
<h6>Week</h6> | ||
<h3>00:00</h3> | ||
</div> | ||
</div> | ||
<h6 class="text-left"><strong>Projects</strong></h6> | ||
<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) && !isHidenForm"> | ||
<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 *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control"> | ||
<input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger"> | ||
<div> | ||
<h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this field to clock out.</h6> | ||
</div> | ||
</div> | ||
</div> | ||
</form> | ||
<hr> | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="col text-left" id="optionsContainer"> | ||
<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" id="clockInOutContainer"> | ||
<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 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>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p> | ||
<p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong | ||
class="text-danger">out</strong> at | ||
<strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p> | ||
<h6 class="text-left"><strong>Totals</strong></h6> | ||
<hr> | ||
<div class="row"> | ||
<div class="col-4"> | ||
<h6>Current</h6> | ||
<h3> | ||
{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }} | ||
</h3> | ||
</div> | ||
<div class="col-4"> | ||
<h6>Day</h6> | ||
<h3>00:00</h3> | ||
</div> | ||
<div class="col-4"> | ||
<h6>Week</h6> | ||
<h3>00:00</h3> | ||
</div> | ||
</div> | ||
<h6 class="text-left"><strong>Projects</strong></h6> | ||
<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) && !isHidenForm"> | ||
<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 *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" | ||
class="form-control"> | ||
<input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" | ||
class="form-control border-danger"> | ||
<div> | ||
<h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this | ||
field to clock out.</h6> | ||
</div> | ||
</div> | ||
</div> | ||
</form> | ||
<hr> | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="col text-left" id="optionsContainer"> | ||
<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" id="clockInOutContainer"> | ||
<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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core'; | |
styleUrls: ['./time-clock.component.scss'] | ||
}) | ||
|
||
export class TimeClockComponent implements OnInit { | ||
export class TimeClockComponent implements OnInit { | ||
|
||
projects = [ | ||
{ id: 'P1', name: 'Project 1' }, | ||
|
@@ -43,74 +43,73 @@ export class TimeClockComponent implements OnInit { | |
this.hour = 0; | ||
this.minute = 0; | ||
this.seconds = 0; | ||
} | ||
|
||
employeClockIn(): boolean { | ||
this.isClockInEnable = true; | ||
this.isClockIn = !this.isClockIn; | ||
this.isHidenForm = false; | ||
this.startTimer(); | ||
this.setArrivalAndDepartureTimes(); | ||
return this.isClockIn; | ||
} | ||
|
||
employeClockOut() { | ||
if ( this.isEnterTechnology === false ) { | ||
this.isClockIn = false; | ||
this.showAlertEnterTecnology = true; | ||
} else { | ||
this.setDefaultValuesToFields(); | ||
this.pauseTimer(); | ||
this.setArrivalAndDepartureTimes(); | ||
} | ||
} | ||
|
||
enterTechnology(data: string) { | ||
if ( data.length > 0 ) { | ||
} | ||
|
||
employeClockIn(): boolean { | ||
this.isClockInEnable = true; | ||
this.isClockIn = !this.isClockIn; | ||
this.isHidenForm = false; | ||
this.startTimer(); | ||
this.setArrivalAndDepartureTimes(); | ||
return this.isClockIn; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why are you returning a value here? |
||
} | ||
|
||
employeClockOut() { | ||
if (this.isEnterTechnology === false) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since users can enter more than one technologies, you should rename this var to: |
||
this.isClockIn = false; | ||
this.showAlertEnterTecnology = true; | ||
} else { | ||
this.setDefaultValuesToFields(); | ||
this.pauseTimer(); | ||
this.setArrivalAndDepartureTimes(); | ||
} | ||
} | ||
|
||
enterTechnology(data: string) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what is the intention of this function? |
||
if (data.length > 0) { | ||
this.isEnterTechnology = true; | ||
} else { | ||
this.isEnterTechnology = false; | ||
} | ||
} | ||
|
||
setShowFields(show: boolean) { | ||
this.isHidenForm = false; | ||
if ( this.isClockInEnable !== true ) { | ||
} else { | ||
this.isEnterTechnology = false; | ||
} | ||
} | ||
|
||
setShowFields(show: boolean) { | ||
this.isHidenForm = false; | ||
if (this.isClockInEnable !== true) { | ||
this.isClockIn = false; | ||
this.showFields = show; | ||
if ( !this.execOnlyOneTimeCounter ) { | ||
if (!this.execOnlyOneTimeCounter) { | ||
this.startTimer(); | ||
this.execOnlyOneTimeCounter = true; | ||
} | ||
this.setArrivalAndDepartureTimes(); | ||
} | ||
} | ||
} | ||
|
||
startTimer() { | ||
this.interval = setInterval(() => { | ||
this.timer(); | ||
}, 1000 ); | ||
} | ||
this.timer(); | ||
}, 1000); | ||
} | ||
|
||
pauseTimer() { | ||
clearInterval(this.interval); | ||
} | ||
pauseTimer() { | ||
clearInterval(this.interval); | ||
} | ||
|
||
timer() { | ||
timer() { | ||
this.secondsCounterRealTime += 1; | ||
if ( this.secondsCounterRealTime === 59 ) { | ||
console.log('entroooo'); | ||
this.minuteCounterRealTime += 1; //1 | ||
this.secondsCounterRealTime = 0; //0 | ||
if ( this.minuteCounterRealTime === 59 ) { | ||
if (this.secondsCounterRealTime === 59) { | ||
this.minuteCounterRealTime += 1; | ||
this.secondsCounterRealTime = 0; | ||
if (this.minuteCounterRealTime === 59) { | ||
this.hourCounterRealTime += 1; | ||
this.minuteCounterRealTime = 0; | ||
} | ||
} | ||
} | ||
|
||
setArrivalAndDepartureTimes() { | ||
if ( !this.execOnlyOneTimeClockIn ) { | ||
if (!this.execOnlyOneTimeClockIn) { | ||
this.currentDate = new Date(); | ||
this.hour = this.currentDate.getHours(); | ||
this.minute = this.currentDate.getMinutes(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this.isClockIn = true; ???