Add custom PL icon for requirments.

src/app/app.component.ts

 import { Component, OnDestroy, ViewChild, OnInit } from '@angular/core';
-import { MatSidenav, MatDialog } from '@angular/material';
+import { MatSidenav, MatDialog, MatIconRegistry } from '@angular/material';
 import { Profile } from '@app/core/models/profile';
 import {
   FormBuilder,
@@ -17,6 +17,7 @@ import { Store } from '@ngrx/store';
 import { GlobalState } from './core/state';
 import { Initialize } from './core/actions';
 import { Subscription } from 'rxjs';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'cse-root',
@@ -46,11 +47,19 @@ export class AppComponent implements OnInit, OnDestroy {
     private api: DegreePlannerApiService,
     private wsclient: WebsocketService,
     private store: Store<GlobalState>,
+    private matIconRegistry: MatIconRegistry,
+    private domSanitizer: DomSanitizer
   ) {
     this.subjectCode = new FormControl('', [Validators.required]);
     this.coursesForm = this.fb.group({
       coursesInput: null,
     });
+
+    // Register custom mat-icons
+    this.matIconRegistry.addSvgIcon(
+      'planned',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/img/planned-icon.svg')
+    );
   }
 
   ngOnInit() {

src/app/dars/audit-legend/audit-legend.component.ts

@@ -22,7 +22,10 @@ export class AuditLegendComponent {
     },
     {
       title: 'Requirement / Sub-requirement Information',
-      symbols: this.symbols.getByTaxonomy('requirement')
+      symbols: [
+        ...this.symbols.getByTaxonomy('requirement'),
+        ...this.symbols.getByTaxonomy('subrequirement')
+      ]
     },
     {
       title: 'Exception Symbols',

src/app/dars/audit-symbol/audit-symbol.component.html

@@ -4,5 +4,15 @@
   matTooltipPosition="above"
   [matTooltipDisabled]="!symbol.tooltip || disableTooltip">
     <span *ngIf="symbol.type === 'text'">{{symbol.text}}</span>
-    <mat-icon *ngIf="symbol.type === 'icon'" class="material-icons audit-symbol audit-symbol-{{asIcon(symbol).icon}}">{{asIcon(symbol).icon}}</mat-icon>
+    <mat-icon 
+      *ngIf="symbol.type === 'icon' && asIcon(symbol).custom !== true" 
+      class="material-icons audit-symbol audit-symbol-{{asIcon(symbol).icon}}">
+        {{asIcon(symbol).icon}}
+    </mat-icon>
+    <mat-icon 
+      *ngIf="symbol.type === 'icon' && asIcon(symbol).custom === true"
+      [ngStyle]="{width: size + 'px', height: size + 'px'}"
+      class="material-icons audit-symbol audit-symbol-{{asIcon(symbol).icon}}" 
+      [svgIcon]="asIcon(symbol).icon">
+    </mat-icon>
 </div>
\ No newline at end of file

src/app/dars/audit-symbol/audit-symbol.component.scss

@@ -26,4 +26,11 @@ span {
 mat-icon {
   margin-top: 4px;
   color: inherit;
+
+  svg {
+    path,
+    polygon {
+      fill: teal;
+    }
+  }
 }

src/app/dars/audit-symbol/audit-symbol.component.ts

@@ -9,6 +9,7 @@ import { AuditSymbol, AuditIconSymbol } from '../models/audit-symbols';
 export class AuditSymbolComponent {
   @Input() symbol: AuditSymbol;
   @Input() disableTooltip?: boolean;
+  @Input() size = 24;
 
   // Used to typecast because ng-switch is dumb
   asIcon(symbol: AuditSymbol): AuditIconSymbol {

src/app/dars/audit/audit.component.html

@@ -48,9 +48,9 @@
       </ng-container>
     </div>
 
-    <div *ngIf="audit.topSection.degreesSection && audit.topSection.degreesSection.degrees">
-      <h2>{{audit.topSection.degreesSection.label}}:</h2>
-      <div *ngFor="let degree of audit.topSection.degreesSection.degrees" class="audit-degree">
+    <div *ngIf="audit.topSection.degreesSection && audit.topSection.degreesSection?.degrees">
+      <h2>{{audit.topSection.degreesSection?.label}}:</h2>
+      <div *ngFor="let degree of audit.topSection.degreesSection?.degrees" class="audit-degree">
         <p class="audit-degree-awarded">Awarded: {{degree.awardedDate}}</p>
         <p class="audit-degree-major">Major: {{degree.major}} {{degree.degreeCode}}</p>
       </div>
@@ -152,11 +152,12 @@
                     <ng-container [ngSwitch]="requirement.status.status">
                       <cse-audit-symbol *ngSwitchCase="'OK'" [symbol]="symbol.findByText('OK')" class="requirement-icon ok-icon"></cse-audit-symbol>
                       <cse-audit-symbol *ngSwitchCase="'NO'" [symbol]="symbol.findByText('NO')" class="requirement-icon no-icon"></cse-audit-symbol>
+                      <cse-audit-symbol *ngSwitchCase="'PL'" [symbol]="symbol.findByTextAndTax('PL', 'requirement')" class="requirement-icon pl-icon"></cse-audit-symbol>
                       <span *ngSwitchDefault class="requirement-icon-spacer">&nbsp;</span>
                     </ng-container>
                 </div>
                 <div>
-                  <p [innerHTML]="requirement | requirementTitle"></p>
+                  <h3 [innerHTML]="requirement | requirementTitle"></h3>
                 </div>
               </mat-panel-title>
             </mat-expansion-panel-header>

src/app/dars/audit/audit.component.scss

@@ -148,6 +148,10 @@ $black: #000000;
   justify-content: flex-start;
   font-size: 1rem;
 
+  h3 {
+    font-weight: normal;
+  }
+
   &.status-ok {
     color: $green;
   }
@@ -155,6 +159,11 @@ $black: #000000;
   &.status-no {
     color: $red;
   }
+
+  &.status-pl {
+    color: $blue;
+  }
+
   &.status-none {
     color: $black;
   }

src/app/dars/models/audit-symbols.ts

@@ -12,10 +12,11 @@ export interface AuditTextSymbol {
   text: string;
   tooltip?: string;
   color?: 'green' | 'red' | 'blue';
-  taxonomy?: 'course' | 'grade' | 'requirement' | 'exception';
+  taxonomy?: 'course' | 'grade' | 'requirement' | 'subrequirement' | 'exception';
 }
 
 export interface AuditIconSymbol extends AuditTextSymbol {
   type: 'icon';
   icon: string;
+  custom?: boolean;
 }

src/app/dars/pipes/requirement-symbols.pipe.ts

@@ -9,7 +9,7 @@ export class RequirementSymbolsPipe implements PipeTransform {
   public transform(lines: string[]): AuditSymbol[] {
     const singleLine = lines.join(' ').trim();
     const matches = singleLine.match(/^((IP)|(IN-P)|(PL)|(R)|(<>)|\+|\-|\*)+(?![a-zA-Z])/g);
-    const symbols: AuditSymbol[] = this.symbols.getByTaxonomy('requirement');
+    const symbols: AuditSymbol[] = this.symbols.getByTaxonomy('subrequirement');
 
     if (matches && matches.length > 0) {
       const symbolString = singleLine.substr(0, matches[0].length);

src/app/dars/services/audit-symbols.service.ts

@@ -29,15 +29,24 @@ export class AuditSymbolsService {
     { type: 'text', text: 'U', tooltip: 'Unsatisfactory (pass/fail courses)', taxonomy: 'grade' },
     { type: 'icon', text: 'OK', icon: 'check_circle', tooltip: 'Requirement complete', color: 'green', taxonomy: 'requirement' },
     { type: 'icon', text: 'NO', icon: 'cancel', tooltip: 'Requirement not complete', color: 'red', taxonomy: 'requirement' },
+    {
+      type: 'icon',
+      text: 'PL',
+      icon: 'planned',
+      tooltip: 'Requirement uses planned course',
+      color: 'blue',
+      taxonomy: 'requirement',
+      custom: true
+    },
     { type: 'text', text: 'IP', tooltip: 'Requirement uses in-progress credit/courses', taxonomy: 'requirement' },
-    { type: 'text', text: 'IN-P', tooltip: 'Sub-requirement uses in progress credit/courses', taxonomy: 'requirement' },
-    { type: 'text', text: 'PL', tooltip: 'Requirement/sub-requirement uses planned course', taxonomy: 'requirement' },
-    { type: 'text', text: 'R', tooltip: 'Required sub-requirement (mandatory)', taxonomy: 'requirement' },
-    { type: 'text', text: '<>', tooltip: 'Optional/other requirement in OR\'d set complete', taxonomy: 'requirement' },
-    { type: 'icon', text: '+', icon: 'check', tooltip: 'Sub-requirement complete', color: 'green', taxonomy: 'requirement' },
-    { type: 'icon', text: '-', icon: 'close', tooltip: 'Sub-requirement not complete', color: 'red', taxonomy: 'requirement' },
-    { type: 'text', text: '*', tooltip: 'Optional sub-requirement, courses assigned', taxonomy: 'requirement' },
-    { type: 'text', text: ' ', tooltip: 'Optional sub-requirement, no courses assigned', taxonomy: 'requirement' },
+    { type: 'text', text: 'IN-P', tooltip: 'Sub-requirement uses in progress credit/courses', taxonomy: 'subrequirement' },
+    { type: 'text', text: 'R', tooltip: 'Required sub-requirement (mandatory)', taxonomy: 'subrequirement' },
+    { type: 'text', text: '<>', tooltip: 'Optional/other requirement in OR\'d set complete', taxonomy: 'subrequirement' },
+    { type: 'icon', text: '+', icon: 'check', tooltip: 'Sub-requirement complete', color: 'green', taxonomy: 'subrequirement' },
+    { type: 'icon', text: '-', icon: 'close', tooltip: 'Sub-requirement not complete', color: 'red', taxonomy: 'subrequirement' },
+    { type: 'text', text: 'PL', tooltip: 'Sub-requirement uses planned course', taxonomy: 'subrequirement' },
+    { type: 'text', text: '*', tooltip: 'Optional sub-requirement, courses assigned', taxonomy: 'subrequirement' },
+    { type: 'text', text: ' ', tooltip: 'Optional sub-requirement, no courses assigned', taxonomy: 'subrequirement' },
     { type: 'text', text: 'AC', tooltip: 'Course approved for requirement/sub-requirement', taxonomy: 'exception' },
     { type: 'text', text: 'IC', tooltip: 'Course inserted into requirement/sub-requirement', taxonomy: 'exception' },
     { type: 'text', text: 'EC', tooltip: 'Course exchanged for specified course', taxonomy: 'exception' },
@@ -61,4 +70,8 @@ export class AuditSymbolsService {
   public findByText(text: string): AuditSymbol | undefined {
     return this.symbols.find(s => s.text === text);
   }
+
+  public findByTextAndTax(text: string, tax: AuditTextSymbol['taxonomy']): AuditSymbol | undefined {
+    return this.symbols.find(s => s.text === text && s.taxonomy === tax);
+  }
 }

src/assets/img/planned-icon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="22px" viewBox="0 0 20 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57 (83077) - https://sketch.com -->
+    <title>Met with PL courses</title>
+    <defs>
+        <polygon id="path-1" points="3.88955357 7.37169643 0.985446429 4.46758929 0 5.45303571 3.88955357 9.34258929 12.2466964 0.985446429 11.26125 0"></polygon>
+    </defs>
+    <g id="Output" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard">
+            <g id="Met-with-PL-courses" transform="translate(-2.000000, -1.000000)">
+                <g id="baseline-calendar_today-24px">
+                    <path d="M20,3 L19,3 L19,1 L17,1 L17,3 L7,3 L7,1 L5,1 L5,3 L4,3 C2.9,3 2,3.9 2,5 L2,21 C2,22.1 2.9,23 4,23 L20,23 C21.1,23 22,22.1 22,21 L22,5 C22,3.9 21.1,3 20,3 Z M20,21 L4,21 L4,8 L20,8 L20,21 Z" id="Shape" fill="#0479A8" fill-rule="nonzero"></path>
+                    <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
+                </g>
+                <g id="Icon-/-Done-/-Filled" transform="translate(6.000000, 10.000000)">
+                    <mask id="mask-2" fill="#0479A8">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Mask" stroke="#0479A8" fill="#0479A8" fill-rule="nonzero" xlink:href="#path-1"></use>
+                    <g id="↳-Icon-Color" mask="url(#mask-2)" fill="#0479A8">
+                        <g transform="translate(-1.857143, -4.642857)" id="Rectangle">
+                            <rect x="0" y="0" width="16.7142857" height="16.7142857"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file