implement missions and mission step

src/app/app.component.html

@@ -9,13 +9,15 @@
                 </div>
 
                 <div class="container-scenario-main-missions">
-                    <div class="container-scenario-main-missions-mission">
+                    <div class="container-scenario-main-missions-mission" *ngFor="let mission of this.scenario.missions">
 
                         <div class="container-scenario-chronologie">
                             <div class="container-scenario-chronologie-title">Chronologie générale de la mission</div>
                             <div class="container-scenario-chronologie-steps">
-                                <app-step [style.z-index]="2"></app-step>
-                                <app-step [style.z-index]="1"></app-step>
+                                <div *ngFor="let step of mission.chronologie, let i = index" [style.z-index]="mission.chronologie.length-i">
+                                    <app-step *ngIf="step != null" [step]="step"></app-step>
+                                    <div [style.width]="'400px'" *ngIf="step == null"></div>
+                                </div>
                             </div>
                         </div>
 
@@ -70,66 +72,6 @@
                             </div>
                         </div>
                     </div>
-
-                    <div class="container-scenario-main-missions-mission">
-
-                        <div class="container-scenario-chronologie">
-                            <div class="container-scenario-chronologie-title">Chronologie générale de la mission</div>
-                            <div class="container-scenario-chronologie-steps">
-                                <app-step [style.z-index]="2"></app-step>
-                                <app-step [style.z-index]="1"></app-step>
-                            </div>
-                        </div>
-
-                        <div class="container-scenario-chronologie">
-                            <div class="container-scenario-chronologie-title">Chronologie du rôle</div>
-                            <div class="container-scenario-chronologie-steps">
-                                <app-step [style.z-index]="2"></app-step>
-                                <app-step [style.z-index]="1"></app-step>
-                            </div>
-                        </div>
-
-                        <div style="display: flex;">
-                            <div class="container-scenario-main-missions-mission-missionPieces" [style.z-index]="3">
-                                <app-educational-objective></app-educational-objective>
-                                <app-mission-context [style.z-index]="2"></app-mission-context>
-                            </div>
-
-                            <div class="container-scenario-main-missions-mission-roles" [style.z-index]="2">
-                                <div class="container-scenario-main-missions-mission-roles-role">
-                                    <app-role [style.z-index]="10"></app-role>
-                                    <div class="container-scenario-main-missions-mission-roles-role-tasks"
-                                        [style.z-index]="1">
-                                        <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
-                                            [style.z-index]="2">
-                                            <app-task [style.z-index]="2"></app-task>
-                                            <app-task [style.z-index]="1"></app-task>
-                                        </div>
-                                        <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
-                                            [style.z-index]="2">
-                                            <app-annexe-task [style.z-index]="2"></app-annexe-task>
-                                        </div>
-                                        <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
-                                            [style.z-index]="2">
-                                            <app-random-event [style.z-index]="2"></app-random-event>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="container-scenario-main-missions-mission-roles-role">
-                                    <app-role [style.z-index]="10"></app-role>
-                                    <div class="container-scenario-main-missions-mission-roles-role-tasks"
-                                        [style.z-index]="1">
-                                        <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
-                                            [style.z-index]="2">
-                                            <app-task [style.z-index]="3"></app-task>
-                                            <app-annexe-task [style.z-index]="2"></app-annexe-task>
-                                            <app-random-event [style.z-index]="1"></app-random-event>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { Scenario } from './class/scenario/scenario';
+import { Step } from './class/step/step';
 
 @Component({
   selector: 'app-root',
@@ -9,9 +10,11 @@ import { Scenario } from './class/scenario/scenario';
 export class AppComponent {
   title = 'RLG Maker';
 
-  constructor() { }
+  scenario: Scenario;
 
-  scenario: Scenario = new Scenario();
+  constructor() {
+    this.scenario = new Scenario();
+  }
 
   test() {
     console.log(this.scenario);

src/app/class/step/step.ts

 export class Step {
 
     description: string = '';
-    durarion: number = 1;
+    duration: number = 1;
     durationUnit: string = 'UT';
     comments: Comment[] = [];
 }

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

@@ -10,11 +10,11 @@
 
     <div class="piece-form">
         <div class="piece-form-title">Étape 1</div>
-        <textarea></textarea>
+        <textarea [(ngModel)]="step.description"></textarea>
         <div class="piece-form-duration">
             <label for="duration">Durée</label>
-            <input name="duration" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
-            <select name="duration" [(ngModel)]="durationUnit" (change)="durationChange()">
+            <input name="duration" type="text" [(ngModel)]="step.duration" (input)="durationChange()"/>
+            <select name="duration" [(ngModel)]="step.durationUnit" (change)="durationChange()">
                 <option value="UT">UT</option>
                 <option value="min">min</option>
                 <option value="tours">tours</option>

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Step } from 'src/app/class/step/step';
 
 @Component({
   selector: 'app-step',
@@ -7,14 +8,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class StepComponent implements OnInit {
 
+  @Input() step: Step = new Step;
+
   displayMenu: string = 'hide';
   pieceWidth = '400px';
-  duration = 1;
-  durationUnit = 'UT';
 
   constructor() { }
 
   ngOnInit(): void {
+    this.durationChange();
   }
 
   onClickDots(): void {
@@ -30,10 +32,10 @@ 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) {
+    if(this.step.durationUnit === 'UT') {
+      if(this.step.duration >= 1 && this.step.duration <= 10) {
+        this.pieceWidth = (this.step.duration*400)+'px';
+      } else if(this.step.duration > 10) {
         this.pieceWidth = '4000px';
       } else {
         this.pieceWidth = '400px';