diff --git a/src/app/dars/audit/audit.component.html b/src/app/dars/audit/audit.component.html index 6a64742dc1241a6026f707977690c4bf3e6c2903..9c07237b8829279195dafbe18ee1a692b6bdc459 100644 --- a/src/app/dars/audit/audit.component.html +++ b/src/app/dars/audit/audit.component.html @@ -40,31 +40,36 @@ </section> --> <section> - <mat-accordion multi="true" #requirements> + <mat-accordion multi="true" hideToggle="true" displayMode="flat" #requirements> <!-- START OF REQUIREMENT --> <ng-container *ngFor="let requirement of audit.requirements"> <!-- START OF REQUIREMENT TEXT --> <ng-container *ngIf="requirement.status.status === 'NONE'; else requirementTemplate"> - <pre *ngFor="let contentType of requirement.requirementLinesGroupedByContentType"> - <p *ngFor="let line of contentType.lines" class="text-align-center">{{line}}</p> - </pre> + <div *ngFor="let contentType of requirement.requirementLinesGroupedByContentType" class="content-type-{{contentType.contentType}}" matTooltip="{{contentType.contentType}}"> + <p *ngFor="let line of contentType.lines">{{line}}</p> + </div> </ng-container> <!-- END OF REQUIREMENT TEXT --> <!-- START OF ACCORDION REQUIREMENT --> <ng-template #requirementTemplate> - <mat-expansion-panel> + <mat-expansion-panel #requirementPanel> <mat-expansion-panel-header collapsedHeight="auto" expandedHeight="auto"> <mat-panel-title class="requirement-title status-{{requirement.status.status === 'OK' ? 'ok' : 'no'}}"> <div class="requirement-icon-outer"> + <mat-icon class="requirement-toggle">{{requirementPanel.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon> <mat-icon *ngIf="requirement.status.status === 'OK'" class="requirement-icon ok-icon">check_circle</mat-icon> <mat-icon *ngIf="requirement.status.status === 'NO'" class="requirement-icon no-icon">cancel</mat-icon> </div> <div> - <p *ngFor="let line of getRequirementTitle(requirement)">{{line}}</p> + <p> + <ng-container *ngFor="let line of getRequirementTitle(requirement)"> + {{line}} + </ng-container> + </p> </div> </mat-panel-title> </mat-expansion-panel-header> @@ -72,7 +77,7 @@ <div *ngFor="let contentType of getRequirementBody(requirement)"> <div class="content-type content-type-{{contentType.contentType}}" matTooltip="{{contentType.contentType}}" matTooltipPosition="left"> - <p *ngFor="let line of contentType.lines">{{line}}</p> + <p *ngFor="let line of contentType.lines" class="pre-wrap requirement-line" [innerHTML]="line | auditLine: contentType.contentType"></p> </div> </div> diff --git a/src/app/dars/audit/audit.component.scss b/src/app/dars/audit/audit.component.scss index f4796d37b6005c188b0705bf2452da18ce5d794a..6296c78bcfda6ae8880418642de4db4477e43fb1 100644 --- a/src/app/dars/audit/audit.component.scss +++ b/src/app/dars/audit/audit.component.scss @@ -1,3 +1,7 @@ +$green: #2e7d32; +$red: #c5050c; +$blue: #0479a8; + #audit { padding: 20px 100px; @@ -78,6 +82,12 @@ section { .pre-wrap { white-space: pre-wrap; + font-family: 'Consolas', 'SFMono-Regular', 'Liberation Mono', 'Menlo', + 'Courier', monospace; +} + +.mat-expansion-panel { + box-shadow: none; } .requirement-title { @@ -86,14 +96,96 @@ section { font-size: 1.35rem; &.status-ok { - color: #2e7d32; + color: $green; } &.status-no { - color: #c5050c; + color: $red; + } +} + +.requirement-icon-outer { + display: flex; + justify-content: center; + align-items: flex-start; + margin: 20px 15px 0 0; + font-size: 1.75rem; +} + +.requirement-toggle { + font-size: 2rem !important; + margin-right: 20px; + color: #000; + margin-top: -4px; +} + +.content-type { + margin-bottom: 5px; + + > p { + margin: 2.5px auto; } } +.content-type-hText { + text-align: center; +} + +.content-type-noSubrequirementAcceptCourses, +.content-type-noSubrequirementCourses, +.content-type-noSubrequirementNeedsSummaryLine, +.content-type-noSubrequirementRejectCourses, +.content-type-okSubrequirementAcceptCourses, +.content-type-okSubrequirementCourses, +.content-type-okSubrequirementEarnedLine, +.content-type-okSubrequirementNeedsSummaryLine { + margin-left: 43px; +} + +.requirement-line { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + flex-wrap: wrap; +} + +.content-type-okSubrequirementTLine, +.content-type-noSubrequirementTLine { + margin-top: 20px; + font-weight: bold; +} + +.content-type-okSubrequirementTLine { + color: $green; +} + +.content-type-noSubrequirementTLine { + color: $red; +} + +.tline-header { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.content-type-okSubrequirementCourses, +.content-type-noSubrequirementCourses { + color: $blue; +} + +.content-type-okSubrequirementNeedsSummaryLine { + color: $green; +} + +.content-type-noSubrequirementNeedsSummaryLine, +.content-type-noRequirementNeedsLine { + color: $red; + margin-left: 20px; + align-items: center; +} + .requirement-icon-outer { margin: 20px 15px 0 0; font-size: 1.75rem; @@ -114,13 +206,13 @@ section { .content-type-okSubrequirementCourses, .content-type-noSubrequirementCourses { - color: #0479a8; + color: $blue; margin-left: 20px; } .content-type-okSubrequirementNeedsSummaryLine, .content-type-noSubrequirementNeedsSummaryLine, .content-type-noRequirementNeedsLine { - color: #c5050c; margin-left: 20px; + color: $red; } diff --git a/src/app/dars/audit/audit.component.ts b/src/app/dars/audit/audit.component.ts index 24bd027424b697aa5dc4d767f7632470385cc574..e55b53adea53f4b7bf2aaa3e46d5067d4fa66d71 100644 --- a/src/app/dars/audit/audit.component.ts +++ b/src/app/dars/audit/audit.component.ts @@ -1,10 +1,5 @@ -import { Component, Input, ViewChild } from '@angular/core'; +import { Component, Input, ViewChild, OnInit } from '@angular/core'; import { Audit, Requirement, ContentType } from '../models/audit'; -import { DarsApiService } from '../services/api.service'; -import { Store } from '@ngrx/store'; -import { GlobalState } from '@app/core/state'; -import * as selectors from '../store/selectors'; -import { Observable } from 'rxjs'; import { MatAccordion } from '@angular/material'; @Component({ @@ -12,12 +7,16 @@ import { MatAccordion } from '@angular/material'; templateUrl: './audit.component.html', styleUrls: ['./audit.component.scss'], }) -export class DarsAuditComponent { +export class DarsAuditComponent implements OnInit { public metadata: any = {}; public auditId: number; @Input() audit: Audit; - @ViewChild('requirements') requirements: MatAccordion; + @ViewChild(MatAccordion) requirements: MatAccordion; + + public ngOnInit() { + console.log(this.audit); + } public openAllRequirements() { this.requirements.openAll(); diff --git a/src/app/dars/dars.module.ts b/src/app/dars/dars.module.ts index 94d26c4c5ddc11518a386b1ac90e675e0aa647ff..38963c7aac796df71f5b08a64265234ec40071cc 100644 --- a/src/app/dars/dars.module.ts +++ b/src/app/dars/dars.module.ts @@ -10,6 +10,7 @@ import { MatStepperModule } from '@angular/material'; import { AlertContainerComponent } from '../shared/components/alert-container/alert-container.component'; import { StoreModule } from '@ngrx/store'; import { darsReducer } from './store/reducer'; +import { AuditLinePipe } from './pipes/audit-line.pipe'; @NgModule({ imports: [ @@ -20,6 +21,7 @@ import { darsReducer } from './store/reducer'; ], exports: [MatStepperModule], declarations: [ + AuditLinePipe, NewAuditOptionsComponent, DARSViewComponent, DarsAuditComponent, diff --git a/src/app/dars/pipes/audit-line.pipe.ts b/src/app/dars/pipes/audit-line.pipe.ts new file mode 100644 index 0000000000000000000000000000000000000000..33522bbbc173e1f4f4fd4ab551a007ac58c98ae6 --- /dev/null +++ b/src/app/dars/pipes/audit-line.pipe.ts @@ -0,0 +1,33 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { ContentType } from '../models/audit'; +/* + * Raise the value exponentially + * Takes an exponent argument that defaults to 1. + * Usage: + * value | exponentialStrength:exponent + * Example: + * {{ 2 | exponentialStrength:10 }} + * formats to: 1024 + */ +@Pipe({ name: 'auditLine' }) +export class AuditLinePipe implements PipeTransform { + replaceIcon(line: string, search: string, icon: string): string { + return line.replace(search, `<i class="material-icons">${icon}</i>`); + } + + transform(line: string, type: ContentType['contentType']): string { + switch (type) { + case 'okSubrequirementTLine': { + line = this.replaceIcon(line, '+', 'check'); + break; + } + + case 'noSubrequirementTLine': { + line = this.replaceIcon(line, '-', 'close'); + break; + } + } + + return line; + } +}