Merge pull request #70 from Homie-s-Project/studies-call

Studies call

kairos-web/src/app/components/timer/timer.component.html

@@ -13,6 +13,15 @@
                 </div>
             </div>
             <div class="control-container">
+                <form [formGroup]="labelForm">
+                    <select formControlName="label" class="label-select" *ngIf="labels?.length">
+                        <option [value]="''" selected>Aucun</option>
+                        <option *ngFor="let label of labels" 
+                            [value]="label.labelId">
+                            {{label.labelTitle}}
+                        </option>
+                    </select>
+                </form>
                 <button class="kairos-button" *ngIf="!timer.isStarted; else cancelButton" (click)="startTimer()">Démarrer</button>
                 <ng-template #cancelButton>
                     <button class="kairos-button" (click)="stop()">Annuler</button>

kairos-web/src/app/components/timer/timer.component.scss

@@ -66,8 +66,14 @@
                 }
             }
             .control-container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
                 width: 100%;
                 height: 35px;
+                .select-label{
+                    width: 100%;
+                }
                 button{
                     margin: 15px
                 }

kairos-web/src/app/components/timer/timer.component.ts

@@ -1,7 +1,11 @@
 import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';
 import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { faCircleChevronUp, faCircleChevronDown, faCircleChevronLeft, faCircleChevronRight, faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { Subscription } from 'rxjs';
+import { ILabelModel } from 'src/app/models/ILabelModel';
 import { AlertDialogService } from 'src/app/services/alert-dialog/alert-dialog.service';
+import { LabelService } from 'src/app/services/label/label.service';
 import { NavbarService } from 'src/app/services/navbar/navbar.service';
 import { TimerService } from 'src/app/services/timer/timer.service';
 
@@ -21,7 +25,15 @@ const collapseAnimation = trigger('collapse', [
   ]
 })
 export class TimerComponent implements OnInit, OnDestroy {
+  private subscription: Subscription[] = [];
+  labels?: ILabelModel[];
+
+  labelForm: FormGroup<any> = new FormGroup<any>({
+    label: new FormControl('', [Validators.required])
+  })
+
   animeState: string = "";
+
   faCircleChevronUp = faCircleChevronUp;
   faCircleChevronDown = faCircleChevronDown;
   faCircleChevronLeft = faCircleChevronLeft;
@@ -30,9 +42,19 @@ export class TimerComponent implements OnInit, OnDestroy {
 
   constructor(public nav: NavbarService, 
     public timer: TimerService,
-    public alertDialog: AlertDialogService, 
+    public alertDialog: AlertDialogService,
+    private label: LabelService, 
     private renderer: Renderer2) {
     this.renderer.addClass(document.getElementById('app-container'), 'kairos-timer');
+    this.label.getLabels().subscribe(resp => {
+      this.labels = resp;
+    })
+
+    this.subscription.push(
+      this.labelForm.get('label')!.valueChanges.subscribe(l => {
+          this.onLabelChange(l)
+      })
+    );
   }
 
   ngOnInit(): void {
@@ -43,6 +65,11 @@ export class TimerComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.renderer.removeClass(document.getElementById('app-container'), 'kairos-timer');
     this.timer.isTinyVisible = true;
+    this.subscription.forEach((sub: Subscription) => sub.unsubscribe());
+  }
+
+  onLabelChange(l: any) {
+    this.timer.labelId = l.toString();
   }
 
   startTimer = () => {

kairos-web/src/app/services/timer/timer.service.ts

@@ -1,14 +1,18 @@
-import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { Injectable, OnDestroy } from '@angular/core';
+import { AuthService } from '../auth/auth.service';
 import { Subscription } from 'rxjs';
 import { AlertDialogService } from '../alert-dialog/alert-dialog.service';
 import { ModalDialogService } from '../modal-dialog/modal-dialog.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class TimerService {
+export class TimerService implements OnDestroy {
   base: any;
-  private subscription: Subscription = new Subscription();
+  intervalHeartbeat: any;
+  private subscription: Subscription[] = [];
+  labelId: string = "";
   minuteStr: string;
   secondStr: string;
   minute: number = 0;
@@ -17,7 +21,10 @@ export class TimerService {
   isStarted: boolean = false;
   isCollapsed: boolean = false;
 
-  constructor(private modalDialog: ModalDialogService, private alertDialog: AlertDialogService) {
+  constructor(private modalDialog: ModalDialogService, 
+    private alertDialog: AlertDialogService, 
+    private http: HttpClient, 
+    private auth: AuthService) {
     this.getValues();
     this.minuteStr = this.updateTime(this.minute);
     this.secondStr = this.updateTime(this.second);
@@ -29,6 +36,10 @@ export class TimerService {
     }
   }
 
+  ngOnDestroy(): void {
+    this.subscription.forEach((sub: Subscription) => sub.unsubscribe())
+  }
+
   // Timer logic
   upTime = () => {
     if (this.minute < 100) {
@@ -53,7 +64,16 @@ export class TimerService {
       throw new Error("Valeur du temps à 0, Veuillez en saisir une");
     }
 
-    this.base = setInterval(this.timerCountdown, 1000);
+    this.postStartStudies((this.minute + this.second).toString(), this.labelId).subscribe({
+      error: (error: HttpErrorResponse) => {
+        throw new Error(error.error.message);
+      },
+      next: () => {
+        this.base = setInterval(this.timerCountdown, 1000);
+        this.intervalHeartbeat = setInterval(this.heartbeatCall, 60000)
+      }
+    })
+
   }
 
   timerCountdown = () => {
@@ -62,8 +82,9 @@ export class TimerService {
     if (this.second < 0) {
       this.minute--;
 
-      if (this.minute <= 0 && this.second <= 0) {
+      if (this.minute < 0 && this.second <= 0) {
         this.stopCountdown();
+        this.alertDialog.displayAlert({alertMessage: 'Studies terminée ! Bon travail !', alertType: 'valid'});
         return;
       }
 
@@ -75,25 +96,43 @@ export class TimerService {
     this.secondStr = this.updateTime(this.second);
   }
 
+  heartbeatCall = () => {
+    const sub = this.postHeartbeatStudies().subscribe({
+      error: (error: HttpErrorResponse) => {
+
+        this.alertDialog.displayAlert({alertMessage: error.error.message, alertType: 'alert'})
+        this.stopCountdown();
+      }
+    })
+  }
+
   openModalCancelTimer = ():boolean => {
     var result = false;
     this.modalDialog.displayModal('Voulez-vous vous annuler votre Studies ?')
-    this.modalDialog.modalValue.subscribe((data => {
+    var modalSubscription = (this.modalDialog.modalValue.subscribe((data => {
         if (data) {
           this.stopCountdown();
           result = data; 
         } else {
-          this.subscription.unsubscribe();
+          modalSubscription.unsubscribe();
         }
       })
-    );
+    ));
 
     return result;
   }
 
   stopCountdown = () => {
-    clearInterval(this.base);
-    this.resetValues()
+    const sub = this.postStopStudies().subscribe({
+      error: (error: HttpErrorResponse) => {
+        sub.unsubscribe();
+      },
+      next: () => {
+        clearInterval(this.base);
+        clearInterval(this.intervalHeartbeat);
+        this.resetValues();
+      }
+    })
   }
 
   saveValues = () => {
@@ -139,4 +178,39 @@ export class TimerService {
 
     return (i == null) ? false : true;
   }
+
+  // API Call
+  // Envoie des données afin de démarrer la study
+  postStartStudies = (timerValue: string, labelsId: string) => {
+    // Création du header
+    const headers = new HttpHeaders ({
+      "Authorization": this.auth.getToken()
+    });
+
+    const formData = new FormData();
+    formData.append('timer', timerValue);
+    formData.append('labelsId', labelsId);
+
+    return this.http.post('http://localhost:5000/studies/start', formData, {headers});
+  }
+
+  // Appel POST confirmant l'activité étant toujours en cours
+  postHeartbeatStudies = () => {
+    // Création du header
+    const headers = new HttpHeaders ({
+      "Authorization": this.auth.getToken()
+    });
+
+    return this.http.post('http://localhost:5000/studies/heartbeat', {}, {headers});
+  }
+
+  // Appel informant l'arrêt / annulation de la study
+  postStopStudies = () => {
+    // Création du header
+    const headers = new HttpHeaders ({
+      "Authorization": this.auth.getToken()
+    });
+
+    return this.http.post('http://localhost:5000/studies/stop', {}, {headers});
+  }
 }