71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
|
|
import { FormControl, FormGroup } from '@angular/forms';
|
|
import { combineLatest, debounceTime, filter, map, startWith, takeUntil } from 'rxjs';
|
|
import { DestroyService } from '../destroy.service';
|
|
import { WorkerService } from '../worker.service';
|
|
|
|
@Component({
|
|
selector: 'app-form',
|
|
templateUrl: './form.component.html',
|
|
styleUrls: ['./form.component.css'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
providers: [
|
|
DestroyService,
|
|
],
|
|
})
|
|
export class FormComponent implements OnInit {
|
|
public formGroup = new FormGroup({
|
|
timer: new FormControl(300),
|
|
size: new FormControl(1000),
|
|
ids: new FormControl('1001, 1002, 1003'),
|
|
})
|
|
|
|
constructor(
|
|
private readonly destroy$: DestroyService,
|
|
private readonly workerService: WorkerService,
|
|
) {
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
combineLatest([
|
|
this.formGroup.controls['timer'].valueChanges
|
|
.pipe(
|
|
startWith(this.formGroup.controls['timer'].value),
|
|
filter(value => !isNaN(+value)),
|
|
debounceTime(300),
|
|
),
|
|
this.formGroup.controls['size'].valueChanges
|
|
.pipe(
|
|
startWith(this.formGroup.controls['size'].value),
|
|
filter(value => !isNaN(+value)),
|
|
debounceTime(300),
|
|
),
|
|
this.formGroup.controls['ids'].valueChanges
|
|
.pipe(
|
|
filter(value => {
|
|
const ids: Array<string> = value.replaceAll(/\s/g, '').split(',');
|
|
|
|
for (const id of ids) {
|
|
if (isNaN(+id)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}),
|
|
startWith(this.formGroup.controls['ids'].value),
|
|
map(value => value.replaceAll(/\s/g, '').split(',').map((id: string) => +id)),
|
|
debounceTime(300),
|
|
),
|
|
])
|
|
.pipe(
|
|
takeUntil(this.destroy$),
|
|
)
|
|
.subscribe(
|
|
([timer, size, ids]) => {
|
|
this.workerService.postMessage({timer: +timer, size: +size, ids});
|
|
},
|
|
);
|
|
}
|
|
}
|