Vladyslav_Prykhodko
2 years ago
11 changed files with 288 additions and 69 deletions
@ -0,0 +1,87 @@ |
|||
#### HTML template of dialog to create a device or an asset |
|||
|
|||
```html |
|||
{:code-style="max-height: 400px;"} |
|||
<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> |
|||
{:copy-code} |
|||
``` |
|||
|
|||
<br> |
|||
<br> |
|||
@ -0,0 +1,94 @@ |
|||
#### Function displaying dialog to create a device or an asset |
|||
|
|||
```javascript |
|||
{:code-style="max-height: 400px;"} |
|||
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; |
|||
} |
|||
} |
|||
{:copy-code} |
|||
``` |
|||
|
|||
<br> |
|||
<br> |
|||
@ -0,0 +1,66 @@ |
|||
#### Place map item function |
|||
|
|||
<div class="divider"></div> |
|||
<br/> |
|||
|
|||
*function ($event, widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel): void* |
|||
|
|||
A JavaScript function triggered after a map item is placed. Optionally uses an HTML template to render dialog. |
|||
|
|||
**Parameters:** |
|||
|
|||
<ul style="width: 700px"> |
|||
<li><b>$event:</b> <code>{shape: <a href="https://github.com/geoman-io/leaflet-geoman/blob/6335a8c6cbebfcd06707d3c5da9d3d393cd2d942/leaflet-geoman.d.ts#L829" target="_blank">PM.SUPPORTED_SHAPES</a>; layer: <a href="https://leafletjs.com/reference.html#layer" target="_blank">L.Layer</a>}</code> - Event payload containing the created shape type and its associated map layer. |
|||
</li> |
|||
<li><b>widgetContext:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
|||
and data used by widget instance. |
|||
</li> |
|||
<li><b>entityId:</b> <code>string</code> - An optional string id of the target entity. |
|||
</li> |
|||
<li><b>entityName:</b> <code>string</code> - An optional string name of the target entity. |
|||
</li> |
|||
<li><b>htmlTemplate:</b> <code>string</code> - An optional HTML template string defined in <b>HTML</b> tab.<br/> Used to render custom dialog (see <b>Examples</b> for more details). |
|||
</li> |
|||
<li><b>additionalParams</b>: <code>{coordinates: Coordinates; layer: <a href="https://leafletjs.com/reference.html#layer" target="_blank">L.Layer</a>}</code>: |
|||
<ul> |
|||
<li><b>coordinates:</b> <code>Coordinates</code> - Represents geographical coordinates of the placed map item. The actual format of this parameter depends on the type of the selected map item: |
|||
<ul> |
|||
<li><b>Marker:</b> <code>{x: number; y: number}</code>, where <code>x</code> represents latitude, and <code>y</code> represents longitude.</li> |
|||
<li><b>Polygon, Rectangle:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/61254a68507c6def8c055b7b3ae70413c456a4ac/ui-ngx/src/app/shared/models/widget/maps/map.models.ts#L1099" target="_blank">TbPolygonRawCoordinates</a></code> contains an array of points defining the shape boundaries.</li> |
|||
<li><b>Circle:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/61254a68507c6def8c055b7b3ae70413c456a4ac/ui-ngx/src/app/shared/models/widget/maps/map.models.ts#L1104" target="_blank">TbCircleData</a></code> contains center coordinates and radius information.</li> |
|||
</ul> |
|||
Note: The coordinates will be automatically converted according to the selected map type. |
|||
</li> |
|||
<li><b>layer:</b> <code><a href="https://leafletjs.com/reference.html#layer" target="_blank">L.Layer</a></code> - The Leaflet map layer instance (e.g., marker, polygon, circle) associated with the placed map item. This object provides access to layer properties and methods defined in Leaflet's API. |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
<li><b>entityLabel:</b> <code>string</code> - An optional string label of the target entity. |
|||
</li> |
|||
</ul> |
|||
|
|||
<div class="divider"></div> |
|||
|
|||
##### Examples |
|||
|
|||
###### Display dialog to create a device or an asset |
|||
|
|||
<br> |
|||
|
|||
<div style="padding-left: 64px;" |
|||
tb-help-popup="widget/action/place_map_item/create_dialog_js" |
|||
tb-help-popup-placement="top" |
|||
[tb-help-popup-style]="{maxHeight: '50vh', maxWidth: '50vw'}" |
|||
trigger-style="font-size: 16px;" |
|||
trigger-text="JavaScript function"> |
|||
</div> |
|||
|
|||
<br> |
|||
|
|||
<div style="padding-left: 64px;" |
|||
tb-help-popup="widget/action/place_map_item/create_dialog_html" |
|||
tb-help-popup-placement="top" |
|||
[tb-help-popup-style]="{maxHeight: '50vh', maxWidth: '50vw'}" |
|||
trigger-style="font-size: 16px;" |
|||
trigger-text="HTML code"> |
|||
</div> |
|||
Loading…
Reference in new issue