feat: add setup/schedule page

src/pages/setup/schedule/schedule.component.html

@@ -0,0 +1,56 @@
+<h1>Основных настройки расписания</h1>
+<hr/>
+<p class="mat-body-2 secondary">
+  На этой странице вы можете настроить основные настройки для расписания.
+</p>
+<p class="mat-body-2 secondary">
+  Заполните необходимые поля, чтобы настроить корректное отображение расписания.
+</p>
+
+<form [formGroup]="scheduleSettings">
+  <p>
+    Ведите данные для настройки основных настроек расписания:
+  </p>
+
+  <div style="display:flex; flex-direction: column;">
+    <p>
+      Чтобы заполнить Cron можно воспользоваться <a href="https://crontab.guru/" target="_blank">сторонними</a>
+      ресурсами для их генерации
+    </p>
+    <mat-form-field color="accent">
+      <mat-label>Укажите cron</mat-label>
+      <input matInput
+             matTooltip='Расписание для автоматического обновление расписания вуза'
+             required
+             formControlName="cron">
+
+      @if (scheduleSettings.get('cron')?.hasError('required')) {
+        <mat-error>
+          Cron является <i>обязательным</i>
+        </mat-error>
+      }
+
+      @if (scheduleSettings.get('cron')?.hasError('pattern')) {
+        <mat-error>
+          Cron должен быть формата: (* * * * *)
+        </mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field color="accent">
+      <mat-label>Начало семестра</mat-label>
+      <input matInput [matDatepicker]="picker"
+             matTooltip="Укажите начало семестра"
+             required
+             formControlName="startTerm">
+      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-datepicker #picker></mat-datepicker>
+
+      @if (scheduleSettings.get('startTerm')?.hasError('required')) {
+        <mat-error>
+          Начало семестра является <i>обязательным</i>
+        </mat-error>
+      }
+    </mat-form-field>
+  </div>
+</form>

src/pages/setup/schedule/schedule.component.ts

@@ -0,0 +1,56 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NavigationService} from "@service/navigation.service";
+import SetupService from "@api/v1/setup.service";
+import {DateAdapter, MatNativeDateModule} from "@angular/material/core";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatSelectModule} from "@angular/material/select";
+import {MatInput} from "@angular/material/input";
+import {MatTooltip} from "@angular/material/tooltip";
+import {MatIconButton} from "@angular/material/button";
+import {MatIcon} from "@angular/material/icon";
+import {MatDatepickerModule} from "@angular/material/datepicker";
+
+@Component({
+  selector: 'app-schedule-conf',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInput,
+    MatTooltip,
+    MatIconButton,
+    MatIcon,
+    MatDatepickerModule,
+    MatNativeDateModule
+  ],
+  templateUrl: './schedule.component.html'
+})
+
+export class ScheduleComponent {
+  protected scheduleSettings!: FormGroup;
+
+  constructor(
+    private navigationService: NavigationService, private formBuilder: FormBuilder, private api: SetupService, private _adapter: DateAdapter<any>) {
+    this._adapter.setLocale('ru');
+    this.scheduleSettings = this.formBuilder.group({
+        cron: ['0 */6 * * *', Validators.pattern(/^([^\s]+\s){4}[^\s]{1}$/)],
+        startTerm: ['', Validators.required]
+      }
+    );
+
+    this.navigationService.setNextButtonState(false);
+    this.scheduleSettings.valueChanges.subscribe(() => {
+      this.navigationService.setNextButtonState(this.scheduleSettings.valid);
+    });
+
+    this.navigationService.nextButtonAction = () => {
+      return this.api.setSchedule({
+          "cronUpdateSchedule": this.scheduleSettings.get('cron')?.value,
+          "startTerm": this.scheduleSettings.get('startTerm')?.value
+        }
+      );
+    };
+  }
+}