Skip to content

Commit a0f62a5

Browse files
wurstbrotwurstbrot
authored
Merge pull request #155 from 0x41head/master
Angular UI
2 parents 87ac70c + bf99d54 commit a0f62a5

5 files changed

Lines changed: 102 additions & 40 deletions

File tree

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,30 @@
77
stroke: #000;
88
shape-rendering: crispEdges;
99
}
10-
.heatmapClass{
11-
/*background-color: aquamarine;*/
10+
11+
12+
button{
13+
background-color: white;
14+
border: none;
15+
text-align: left;
16+
cursor:pointer;
1217
}
18+
1319
.example-card {
1420
float: right;
1521
width:25%;
1622
margin:5%;
1723
padding: 20px;
1824
}
19-
.buttonClass{
25+
.downloadButtonClass{
2026
position: absolute;
2127
padding: 10px;
22-
bottom: 12%;
28+
bottom: 5%;
2329
right: 5%;
30+
}
31+
.resetButtonClass{
32+
position: absolute;
33+
padding: 10px;
34+
bottom: 5%;
35+
right: 18%;
2436
}

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,42 @@
1616
(click)="this.toggleCheckbox(i)"
1717
[checked]="true"
1818
color="primary">
19-
{{ task['taskName'] }}
2019
</mat-checkbox>
20+
<button
21+
(click)="
22+
navigate(currentDimension, cardHeader, 1, task['taskName'])
23+
">
24+
{{ task['taskName'] }}
25+
</button>
2126
</ng-template>
2227
<ng-template #falseBlock>
2328
<mat-checkbox
2429
(click)="this.toggleCheckbox(i)"
2530
[checked]="false"
2631
color="primary">
27-
{{ task['taskName'] }}
2832
</mat-checkbox>
33+
<button
34+
(click)="
35+
navigate(currentDimension, cardHeader, 1, task['taskName'])
36+
">
37+
{{ task['taskName'] }}
38+
</button>
2939
</ng-template>
3040
</p>
3141
</mat-card-content>
3242
</mat-card>
3343
<button
3444
mat-raised-button
35-
class="buttonClass"
45+
class="downloadButtonClass"
3646
(click)="SaveEditedYAMLfile()">
3747
Download edited YAML file
3848
</button>
49+
<button
50+
mat-raised-button
51+
class="resetButtonClass"
52+
(click)="ResetIsImplemented()">
53+
Reset Implemented
54+
</button>
3955
</div>
4056
</div>
4157
<div class="col-md-3"></div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { HttpClient, HttpHandler } from '@angular/common/http';
22
import { ComponentFixture, TestBed } from '@angular/core/testing';
33
import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
44
import { CircularHeatmapComponent } from './circular-heatmap.component';
5+
import { RouterTestingModule } from '@angular/router/testing';
56

67
describe('CircularHeatmapComponent', () => {
78
let component: CircularHeatmapComponent;
@@ -10,6 +11,7 @@ describe('CircularHeatmapComponent', () => {
1011
beforeEach(async () => {
1112
await TestBed.configureTestingModule({
1213
providers: [ymlService, HttpClient, HttpHandler],
14+
imports: [RouterTestingModule],
1315
declarations: [CircularHeatmapComponent],
1416
}).compileComponents();
1517
});

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

Lines changed: 65 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import { Component, OnInit } from '@angular/core';
22
import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
33
import * as d3 from 'd3';
44
import * as yaml from 'js-yaml';
5+
import { Router, NavigationExtras } from '@angular/router';
56

67
export interface taskSchema {
78
taskName: string;
89
ifTaskDone: boolean;
910
}
1011

1112
export interface cardSchema {
12-
Name: string;
13+
Dimension: string;
14+
SubDimension: string;
1315
Level: string;
1416
'Done%': number;
1517
Task: taskSchema[];
@@ -21,16 +23,19 @@ export interface cardSchema {
2123
styleUrls: ['./circular-heatmap.component.css'],
2224
})
2325
export class CircularHeatmapComponent implements OnInit {
26+
Routing: string = '/task-description';
27+
2428
maxLevelOfTasks: number = -1;
2529
showTaskCard: boolean = false;
2630
cardHeader: string = '';
2731
cardSubheader: string = '';
32+
currentDimension: string = '';
2833
tasksData: any[] = [];
2934
ALL_CARD_DATA: cardSchema[] = [];
3035
radial_labels: string[] = [];
3136
YamlObject: any;
3237
segment_labels: string[] = [];
33-
constructor(private yaml: ymlService) {}
38+
constructor(private yaml: ymlService, private router: Router) {}
3439

3540
ngOnInit(): void {
3641
this.yaml.setURI('./assets/YAML/meta.yaml');
@@ -75,14 +80,16 @@ export class CircularHeatmapComponent implements OnInit {
7580
]
7681
);
7782
var tempData: cardSchema = {
78-
Name: '',
83+
Dimension: '',
84+
SubDimension: '',
7985
Level: '',
8086
'Done%': -1,
8187
Task: [],
8288
};
8389
var totalImplemented: number = 0;
8490
var totalTasks: number = 0;
85-
tempData['Name'] = allSubDimensionInThisDimension[j];
91+
tempData['Dimension'] = allDimensionNames[i];
92+
tempData['SubDimension'] = allSubDimensionInThisDimension[j];
8693
tempData['Level'] = 'Level ' + (l + 1);
8794
for (var k = 0; k < allTaskInThisSubDimension.length; k++) {
8895
try {
@@ -116,7 +123,7 @@ export class CircularHeatmapComponent implements OnInit {
116123
}
117124
}
118125
}
119-
console.log(this.ALL_CARD_DATA);
126+
//console.log(this.ALL_CARD_DATA);
120127
this.loadCircularHeatMap(
121128
this.ALL_CARD_DATA,
122129
'#chart',
@@ -134,7 +141,7 @@ export class CircularHeatmapComponent implements OnInit {
134141
var cnt = 0;
135142
for (var i = 0; i < this.ALL_CARD_DATA.length; i++) {
136143
if (
137-
this.ALL_CARD_DATA[i]['Name'] === this.cardHeader &&
144+
this.ALL_CARD_DATA[i]['SubDimension'] === this.cardHeader &&
138145
this.ALL_CARD_DATA[i]['Level'] === this.cardSubheader
139146
) {
140147
index = i;
@@ -179,33 +186,16 @@ export class CircularHeatmapComponent implements OnInit {
179186
.domain([0, 1])
180187
.range(['white', 'green']);
181188

182-
this.loadCircularHeatMap(
183-
this.ALL_CARD_DATA,
184-
'#chart',
185-
this.radial_labels,
186-
this.segment_labels
187-
);
188189
d3.selectAll(
189190
'#segment-' +
190-
this.ALL_CARD_DATA[index]['Name'].replace(/ /g, '-') +
191+
this.ALL_CARD_DATA[index]['SubDimension'].replace(/ /g, '-') +
191192
'-' +
192193
this.ALL_CARD_DATA[index]['Level'].replace(' ', '-')
193194
).attr('fill', function (p) {
194195
return color(_self.ALL_CARD_DATA[index]['Done%']);
195196
});
196197
}
197198

198-
SaveEditedYAMLfile() {
199-
console.log(this.YamlObject);
200-
let yamlStr = yaml.dump(this.YamlObject);
201-
let file = new Blob([yamlStr], { type: 'text/csv;charset=utf-8' });
202-
var link = document.createElement('a');
203-
link.href = window.URL.createObjectURL(file);
204-
link.download = 'generated.yaml';
205-
link.click();
206-
link.remove();
207-
}
208-
209199
loadCircularHeatMap(
210200
dataset: any,
211201
dom_element_to_append_to: string,
@@ -280,9 +270,11 @@ export class CircularHeatmapComponent implements OnInit {
280270
} catch {
281271
curr = d.srcElement.__data__;
282272
}
273+
//console.log(curr);
274+
_self.currentDimension = curr.Dimension;
283275
_self.cardSubheader = curr.Level;
284276
_self.tasksData = curr.Task;
285-
_self.cardHeader = curr.Name;
277+
_self.cardHeader = curr.SubDimension;
286278
_self.showTaskCard = true;
287279
//console.log(_self.tasksData)
288280
})
@@ -300,7 +292,7 @@ export class CircularHeatmapComponent implements OnInit {
300292
if (curr['Done%'] != -1) {
301293
d3.selectAll(
302294
'#segment-' +
303-
curr.Name.replace(/ /g, '-') +
295+
curr.SubDimension.replace(/ /g, '-') +
304296
'-' +
305297
curr.Level.replaceAll(' ', '-')
306298
).attr('fill', 'yellow');
@@ -318,7 +310,7 @@ export class CircularHeatmapComponent implements OnInit {
318310
if (curr['Done%'] != -1) {
319311
d3.selectAll(
320312
'#segment-' +
321-
curr.Name.replace(/ /g, '-') +
313+
curr.SubDimension.replace(/ /g, '-') +
322314
'-' +
323315
curr.Level.replaceAll(' ', '-')
324316
).attr('fill', function (p) {
@@ -333,7 +325,7 @@ export class CircularHeatmapComponent implements OnInit {
333325
} else {
334326
d3.selectAll(
335327
'#segment-' +
336-
curr.Name.replace(/ /g, '-') +
328+
curr.SubDimension.replace(/ /g, '-') +
337329
'-' +
338330
curr.Level.replaceAll(' ', '-')
339331
).attr('fill', '#DCDCDC');
@@ -396,12 +388,12 @@ export class CircularHeatmapComponent implements OnInit {
396388
.append('path')
397389
// .attr("class","segment")
398390
.attr('class', function (d: any) {
399-
return 'segment-' + d.Name.replace(/ /g, '-');
391+
return 'segment-' + d.SubDimension.replace(/ /g, '-');
400392
})
401393
.attr('id', function (d: any) {
402394
return (
403395
'segment-' +
404-
d.Name.replace(/ /g, '-') +
396+
d.SubDimension.replace(/ /g, '-') +
405397
'-' +
406398
d.Level.replaceAll(' ', '-')
407399
);
@@ -550,15 +542,56 @@ export class CircularHeatmapComponent implements OnInit {
550542
console.log(this.ALL_CARD_DATA);
551543
for (var x = 0; x < this.ALL_CARD_DATA.length; x++) {
552544
if (this.ALL_CARD_DATA[x]['Done%'] == -1) {
553-
console.log(this.ALL_CARD_DATA[x]['Name']);
545+
console.log(this.ALL_CARD_DATA[x]['SubDimension']);
554546
console.log(this.ALL_CARD_DATA[x]['Level']);
555547
d3.selectAll(
556548
'#segment-' +
557-
this.ALL_CARD_DATA[x]['Name'].replace(/ /g, '-') +
549+
this.ALL_CARD_DATA[x]['SubDimension'].replace(/ /g, '-') +
558550
'-' +
559551
this.ALL_CARD_DATA[x]['Level'].replace(' ', '-')
560552
).attr('fill', '#DCDCDC');
561553
}
562554
}
563555
}
556+
557+
navigate(dim: string, subdim: string, lvl: Number, taskName: string) {
558+
let navigationExtras: NavigationExtras = {
559+
queryParams: {
560+
dimension: dim,
561+
subDimension: subdim,
562+
level: lvl,
563+
taskName: taskName,
564+
},
565+
};
566+
//console.log(navigationExtras);
567+
//console.log(this.ALL_CARD_DATA);
568+
this.router.navigate([this.Routing], navigationExtras);
569+
}
570+
SaveEditedYAMLfile() {
571+
//console.log(this.YamlObject);
572+
let yamlStr = yaml.dump(this.YamlObject);
573+
let file = new Blob([yamlStr], { type: 'text/csv;charset=utf-8' });
574+
var link = document.createElement('a');
575+
link.href = window.URL.createObjectURL(file);
576+
link.download = 'generated.yaml';
577+
link.click();
578+
link.remove();
579+
}
580+
581+
ResetIsImplemented() {
582+
for (var x = 0; x < this.ALL_CARD_DATA.length; x++) {
583+
if (this.ALL_CARD_DATA[x]['Done%'] > 0) {
584+
this.ALL_CARD_DATA[x]['Done%'] = 0;
585+
for (var y = 0; y < this.ALL_CARD_DATA[x]['Task'].length; y++) {
586+
this.ALL_CARD_DATA[x]['Task'][y]['ifTaskDone'] = false;
587+
}
588+
d3.selectAll(
589+
'#segment-' +
590+
this.ALL_CARD_DATA[x]['SubDimension'].replace(/ /g, '-') +
591+
'-' +
592+
this.ALL_CARD_DATA[x]['Level'].replace(' ', '-')
593+
).attr('fill', 'white');
594+
}
595+
}
596+
}
564597
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { HttpClient, HttpHandler } from '@angular/common/http';
22
import { HttpClientTestingModule } from '@angular/common/http/testing';
33
import { ComponentFixture, TestBed } from '@angular/core/testing';
44
import { MatAutocomplete } from '@angular/material/autocomplete';
5-
import { Router } from '@angular/router';
65
import { RouterTestingModule } from '@angular/router/testing';
76
import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
87
import { MatrixComponent } from './matrix.component';

0 commit comments

Comments
 (0)