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:26:03 +03:00
parent 408327b8da
commit 54941bbaf3
26 changed files with 141 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
View File

@ -15,12 +15,12 @@
limitations under the License. limitations under the License.
--> -->
<div *ngIf="show()" fxLayout="row" fxLayoutAlign="end end" style="height: 100%; padding: 0 16px;"> <div *ngIf="show()" class="flex flex-row justify-end items-end" style="height: 100%; padding: 0 16px;">
<button fxHide.lt-md mat-flat-button color="primary" (click)="sendNotification($event)"> <button class="lt-md:!hidden" mat-flat-button color="primary" (click)="sendNotification($event)">
<mat-icon>send</mat-icon> <mat-icon>send</mat-icon>
<span translate>notification.send-notification</span> <span translate>notification.send-notification</span>
</button> </button>
<button class="mat-elevation-z0" fxHide.gt-sm mat-mini-fab color="primary" (click)="sendNotification($event)"> <button class="mat-elevation-z0 gt-sm:!hidden" mat-mini-fab color="primary" (click)="sendNotification($event)">
<mat-icon>send</mat-icon> <mat-icon>send</mat-icon>
</button> </button>
</div> </div>

6
ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<section fxLayout="row" fxLayoutAlign="space-between center" style="margin: 0 10px 4px; min-height: 36px"> <section class="flex flex-row justify-between items-center" style="margin: 0 10px 4px; min-height: 36px">
<div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div> <div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
<button mat-button color="primary" <button mat-button color="primary"
*ngIf="(notifications$ | async).length" *ngIf="(notifications$ | async).length"
@ -37,8 +37,8 @@
</section> </section>
</div> </div>
<mat-divider *ngIf="(notifications$ | async).length"></mat-divider> <mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
<section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length"> <section class="flex justify-center items-center" *ngIf="(notifications$ | async).length">
<button fxFlex mat-button color="primary" (click)="viewAll($event)"> <button class="flex-1" mat-button color="primary" (click)="viewAll($event)">
{{ 'notification.view-all' | translate }} {{ 'notification.view-all' | translate }}
</button> </button>
</section> </section>

14
ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
View File

@ -17,7 +17,7 @@
--> -->
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2 translate>device-profile.add</h2> <h2 translate>device-profile.add</h2>
<span fxFlex></span> <span class="flex-1"></span>
<div [tb-help]="'deviceProfiles'"></div> <div [tb-help]="'deviceProfiles'"></div>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
@ -27,7 +27,7 @@
</mat-toolbar> </mat-toolbar>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
<div mat-dialog-content> <div mat-dialog-content>
<mat-horizontal-stepper [linear]="true" <mat-horizontal-stepper [linear]="true"
#addDeviceProfileStepper #addDeviceProfileStepper
@ -67,7 +67,7 @@
[ruleChainType]="edgeRuleChainType"> [ruleChainType]="edgeRuleChainType">
<span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span> <span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
</tb-rule-chain-autocomplete> </tb-rule-chain-autocomplete>
<mat-form-field fxHide class="mat-block"> <mat-form-field class="mat-block !hidden">
<mat-label translate>device-profile.type</mat-label> <mat-label translate>device-profile.type</mat-label>
<mat-select formControlName="type" required> <mat-select formControlName="type" required>
<mat-option *ngFor="let type of deviceProfileTypes" [value]="type"> <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@ -78,7 +78,7 @@
{{ 'device-profile.type-required' | translate }} {{ 'device-profile.type-required' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<tb-gallery-image-input fxFlex <tb-gallery-image-input class="flex-1"
label="{{'device-profile.image' | translate}}" label="{{'device-profile.image' | translate}}"
formControlName="image"> formControlName="image">
</tb-gallery-image-input> </tb-gallery-image-input>
@ -134,11 +134,11 @@
</mat-horizontal-stepper> </mat-horizontal-stepper>
</div> </div>
<div mat-dialog-actions style="padding: 0"> <div mat-dialog-actions style="padding: 0">
<div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutAlign="end center"> <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center">
<button mat-stroked-button *ngIf="selectedIndex > 0" <button mat-stroked-button *ngIf="selectedIndex > 0"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="previousStep()">{{ 'action.back' | translate }}</button> (click)="previousStep()">{{ 'action.back' | translate }}</button>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-stroked-button <button mat-stroked-button
color="primary" color="primary"
*ngIf="showNext" *ngIf="showNext"
@ -146,7 +146,7 @@
(click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button> (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
</div> </div>
<mat-divider style="width: 100%"></mat-divider> <mat-divider style="width: 100%"></mat-divider>
<div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end center"> <div class="dialog-actions-row flex-1 flex flex-row justify-end items-center gap-2">
<button mat-button <button mat-button
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="cancel()">{{ 'action.cancel' | translate }}</button> (click)="cancel()">{{ 'action.cancel' | translate }}</button>

14
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
View File

@ -15,8 +15,8 @@
limitations under the License. limitations under the License.
--> -->
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="alarmDurationPredicateValueFormGroup"> <div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
<div fxFlex fxLayout="column" [fxShow]="!dynamicMode"> <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode">
<mat-form-field class="mat-block" subscriptSizing="dynamic"> <mat-form-field class="mat-block" subscriptSizing="dynamic">
<input required type="number" matInput <input required type="number" matInput
step="1" min="1" max="2147483647" step="1" min="1" max="2147483647"
@ -36,9 +36,9 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex fxLayout="column" [fxShow]="dynamicMode"> <div class="flex-1 flex flex-col" [class.!hidden]="!dynamicMode">
<div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
<div fxFlex="40" fxLayout="column"> <div class="flex-full max-w-40% flex flex-col">
<mat-form-field class="mat-block" subscriptSizing="dynamic"> <mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}"> <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
<mat-option [value]="null"> <mat-option [value]="null">
@ -50,13 +50,13 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic"> <mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
<input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}"> <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngIf="inheritMode" <div *ngIf="inheritMode"
fxLayout="column" class="flex flex-col"
style="padding-top: 6px"> style="padding-top: 6px">
<mat-checkbox formControlName="inherit"> <mat-checkbox formControlName="inherit">
{{ 'filter.inherit-owner' | translate}} {{ 'filter.inherit-owner' | translate}}

16
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
View File

@ -15,21 +15,21 @@
limitations under the License. limitations under the License.
--> -->
<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm" style = "margin-bottom: 26px;" fxFlex> <mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm flex-1" style = "margin-bottom: 26px;">
<mat-expansion-panel-header> <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> <mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> <div class="flex-1 flex flex-row justify-start items-center">
{{'filter.dynamic-value' | translate}} {{'filter.dynamic-value' | translate}}
</div> </div>
</mat-panel-title> </mat-panel-title>
<span fxFlex></span> <span class="flex-1"></span>
</div> </div>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div class="flex flex-row justify-start items-center gap-2">
<div fxFlex="40" fxLayout="column"> <div class="flex-full max-w-40% flex flex-col">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}"> <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
<mat-option [value]="null"> <mat-option [value]="null">
@ -41,7 +41,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<mat-form-field class="mat-block source-attribute"> <mat-form-field class="mat-block source-attribute">
<input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}"> <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
</mat-form-field> </mat-form-field>

13
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;"> <form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2> <h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -29,7 +29,7 @@
</mat-progress-bar> </mat-progress-bar>
<div mat-dialog-content> <div mat-dialog-content>
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<tb-key-filter-list <tb-key-filter-list
[displayUserParameters]="false" [displayUserParameters]="false"
[allowUserDynamicSource]="false" [allowUserDynamicSource]="false"
@ -49,13 +49,14 @@
{{ 'device-profile.condition-type-required' | translate }} {{ 'device-profile.condition-type-required' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE"> <div class="flex flex-row xs:flex-col gt-xs:gap-4" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
<tb-alarm-duration-predicate-value <tb-alarm-duration-predicate-value
fxLayout="row" fxFlex formControlName="predicate" class="flex-1 flex flex-row"
formControlName="predicate"
[alarmConditionType]="conditionFormGroup.get('spec.type').value" [alarmConditionType]="conditionFormGroup.get('spec.type').value"
> >
</tb-alarm-duration-predicate-value> </tb-alarm-duration-predicate-value>
<div fxFlex="23" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION"> <div class="flex-full max-w-23%" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
<mat-form-field class="mat-block" subscriptSizing="dynamic"> <mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-select formControlName="unit" required <mat-select formControlName="unit" required
placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}"> placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
@ -73,7 +74,7 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

6
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
View File

@ -15,15 +15,15 @@
limitations under the License. limitations under the License.
--> -->
<div fxLayout="row" fxLayoutAlign="start center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;"> <div class="flex flex-row justify-start items-center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
<span class="tb-alarm-rule-condition title">{{('device-profile.condition' | translate) + ': '}}</span> <span class="tb-alarm-rule-condition title">{{('device-profile.condition' | translate) + ': '}}</span>
<div class="tb-alarm-rule-condition" fxFlex fxLayout="column" fxLayoutAlign="center"> <div class="tb-alarm-rule-condition flex-1 flex flex-col justify-center items-stretch">
<tb-filter-text formControlName="condition" <tb-filter-text formControlName="condition"
[nowrap]="true" [nowrap]="true"
required required
addFilterPrompt="{{'device-profile.enter-alarm-rule-condition-prompt' | translate}}"> addFilterPrompt="{{'device-profile.enter-alarm-rule-condition-prompt' | translate}}">
</tb-filter-text> </tb-filter-text>
<span *ngIf="specText" class="tb-alarm-rule-condition-spec" [ngClass]="{disabled: this.disabled}" [innerHTML]="specText"> <span *ngIf="specText" class="tb-alarm-rule-condition-spec" [class.disabled]="disabled" [innerHTML]="specText">
</span> </span>
</div> </div>
<button mat-icon-button <button mat-icon-button

7
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
View File

@ -15,12 +15,12 @@
limitations under the License. limitations under the License.
--> -->
<div fxLayout="column" [formGroup]="alarmRuleFormGroup"> <div class="flex flex-col" [formGroup]="alarmRuleFormGroup">
<tb-alarm-rule-condition formControlName="condition" [deviceProfileId]="deviceProfileId"> <tb-alarm-rule-condition formControlName="condition" [deviceProfileId]="deviceProfileId">
</tb-alarm-rule-condition> </tb-alarm-rule-condition>
<tb-alarm-schedule-info formControlName="schedule"> <tb-alarm-schedule-info formControlName="schedule">
</tb-alarm-schedule-info> </tb-alarm-schedule-info>
<div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" fxLayout="row" fxLayoutAlign="start center"> <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row justify-start items-center">
<span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)"> <span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
{{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }} {{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
</span> </span>
@ -35,8 +35,7 @@
<mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon> <mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
</button> </button>
</div> </div>
<div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" fxLayout="column" fxLayoutAlign="start start" <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col justify-start items-start gt-sm:flex-row gt-sm:items-center">
fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center">
<span class="tb-alarm-rule-dashboard title"> <span class="tb-alarm-rule-dashboard title">
{{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }} {{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
</span> </span>

4
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;"> <form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2> <h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -32,7 +32,7 @@
formControlName="alarmSchedule"> formControlName="alarmSchedule">
</tb-alarm-schedule> </tb-alarm-schedule>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

2
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<div fxLayout="row" fxLayoutAlign="start center" style="min-width: 0;"> <div class="flex flex-row justify-start items-center" style="min-width: 0;">
<span class="tb-alarm-rule-schedule title" (click)="openScheduleDialog($event)">{{('device-profile.schedule' | translate) + ': '}}</span> <span class="tb-alarm-rule-schedule title" (click)="openScheduleDialog($event)">{{('device-profile.schedule' | translate) + ': '}}</span>
<span class="tb-alarm-rule-schedule" (click)="openScheduleDialog($event)" <span class="tb-alarm-rule-schedule" (click)="openScheduleDialog($event)"
[innerHTML]="scheduleText"> [innerHTML]="scheduleText">

32
ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<section [formGroup]="alarmScheduleForm" fxLayout="column"> <section [formGroup]="alarmScheduleForm" class="flex flex-col">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}"> <mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}">
<mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType"> <mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType">
@ -35,13 +35,13 @@
<section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME"> <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
<tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value> <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div> <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
<div fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="8px"> <div class="flex flex-col gt-md:flex-row gap-2">
<div fxLayout="row" fxLayoutGap="8px"> <div class="flex flex-row gap-2">
<mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)"> <mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
{{ dayOfWeekTranslationsArray[day] | translate }} {{ dayOfWeekTranslationsArray[day] | translate }}
</mat-checkbox> </mat-checkbox>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px"> <div class="flex flex-row gap-2">
<mat-checkbox *ngFor="let day of secondRowDays" [formControl]="weeklyRepeatControl(day)"> <mat-checkbox *ngFor="let day of secondRowDays" [formControl]="weeklyRepeatControl(day)">
{{ dayOfWeekTranslationsArray[day] | translate }} {{ dayOfWeekTranslationsArray[day] | translate }}
</mat-checkbox> </mat-checkbox>
@ -50,22 +50,22 @@
<tb-error style="display: block;" [error]="alarmScheduleForm.get('daysOfWeek').hasError('dayOfWeeks') <tb-error style="display: block;" [error]="alarmScheduleForm.get('daysOfWeek').hasError('dayOfWeeks')
? ('device-profile.schedule-days-of-week-required' | translate) : ''"></tb-error> ? ('device-profile.schedule-days-of-week-required' | translate) : ''"></tb-error>
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div> <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="flex flex-row xs:flex-col gt-xs:gap-2">
<div fxLayout="row" fxLayoutGap="8px" fxFlex.gt-md> <div class="flex flex-row gap-2 gt-md:flex-1">
<mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md> <mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
<mat-label translate>device-profile.schedule-time-from</mat-label> <mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker"> <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md> <mat-form-field class="flex-1 sm:basis-37.5 sm:min-w-37.5 sm:max-w-37.5 md:basis-37.5 md:min-w-37.5 md:max-w-37.5">
<mat-label translate>device-profile.schedule-time-to</mat-label> <mat-label translate>device-profile.schedule-time-to</mat-label>
<mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker"> <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex fxLayoutAlign="center center" style="margin: auto"> <div class="flex-1 flex justify-center items-center" style="margin: auto">
<div style="text-align: center" <div style="text-align: center"
[innerHTML]="getSchedulerRangeText(alarmScheduleForm)"> [innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
</div> </div>
@ -75,26 +75,26 @@
<section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM"> <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
<tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value> <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value>
<div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div> <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
<div *ngFor="let day of allDays" fxLayout="column" formArrayName="items" fxLayoutGap="1em"> <div *ngFor="let day of allDays" class="flex flex-col gap-4" formArrayName="items">
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" [formGroupName]="''+day" fxLayoutAlign="start center" fxLayoutAlign.xs="center start"> <div class="flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start gap-2" [formGroupName]="''+day">
<mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, day)"> <mat-checkbox formControlName="enabled" class="flex-full max-w-17%" (change)="changeCustomScheduler($event, day)">
{{ dayOfWeekTranslationsArray[day] | translate }} {{ dayOfWeekTranslationsArray[day] | translate }}
</mat-checkbox> </mat-checkbox>
<div fxLayout="row" fxLayoutGap="8px" fxFlex> <div class="flex-1 flex flex-row gap-2">
<mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px"> <mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
<mat-label translate>device-profile.schedule-time-from</mat-label> <mat-label translate>device-profile.schedule-time-from</mat-label>
<mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
<input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker"> <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px"> <mat-form-field class="xs:flex-1 sm:flex-1 sm:basis-25 sm:min-w-25 sm:max-w-25 md:flex-1 md:basis-25 md:min-w-25 md:max-w-25">
<mat-label translate>device-profile.schedule-time-to</mat-label> <mat-label translate>device-profile.schedule-time-to</mat-label>
<mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle> <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
<input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker"> <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex fxLayoutAlign="center center" <div class="flex-1 flex justify-center items-center"
style="text-align: center" style="text-align: center"
[innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))"> [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
</div> </div>

12
ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
View File

@ -15,11 +15,11 @@
limitations under the License. limitations under the License.
--> -->
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index; <div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index;
last as isLast;" fxLayout="row" fxLayoutAlign="start center" last as isLast;" class="flex flex-row justify-start items-center gap-2"
fxLayoutGap="8px" style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl"> style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
<div class="create-alarm-rule" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start"> <div class="create-alarm-rule flex-1 flex flex-row justify-start items-stretch gap-2">
<mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker> <mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
<mat-label translate>alarm.severity</mat-label> <mat-label translate>alarm.severity</mat-label>
<mat-select formControlName="severity" <mat-select formControlName="severity"
@ -35,7 +35,7 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-divider vertical></mat-divider> <mat-divider vertical></mat-divider>
<tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required fxFlex> <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required class="flex-1">
</tb-alarm-rule> </tb-alarm-rule>
</div> </div>
<button *ngIf="!disabled" <button *ngIf="!disabled"
@ -48,7 +48,7 @@
</button> </button>
</div> </div>
<div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled"> <div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
<span translate fxLayoutAlign="center center" style="margin: 16px 0" <span translate class="flex justify-center items-center" style="margin: 16px 0"
class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span> class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
</div> </div>
<div *ngIf="!disabled"> <div *ngIf="!disabled">

30
ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
View File

@ -15,15 +15,15 @@
limitations under the License. limitations under the License.
--> -->
<mat-expansion-panel class="device-profile-alarm" fxFlex [formGroup]="alarmFormGroup" [(expanded)]="expanded"> <mat-expansion-panel class="device-profile-alarm flex-1" [formGroup]="alarmFormGroup" [(expanded)]="expanded">
<mat-expansion-panel-header> <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> <mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> <div class="flex-1 flex flex-row justify-start items-center">
{{ alarmTypeTitle }} {{ alarmTypeTitle }}
</div> </div>
</mat-panel-title> </mat-panel-title>
<span fxFlex></span> <span class="flex-1"></span>
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;" <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
type="button" type="button"
(click)="removeAlarm.emit()" (click)="removeAlarm.emit()"
@ -34,9 +34,9 @@
</div> </div>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxLayout="column" fxLayoutGap="0.5em"> <div class="flex flex-col gap-2">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-form-field fxFlex floatLabel="always"> <mat-form-field class="flex-1" floatLabel="always">
<mat-label>{{'device-profile.alarm-type' | translate}}</mat-label> <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
<input required matInput formControlName="alarmType" placeholder="Enter alarm type"> <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
<mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')"> <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
@ -53,7 +53,7 @@
<mat-expansion-panel class="advanced-settings" [expanded]="false"> <mat-expansion-panel class="advanced-settings" [expanded]="false">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<div fxFlex fxLayout="row" fxLayoutAlign="end center"> <div class="flex-1 flex flex-row justify-end items-center">
<div class="tb-small" translate>device-profile.advanced-settings</div> <div class="tb-small" translate>device-profile.advanced-settings</div>
</div> </div>
</mat-panel-title> </mat-panel-title>
@ -89,18 +89,18 @@
</mat-checkbox> </mat-checkbox>
</ng-template> </ng-template>
</mat-expansion-panel> </mat-expansion-panel>
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div> <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
<tb-create-alarm-rules formControlName="createRules" <tb-create-alarm-rules formControlName="createRules"
style="padding-bottom: 16px;" style="padding-bottom: 16px;"
[deviceProfileId]="deviceProfileId"> [deviceProfileId]="deviceProfileId">
</tb-create-alarm-rules> </tb-create-alarm-rules>
<div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div> <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
<div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center" <div class="flex flex-row justify-start items-center gap-2"
[fxShow]="alarmFormGroup.get('clearRule').value" [class.!hidden]="!alarmFormGroup.get('clearRule').value"
style="padding-bottom: 8px;"> style="padding-bottom: 8px;">
<div class="clear-alarm-rule" fxFlex fxLayout="row"> <div class="clear-alarm-rule flex-1 flex flex-row">
<tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId"> <tb-alarm-rule formControlName="clearRule" class="flex-1" [deviceProfileId]="deviceProfileId">
</tb-alarm-rule> </tb-alarm-rule>
</div> </div>
<button *ngIf="!disabled" <button *ngIf="!disabled"
@ -113,10 +113,10 @@
</button> </button>
</div> </div>
<div *ngIf="disabled && !alarmFormGroup.get('clearRule').value"> <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
<span translate fxLayoutAlign="center center" style="margin: 16px 0" <span translate style="margin: 16px 0"
class="tb-prompt">device-profile.no-clear-alarm-rule</span> class="tb-prompt flex justify-center items-center">device-profile.no-clear-alarm-rule</span>
</div> </div>
<div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value"> <div *ngIf="!disabled" [class.!hidden]="alarmFormGroup.get('clearRule').value">
<button mat-stroked-button color="primary" <button mat-stroked-button color="primary"
type="button" type="button"
(click)="addClearAlarmRule()" (click)="addClearAlarmRule()"

8
ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
View File

@ -15,11 +15,11 @@
limitations under the License. limitations under the License.
--> -->
<div fxLayout="column"> <div class="flex flex-col">
<div class="tb-device-profile-alarms"> <div class="tb-device-profile-alarms">
<div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm; <div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm;
let $index = index; last as isLast;" let $index = index; last as isLast;"
fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> class="flex flex-col" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<tb-device-profile-alarm [formControl]="alarmControl" <tb-device-profile-alarm [formControl]="alarmControl"
[expanded]="$index === 0" [expanded]="$index === 0"
[deviceProfileId]="deviceProfileId" [deviceProfileId]="deviceProfileId"
@ -28,8 +28,8 @@
</div> </div>
</div> </div>
<div *ngIf="!alarmsFormArray.controls.length"> <div *ngIf="!alarmsFormArray.controls.length">
<span translate fxLayoutAlign="center center" <span translate
class="tb-prompt">device-profile.no-alarm-rules</span> class="tb-prompt flex justify-center items-center">device-profile.no-alarm-rules</span>
</div> </div>
<div *ngIf="!disabled" style="padding-top: 16px;"> <div *ngIf="!disabled" style="padding-top: 16px;">
<button mat-raised-button color="primary" <button mat-raised-button color="primary"

6
ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;"> <form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2> <h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -29,7 +29,7 @@
</mat-progress-bar> </mat-progress-bar>
<div mat-dialog-content> <div mat-dialog-content>
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<textarea matInput formControlName="alarmDetails" rows="5" <textarea matInput formControlName="alarmDetails" rows="5"
placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea> placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea>
@ -38,7 +38,7 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

2
ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
View File

@ -25,7 +25,7 @@
(keydown)="assetProfileEnter($event)" (keydown)="assetProfileEnter($event)"
(keypress)="assetProfileEnter($event)" (keypress)="assetProfileEnter($event)"
[matAutocomplete]="assetProfileAutocomplete" [matAutocomplete]="assetProfileAutocomplete"
[fxShow]="!showDetailsPageLink || !useAssetProfileLink || !disabled || !selectAssetProfileFormGroup.get('assetProfile').value"> [class.!hidden]="showDetailsPageLink && useAssetProfileLink && disabled && selectAssetProfileFormGroup.get('assetProfile').value">
<a *ngIf="showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled" <a *ngIf="showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled"
aria-label="Open asset profile" [routerLink]=assetProfileURL> aria-label="Open asset profile" [routerLink]=assetProfileURL>
{{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }} {{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }}

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

@ -18,7 +18,7 @@
<form (ngSubmit)="save()" style="width: 600px;"> <form (ngSubmit)="save()" style="width: 600px;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2> <h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -36,7 +36,7 @@
[isEdit]="true"> [isEdit]="true">
</tb-asset-profile> </tb-asset-profile>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
cdkFocusInitial cdkFocusInitial

18
ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
View File

@ -15,43 +15,43 @@
limitations under the License. limitations under the License.
--> -->
<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone"> <div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')" (click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage"> [class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }} {{'common.open-details-page' | translate }}
</button> </button>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'export')" (click)="onEntityAction($event, 'export')"
[fxShow]="!isEdit"> [class.!hidden]="isEdit">
{{'asset-profile.export' | translate }} {{'asset-profile.export' | translate }}
</button> </button>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'setDefault')" (click)="onEntityAction($event, 'setDefault')"
[fxShow]="!isEdit && !entity?.default"> [class.!hidden]="isEdit || entity?.default">
{{'asset-profile.set-default' | translate }} {{'asset-profile.set-default' | translate }}
</button> </button>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')" (click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit"> [class.!hidden]="hideDelete() || isEdit">
{{'asset-profile.delete' | translate }} {{'asset-profile.delete' | translate }}
</button> </button>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<button mat-raised-button <button mat-raised-button
ngxClipboard ngxClipboard
(cbOnSuccess)="onAssetProfileIdCopied($event)" (cbOnSuccess)="onAssetProfileIdCopied($event)"
[cbContent]="entity?.id?.id" [cbContent]="entity?.id?.id"
[fxShow]="!isEdit"> [class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>asset-profile.copyId</span> <span translate>asset-profile.copyId</span>
</button> </button>
</div> </div>
</div> </div>
<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column"> <div [class.mat-padding]="!standalone" class="flex flex-col">
<form [formGroup]="entityForm"> <form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;"> <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
@ -83,7 +83,7 @@
[ruleChainType]="edgeRuleChainType"> [ruleChainType]="edgeRuleChainType">
<span tb-hint>{{'asset-profile.default-edge-rule-chain-hint' | translate}}</span> <span tb-hint>{{'asset-profile.default-edge-rule-chain-hint' | translate}}</span>
</tb-rule-chain-autocomplete> </tb-rule-chain-autocomplete>
<tb-gallery-image-input fxFlex <tb-gallery-image-input class="flex-1"
label="{{'asset-profile.image' | translate}}" label="{{'asset-profile.image' | translate}}"
formControlName="image"> formControlName="image">
</tb-gallery-image-input> </tb-gallery-image-input>

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

@ -25,7 +25,7 @@
(keydown)="deviceProfileEnter($event)" (keydown)="deviceProfileEnter($event)"
(keypress)="deviceProfileEnter($event)" (keypress)="deviceProfileEnter($event)"
[matAutocomplete]="deviceProfileAutocomplete" [matAutocomplete]="deviceProfileAutocomplete"
[fxShow]="!showDetailsPageLink || !useDeviceProfileLink || !disabled || !selectDeviceProfileFormGroup.get('deviceProfile').value"> [class.!hidden]="showDetailsPageLink && useDeviceProfileLink && disabled && selectDeviceProfileFormGroup.get('deviceProfile').value">
<a *ngIf="showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled" <a *ngIf="showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled"
aria-label="Open device profile" [routerLink]=deviceProfileURL> aria-label="Open device profile" [routerLink]=deviceProfileURL>
{{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }} {{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }}

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

@ -18,7 +18,7 @@
<form (ngSubmit)="save()" style="width: 1000px;"> <form (ngSubmit)="save()" style="width: 1000px;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2> <h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -36,7 +36,7 @@
[isEdit]="true"> [isEdit]="true">
</tb-device-profile> </tb-device-profile>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
cdkFocusInitial cdkFocusInitial

8
ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
View File

@ -35,7 +35,7 @@
<ng-container *ngTemplateOutlet="default"></ng-container> <ng-container *ngTemplateOutlet="default"></ng-container>
</ng-template> </ng-template>
<ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN"> <ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN">
<div fxFlex fxLayoutAlign="start center" class="tb-hint"> <div class="tb-hint flex-1 flex justify-start items-center">
<span [innerHTML]="'device-profile.provision-strategy-x509.certificate-chain-hint' | translate"></span> <span [innerHTML]="'device-profile.provision-strategy-x509.certificate-chain-hint' | translate"></span>
<span tb-help-popup="device-profile/x509-chain-hint" <span tb-help-popup="device-profile/x509-chain-hint"
tb-help-popup-placement="top" tb-help-popup-placement="top"
@ -69,8 +69,8 @@
</mat-form-field> </mat-form-field>
</ng-template> </ng-template>
<ng-template #default> <ng-template #default>
<section fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column"> <section class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>device-profile.provision-device-key</mat-label> <mat-label translate>device-profile.provision-device-key</mat-label>
<input matInput formControlName="provisionDeviceKey" required/> <input matInput formControlName="provisionDeviceKey" required/>
<button matSuffix mat-icon-button <button matSuffix mat-icon-button
@ -85,7 +85,7 @@
{{ 'device-profile.provision-device-key-required' | translate }} {{ 'device-profile.provision-device-key-required' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>device-profile.provision-device-secret</mat-label> <mat-label translate>device-profile.provision-device-secret</mat-label>
<input matInput formControlName="provisionDeviceSecret" required/> <input matInput formControlName="provisionDeviceSecret" required/>
<button matSuffix mat-icon-button <button matSuffix mat-icon-button

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

@ -15,43 +15,43 @@
limitations under the License. limitations under the License.
--> -->
<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone"> <div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')" (click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage"> [class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }} {{'common.open-details-page' | translate }}
</button> </button>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'export')" (click)="onEntityAction($event, 'export')"
[fxShow]="!isEdit"> [class.!hidden]="isEdit">
{{'device-profile.export' | translate }} {{'device-profile.export' | translate }}
</button> </button>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'setDefault')" (click)="onEntityAction($event, 'setDefault')"
[fxShow]="!isEdit && !entity?.default"> [class.!hidden]="isEdit || entity?.default">
{{'device-profile.set-default' | translate }} {{'device-profile.set-default' | translate }}
</button> </button>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')" (click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit"> [class.!hidden]="hideDelete() || isEdit">
{{'device-profile.delete' | translate }} {{'device-profile.delete' | translate }}
</button> </button>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<button mat-raised-button <button mat-raised-button
ngxClipboard ngxClipboard
(cbOnSuccess)="onDeviceProfileIdCopied($event)" (cbOnSuccess)="onDeviceProfileIdCopied($event)"
[cbContent]="entity?.id?.id" [cbContent]="entity?.id?.id"
[fxShow]="!isEdit"> [class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>device-profile.copyId</span> <span translate>device-profile.copyId</span>
</button> </button>
</div> </div>
</div> </div>
<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column"> <div [class.mat-padding]="!standalone" class="flex flex-col">
<form [formGroup]="entityForm"> <form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;"> <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
@ -97,7 +97,7 @@
[deviceProfileId]="deviceProfileId?.id" [deviceProfileId]="deviceProfileId?.id"
formControlName="softwareId"> formControlName="softwareId">
</tb-ota-package-autocomplete> </tb-ota-package-autocomplete>
<mat-form-field fxHide class="mat-block"> <mat-form-field class="mat-block !hidden">
<mat-label translate>device-profile.type</mat-label> <mat-label translate>device-profile.type</mat-label>
<mat-select formControlName="type" required> <mat-select formControlName="type" required>
<mat-option *ngFor="let type of deviceProfileTypes" [value]="type"> <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@ -108,7 +108,7 @@
{{ 'device-profile.type-required' | translate }} {{ 'device-profile.type-required' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<tb-gallery-image-input fxFlex <tb-gallery-image-input class="flex-1"
label="{{'device-profile.image' | translate}}" label="{{'device-profile.image' | translate}}"
formControlName="image"> formControlName="image">
</tb-gallery-image-input> </tb-gallery-image-input>

2
ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
View File

@ -25,7 +25,7 @@
(keydown)="tenantProfileEnter($event)" (keydown)="tenantProfileEnter($event)"
(keypress)="tenantProfileEnter($event)" (keypress)="tenantProfileEnter($event)"
[matAutocomplete]="tenantProfileAutocomplete" [matAutocomplete]="tenantProfileAutocomplete"
[fxShow]="!showDetailsPageLink || !disabled || !selectTenantProfileFormGroup.get('tenantProfile').value"> [class.!hidden]="showDetailsPageLink && disabled && selectTenantProfileFormGroup.get('tenantProfile').value">
<a *ngIf="showDetailsPageLink && selectTenantProfileFormGroup.get('tenantProfile').value && disabled" aria-label="Open tenant profile" [routerLink]=tenantProfileURL> <a *ngIf="showDetailsPageLink && selectTenantProfileFormGroup.get('tenantProfile').value && disabled" aria-label="Open tenant profile" [routerLink]=tenantProfileURL>
{{ displayTenantProfileFn(selectTenantProfileFormGroup.get('tenantProfile').value) }} {{ displayTenantProfileFn(selectTenantProfileFormGroup.get('tenantProfile').value) }}
</a> </a>

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

@ -18,7 +18,7 @@
<form (ngSubmit)="save()" style="width: 650px;"> <form (ngSubmit)="save()" style="width: 650px;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2> <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -36,7 +36,7 @@
[isEdit]="true"> [isEdit]="true">
</tb-tenant-profile> </tb-tenant-profile>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
cdkFocusInitial cdkFocusInitial

16
ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
View File

@ -15,37 +15,37 @@
limitations under the License. limitations under the License.
--> -->
<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone"> <div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')" (click)="onEntityAction($event, 'open')"
[fxShow]="!isEdit && !isDetailsPage"> [class.!hidden]="isEdit || isDetailsPage">
{{'common.open-details-page' | translate }} {{'common.open-details-page' | translate }}
</button> </button>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'setDefault')" (click)="onEntityAction($event, 'setDefault')"
[fxShow]="!isEdit && !entity?.default"> [class.!hidden]="isEdit || entity?.default">
{{'tenant-profile.set-default' | translate }} {{'tenant-profile.set-default' | translate }}
</button> </button>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')" (click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit"> [class.!hidden]="hideDelete() || isEdit">
{{'tenant-profile.delete' | translate }} {{'tenant-profile.delete' | translate }}
</button> </button>
<div fxLayout="row" fxLayout.xs="column"> <div class="flex flex-row xs:flex-col">
<button mat-raised-button <button mat-raised-button
ngxClipboard ngxClipboard
(cbOnSuccess)="onTenantProfileIdCopied($event)" (cbOnSuccess)="onTenantProfileIdCopied($event)"
[cbContent]="entity?.id?.id" [cbContent]="entity?.id?.id"
[fxShow]="!isEdit"> [class.!hidden]="isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>tenant-profile.copyId</span> <span translate>tenant-profile.copyId</span>
</button> </button>
</div> </div>
</div> </div>
<div class="mat-padding" fxLayout="column"> <div class="mat-padding flex flex-col">
<form [formGroup]="entityForm"> <form [formGroup]="entityForm">
<fieldset [disabled]="(isLoading$ | async) || !isEdit"> <fieldset [disabled]="(isLoading$ | async) || !isEdit">
<mat-form-field class="mat-block" appearance="fill"> <mat-form-field class="mat-block" appearance="fill">
@ -58,7 +58,7 @@
{{ 'tenant-profile.name-max-length' | translate }} {{ 'tenant-profile.name-max-length' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div fxLayout="column"> <div class="flex flex-col">
<mat-checkbox class="hinted-checkbox" formControlName="isolatedTbRuleEngine"> <mat-checkbox class="hinted-checkbox" formControlName="isolatedTbRuleEngine">
<div>{{ 'tenant.isolated-tb-rule-engine' | translate }}</div> <div>{{ 'tenant.isolated-tb-rule-engine' | translate }}</div>
<div class="tb-hint">{{'tenant.isolated-tb-rule-engine-details' | translate}}</div> <div class="tb-hint">{{'tenant.isolated-tb-rule-engine-details' | translate}}</div>

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

@ -61,18 +61,28 @@ module.exports = {
} }
}, },
extend: { extend: {
flexBasis: {
'25': '6.25rem',
'37.5': '9.375rem'
},
flex: { flex: {
full: '1 1 100%' full: '1 1 100%'
}, },
gap: { gap: {
'0.75': '0.1875rem' '0.75': '0.1875rem'
}, },
minWidth: {
'25': '6.25rem',
'37.5': '9.375rem'
},
maxWidth: { maxWidth: {
'5%': '5%', '5%': '5%',
'8%': '8%', '8%': '8%',
'10%': '10%', '10%': '10%',
'15%': '15%', '15%': '15%',
'17%': '17%',
'20%': '20%', '20%': '20%',
'23%': '23%',
'25%': '25%', '25%': '25%',
'30%': '30%', '30%': '30%',
'35%': '35%', '35%': '35%',
@ -103,7 +113,9 @@ module.exports = {
'7/12': '58.333333%', '7/12': '58.333333%',
'8/12': '66.666667%', '8/12': '66.666667%',
'10/12': '83.333333%', '10/12': '83.333333%',
'11/12': '91.666667%' '11/12': '91.666667%',
'25': '6.25rem',
'37.5': '9.375rem'
} }
}, },
}, },