reivilibre/TaskBoard
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 2 Wiki Activity

Fix task complete percentage

Browse Source
This commit is contained in:
kiswa 2017-07-26 23:45:25 +00:00
parent cb3b0902fb
commit ae9834be5c
2 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/board/task/task.component.html
View File

@ -40,9 +40,9 @@
{{ category.name }}
</span>
</span>
<div *ngIf="totalTasks > 0"
<div *ngIf="percentComplete"
[style]="getPercentStyle()"
[title]="'Task ' + percentComplete * 100 + '% Complete'"></div>
[title]="getPercentTitle()"></div>
</div>
<tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>

61
src/app/board/task/task.component.ts
View File

@ -56,6 +56,9 @@ export class TaskDisplay implements OnInit {
private boardService: BoardService,
private modal: ModalService,
private notes: NotificationsService) {
this.totalTasks = 0;
this.completeTasks = 0;
this.percentComplete = 0;
this.contextMenuItems = [];
auth.userChanged.subscribe(() => {
@ -65,27 +68,39 @@ export class TaskDisplay implements OnInit {
boardService.activeBoardChanged.subscribe((board: Board) => {
this.activeBoard = board;
});
this.initMarked();
}
ngOnInit() {
// Since marked is global, the counts need to be stored uniquely per task.
// String literal access needed because augmenting the type doesn't work.
marked['taskCounts'] = []; // tslint:disable-line
marked['taskCounts'][this.taskData.id] = { // tslint:disable-line
total: 0,
complete: 0
};
this.generateContextMenuItems();
this.getTaskDescription();
this.initMarked();
this.calcPercentComplete();
}
getTaskDescription(): SafeHtml {
this.totalTasks = 0;
this.completeTasks = 0;
let html = this.sanitizer.bypassSecurityTrustHtml(
marked(this.taskData.description));
this.percentComplete = this.completeTasks / this.totalTasks;
return html;
}
getPercentStyle() {
return this.sanitizer.bypassSecurityTrustStyle(
'padding: 0; height: 5px; background-color: rgba(0, 0, 0, .4); ' +
'width: ' + (this.percentComplete * 100) + '%;');
}
getPercentTitle() {
return 'Task ' + (this.percentComplete * 100) + '% Complete';
}
// Expects a color in full HEX with leading #, e.g. #ffffe0
getTextColor(color: string): string {
let r = parseInt(color.substr(1, 2), 16),
@ -127,10 +142,21 @@ export class TaskDisplay implements OnInit {
});
}
private getPercentStyle() {
return this.sanitizer.bypassSecurityTrustStyle(
'padding: 0; height: 5px; background-color: rgba(0, 0, 0, .4); ' +
'width: ' + (this.percentComplete * 100) + '%;');
private calcPercentComplete() {
this.percentComplete = 0;
// String literal access needed because augmenting the type doesn't work.
marked['taskCounts'][this.taskData.id] = { // tslint:disable-line
total: 0,
complete: 0
};
marked(this.taskData.description);
if (marked['taskCounts'][this.taskData.id].total) { // tslint:disable-line
this.percentComplete = marked['taskCounts'][this.taskData.id].complete / // tslint:disable-line
marked['taskCounts'][this.taskData.id].total; // tslint:disable-line
}
}
private generateContextMenuItems() {
@ -154,7 +180,11 @@ export class TaskDisplay implements OnInit {
}
private getMenuItem(text: string): ContextMenuItem {
let menuText = text + ' to Board: <select id="boardsList' + text + '">';
let menuText = text + ' to Board: ' +
'<i class="icon icon-help-circled" ' +
'data-help="The task will be placed in the first ' +
'column of the selected board."></i> ' +
'<select id="boardsList' + text + '">';
this.boardsList.forEach((board: Board) => {
if (board.name !== this.activeBoard.name) {
@ -170,12 +200,13 @@ export class TaskDisplay implements OnInit {
private initMarked() {
let renderer = new marked.Renderer();
// String literal access needed because augmenting the type doesn't work.
renderer.listitem = text => {
if (/^\s*\[[x ]\]\s*/.test(text)) {
this.totalTasks += 1;
marked['taskCounts'][this.taskData.id].total += 1; // tslint:disable-line
if (/^\s*\[x\]\s*/.test(text)) {
this.completeTasks += 1;
marked['taskCounts'][this.taskData.id].complete += 1; // tslint:disable-line
}
text = text