All files / src/app/components/custom-view custom-view.component.ts

72% Statements 36/50
50% Branches 9/18
88.88% Functions 8/9
68.88% Lines 31/45

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 91 92 93 94 95 96 97 98 99 100 101                      72x 1x       1x 1x       1x 1x   1x 1x 1x                         1x 1x 1x   1x 2x 2x 2x 2x     2x 1x 1x   2x       2x   2x                           1x 1x             1x 1x                   2x 2x 2x 1x        
import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CustomView } from '../../models/customView';
import { TwinpadApiService } from '../../services/twinpad-api.service';
 
@Component({
  selector: 'app-custom-view',
  imports: [],
  templateUrl: './custom-view.component.html',
  styleUrl: './custom-view.component.scss'
})
export class CustomViewComponent implements OnInit {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  customViewId: string;
  customView: CustomView;
 
  constructor(private route: ActivatedRoute, private twinpadApiService: TwinpadApiService, private router: Router){
    this.customViewId = this.route.snapshot.params['view_id'] || null;
  }
 
  ngOnInit(): void {
    Eif (this.customViewId !== null){
      this.twinpadApiService.getCustomViewById(this.customViewId).subscribe({
        next: value => {
          Eif(value !== null){
            this.customView = value;
            this.loadComponents(this.customView);
          }
          else {
            this.router.navigate(['/custom-views']);
          }
        },
        error: error => {
          console.log(error);
        }
      });
    }
  }
 
  async loadComponents(customView: CustomView) {
    this.container.clear();
    let numberSignalGraphs = 0;
 
    for(const component in customView.configuration){
      const componentName = customView.configuration[component]['type'];
      const componentData = customView.configuration[component]['data'];
      const newData: {[key: string]: any} = {}; // eslint-disable-line  @typescript-eslint/no-explicit-any
      for (const [key, value] of Object.entries(componentData)){
        newData[key] = value;
      }
      if (componentName === "SignalsGraphsComponent") {
        numberSignalGraphs++;
        newData["graphId"] = `_${numberSignalGraphs}`;
      }
      this.setContainer(componentName, newData);
    }
  }
 
  async setContainer(componentName: string, componentData: {[key: string]: any}){ // eslint-disable-line  @typescript-eslint/no-explicit-any
    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 'SignalCardComponent': {
        module = await import('../signal-card/signal-card.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];
    const component = this.container.createComponent(dynamicComponent);
    for (const [key, value] of Object.entries(componentData)){
      component.setInput(key, value);
    }
  }
}