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

Added About us and Usage sections

Author: 0x41head

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.css

@@ -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.html

@@ -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.spec.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/about-us/about-us.component.ts

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

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

@@ -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/mapping/mapping.component.html

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

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

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