clockIn/out

src/app/app.module.ts

@@ -7,6 +7,8 @@ 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/optionsSidebar/time-clock/time-clock.component';
+
 
 @NgModule({
   declarations: [
@@ -15,6 +17,7 @@ import { ClockComponent } from './components/shared/clock/clock.component';
     UserComponent,
     SidebarComponent,
     ClockComponent,
+    TimeClockComponent
   ],
   imports: [
     BrowserModule,

src/app/components/optionsSidebar/time-clock/time-clock.component.html

@@ -1,4 +1,4 @@
-<div class="text-center mt-5">
+<div class="text-center mt-3">
 
     <div class="card">
         <div class="card-header">
@@ -53,9 +53,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                 </li>
             </ul>
             <br>
-
-
-            <form>
+            <form *ngIf="!isClockIn">
                 <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">
@@ -75,9 +73,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                     </div>
                 </div>
             </form>
-
             <hr>
-
             <div class="container">
                 <div class="row">
                     <div class="col text-left">
@@ -86,13 +82,10 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                           </button>
                     </div>
                     <div class="col text-right">
-                        <button class="btn btn-success btn-lg" type="button" (click)="employeClockIn()">Clock In</button>
+                        <button *ngIf="isClockIn" class="btn btn-success btn-lg" type="button" (click)="employeClockIn()">Clock In</button>
+                        <button *ngIf="!isClockIn" class="btn btn-danger btn-lg" type="button" (click)="employeClockIn()">Clock Out</button>
                     </div>
-
                 </div>
-
             </div>
-
         </div>
-
     </div>

src/app/components/optionsSidebar/time-clock/time-clock.component.ts

@@ -5,21 +5,17 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './time-clock.component.html',
   styleUrls: ['./time-clock.component.css']
 })
-export class TimeClockComponent implements OnInit {
+export class TimeClockComponent {
 
   isClockIn: boolean;
 
   constructor() {
-    this.isClockIn = false;
+    this.isClockIn = true;
    }
 
    employeClockIn(): boolean {
-     this.isClockIn = true;
+     this.isClockIn = !this.isClockIn;
      console.log('valor es' + this.isClockIn);
      return this.isClockIn;
    }
-
-  ngOnInit(): void {
-  }
-
 }