Added About us and Usage sections

src/app/app-routing.module.ts

@@ -1,17 +1,22 @@
-import { NgModule } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AboutUsComponent } from './component/about-us/about-us.component';
 import { CircularHeatmapComponent } from './component/circular-heatmap/circular-heatmap.component';
 import { MainContentComponent } from './component/main-content/main-content.component';
 import { MappingComponent } from './component/mapping/mapping.component';
 import { MatrixComponent } from './component/matrix/matrix.component';
 import { TaskDescriptionComponent } from './component/task-description/task-description.component';
+import { UsageComponent } from './component/usage/usage.component';
+
 
 const routes: Routes = [
   {path: '',component: MainContentComponent},
   {path: 'matrix', component: MatrixComponent},
   {path: 'circular-heatmap', component: CircularHeatmapComponent},
   {path: 'task-description', component: TaskDescriptionComponent},
-  {path: 'mapping', component: MappingComponent}
+  {path: 'mapping', component: MappingComponent},
+  {path: 'usage', component:UsageComponent},
+  {path: 'about', component:AboutUsComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -17,6 +17,9 @@ import { HttpClientModule } from '@angular/common/http';
 import { CombinerService } from './service/combiner/combiner.service';
 import { CircularHeatmapComponent } from './component/circular-heatmap/circular-heatmap.component';
 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';
 
 
 @NgModule({
@@ -30,6 +33,9 @@ import { MappingComponent } from './component/mapping/mapping.component';
     TaskDescriptionComponent,
     CircularHeatmapComponent,
     MappingComponent,
+    ReadmeToHtmlComponent,
+    UsageComponent,
+    AboutUsComponent,
 
   ],
   imports: [

src/app/component/about-us/about-us.component.html

@@ -0,0 +1,2 @@
+<app-top-header section="About Us"></app-top-header>
+<app-readme-to-html MDFile="./assets/Markdown Files/README.md"></app-readme-to-html>

src/app/component/about-us/about-us.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutUsComponent } from './about-us.component';
+
+describe('AboutUsComponent', () => {
+  let component: AboutUsComponent;
+  let fixture: ComponentFixture<AboutUsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AboutUsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutUsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/about-us/about-us.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about-us',
+  templateUrl: './about-us.component.html',
+  styleUrls: ['./about-us.component.css']
+})
+export class AboutUsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/component/mapping/mapping.component.css

@@ -7,7 +7,6 @@
   margin: 20px;
   width: 50%;
   background-color: coral;
-
 }
 
 .matrix-table{

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

@@ -30,7 +30,7 @@
 
     <section class="sortSection">
       <mat-button-toggle-group [formControl]="SortCtrl" aria-label="Sort By">
-        <mat-button-toggle value="sortByTask" (click)="changeTableBasedOnCurrentSort()">Tasks</mat-button-toggle>
+        <mat-button-toggle value="sortByTask" (click)="changeTableBasedOnCurrentSort()">Activity</mat-button-toggle>
         <mat-button-toggle value="sortBySAMM" (click)="changeTableBasedOnCurrentSort()">SAMM</mat-button-toggle>
         <mat-button-toggle value="sortByISO" (click)="changeTableBasedOnCurrentSort()">ISO</mat-button-toggle>
       </mat-button-toggle-group>
@@ -52,7 +52,7 @@
     </ng-container>
 
     <ng-container matColumnDef="taskName">
-      <th mat-header-cell *matHeaderCellDef> Task </th>
+      <th mat-header-cell *matHeaderCellDef> Activity </th>
       <td mat-cell *matCellDef="let element"> {{element.taskName}} </td>
     </ng-container>
 

src/app/component/readme-to-html/readme-to-html.component.css

@@ -0,0 +1,6 @@
+.main-section{
+    background-color: aqua;
+    padding: 30px;
+    padding-top: 0px;
+
+}

src/app/component/readme-to-html/readme-to-html.component.html

@@ -0,0 +1,3 @@
+<div class="main-section">
+<div [innerHTML]="toRender"></div>
+</div>

src/app/component/readme-to-html/readme-to-html.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReadmeToHtmlComponent } from './readme-to-html.component';
+
+describe('ReadmeToHtmlComponent', () => {
+  let component: ReadmeToHtmlComponent;
+  let fixture: ComponentFixture<ReadmeToHtmlComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ReadmeToHtmlComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReadmeToHtmlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/readme-to-html/readme-to-html.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import * as md from 'markdown-it';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-readme-to-html',
+  templateUrl: './readme-to-html.component.html',
+  styleUrls: ['./readme-to-html.component.css']
+})
+export class ReadmeToHtmlComponent implements OnInit {
+  @Input() MDFile: string= "";
+  markdown:md = md()
+  markdownURI:any
+  toRender:string=""
+  constructor(private http:HttpClient) { }
+
+  async ngOnInit() {
+    try{
+      this.markdownURI = await this.http.get(this.MDFile, { responseType: 'text'}).toPromise();
+      this.toRender=this.markdown.render(this.markdownURI)
+    }
+    catch{
+      this.toRender= "Markdown file could not be found"
+    }
+
+  }
+
+}

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

@@ -6,9 +6,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./sidenav-buttons.component.css']
 })
 export class SidenavButtonsComponent implements OnInit {
-  Options: string[] = ['Matrix', 'Home','Implementation Levels','Mappings'];
-  Icons: string[] = ['bar_chart','home','home','home'];
-  Routing: string[]=['/matrix','/','/circular-heatmap','/mapping']
+  Options: string[] = ['Matrix', 'Home','Implementation Levels','Mappings','Usage','About Us'];
+  Icons: string[] = ['bar_chart','home','home','home','home','home'];
+  Routing: string[]=['/matrix','/','/circular-heatmap','/mapping','/usage','/about']
   constructor() { }
 
   ngOnInit(): void {

src/app/component/usage/usage.component.html

@@ -0,0 +1,2 @@
+<app-top-header section="Usage"></app-top-header>
+<app-readme-to-html MDFile="./assets/Markdown Files/USAGE.md"></app-readme-to-html>

src/app/component/usage/usage.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsageComponent } from './usage.component';
+
+describe('UsageComponent', () => {
+  let component: UsageComponent;
+  let fixture: ComponentFixture<UsageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UsageComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/usage/usage.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-usage',
+  templateUrl: './usage.component.html',
+  styleUrls: ['./usage.component.css']
+})
+export class UsageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}