fixed bugs

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

@@ -1,10 +1,42 @@
 .content-ClockIn {
-  padding: 2.1rem 1rem;
+    padding: 2.1rem 1rem;
 }
 
 .timer {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
 }
+
+.place-holder-danger::-webkit-input-placeholder {
+    /* WebKit, Blink, Edge */
+    color: #909;
+}
+
+.place-holder-danger:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #909;
+    opacity: 1;
+}
+
+.placeholder-danger::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #DC3545 !important;
+    opacity: 1;
+}
+
+.placeholder-danger:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: #DC3545 !important;
+}
+
+.placeholder-danger::-ms-input-placeholder {
+    /* Microsoft Edge */
+    color: #DC3545 !important;
+}
+
+.placeholder-danger::placeholder {
+    /* Most modern browsers support this now. */
+    color: #DC3545 !important;
+}

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

@@ -1,9 +1,4 @@
-<div class="text-center mt-3">
-
-    <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
-        Field technology is requiered. Enter this field for clock out.
-    </div>
-
+<div class="text-center mt-5">
     <div class="card">
         <div class="card-header">
             <div class="row">
@@ -62,7 +57,8 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                 <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 #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+                        <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 placeholder-danger " placeholder="Field technology is requiered. Enter this field for clock out.">
                     </div>
                 </div>
             </form>

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

@@ -29,6 +29,9 @@ export class TimeClockComponent  implements OnInit {
   seconds: number;
   interval;
   dataTechnology: string;
+  execOnlyOneTimeCounter = 0;
+  execOnlyOneTimeClockIn = 0;
+  isClockInEnable = false;
 
   constructor() {
     this.isClockIn = true;
@@ -42,6 +45,7 @@ export class TimeClockComponent  implements OnInit {
    }
 
    employeClockIn(): boolean {
+     this.isClockInEnable = true;
      this.isClockIn = !this.isClockIn;
      this.startTimer();
      this.setTimeToInOut();
@@ -53,12 +57,10 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = false;
        this.showAlertEnterTecnology = true;
      } else {
-       this.dataTechnology = '';
-       this.isClockIn = true;
-       this.isEnterTechnology = false;
-       this.showAlertEnterTecnology = false;
+       this.setVarToEmpty();
        this.pauseTimer();
        this.setTimeToInOut();
+
      }
    }
 
@@ -72,15 +74,20 @@ export class TimeClockComponent  implements OnInit {
    }
 
    setShowFields(show: boolean) {
-    this.isClockIn = false;
-    this.showFields = show;
-    this.startTimer();
-    this.setTimeToInOut();
+     if ( this.isClockInEnable !== true ) {
+      this.isClockIn = false;
+      this.showFields = show;
+      if (  this.execOnlyOneTimeCounter === 0 ) {
+        this.startTimer();
+        this.execOnlyOneTimeCounter++;
+      }
+      this.setTimeToInOut();
+     }
   }
 
   startTimer() {
     this.interval = setInterval(() => {
-      this.timer();
+        this.timer();
     }, 1000 );
    }
 
@@ -101,10 +108,24 @@ export class TimeClockComponent  implements OnInit {
   }
 
   setTimeToInOut() {
-    this.currentDate = new Date();
-    this.hour = this.currentDate.getHours();
-    this.minute = this.currentDate.getMinutes();
-    this.seconds = this.currentDate.getSeconds();
+    if ( this.execOnlyOneTimeClockIn === 0 ) {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minute = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+      this.execOnlyOneTimeClockIn++;
+    }
+
+  }
+
+  setVarToEmpty() {
+    this.dataTechnology = '';
+    this.isClockIn = true;
+    this.isEnterTechnology = false;
+    this.showAlertEnterTecnology = false;
+    this.execOnlyOneTimeClockIn = 0;
+    this.execOnlyOneTimeCounter = 0;
+    this.isClockInEnable = false;
   }
 
   ngOnInit(): void {}