add chronologie by mission and by role

src/app/app.component.scss

@@ -24,11 +24,14 @@
         transform-origin: top left;
         padding: 60px 5px 10px 5px;
         margin-right: 7px;
+        margin-top: 900px;
     }
 
     &-scenario {
         &-chronologie {
             margin-bottom: 100px;
+            position: relative;
+            left: 800px;
 
             &-title {
                 font-family: 'Glacial Indifference Bold';
@@ -57,8 +60,10 @@
 
                 &-mission {
                     display: flex;
-                    flex-direction: row;
+                    flex-direction: column;
                     margin-bottom: 100px;
+                    position: relative;
+                    top: -868px;
 
                     &-missionPieces {
                         display: flex;

src/app/pieces/step/step.component.html

-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
+<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left"></div>
 
@@ -13,8 +13,8 @@
         <textarea></textarea>
         <div class="piece-form-duration">
             <label for="duration">Durée</label>
-            <input name="duration" type="text"/>
-            <select name="duration">
+            <input name="duration" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
+            <select name="duration" [(ngModel)]="durationUnit" (change)="durationChange()">
                 <option value="UT">UT</option>
                 <option value="min">min</option>
                 <option value="tours">tours</option>

src/app/pieces/step/step.component.scss

@@ -5,6 +5,7 @@
     height: 300px;
     position: relative;
     background-color: var(--piece-background-color);
+    transition: all 0.5s ease;
 
     &-menu {
         position: absolute;
@@ -94,7 +95,7 @@
             background-image: url("../../../assets/background-images/step.png");
             background-position: center;
             background-repeat: no-repeat;
-            background-size: 30%;
+            background-size: 100px;
         }
 
         &-duration {

src/app/pieces/step/step.component.ts

@@ -7,13 +7,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class StepComponent implements OnInit {
 
+  displayMenu: string = 'hide';
+  pieceWidth = '400px';
+  duration = 1;
+  durationUnit = 'UT';
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
-  displayMenu: string = 'hide';
-
   onClickComments(): void {
     
   }
@@ -26,4 +29,18 @@ export class StepComponent implements OnInit {
     
   }
 
+  durationChange(): void {
+    if(this.durationUnit === 'UT') {
+      if(this.duration >= 1 && this.duration <= 10) {
+        this.pieceWidth = (this.duration*400)+'px';
+      } else if(this.duration > 10) {
+        this.pieceWidth = '4000px';
+      } else {
+        this.pieceWidth = '400px';
+      }
+    } else {
+      this.pieceWidth = '400px';
+    }
+  }
+
 }

src/app/pieces/task/task.component.ts

@@ -7,11 +7,6 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TaskComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
   displayMenu: string = 'hide';
   displaySymbolChoice: string = 'hide';
   displayPrequires: string = 'hide';
@@ -22,10 +17,16 @@ export class TaskComponent implements OnInit {
 
   symbol: string = ''; // A changer quand implémentation des données
   symbolColor: string = ''; //A changer quand implémentation des données
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
   
   durationChange(): void {
     if(this.durationUnit === 'UT') {
-      if(this.duration >= 1  && this.duration <= 10) {
+      if(this.duration >= 1 && this.duration <= 10) {
         this.pieceWidth = (this.duration*400)+'px';
       } else if(this.duration > 10) {
         this.pieceWidth = '4000px';