add background-image to optionnal and repeat tasks

src/app/pieces/tasks/optionnal-task/optionnal-task.component.scss

@@ -245,6 +245,9 @@
             resize: none;
             flex-grow: 1;
             font-size: 15px;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 100px;
         }
 
         select {

src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts

@@ -23,7 +23,7 @@ export class OptionnalTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
-  urlIcon: string = '';
+  urlIcon: string = 'url("../../../../assets/background-images/optionnal.png")';
 
   constructor(private pieceDetailsService: PieceDetailsService) { }
 

src/app/pieces/tasks/repeat-task/repeat-task.component.html

@@ -11,7 +11,8 @@
 
     <div class="piece-form">
         <label>Recommencer<br>le tour jusqu'à ce que :</label>
-        <textarea [(ngModel)]="task.objective" placeholder="Faire valider au commanditaire"></textarea>
+        <textarea [(ngModel)]="task.objective" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('repeat')[0] && j == findFirstIndexOfTaskType('repeat')[1]) ? urlIcon : ''"
+            placeholder="Faire valider au commanditaire"></textarea>
     </div>
     <mat-icon class="piece-form-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>
     <mat-icon class="piece-form-repeat" fontIcon="refresh" *ngIf="task.repeat.iteration > 0 || task.repeat.while != ''"></mat-icon>

src/app/pieces/tasks/repeat-task/repeat-task.component.scss

@@ -81,37 +81,41 @@
         textarea {
             width: 80%;
             border: none;
-            border-radius: 10px;
+            border-radius: 20px;
             resize: none;
             height: 50%;
             font-size: 15px;
+            padding: 10px;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 100px;
         }
 
         &-comment {
             transform: scale(1.2);
             position: absolute;
-            bottom: 50px;
+            bottom: 35px;
             left: 50px;
         }
 
         &-repeat {
             transform: scale(1.2);
             position: absolute;
-            bottom: 50px;
+            bottom: 35px;
             left: 100px;
         }
 
         &-character {
             transform: scale(1.2);
             position: absolute;
-            bottom: 50px;
+            bottom: 35px;
             left: 150px;
         }
 
         &-interrupt {
             transform: scale(1.2);
             position: absolute;
-            bottom: 50px;
+            bottom: 35px;
             left: 200px;
         }
     }

src/app/pieces/tasks/repeat-task/repeat-task.component.ts

@@ -19,6 +19,9 @@ export class RepeatTaskComponent implements OnInit {
   @Input() i!: number;
   @Input() j!: number;
 
+  urlIcon: string = 'url("../../../../assets/background-images/repeatTask.png")';
+  
+
   constructor(protected pieceDetailsService: PieceDetailsService) { }
 
   ngOnInit(): void {
@@ -53,4 +56,15 @@ export class RepeatTaskComponent implements OnInit {
     }
     return res;
   }
+
+  findFirstIndexOfTaskType(type: string): number[] {
+    for(let i = 0; i < this.role.tasks.length; i++) {
+      for(let j = 0; j < this.role.tasks[i].length; j++) {
+        if (this.role.tasks[i][j] instanceof Task && this.role.tasks[i][j]?.type == type) {
+          return [i, j];
+        }
+      }
+    }
+    return [0, 0];
+  } 
 }