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

Added Features

Author: 0x41head

src/app/app.module.ts

@@ -19,7 +19,7 @@ import { MappingComponent } from './component/mapping/mapping.component';
 import { ReadmeToHtmlComponent } from './component/readme-to-html/readme-to-html.component';
 import { UsageComponent } from './component/usage/usage.component';
 import { AboutUsComponent } from './component/about-us/about-us.component';
-import { DependencyGraphComponent } from './dependency-graph/dependency-graph.component';
+import { DependencyGraphComponent } from './component/dependency-graph/dependency-graph.component';
 
 
 @NgModule({

…ncy-graph/dependency-graph.component.css …ncy-graph/dependency-graph.component.csssrc/app/dependency-graph/dependency-graph.component.css renamed to src/app/component/dependency-graph/dependency-graph.component.css src/app/dependency-graph/dependency-graph.component.css renamed to src/app/component/dependency-graph/dependency-graph.component.css

@@ -1,7 +1,7 @@
 
 import { HttpClient, HttpHandler } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ymlService } from '../service/yaml-parser/yaml-parser.service';
+import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import { DependencyGraphComponent } from './dependency-graph.component';
 
 describe('DependencyGraphComponent', () => {

…cy-graph/dependency-graph.component.html …cy-graph/dependency-graph.component.htmlsrc/app/dependency-graph/dependency-graph.component.html renamed to src/app/component/dependency-graph/dependency-graph.component.html src/app/dependency-graph/dependency-graph.component.html renamed to src/app/component/dependency-graph/dependency-graph.component.html

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import * as d3 from 'd3'
-import { ymlService } from '../service/yaml-parser/yaml-parser.service';
+import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
 
 export interface graphNodes{
   id:string

…graph/dependency-graph.component.spec.ts …graph/dependency-graph.component.spec.tssrc/app/dependency-graph/dependency-graph.component.spec.ts renamed to src/app/component/dependency-graph/dependency-graph.component.spec.ts src/app/dependency-graph/dependency-graph.component.spec.ts renamed to src/app/component/dependency-graph/dependency-graph.component.spec.ts

@@ -106,13 +106,29 @@
       <th>Dimension</th>
       <th>Sub Dimension</th>
       <th>Activity</th>
+      <th>Description</th>
+      <th>Risk</th>
+      <th>Measure</th>
+      <th>Knowledge</th>
+      <th>Resources</th>
+      <th>Time</th>
+      <th>Usefulness</th>
+      <th>Depends On</th>
       <th>SAMM</th>
       <th>ISO</th>
     </tr>
-    <tr *ngFor="let item of performedMappingDataSortedByISO">
+    <tr *ngFor="let item of allMappingDataSortedByISO">
       <td>{{item.dimension}}</td>
       <td>{{item.subDimension}}</td>
       <td>{{item.taskName}}</td>
+      <td>{{item.description}}</td>
+      <td>{{item.risk}}</td>
+      <td>{{item.measure}}</td>
+      <td>{{item.knowledge}}</td>
+      <td>{{item.resources}}</td>
+      <td>{{item.time}}</td>
+      <td>{{item.usefulness}}</td>
+      <td>{{item.dependsOn}}</td>
       <td>{{item.samm2}}</td>
       <td>{{item.ISO}}</td>
     </tr>

…ency-graph/dependency-graph.component.ts …ency-graph/dependency-graph.component.tssrc/app/dependency-graph/dependency-graph.component.ts renamed to src/app/component/dependency-graph/dependency-graph.component.ts src/app/dependency-graph/dependency-graph.component.ts renamed to src/app/component/dependency-graph/dependency-graph.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import { MatTableDataSource } from '@angular/material/table';
-import {COMMA, ENTER, T} from '@angular/cdk/keycodes';
+import {COMMA, ENTER } from '@angular/cdk/keycodes';
 import {ElementRef, ViewChild} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
@@ -31,6 +31,14 @@ export interface MappingElementSortedByISO {
   subDimension: string;
   taskName: string;
   samm2:string[];
+  description:string;
+  risk:string;
+  measure:string;
+  knowledge:string;
+  resources:string;
+  time:string;
+  usefulness:string;
+  dependsOn:string[]
 }
 
 
@@ -63,6 +71,10 @@ export class MappingComponent implements OnInit {
   allDimensionNames:string[]=[];
   temporaryMappingElement:any
 
+  //labels
+  knowledgeLabels: string[]=[]
+  generalLabels: string[]=[]
+
   separatorKeysCodes: number[] = [ENTER, COMMA];
   FilterCtrl = new FormControl('');
   SortCtrl = new FormControl('');
@@ -80,6 +92,14 @@ export class MappingComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    //gets value from meta folder 
+    this.yaml.setURI('./assets/YAML/meta.yaml');
+    // Function sets label data 
+    this.yaml.getJson().subscribe((data) => {
+      //console.log(data)
+      this.knowledgeLabels=data['strings']['en']['KnowledgeLabels']
+      this.generalLabels=data['strings']['en']['labels']
+    })
     //gets value from generated folder 
     this.yaml.setURI('./assets/YAML/generated/generated.yaml');
     // Function sets data 
@@ -157,7 +177,59 @@ export class MappingComponent implements OnInit {
   setValueandAppendToDatasetandSortbyISO(dim:string,subDim:string,task:string){
     var ISOArray:string[]=this.YamlObject[dim][subDim][task]['references']['iso27001-2017']
     var SAMMArray:string[]=this.YamlObject[dim][subDim][task]['references']['samm2']
-    this.temporaryMappingElement={"dimension":dim,"subDimension":subDim,"taskName":task,"ISO":"","samm2":SAMMArray}
+    try{
+      var CurrentDescription:string=this.YamlObject[dim][subDim][task]['description']
+    }
+    catch{
+      var CurrentDescription:string=""
+    }
+    try{
+      var CurrentRisk:string=this.YamlObject[dim][subDim][task]['risk']
+    }
+    catch{
+      var CurrentRisk:string=""
+    }
+    try{
+      var CurrentMeasure:string=this.YamlObject[dim][subDim][task]['measure']
+    }
+    catch{
+      var CurrentMeasure:string=""
+    }
+    try{
+      var CurrentKnowledge:string=this.knowledgeLabels[this.YamlObject[dim][subDim][task]['difficultyOfImplementation']['knowledge']]
+      
+    }
+    catch{
+      var CurrentKnowledge:string=""
+    }
+    try{
+      
+      var CurrentTime:string=this.generalLabels[this.YamlObject[dim][subDim][task]['difficultyOfImplementation']['time']]
+    }
+    catch{
+      var CurrentTime:string=""
+    }
+    try{
+      var CurrentResources:string=this.generalLabels[this.YamlObject[dim][subDim][task]['difficultyOfImplementation']['resources']]
+    }
+    catch{
+      var CurrentResources:string=""
+    }
+    try{
+      var CurrentUsefulness:string=this.generalLabels[this.YamlObject[dim][subDim][task]['usefulness']]
+    }
+    catch{
+      var CurrentUsefulness:string=""
+    }
+    try{
+      var CurrentDependsOn:string[]=this.YamlObject[dim][subDim][task]['dependsOn']
+    }
+    catch{
+      var CurrentDependsOn:string[]=[]
+    }
+    this.temporaryMappingElement={"dimension":dim,"subDimension":subDim,"taskName":task,"ISO":"","samm2":SAMMArray,
+    description:CurrentDescription,risk:CurrentRisk,measure:CurrentMeasure,knowledge:CurrentKnowledge,time:CurrentTime,
+    resources:CurrentResources,usefulness:CurrentUsefulness,dependsOn:CurrentDependsOn}
     if(ISOArray.length==0){
       this.allMappingDataSortedByISO.push(this.temporaryMappingElement)
       if(this.YamlObject[dim][subDim][task]['isImplemented']){
@@ -313,14 +385,15 @@ export class MappingComponent implements OnInit {
 
   exportToExcel(){
     /* passing the table id */
-    let element = document.getElementById("excel-table");
-    const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);
+    //let element = document.getElementById("excel-table");
+    //const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);
 
     /* generate workbook and add the worksheet */
-    const wb: XLSX.WorkBook = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
+    //const wb: XLSX.WorkBook = XLSX.utils.book_new();
+    //XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
 
     /* save to file */  
-    XLSX.writeFile(wb, "Planned-Activities-Sorted-By-ISO.xlsx");
+    //XLSX.writeFile(wb, "Planned-Activities-Sorted-By-ISO.xlsx");
+    console.log(this.allMappingDataSortedByISO)
   }
 }

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

@@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidenavButtonsComponent implements OnInit {
   Options: string[] = ['Matrix', 'Home','Implementation Levels','Mappings','Usage','About Us'];
-  Icons: string[] = ['bar_chart','home','home','home','home','home'];
+  Icons: string[] = ['table_chart','home','pie_chart','timeline','info','people'];
   Routing: string[]=['/','/home','/circular-heatmap','/mapping','/usage','/about']
   constructor() { }
 

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

@@ -44,8 +44,16 @@ <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: {{currentTask.tas
                 </mat-panel-title>
             </mat-expansion-panel-header>
             <p>Knowledge: {{this.KnowledgeLabels[this.currentTask.knowledge]}} </p>
-            <p>Time: {{this.TimeAndResourceLabels[this.currentTask.knowledge]}} </p>
-            <p>Resources: {{this.TimeAndResourceLabels[this.currentTask.knowledge]}}</p>
+            <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>
+                    <b>Usefulness</b>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            <p>{{this.GeneralLabels[this.currentTask.usefulness]}} </p>
         </mat-expansion-panel>
         <mat-expansion-panel>
             <mat-expansion-panel-header>

src/app/component/sidenav-buttons/sidenav-buttons.component.ts

@@ -27,6 +27,7 @@ export interface taskDescription {
   time:number
   dependsOn:string[]
   implementation:implementation[]
+  usefulness:number
 }
 
 @Component({
@@ -38,10 +39,10 @@ export class TaskDescriptionComponent implements OnInit {
 
   currentTask: taskDescription={dimension:'',subDimension:'',level:'',taskName:'',description:'',risk:'',
                                 measure:'',implementatonGuide:'',samm:[''],iso:[''],knowledge:-1,resources:-1,
-                              time:-1,dependsOn:[], implementation:[]}
+                              time:-1,dependsOn:[], implementation:[],usefulness:-1}
 
   YamlObject:any;
-  TimeAndResourceLabels:string[]=[];
+  GeneralLabels:string[]=[];
   KnowledgeLabels:string[]=[];
   rowIndex:number=0;
   markdown:md = md()
@@ -62,7 +63,7 @@ export class TaskDescriptionComponent implements OnInit {
     // Function sets label data 
     this.yaml.getJson().subscribe((data) => {
       this.YamlObject = data;
-      this.TimeAndResourceLabels=this.YamlObject['strings']['en']['labels']
+      this.GeneralLabels=this.YamlObject['strings']['en']['labels']
       this.KnowledgeLabels=this.YamlObject['strings']['en']['KnowledgeLabels']
     })
      //gets value from generated folder 
@@ -81,6 +82,13 @@ export class TaskDescriptionComponent implements OnInit {
       catch{
         console.log('Meta does not exist')
       }
+      try{
+        data['usefulness']
+        this.currentTask.usefulness=this.defineIntegerValues(data['usefulness'],-1)
+      }
+      catch{
+        console.log('Meta does not exist')
+      }
       try{
         data['difficultyOfImplementation']
         this.currentTask.knowledge=this.defineIntegerValues(data['difficultyOfImplementation']['knowledge'],-1)