feat: placeholder for event ViewToPanel

client/src/app/editor/editor.component.ts

@@ -1366,10 +1366,19 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
  dialogRef = this.dialog.open(GaugePropertyComponent, {
  position: { top: '60px' },
  data: {
- settings: tempsettings, devices: Object.values(this.projectService.getDevices()), title: title,
- views: hmi.views, dlgType: dlgType, withEvents: eventsSupported, withActions: actionsSupported, default: defaultValue,
+ settings: tempsettings,
+ devices: Object.values(this.projectService.getDevices()),
+ title: title,
+ views: hmi.views,
+ view: this.currentView,
+ dlgType: dlgType,
+ withEvents: eventsSupported,
+ withActions: actionsSupported,
+ default: defaultValue,
  inputs: Object.values(this.currentView.items).filter(gs => gs.name && (gs.id.startsWith('HXS_') || gs.id.startsWith('HXI_'))),
- names: names, scripts: this.projectService.getScripts(), withBitmask: bitmaskSupported
+ names: names,
+ scripts: this.projectService.getScripts(),
+ withBitmask: bitmaskSupported
  }
  });
  }

client/src/app/fuxa-view/fuxa-view.component.ts

@@ -55,6 +55,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('inputValueRef', {static: false}) inputValueRef: ElementRef;
  @ViewChild('touchKeyboard', {static: false}) touchKeyboard: NgxTouchKeyboardDirective;
 
+ eventViewToPanel = Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onViewToPanel);
  eventRunScript = Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onRunScript);
  scriptParameterValue = Utils.getEnumKey(ScriptParamType, ScriptParamType.value);
 
@@ -70,7 +71,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
 
  private subscriptionOnChange: Subscription;
  protected staticValues: any = {};
- protected plainVariableMapping: any = {};
+ protected plainVariableMapping: VariableMappingDictionary = {};
  private destroy$ = new Subject<void>();
 
  constructor(
@@ -130,7 +131,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
  this.variablesMapping = variablesMapped;
  }
  this.variablesMapping?.forEach(variableMapping => {
- this.plainVariableMapping[variableMapping.from.variableId] = variableMapping.to.variableId;
+ this.plainVariableMapping[variableMapping.from.variableId] = variableMapping.to;
  });
  } catch (err) {
  console.error(err);
@@ -234,7 +235,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
  let gaugeStatus = this.getGaugeStatus(gaugeSetting);
  let variables = [];
  // prepare the start value to precess
- if (items[key].property.variableValue && gaugeSetting.property.variableId) {
+ if (items[key].property.variableValue || gaugeSetting.property.variableId) {
  let variable: Variable = <Variable>{ id: gaugeSetting.property.variableId, value: gaugeSetting.property.variableValue };
  if (this.checkStatusValue(gaugeSetting.id, gaugeStatus, variable)) {
  variables = [variable];
@@ -359,7 +360,8 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
  return;
  }
  if (this.plainVariableMapping.hasOwnProperty(target.variableId)) {
- target.variableId = this.plainVariableMapping[target.variableId];
+ target.variableValue = this.plainVariableMapping[target.variableId]?.variableValue;
+ target.variableId = this.plainVariableMapping[target.variableId]?.variableId;
  }
  }
 
@@ -443,6 +445,8 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
  self.onMonitor(ga, ev, events[i].actparam, events[i].actoptions);
  } else if (events[i].action === this.eventRunScript) {
  self.onRunScript(events[i]);
+ } else if (events[i].action === this.eventViewToPanel) {
+ self.onSetViewToPanel(events[i]);
  }
  }
  }
@@ -634,7 +638,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
  }
  }
 
- private loadPage(event, viewref: string, options: any) {
+ loadPage(event: GaugeEvent, viewref: string, options: any) {
  let view: View = this.getView(viewref);
  if (view) {
  if (options?.variablesMapping) {
@@ -819,6 +823,13 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
  dialogRef.afterClosed().subscribe();
  }
 
+ onSetViewToPanel(event: GaugeEvent) {
+ if (event.actparam && event.actoptions) {
+ let panel = <FuxaViewComponent>this.mapControls[event.actoptions['panelId']];
+ panel.loadPage(event, event.actparam, event.actoptions);
+ }
+ }
+
  getCardHeight(height) {
  return parseInt(height) + 4;
  }
@@ -913,6 +924,15 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
  }
 }
 
+interface VariableMappingType {
+ variableId: string;
+ variableValue: any;
+}
+
+interface VariableMappingDictionary {
+ [key: string]: VariableMappingType;
+}
+
 export class CardModel {
  public id: string;
  public name: string;

client/src/app/gauges/gauge-property/flex-event/flex-event.component.html

@@ -4,7 +4,7 @@
  <mat-icon>clear</mat-icon>
  </button>
  </div>
- <div style="display: inline-block;">
+ <div class="inbk" style="vertical-align: top;">
  <div class="my-form-field" style="width: 140px;">
  <span>{{'gauges.property-event-type' | translate}}</span>
  <mat-select [(value)]="item.type">
@@ -30,10 +30,28 @@
  </div>
  </div>
  <div class="my-form-field" style="width: 240px;padding-left: 20px" *ngIf="withDestination(item.action)">
- <span>{{'gauges.property-event-destination' | translate}}</span>
- <mat-select [(value)]="item.actparam">
- <mat-option *ngFor="let v of views; index as i" [value]="v.id">{{v.name}}</mat-option>
- </mat-select>
+ <ng-container *ngIf="isWithPanel(item.action); else destination" class="inbk" style="vertical-align: top;">
+ <div class="my-form-field block" style="width: 200px;">
+ <span>{{'gauges.property-event-destination-panel' | translate}}</span>
+ <mat-select [(value)]="item.actoptions.panelId">
+ <mat-option *ngFor="let panel of viewPanels; index as i" [value]="panel.id">{{panel.name}}</mat-option>
+ </mat-select>
+ </div>
+ <div class="my-form-field block mt5" style="width: 200px;">
+ <span>{{'gauges.property-event-destination' | translate}}</span>
+ <mat-select [(value)]="item.actparam">
+ <mat-option *ngFor="let v of views; index as i" [value]="v.id">{{v.name}}</mat-option>
+ </mat-select>
+ </div> 
+ </ng-container>
+ <ng-template #destination>
+ <div class="my-form-field lbk" style="width: 200px;">
+ <span>{{'gauges.property-event-destination' | translate}}</span>
+ <mat-select [(value)]="item.actparam">
+ <mat-option *ngFor="let v of views; index as i" [value]="v.id">{{v.name}}</mat-option>
+ </mat-select>
+ </div>
+ </ng-template>
  <div *ngIf="withPosition(item.action)" class="table mt5">
  <div class="my-form-field lbk">
  <span>{{'general-x' | translate}}</span>

client/src/app/gauges/gauge-property/flex-event/flex-event.component.ts

@@ -16,6 +16,7 @@ import { Script, ScriptParam, SCRIPT_PARAMS_MAP } from '../../../_models/script'
 import { Utils } from '../../../_helpers/utils';
 import { HtmlInputComponent } from '../../controls/html-input/html-input.component';
 import { HtmlSelectComponent } from '../../controls/html-select/html-select.component';
+import { PanelComponent } from '../../controls/panel/panel.component';
 
 
 @Component({
@@ -43,6 +44,8 @@ export class FlexEventComponent implements OnInit {
  Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onwindow),
  Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.oniframe)];
  cardDestination = Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onwindow);
+ panelDestination = Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onViewToPanel);
+ viewPanels: PanelData[];
 
  constructor(private translateService: TranslateService) {
  }
@@ -57,7 +60,7 @@ export class FlexEventComponent implements OnInit {
  this.eventType[Utils.getEnumKey(GaugeEventType, GaugeEventType.mousedown)] = this.translateService.instant(GaugeEventType.mousedown);
  this.eventType[Utils.getEnumKey(GaugeEventType, GaugeEventType.mouseup)] = this.translateService.instant(GaugeEventType.mouseup);
  }
-
+ this.viewPanels = <PanelData[]>Object.values(this.data.view?.items ?? [])?.filter((item: any) => item.type === PanelComponent.TypeTag);
  this.enterActionType[Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onRunScript)] = this.translateService.instant(GaugeEventActionType.onRunScript);
 
  Object.keys(this.actionType).forEach(key => {
@@ -126,7 +129,8 @@ export class FlexEventComponent implements OnInit {
  let b = Object.values(this.actionType).indexOf(GaugeEventActionType.onpage);
  let c = Object.values(this.actionType).indexOf(GaugeEventActionType.onwindow);
  let d = Object.values(this.actionType).indexOf(GaugeEventActionType.ondialog);
- return a === b || a === c || a === d;
+ let e = Object.values(this.actionType).indexOf(GaugeEventActionType.onViewToPanel);
+ return a === b || a === c || a === d || a === e;
  }
 
  withPosition(eventAction: GaugeEventActionType) {
@@ -187,10 +191,21 @@ export class FlexEventComponent implements OnInit {
  return type === 'enter' || type === 'select';
  }
 
+ isWithPanel(action) {
+ let a = Object.keys(this.actionType).indexOf(action);
+ let b = Object.values(this.actionType).indexOf(GaugeEventActionType.onViewToPanel);
+ return a === b;
+ }
+
  private addEvent(ge: GaugeEvent) {
  if (!this.events) {
  this.events = [];
  }
  this.events.push(ge);
  }
 }
+
+interface PanelData {
+ id: string;
+ name: string;
+}

client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.html

@@ -1,4 +1,6 @@
 <div class="flex-variable-mapping">
+ <div class="flex-join">
+ </div>
  <div style="display: inline-block;">
  <flex-variable style="display: block"
  [(value)]="value.from"
@@ -18,10 +20,5 @@
  [devicesOnly]="true">
  </flex-variable>
  </div>
- <div style="display: inline-block;">
- <div style="display: inline-block; margin-bottom: 2px; width: 12px; border-radius: 2px; height: 45px; 
- border-radius: 0px 3px 3px 0px; border-top: 2px solid #cacaca; border-right: 2px solid #cacaca; border-bottom: 2px solid #cacaca;">
- </div>
- </div>
  <ng-content></ng-content>
 </div>

client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.scss

@@ -0,0 +1,23 @@
+:host {
+ .flex-variable-mapping {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+ padding-bottom: 3px;
+ padding-top: 3px;
+ }
+
+ .flex-join {
+ float: left;
+ position: relative;
+ left: 0px;
+ top: 28px;
+ margin-bottom: 2px;
+ width: 8px;
+ border-radius: 2px;
+ height: 45px; 
+ margin-right: 3px;
+ border-radius: 3px 0px 0px 3px;
+ border-top: 2px solid #cacaca;
+ border-left: 2px solid #cacaca;
+ border-bottom: 2px solid #cacaca;
+ }
+}

client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.ts

@@ -4,7 +4,7 @@ import { IPropertyVariable, View } from '../../../_models/hmi';
 @Component({
  selector: 'flex-variable-map',
  templateUrl: './flex-variable-map.component.html',
- styleUrls: ['./flex-variable-map.component.css']
+ styleUrls: ['./flex-variable-map.component.scss']
 })
 export class FlexVariableMapComponent implements OnInit {
  @Input() view: View;

client/src/app/gauges/gauge-property/gauge-property.component.ts

@@ -216,3 +216,20 @@ export class DialogGaugePermission {
  this.dialogRef.close(this.data);
  }
 }
+
+// export interface GaugePropertyData {
+// settings: any;
+// //devices: Device[];
+// title: string;
+// //views: View[];
+// view: View;
+// dlgType: GaugeDialogType;
+// withEvents: boolean;
+// withActions: boolean;
+// default: any;
+// withBitmask: boolean;
+
+// //inputs: Object.values(this.currentView.items).filter(gs => gs.name && (gs.id.startsWith('HXS_') || gs.id.startsWith('HXI_'))),
+// // let names = Object.values(this.currentView.items).map(gs => gs.name);
+// // scripts: this.projectService.getScripts(),
+// }

client/src/assets/i18n/en.json

@@ -944,6 +944,7 @@
  "gauges.property-event-type": "Type",
  "gauges.property-event-action": "Action",
  "gauges.property-event-destination": "Destination",
+ "gauges.property-event-destination-panel": "Panel",
  "gauges.property-event-destination-hide-close": "Hide Close",
  "gauges.property-event-single-card": "Single Card",
  "gauges.property-event-value": "Value",