Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 36x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 1x 1x 1x 1x 2x 2x 2x | import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { DynamicComponentService } from '../../services/dynamic-component.service';
import { CustomView } from '../../models/customView';
@Component({
selector: 'app-custom-view',
imports: [],
templateUrl: './custom-view.component.html',
styleUrl: './custom-view.component.css'
})
export class CustomViewComponent implements OnInit {
@ViewChild('dynamicContainer', { read: ViewContainerRef }) container: ViewContainerRef;
customViewId: string;
customView: CustomView;
constructor(private route: ActivatedRoute, private dynamicComponentService: DynamicComponentService, private router: Router){
this.customViewId = this.route.snapshot.params['view_id'] || null;
}
ngOnInit(): void {
Eif (this.customViewId !== null){
this.dynamicComponentService.getCustomViewById(this.customViewId).subscribe({
next: value => {
Eif(value !== null){
this.customView = value;
this.loadComponents(this.customView);
}
else {
this.router.navigate(['/customViews']);
}
},
error: error => {
console.log(error);
}
});
}
}
async loadComponents(customView: CustomView) {
this.container.clear();
for(const component in customView.configuration){
const componentName = customView.configuration[component]['type'];
const componentData: JSON[] = customView.configuration[component]['data'];
this.setContainer(componentName, componentData);
}
}
async setContainer(componentName: string, componentData: JSON[]){
let module: any; // eslint-disable-line @typescript-eslint/no-explicit-any
switch(componentName) {
case 'PidComponent': {
module = await import('../pid/pid.component');
break;
}
case 'PetriComponent': {
module = await import('../petri/petri.component');
break;
}
case 'VideosComponent': {
module = await import('../videos/videos.component');
break;
}
case 'SignalsComponent': {
module = await import('../signals/signals.component');
break;
}
case 'SignalsGraphsComponent': {
module = await import('../signals-graphs/signals-graphs.component');
break;
}
case 'EventsComponent': {
module = await import('../events/events.component');
break;
}
default: {
break;
}
}
const dynamicComponent = module[componentName];
Eif (Object.keys(componentData).length === 0) {
this.container.createComponent(dynamicComponent);
}
else {
this.container.createComponent(dynamicComponent).setInput('deviceId', Object.values(componentData));
}
}
}
|