refactor: folders and components

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

@@ -0,0 +1,116 @@
+<section class="mat-elevation-z8 table-section" tabindex="0">
+  @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 -->
+            <div class="mat-body">({{ elementData["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 -->
+            @if (!isOneGroup) {
+              <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>