feat: add setup/logging page

src/pages/setup/logging/logging.component.html

@@ -0,0 +1,39 @@
+<h1>Настройка логирования</h1>
+<hr/>
+<p class="mat-body-2 secondary">
+  Настройте систему логирования как будет удобно для отображения.
+  Можно настроить путь к файлу, имена файлов или вовсе отключить логирование в файл.
+</p>
+
+<form [formGroup]="loggingSettings">
+  <p>
+    Введите данные для настройки системы логирования:
+  </p>
+
+  <div style="display:flex; flex-direction: column;">
+    <mat-checkbox
+      matTooltip='Использовать ли запись логов системы в файл'
+      formControlName="enabled"
+      (change)="isEnabledLoggingChange($event.checked)">
+      Включить логирование в файл
+    </mat-checkbox>
+
+    <mat-form-field color="accent">
+      <mat-label>Путь к логам</mat-label>
+      <input matInput
+             matTooltip="Укажите путь к директории в зависимости от вашей системы"
+             formControlName="logPath">
+    </mat-form-field>
+
+    <mat-form-field color="accent">
+      <mat-label>Название файла</mat-label>
+      <input matInput
+             matTooltip="Укажите название файла, в который будут записаны логи"
+             formControlName="logName">
+    </mat-form-field>
+  </div>
+</form>
+
+<div style="display: flex; justify-content: center;">
+  <button mat-flat-button color="accent" (click)="skipButton()">Пропустить</button>
+</div>

src/pages/setup/logging/logging.component.ts

@@ -0,0 +1,69 @@
+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 {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 {MatButton, MatIconButton} from "@angular/material/button";
+import {MatCheckbox} from "@angular/material/checkbox";
+
+@Component({
+  selector: 'app-logging',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInput,
+    MatTooltip,
+    MatIconButton,
+    MatCheckbox,
+    MatButton
+
+  ],
+  templateUrl: './logging.component.html'
+})
+
+export class LoggingComponent {
+  protected loggingSettings!: FormGroup;
+
+  protected isEnabledLoggingChange(check: boolean) {
+    if (check) {
+      this.loggingSettings.get('logPath')?.enable();
+      this.loggingSettings.get('logName')?.enable();
+    } else {
+      this.loggingSettings.get('logPath')?.disable();
+      this.loggingSettings.get('logName')?.disable();
+    }
+  }
+
+  protected skipButton() {
+    this.navigationService.skipNavigation.emit(() => this.api.setLogging(null));
+  }
+
+  constructor(
+    private navigationService: NavigationService, private formBuilder: FormBuilder, private api: SetupService) {
+    this.loggingSettings = this.formBuilder.group({
+        enabled: [true, Validators.required],
+        logPath: [''],
+        logName: ['']
+      }
+    );
+
+    this.navigationService.setNextButtonState(this.loggingSettings.valid);
+    this.loggingSettings.valueChanges.subscribe(() => {
+      this.navigationService.setNextButtonState(this.loggingSettings.valid);
+    });
+
+    this.navigationService.nextButtonAction = () => {
+      return this.api.setLogging({
+          "enableLogToFile": this.loggingSettings.get('cron')?.value,
+          "logFileName": this.loggingSettings.get('logName')?.value,
+          "logFilePath": this.loggingSettings.get('logPath')?.value
+        }
+      );
+    };
+  }
+}