feat: add schedule page

This commit is contained in:
Polianin Nikita 2024-06-11 00:21:29 +03:00
parent aec9175d1a
commit 781599e2b7
4 changed files with 140 additions and 0 deletions

View File

@ -1,3 +1,7 @@
import { Routes } from '@angular/router'; 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 = [];
export const routes: Routes = [
];

View File

@ -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%;
}
}

View File

@ -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>

View File

@ -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;
}
}