dynamic rules

src/app/app.component.html

@@ -103,7 +103,7 @@
     </div>
 
     <div class="container-sider">
-        <app-rules class="container-sider-element"></app-rules>
+        <app-rules class="container-sider-element" [scenario]="scenario"></app-rules>
         <app-role-occurence class="container-sider-element"></app-role-occurence>
         <app-supplementary-task class="container-sider-element"></app-supplementary-task>
         <app-repeat class="container-sider-element"></app-repeat>

src/app/sider-pieces/rules/rules.component.html

@@ -2,41 +2,24 @@
     <div class="piece-form">
         <div class="piece-form-rules">
             <div class="piece-form-title">Règles du jeu</div>  
-            <textarea></textarea>
+            <textarea [(ngModel)]="scenario.gameRules"></textarea>
         </div>
         <div class="piece-form-ressources">
             <div class="piece-form-title">Ressources / objets</div>
             <div class="piece-form-ressources-object">
-                <div class="piece-form-ressources-object-infos">
+                <div class="piece-form-ressources-object-infos" *ngFor="let ressource of scenario.ressources; let i = index">
                     <div class="piece-form-ressources-object-infos-name">
                         <label for="name">Nom</label>
-                        <input name="name" type="text"/>
+                        <input name="name" type="text" [(ngModel)]="ressource.name"/>
                     </div>
                     <div class="piece-form-ressources-object-infos-quantity">
                         <label for="quantity">Quantité</label>
-                        <input name="quantity" type="text"/>
+                        <input name="quantity" type="text" [(ngModel)]="ressource.number"/>
                     </div>
-                    <button mat-button><mat-icon fontIcon="remove"></mat-icon></button>              
+                    <button mat-button (click)="removeRessource(i)"><mat-icon fontIcon="remove"></mat-icon></button>                           
                 </div>
-
-                <div class="piece-form-ressources-object-infos">
-                    <div class="piece-form-ressources-object-infos-name">
-                        <label for="name">Nom</label>
-                        <input name="name" type="text"/>
-                    </div>
-                    <div class="piece-form-ressources-object-infos-quantity">
-                        <label for="quantity">Quantité</label>
-                        <input name="quantity" type="text"/>
-                    </div>
-                    <button mat-button><mat-icon fontIcon="remove"></mat-icon></button>              
-                </div>
-
-                <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
+                <button mat-button (click)="addRessource()"><mat-icon fontIcon="add"></mat-icon></button>
             </div>
         </div>
-        <div class="piece-form-validate">
-            <button mat-button>Valider</button>
-        </div>
-
     </div>
 </div>
\ No newline at end of file

src/app/sider-pieces/rules/rules.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Ressource } from 'src/app/class/ressource/ressource';
+import { Scenario } from 'src/app/class/scenario/scenario';
 
 @Component({
   selector: 'app-rules',
@@ -7,9 +9,22 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RulesComponent implements OnInit {
 
+  @Input() scenario: Scenario = new Scenario();
+
   constructor() { }
 
   ngOnInit(): void {
+    console.log(this.scenario.ressources)
+  }
+
+  addRessource(): void {
+    this.scenario.ressources.push(new Ressource());
+    console.log('ajout ressource');
+  }
+
+  removeRessource(index: number): void {
+    this.scenario.ressources.splice(index, 1);
+    console.log('retrait ressource');
   }
 
 }