119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
import {Component, OnInit} from '@angular/core';
|
|
import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
|
|
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
|
|
import {ParticleManagerService} from '../../services/particle-manager.service';
|
|
import {Particle} from '../../models/particle.model';
|
|
import {MatSliderModule} from '@angular/material/slider';
|
|
import {MatSelectModule} from '@angular/material/select';
|
|
import {MatFormFieldModule} from '@angular/material/form-field';
|
|
import {MatInputModule} from '@angular/material/input';
|
|
import {MatAutocompleteModule} from '@angular/material/autocomplete';
|
|
import {Observable} from 'rxjs';
|
|
import {map, startWith} from 'rxjs/operators';
|
|
import {AsyncPipe} from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'app-particle',
|
|
imports: [
|
|
MatCard,
|
|
MatCardContent,
|
|
MatCardHeader,
|
|
MatCardTitle,
|
|
ReactiveFormsModule,
|
|
FormsModule,
|
|
MatSliderModule,
|
|
MatSelectModule,
|
|
MatFormFieldModule,
|
|
MatInputModule,
|
|
MatAutocompleteModule,
|
|
AsyncPipe
|
|
],
|
|
templateUrl: './particle.component.html',
|
|
styleUrl: './particle.component.scss'
|
|
})
|
|
export class ParticleComponent implements OnInit {
|
|
// Available particle types from the enum
|
|
particleTypes = Object.values(Particle);
|
|
|
|
// Form control for the particle type dropdown with filtering
|
|
particleTypeControl = new FormControl();
|
|
filteredParticleTypes: Observable<string[]>;
|
|
|
|
constructor(
|
|
private particleManagerService: ParticleManagerService,
|
|
) {
|
|
this.filteredParticleTypes = this.particleTypeControl.valueChanges.pipe(
|
|
startWith(''),
|
|
map(value => this._filterParticleTypes(value || ''))
|
|
);
|
|
}
|
|
|
|
ngOnInit() {
|
|
// Initialize the particle type control with the current value
|
|
this.particleTypeControl.setValue(this.selectedParticle);
|
|
|
|
// Update the selected particle when the control value changes
|
|
this.particleTypeControl.valueChanges.subscribe(value => {
|
|
if (value && Object.values(Particle).includes(value)) {
|
|
this.selectedParticle = value;
|
|
}
|
|
});
|
|
}
|
|
|
|
private _filterParticleTypes(value: string): string[] {
|
|
const filterValue = value.toLowerCase();
|
|
return this.particleTypes.filter(type => type.toLowerCase().includes(filterValue));
|
|
}
|
|
|
|
// Display function for the autocomplete
|
|
displayFn(particle: string): string {
|
|
return particle ? particle : '';
|
|
}
|
|
|
|
public get supportsColor(): boolean {
|
|
return this.particleManagerService.supportsColor;
|
|
}
|
|
|
|
/**
|
|
* Get the selected color
|
|
*/
|
|
public get selectedColor(): string {
|
|
return this.particleManagerService.getSelectedColor();
|
|
}
|
|
|
|
/**
|
|
* Set the selected color
|
|
*/
|
|
public set selectedColor(color: string) {
|
|
this.particleManagerService.setSelectedColor(color);
|
|
}
|
|
|
|
/**
|
|
* Get the selected particle type
|
|
*/
|
|
public get selectedParticle(): Particle {
|
|
return this.particleManagerService.particle;
|
|
}
|
|
|
|
/**
|
|
* Set the selected particle type
|
|
*/
|
|
public set selectedParticle(particle: Particle) {
|
|
this.particleManagerService.particle = particle;
|
|
}
|
|
|
|
/**
|
|
* Get the selected particle size
|
|
*/
|
|
public get selectedSize(): number {
|
|
return this.particleManagerService.size;
|
|
}
|
|
|
|
/**
|
|
* Set the selected particle size
|
|
*/
|
|
public set selectedSize(size: number) {
|
|
this.particleManagerService.size = size;
|
|
}
|
|
}
|