feat: add schedule page

src/app/app.routes.ts

@@ -1,3 +1,7 @@
 import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
+import {ScheduleComponent} from "@page/schedule/schedule.component";
 
 export const routes: Routes = [];
+export const routes: Routes = [
+];

src/pages/schedule/schedule.component.css

@@ -0,0 +1,16 @@
+.schedule {
+  padding: 50px 15%;
+  min-height: 60vh;
+}
+
+@media screen and (max-width: 599px) {
+  .schedule {
+    padding: 25px;
+  }
+}
+
+@media screen and (min-width: 600px) and (max-width: 959px) {
+  .schedule {
+    padding: 30px 10%;
+  }
+}

src/pages/schedule/schedule.component.html

@@ -0,0 +1,5 @@
+<mat-sidenav-container class="schedule">
+  <app-tabs (eventResult)="result($event)"/>
+  <app-table-header [startWeek]="startWeek" [currentWeek]="currentWeek" (weekEvent)="handleWeekEvent($event)" #tableHeader/>
+  <app-table [currentWeek]="currentWeek" [startWeek]="startWeek" [data]="data" [isLoad]="isLoadTable"/>
+</mat-sidenav-container>

src/pages/schedule/schedule.component.ts

@@ -0,0 +1,115 @@
+import {Component, LOCALE_ID, ViewChild} from '@angular/core';
+import {TableComponent} from "@component/schedule/table/table.component";
+import {MatFormField, MatInput} from "@angular/material/input";
+import {MatButton} from "@angular/material/button";
+import {FormsModule} from "@angular/forms";
+import {AdditionalText, TableHeaderComponent} from "@component/schedule/table-header/table-header.component";
+import {addDays, weekInYear} from "@progress/kendo-date-math";
+import {MatCard} from "@angular/material/card";
+import {MatSidenavContainer} from "@angular/material/sidenav";
+import {TabsComponent, TabsSelect} from "@component/schedule/tabs/tabs.component";
+import {catchError, Observable} from "rxjs";
+import {ScheduleService} from "@api/v1/schedule.service";
+import {ScheduleResponse} from "@api/v1/scheduleResponse";
+import {PeriodTimes} from "@model/pairPeriodTime";
+
+@Component({
+  selector: 'app-schedule',
+  standalone: true,
+  imports: [
+    TableComponent,
+    MatInput,
+    MatFormField,
+    MatButton,
+    FormsModule,
+    TableHeaderComponent,
+    MatCard,
+    MatSidenavContainer,
+    TabsComponent
+  ],
+  templateUrl: './schedule.component.html',
+  styleUrl: './schedule.component.css',
+  providers: [
+    ScheduleService,
+    {provide: LOCALE_ID, useValue: 'ru-RU'}
+  ]
+})
+
+export class ScheduleComponent {
+  protected startWeek!: Date;
+  protected data: ScheduleResponse[] = [];
+  protected startTerm: Date;
+  protected isLoadTable: boolean = false;
+  protected pairPeriods: PeriodTimes = {};
+
+  @ViewChild('tableHeader') childComponent!: TableHeaderComponent;
+
+  constructor(private api: ScheduleService) {
+    this.calculateCurrentWeek();
+    this.startTerm = new Date(1, 1, 1);
+    api.pairPeriod().subscribe(date => {
+      this.pairPeriods = date;
+    });
+    api.startTerm().subscribe(date => {
+      this.startTerm = date.date;
+    });
+  }
+
+  protected result(data: [TabsSelect, number, Observable<ScheduleResponse[]>]) {
+    this.isLoadTable = true;
+    data[2]
+      .pipe(catchError(error => {
+        this.data = [];
+        throw error;
+      }))
+      .subscribe(x => {
+        this.data = x;
+        switch (data[0]) {
+          case TabsSelect.Group:
+            this.childComponent.AdditionalText(AdditionalText.Group, this.data[0].group);
+            break;
+          case TabsSelect.Professor:
+            let indexProfessor = this.data[0].professorsId.findIndex(p => p === data[1]);
+            console.log(indexProfessor);
+            console.log(data[1]);
+            this.childComponent.AdditionalText(AdditionalText.Professor, this.data[0].professors[indexProfessor]);
+            break;
+          case TabsSelect.LectureHall:
+            this.childComponent.AdditionalText(AdditionalText.LectureHall, `${this.data[0].lectureHalls[0]} (${this.data[0].campus[0]})`);
+            break;
+          case TabsSelect.Other:
+            this.childComponent.AdditionalText(AdditionalText.Other, '');
+            break;
+        }
+
+        this.isLoadTable = false;
+      });
+  }
+
+  private calculateCurrentWeek() {
+    let currentDate = new Date();
+
+    function startOfWeek(date: Date) {
+      return addDays(date, -date.getDay() + 1);
+    }
+
+    this.startWeek = currentDate.getDay() === 0 ? startOfWeek(addDays(currentDate, 1)) : startOfWeek(currentDate);
+
+    if (this.startWeek < this.startTerm)
+      this.startWeek = this.startTerm;
+  }
+
+  protected handleWeekEvent(eventData: boolean | null) {
+    if (eventData === null) {
+      this.calculateCurrentWeek();
+    } else if (eventData) {
+      this.startWeek = addDays(this.startWeek, 7);
+    } else {
+      this.startWeek = addDays(this.startWeek, -7);
+    }
+  }
+
+  get currentWeek(): number {
+    return (weekInYear(this.startWeek) - weekInYear(this.startTerm)) + 1;
+  }
+}