MireaFrontend/src/components/schedule/table/table.component.html

<section class="mat-elevation-z8 table-section" tabindex="0"
         [style.overflow]="(dataSource.length === 0 || isLoad ? 'hidden' : 'auto')">
  @if (dataSource.length === 0 || isLoad) {
    <div class="overlay">
      @if (isLoad) {
        <app-data-spinner/>
      } @else {
        <p class="mat-h2">Нет данных.</p>
        <p class="mat-body-2">Выберите необходимое расписание сверху</p>
      }
    </div>
  }

  <table mat-table [dataSource]="tableDataSource" class="schedule-table size-icon">
    <!-- Pair Number -->
    <ng-container matColumnDef="pairNumber" sticky>
      <th mat-header-cell *matHeaderCellDef style="width: 0; min-width: fit-content;">
        Пара
        <!-- Even Or Odd -->
        <hr/>
        @if (currentWeek % 2 === 0) {
          Четная
        } @else {
          Нечетная
        }
      </th>

      <td mat-cell *matCellDef="let element" class="pair-cell" sticky>
        {{ element["pairNumber"] }}
      </td>
    </ng-container>

    <!-- Day of Week -->
    @for (day of daysOfWeek; track $index) {
      <ng-container [matColumnDef]="day">
        <!-- Day of Week Name -->
        <th mat-header-cell *matHeaderCellDef>
          <span class="mat-body-1">
            {{ day }}
          </span>
          <br/>
          <span class="mat-caption">
            {{ addDays(startWeek, daysOfWeek.indexOf(day)) | date:"shortDate" }}
          </span>
        </th>

        <!-- Info About Pairs -->
        <td mat-cell *matCellDef="let element" class="table-element">
          @for (elementData of element.data[daysOfWeek.indexOf(day) + 1]; track $index) {
            <!-- Discipline -->
            <div class="mat-body-1">{{ elementData["discipline"] }}</div>
            <!-- Type of Occupation -->
            @for (typeOfOccupation of elementData["typeOfOccupations"]; track $index) {
              @if ($index === 0 && elementData["typeOfOccupations"][$index - 1] !== typeOfOccupation) {
                @if ($index !== 0) {
                  <br/>
                }
                <div class="mat-body">({{ typeOfOccupation }})</div>
              }
            }

            <!-- Professors -->
            @if (checkAvailableData(elementData["professors"])) {
              <div class="mat-body">
                <i>
                  <mat-icon fontIcon="person"/>
                </i>
                @for (professor of elementData["professors"]; track $index) {
                  @if ($index !== 0) {
                    <br/>
                  }
                  {{ professor }}
                }
              </div>
            }

            <!-- Address (Lecture Hall & Campus) -->
            @if (checkAvailableData(elementData["lectureHalls"]) && checkAvailableData(elementData["campus"])) {
              <div class="mat-body">
                <i>
                  <mat-icon fontIcon="location_on"/>
                </i>
                @for (lectureHall of elementData["lectureHalls"]; track $index) {
                  @if ($index !== 0) {
                    <br/>
                  }
                  @if (lectureHall) {
                    {{ lectureHall }}
                  } @else {
                    N/A
                  }
                  /
                  @if (elementData["campus"][$index]) {
                    {{ elementData["campus"][$index] }}
                  } @else {
                    N/A
                  }
                }
              </div>
            }

            <!-- Group -->
            <div class="mat-body">
              <i>
                <mat-icon fontIcon="group"/>
              </i>
              {{ elementData["group"] }}
            </div>

            @if ($index + 1 !== element.data[daysOfWeek.indexOf(day) + 1].length) {
              <hr style="margin: 10px 0;"/>
            }
          }

        </td>
      </ng-container>
    }

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</section>