services/configurator/painter-config-page.component.ts

0001 import {
0002   AfterViewInit, Component, Inject, OnInit, ViewChild, ViewContainerRef
0003 } from '@angular/core';
0004 import {DOCUMENT, NgForOf} from '@angular/common';
0005 import { TrackPainterConfig } from '../track-painter-config';
0006 import { ConfiguratorRegistryService } from './configurator-registry.service';
0007 import { TrackConfiguratorComponent } from './track-configurator.component';
0008 import {MatList, MatListItem} from "@angular/material/list";
0009
0010 @Component({
0011   selector: 'app-painter-config-page',
0012   standalone: true,
0013   template: `
0014     <div class="layout">
0015       <div class="left">
0016         <mat-list>
0017           <mat-list-item *ngFor="let item of configItems"
0018                          [class.selected]="selectedItem === item"
0019                          (click)="selectItem(item)">
0020             {{item.name}}
0021           </mat-list-item>
0022         </mat-list>
0023       </div>
0024       <div class="right">
0025         <ng-container #configuratorContainer></ng-container>
0026       </div>
0027     </div>
0028   `,
0029   styles: [`.layout { display: flex; } .left { width: 200px; } .right { flex: 1; padding: 1rem; }`],
0030   imports: [
0031     MatList,
0032     MatListItem,
0033     NgForOf,
0034   ]
0035 })
0036 export class PainterConfigPageComponent implements OnInit, AfterViewInit {
0037   configItems = [
0038     { name: 'Track A', type: 'track', config: new TrackPainterConfig() },
0039   ];
0040
0041   selectedItem: any = null;
0042
0043   @ViewChild('configuratorContainer', { read: ViewContainerRef }) configuratorContainer!: ViewContainerRef;
0044
0045   constructor(
0046     private registry: ConfiguratorRegistryService,
0047     @Inject(DOCUMENT) private document: Document
0048   ) {}
0049
0050   ngOnInit(): void {}
0051
0052   ngAfterViewInit(): void {
0053   if (this.configItems.length > 0) {
0054     setTimeout(() => this.selectItem(this.configItems[0]));
0055   }
0056 }
0057
0058
0059   selectItem(item: any): void {
0060     this.selectedItem = item;
0061     this.loadConfiguratorComponent(item);
0062   }
0063
0064   loadConfiguratorComponent(item: any): void {
0065     this.configuratorContainer.clear();
0066     const componentType = this.registry.getComponent(item.type);
0067     if (componentType) {
0068       const componentRef = this.configuratorContainer.createComponent(componentType);
0069       componentRef.instance.config = item.config;
0070       componentRef.instance.configChanged.subscribe((updated: any) => {
0071         console.log('Config updated:', updated);
0072       });
0073     }
0074   }
0075 }