Skip to content

Commit ca25bbc

Browse files
daros10daros10
committed
fixed bugs
1 parent 560f325 commit ca25bbc

File tree

3 files changed

+123
-23
lines changed

3 files changed

+123
-23
lines changed

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

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,42 @@
11
.content-ClockIn {
2-
padding: 2.1rem 1rem;
2+
padding: 2.1rem 1rem;
33
}
44

55
.timer {
6-
align-items: center;
7-
display: flex;
8-
height: 100%;
9-
justify-content: center;
6+
align-items: center;
7+
display: flex;
8+
height: 100%;
9+
justify-content: center;
1010
}
11+
12+
.place-holder-danger::-webkit-input-placeholder {
13+
/* WebKit, Blink, Edge */
14+
color: #909;
15+
}
16+
17+
.place-holder-danger:-moz-placeholder {
18+
/* Mozilla Firefox 4 to 18 */
19+
color: #909;
20+
opacity: 1;
21+
}
22+
23+
.placeholder-danger::-moz-placeholder {
24+
/* Mozilla Firefox 19+ */
25+
color: #DC3545 !important;
26+
opacity: 1;
27+
}
28+
29+
.placeholder-danger:-ms-input-placeholder {
30+
/* Internet Explorer 10-11 */
31+
color: #DC3545 !important;
32+
}
33+
34+
.placeholder-danger::-ms-input-placeholder {
35+
/* Microsoft Edge */
36+
color: #DC3545 !important;
37+
}
38+
39+
.placeholder-danger::placeholder {
40+
/* Most modern browsers support this now. */
41+
color: #DC3545 !important;
42+
}

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
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.
5-
</div>
6-
1+
<div class="text-center mt-5">
72
<div class="card">
83
<div class="card-header">
94
<div class="row">
@@ -17,14 +12,14 @@
1712
</div>
1813

1914
<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>
15+
<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>
16+
<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>
2217
<h6 class="text-left"><strong>Totals</strong></h6>
2318
<hr>
2419
<div class="row">
2520
<div class="col-4">
2621
<h6>Current</h6>
27-
<h3>-</h3>
22+
<h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}</h3>
2823
</div>
2924
<div class="col-4">
3025
<h6>Day</h6>
@@ -62,7 +57,8 @@ <h6 class="text-left"><strong>Projects</strong></h6>
6257
<div class="form-group row">
6358
<label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
6459
<div class="col-sm-10">
65-
<input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
60+
<input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
61+
<input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger placeholder-danger " placeholder="Field technology is requiered. Enter this field for clock out.">
6662
</div>
6763
</div>
6864
</form>

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

Lines changed: 80 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Component, OnInit } from '@angular/core';
55
templateUrl: './time-clock.component.html',
66
styleUrls: ['./time-clock.component.css']
77
})
8+
89
export class TimeClockComponent implements OnInit {
910

1011
projects = [
@@ -14,22 +15,40 @@ export class TimeClockComponent implements OnInit {
1415
{ id: 'P4', name: 'Project 4' }
1516
];
1617

18+
currentDate: Date = new Date();
1719
username = 'Dario';
18-
clockInUsername = 'hh:mm:ss';
19-
clockOutUsername = 'hh:mm:ss';
20-
2120
isClockIn: boolean;
2221
isEnterTechnology: boolean;
2322
showAlertEnterTecnology: boolean;
2423
showFields: boolean;
24+
hourCounterRealTime: number;
25+
minuteCounterRealTime: number;
26+
secondsCounterRealTime: number;
27+
hour: number;
28+
minute: number;
29+
seconds: number;
30+
interval;
31+
dataTechnology: string;
32+
execOnlyOneTimeCounter = 0;
33+
execOnlyOneTimeClockIn = 0;
34+
isClockInEnable = false;
2535

2636
constructor() {
2737
this.isClockIn = true;
2838
this.isEnterTechnology = false;
39+
this.hourCounterRealTime = 0;
40+
this.minuteCounterRealTime = 0;
41+
this.secondsCounterRealTime = 0;
42+
this.hour = 0;
43+
this.minute = 0;
44+
this.seconds = 0;
2945
}
3046

3147
employeClockIn(): boolean {
48+
this.isClockInEnable = true;
3249
this.isClockIn = !this.isClockIn;
50+
this.startTimer();
51+
this.setTimeToInOut();
3352
return this.isClockIn;
3453
}
3554

@@ -38,13 +57,15 @@ export class TimeClockComponent implements OnInit {
3857
this.isClockIn = false;
3958
this.showAlertEnterTecnology = true;
4059
} else {
41-
this.isClockIn = true;
42-
this.isEnterTechnology = false;
43-
this.showAlertEnterTecnology = false;
60+
this.setVarToEmpty();
61+
this.pauseTimer();
62+
this.setTimeToInOut();
63+
4464
}
4565
}
4666

4767
enterTechnology(data: string) {
68+
this.dataTechnology = data;
4869
if ( data.length > 0 ) {
4970
this.isEnterTechnology = true;
5071
} else {
@@ -53,9 +74,60 @@ export class TimeClockComponent implements OnInit {
5374
}
5475

5576
setShowFields(show: boolean) {
56-
this.isClockIn = false;
57-
this.showFields = show;
77+
if ( this.isClockInEnable !== true ) {
78+
this.isClockIn = false;
79+
this.showFields = show;
80+
if ( this.execOnlyOneTimeCounter === 0 ) {
81+
this.startTimer();
82+
this.execOnlyOneTimeCounter++;
83+
}
84+
this.setTimeToInOut();
85+
}
86+
}
87+
88+
startTimer() {
89+
this.interval = setInterval(() => {
90+
this.timer();
91+
}, 1000 );
92+
}
93+
94+
pauseTimer() {
95+
clearInterval(this.interval);
96+
}
97+
98+
timer() {
99+
this.secondsCounterRealTime += 1;
100+
if ( this.secondsCounterRealTime === 59 ) {
101+
this.minuteCounterRealTime += 1;
102+
this.secondsCounterRealTime = 0;
103+
if ( this.minuteCounterRealTime === 59 ) {
104+
this.hourCounterRealTime += 1;
105+
this.minuteCounterRealTime = 0;
106+
}
107+
}
108+
}
109+
110+
setTimeToInOut() {
111+
if ( this.execOnlyOneTimeClockIn === 0 ) {
112+
this.currentDate = new Date();
113+
this.hour = this.currentDate.getHours();
114+
this.minute = this.currentDate.getMinutes();
115+
this.seconds = this.currentDate.getSeconds();
116+
this.execOnlyOneTimeClockIn++;
117+
}
118+
119+
}
120+
121+
setVarToEmpty() {
122+
this.dataTechnology = '';
123+
this.isClockIn = true;
124+
this.isEnterTechnology = false;
125+
this.showAlertEnterTecnology = false;
126+
this.execOnlyOneTimeClockIn = 0;
127+
this.execOnlyOneTimeCounter = 0;
128+
this.isClockInEnable = false;
58129
}
59130

60131
ngOnInit(): void {}
132+
61133
}

0 commit comments

Comments
 (0)