dars-view.component.html

<mat-sidenav-container id="dars-container" *ngIf="!mobileView.matches">
  <mat-sidenav id="dars-report-container" mode="over" position="end" [opened]="(visibleAuditStatus$ | async) != 'NotLoaded'">
    <div class="audit-wrapper">
      <div class="audit-header-buttons">
        <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="closeAudit()">
          <mat-icon>chevron_left</mat-icon>
          Return to audit list
        </button>
        <button id="audit-open-window" mat-button color="primary" (click)="openNewTab()">
          Open in new tab
          <mat-icon>launch</mat-icon>
        </button>
      </div>

      <!-- <ng-container [ngSwitch]="visibleAuditStatus$ | async"> -->
      <ng-container [ngSwitch]="'Loaded'">
        <ng-container *ngSwitchCase="'Loaded'">
          <cse-dars-audit [audit]="audit$ | async"></cse-dars-audit>
        </ng-container>
        <ng-container *ngSwitchCase="'Loading'">
          <img id="loading-bucky" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
          <p>Loading your degree Audit</p>
          <mat-spinner diameter="50"></mat-spinner>
        </ng-container>
      </ng-container>
    </div>
  </mat-sidenav>

  <!-- Main DARS Content -->
  <div id="dars-main">
    <cse-alert-container
      [alerts]="alerts$ | async"
      (dismiss)="onDismissAlert($event)">
    </cse-alert-container>
    <h2 id="dars-view-title" class="mat-h1">Completed Audit Requests</h2>

    <div class="dars-header-bar">
      <div>
        <h3 class="mat-h2">Degree Audit</h3>
        <p class="mat-body">See the progress towards your current program of study and degree plans.</p>
      </div>
      <div>
        <button
          mat-raised-button
          aria-label="Run new degree audit"
          color="primary"
          [disabled]="(metadataStatus$ | async) != 'Loaded'"
          (click)="openNewAuditOptionsDialog('degree')">
        Run new degree audit
      </button>
      </div>
    </div>

    <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
      <ng-container *ngSwitchCase="'Error'">
        <h2 style="color:red">error loading metadata</h2>
      </ng-container>
      <ng-container *ngSwitchCase="'Loading'">
        <mat-spinner></mat-spinner>
      </ng-container>
      <ng-container *ngSwitchCase="'Loaded'">
        <cse-dars-metadata-table
          [metadata]="programMetadata$ | async"
          (openAudit)="openAudit($event)">
        </cse-dars-metadata-table>
      </ng-container>
    </div>

    <div class="dars-header-bar">
      <div>
        <h3 class="mat-h2">&lsquo;What if&rsquo; Audit</h3>
        <p class="mat-body">See the progress towards a new program of study and degree plans.</p>
      </div>
      <div>
        <button
          mat-raised-button
          aria-label="Run new degree audit"
          [disabled]="(metadataStatus$ | async) != 'Loaded'"
          color="primary"
          (click)="openNewAuditOptionsDialog('whatif')">
          Run new &lsquo;what if&rsquo; audit
        </button>
      </div>
    </div>

    <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
      <ng-container *ngSwitchCase="'Error'">
        <h2 style="color:red">error loading metadata</h2>
      </ng-container>
      <ng-container *ngSwitchCase="'Loading'">
        <mat-spinner></mat-spinner>
      </ng-container>
      <ng-container *ngSwitchCase="'Loaded'">
        <cse-dars-metadata-table
          [metadata]="whatIfMetadata$ | async"
          (openAudit)="openAudit($event)">
        </cse-dars-metadata-table>
      </ng-container>
    </div>
  </div>
</mat-sidenav-container>

<div *ngIf="mobileView.matches">
  <mat-card>
      <mat-card-header>
        <mat-card-title>Degree Audit (DARS)</mat-card-title>
      </mat-card-header>
      <mat-card-content>
          <mat-tab-group>
              <mat-tab label="Degree Audit">
                See the progress towards your current program of study.
                <button mat-raised-button
                  aria-label="Run new degree audit"
                  color="primary"
                  [disabled]="(metadataStatus$ | async) != 'Loaded'"
                  (click)="openNewAuditOptionsDialog('degree')">
                  Run new degree audit
                </button>
                <mat-divider></mat-divider>
                <h3>Audits</h3>
                <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
                    <ng-container *ngSwitchCase="'Error'">
                      <h2 style="color:red">error loading metadata</h2>
                    </ng-container>
                    <ng-container *ngSwitchCase="'Loading'">
                      <mat-spinner></mat-spinner>
                    </ng-container>
                    <ng-container *ngSwitchCase="'Loaded'">
                      <cse-dars-metadata-table
                        [metadata]="programMetadata$ | async"
                        (openAudit)="openAudit($event)">
                      </cse-dars-metadata-table>
                    </ng-container>
                  </div>
              </mat-tab>
              <mat-tab label="What-if">
                See the progress towards a new or current program of study and degree plans.
                <button
                mat-raised-button
                aria-label="Run new degree audit"
                [disabled]="(metadataStatus$ | async) != 'Loaded'"
                color="primary"
                (click)="openNewAuditOptionsDialog('whatif')">
                Run new &lsquo;what if&rsquo; audit
                </button>
                <mat-divider></mat-divider>
                <h3>Audits</h3>
                <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
                    <ng-container *ngSwitchCase="'Error'">
                      <h2 style="color:red">error loading metadata</h2>
                    </ng-container>
                    <ng-container *ngSwitchCase="'Loading'">
                      <mat-spinner></mat-spinner>
                    </ng-container>
                    <ng-container *ngSwitchCase="'Loaded'">
                      <cse-dars-metadata-table
                        [metadata]="whatIfMetadata$ | async"
                        (openAudit)="openAudit($event)">
                      </cse-dars-metadata-table>
                    </ng-container>
                  </div>
              </mat-tab>
          </mat-tab-group>
      </mat-card-content>
  </mat-card>
</div>