Initial Commit for mapping section

Author: 0x41head

src/app/app-routing.module.ts

@@ -2,15 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 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';
 
-
 const routes: Routes = [
   {path: '',component: MainContentComponent},
   {path: 'matrix', component: MatrixComponent},
   {path: 'circular-heatmap', component: CircularHeatmapComponent},
-  {path: 'task-description', component: TaskDescriptionComponent}
+  {path: 'task-description', component: TaskDescriptionComponent},
+  {path: 'mapping', component: MappingComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { ymlService } from './service/yaml-parser/yaml-parser.service';
 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';
 
 
 @NgModule({
@@ -28,6 +29,8 @@ import { CircularHeatmapComponent } from './component/circular-heatmap/circular-
     TopHeaderComponent,
     TaskDescriptionComponent,
     CircularHeatmapComponent,
+    MappingComponent,
+    
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,4 @@
+table {
+    width: 100%;
+  }
+  

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

@@ -0,0 +1,34 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+    <!--- Note that these columns can be defined in any order.
+          The actual rendered columns are set as a property on the row definition" -->
+  
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+  
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+  
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+    </ng-container>
+  
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+    </ng-container>
+  
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  
+  

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

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

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+@Component({
+  selector: 'app-mapping',
+  templateUrl: './mapping.component.html',
+  styleUrls: ['./mapping.component.css']
+})
+export class MappingComponent implements OnInit {
+
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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'];
-  Icons: string[] = ['bar_chart','home','home'];
-  Routing: string[]=['/matrix','/','/circular-heatmap']
+  Options: string[] = ['Matrix', 'Home','Implementation Levels','Mappings'];
+  Icons: string[] = ['bar_chart','home','home','home'];
+  Routing: string[]=['/matrix','/','/circular-heatmap','/mapping']
   constructor() { }
 
   ngOnInit(): void {