Skip to content

Commit c501044

Browse files
daros10daros10
committed
Update time-clock.component.html
1 parent e15d20c commit c501044

File tree

1 file changed

+80
-85
lines changed

1 file changed

+80
-85
lines changed

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

Lines changed: 80 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,84 @@
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-
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>
1+
<div class="text-center mt-5">
2+
<div class="card">
3+
<div class="card-header">
4+
<div class="row">
5+
<div class="col-2 text-left">
6+
<strong>Time clock</strong>
7+
</div>
8+
<div class="col-10 text-right">
9+
<i class="far fa-question-circle"></i>
10+
</div>
11+
</div>
1512
</div>
16-
</div>
17-
</div>
1813

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>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
21-
<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>
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>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</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"
42-
style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
43-
</div>
44-
</form>
45-
<p class="text-left"><i class="fas fa-folder"></i><strong> Top</strong></p>
46-
<ul class="list-group">
47-
<app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
48-
</ul>
49-
<br>
50-
<form *ngIf="!isClockIn || showFields">
51-
<div class="form-group row">
52-
<label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
53-
<div class="col-sm-10">
54-
<input type="text" class="form-control">
55-
</div>
56-
</div>
57-
<div class="form-group row">
58-
<label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
59-
<div class="col-sm-10">
60-
<input type="text" class="form-control">
61-
</div>
62-
</div>
63-
<div class="form-group row">
64-
<label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
65-
<div class="col-sm-10">
66-
<input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
67-
</div>
68-
</div>
69-
</form>
70-
<hr>
71-
<div class="container">
72-
<div class="row">
73-
<div class="col text-left">
74-
<button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
75-
aria-haspopup="true" aria-expanded="false">
76-
Options
77-
</button>
78-
</div>
79-
<div class="col text-right">
80-
<button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock
81-
In</button>
82-
<button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock
83-
Out</button>
84-
</div>
14+
<div class="card-body">
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>
17+
<h6 class="text-left"><strong>Totals</strong></h6>
18+
<hr>
19+
<div class="row">
20+
<div class="col-4">
21+
<h6>Current</h6>
22+
<h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}</h3>
23+
</div>
24+
<div class="col-4">
25+
<h6>Day</h6>
26+
<h3>00:00</h3>
27+
</div>
28+
<div class="col-4">
29+
<h6>Week</h6>
30+
<h3>00:00</h3>
31+
</div>
32+
</div>
33+
<h6 class="text-left"><strong>Projects</strong></h6>
34+
<form>
35+
<div class="form-group">
36+
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
37+
</div>
38+
</form>
39+
<p class="text-left"><i class="fas fa-folder"></i><strong> Top</strong></p>
40+
<ul class="list-group">
41+
<app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
42+
</ul>
43+
<br>
44+
<form *ngIf="(!isClockIn || showFields) && !isHidenForm">
45+
<div class="form-group row">
46+
<label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
47+
<div class="col-sm-10">
48+
<input type="text" class="form-control">
49+
</div>
50+
</div>
51+
<div class="form-group row">
52+
<label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
53+
<div class="col-sm-10">
54+
<input type="text" class="form-control">
55+
</div>
56+
</div>
57+
<div class="form-group row">
58+
<label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
59+
<div class="col-sm-10">
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">
62+
<div>
63+
<h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this field to clock out.</h6>
64+
</div>
65+
</div>
66+
</div>
67+
</form>
68+
<hr>
69+
<div class="container">
70+
<div class="row">
71+
<div class="col text-left" id="optionsContainer">
72+
<button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
73+
Options
74+
</button>
75+
</div>
76+
<div class="col text-right" id="clockInOutContainer">
77+
<button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
78+
<button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
79+
</div>
80+
</div>
81+
</div>
8582
</div>
86-
</div>
8783
</div>
88-
</div>
89-
</div>
84+
</div>

0 commit comments

Comments
 (0)