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 7 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
Unified 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 ==========*/ /*========== There are two examples: for edit and add entity ==========*/
/*=======================================================================*/ /*=======================================================================*/
/*======================== Edit entity example ========================*/ /*======================== Edit entity example ========================*/
/*=======================================================================*/ /*=======================================================================*/
/* /*
.edit-entity-form md-input-container {
padding-right: 10px;
}
.edit-entity-form .boolean-value-input { .edit-entity-form .boolean-value-input {
padding-left: 5px; padding-left: 5px;
} }
@ -41,6 +29,10 @@
white-space: nowrap; white-space: nowrap;
} }
.relations-list .mat-form-field-infix {
width: auto !important;
}
.relations-list .body { .relations-list .body {
padding-right: 5px; padding-right: 5px;
padding-bottom: 15px; padding-bottom: 15px;
@ -56,26 +48,14 @@
padding-left: 5px; padding-left: 5px;
} }
.relations-list .body md-autocomplete-wrap md-input-container {
height: 30px;
}
.relations-list .body .md-button { .relations-list .body .md-button {
margin: 0; margin: 0;
} }
.relations-list.old-relations tb-entity-select tb-entity-autocomplete button {
display: none;
}
*/ */
/*========================================================================*/ /*========================================================================*/
/*========================= Add entity example =========================*/ /*========================= Add entity example =========================*/
/*========================================================================*/ /*========================================================================*/
/* /*
.add-entity-form md-input-container {
padding-right: 10px;
}
.add-entity-form .boolean-value-input { .add-entity-form .boolean-value-input {
padding-left: 5px; padding-left: 5px;
} }
@ -101,6 +81,10 @@
white-space: nowrap; white-space: nowrap;
} }
.relations-list .mat-form-field-infix {
width: auto !important;
}
.relations-list .body { .relations-list .body {
padding-right: 5px; padding-right: 5px;
padding-bottom: 15px; padding-bottom: 15px;
@ -116,10 +100,6 @@
padding-left: 5px; padding-left: 5px;
} }
.relations-list .body md-autocomplete-wrap md-input-container {
height: 30px;
}
.relations-list .body .md-button { .relations-list .body .md-button {
margin: 0; 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 =====--> <!--===== There are two example templates: for edit and add entity =====-->
<!--=======================================================================--> <!--=======================================================================-->
<!--======================== Edit entity example ========================--> <!--======================== Edit entity example ========================-->
<!--=======================================================================--> <!--=======================================================================-->
<!-- --> <!-- -->
<!--<md-dialog aria-label="Edit entity">--> <!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
<!-- <form name="editEntityForm" class="edit-entity-form" ng-submit="vm.save()">--> <!-- (ngSubmit)="save()" class="edit-entity-form">-->
<!-- <md-toolbar>--> <!-- <mat-toolbar fxLayout="row" color="primary">-->
<!-- <div class="md-toolbar-tools">--> <!-- <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
<!-- <h2>Edit {{vm.entityType.toLowerCase()}} {{vm.entityName}}</h2>--> <!-- <span fxFlex></span>-->
<!-- <span flex></span>--> <!-- <button mat-icon-button (click)="cancel()" type="button">-->
<!-- <md-button class="md-icon-button" ng-click="vm.cancel()">--> <!-- <mat-icon class="material-icons">close</mat-icon>-->
<!-- <ng-md-icon icon="close" aria-label="Close"></ng-md-icon>--> <!-- </button>-->
<!-- </md-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>--> <!-- </div>-->
<!-- </md-toolbar>--> <!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <md-dialog-content>--> <!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <div class="md-dialog-content">--> <!-- <mat-label>Address</mat-label>-->
<!-- <div layout="row">--> <!-- <input matInput formControlName="address">-->
<!-- <md-input-container flex class="md-block">--> <!-- </mat-form-field>-->
<!-- <label>Entity Name</label>--> <!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <input ng-model="vm.entityName" readonly>--> <!-- <mat-label>Owner</mat-label>-->
<!-- </md-input-container>--> <!-- <input matInput formControlName="owner">-->
<!-- <md-input-container flex class="md-block">--> <!-- </mat-form-field>-->
<!-- <label>Entity Type</label>--> <!-- </div>-->
<!-- <input ng-model="vm.entityType" readonly>--> <!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- </md-input-container>--> <!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <md-input-container flex class="md-block">--> <!-- <mat-label>Integer Value</mat-label>-->
<!-- <label>Type</label>--> <!-- <input type="number" step="1" matInput formControlName="number">-->
<!-- <input ng-model="vm.type" readonly>--> <!-- <mat-error *ngIf="editEntityFormGroup.get('attributes').get('number').hasError('pattern')">-->
<!-- </md-input-container>--> <!-- Invalid integer value.-->
<!-- </div>--> <!-- </mat-error>-->
<!-- <div layout="row">--> <!-- </mat-form-field>-->
<!-- <md-input-container flex class="md-block">--> <!-- <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
<!-- <label>Latitude</label>--> <!-- <label class="checkbox-label">Boolean Value</label>-->
<!-- <input name="latitude" type="number" step="any" ng-model="vm.attributes.latitude">--> <!-- <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
<!-- </md-input-container>--> <!-- {{ (editEntityFormGroup.get('attributes').get('booleanValue').value ? "value.true" : "value.false") | translate }}-->
<!-- <md-input-container flex class="md-block">--> <!-- </mat-checkbox>-->
<!-- <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>--> <!-- </div>-->
<!-- <div class="relations-list old-relations">--> <!-- </div>-->
<!-- <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>--> <!-- </div>-->
<!-- <div class="body" ng-show="vm.relations.length">--> <!-- <div class="relations-list old-relations">-->
<!-- <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.relations track by $index">--> <!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
<!-- <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px; margin-bottom: 3px;">--> <!-- <div class="body" [fxShow]="oldRelations().length">-->
<!-- <div flex layout="column">--> <!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" -->
<!-- <div layout="row">--> <!-- *ngFor="let relation of oldRelations().controls; let i = index;">-->
<!-- <md-input-container class="md-block" style="min-width: 100px;">--> <!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
<!-- <label>Direction</label>--> <!-- <div fxFlex fxLayout="column">-->
<!-- <md-select ng-disabled="true" required ng-model="relation.direction">--> <!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">--> <!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
<!-- {{ ("relation.search-direction." + direction) | translate}}--> <!-- <mat-label>Direction</mat-label>-->
<!-- </md-option>--> <!-- <mat-select formControlName="direction" name="direction">-->
<!-- </md-select>--> <!-- <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
<!-- </md-input-container>--> <!-- {{ ("relation.search-direction." + direction.value) | translate}}-->
<!-- <tb-relation-type-autocomplete ng-disabled="true" flex class="md-block"--> <!-- </mat-option>-->
<!-- the-form="editEntityForm"--> <!-- </mat-select>-->
<!-- ng-model="relation.relationType"--> <!-- <mat-error *ngIf="relation.get('direction').hasError('required')">-->
<!-- tb-required="true">--> <!-- Relation direction is required.-->
<!-- </tb-relation-type-autocomplete>--> <!-- </mat-error>-->
<!-- </div>--> <!-- </mat-form-field>-->
<!-- <div layout="row">--> <!-- <tb-relation-type-autocomplete-->
<!-- <tb-entity-select flex class="md-block"--> <!-- fxFlex class="mat-block"-->
<!-- the-form="editEntityForm"--> <!-- formControlName="relationType"-->
<!-- ng-disabled="true"--> <!-- required="true">-->
<!-- tb-required="true"--> <!-- </tb-relation-type-autocomplete>-->
<!-- 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 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>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="relations-list">--> <!-- </div>-->
<!-- <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>--> <!-- </div>-->
<!-- <div class="body" ng-show="vm.newRelations.length">--> <!-- <div class="relations-list">-->
<!-- <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.newRelations track by $index">--> <!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
<!-- <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px; margin-bottom: 3px;">--> <!-- <div class="body" [fxShow]="relations().length">-->
<!-- <div flex layout="column">--> <!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
<!-- <div layout="row">--> <!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
<!-- <md-input-container class="md-block" style="min-width: 100px;">--> <!-- <div fxFlex fxLayout="column">-->
<!-- <label>Direction</label>--> <!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <md-select name="direction" required ng-model="relation.direction">--> <!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
<!-- <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">--> <!-- <mat-label>Direction</mat-label>-->
<!-- {{ ("relation.search-direction." + direction) | translate}}--> <!-- <mat-select formControlName="direction" name="direction">-->
<!-- </md-option>--> <!-- <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
<!-- </md-select>--> <!-- {{ ("relation.search-direction." + direction.value) | translate}}-->
<!-- <div ng-messages="editEntityForm.direction.$error">--> <!-- </mat-option>-->
<!-- <div ng-message="required">Relation direction is required.</div>--> <!-- </mat-select>-->
<!-- </div>--> <!-- <mat-error *ngIf="relation.get('direction').hasError('required')">-->
<!-- </md-input-container>--> <!-- Relation direction is required.-->
<!-- <tb-relation-type-autocomplete flex class="md-block"--> <!-- </mat-error>-->
<!-- the-form="editEntityForm"--> <!-- </mat-form-field>-->
<!-- ng-model="relation.relationType"--> <!-- <tb-relation-type-autocomplete-->
<!-- tb-required="true">--> <!-- fxFlex class="mat-block"-->
<!-- </tb-relation-type-autocomplete>--> <!-- formControlName="relationType"-->
<!-- </div>--> <!-- [required]="true">-->
<!-- <div layout="row">--> <!-- </tb-relation-type-autocomplete>-->
<!-- <tb-entity-select flex class="md-block"--> <!-- </div>-->
<!-- the-form="editEntityForm"--> <!-- <div fxLayout="row" fxLayout.xs="column">-->
<!-- tb-required="true"--> <!-- <tb-entity-select-->
<!-- ng-model="relation.relatedEntity">--> <!-- fxFlex class="mat-block"-->
<!-- </tb-entity-select>--> <!-- [required]="true"-->
<!-- </div>--> <!-- formControlName="relatedEntity">-->
<!-- </div>--> <!-- </tb-entity-select>-->
<!-- <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>--> <!-- </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>-->
<!-- <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>-->
<!-- </div>--> <!-- </div>-->
<!-- </md-dialog-content>--> <!-- <div>-->
<!-- <md-dialog-actions>--> <!-- <button mat-raised-button color="primary"-->
<!-- <md-button type="submit" ng-disabled="editEntityForm.$invalid || !editEntityForm.$dirty" class="md-raised md-primary">Save</md-button>--> <!-- type="button"-->
<!-- <md-button ng-click="vm.cancel()" class="md-primary">Cancel</md-button>--> <!-- (click)="addRelation()"-->
<!-- </md-dialog-actions>--> <!-- matTooltip="Add Relation"-->
<!-- </form>--> <!-- matTooltipPosition="above">-->
<!--</md-dialog>--> <!-- 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 =========================--> <!--========================= Add entity example =========================-->
<!--========================================================================--> <!--========================================================================-->
<!----> <!---->
<!--<md-dialog aria-label="Add entity">--> <!--<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"-->
<!-- <form name="addEntityForm" class="add-entity-form" ng-submit="vm.save()">--> <!-- (ngSubmit)="save()" class="add-entity-form">-->
<!-- <md-toolbar>--> <!-- <mat-toolbar fxLayout="row" color="primary">-->
<!-- <div class="md-toolbar-tools">--> <!-- <h2>Add entity</h2>-->
<!-- <h2>Add entity</h2>--> <!-- <span fxFlex></span>-->
<!-- <span flex></span>--> <!-- <button mat-icon-button (click)="cancel()" type="button">-->
<!-- <md-button class="md-icon-button" ng-click="vm.cancel()">--> <!-- <mat-icon class="material-icons">close</mat-icon>-->
<!-- <ng-md-icon icon="close" aria-label="Close"></ng-md-icon>--> <!-- </button>-->
<!-- </md-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>--> <!-- </div>-->
<!-- </md-toolbar>--> <!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <md-dialog-content>--> <!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <div class="md-dialog-content">--> <!-- <mat-label>Address</mat-label>-->
<!-- <div layout="row">--> <!-- <input matInput formControlName="address">-->
<!-- <md-input-container flex class="md-block">--> <!-- </mat-form-field>-->
<!-- <label>Entity Name</label>--> <!-- <mat-form-field fxFlex class="mat-block">-->
<!-- <input ng-model="vm.entityName" name=entityName required>--> <!-- <mat-label>Owner</mat-label>-->
<!-- <div ng-messages="addEntityForm.entityName.$error">--> <!-- <input matInput formControlName="owner">-->
<!-- <div ng-message="required">Entity name is required.</div>--> <!-- </mat-form-field>-->
<!-- </div>--> <!-- </div>-->
<!-- </md-input-container>--> <!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <tb-entity-type-select class="md-block" style="min-width: 100px; width: 100px;"--> <!-- <mat-form-field fxFlex class="mat-block">-->
<!-- the-form="addEntityForm"--> <!-- <mat-label>Integer Value</mat-label>-->
<!-- tb-required="true"--> <!-- <input type="number" step="1" matInput formControlName="number">-->
<!-- allowed-entity-types="vm.allowedEntityTypes"--> <!-- <mat-error *ngIf="addEntityFormGroup.get('attributes').get('number').hasError('pattern')">-->
<!-- ng-model="vm.entityType">--> <!-- Invalid integer value.-->
<!-- </tb-entity-type-select>--> <!-- </mat-error>-->
<!-- <md-input-container flex class="md-block">--> <!-- </mat-form-field>-->
<!-- <label>Entity Subtype</label>--> <!-- <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
<!-- <input ng-model="vm.type" name=type required>--> <!-- <label class="checkbox-label">Boolean Value</label>-->
<!-- <div ng-messages="addEntityForm.type.$error">--> <!-- <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
<!-- <div ng-message="required">Entity subtype is required.</div>--> <!-- {{ (addEntityFormGroup.get('attributes').get('booleanValue').value ? "value.true" : "value.false") | translate }}-->
<!-- </div>--> <!-- </mat-checkbox>-->
<!-- </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>--> <!-- </div>-->
<!-- <div class="relations-list">--> <!-- </div>-->
<!-- <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>--> <!-- </div>-->
<!-- <div class="body" ng-show="vm.relations.length">--> <!-- <div class="relations-list">-->
<!-- <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.relations track by $index">--> <!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
<!-- <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px;">--> <!-- <div class="body" [fxShow]="relations().length">-->
<!-- <div flex layout="column">--> <!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
<!-- <div layout="row">--> <!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
<!-- <md-input-container class="md-block" style="min-width: 100px;">--> <!-- <div fxFlex fxLayout="column">-->
<!-- <label>Direction</label>--> <!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
<!-- <md-select name="direction" required ng-model="relation.direction">--> <!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
<!-- <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">--> <!-- <mat-label>Direction</mat-label>-->
<!-- {{ ("relation.search-direction." + direction) | translate}}--> <!-- <mat-select formControlName="direction" name="direction">-->
<!-- </md-option>--> <!-- <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
<!-- </md-select>--> <!-- {{ ("relation.search-direction." + direction.value) | translate}}-->
<!-- <div ng-messages="addEntityForm.direction.$error">--> <!-- </mat-option>-->
<!-- <div ng-message="required">Relation direction is required.</div>--> <!-- </mat-select>-->
<!-- </div>--> <!-- <mat-error *ngIf="relation.get('direction').hasError('required')">-->
<!-- </md-input-container>--> <!-- Relation direction is required.-->
<!-- <tb-relation-type-autocomplete flex class="md-block"--> <!-- </mat-error>-->
<!-- the-form="addEntityForm"--> <!-- </mat-form-field>-->
<!-- ng-model="relation.relationType"--> <!-- <tb-relation-type-autocomplete-->
<!-- tb-required="true">--> <!-- fxFlex class="mat-block"-->
<!-- </tb-relation-type-autocomplete>--> <!-- formControlName="relationType"-->
<!-- </div>--> <!-- [required]="true">-->
<!-- <div layout="row">--> <!-- </tb-relation-type-autocomplete>-->
<!-- <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 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>--> <!-- </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>-->
<!-- </div>--> <!-- </div>-->
<!-- </md-dialog-content>--> <!-- <div>-->
<!-- <md-dialog-actions>--> <!-- <button mat-raised-button color="primary"-->
<!-- <md-button type="submit" ng-disabled="addEntityForm.$invalid || !addEntityForm.$dirty" class="md-raised md-primary">Create</md-button>--> <!-- type="button"-->
<!-- <md-button ng-click="vm.cancel()" class="md-primary">Cancel</md-button>--> <!-- (click)="addRelation()"-->
<!-- </md-dialog-actions>--> <!-- matTooltip="Add Relation"-->
<!-- </form>--> <!-- matTooltipPosition="above">-->
<!--</md-dialog>--> <!-- 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 =====*/ /*===== There are three examples: for delete, edit and add entity =====*/
/*=======================================================================*/ /*=======================================================================*/
/*======================= Delete entity example =======================*/ /*======================= Delete entity example =======================*/
/*=======================================================================*/ /*=======================================================================*/
// //
//var $injector = widgetContext.$scope.$injector; //let $injector = widgetContext.$scope.$injector;
//var $mdDialog = $injector.get('$mdDialog'), //let dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));
// $document = $injector.get('$document'), //let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
// types = $injector.get('types'), //let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
// assetService = $injector.get('assetService'),
// deviceService = $injector.get('deviceService')
// $rootScope = $injector.get('$rootScope'),
// $q = $injector.get('$q');
// //
//openDeleteEntityDialog(); //openDeleteEntityDialog();
// //
//function openDeleteEntityDialog() { //function openDeleteEntityDialog() {
// var title = 'Delete ' + entityId.entityType // let title = 'Delete ' + entityId.entityType.toLowerCase() + ' ' +
// .toLowerCase() + ' ' + // entityName;
// entityName; // let content = 'Are you sure you want to delete the ' +
// var content = 'Are you sure you want to delete the ' + // entityId.entityType.toLowerCase() + ' ' + entityName + '?';
// entityId.entityType.toLowerCase() + ' ' + // dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(
// entityName + '?'; // function(result) {
// var confirm = $mdDialog.confirm() // if (result) {
// .targetEvent($event) // deleteEntity();
// .title(title) // }
// .htmlContent(content) // }
// .ariaLabel(title) // );
// .cancel('Cancel')
// .ok('Delete');
// $mdDialog.show(confirm).then(function() {
// deleteEntity();
// })
//} //}
// //
//function deleteEntity() { //function deleteEntity() {
// deleteEntityPromise(entityId).then( // deleteEntityObservable(entityId).subscribe(
// function success() { // function success() {
// updateAliasData(); // widgetContext.updateAliases();
// }, // },
// function fail() { // function fail() {
// showErrorDialog(); // showErrorDialog();
@ -85,228 +36,243 @@
// ); // );
//} //}
// //
//function deleteEntityPromise(entityId) { //function deleteEntityObservable(entityId) {
// if (entityId.entityType == types.entityType.asset) { // if (entityId.entityType == "ASSET") {
// return assetService.deleteAsset(entityId.id); // return assetService.deleteAsset(entityId.id);
// } else if (entityId.entityType == types.entityType.device) { // } else if (entityId.entityType == "DEVICE") {
// return deviceService.deleteDevice(entityId.id); // 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() { //function showErrorDialog() {
// var title = 'Error'; // let title = 'Error';
// var content = 'An error occurred while deleting the entity. Please try again.'; // let content = 'An error occurred while deleting the entity. Please try again.';
// var alert = $mdDialog.alert() // dialogs.alert(title, content, 'CLOSE').subscribe(
// .title(title) // function(result) {}
// .htmlContent(content) // );
// .ariaLabel(title)
// .parent(angular.element($document[0].body))
// .targetEvent($event)
// .multiple(true)
// .clickOutsideToClose(true)
// .ok('CLOSE');
// $mdDialog.show(alert);
//} //}
// //
/*=======================================================================*/ /*=======================================================================*/
/*======================== Edit entity example ========================*/ /*======================== Edit entity example ========================*/
/*=======================================================================*/ /*=======================================================================*/
// //
//var $injector = widgetContext.$scope.$injector; //let $injector = widgetContext.$scope.$injector;
//var $mdDialog = $injector.get('$mdDialog'), //let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
// $document = $injector.get('$document'), //let entityService = $injector.get(widgetContext.servicesMap.get('entityService'));
// $q = $injector.get('$q'), //let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
// types = $injector.get('types'), //let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
// $rootScope = $injector.get('$rootScope'), //let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
// entityService = $injector.get('entityService'), //let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));
// attributeService = $injector.get('attributeService'),
// entityRelationService = $injector.get('entityRelationService');
// //
//openEditEntityDialog(); //openEditEntityDialog();
// //
//function openEditEntityDialog() { //function openEditEntityDialog() {
// $mdDialog.show({ // customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();
// controller: ['$scope','$mdDialog', EditEntityDialogController],
// controllerAs: 'vm',
// template: htmlTemplate,
// locals: {
// entityId: entityId
// },
// parent: angular.element($document[0].body),
// targetEvent: $event,
// multiple: true,
// clickOutsideToClose: false
// });
//} //}
// //
//function EditEntityDialogController($scope,$mdDialog) { //function EditEntityDialogController(instance) {
// var vm = this; // let vm = instance;
// vm.entityId = entityId; //
// vm.entityName = entityName; // vm.entityName = entityName;
// vm.entityType = entityId.entityType; // vm.entityType = entityId.entityType;
// vm.allowedEntityTypes = [types.entityType.asset, types.entityType.device]; // vm.entitySearchDirection = {
// vm.allowedRelatedEntityTypes = []; // from: "FROM",
// vm.entitySearchDirection = types.entitySearchDirection; // to: "TO"
// };
// vm.attributes = {}; // vm.attributes = {};
// vm.serverAttributes = {}; // vm.oldRelationsData = [];
// vm.relations = [];
// vm.newRelations = [];
// vm.relationsToDelete = []; // 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(); // 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() { // vm.addRelation = function() {
// var relation = { // vm.relations().push(vm.fb.group({
// direction: null, // relatedEntity: [null, [vm.validators.required]],
// relationType: null, // relationType: [null, [vm.validators.required]],
// relatedEntity: null // direction: [null, [vm.validators.required]]
// }; // }));
// vm.newRelations.push(relation);
// $scope.editEntityForm.$setDirty();
// }; // };
//
// 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) { // vm.removeRelation = function(index) {
// if (index > -1) { // vm.relations().removeAt(index);
// vm.newRelations.splice(index, 1); // vm.relations().markAsDirty();
// $scope.editEntityForm.$setDirty();
// }
// }; // };
// vm.removeOldRelation = function(index, relation) { //
// if (index > -1) { // vm.removeOldRelation = function(index) {
// vm.relations.splice(index, 1); // vm.oldRelations().removeAt(index);
// vm.relationsToDelete.push(relation); // vm.relationsToDelete.push(vm.oldRelationsData[index]);
// $scope.editEntityForm.$setDirty(); // vm.oldRelations().markAsDirty();
// }
// }; // };
//
// vm.save = function() { // vm.save = function() {
// saveAttributes(); // vm.editEntityFormGroup.markAsPristine();
// saveRelations(); // widgetContext.rxjs.forkJoin([
// $scope.editEntityForm.$setPristine(); // saveAttributes(entityId),
// }; // saveRelations(entityId),
// vm.cancel = function() { // saveEntity()
// $mdDialog.hide(); // ]).subscribe(
// function () {
// widgetContext.updateAliases();
// vm.dialogRef.close(null);
// }
// );
// }; // };
// //
// function getEntityAttributes(attributes) { // function getEntityAttributes(attributes) {
// for (var i = 0; i < attributes.length; i++) { // 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) { // function getEntityRelations(relations) {
// var relationsFrom = relations[0]; // let relationsFrom = relations[0];
// var relationsTo = relations[1]; // let relationsTo = relations[1];
// for (var i=0; i < relationsFrom.length; i++) { // for (let i=0; i < relationsFrom.length; i++) {
// var relation = { // let relation = {
// direction: types.entitySearchDirection.from, // direction: 'FROM',
// relationType: relationsFrom[i].type, // relationType: relationsFrom[i].type,
// relatedEntity: relationsFrom[i].to // relatedEntity: relationsFrom[i].to
// }; // };
// vm.relations.push(relation); // vm.oldRelationsData.push(relation);
// addOldRelation();
// } // }
// for (var i=0; i < relationsTo.length; i++) { // for (let i=0; i < relationsTo.length; i++) {
// var relation = { // let relation = {
// direction: types.entitySearchDirection.to, // direction: 'TO',
// relationType: relationsTo[i].type, // relationType: relationsTo[i].type,
// relatedEntity: relationsTo[i].from // relatedEntity: relationsTo[i].from
// }; // };
// vm.relations.push(relation); // vm.oldRelationsData.push(relation);
// addOldRelation();
// } // }
// } // }
// //
// function getEntityInfo() { // function getEntityInfo() {
// entityService.getEntity(entityId.entityType, entityId.id).then( // entityService.getEntity(entityId.entityType, entityId.id).subscribe(function (entity) {
// function(entity) { // vm.entity = entity;
// vm.entity = entity; // widgetContext.rxjs.forkJoin([
// vm.type = vm.entity.type; // entityRelationService.findInfoByFrom(entityId),
// }); // entityRelationService.findInfoByTo(entityId),
// attributeService.getEntityAttributesValues(entityId.entityType, entityId.id, 'SERVER_SCOPE').then( // attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE')
// function(data){ // ]).subscribe(
// if (data.length) { // function (data) {
// getEntityAttributes(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() { // function saveEntity() {
// var attributesArray = []; // const formValues = vm.editEntityFormGroup.value;
// for (var key in vm.attributes) { // if (vm.entity.label !== formValues.entityLabel){
// if (vm.attributes[key] !== vm.serverAttributes[key]) { // vm.entity.label = formValues.entityLabel;
// attributesArray.push({key: key, value: vm.attributes[key]}); // 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) { // 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() { // function saveRelations(entityId) {
// var tasks = []; // let relations = vm.editEntityFormGroup.get('relations').value;
// for (var i=0; i < vm.newRelations.length; i++) { // let tasks = [];
// var relation = { // for(let i=0; i < relations.length; i++) {
// type: vm.newRelations[i].relationType // let relation = {
// type: relations[i].relationType,
// typeGroup: 'COMMON'
// }; // };
// if (vm.newRelations[i].direction == types.entitySearchDirection.from) { // if (relations[i].direction == 'FROM') {
// relation.to = vm.newRelations[i].relatedEntity; // relation.to = relations[i].relatedEntity;
// relation.from = entityId; // relation.from = entityId;
// } else { // } else {
// relation.to = entityId; // relation.to = entityId;
// relation.from = vm.newRelations[i].relatedEntity; // relation.from = relations[i].relatedEntity;
// } // }
// tasks.push(entityRelationService.saveRelation(relation)); // tasks.push(entityRelationService.saveRelation(relation));
// } // }
// for (var i=0; i < vm.relationsToDelete.length; i++) { // for (let i=0; i < vm.relationsToDelete.length; i++) {
// var relation = { // let relation = {
// type: vm.relationsToDelete[i].relationType // 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.to = vm.relationsToDelete[i].relatedEntity;
// relation.from = entityId; // relation.from = entityId;
// } else { // } else {
// relation.to = entityId; // relation.to = entityId;
// relation.from = vm.relationsToDelete[i].relatedEntity; // 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(){ // if (tasks.length > 0) {
// vm.relations = vm.relations.concat(vm.newRelations); // return widgetContext.rxjs.forkJoin(tasks);
// vm.newRelations = []; // } else {
// vm.relationsToDelete = []; // return widgetContext.rxjs.of([]);
// updateAliasData();
// });
// }
//
// 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);
// });
// } // }
//} //}
// //
@ -314,124 +280,132 @@
/*========================= Add entity example =========================*/ /*========================= Add entity example =========================*/
/*========================================================================*/ /*========================================================================*/
// //
//var $injector = widgetContext.$scope.$injector; //let $injector = widgetContext.$scope.$injector;
//var $mdDialog = $injector.get('$mdDialog'), //let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
// $document = $injector.get('$document'), //let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
// $q = $injector.get('$q'), //let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
// $rootScope = $injector.get('$rootScope'), //let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
// types = $injector.get('types'), //let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));
// assetService = $injector.get('assetService'),
// deviceService = $injector.get('deviceService'),
// attributeService = $injector.get('attributeService'),
// entityRelationService = $injector.get('entityRelationService');
// //
//openAddEntityDialog(); //openAddEntityDialog();
// //
//function openAddEntityDialog() { //function openAddEntityDialog() {
// $mdDialog.show({ // customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();
// controller: ['$scope','$mdDialog', AddEntityDialogController],
// controllerAs: 'vm',
// template: htmlTemplate,
// locals: {
// entityId: entityId
// },
// parent: angular.element($document[0].body),
// targetEvent: $event,
// multiple: true,
// clickOutsideToClose: false
// });
//} //}
// //
//function AddEntityDialogController($scope, $mdDialog) { //function AddEntityDialogController(instance) {
// var vm = this; // let vm = instance;
// vm.allowedEntityTypes = [types.entityType.asset, types.entityType.device]; //
// vm.allowedRelatedEntityTypes = []; // vm.allowedEntityTypes = ['ASSET', 'DEVICE'];
// vm.entitySearchDirection = types.entitySearchDirection; // vm.entitySearchDirection = {
// vm.attributes = {}; // from: "FROM",
// vm.relations = []; // 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() { // vm.addRelation = function() {
// var relation = { // vm.relations().push(vm.fb.group({
// direction: null, // relatedEntity: [null, [vm.validators.required]],
// relationType: null, // relationType: [null, [vm.validators.required]],
// relatedEntity: null // direction: [null, [vm.validators.required]]
// }; // }));
// vm.relations.push(relation);
// }; // };
//
// vm.removeRelation = function(index) { // vm.removeRelation = function(index) {
// if (index > -1) { // vm.relations().removeAt(index);
// vm.relations.splice(index, 1); // vm.relations().markAsDirty();
// }
// }; // };
//
// vm.save = function() { // vm.save = function() {
// $scope.addEntityForm.$setPristine(); // vm.addEntityFormGroup.markAsPristine();
// saveEntityPromise().then( // saveEntityObservable().subscribe(
// function (entity) { // function (entity) {
// saveAttributes(entity.id); // widgetContext.rxjs.forkJoin([
// saveRelations(entity.id); // saveAttributes(entity.id),
// $mdDialog.hide(); // saveRelations(entity.id)
// ]).subscribe(
// function () {
// widgetContext.updateAliases();
// vm.dialogRef.close(null);
// }
// );
// } // }
// ); // );
// }; // };
// vm.cancel = function() {
// $mdDialog.hide();
// };
// //
// // function saveEntityObservable() {
// function saveEntityPromise() { // const formValues = vm.addEntityFormGroup.value;
// var entity = { // let entity = {
// name: vm.entityName, // name: formValues.entityName,
// type: vm.type // type: formValues.type,
// label: formValues.entityLabel
// }; // };
// if (vm.entityType == types.entityType.asset) { // if (formValues.entityType == 'ASSET') {
// return assetService.saveAsset(entity); // return assetService.saveAsset(entity);
// } else if (vm.entityType == types.entityType.device) { // } else if (formValues.entityType == 'DEVICE') {
// return deviceService.saveDevice(entity); // return deviceService.saveDevice(entity);
// } // }
// } // }
// //
// function saveAttributes(entityId) { // function saveAttributes(entityId) {
// var attributesArray = []; // let attributes = vm.addEntityFormGroup.get('attributes').value;
// for (var key in vm.attributes) { // let attributesArray = [];
// attributesArray.push({key: key, value: vm.attributes[key]}); // for (let key in attributes) {
// if(attributes[key] !== null) {
// attributesArray.push({key: key, value: attributes[key]});
// }
// } // }
// if (attributesArray.length > 0) { // 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) { // function saveRelations(entityId) {
// var tasks = []; // let relations = vm.addEntityFormGroup.get('relations').value;
// for (var i=0; i < vm.relations.length; i++) { // let tasks = [];
// var relation = { // for(let i=0; i < relations.length; i++) {
// type: vm.relations[i].relationType // let relation = {
// type: relations[i].relationType,
// typeGroup: 'COMMON'
// }; // };
// if (vm.relations[i].direction == types.entitySearchDirection.from) { // if (relations[i].direction == 'FROM') {
// relation.to = vm.relations[i].relatedEntity; // relation.to = relations[i].relatedEntity;
// relation.from = entityId; // relation.from = entityId;
// } else { // } else {
// relation.to = entityId; // relation.to = entityId;
// relation.from = vm.relations[i].relatedEntity; // relation.from = relations[i].relatedEntity;
// } // }
// tasks.push(entityRelationService.saveRelation(relation)); // tasks.push(entityRelationService.saveRelation(relation));
// } // }
// $q.all(tasks).then(function(){ // if (tasks.length > 0) {
// updateAliasData(); // return widgetContext.rxjs.forkJoin(tasks);
// }); // } else {
// } // return widgetContext.rxjs.of([]);
//
// 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);
// });
// } // }
//} //}

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

Write Preview
Loading…
Cancel
Save