tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

[3.0] New samples for custom action with html (#2549) 

* Update example custom action to new Angular

* Save settings to change type custom action

* Revert change
pull/2562/head
Vladyslav 6 years ago
committed by GitHub
parent
67d9b094fa
commit
c0d9f1da7f
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 607 additions and 644 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw
  2. 646
      ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw
  3. 562
      ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw
  4. 7
      ui-ngx/src/app/modules/home/components/widget/widget.component.ts

36
ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw
View File

@ -1,21 +1,9 @@
/*================================================================================*/
/*======================= New TB 3.0 / Angular 8 Example =======================*/
/*================================================================================*/
/*
.edit-entity-form mat-form-field {
padding-right: 10px;
}
*/
/*=======================================================================*/
/*========== There are two examples: for edit and add entity ==========*/
/*=======================================================================*/
/*======================== Edit entity example ========================*/
/*=======================================================================*/
/*
.edit-entity-form md-input-container {
padding-right: 10px;
}
.edit-entity-form .boolean-value-input {
padding-left: 5px;
}
@ -41,6 +29,10 @@
white-space: nowrap;
}
.relations-list .mat-form-field-infix {
width: auto !important;
}
.relations-list .body {
padding-right: 5px;
padding-bottom: 15px;
@ -56,26 +48,14 @@
padding-left: 5px;
}
.relations-list .body md-autocomplete-wrap md-input-container {
height: 30px;
}
.relations-list .body .md-button {
margin: 0;
}
.relations-list.old-relations tb-entity-select tb-entity-autocomplete button {
display: none;
}
*/
/*========================================================================*/
/*========================= Add entity example =========================*/
/*========================================================================*/
/*
.add-entity-form md-input-container {
padding-right: 10px;
}
.add-entity-form .boolean-value-input {
padding-left: 5px;
}
@ -101,6 +81,10 @@
white-space: nowrap;
}
.relations-list .mat-form-field-infix {
width: auto !important;
}
.relations-list .body {
padding-right: 5px;
padding-bottom: 15px;
@ -116,10 +100,6 @@
padding-left: 5px;
}
.relations-list .body md-autocomplete-wrap md-input-container {
height: 30px;
}
.relations-list .body .md-button {
margin: 0;
}

646
ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw
View File

@ -1,349 +1,355 @@
<!--=======================================================================-->
<!--=================== New TB 3.0 / Angular 8 Example =================-->
<!--=======================================================================-->
<!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
<!-- class="edit-entity-form"-->
<!-- (ngSubmit)="save()" style="width: 600px;">-->
<!-- <mat-toolbar fxLayout="row" color="primary">-->
<!-- <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
<!-- <span fxFlex></span>-->
<!-- <button mat-button mat-icon-button-->
<!-- (click)="cancel()"-->
<!-- type="button">-->
<!-- <mat-icon class="material-icons">close</mat-icon>-->
<!-- </button>-->
<!-- </mat-toolbar>-->
<!-- <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
<!-- </mat-progress-bar>-->
<!-- <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
<!-- <div mat-dialog-content>-->
<!-- <div class="mat-padding" fxLayout="column">-->
<!-- <mat-form-field class="mat-block">-->
<!-- <mat-label>Entity name</mat-label>-->
<!-- <input matInput formControlName="entityName" required>-->
<!-- <mat-error *ngIf="editEntityFormGroup.get('entityName').hasError('required')">-->
<!-- Entity name required-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- </div> -->
<!-- </div>-->
<!-- <div mat-dialog-actions fxLayout="row">-->
<!-- <span fxFlex></span>-->
<!-- <button mat-button mat-raised-button color="primary"-->
<!-- type="submit"-->
<!-- [disabled]="(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty">-->
<!-- {{ 'action.save' | translate }}-->
<!-- </button>-->
<!-- <button mat-button color="primary"-->
<!-- style="margin-right: 20px;"-->
<!-- type="button"-->
<!-- [disabled]="(isLoading$ | async)"-->
<!-- (click)="cancel()" cdkFocusInitial>-->
<!-- {{ 'action.cancel' | translate }}-->
<!-- </button>-->
<!-- </div>-->
<!--</form>-->
<!--=======================================================================-->
<!--===== There are two example templates: for edit and add entity =====-->
<!--=======================================================================-->
<!--======================== Edit entity example ========================-->
<!--=======================================================================-->
<!-- -->
<!--<md-dialog aria-label="Edit entity">-->
<!-- <form name="editEntityForm" class="edit-entity-form" ng-submit="vm.save()">-->
<!-- <md-toolbar>-->
<!-- <div class="md-toolbar-tools">-->
<!-- <h2>Edit {{vm.entityType.toLowerCase()}} {{vm.entityName}}</h2>-->
<!-- <span flex></span>-->
<!-- <md-button class="md-icon-button" ng-click="vm.cancel()">-->
<!-- <ng-md-icon icon="close" aria-label="Close"></ng-md-icon>-->
<!-- </md-button>-->
<!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
<!-- (ngSubmit)="save()" class="edit-entity-form">-->
<!-- <mat-toolbar fxLayout="row" color="primary">-->
<!-- <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
<!-- <span fxFlex></span>-->
<!-- <button mat-icon-button (click)="cancel()" type="button">-->
<!-- <mat-icon class="material-icons">close</mat-icon>-->
<!-- </button>-->
<!-- </mat-toolbar>-->
<!-- <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
<!-- </mat-progress-bar>-->
<!-- <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
<!-- <div mat-dialog-content fxLayout="column">-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Entity Name</mat-label>-->
<!-- <input matInput formControlName="entityName" required readonly="">-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Entity Label</mat-label>-->
<!-- <input matInput formControlName="entityLabel">-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Entity Type</mat-label>-->
<!-- <input matInput formControlName="entityType" readonly>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Type</mat-label>-->
<!-- <input matInput formControlName="type" readonly>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div formGroupName="attributes" fxLayout="column">-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Latitude</mat-label>-->
<!-- <input type="number" step="any" matInput formControlName="latitude">-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Longitude</mat-label>-->
<!-- <input type="number" step="any" matInput formControlName="longitude">-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </md-toolbar>-->
<!-- <md-dialog-content>-->
<!-- <div class="md-dialog-content">-->
<!-- <div layout="row">-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Entity Name</label>-->
<!-- <input ng-model="vm.entityName" readonly>-->
<!-- </md-input-container>-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Entity Type</label>-->
<!-- <input ng-model="vm.entityType" readonly>-->
<!-- </md-input-container>-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Type</label>-->
<!-- <input ng-model="vm.type" readonly>-->
<!-- </md-input-container>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Latitude</label>-->
<!-- <input name="latitude" type="number" step="any" ng-model="vm.attributes.latitude">-->
<!-- </md-input-container>-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Longitude</label>-->
<!-- <input name="longitude" type="number" step="any" ng-model="vm.attributes.longitude">-->
<!-- </md-input-container>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Address</label>-->
<!-- <input ng-model="vm.attributes.address">-->
<!-- </md-input-container>-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Owner</label>-->
<!-- <input ng-model="vm.attributes.owner">-->
<!-- </md-input-container>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Integer Value</label>-->
<!-- <input name="integerNumber" type="number" step="1" ng-pattern="/^-?[0-9]+$/" ng-model="vm.attributes.number">-->
<!-- <div ng-messages="editEntityForm.integerNumber.$error">-->
<!-- <div ng-message="pattern">Invalid integer value.</div>-->
<!-- </div>-->
<!-- </md-input-container>-->
<!-- <div class="boolean-value-input" layout="column" layout-align="center start" flex>-->
<!-- <label class="checkbox-label">Boolean Value</label>-->
<!-- <md-checkbox ng-model="vm.attributes.booleanValue" style="margin-bottom: 40px;">-->
<!-- {{ (vm.attributes.booleanValue ? "value.true" : "value.false") | translate }}-->
<!-- </md-checkbox>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Address</mat-label>-->
<!-- <input matInput formControlName="address">-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Owner</mat-label>-->
<!-- <input matInput formControlName="owner">-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Integer Value</mat-label>-->
<!-- <input type="number" step="1" matInput formControlName="number">-->
<!-- <mat-error *ngIf="editEntityFormGroup.get('attributes').get('number').hasError('pattern')">-->
<!-- Invalid integer value.-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
<!-- <label class="checkbox-label">Boolean Value</label>-->
<!-- <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
<!-- {{ (editEntityFormGroup.get('attributes').get('booleanValue').value ? "value.true" : "value.false") | translate }}-->
<!-- </mat-checkbox>-->
<!-- </div>-->
<!-- <div class="relations-list old-relations">-->
<!-- <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
<!-- <div class="body" ng-show="vm.relations.length">-->
<!-- <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.relations track by $index">-->
<!-- <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px; margin-bottom: 3px;">-->
<!-- <div flex layout="column">-->
<!-- <div layout="row">-->
<!-- <md-input-container class="md-block" style="min-width: 100px;">-->
<!-- <label>Direction</label>-->
<!-- <md-select ng-disabled="true" required ng-model="relation.direction">-->
<!-- <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
<!-- {{ ("relation.search-direction." + direction) | translate}}-->
<!-- </md-option>-->
<!-- </md-select>-->
<!-- </md-input-container>-->
<!-- <tb-relation-type-autocomplete ng-disabled="true" flex class="md-block"-->
<!-- the-form="editEntityForm"-->
<!-- ng-model="relation.relationType"-->
<!-- tb-required="true">-->
<!-- </tb-relation-type-autocomplete>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <tb-entity-select flex class="md-block"-->
<!-- the-form="editEntityForm"-->
<!-- ng-disabled="true"-->
<!-- tb-required="true"-->
<!-- ng-model="relation.relatedEntity">-->
<!-- </tb-entity-select>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div layout="column" layout-align="center center">-->
<!-- <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
<!-- ng-click="vm.removeOldRelation($index,relation)" aria-label="Remove">-->
<!-- <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
<!-- <md-icon aria-label="Remove" class="material-icons">-->
<!-- close-->
<!-- </md-icon>-->
<!-- </md-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="relations-list old-relations">-->
<!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
<!-- <div class="body" [fxShow]="oldRelations().length">-->
<!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" -->
<!-- *ngFor="let relation of oldRelations().controls; let i = index;">-->
<!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
<!-- <div fxFlex fxLayout="column">-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
<!-- <mat-label>Direction</mat-label>-->
<!-- <mat-select formControlName="direction" name="direction">-->
<!-- <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
<!-- {{ ("relation.search-direction." + direction.value) | translate}}-->
<!-- </mat-option>-->
<!-- </mat-select>-->
<!-- <mat-error *ngIf="relation.get('direction').hasError('required')">-->
<!-- Relation direction is required.-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- <tb-relation-type-autocomplete-->
<!-- fxFlex class="mat-block"-->
<!-- formControlName="relationType"-->
<!-- required="true">-->
<!-- </tb-relation-type-autocomplete>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayout.xs="column">-->
<!-- <tb-entity-select-->
<!-- fxFlex class="mat-block"-->
<!-- required="true"-->
<!-- formControlName="relatedEntity">-->
<!-- </tb-entity-select>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div fxLayout="column" fxLayoutAlign="center center">-->
<!-- <button mat-icon-button color="primary"-->
<!-- aria-label="Remove"-->
<!-- type="button"-->
<!-- (click)="removeOldRelation(i)"-->
<!-- matTooltip="Remove relation"-->
<!-- matTooltipPosition="above">-->
<!-- <mat-icon>close</mat-icon>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="relations-list">-->
<!-- <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
<!-- <div class="body" ng-show="vm.newRelations.length">-->
<!-- <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.newRelations track by $index">-->
<!-- <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px; margin-bottom: 3px;">-->
<!-- <div flex layout="column">-->
<!-- <div layout="row">-->
<!-- <md-input-container class="md-block" style="min-width: 100px;">-->
<!-- <label>Direction</label>-->
<!-- <md-select name="direction" required ng-model="relation.direction">-->
<!-- <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
<!-- {{ ("relation.search-direction." + direction) | translate}}-->
<!-- </md-option>-->
<!-- </md-select>-->
<!-- <div ng-messages="editEntityForm.direction.$error">-->
<!-- <div ng-message="required">Relation direction is required.</div>-->
<!-- </div>-->
<!-- </md-input-container>-->
<!-- <tb-relation-type-autocomplete flex class="md-block"-->
<!-- the-form="editEntityForm"-->
<!-- ng-model="relation.relationType"-->
<!-- tb-required="true">-->
<!-- </tb-relation-type-autocomplete>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <tb-entity-select flex class="md-block"-->
<!-- the-form="editEntityForm"-->
<!-- tb-required="true"-->
<!-- ng-model="relation.relatedEntity">-->
<!-- </tb-entity-select>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div layout="column" layout-align="center center">-->
<!-- <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
<!-- ng-click="vm.removeRelation($index)" aria-label="Remove">-->
<!-- <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
<!-- <md-icon aria-label="Remove" class="material-icons">-->
<!-- close-->
<!-- </md-icon>-->
<!-- </md-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="relations-list">-->
<!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
<!-- <div class="body" [fxShow]="relations().length">-->
<!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
<!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
<!-- <div fxFlex fxLayout="column">-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
<!-- <mat-label>Direction</mat-label>-->
<!-- <mat-select formControlName="direction" name="direction">-->
<!-- <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
<!-- {{ ("relation.search-direction." + direction.value) | translate}}-->
<!-- </mat-option>-->
<!-- </mat-select>-->
<!-- <mat-error *ngIf="relation.get('direction').hasError('required')">-->
<!-- Relation direction is required.-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- <tb-relation-type-autocomplete-->
<!-- fxFlex class="mat-block"-->
<!-- formControlName="relationType"-->
<!-- [required]="true">-->
<!-- </tb-relation-type-autocomplete>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayout.xs="column">-->
<!-- <tb-entity-select-->
<!-- fxFlex class="mat-block"-->
<!-- [required]="true"-->
<!-- formControlName="relatedEntity">-->
<!-- </tb-entity-select>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div fxLayout="column" fxLayoutAlign="center center">-->
<!-- <button mat-icon-button color="primary"-->
<!-- aria-label="Remove"-->
<!-- type="button"-->
<!-- (click)="removeRelation(i)"-->
<!-- matTooltip="Remove relation"-->
<!-- matTooltipPosition="above">-->
<!-- <mat-icon>close</mat-icon>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <md-button class="md-primary md-raised" ng-click="vm.addRelation()" aria-label="Add">-->
<!-- <md-tooltip md-direction="top">Add Relation</md-tooltip>-->
<!-- Add-->
<!-- </md-button>-->
<!-- </div> -->
<!-- </div>-->
<!-- </div>-->
<!-- </md-dialog-content>-->
<!-- <md-dialog-actions>-->
<!-- <md-button type="submit" ng-disabled="editEntityForm.$invalid || !editEntityForm.$dirty" class="md-raised md-primary">Save</md-button>-->
<!-- <md-button ng-click="vm.cancel()" class="md-primary">Cancel</md-button>-->
<!-- </md-dialog-actions>-->
<!-- </form>-->
<!--</md-dialog>-->
<!-- <div>-->
<!-- <button mat-raised-button color="primary"-->
<!-- type="button"-->
<!-- (click)="addRelation()"-->
<!-- matTooltip="Add Relation"-->
<!-- matTooltipPosition="above">-->
<!-- Add-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
<!-- <button mat-button mat-raised-button color="primary"-->
<!-- type="submit"-->
<!-- [disabled]="(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty">-->
<!-- Save-->
<!-- </button>-->
<!-- <button mat-button color="primary"-->
<!-- style="margin-right: 20px;"-->
<!-- type="button"-->
<!-- [disabled]="(isLoading$ | async)"-->
<!-- (click)="cancel()" cdkFocusInitial>-->
<!-- Cancel-->
<!-- </button>-->
<!-- </div>-->
<!--</form>-->
<!---->
<!--========================================================================-->
<!--========================= Add entity example =========================-->
<!--========================================================================-->
<!---->
<!--<md-dialog aria-label="Add entity">-->
<!-- <form name="addEntityForm" class="add-entity-form" ng-submit="vm.save()">-->
<!-- <md-toolbar>-->
<!-- <div class="md-toolbar-tools">-->
<!-- <h2>Add entity</h2>-->
<!-- <span flex></span>-->
<!-- <md-button class="md-icon-button" ng-click="vm.cancel()">-->
<!-- <ng-md-icon icon="close" aria-label="Close"></ng-md-icon>-->
<!-- </md-button>-->
<!--<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"-->
<!-- (ngSubmit)="save()" class="add-entity-form">-->
<!-- <mat-toolbar fxLayout="row" color="primary">-->
<!-- <h2>Add entity</h2>-->
<!-- <span fxFlex></span>-->
<!-- <button mat-icon-button (click)="cancel()" type="button">-->
<!-- <mat-icon class="material-icons">close</mat-icon>-->
<!-- </button>-->
<!-- </mat-toolbar>-->
<!-- <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
<!-- </mat-progress-bar>-->
<!-- <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
<!-- <div mat-dialog-content fxLayout="column">-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Entity Name</mat-label>-->
<!-- <input matInput formControlName="entityName" required>-->
<!-- <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">-->
<!-- Entity name is required.-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Entity Label</mat-label>-->
<!-- <input matInput formControlName="entityLabel" >-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <tb-entity-type-select-->
<!-- class="mat-block"-->
<!-- formControlName="entityType"-->
<!-- [showLabel]="true"-->
<!-- [allowedEntityTypes]="allowedEntityTypes"-->
<!-- ></tb-entity-type-select>-->
<!-- <tb-entity-subtype-autocomplete-->
<!-- fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
<!-- class="mat-block"-->
<!-- formControlName="type"-->
<!-- [required]="true"-->
<!-- [entityType]="'ASSET'"-->
<!-- ></tb-entity-subtype-autocomplete>-->
<!-- <tb-entity-subtype-autocomplete-->
<!-- fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
<!-- class="mat-block"-->
<!-- formControlName="type"-->
<!-- [required]="true"-->
<!-- [entityType]="'DEVICE'"-->
<!-- ></tb-entity-subtype-autocomplete>-->
<!-- </div>-->
<!-- <div formGroupName="attributes" fxLayout="column">-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Latitude</mat-label>-->
<!-- <input type="number" step="any" matInput formControlName="latitude">-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Longitude</mat-label>-->
<!-- <input type="number" step="any" matInput formControlName="longitude">-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </md-toolbar>-->
<!-- <md-dialog-content>-->
<!-- <div class="md-dialog-content">-->
<!-- <div layout="row">-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Entity Name</label>-->
<!-- <input ng-model="vm.entityName" name=entityName required>-->
<!-- <div ng-messages="addEntityForm.entityName.$error">-->
<!-- <div ng-message="required">Entity name is required.</div>-->
<!-- </div>-->
<!-- </md-input-container>-->
<!-- <tb-entity-type-select class="md-block" style="min-width: 100px; width: 100px;"-->
<!-- the-form="addEntityForm"-->
<!-- tb-required="true"-->
<!-- allowed-entity-types="vm.allowedEntityTypes"-->
<!-- ng-model="vm.entityType">-->
<!-- </tb-entity-type-select>-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Entity Subtype</label>-->
<!-- <input ng-model="vm.type" name=type required>-->
<!-- <div ng-messages="addEntityForm.type.$error">-->
<!-- <div ng-message="required">Entity subtype is required.</div>-->
<!-- </div>-->
<!-- </md-input-container>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Latitude</label>-->
<!-- <input name="latitude" type="number" step="any" ng-model="vm.attributes.latitude">-->
<!-- </md-input-container>-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Longitude</label>-->
<!-- <input name="longitude" type="number" step="any" ng-model="vm.attributes.longitude">-->
<!-- </md-input-container>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Address</label>-->
<!-- <input ng-model="vm.attributes.address">-->
<!-- </md-input-container>-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Owner</label>-->
<!-- <input ng-model="vm.attributes.owner">-->
<!-- </md-input-container>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <md-input-container flex class="md-block">-->
<!-- <label>Integer Value</label>-->
<!-- <input name="integerNumber" type="number" step="1" ng-pattern="/^-?[0-9]+$/" ng-model="vm.attributes.number">-->
<!-- <div ng-messages="addEntityForm.integerNumber.$error">-->
<!-- <div ng-message="pattern">Invalid integer value.</div>-->
<!-- </div>-->
<!-- </md-input-container>-->
<!-- <div class="boolean-value-input" layout="column" layout-align="center start" flex>-->
<!-- <label class="checkbox-label">Boolean Value</label>-->
<!-- <md-checkbox ng-model="vm.attributes.booleanValue" style="margin-bottom: 40px;">-->
<!-- {{ (vm.attributes.booleanValue ? "value.true" : "value.false") | translate }}-->
<!-- </md-checkbox>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Address</mat-label>-->
<!-- <input matInput formControlName="address">-->
<!-- </mat-form-field>-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Owner</mat-label>-->
<!-- <input matInput formControlName="owner">-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <mat-label>Integer Value</mat-label>-->
<!-- <input type="number" step="1" matInput formControlName="number">-->
<!-- <mat-error *ngIf="addEntityFormGroup.get('attributes').get('number').hasError('pattern')">-->
<!-- Invalid integer value.-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
<!-- <label class="checkbox-label">Boolean Value</label>-->
<!-- <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
<!-- {{ (addEntityFormGroup.get('attributes').get('booleanValue').value ? "value.true" : "value.false") | translate }}-->
<!-- </mat-checkbox>-->
<!-- </div>-->
<!-- <div class="relations-list">-->
<!-- <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
<!-- <div class="body" ng-show="vm.relations.length">-->
<!-- <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.relations track by $index">-->
<!-- <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px;">-->
<!-- <div flex layout="column">-->
<!-- <div layout="row">-->
<!-- <md-input-container class="md-block" style="min-width: 100px;">-->
<!-- <label>Direction</label>-->
<!-- <md-select name="direction" required ng-model="relation.direction">-->
<!-- <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
<!-- {{ ("relation.search-direction." + direction) | translate}}-->
<!-- </md-option>-->
<!-- </md-select>-->
<!-- <div ng-messages="addEntityForm.direction.$error">-->
<!-- <div ng-message="required">Relation direction is required.</div>-->
<!-- </div>-->
<!-- </md-input-container>-->
<!-- <tb-relation-type-autocomplete flex class="md-block"-->
<!-- the-form="addEntityForm"-->
<!-- ng-model="relation.relationType"-->
<!-- tb-required="true">-->
<!-- </tb-relation-type-autocomplete>-->
<!-- </div>-->
<!-- <div layout="row">-->
<!-- <tb-entity-select flex class="md-block"-->
<!-- the-form="addEntityForm"-->
<!-- tb-required="true"-->
<!-- ng-model="relation.relatedEntity">-->
<!-- </tb-entity-select>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div layout="column" layout-align="center center">-->
<!-- <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
<!-- ng-click="vm.removeRelation($index)" aria-label="Remove">-->
<!-- <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
<!-- <md-icon aria-label="Remove" class="material-icons">-->
<!-- close-->
<!-- </md-icon>-->
<!-- </md-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="relations-list">-->
<!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
<!-- <div class="body" [fxShow]="relations().length">-->
<!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
<!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
<!-- <div fxFlex fxLayout="column">-->
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
<!-- <mat-label>Direction</mat-label>-->
<!-- <mat-select formControlName="direction" name="direction">-->
<!-- <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
<!-- {{ ("relation.search-direction." + direction.value) | translate}}-->
<!-- </mat-option>-->
<!-- </mat-select>-->
<!-- <mat-error *ngIf="relation.get('direction').hasError('required')">-->
<!-- Relation direction is required.-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- <tb-relation-type-autocomplete-->
<!-- fxFlex class="mat-block"-->
<!-- formControlName="relationType"-->
<!-- [required]="true">-->
<!-- </tb-relation-type-autocomplete>-->
<!-- </div>-->
<!-- <div fxLayout="row" fxLayout.xs="column">-->
<!-- <tb-entity-select-->
<!-- fxFlex class="mat-block"-->
<!-- [required]="true"-->
<!-- formControlName="relatedEntity">-->
<!-- </tb-entity-select>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div fxLayout="column" fxLayoutAlign="center center">-->
<!-- <button mat-icon-button color="primary"-->
<!-- aria-label="Remove"-->
<!-- type="button"-->
<!-- (click)="removeRelation(i)"-->
<!-- matTooltip="Remove relation"-->
<!-- matTooltipPosition="above">-->
<!-- <mat-icon>close</mat-icon>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <md-button class="md-primary md-raised" ng-click="vm.addRelation()" aria-label="Add">-->
<!-- <md-tooltip md-direction="top">Add Relation</md-tooltip>-->
<!-- Add-->
<!-- </md-button>-->
<!-- </div> -->
<!-- </div>-->
<!-- </div>-->
<!-- </md-dialog-content>-->
<!-- <md-dialog-actions>-->
<!-- <md-button type="submit" ng-disabled="addEntityForm.$invalid || !addEntityForm.$dirty" class="md-raised md-primary">Create</md-button>-->
<!-- <md-button ng-click="vm.cancel()" class="md-primary">Cancel</md-button>-->
<!-- </md-dialog-actions>-->
<!-- </form>-->
<!--</md-dialog>-->
<!-- <div>-->
<!-- <button mat-raised-button color="primary"-->
<!-- type="button"-->
<!-- (click)="addRelation()"-->
<!-- matTooltip="Add Relation"-->
<!-- matTooltipPosition="above">-->
<!-- Add-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
<!-- <button mat-button mat-raised-button color="primary"-->
<!-- type="submit"-->
<!-- [disabled]="(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty">-->
<!-- Create-->
<!-- </button>-->
<!-- <button mat-button color="primary"-->
<!-- style="margin-right: 20px;"-->
<!-- type="button"-->
<!-- [disabled]="(isLoading$ | async)"-->
<!-- (click)="cancel()" cdkFocusInitial>-->
<!-- Cancel-->
<!-- </button>-->
<!-- </div>-->
<!--</form>-->

562
ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw
View File

@ -1,83 +1,34 @@
/*================================================================================*/
/*======================= New TB 3.0 / Angular 8 Example =======================*/
/*================================================================================*/
//
//let $injector = widgetContext.$scope.$injector;
//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
//
//deviceService.getDevice(entityId.id).subscribe(function(device) {
// console.log(device);
//});
//
//
//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
//
//customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe(
// function(res) {
// console.log(res);
// }
//);
//
//function EditEntityDialogController(instance) {
// let vm = instance;
// vm.entityId = entityId;
// vm.entityName = entityName;
// vm.entityType = entityId.entityType;
//
// vm.editEntityFormGroup = vm.fb.group({
// entityName: [vm.entityName, [vm.validators.required]]
// });
//
// vm.cancel = function() {
// vm.dialogRef.close(null);
// };
//
// vm.save = function() {
// const newVal = vm.editEntityFormGroup.value;
// vm.dialogRef.close(newVal);
// };
//}
//
/*=======================================================================*/
/*===== There are three examples: for delete, edit and add entity =====*/
/*=======================================================================*/
/*======================= Delete entity example =======================*/
/*=======================================================================*/
//
//var $injector = widgetContext.$scope.$injector;
//var $mdDialog = $injector.get('$mdDialog'),
// $document = $injector.get('$document'),
// types = $injector.get('types'),
// assetService = $injector.get('assetService'),
// deviceService = $injector.get('deviceService')
// $rootScope = $injector.get('$rootScope'),
// $q = $injector.get('$q');
//let $injector = widgetContext.$scope.$injector;
//let dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));
//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
//
//openDeleteEntityDialog();
//
//function openDeleteEntityDialog() {
// var title = 'Delete ' + entityId.entityType
// .toLowerCase() + ' ' +
// entityName;
// var content = 'Are you sure you want to delete the ' +
// entityId.entityType.toLowerCase() + ' ' +
// entityName + '?';
// var confirm = $mdDialog.confirm()
// .targetEvent($event)
// .title(title)
// .htmlContent(content)
// .ariaLabel(title)
// .cancel('Cancel')
// .ok('Delete');
// $mdDialog.show(confirm).then(function() {
// deleteEntity();
// })
// let title = 'Delete ' + entityId.entityType.toLowerCase() + ' ' +
// entityName;
// let content = 'Are you sure you want to delete the ' +
// entityId.entityType.toLowerCase() + ' ' + entityName + '?';
// dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(
// function(result) {
// if (result) {
// deleteEntity();
// }
// }
// );
//}
//
//function deleteEntity() {
// deleteEntityPromise(entityId).then(
// deleteEntityObservable(entityId).subscribe(
// function success() {
// updateAliasData();
// widgetContext.updateAliases();
// },
// function fail() {
// showErrorDialog();
@ -85,228 +36,243 @@
// );
//}
//
//function deleteEntityPromise(entityId) {
// if (entityId.entityType == types.entityType.asset) {
//function deleteEntityObservable(entityId) {
// if (entityId.entityType == "ASSET") {
// return assetService.deleteAsset(entityId.id);
// } else if (entityId.entityType == types.entityType.device) {
// } else if (entityId.entityType == "DEVICE") {
// return deviceService.deleteDevice(entityId.id);
// }
//}
//
//function updateAliasData() {
// var aliasIds = [];
// for (var id in widgetContext.aliasController.resolvedAliases) {
// aliasIds.push(id);
// }
// var tasks = [];
// aliasIds.forEach(function(aliasId) {
// widgetContext.aliasController.setAliasUnresolved(aliasId);
// tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
// });
// $q.all(tasks).then(function() {
// $rootScope.$broadcast('entityAliasesChanged', aliasIds);
// });
//}
//
//function showErrorDialog() {
// var title = 'Error';
// var content = 'An error occurred while deleting the entity. Please try again.';
// var alert = $mdDialog.alert()
// .title(title)
// .htmlContent(content)
// .ariaLabel(title)
// .parent(angular.element($document[0].body))
// .targetEvent($event)
// .multiple(true)
// .clickOutsideToClose(true)
// .ok('CLOSE');
// $mdDialog.show(alert);
// let title = 'Error';
// let content = 'An error occurred while deleting the entity. Please try again.';
// dialogs.alert(title, content, 'CLOSE').subscribe(
// function(result) {}
// );
//}
//
/*=======================================================================*/
/*======================== Edit entity example ========================*/
/*=======================================================================*/
//
//var $injector = widgetContext.$scope.$injector;
//var $mdDialog = $injector.get('$mdDialog'),
// $document = $injector.get('$document'),
// $q = $injector.get('$q'),
// types = $injector.get('types'),
// $rootScope = $injector.get('$rootScope'),
// entityService = $injector.get('entityService'),
// attributeService = $injector.get('attributeService'),
// entityRelationService = $injector.get('entityRelationService');
//let $injector = widgetContext.$scope.$injector;
//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
//let entityService = $injector.get(widgetContext.servicesMap.get('entityService'));
//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
//let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
//let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));
//
//openEditEntityDialog();
//
//function openEditEntityDialog() {
// $mdDialog.show({
// controller: ['$scope','$mdDialog', EditEntityDialogController],
// controllerAs: 'vm',
// template: htmlTemplate,
// locals: {
// entityId: entityId
// },
// parent: angular.element($document[0].body),
// targetEvent: $event,
// multiple: true,
// clickOutsideToClose: false
// });
// customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();
//}
//
//function EditEntityDialogController($scope,$mdDialog) {
// var vm = this;
// vm.entityId = entityId;
//function EditEntityDialogController(instance) {
// let vm = instance;
//
// vm.entityName = entityName;
// vm.entityType = entityId.entityType;
// vm.allowedEntityTypes = [types.entityType.asset, types.entityType.device];
// vm.allowedRelatedEntityTypes = [];
// vm.entitySearchDirection = types.entitySearchDirection;
// vm.entitySearchDirection = {
// from: "FROM",
// to: "TO"
// };
// vm.attributes = {};
// vm.serverAttributes = {};
// vm.relations = [];
// vm.newRelations = [];
// vm.oldRelationsData = [];
// vm.relationsToDelete = [];
// vm.entity = {};
//
// vm.editEntityFormGroup = vm.fb.group({
// entityName: ['', [vm.validators.required]],
// entityType: [null],
// entityLabel: [null],
// type: ['', [vm.validators.required]],
// attributes: vm.fb.group({
// latitude: [null],
// longitude: [null],
// address: [null],
// owner: [null],
// number: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
// booleanValue: [false]
// }),
// oldRelations: vm.fb.array([]),
// relations: vm.fb.array([])
// });
//
// getEntityInfo();
//
// vm.cancel = function() {
// vm.dialogRef.close(null);
// };
//
// vm.relations = function() {
// return vm.editEntityFormGroup.get('relations');
// };
//
// vm.oldRelations = function() {
// return vm.editEntityFormGroup.get('oldRelations');
// };
//
// vm.addRelation = function() {
// var relation = {
// direction: null,
// relationType: null,
// relatedEntity: null
// };
// vm.newRelations.push(relation);
// $scope.editEntityForm.$setDirty();
// vm.relations().push(vm.fb.group({
// relatedEntity: [null, [vm.validators.required]],
// relationType: [null, [vm.validators.required]],
// direction: [null, [vm.validators.required]]
// }));
// };
//
// function addOldRelation() {
// vm.oldRelations().push(vm.fb.group({
// relatedEntity: [{value: null, disabled: true}, [vm.validators.required]],
// relationType: [{value: null, disabled: true}, [vm.validators.required]],
// direction: [{value: null, disabled: true}, [vm.validators.required]]
// }));
// }
//
// vm.removeRelation = function(index) {
// if (index > -1) {
// vm.newRelations.splice(index, 1);
// $scope.editEntityForm.$setDirty();
// }
// vm.relations().removeAt(index);
// vm.relations().markAsDirty();
// };
// vm.removeOldRelation = function(index, relation) {
// if (index > -1) {
// vm.relations.splice(index, 1);
// vm.relationsToDelete.push(relation);
// $scope.editEntityForm.$setDirty();
// }
//
// vm.removeOldRelation = function(index) {
// vm.oldRelations().removeAt(index);
// vm.relationsToDelete.push(vm.oldRelationsData[index]);
// vm.oldRelations().markAsDirty();
// };
//
// vm.save = function() {
// saveAttributes();
// saveRelations();
// $scope.editEntityForm.$setPristine();
// };
// vm.cancel = function() {
// $mdDialog.hide();
// vm.editEntityFormGroup.markAsPristine();
// widgetContext.rxjs.forkJoin([
// saveAttributes(entityId),
// saveRelations(entityId),
// saveEntity()
// ]).subscribe(
// function () {
// widgetContext.updateAliases();
// vm.dialogRef.close(null);
// }
// );
// };
//
// function getEntityAttributes(attributes) {
// for (var i = 0; i < attributes.length; i++) {
// vm.attributes[attributes[i].key] = attributes[i].value;
// vm.attributes[attributes[i].key] = attributes[i].value;
// }
// vm.serverAttributes = angular.copy(vm.attributes);
// }
//
// function getEntityRelations(relations) {
// var relationsFrom = relations[0];
// var relationsTo = relations[1];
// for (var i=0; i < relationsFrom.length; i++) {
// var relation = {
// direction: types.entitySearchDirection.from,
// let relationsFrom = relations[0];
// let relationsTo = relations[1];
// for (let i=0; i < relationsFrom.length; i++) {
// let relation = {
// direction: 'FROM',
// relationType: relationsFrom[i].type,
// relatedEntity: relationsFrom[i].to
// };
// vm.relations.push(relation);
// vm.oldRelationsData.push(relation);
// addOldRelation();
// }
// for (var i=0; i < relationsTo.length; i++) {
// var relation = {
// direction: types.entitySearchDirection.to,
// for (let i=0; i < relationsTo.length; i++) {
// let relation = {
// direction: 'TO',
// relationType: relationsTo[i].type,
// relatedEntity: relationsTo[i].from
// };
// vm.relations.push(relation);
// vm.oldRelationsData.push(relation);
// addOldRelation();
// }
// }
//
// function getEntityInfo() {
// entityService.getEntity(entityId.entityType, entityId.id).then(
// function(entity) {
// vm.entity = entity;
// vm.type = vm.entity.type;
// });
// attributeService.getEntityAttributesValues(entityId.entityType, entityId.id, 'SERVER_SCOPE').then(
// function(data){
// if (data.length) {
// getEntityAttributes(data);
// entityService.getEntity(entityId.entityType, entityId.id).subscribe(function (entity) {
// vm.entity = entity;
// widgetContext.rxjs.forkJoin([
// entityRelationService.findInfoByFrom(entityId),
// entityRelationService.findInfoByTo(entityId),
// attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE')
// ]).subscribe(
// function (data) {
// getEntityRelations(data.slice(0,2));
// getEntityAttributes(data[2]);
// vm.editEntityFormGroup.patchValue({
// entityName: vm.entity.name,
// entityType: vm.entityType,
// entityLabel: vm.entity.label,
// type: vm.entity.type,
// attributes: vm.attributes,
// oldRelations: vm.oldRelationsData
// }, {emitEvent: false});
// }
// });
// $q.all([entityRelationService.findInfoByFrom(entityId.id, entityId.entityType), entityRelationService.findInfoByTo(entityId.id, entityId.entityType)]).then(
// function(relations){
// getEntityRelations(relations);
// });
// );
// });
// }
//
// function saveAttributes() {
// var attributesArray = [];
// for (var key in vm.attributes) {
// if (vm.attributes[key] !== vm.serverAttributes[key]) {
// attributesArray.push({key: key, value: vm.attributes[key]});
// function saveEntity() {
// const formValues = vm.editEntityFormGroup.value;
// if (vm.entity.label !== formValues.entityLabel){
// vm.entity.label = formValues.entityLabel;
// if (formValues.entityType == 'ASSET') {
// return assetService.saveAsset(vm.entity);
// } else if (formValues.entityType == 'DEVICE') {
// return deviceService.saveDevice(vm.entity);
// }
// } else {
// return widgetContext.rxjs.of([]);
// }
// }
//
// function saveAttributes(entityId) {
// let attributes = vm.editEntityFormGroup.get('attributes').value;
// let attributesArray = [];
// for (let key in attributes) {
// if (attributes[key] !== vm.attributes[key]) {
// attributesArray.push({key: key, value: attributes[key]});
// }
// }
// if (attributesArray.length > 0) {
// attributeService.saveEntityAttributes(entityId.entityType, entityId.id, \"SERVER_SCOPE\", attributesArray);
// return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
// } else {
// return widgetContext.rxjs.of([]);
// }
// }
//
// function saveRelations() {
// var tasks = [];
// for (var i=0; i < vm.newRelations.length; i++) {
// var relation = {
// type: vm.newRelations[i].relationType
// function saveRelations(entityId) {
// let relations = vm.editEntityFormGroup.get('relations').value;
// let tasks = [];
// for(let i=0; i < relations.length; i++) {
// let relation = {
// type: relations[i].relationType,
// typeGroup: 'COMMON'
// };
// if (vm.newRelations[i].direction == types.entitySearchDirection.from) {
// relation.to = vm.newRelations[i].relatedEntity;
// if (relations[i].direction == 'FROM') {
// relation.to = relations[i].relatedEntity;
// relation.from = entityId;
// } else {
// relation.to = entityId;
// relation.from = vm.newRelations[i].relatedEntity;
// relation.from = relations[i].relatedEntity;
// }
// tasks.push(entityRelationService.saveRelation(relation));
// }
// for (var i=0; i < vm.relationsToDelete.length; i++) {
// var relation = {
// for (let i=0; i < vm.relationsToDelete.length; i++) {
// let relation = {
// type: vm.relationsToDelete[i].relationType
// };
// if (vm.relationsToDelete[i].direction == types.entitySearchDirection.from) {
// if (vm.relationsToDelete[i].direction == 'FROM') {
// relation.to = vm.relationsToDelete[i].relatedEntity;
// relation.from = entityId;
// } else {
// relation.to = entityId;
// relation.from = vm.relationsToDelete[i].relatedEntity;
// }
// tasks.push(entityRelationService.deleteRelation(relation.from.id, relation.from.entityType, relation.type, relation.to.id, relation.to.entityType));
// tasks.push(entityRelationService.deleteRelation(relation.from, relation.type, relation.to));
// }
// $q.all(tasks).then(function(){
// vm.relations = vm.relations.concat(vm.newRelations);
// vm.newRelations = [];
// vm.relationsToDelete = [];
// updateAliasData();
// });
// }
//
// function updateAliasData() {
// var aliasIds = [];
// for (var id in widgetContext.aliasController.resolvedAliases) {
// aliasIds.push(id);
// if (tasks.length > 0) {
// return widgetContext.rxjs.forkJoin(tasks);
// } else {
// return widgetContext.rxjs.of([]);
// }
// var tasks = [];
// aliasIds.forEach(function(aliasId) {
// widgetContext.aliasController.setAliasUnresolved(aliasId);
// tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
// });
// $q.all(tasks).then(function() {
// $rootScope.$broadcast('entityAliasesChanged', aliasIds);
// });
// }
//}
//
@ -314,124 +280,132 @@
/*========================= Add entity example =========================*/
/*========================================================================*/
//
//var $injector = widgetContext.$scope.$injector;
//var $mdDialog = $injector.get('$mdDialog'),
// $document = $injector.get('$document'),
// $q = $injector.get('$q'),
// $rootScope = $injector.get('$rootScope'),
// types = $injector.get('types'),
// assetService = $injector.get('assetService'),
// deviceService = $injector.get('deviceService'),
// attributeService = $injector.get('attributeService'),
// entityRelationService = $injector.get('entityRelationService');
//let $injector = widgetContext.$scope.$injector;
//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
//let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
//let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));
//
//openAddEntityDialog();
//
//function openAddEntityDialog() {
// $mdDialog.show({
// controller: ['$scope','$mdDialog', AddEntityDialogController],
// controllerAs: 'vm',
// template: htmlTemplate,
// locals: {
// entityId: entityId
// },
// parent: angular.element($document[0].body),
// targetEvent: $event,
// multiple: true,
// clickOutsideToClose: false
// });
// customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();
//}
//
//function AddEntityDialogController($scope, $mdDialog) {
// var vm = this;
// vm.allowedEntityTypes = [types.entityType.asset, types.entityType.device];
// vm.allowedRelatedEntityTypes = [];
// vm.entitySearchDirection = types.entitySearchDirection;
// vm.attributes = {};
// vm.relations = [];
//function AddEntityDialogController(instance) {
// let vm = instance;
//
// vm.allowedEntityTypes = ['ASSET', 'DEVICE'];
// vm.entitySearchDirection = {
// from: "FROM",
// to: "TO"
// }
//
// vm.addEntityFormGroup = vm.fb.group({
// entityName: ['', [vm.validators.required]],
// entityType: ['DEVICE'],
// entityLabel: [null],
// type: ['', [vm.validators.required]],
// attributes: vm.fb.group({
// latitude: [null],
// longitude: [null],
// address: [null],
// owner: [null],
// number: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
// booleanValue: [null]
// }),
// relations: vm.fb.array([])
// });
//
// vm.cancel = function() {
// vm.dialogRef.close(null);
// };
//
// vm.relations = function() {
// return vm.addEntityFormGroup.get('relations');
// };
//
// vm.addRelation = function() {
// var relation = {
// direction: null,
// relationType: null,
// relatedEntity: null
// };
// vm.relations.push(relation);
// vm.relations().push(vm.fb.group({
// relatedEntity: [null, [vm.validators.required]],
// relationType: [null, [vm.validators.required]],
// direction: [null, [vm.validators.required]]
// }));
// };
//
// vm.removeRelation = function(index) {
// if (index > -1) {
// vm.relations.splice(index, 1);
// }
// vm.relations().removeAt(index);
// vm.relations().markAsDirty();
// };
//
// vm.save = function() {
// $scope.addEntityForm.$setPristine();
// saveEntityPromise().then(
// vm.addEntityFormGroup.markAsPristine();
// saveEntityObservable().subscribe(
// function (entity) {
// saveAttributes(entity.id);
// saveRelations(entity.id);
// $mdDialog.hide();
// widgetContext.rxjs.forkJoin([
// saveAttributes(entity.id),
// saveRelations(entity.id)
// ]).subscribe(
// function () {
// widgetContext.updateAliases();
// vm.dialogRef.close(null);
// }
// );
// }
// );
// };
// vm.cancel = function() {
// $mdDialog.hide();
// };
//
//
// function saveEntityPromise() {
// var entity = {
// name: vm.entityName,
// type: vm.type
// function saveEntityObservable() {
// const formValues = vm.addEntityFormGroup.value;
// let entity = {
// name: formValues.entityName,
// type: formValues.type,
// label: formValues.entityLabel
// };
// if (vm.entityType == types.entityType.asset) {
// if (formValues.entityType == 'ASSET') {
// return assetService.saveAsset(entity);
// } else if (vm.entityType == types.entityType.device) {
// } else if (formValues.entityType == 'DEVICE') {
// return deviceService.saveDevice(entity);
// }
// }
//
// function saveAttributes(entityId) {
// var attributesArray = [];
// for (var key in vm.attributes) {
// attributesArray.push({key: key, value: vm.attributes[key]});
// let attributes = vm.addEntityFormGroup.get('attributes').value;
// let attributesArray = [];
// for (let key in attributes) {
// if(attributes[key] !== null) {
// attributesArray.push({key: key, value: attributes[key]});
// }
// }
// if (attributesArray.length > 0) {
// attributeService.saveEntityAttributes(entityId.entityType, entityId.id, \"SERVER_SCOPE\", attributesArray);
// return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
// } else {
// return widgetContext.rxjs.of([]);
// }
// }
//
// function saveRelations(entityId) {
// var tasks = [];
// for (var i=0; i < vm.relations.length; i++) {
// var relation = {
// type: vm.relations[i].relationType
// let relations = vm.addEntityFormGroup.get('relations').value;
// let tasks = [];
// for(let i=0; i < relations.length; i++) {
// let relation = {
// type: relations[i].relationType,
// typeGroup: 'COMMON'
// };
// if (vm.relations[i].direction == types.entitySearchDirection.from) {
// relation.to = vm.relations[i].relatedEntity;
// if (relations[i].direction == 'FROM') {
// relation.to = relations[i].relatedEntity;
// relation.from = entityId;
// } else {
// relation.to = entityId;
// relation.from = vm.relations[i].relatedEntity;
// relation.from = relations[i].relatedEntity;
// }
// tasks.push(entityRelationService.saveRelation(relation));
// }
// $q.all(tasks).then(function(){
// updateAliasData();
// });
// }
//
// function updateAliasData() {
// var aliasIds = [];
// for (var id in widgetContext.aliasController.resolvedAliases) {
// aliasIds.push(id);
// if (tasks.length > 0) {
// return widgetContext.rxjs.forkJoin(tasks);
// } else {
// return widgetContext.rxjs.of([]);
// }
// var tasks = [];
// aliasIds.forEach(function(aliasId) {
// widgetContext.aliasController.setAliasUnresolved(aliasId);
// tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
// });
// $q.all(tasks).then(function() {
// $rootScope.$broadcast('entityAliasesChanged', aliasIds);
// });
// }
//}

7
ui-ngx/src/app/modules/home/components/widget/widget.component.ts
View File

@ -97,11 +97,14 @@ import { DatePipe } from '@angular/common';
import { AttributeService } from '@core/http/attribute.service';
import { TranslateService } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { EntityRelationService } from '@app/core/http/entity-relation.service';
const ServicesMap = new Map<string, Type<any>>();
ServicesMap.set('deviceService', DeviceService);
ServicesMap.set('assetService', AssetService);
ServicesMap.set('attributeService', AttributeService);
ServicesMap.set('entityRelationService', EntityRelationService);
ServicesMap.set('entityService', EntityService);
ServicesMap.set('dialogs', DialogService);
ServicesMap.set('customDialog', CustomDialogService);
ServicesMap.set('date', DatePipe);
@ -1011,7 +1014,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
'entityName', 'additionalParams', 'entityLabel', customFunction);
customActionFunction($event, this.widgetContext, entityId, entityName, additionalParams, entityLabel);
} catch (e) {
//
console.error(e);
}
}
break;
@ -1036,7 +1039,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', customPrettyFunction);
customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
} catch (e) {
//
console.error(e);
}
}
},

Write Preview
Loading…
Cancel
Save