Add audit model. Pull in basic audit data.

src/app/dars/dars-view/dars-view.component.html

 <mat-sidenav-container id="dars-container">
-    <mat-sidenav #auditPane id="dars-report-container" mode="over" position="end">
+    <mat-sidenav #auditSideNav id="dars-report-container" mode="over" position="end">
         <div class="audit-wrapper">
-            <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="auditPane.close()">
+            <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="auditSideNav.close()">
                 <mat-icon>chevron_left</mat-icon>
                 Return to audit list
             </button>
+
+            <div id="loading-audit" *ngIf="isLoading">
+                <img src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
+                <p>Loading your degree Audit</p>
+
+                <mat-spinner diameter="50"></mat-spinner>
+            </div>
     
-            <mat-card id="audit">
+            <mat-card id="audit" *ngIf="auditId">
                 <header class="no-horizontal-padding">
                     <div class="audit-metadata">
                         <div>
-                            <p>Prepared: 10/31/18 - 10:24</p>
-                            <p>Johnson, Jake John</p>
-                            <p>Program Code: BS 112</p>
+                            <p>{{audit.header.preparedDate}}</p>
+                            <p>{{audit.header.name}}</p>
+                            <p>Program Code: {{audit.header.degreeProgram}}</p>
                         </div>
     
                         <div class="text-align-right">
-                            <p>9071231234</p>
-                            <p>Catalog Year: 20171</p>
-                            <p>Alternate Catalog Year: 20191</p>
+                            <p>{{auditId}}</p>
+                            <p>{{audit.header.graduationDate}}</p>
+                            <p>{{audit.header.graduationDateLabel}}</p>
                         </div>
                     </div>
     
                     <h3 class="text-align-center">
-                        Degree Audit Report System (DARS)
+                        {{audit.header.clientDefinedMessage}}
                         <br />
-                        College of Letters and Science - Bachelor of Science (B.S)
+                        {{audit.header.title1}}
                         <br />
-                        Biology Major
+                        {{audit.header.title2}}
                     </h3>
     
                     <div class="audit-section-controles">
@@ -42,24 +49,36 @@
                     <p class="tight faded">Honors Processing: Keep current status.</p>
                     <p class="tight faded">Courses Used: Using courses from Curse Guide Plan: (Plan name field blank in cobol program "stuinst.)</p>
                 </section>
-    
+
+                <section *ngIf="audit.topText.length > 0">
+                    <p *ngFor="let text of audit.topText" class="text-align-center pre-wrap">{{text}}</p>
+                </section>
+
                 <section>
-                    <p>CL/YR: ALS 3</p>
-                    <p>Advisors: Asen, Brian</p>
-                    <p>HS Units:</p>
-                    <div>
-                        <p class="indent tight">LNG: 0.0 SPA 5.0</p>
-                        <p class="indent tight">MATH: ALG 1.0 GEO 1.0 ADV 3.0</p>
-                        <p class="indent tight">SCIENCE:</p>
-                        <p class="indent tight">SOC STUD:</p>
+                    <p class="text-align-center">{{audit.completeText}}</p>
+                </section>
+
+                <section *ngFor="let requirement of audit.requirements">
+                    <h4>{{requirement.requirementName}}</h4>
+                    <p>{{requirement.status.status}} - {{requirement.status.status}}</p>
+
+                    <div *ngFor="let contentType of requirement.requirementLinesGroupedByContentType">
+                        <h5>{{contentType.contentType}}</h5>
+
+                        <p *ngFor="let line of contentType.lines">{{line}}</p>
                     </div>
                 </section>
+    
+                <section *ngIf="audit.bottomText.length > 0">
+                    <p *ngFor="let text of audit.bottomText" class="text-align-center pre-wrap">{{text}}</p>
+                </section>
 
-                <section class="text-align-center">
+                <!-- Not sure where this info comes from? -->
+                <!-- <section class="text-align-center">
                     <h4 class="mat-h2 uppercase faded">At least one requirment has not been satisfied</h4>
                     <p class="mat-h2 faded">For more information about undergraduate L&S program see:</p>
                     <a href="#" mat-button color="primary">L&S Guide</a>
-                </section>
+                </section> -->
             </mat-card>
         </div>
     </mat-sidenav>
@@ -85,7 +104,7 @@
                 <ng-container matColumnDef="view">
                     <th mat-header-cell *matHeaderCellDef></th>
                     <td mat-cell *matCellDef="let audit">
-                        <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="auditPane.open()">View</button>
+                        <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="openAudit(3)">View</button>
                     </td>
                 </ng-container>
 

src/app/dars/dars-view/dars-view.component.scss

@@ -26,6 +26,10 @@
   text-transform: uppercase;
 }
 
+.pre-wrap {
+  white-space: pre-wrap;
+}
+
 #dars-container {
   width: 100%;
   height: 100%;
@@ -99,6 +103,27 @@ section {
   }
 }
 
+#loading-audit {
+  text-align: center;
+  font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+  img {
+    width: 100%;
+    max-width: 150px;
+    margin: auto;
+  }
+
+  p {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 18px;
+  }
+
+  mat-spinner {
+    margin: auto;
+  }
+}
+
 #dars-header-bar {
   display: flex;
   justify-content: space-between;

src/app/dars/dars-view/dars-view.component.ts

 import { Component, ViewChild, ElementRef } from '@angular/core';
 import { MatSidenav } from '@angular/material';
 import { DarsApiService } from '../services/api.service';
+import { Audit } from '../models/audit';
 
 @Component({
   selector: 'cse-dars-view',
@@ -49,5 +50,37 @@ export class DARSViewComponent {
     },
   ];
 
-  constructor(private api: DarsApiService) {}
+  @ViewChild('auditSideNav') auditSideNav: MatSidenav;
+
+  public isLoading: boolean;
+  public auditId: number | null;
+  public audit: Audit;
+
+  constructor(private api: DarsApiService) {
+    this.isLoading = false;
+    this.auditId = null;
+  }
+
+  public openAudit(auditId: number) {
+    // if user is loading a new audit
+    if (auditId !== this.auditId) {
+      this.isLoading = true;
+      this.auditId = null;
+
+      this.api
+        .getAudit(auditId)
+        .toPromise()
+        .then(audit => {
+          this.isLoading = false;
+          this.auditId = auditId;
+          this.audit = audit;
+
+          console.log(audit);
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    }
+    this.auditSideNav.open();
+  }
 }

src/app/dars/models/audit.ts

+export interface Requirement {
+  requirementName: string;
+  status: { status: string; description: string };
+  requirementLinesGroupedByContentType: {
+    contentType: string; // I think this can be string literals
+    lines: string[];
+  };
+}
+
+export interface Audit {
+  header: {
+    catalogYear: string;
+    catalogYearLabel: string;
+    clientDefinedMessage: string;
+    degreeProgram: string;
+    degreeProgramLabel: string;
+    graduationDate: string;
+    graduationDateLabel: string;
+    name: string;
+    preparedDate: string;
+    studentId: string;
+    title1: string;
+    title2: string;
+  };
+  topText: string[];
+  bottomText: string[];
+  completeText: string;
+  errorText: any[];
+  requirements: Requirement[];
+}

src/app/dars/services/api.service.ts

@@ -5,6 +5,7 @@ import { DegreeProgram } from '../models/degree-program';
 import { AuditMetadata } from '../models/audit-metadata';
 import { StudentDegreeProgram } from '../models/student-degree-program';
 import { environment } from './../../../environments/environment';
+import { Audit } from '../models/audit';
 
 const auditResponse: any = require('../../../assets/mock-data/audit-response.json');
 
@@ -48,10 +49,10 @@ export class DarsApiService {
   /**
    * Get a single audit.
    */
-  public getAudit(reportId: number): Observable<any> {
+  public getAudit(reportId: number): Observable<Audit> {
     // const url = `${environment.apiDarsUrl}/reports/${reportId}`;
     // return this.http.get<any>(url, HTTP_OPTIONS);
-    return of({ auditResponse });
+    return of(auditResponse);
   }
 
   /**