Skip to content

Commit 1bf7781

Browse files
0x41head0x41head
authored
Merge pull request #131 from 0x41head/angular-ui
Minor Changes + initial commit for mapping section
2 parents 0f2ff1a + 33bb8e2 commit 1bf7781

13 files changed

Lines changed: 3023 additions & 1869 deletions

‎src/app/app-routing.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@ import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
33
import { CircularHeatmapComponent } from './component/circular-heatmap/circular-heatmap.component';
44
import { MainContentComponent } from './component/main-content/main-content.component';
5+
import { MappingComponent } from './component/mapping/mapping.component';
56
import { MatrixComponent } from './component/matrix/matrix.component';
67
import { TaskDescriptionComponent } from './component/task-description/task-description.component';
78

8-
99
const routes: Routes = [
1010
{path: '',component: MainContentComponent},
1111
{path: 'matrix', component: MatrixComponent},
1212
{path: 'circular-heatmap', component: CircularHeatmapComponent},
13-
{path: 'task-description', component: TaskDescriptionComponent}
13+
{path: 'task-description', component: TaskDescriptionComponent},
14+
{path: 'mapping', component: MappingComponent}
1415
];
1516

1617
@NgModule({

‎src/app/app.module.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { ymlService } from './service/yaml-parser/yaml-parser.service';
1616
import { HttpClientModule } from '@angular/common/http';
1717
import { CombinerService } from './service/combiner/combiner.service';
1818
import { CircularHeatmapComponent } from './component/circular-heatmap/circular-heatmap.component';
19+
import { MappingComponent } from './component/mapping/mapping.component';
1920

2021

2122
@NgModule({
@@ -28,6 +29,8 @@ import { CircularHeatmapComponent } from './component/circular-heatmap/circular-
2829
TopHeaderComponent,
2930
TaskDescriptionComponent,
3031
CircularHeatmapComponent,
32+
MappingComponent,
33+
3134
],
3235
imports: [
3336
BrowserModule,

‎src/app/component/circular-heatmap/circular-heatmap.component.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,4 @@
2121
padding: 10px;
2222
bottom: 12%;
2323
right: 5%;
24-
}
25-
24+
}

‎src/app/component/circular-heatmap/circular-heatmap.component.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export class CircularHeatmapComponent implements OnInit {
137137
for(var j=0;j<allSubDimensionInThisDimension.length;j++){
138138
if(allSubDimensionInThisDimension[j]==this.cardHeader){
139139
var taskName= this.ALL_CARD_DATA[index]["Task"][taskIndex]["taskName"]
140-
console.log(taskName)
140+
//console.log(taskName)
141141
this.YamlObject[allDimensionNames[i]][allSubDimensionInThisDimension[j]][taskName]["isImplemented"]=this.ALL_CARD_DATA[index]["Task"][taskIndex]["ifTaskDone"]
142142
break
143143
}
@@ -223,17 +223,17 @@ export class CircularHeatmapComponent implements OnInit {
223223
_self.tasksData=d.explicitOriginalTarget.__data__.Task;
224224
_self.cardHeader=d.explicitOriginalTarget.__data__.Name
225225
_self.showTaskCard=true
226-
console.log(_self.tasksData)
226+
//console.log(_self.tasksData)
227227
})
228228
.on('mouseover', function(d) {
229229

230230
curr=d.explicitOriginalTarget.__data__
231-
console.log(curr)
231+
//console.log(curr)
232232
// increase the segment height of the one being hovered as well as all others of the same date
233233
// while decreasing the height of all others accordingly
234234
//console.log(d)
235235
if(curr["Done%"]!=-1){
236-
d3.selectAll("#segment-" + curr.Name.replace(/ /g, "-")+'-'+curr.Level.replaceAll(' ','-')).attr("fill","white")
236+
d3.selectAll("#segment-" + curr.Name.replace(/ /g, "-")+'-'+curr.Level.replaceAll(' ','-')).attr("fill","yellow")
237237
};
238238

239239
})
@@ -347,8 +347,7 @@ export class CircularHeatmapComponent implements OnInit {
347347
.text(function(d:any) {
348348
return d;
349349
});
350-
});
351-
350+
});
352351
}
353352

354353
/* Arc functions */
@@ -434,6 +433,5 @@ export class CircularHeatmapComponent implements OnInit {
434433
d3.selectAll("#segment-" + this.ALL_CARD_DATA[x]["Name"].replace(/ /g, "-")+'-'+this.ALL_CARD_DATA[x]["Level"].replace(' ','-')).attr("fill","#DCDCDC");
435434
}
436435
}
437-
}
438-
436+
}
439437
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
table {
2+
width: 100%;
3+
}
4+

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
2+
3+
<!--- Note that these columns can be defined in any order.
4+
The actual rendered columns are set as a property on the row definition" -->
5+
6+
<!-- Position Column -->
7+
<ng-container matColumnDef="position">
8+
<th mat-header-cell *matHeaderCellDef> No. </th>
9+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
10+
</ng-container>
11+
12+
<!-- Name Column -->
13+
<ng-container matColumnDef="name">
14+
<th mat-header-cell *matHeaderCellDef> Name </th>
15+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
16+
</ng-container>
17+
18+
<!-- Weight Column -->
19+
<ng-container matColumnDef="weight">
20+
<th mat-header-cell *matHeaderCellDef> Weight </th>
21+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
22+
</ng-container>
23+
24+
<!-- Symbol Column -->
25+
<ng-container matColumnDef="symbol">
26+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
27+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
28+
</ng-container>
29+
30+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
31+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
32+
</table>
33+
34+

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { MappingComponent } from './mapping.component';
4+
5+
describe('MappingComponent', () => {
6+
let component: MappingComponent;
7+
let fixture: ComponentFixture<MappingComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ MappingComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(MappingComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
export interface PeriodicElement {
4+
name: string;
5+
position: number;
6+
weight: number;
7+
symbol: string;
8+
}
9+
10+
const ELEMENT_DATA: PeriodicElement[] = [
11+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
12+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
13+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
14+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
15+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
16+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
17+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
18+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
19+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
20+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
21+
];
22+
23+
@Component({
24+
selector: 'app-mapping',
25+
templateUrl: './mapping.component.html',
26+
styleUrls: ['./mapping.component.css']
27+
})
28+
export class MappingComponent implements OnInit {
29+
30+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
31+
dataSource = ELEMENT_DATA;
32+
33+
constructor() { }
34+
35+
ngOnInit(): void {
36+
}
37+
38+
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { Component, OnInit } from '@angular/core';
66
styleUrls: ['./sidenav-buttons.component.css']
77
})
88
export class SidenavButtonsComponent implements OnInit {
9-
Options: string[] = ['Matrix', 'Home','Implementation Levels'];
10-
Icons: string[] = ['bar_chart','home','home'];
11-
Routing: string[]=['/matrix','/','/circular-heatmap']
9+
Options: string[] = ['Matrix', 'Home','Implementation Levels','Mappings'];
10+
Icons: string[] = ['bar_chart','home','home','home'];
11+
Routing: string[]=['/matrix','/','/circular-heatmap','/mapping']
1212
constructor() { }
1313

1414
ngOnInit(): void {

‎src/app/component/task-description/task-description.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: {{currentTask.tas
3131
</mat-expansion-panel-header>
3232
<p [innerHTML]="currentTask.measure"></p>
3333
</mat-expansion-panel>
34-
<mat-expansion-panel>
34+
<mat-expansion-panel *ngIf="currentTask.implementatonGuide">
3535
<mat-expansion-panel-header>
3636
<mat-panel-title>
3737
<b>Implementation Guide</b>
@@ -42,12 +42,12 @@ <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: {{currentTask.tas
4242
<mat-expansion-panel>
4343
<mat-expansion-panel-header>
4444
<mat-panel-title>
45-
<b>Difficulty Of Implementation</b>
45+
<b>Difficulty of Implementation</b>
4646
</mat-panel-title>
4747
</mat-expansion-panel-header>
48-
<p>Knowledge: {{this.currentTask.knowledge}} </p>
49-
<p>Time: {{this.currentTask.time}} </p>
50-
<p>Resources: {{this.currentTask.resources}}</p>
48+
<p>Knowledge: {{this.KnowledgeLabels[this.currentTask.knowledge]}} </p>
49+
<p>Time: {{this.TimeAndResourceLabels[this.currentTask.knowledge]}} </p>
50+
<p>Resources: {{this.TimeAndResourceLabels[this.currentTask.knowledge]}}</p>
5151
</mat-expansion-panel>
5252
<mat-expansion-panel>
5353
<mat-expansion-panel-header>
@@ -128,7 +128,7 @@ <h1>{{currentTask.dimension}} -> {{currentTask.subDimension}}: {{currentTask.tas
128128
</mat-accordion>
129129
</p>
130130
</mat-expansion-panel>
131-
<mat-expansion-panel>
131+
<mat-expansion-panel *ngIf="this.currentTask.dependsOn">
132132
<mat-expansion-panel-header>
133133
<mat-panel-title>
134134
<b>Depends on</b>

0 commit comments

Comments
 (0)