Merge pull request #116 from 0x41head/angular-ui

Angular UI

Author: 0x41head

package-lock.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
+    "markdown-it": "^13.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "yamljs": "^0.3.0",
@@ -30,6 +31,7 @@
     "@angular/cli": "~13.3.6",
     "@angular/compiler-cli": "~13.3.0",
     "@types/jasmine": "~3.10.0",
+    "@types/markdown-it": "^12.2.3",
     "@types/node": "^12.11.1",
     "@types/yamljs": "^0.2.31",
     "jasmine-core": "~4.0.0",

package.json

@@ -26,5 +26,8 @@
     font-size: 16px;  
     font-weight: bold;
 }
-
+button{
+    background-color: white;
+    border: none;
+}
 

src/app/component/matrix/matrix.component.css

@@ -29,11 +29,11 @@
 
 
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 matrix-table">
-  
+
     <!-- 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"> {{element.Dimension}}</td>
     </ng-container>
 
     <!-- Sub Dimension Column -->
@@ -48,8 +48,10 @@
         <th mat-header-cell *matHeaderCellDef> {{levels[i]}} </th>
         <td mat-cell *matCellDef="let element">
             <ul>
-                <li *ngFor="let task of element[lvl]" routerLink={{Routing}}>
+                <li *ngFor="let task of element[lvl]; index as j" >
+                  <button (click)="navigate(element.Dimension,element.SubDimension,i+1,j)">
                     {{task}}
+                    </button>
                 </li>
             </ul>
         </td>

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

@@ -6,7 +6,7 @@ import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import { MatTableDataSource } from '@angular/material/table';
 import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
-
+import { Router, NavigationExtras } from '@angular/router';
 
 export interface MatrixElement {
   Dimension: string;
@@ -38,7 +38,7 @@ export class MatrixComponent implements OnInit {
   dataSource:any= new MatTableDataSource<MatrixElement>(this.MATRIX_DATA);
   rows: string[] = [];
 
-  constructor(private yaml:ymlService) {
+  constructor(private yaml:ymlService,private router: Router) {
     this.filteredRows = this.rowCtrl.valueChanges.pipe(
       startWith(null),
       map((row: string | null) => (row ? this._filter(row) : this.autoCompeteRows.slice())),
@@ -161,6 +161,22 @@ export class MatrixComponent implements OnInit {
     return this.autoCompeteRows.filter(row => row.toLowerCase().includes(filterValue));
   }
 
+  // task description routing + providing parameters
+
+  navigate(dim:string,subdim:string,lvl:Number,ti:Number) {
+    let navigationExtras: NavigationExtras = {
+        queryParams: {
+            dimension:dim,
+            subDimension:subdim,
+            level:lvl,
+            taskIndex:ti
+        }
+    }
+    console.log(this.lvlColumn)
+    console.log(this.levels)
+    this.router.navigate([this.Routing], navigationExtras);
+}
+
 
 
 

src/app/component/matrix/matrix.component.ts

@@ -1,38 +1,33 @@
 <div class="content-box">
-    <h1>Build and Deployment -> Build: Building and testing of artifacts in virtual environments</h1>
+    <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: Building and testing of artifacts in virtual environments</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>
+        <mat-expansion-panel  [expanded]="true">
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     <b>Description</b>
                 </mat-panel-title>
             </mat-expansion-panel-header>
-            <p>While building and testing artifacts, third party systems, application frameworks
-                and 3rd party libraries are used. These might be malicious as a result of
-                vulnerable libraries or because they are altered during the delivery phase.</p>
+            <p [innerHTML]="description"></p>
             </mat-expansion-panel>
         <mat-expansion-panel>
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     <b>Risk</b>
                 </mat-panel-title>
             </mat-expansion-panel-header>
-            <p>While building and testing artifacts, third party systems, application frameworks
-                and 3rd party libraries are used. These might be malicious as a result of
-                vulnerable libraries or because they are altered during the delivery phase.</p>
+            <p [innerHTML]="risk"></p>
         </mat-expansion-panel>
         <mat-expansion-panel>
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     <b>Measure</b>
                 </mat-panel-title>
             </mat-expansion-panel-header>
-            <p> Each step during within the build and testing phase is performed in
-                a separate virtual environments, which is destroyed afterward.</p>
+            <p [innerHTML]="measure"></p>
         </mat-expansion-panel>
         <mat-expansion-panel>
             <mat-expansion-panel-header>