Dynamic width for task

src/app/app.module.ts

@@ -11,6 +11,8 @@ import { GameContextComponent } from './pieces/game-context/game-context.compone
 import { TaskComponent } from './pieces/task/task.component';
 import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component';
 
+import { FormsModule } from '@angular/forms';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -24,7 +26,8 @@ import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component'
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/pieces/task/task.component.html

-<div class="piece">
+<div class="piece" [ngStyle]="{'width': pieceWidth}">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right"></div>
 
@@ -15,8 +15,8 @@
                 <option value="1">1</option> 
             </select>
             <div class="piece-form-bottom-duration">
-                <input name="value" type="text" value="1"/>
-                <select name="unite">
+                <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
+                <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
                     <option selected value="UT">UT</option>
                     <option value="min">min</option>
                     <option value="tours">tours</option> 

src/app/pieces/task/task.component.scss

@@ -5,6 +5,7 @@
     height: 400px;
     position: relative;
     background-color: var(--piece-background-color);
+    transition: all 0.5s ease;
 
     &-attach {
         z-index: 1;
@@ -89,17 +90,17 @@
         &-bottom {
             display: flex;
             flex-direction: row;
-            margin-bottom: 25px;
+            margin-bottom: 10px;
             justify-content: space-between;
             &-duration {
                 input {
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
-                    width: 50px;
+                    width: 20px;
                     z-index: 2;
                 }
                 select {
-                    width: 50px;
+                    width: 60px;
                     border-top-left-radius: 0px;
                     border-bottom-left-radius: 0px;
                     z-index: 1;

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

@@ -12,4 +12,25 @@ export class TaskComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  durationUnit: String = 'UT';
+  duration: number = 1;
+  pieceWidth = '400px';
+  
+  durationChange():void {
+    if(this.durationUnit === 'UT') {
+      if(this.duration == 1) {
+        this.pieceWidth = '400px';
+      } else if(this.duration == 2) {
+        this.pieceWidth = '800px';
+      } else if(this.duration >= 3) {
+        this.pieceWidth = '1200px';
+      }
+    } else {
+      this.pieceWidth = '400px';
+    }
+    console.log('largeur : '+this.pieceWidth);
+    console.log('durationUnit : '+this.durationUnit);
+    console.log('duration : '+this.duration);
+  }
+
 }