Added comments, evidence and assesssment to mapping and task description + Added images to matrix section + Added isImplemented to task description

Author: 0x41head

src/app/component/mapping/mapping.component.html

@@ -127,6 +127,9 @@
       <th>Time</th>
       <th>Usefulness</th>
       <th>Implementation</th>
+      <th>Assessment</th>
+      <th>Evidence</th>
+      <th>Comments</th>
       <th>Depends On</th>
       <th>SAMM</th>
       <th>ISO</th>
@@ -143,6 +146,9 @@
       <td>{{ item.time }}</td>
       <td>{{ item.usefulness }}</td>
       <td>{{ item.implementation }}</td>
+      <td>{{ item.assessment }}</td>
+      <td>{{ item.evidence }}</td>
+      <td>{{ item.comments }}</td>
       <td>{{ item.dependsOn }}</td>
       <td>{{ item.samm2 }}</td>
       <td>{{ item.ISO }}</td>

src/app/component/mapping/mapping.component.ts

@@ -39,6 +39,9 @@ export interface MappingElementSortedByISO {
   time: string;
   usefulness: string;
   dependsOn: string[];
+  evidence: string;
+  comments: string;
+  assessment: string;
   implementation: any;
 }
 
@@ -261,6 +264,16 @@ export class MappingComponent implements OnInit {
       ];
     var CurrentUsefulness: string =
       this.generalLabels[this.YamlObject[dim][subDim][task]['usefulness']];
+
+    var CurrentEvidence: string =
+      this.YamlObject[dim][subDim][task]['evidence'];
+
+    var CurrentComments: string =
+      this.YamlObject[dim][subDim][task]['comments'];
+
+    var CurrentAssessment: string =
+      this.YamlObject[dim][subDim][task]['assessment'];
+
     var CurrentDependsOn: string[] =
       this.YamlObject[dim][subDim][task]['dependsOn'];
     try {
@@ -289,6 +302,9 @@ export class MappingComponent implements OnInit {
       usefulness: CurrentUsefulness,
       dependsOn: CurrentDependsOn,
       implementation: CurrentImplementation,
+      evidence: CurrentEvidence,
+      comments: CurrentComments,
+      assessment: CurrentAssessment,
     };
     if (ISOArray.length == 0) {
       this.allMappingDataSortedByISO.push(this.temporaryMappingElement);

src/app/component/matrix/matrix.component.html

@@ -36,7 +36,13 @@
     <!-- Dimension Column -->
     <ng-container matColumnDef="Dimension">
       <th mat-header-cell *matHeaderCellDef>Dimension</th>
-      <td mat-cell *matCellDef="let element">{{ element.Dimension }}</td>
+      <td mat-cell *matCellDef="let element">
+        <img
+          src="assets/images/{{ element.Dimension }}.png"
+          height="40px"
+          alt="" />
+        {{ element.Dimension }}
+      </td>
     </ng-container>
 
     <!-- Sub Dimension Column -->

src/app/component/task-description/task-description.component.html

@@ -3,10 +3,12 @@ <h1>
     {{ currentTask.dimension }} -> {{ currentTask.subDimension }}:
     {{ currentTask.taskName }}
   </h1>
+
   <div class="example-action-buttons">
     <button mat-raised-button (click)="openall()">Expand All</button>
     <button mat-raised-button (click)="closeall()">Collapse All</button>
   </div>
+
   <mat-accordion multi="true">
     <mat-expansion-panel [expanded]="true">
       <mat-expansion-panel-header>
@@ -16,6 +18,7 @@ <h1>
       </mat-expansion-panel-header>
       <p [innerHTML]="currentTask.description"></p>
     </mat-expansion-panel>
+
     <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -24,6 +27,7 @@ <h1>
       </mat-expansion-panel-header>
       <p [innerHTML]="currentTask.risk"></p>
     </mat-expansion-panel>
+
     <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -32,6 +36,7 @@ <h1>
       </mat-expansion-panel-header>
       <p [innerHTML]="currentTask.measure"></p>
     </mat-expansion-panel>
+
     <mat-expansion-panel *ngIf="currentTask.implementatonGuide">
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -40,6 +45,7 @@ <h1>
       </mat-expansion-panel-header>
       <p [innerHTML]="currentTask.implementatonGuide"></p>
     </mat-expansion-panel>
+
     <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -50,6 +56,7 @@ <h1>
       <p>Time: {{ this.GeneralLabels[this.currentTask.time] }}</p>
       <p>Resources: {{ this.GeneralLabels[this.currentTask.resources] }}</p>
     </mat-expansion-panel>
+
     <mat-expansion-panel *ngIf="currentTask.usefulness !== -1">
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -58,6 +65,25 @@ <h1>
       </mat-expansion-panel-header>
       <p>{{ this.GeneralLabels[this.currentTask.usefulness] }}</p>
     </mat-expansion-panel>
+
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <b>Evidence</b>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p [innerHTML]="currentTask.evidence"></p>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <b>Assessment</b>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p [innerHTML]="currentTask.assessment"></p>
+    </mat-expansion-panel>
+
     <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -107,6 +133,7 @@ <h1>
         </mat-accordion>
       </p>
     </mat-expansion-panel>
+
     <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -138,6 +165,18 @@ <h1>
         </mat-accordion>
       </p>
     </mat-expansion-panel>
+
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <b>Implemented</b>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <div
+        *ngIf="currentTask.isImplemented; then thenBlock; else elseBlock"></div>
+      <ng-template #thenBlock> Implemented </ng-template>
+      <ng-template #elseBlock> Not Implemented </ng-template>
+    </mat-expansion-panel>
     <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -149,5 +188,14 @@ <h1>
         subDimension="{{ currentTask.subDimension }}"
         taskName="{{ currentTask.taskName }}"></app-dependency-graph>
     </mat-expansion-panel>
+
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <b>Comments</b>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p [innerHTML]="currentTask.comments"></p>
+    </mat-expansion-panel>
   </mat-accordion>
 </div>

src/app/component/task-description/task-description.component.ts

@@ -27,6 +27,10 @@ export interface taskDescription {
   dependsOn: string[];
   implementation: implementation[];
   usefulness: number;
+  evidence: string;
+  assessment: string;
+  comments: string;
+  isImplemented: boolean;
 }
 
 @Component({
@@ -52,6 +56,10 @@ export class TaskDescriptionComponent implements OnInit {
     dependsOn: [],
     implementation: [],
     usefulness: -1,
+    assessment: '',
+    evidence: '',
+    comments: '',
+    isImplemented: false,
   };
 
   YamlObject: any;
@@ -152,6 +160,19 @@ export class TaskDescriptionComponent implements OnInit {
       this.currentTask.implementation = this.defineImplementationObject(
         data['implementation']
       );
+
+      this.currentTask.evidence = this.defineStringValues(data['evidence'], '');
+
+      this.currentTask.comments = this.defineStringValues(data['comments'], '');
+
+      this.currentTask.assessment = this.defineStringValues(
+        data['assessment'],
+        ''
+      );
+      this.currentTask.isImplemented = this.defineBooleanValues(
+        data['isImplemented'],
+        false
+      );
     });
   }
 
@@ -166,6 +187,17 @@ export class TaskDescriptionComponent implements OnInit {
     }
   }
 
+  defineBooleanValues(
+    dataToCheck: boolean,
+    valueOfDataIfUndefined: boolean
+  ): boolean {
+    try {
+      return dataToCheck;
+    } catch {
+      return valueOfDataIfUndefined;
+    }
+  }
+
   defineStringArrayValues(
     dataToCheck: string[],
     valueOfDataIfUndefined: string[]
@@ -187,6 +219,7 @@ export class TaskDescriptionComponent implements OnInit {
       return valueOfDataIfUndefined;
     }
   }
+
   defineImplementationObject(dataToCheck: implementation[]): implementation[] {
     var dataToReturn: implementation[] = [];
     for (var data in dataToCheck) {