Viacheslav Klimov
1 year ago
GitHub
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,82 @@ |
|||
<!--========================================================================--> |
|||
<!--========================= Add entity example =========================--> |
|||
<!--========================================================================--> |
|||
|
|||
<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup" |
|||
(ngSubmit)="save()" style="width: 552px"> |
|||
<mat-toolbar class="flex flex-row" color="primary"> |
|||
<h2>Add entity</h2> |
|||
<span class="flex-1"></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 class="flex flex-col" style="padding-bottom: 0"> |
|||
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0"> |
|||
<mat-form-field class="mat-block flex-1" appearance="outline"> |
|||
<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 class="mat-block flex-1" appearance="outline"> |
|||
<mat-label>Entity Label</mat-label> |
|||
<input matInput formControlName="entityLabel" > |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0"> |
|||
<tb-entity-type-select |
|||
class="mat-block flex-1" |
|||
formControlName="entityType" |
|||
[showLabel]="true" |
|||
[appearance]="'outline'" |
|||
[allowedEntityTypes]="allowedEntityTypes" |
|||
></tb-entity-type-select> |
|||
<tb-entity-subtype-autocomplete |
|||
*ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'" |
|||
class="mat-block flex-1" |
|||
formControlName="type" |
|||
[required]="true" |
|||
[entityType]="'ASSET'" |
|||
[appearance]="'outline'" |
|||
></tb-entity-subtype-autocomplete> |
|||
<tb-entity-subtype-autocomplete |
|||
*ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'" |
|||
class="mat-block flex-1" |
|||
formControlName="type" |
|||
[required]="true" |
|||
[entityType]="'DEVICE'" |
|||
[appearance]="'outline'" |
|||
></tb-entity-subtype-autocomplete> |
|||
</div> |
|||
<div formGroupName="attributes" class="flex flex-col"> |
|||
<div class="flex flex-row gap-2 xs:flex-col xs:gap-0"> |
|||
<mat-form-field class="mat-block flex-1" appearance="outline"> |
|||
<mat-label>Address</mat-label> |
|||
<input matInput formControlName="address"> |
|||
</mat-form-field> |
|||
<mat-form-field class="mat-block flex-1" appearance="outline"> |
|||
<mat-label>Owner</mat-label> |
|||
<input matInput formControlName="owner"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div mat-dialog-actions class="flex flex-row items-center justify-end"> |
|||
<button mat-button color="primary" |
|||
type="button" |
|||
[disabled]="(isLoading$ | async)" |
|||
(click)="cancel()" cdkFocusInitial> |
|||
Cancel |
|||
</button> |
|||
<button mat-button mat-raised-button color="primary" |
|||
type="submit" |
|||
[disabled]="(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty"> |
|||
Create |
|||
</button> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,89 @@ |
|||
/*========================================================================*/ |
|||
/*========================= Add entity example =========================*/ |
|||
/*========================================================================*/ |
|||
|
|||
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')); |
|||
|
|||
openAddEntityDialog(); |
|||
|
|||
function openAddEntityDialog() { |
|||
customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe(); |
|||
} |
|||
|
|||
function AddEntityDialogController(instance) { |
|||
let vm = instance; |
|||
|
|||
vm.allowedEntityTypes = ['ASSET', 'DEVICE']; |
|||
|
|||
vm.addEntityFormGroup = vm.fb.group({ |
|||
entityName: ['', [vm.validators.required]], |
|||
entityType: ['DEVICE'], |
|||
entityLabel: [null], |
|||
type: ['', [vm.validators.required]], |
|||
attributes: vm.fb.group({ |
|||
address: [null], |
|||
owner: [null] |
|||
}) |
|||
}); |
|||
|
|||
vm.cancel = function() { |
|||
vm.dialogRef.close(null); |
|||
}; |
|||
|
|||
vm.save = function() { |
|||
vm.addEntityFormGroup.markAsPristine(); |
|||
saveEntityObservable().pipe( |
|||
widgetContext.rxjs.switchMap((entity) => saveAttributes(entity.id)) |
|||
).subscribe(() => { |
|||
widgetContext.updateAliases(); |
|||
vm.dialogRef.close(null); |
|||
}); |
|||
}; |
|||
|
|||
function saveEntityObservable() { |
|||
const formValues = vm.addEntityFormGroup.value; |
|||
let entity = { |
|||
name: formValues.entityName, |
|||
type: formValues.type, |
|||
label: formValues.entityLabel |
|||
}; |
|||
if (formValues.entityType == 'ASSET') { |
|||
return assetService.saveAsset(entity); |
|||
} else if (formValues.entityType == 'DEVICE') { |
|||
return deviceService.saveDevice(entity); |
|||
} |
|||
} |
|||
|
|||
function saveAttributes(entityId) { |
|||
let attributes = vm.addEntityFormGroup.get('attributes').value; |
|||
let attributesArray = getMapItemLocationAttributes(); |
|||
for (let key in attributes) { |
|||
if(attributes[key] !== null) { |
|||
attributesArray.push({key: key, value: attributes[key]}); |
|||
} |
|||
} |
|||
if (attributesArray.length > 0) { |
|||
return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray); |
|||
} |
|||
return widgetContext.rxjs.of([]); |
|||
} |
|||
|
|||
function getMapItemLocationAttributes() { |
|||
const attributes = []; |
|||
const mapItemType = $event.shape; |
|||
if (mapItemType === 'Marker') { |
|||
const mapType = widgetContext.mapInstance.type(); |
|||
attributes.push({key: mapType === 'image' ? 'xPos' : 'latitude', value: additionalParams.coordinates.x}); |
|||
attributes.push({key: mapType === 'image' ? 'yPos' : 'longitude', value: additionalParams.coordinates.y}); |
|||
} else if (mapItemType === 'Rectangle' || mapItemType === 'Polygon') { |
|||
attributes.push({key: 'perimeter', value: additionalParams.coordinates}); |
|||
} else if (mapItemType === 'Circle') { |
|||
attributes.push({key: 'circle', value: additionalParams.coordinates}); |
|||
} |
|||
return attributes; |
|||
} |
|||
} |
|||