thingsboard/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts

///
/// Copyright © 2016-2024 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
///     http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  EventEmitter,
  HostBinding,
  OnDestroy,
  OnInit,
  ViewChild,
  ViewEncapsulation
} from '@angular/core';
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { ActivatedRoute } from '@angular/router';
import { map, switchMap, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ScadaSymbolData, ScadaSymbolEditObjectCallbacks } from '@home/pages/scada-symbol/scada-symbol-editor.models';
import {
  parseScadaSymbolMetadataFromContent,
  ScadaSymbolMetadata,
  ScadaSymbolObjectSettings,
  updateScadaSymbolMetadataInContent
} from '@home/components/widget/lib/scada/scada-symbol.models';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { createFileFromContent, deepClone } from '@core/utils';
import {
  ScadaSymbolEditorComponent,
  ScadaSymbolEditorData
} from '@home/pages/scada-symbol/scada-symbol-editor.component';
import { ImageService } from '@core/http/image.service';
import { imageResourceType, IMAGES_URL_PREFIX } from '@shared/models/resource.models';
import { HasDirtyFlag } from '@core/guards/confirm-on-exit.guard';
import { IAliasController, IStateController, StateParams } from '@core/api/widget-api.models';
import { EntityAliases } from '@shared/models/alias.models';
import { Filters } from '@shared/models/query/query.models';
import { AliasController } from '@core/api/alias-controller';
import { EntityService } from '@core/http/entity.service';
import { UtilsService } from '@core/services/utils.service';
import { TranslateService } from '@ngx-translate/core';
import { Widget, widgetType } from '@shared/models/widget.models';
import {
  scadaSymbolWidgetDefaultSettings,
  ScadaSymbolWidgetSettings
} from '@home/components/widget/lib/scada/scada-symbol-widget.models';
import { WidgetActionCallbacks } from '@home/components/widget/action/manage-widget-actions.component.models';
import {
  ScadaSymbolMetadataComponent
} from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
import { Authority } from '@shared/models/authority.enum';
import { NULL_UUID } from '@shared/models/id/has-uuid';

@Component({
  selector: 'tb-scada-symbol',
  templateUrl: './scada-symbol.component.html',
  styleUrls: ['./scada-symbol.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ScadaSymbolComponent extends PageComponent
  implements OnInit, OnDestroy, AfterViewInit, HasDirtyFlag, ScadaSymbolEditObjectCallbacks {

  widgetType = widgetType;

  @HostBinding('style.width') width = '100%';
  @HostBinding('style.height') height = '100%';

  @ViewChild('symbolEditor', {static: false})
  symbolEditor: ScadaSymbolEditorComponent;

  @ViewChild('symbolMetadata')
  symbolMetadata: ScadaSymbolMetadataComponent;

  symbolData: ScadaSymbolData;
  symbolEditorData: ScadaSymbolEditorData;

  previewMode = false;
  previewMetadata: ScadaSymbolMetadata;

  scadaSymbolFormGroup: UntypedFormGroup;

  scadaPreviewFormGroup: UntypedFormGroup;

  private destroy$ = new Subject<void>();

  private origSymbolData: ScadaSymbolData;

  updateBreadcrumbs = new EventEmitter();

  aliasController: IAliasController;

  widgetActionCallbacks: WidgetActionCallbacks = {
    fetchDashboardStates: () => [],
    fetchCellClickColumns: () => []
  };

  previewWidgets: Array<Widget> = [];

  tags: string[];

  editObjectCallbacks: ScadaSymbolEditObjectCallbacks = this;

  symbolEditorDirty = false;

  private previewScadaSymbolObjectSettings: ScadaSymbolObjectSettings;

  private previewWidget: Widget;

  private forcePristine = false;

  private authUser = getCurrentAuthUser(this.store);

  readonly: boolean;

  get isDirty(): boolean {
    return (this.scadaSymbolFormGroup.dirty || this.symbolEditorDirty) && !this.forcePristine;
  }

  set isDirty(value: boolean) {
    this.forcePristine = !value;
  }

  constructor(protected store: Store<AppState>,
              private route: ActivatedRoute,
              private fb: UntypedFormBuilder,
              private cd: ChangeDetectorRef,
              private entityService: EntityService,
              private utils: UtilsService,
              private translate: TranslateService,
              private imageService: ImageService) {
    super(store);
  }

  ngOnInit(): void {
    this.scadaSymbolFormGroup = this.fb.group({
      metadata: [null]
    });
    this.scadaPreviewFormGroup = this.fb.group({
      scadaSymbolObjectSettings: [null]
    });

    const entitiAliases: EntityAliases = {};

    // @ts-ignore
    const stateController: IStateController = {
      getStateParams: (): StateParams => ({})
    };

    const filters: Filters = {};

    this.aliasController = new AliasController(this.utils,
      this.entityService,
      this.translate,
      () => stateController, entitiAliases, filters);

    this.route.data.pipe(
      takeUntil(this.destroy$)
    ).subscribe(
      () => {
        this.reset();
        this.init(this.route.snapshot.data.symbolData);
      }
    );
  }

  ngAfterViewInit() {
  }

  ngOnDestroy() {
    super.ngOnDestroy();
    this.destroy$.next();
    this.destroy$.complete();
  }

  onApplyScadaSymbolConfig() {
    if (this.scadaSymbolFormGroup.valid) {
      const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value;
      const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
      const file = createFileFromContent(scadaSymbolContent, this.symbolData.imageResource.fileName,
        this.symbolData.imageResource.descriptor.mediaType);
      const type = imageResourceType(this.symbolData.imageResource);
      let imageInfoObservable =
        this.imageService.updateImage(type, this.symbolData.imageResource.resourceKey, file);
      if (metadata.title !== this.symbolData.imageResource.title) {
        imageInfoObservable = imageInfoObservable.pipe(
          switchMap(imageInfo => {
            imageInfo.title = metadata.title;
            return this.imageService.updateImageInfo(imageInfo);
          })
        );
      }
      imageInfoObservable.pipe(
        switchMap(imageInfo => this.imageService.getImageString(
            `${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(imageInfo.resourceKey)}`).pipe(
              map(content => ({
                imageResource: imageInfo,
                scadaSymbolContent: content
              }))
          ))
      ).subscribe(data => {
        this.init(data);
        this.updateBreadcrumbs.emit();
      });
    }
  }

  onRevertScadaSymbolConfig() {
    this.init(this.origSymbolData);
  }

  enterPreviewMode() {
    this.previewMetadata = this.scadaSymbolFormGroup.get('metadata').value;
    this.symbolData.scadaSymbolContent = this.prepareScadaSymbolContent(this.previewMetadata);
    this.previewScadaSymbolObjectSettings = {
      behavior: {},
      properties: {}
    };
    this.scadaPreviewFormGroup.patchValue({
      scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings
    }, {emitEvent: false});
    this.scadaPreviewFormGroup.markAsPristine();
    const settings: ScadaSymbolWidgetSettings = {...scadaSymbolWidgetDefaultSettings,
      ...{
          simulated: true,
          scadaSymbolUrl: null,
          scadaSymbolContent: this.symbolData.scadaSymbolContent,
          scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings,
          padding: '0'
         }
    };
    this.previewWidget = {
      typeFullFqn: 'system.scada_symbol',
      type: widgetType.rpc,
      sizeX: 24,
      sizeY: 24,
      row: 0,
      col: 0,
      config: {
        settings,
        showTitle: false,
        dropShadow: false,
        padding: '0',
        margin: '0'
      }
    };
    this.previewWidgets = [this.previewWidget];
    this.previewMode = true;
  }

  exitPreviewMode() {
    this.symbolEditorData = {
      scadaSymbolContent: this.symbolData.scadaSymbolContent
    };
    this.previewMode = false;
  }

  onRevertPreviewSettings() {
    this.scadaPreviewFormGroup.patchValue({
      scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings
    }, {emitEvent: false});
    this.scadaPreviewFormGroup.markAsPristine();
  }

  onApplyPreviewSettings() {
    this.scadaPreviewFormGroup.markAsPristine();
    this.previewScadaSymbolObjectSettings = this.scadaPreviewFormGroup.get('scadaSymbolObjectSettings').value;
    this.updatePreviewWidgetSettings();
  }

  tagsUpdated(tags: string[]) {
    this.tags = tags;
  }

  tagHasStateRenderFunction(tag: string): boolean {
    const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value;
    if (metadata.tags) {
      const found = metadata.tags.find(t => t.tag === tag);
      return !!found?.stateRenderFunction;
    }
    return false;
  }

  tagHasClickAction(tag: string): boolean {
    const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value;
    if (metadata.tags) {
      const found = metadata.tags.find(t => t.tag === tag);
      return !!found?.actions?.click?.actionFunction;
    }
    return false;
  }

  editTagStateRenderFunction(tag: string) {
    this.symbolMetadata.editTagStateRenderFunction(tag);
  }

  editTagClickAction(tag: string) {
    this.symbolMetadata.editTagClickAction(tag);
  }

  onSymbolEditObjectDirty(dirty: boolean) {
    this.symbolEditorDirty = dirty;
  }

  private updatePreviewWidgetSettings() {
    this.previewWidget = deepClone(this.previewWidget);
    this.previewWidget.config.settings.scadaSymbolObjectSettings = this.previewScadaSymbolObjectSettings;
    this.previewWidgets = [this.previewWidget];
  }

  private prepareScadaSymbolContent(metadata: ScadaSymbolMetadata): string {
    const svgContent = this.symbolEditor.getContent();
    return updateScadaSymbolMetadataInContent(svgContent, metadata);
  }

  private reset(): void {
    if (this.symbolMetadata) {
      this.symbolMetadata.selectedOption = 'general';
    }
    this.previewMode = false;
  }

  private init(data: ScadaSymbolData) {
    if (this.authUser.authority === Authority.TENANT_ADMIN) {
      this.readonly = data.imageResource.tenantId.id === NULL_UUID;
    } else {
      this.readonly = this.authUser.authority !== Authority.SYS_ADMIN;
    }
    this.origSymbolData = data;
    this.symbolData = deepClone(data);
    this.symbolEditorData = {
      scadaSymbolContent: this.symbolData.scadaSymbolContent
    };
    const metadata = parseScadaSymbolMetadataFromContent(this.symbolData.scadaSymbolContent);
    this.scadaSymbolFormGroup.patchValue({
      metadata
    }, {emitEvent: false});
    if (this.readonly) {
      this.scadaSymbolFormGroup.disable({emitEvent: false});
    } else {
      this.scadaSymbolFormGroup.enable({emitEvent: false});
    }
    this.scadaSymbolFormGroup.markAsPristine();
    this.symbolEditorDirty = false;
    this.cd.markForCheck();
  }
}