dars-view.component.html

<div id="dars-container" *ngIf="!mobileView.matches">
  <!-- Main DARS Content -->
  <div id="dars-main">
    <cse-alert-container
      [alerts]="alerts$ | async"
      (dismiss)="onDismissAlert($event)">
    </cse-alert-container>

    <!-- METADATA LOADING -->
    <mat-card class="dars-view-loading" *ngIf="(metadataStatus$ | async) === 'Loading' || (metadataStatus$ | async) === 'NotLoaded'">
      <mat-progress-bar class="card-top-spinner" mode="indeterminate"></mat-progress-bar>
      <h2>Loading your DARS audits</h2>
      <p>Hang tight</p>
    </mat-card>
    <!-- END METADATA LOADING -->

    <!-- METADATA ERROR -->
    <mat-card class="dars-view-error" *ngIf="(metadataStatus$ | async) === 'Error'">
      <img class="bucky-image" src="../../../assets/img/bucky-dead.svg" alt="Error Bucky Badger">
      <h2>Error loading DARS audits</h2>
      <p>Try again in a bit</p>
    </mat-card>
    <!-- END METADATA ERROR -->

    <!-- METADATA LOADED -->
    <div *ngIf="(metadataStatus$ | async) === 'Loaded'">
        <h1 id="dars-view-title" class="mat-h1">Completed Audit Requests</h1>

        <div class="dars-audit-group" >
          <cse-dars-metadata-table
            [metadata]="programMetadata$"
            [type]="'normal'"
            [title]="'Degree Audit'"
            [tagline]="'See the progress towards your current academic plan/program and degree plans.'"
            [button]="'Run new degree audit'"
            (buttonClick)="openDegreeAuditDialog()">
          </cse-dars-metadata-table>
        </div>

        <div class="dars-audit-group">
          <cse-dars-metadata-table
            [metadata]="whatIfMetadata$"
            [type]="'what-if'"
            [title]="'&lsquo;What if&rsquo; Audit'"
            [tagline]="'See the progress towards a new academic plan/program and degree plans.'"
            [button]="'Run new &lsquo;what if&rsquo; audit'"
            (buttonClick)="openWhatIfAuditDialog()">
          </cse-dars-metadata-table>
        </div>
      </div>
    <!-- END METADATA LOADED -->
  </div>
</div>

<div *ngIf="mobileView.matches">

  <!-- METADATA LOADING -->
  <mat-card class="dars-view-loading" *ngIf="(metadataStatus$ | async) === 'Loading' || (metadataStatus$ | async) === 'NotLoaded'">
      <mat-progress-bar class="card-top-spinner" mode="indeterminate"></mat-progress-bar>
      <h2>Loading your DARS audits</h2>
      <p>Hang tight</p>
    </mat-card>
    <!-- END METADATA LOADING -->

    <!-- METADATA ERROR -->
    <mat-card class="dars-view-error" *ngIf="(metadataStatus$ | async) === 'Error'">
      <img class="bucky-image" src="../../../assets/img/bucky-dead.svg" alt="Error Bucky Badger">
      <h2>Error loading DARS audits</h2>
      <p>Try again in a bit</p>
    </mat-card>
    <!-- END METADATA ERROR -->

  <mat-card class="mat-card-mobile" *ngIf="(metadataStatus$ | async) === 'Loaded'">
      <mat-card-header>
        <mat-card-title>Degree Audit (DARS)</mat-card-title>
      </mat-card-header>
      <mat-card-content>
          <mat-tab-group mat-align-tabs="center" mat-stretch-tabs>
              <mat-tab label="Degree Audit">
                  <div class="run-audit-mobile">
                      <p class="mat-tagline">See the progress towards your current academic plan/program.</p>
                      <button mat-raised-button
                        aria-label="Run new degree audit"
                        [disabled]="(metadataStatus$ | async) != 'Loaded'"
                        color="primary"
                        (click)="openDegreeAuditDialog()">
                        Run new degree audit
                      </button>
                  </div>
                <mat-divider></mat-divider>
                <h3>Completed 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-metadata-mobile-view
                        [metadata]="programMetadata$ | async">
                      </cse-metadata-mobile-view>
                    </ng-container>
                  </div>
              </mat-tab>

              <mat-tab label="What-if">
                <div class="run-audit-mobile">
                    <p class="mat-tagline">See the progress towards a new or current academic plan/program and degree plans.</p>
                    <button
                    mat-raised-button
                    aria-label="Run new degree audit"
                    [disabled]="(metadataStatus$ | async) != 'Loaded'"
                    color="primary"
                    (click)="openWhatIfAuditDialog()">
                    Run new &lsquo;what if&rsquo; audit
                    </button>
                </div>
                <mat-divider></mat-divider>
                <h3>Completed 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-metadata-mobile-view
                        [metadata]="whatIfMetadata$ | async">
                      </cse-metadata-mobile-view>
                    </ng-container>
                  </div>
              </mat-tab>
          </mat-tab-group>
      </mat-card-content>
  </mat-card>
</div>