dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flex layout replacements. Switch to tailwind.css.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-11 18:57:23 +03:00
parent 2f5a42ff19
commit 116611393c
19 changed files with 120 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
View File

@ -19,7 +19,7 @@
<section formGroupName="coapDeviceTypeConfiguration">
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.coap-device-type</legend>
<div fxLayoutGap="8px" fxLayout="column">
<div class="flex flex-col gap-2">
<mat-form-field class="mat-block">
<mat-select formControlName="coapDeviceType" required>
<mat-option *ngFor="let type of coapTransportDeviceTypes" [value]="type">
@ -35,7 +35,7 @@
<div *ngIf="coapDeviceTypeDefault" formGroupName="transportPayloadTypeConfiguration">
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.coap-device-payload-type</legend>
<div fxLayoutGap="8px" fxLayout="column">
<div class="flex flex-col gap-2">
<mat-form-field class="mat-block">
<mat-select formControlName="transportPayloadType" required>
<mat-option *ngFor="let type of transportPayloadTypes" [value]="type">
@ -46,10 +46,10 @@
{{ 'device-profile.mqtt-payload-type-required' | translate }}
</mat-error>
</mat-form-field>
<div *ngIf="protoPayloadType" fxLayout="column">
<div *ngIf="protoPayloadType" class="flex flex-col">
<ng-container>
<tb-protobuf-content
fxFlex
class="flex-1"
formControlName="deviceTelemetryProtoSchema"
label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
[fillHeight]="true">
@ -60,7 +60,7 @@
</ng-container>
<ng-container>
<tb-protobuf-content
fxFlex
class="flex-1"
formControlName="deviceAttributesProtoSchema"
label="{{ 'device-profile.attributes-proto-schema' | translate }}"
[fillHeight]="true">
@ -71,7 +71,7 @@
</ng-container>
<ng-container>
<tb-protobuf-content
fxFlex
class="flex-1"
formControlName="deviceRpcRequestProtoSchema"
label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
[fillHeight]="true">
@ -82,7 +82,7 @@
</ng-container>
<ng-container>
<tb-protobuf-content
fxFlex
class="flex-1"
formControlName="deviceRpcResponseProtoSchema"
label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
[fillHeight]="true">

4
ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
View File

@ -16,7 +16,7 @@
-->
<section [formGroup]="parentForm">
<mat-form-field class="mat-block" fxFlex>
<mat-form-field class="mat-block flex-1">
<mat-label *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode" | translate }}</mat-label>
<mat-select formControlName="powerMode">
<mat-option [value]="null" *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode-type.default" | translate }}</mat-option>
@ -25,7 +25,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<section class="mat-block" fxFlex *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
<section class="mat-block flex-1" *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
<tb-time-unit-select [labelText]="'device-profile.edrx-cycle'"
[requiredText]="'device-profile.edrx-cycle-required'"
[patternText]="'device-profile.edrx-cycle-pattern'"

6
ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
View File

@ -15,8 +15,8 @@
limitations under the License.
-->
<section [formGroup]="timeUnitSelectFormGroup" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field class="mat-block" fxFlex>
<section [formGroup]="timeUnitSelectFormGroup" class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="mat-block flex-1">
<mat-label>{{ labelText | translate }}</mat-label>
<input matInput type="number" min="0" formControlName="time" required>
<mat-error *ngIf="timeUnitSelectFormGroup.get('time').hasError('required')">
@ -29,7 +29,7 @@
{{ (minText || patternText) | translate : {min: minTime/1000} }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex>
<mat-form-field class="mat-block flex-1">
<mat-label translate>device-profile.condition-duration-time-unit</mat-label>
<mat-select formControlName="unit">
<mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">

4
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
View File

@ -20,7 +20,7 @@
<h2>
{{ (readonly ? 'device-profile.lwm2m.view-attributes' : 'device-profile.lwm2m.edit-attributes') | translate : {name: name} }}
</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -35,7 +35,7 @@
formControlName="attributes">
</tb-lwm2m-attributes-key-list>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

27
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
View File

@ -15,17 +15,17 @@
limitations under the License.
-->
<section fxLayout="column" class="name-value-map" [formGroup]="attributesValueFormGroup">
<div fxLayout="row" fxLayoutGap="8px" style="max-height: 40px; margin-top: 8px;">
<label fxFlex="40" class="tb-title no-padding" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
<label fxFlex="60" class="tb-title no-padding" translate>device-profile.lwm2m.attribute-value</label>
<span [fxShow]="!disabled" style="width: 40px;"></span>
<section class="name-value-map flex flex-col" [formGroup]="attributesValueFormGroup">
<div class="flex flex-row gap-2" style="max-height: 40px; margin-top: 8px;">
<label class="tb-title no-padding flex-full max-w-40%" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
<label class="tb-title no-padding flex-full max-w-60%" translate>device-profile.lwm2m.attribute-value</label>
<span [class.!hidden]="disabled" style="width: 40px;"></span>
</div>
<div fxLayout="column" class="map-list"
<div class="map-list flex flex-col"
*ngFor="let nameValueControl of attributesValueFormArray().controls; let $index = index"
[formGroup]="nameValueControl">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field fxFlex="40">
<div class="flex flex-row justify-start items-center gap-2">
<mat-form-field class="flex-full max-w-40%">
<mat-select formControlName="name" required>
<mat-option *ngFor="let attributeName of attributeNames" [value]="attributeName"
[disabled]="isDisabledAttributeName(attributeName, $index)">
@ -36,13 +36,13 @@
{{ 'device-profile.lwm2m.attribute-name-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="60">
<mat-form-field class="flex-full max-w-60%">
<input formControlName="value" matInput required type="number"
placeholder="{{ 'key-val.value' | translate }}">
<mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('required')">
<mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('required')">
{{ 'device-profile.lwm2m.attribute-value-required' | translate }}
</mat-error>
<mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('min') ||
<mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('min') ||
nameValueControl.get('value').hasError('pattern')">
{{ 'device-profile.lwm2m.attribute-value-pattern' | translate }}
</mat-error>
@ -57,9 +57,8 @@
</button>
</div>
</div>
<div [fxShow]="!attributesValueFormArray().length"
fxLayoutAlign="center center"
class="map-list" translate>device-profile.lwm2m.no-attributes-set</div>
<div [class.!hidden]="attributesValueFormArray().length"
class="map-list flex justify-center items-center" translate>device-profile.lwm2m.no-attributes-set</div>
<div style="margin-top: 9px;" *ngIf="!disabled && isAddEnabled">
<button mat-stroked-button color="primary"
[disabled]="isLoading$ | async"

2
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div [fxHide]="disabled && isEmpty()" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
<div [class.!hidden]="disabled && isEmpty()" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
<button type="button"
[disabled]="isDisableBtn()"
mat-icon-button

12
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
View File

@ -16,17 +16,17 @@
-->
<form [formGroup]="addConfigServerFormGroup" style="width: 400px;">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar class="flex flex-row" color="primary">
<h2 translate>device-profile.lwm2m.add-new-server-title</h2>
<span fxFlex></span>
<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 fxLayout="column">
<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
<div mat-dialog-content class="flex flex-col">
<mat-form-field>
<mat-label>{{ 'device-profile.lwm2m.server-type' | translate }}</mat-label>
<mat-select formControlName="serverType">
@ -37,8 +37,8 @@
</mat-select>
</mat-form-field>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<div mat-dialog-actions class="flex flex-row">
<span class="flex-1"></span>
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

6
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div fxLayout="column">
<div class="flex flex-col">
<mat-accordion multi="true">
<div *ngFor="let serverConfig of serverConfigsFromArray.controls; trackBy: trackByParams; let $index = index;">
<tb-profile-lwm2m-device-config-server
@ -27,8 +27,8 @@
</div>
</mat-accordion>
<div *ngIf="!serverConfigsFromArray.controls.length" style="margin:32px 0">
<span translate fxLayoutAlign="center center"
class="tb-prompt">device-profile.lwm2m.no-config-servers</span>
<span translate
class="tb-prompt flex justify-center items-center">device-profile.lwm2m.no-config-servers</span>
</div>
<div *ngIf="!disabled" style="padding-top: 16px;">
<button mat-raised-button color="primary"

32
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
View File

@ -17,12 +17,12 @@
-->
<mat-expansion-panel [formGroup]="serverFormGroup" #serverPanel>
<mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
<mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
<div style="min-width:150px">{{ (serverFormGroup.get('bootstrapServerIs').value ?
'device-profile.lwm2m.bootstrap-server' : 'device-profile.lwm2m.lwm2m-server') | translate }}</div>
<div *ngIf="!serverPanel.expanded" fxLayout="row" style="font-size:14px" class="no-wrap">
<div *ngIf="!serverPanel.expanded" style="font-size:14px" class="no-wrap flex flex-row">
<div style="margin-left:32px">{{ ('device-profile.lwm2m.short-id' | translate) + ': ' }}
<span style="font-style: italic">{{ serverFormGroup.get('shortServerId').value }}</span>
</div>
@ -32,7 +32,7 @@
</div>
</div>
</mat-panel-title>
<span fxFlex="100"></span>
<span class="flex-full"></span>
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
type="button"
(click)="removeServer.emit($event)"
@ -44,8 +44,8 @@
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
<mat-form-field fxFlex>
<div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
<mat-form-field class="flex-1">
<mat-label>{{ 'device-profile.lwm2m.mode' | translate }}</mat-label>
<mat-select formControlName="securityMode">
<mat-option *ngFor="let securityMode of securityConfigLwM2MTypes"
@ -54,7 +54,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{ (isBootstrap ? 'device-profile.lwm2m.short-id-tooltip-bootstrap': 'device-profile.lwm2m.short-id-tooltip') | translate }}">help</mat-icon>
@ -71,15 +71,15 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
<mat-form-field fxFlex>
<div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
<mat-form-field class="flex-1">
<mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
<input matInput type="text" formControlName="host" required>
<mat-error *ngIf="serverFormGroup.get('host').hasError('required')">
{{ 'device-profile.lwm2m.server-host-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label>{{ 'device-profile.lwm2m.server-port' | translate }}</mat-label>
<input matInput type="number" formControlName="port" required min="0" max="65535" readonly>
<mat-error *ngIf="serverFormGroup.get('port').hasError('required')">
@ -94,8 +94,8 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
<mat-form-field fxFlex>
<div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
<mat-form-field class="flex-1">
<mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tooltip' | translate }}">help</mat-icon>
@ -108,7 +108,7 @@
{{ 'device-profile.lwm2m.client-hold-off-time-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label>{{ 'device-profile.lwm2m.account-after-timeout' | translate }}</mat-label>
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.account-after-timeout-tooltip' | translate }}">help</mat-icon>
@ -140,8 +140,8 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
<mat-form-field fxFlex>
<div class="flex flex-row xs:flex-col gap-2 xs:gap-0">
<mat-form-field class="flex-1">
<mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
<input matInput type="number" min="0" formControlName="lifetime" required>
<mat-error *ngIf="serverFormGroup.get('lifetime').hasError('required')">
@ -152,7 +152,7 @@
{{ 'device-profile.lwm2m.lifetime-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
<mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
matTooltip="{{'device-profile.lwm2m.default-min-period-tooltip' | translate }}">help</mat-icon>

12
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
View File

@ -33,7 +33,7 @@
</mat-tab>
<mat-tab label="{{ 'device-profile.lwm2m.bootstrap-tab' | translate }}">
<section [formGroup]="lwm2mDeviceProfileFormGroup">
<div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" fxLayout="row" fxLayoutAlign="start end">
<div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" class="flex flex-row justify-start items-end">
<mat-icon color="warn" class="material-icons" style="margin-right:8px;">warning</mat-icon>
<span style="font-weight:500">LwM2M transport was run without bootstrap server</span>
</div>
@ -53,7 +53,7 @@
<section formGroupName="clientLwM2mSettings">
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.lwm2m.fw-update</legend>
<mat-form-field class="mat-block" fxFlex>
<mat-form-field class="mat-block flex-1">
<mat-label>{{ 'device-profile.lwm2m.fw-update-strategy' | translate }}</mat-label>
<mat-select formControlName="fwUpdateStrategy">
<mat-option [value]=1>{{ 'device-profile.lwm2m.fw-update-strategy-package' | translate }}</mat-option>
@ -61,7 +61,7 @@
<mat-option [value]=3>{{ 'device-profile.lwm2m.fw-update-strategy-data' | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateStrategy').value === 2">
<mat-form-field class="mat-block flex-1" *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateStrategy').value === 2">
<mat-label>{{ 'device-profile.lwm2m.fw-update-resource' | translate }}</mat-label>
<input matInput formControlName="fwUpdateResource" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateResource').hasError('required')">
@ -71,14 +71,14 @@
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.lwm2m.sw-update</legend>
<mat-form-field class="mat-block" fxFlex>
<mat-form-field class="mat-block flex-1">
<mat-label>{{ 'device-profile.lwm2m.sw-update-strategy' | translate }}</mat-label>
<mat-select formControlName="swUpdateStrategy">
<mat-option [value]=1>{{ 'device-profile.lwm2m.sw-update-strategy-package' | translate }}</mat-option>
<mat-option [value]=2>{{ 'device-profile.lwm2m.sw-update-strategy-package-uri' | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateStrategy').value === 2">
<mat-form-field class="mat-block flex-1" *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateStrategy').value === 2">
<mat-label>{{ 'device-profile.lwm2m.sw-update-resource' | translate }}</mat-label>
<input matInput formControlName="swUpdateResource" required>
<mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateResource').hasError('required')">
@ -93,7 +93,7 @@
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.lwm2m.default-object-id</legend>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-select formControlName="defaultObjectIDVer">
<mat-option *ngFor="let objectIDVer of objectIDVers" [value]="objectIDVer">
{{ objectIDVerTranslationMap.get(objectIDVer) | translate }}

6
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
View File

@ -16,9 +16,9 @@
-->
<form [formGroup]="instancesFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar class="flex flex-row" color="primary">
<span style="font-weight: 500">{{data.objectName}}</span>&nbsp;#{{data.objectId}}
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -36,7 +36,7 @@
</tb-profile-lwm2m-object-add-instances-list>
</fieldset>
</div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<div mat-dialog-actions class="flex flex-row justify-end items-center">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

12
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
View File

@ -24,11 +24,11 @@
[expanded]="isExpend"
[disabled]="isExpend">
<mat-expansion-panel-header>
<mat-panel-title class="tb-panel" fxLayout="row">
<div fxFlex="30" fxLayoutAlign="start center">
<mat-panel-title class="tb-panel flex flex-row">
<div class="flex-full max-w-30% flex justify-start items-center">
<span class="tb-panel-title">{{ 'device-profile.lwm2m.instance' | translate }}</span>&nbsp;#{{instances.get('id').value}}
</div>
<div fxLayoutAlign="center center" fxFlex="10">
<div class="flex-full max-w-10% flex justify-center items-center">
<mat-checkbox color="warn"
[disabled]="this.disabled"
[checked]="getChecked(instances, 'attribute')"
@ -37,7 +37,7 @@
[indeterminate]="getIndeterminate(instances, 'attribute')">
</mat-checkbox>
</div>
<div fxLayoutAlign="center center" fxFlex="10">
<div class="flex-full max-w-10% flex justify-center items-center">
<mat-checkbox color="primary"
[disabled]="this.disabled"
[checked]="getChecked(instances, 'telemetry')"
@ -46,7 +46,7 @@
[indeterminate]="getIndeterminate(instances, 'telemetry')">
</mat-checkbox>
</div>
<div fxLayoutAlign="center center" fxFlex="10">
<div class="flex-full max-w-10% flex justify-center items-center">
<mat-checkbox color="primary"
[disabled]="disableObserve(instances)"
[checked]="getChecked(instances, 'observe')"
@ -55,7 +55,7 @@
[indeterminate]="getIndeterminate(instances, 'observe')">
</mat-checkbox>
</div>
<span fxFlex></span>
<span class="flex-1"></span>
<tb-profile-lwm2m-attributes
formControlName="attributes"
[isAttributeTelemetry]="disableObserveInstance(instances)"

28
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
View File

@ -16,53 +16,53 @@
-->
<section [formGroup]="resourcesFormGroup">
<div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="30">
<div class="flex flex-row justify-start items-center">
<div class="flex-full max-w-30%">
<mat-label translate>device-profile.lwm2m.resource-label</mat-label>
</div>
<div fxFlex="10" class="checkbox-column-title">
<div class="checkbox-column-title flex-full max-w-10%">
<mat-label translate>device-profile.lwm2m.attribute-label</mat-label>
</div>
<div fxFlex="10" class="checkbox-column-title">
<div class="checkbox-column-title flex-full max-w-10%">
<mat-label translate>device-profile.lwm2m.telemetry-label</mat-label>
</div>
<div fxFlex="10" class="checkbox-column-title">
<div class="checkbox-column-title flex-full max-w-10%">
<mat-label translate>device-profile.lwm2m.observe-label</mat-label>
</div>
<div fxFlex>
<div class="flex-1">
<mat-label translate>device-profile.lwm2m.key-name</mat-label>
</div>
</div>
<mat-divider></mat-divider>
<div formArrayName="resources"
*ngFor="let resourceLwM2M of resourcesFormArray.controls; let $index = index; trackBy: trackByParams">
<div [formGroupName]="$index" fxLayout="row" fxLayoutAlign="start center" class="resource-list">
<div class="resource-name" fxFlex="30">
<div [formGroupName]="$index" class="resource-list flex flex-row justify-start items-center">
<div class="resource-name flex-full max-w-30%">
#{{resourceLwM2M.get('id').value}} <span class="name">{{resourceLwM2M.get('name').value}}</span>
</div>
<div fxFlex="10" fxLayoutAlign="center center">
<div class="flex-full max-w-10% flex justify-center items-center">
<mat-checkbox formControlName="attribute" color="warn">
</mat-checkbox>
</div>
<div fxFlex="10" fxLayoutAlign="center center">
<div class="flex-full max-w-10% flex justify-center items-center">
<mat-checkbox formControlName="telemetry" color="primary">
</mat-checkbox>
</div>
<div fxFlex="10" fxLayoutAlign="center center">
<mat-checkbox fxFlex="10" formControlName="observe" color="primary"
<div class="flex-full max-w-10% flex justify-center items-center">
<mat-checkbox class="flex-full max-w-10%" formControlName="observe" color="primary"
matTooltip="{{ 'device-profile.lwm2m.edit-observe-select' | translate }}"
[matTooltipDisabled]="disabled || !isDisabledObserve($index)"
matTooltipPosition="above">
</mat-checkbox>
</div>
<mat-form-field fxFlex="33">
<mat-form-field class="flex-full max-w-33%">
<input matInput type="text" formControlName="keyName" required>
<mat-error *ngIf="resourceLwM2M.get('keyName').hasError('required') ||
resourceLwM2M.get('keyName').hasError('pattern')">
{{ 'device-profile.lwm2m.key-name-required' | translate }}
</mat-error>
</mat-form-field>
<span fxFlex></span>
<span class="flex-1"></span>
<tb-profile-lwm2m-attributes
formControlName="attributes"
[isAttributeTelemetry]="isDisabledObserve($index)"

4
ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
View File

@ -21,9 +21,9 @@
*ngFor="let objectLwM2M of modelsFormArray.controls; let $index = index; trackBy: trackByParams"
[formGroupName]="$index">
<mat-expansion-panel-header >
<mat-panel-title fxLayoutAlign="start center" >
<mat-panel-title class="flex justify-start items-center">
<span class="tb-panel-title">{{ objectLwM2M.get('name').value}}</span>&nbsp;#{{ objectLwM2M.get('keyId').value}}
<span fxFlex></span>
<span class="flex-1"></span>
<tb-profile-lwm2m-attributes
formControlName="attributes"
[modelName]="getNameObject(objectLwM2M.value)">

22
ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
View File

@ -34,9 +34,9 @@
<form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
<div fxLayoutGap="8px" fxLayout="column">
<div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
<mat-form-field fxFlex>
<div class="flex flex-col gap-2">
<div class="flex flex-row xs:flex-col gap-2">
<mat-form-field class="flex-1">
<mat-label translate>device-profile.telemetry-topic-filter</mat-label>
<input matInput required
formControlName="deviceTelemetryTopic"
@ -51,7 +51,7 @@
{{ 'device-profile.not-valid-multi-character' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label translate>device-profile.attributes-topic-filter</mat-label>
<input matInput required
formControlName="deviceAttributesTopic"
@ -66,7 +66,7 @@
{{ 'device-profile.not-valid-multi-character' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label translate>device-profile.attributes-subscribe-topic-filter</mat-label>
<input matInput required
formControlName="deviceAttributesSubscribeTopic"
@ -93,7 +93,7 @@
<section formGroupName="transportPayloadTypeConfiguration">
<fieldset class="fields-group">
<legend class="group-title" translate>device-profile.mqtt-device-payload-type</legend>
<div fxLayoutGap="8px" fxLayout="column">
<div class="flex flex-col gap-2">
<mat-form-field class="mat-block">
<mat-select formControlName="transportPayloadType" required>
<mat-option *ngFor="let type of transportPayloadTypes" [value]="type">
@ -116,10 +116,10 @@
<div class="tb-hint" innerHTML="{{ 'device-profile.mqtt-use-json-format-for-default-downlink-topics-hint' | translate }}"></div>
</div>
</div>
<div *ngIf="protoPayloadType" fxLayout="column">
<div *ngIf="protoPayloadType" class="flex flex-col">
<ng-container>
<tb-protobuf-content
fxFlex
class="flex-1"
formControlName="deviceTelemetryProtoSchema"
label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
[fillHeight]="true">
@ -130,7 +130,7 @@
</ng-container>
<ng-container>
<tb-protobuf-content
fxFlex
class="flex-1"
formControlName="deviceAttributesProtoSchema"
label="{{ 'device-profile.attributes-proto-schema' | translate }}"
[fillHeight]="true">
@ -141,7 +141,7 @@
</ng-container>
<ng-container>
<tb-protobuf-content
fxFlex
class="flex-1"
formControlName="deviceRpcRequestProtoSchema"
label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
[fillHeight]="true">
@ -152,7 +152,7 @@
</ng-container>
<ng-container>
<tb-protobuf-content
fxFlex
class="flex-1"
formControlName="deviceRpcResponseProtoSchema"
label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
[fillHeight]="true">

10
ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
View File

@ -15,10 +15,10 @@
limitations under the License.
-->
<div fxLayout="column">
<div class="flex flex-col">
<div *ngFor="let deviceProfileCommunication of communicationConfigFormArray.controls; let $index = index;
last as isLast;" fxLayout="row" fxLayoutAlign="start center"
fxLayoutGap="8px" class="scope-row" [formGroup]="deviceProfileCommunication">
last as isLast;"
class="scope-row flex flex-row justify-start items-center gap-2" [formGroup]="deviceProfileCommunication">
<div class="communication-config">
<mat-form-field class="spec mat-block" floatLabel="always" hideRequiredMarker>
<mat-label translate>device-profile.snmp.scope</mat-label>
@ -33,7 +33,7 @@
</mat-error>
</mat-form-field>
<mat-divider vertical></mat-divider>
<section fxFlex fxLayout="column">
<section class="flex-1 flex flex-col">
<mat-form-field *ngIf="isShowFrequency(deviceProfileCommunication.get('spec').value)">
<mat-label translate>device-profile.snmp.querying-frequency</mat-label>
<input matInput formControlName="queryingFrequencyMs" type="number" min="0" required/>
@ -59,7 +59,7 @@
</button>
</div>
<div *ngIf="!communicationConfigFormArray.controls.length && !disabled">
<span fxLayoutAlign="center center" class="tb-prompt required required-text" translate>device-profile.snmp.please-add-communication-config</span>
<span class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-communication-config</span>
</div>
<div *ngIf="!disabled && isAddEnabled">
<button mat-stroked-button color="primary"

28
ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
View File

@ -15,21 +15,21 @@
limitations under the License.
-->
<div fxFlex fxLayout="column" class="mapping-config">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="100">
<div fxFlex fxLayout="row" fxLayoutGap="8px">
<label fxFlex="26" class="tb-title no-padding" translate>device-profile.snmp.data-type</label>
<label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.data-key</label>
<label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.oid</label>
<span style="min-width: 40px" [fxShow]="!disabled"></span>
<div class="mapping-config flex-1 flex flex-col">
<div class="flex-full flex flex-row justify-start items-center gap-2">
<div class="flex-1 flex flex-row gap-2">
<label class="tb-title no-padding flex-full max-w-26%" translate>device-profile.snmp.data-type</label>
<label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.data-key</label>
<label class="tb-title tb-required no-padding flex-full max-w-37%" translate>device-profile.snmp.oid</label>
<span style="min-width: 40px" [class.!hidden]="disabled"></span>
</div>
</div>
<mat-divider></mat-divider>
<div *ngFor="let mappingConfig of mappingsConfigFormArray.controls; let $index = index;
last as isLast;" fxLayout="row" fxLayoutAlign="start center"
fxLayoutGap="8px" [formGroup]="mappingConfig" class="mapping-list">
<div class="tb-layout-fill" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
<mat-form-field fxFlex="26">
last as isLast;"
[formGroup]="mappingConfig" class="mapping-list flex flex-row justify-start items-center gap-2">
<div class="tb-layout-fill flex-1 flex flex-row justify-start items-stretch gap-2">
<mat-form-field class="flex-full max-w-26%">
<mat-select formControlName="dataType" required>
<mat-option *ngFor="let dataType of dataTypes" [value]="dataType">
{{ dataTypesTranslationMap.get(dataType) | translate }}
@ -39,13 +39,13 @@
{{ 'device-profile.snmp.data-type-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="37">
<mat-form-field class="flex-full max-w-37%">
<input matInput formControlName="key" required/>
<mat-error *ngIf="mappingConfig.get('key').hasError('required')">
{{ 'device-profile.snmp.data-key-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="37">
<mat-form-field class="flex-full max-w-37%">
<input matInput formControlName="oid" required/>
<mat-error *ngIf="mappingConfig.get('oid').hasError('required')">
{{ 'device-profile.snmp.oid-required' | translate }}
@ -65,7 +65,7 @@
</div>
</div>
<div *ngIf="!mappingsConfigFormArray.controls.length && !disabled">
<span fxLayoutAlign="center center" class="tb-prompt required required-text" translate>device-profile.snmp.please-add-mapping-config</span>
<span class="tb-prompt required required-text flex justify-center items-center" translate>device-profile.snmp.please-add-mapping-config</span>
</div>
<div *ngIf="!disabled">
<button mat-stroked-button color="primary"

6
ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
View File

@ -16,8 +16,8 @@
-->
<form [formGroup]="snmpDeviceProfileTransportConfigurationFormGroup" style="padding: 8px 0 16px;">
<section fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
<mat-form-field fxFlex>
<section class="flex flex-row xs:flex-col gap-2">
<mat-form-field class="flex-1">
<mat-label translate>device-profile.snmp.timeout-ms</mat-label>
<input matInput formControlName="timeoutMs" type="number" min="0" required/>
<mat-error *ngIf="snmpDeviceProfileTransportConfigurationFormGroup.get('timeoutMs').hasError('required')">
@ -28,7 +28,7 @@
{{ 'device-profile.snmp.timeout-ms-invalid-format' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label translate>device-profile.snmp.retries</mat-label>
<input matInput formControlName="retries" type="number" min="0" required/>
<mat-error *ngIf="snmpDeviceProfileTransportConfigurationFormGroup.get('retries').hasError('required')">

3
ui-ngx/tailwind.config.js
View File

@ -99,8 +99,11 @@ module.exports = {
'20%': '20%',
'23%': '23%',
'25%': '25%',
'26%': '26%',
'30%': '30%',
'33%': '33%',
'35%': '35%',
'37%': '37%',
'40%': '40%',
'45%': '45%',
'50%': '50%',