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

UI: Timewindow style change, remove redundant

Browse Source
This commit is contained in:
Chantsova Ekaterina 2024-09-10 14:38:24 +03:00
parent 769d110c0a
commit 64bcffbb1d
6 changed files with 148 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-ngx/src/app/shared/components/time/timeinterval.component.scss
View File

@ -23,10 +23,6 @@
@media #{$mat-xs} { @media #{$mat-xs} {
min-width: 0; min-width: 0;
width: 100%; width: 100%;
.advanced-input {
gap: 12px;
}
} }
} }

281
ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
View File

@ -32,141 +32,126 @@
</tb-toggle-select> </tb-toggle-select>
</div> </div>
<div class="tb-timewindow-form-content tb-form-panel no-border"> <div class="tb-timewindow-form-content tb-form-panel no-border">
<ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME"> <section *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME"
<section formGroupName="realtime" class="tb-form-panel"> formGroupName="realtime" class="tb-form-panel">
<div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div> <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
{{ 'timewindow.hide-timewindow-section' | translate }} {{ 'timewindow.hide-timewindow-section' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</div>
<tb-toggle-select *ngIf="realtimeTypeSelectionAvailable" <tb-toggle-select *ngIf="realtimeTypeSelectionAvailable"
appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType"> appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
</tb-toggle-select> </tb-toggle-select>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<!-- <mat-slide-toggle *ngIf="!quickIntervalOnly"--> <div class="tb-form-row">
<!-- class="mat-slide fixed-title-width" formControlName="hideLastInterval">-->
<!-- {{ 'timewindow.hide-last-interval' | translate }}-->
<!-- </mat-slide-toggle>-->
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
{{ 'timewindow.disable-custom-interval' | translate }} {{ 'timewindow.disable-custom-interval' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div class="tb-form-row"> </div>
<mat-slide-toggle *ngIf="!quickIntervalOnly" <div class="tb-form-row">
class="mat-slide" formControlName="hideLastInterval"> <mat-slide-toggle *ngIf="!quickIntervalOnly"
{{ 'timewindow.hide' | translate }} class="mat-slide" formControlName="hideLastInterval">
</mat-slide-toggle> {{ 'timewindow.hide' | translate }}
<tb-timeinterval </mat-slide-toggle>
formControlName="timewindowMs" <tb-timeinterval
subscriptSizing="dynamic" formControlName="timewindowMs"
appearance="outline" subscriptSizing="dynamic"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value" appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && [disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
</tb-timeinterval> timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
</div> </tb-timeinterval>
</ng-container> </div>
</ng-container>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"> <div *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
<div class="tb-form-row"> class="tb-form-row">
<!-- <mat-slide-toggle *ngIf="!quickIntervalOnly"--> <mat-slide-toggle *ngIf="!quickIntervalOnly"
<!-- class="mat-slide fixed-title-width" formControlName="hideQuickInterval">--> class="mat-slide" formControlName="hideQuickInterval">
<mat-slide-toggle *ngIf="!quickIntervalOnly" {{ 'timewindow.hide' | translate }}
class="mat-slide" formControlName="hideQuickInterval"> </mat-slide-toggle>
{{ 'timewindow.hide' | translate }} <tb-quick-time-interval
<!-- {{ 'timewindow.hide-relative-interval' | translate }}--> displayLabel="false"
</mat-slide-toggle> formControlName="quickInterval"
<tb-quick-time-interval onlyCurrentInterval="true"
displayLabel="false" subscriptSizing="dynamic"
formControlName="quickInterval" appearance="outline"
onlyCurrentInterval="true" [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
subscriptSizing="dynamic" timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
appearance="outline" </tb-quick-time-interval>
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && </div>
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"> </section>
</tb-quick-time-interval>
</div>
</ng-container>
</section>
</ng-container>
<ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY"> <section *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY"
<section formGroupName="history" class="tb-form-panel"> formGroupName="history" class="tb-form-panel">
<div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div> <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
{{ 'timewindow.hide-timewindow-section' | translate }} {{ 'timewindow.hide-timewindow-section' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</div>
<tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType"> <tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
</tb-toggle-select> </tb-toggle-select>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
<!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideLastInterval">--> <div class="tb-form-row">
<!-- {{ 'timewindow.hide-last-interval' | translate }}-->
<!-- </mat-slide-toggle>-->
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
{{ 'timewindow.disable-custom-interval' | translate }} {{ 'timewindow.disable-custom-interval' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div class="tb-form-row"> </div>
<mat-slide-toggle class="mat-slide" formControlName="hideLastInterval"> <div class="tb-form-row">
{{ 'timewindow.hide' | translate }} <mat-slide-toggle class="mat-slide" formControlName="hideLastInterval">
</mat-slide-toggle> {{ 'timewindow.hide' | translate }}
<tb-timeinterval </mat-slide-toggle>
formControlName="timewindowMs" <tb-timeinterval
subscriptSizing="dynamic" formControlName="timewindowMs"
appearance="outline" subscriptSizing="dynamic"
[disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value" appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
</tb-timeinterval> timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
</div> </tb-timeinterval>
</ng-container> </div>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"> <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED" class="tb-form-row">
<div class="tb-form-row"> <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">
<!-- <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">--> {{ 'timewindow.hide' | translate }}
<mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval"> </mat-slide-toggle>
{{ 'timewindow.hide' | translate }} <tb-datetime-period
<!-- {{ 'timewindow.hide-fixed-interval' | translate }}--> formControlName="fixedTimewindow"
</mat-slide-toggle> subscriptSizing="dynamic"
<tb-datetime-period appearance="outline"
formControlName="fixedTimewindow" class="history-time-input"
subscriptSizing="dynamic" [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
appearance="outline" timewindowForm.get('history.historyType').value === historyTypes.FIXED">
class="history-time-input" </tb-datetime-period>
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && </div>
timewindowForm.get('history.historyType').value === historyTypes.FIXED">
</tb-datetime-period>
</div>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"> <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" class="tb-form-row">
<div class="tb-form-row"> <mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval">
<!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval">--> {{ 'timewindow.hide' | translate }}
<mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval"> </mat-slide-toggle>
{{ 'timewindow.hide' | translate }} <tb-quick-time-interval
<!-- {{ 'timewindow.hide-relative-interval' | translate }}--> displayLabel="false"
</mat-slide-toggle> formControlName="quickInterval"
<tb-quick-time-interval subscriptSizing="dynamic"
displayLabel="false" appearance="outline"
formControlName="quickInterval" [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
subscriptSizing="dynamic" timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
appearance="outline" </tb-quick-time-interval>
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && </div>
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"> </section>
</tb-quick-time-interval>
</div>
</ng-container>
</section>
</ng-container>
<ng-container *ngIf="aggregation"> <ng-container *ngIf="aggregation">
<section class="tb-form-panel"> <section class="tb-form-panel">
<div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div> <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
<div class="tb-form-row column-xs"> <div class="tb-form-row column-xs">
<!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggregation">-->
<mat-slide-toggle class="mat-slide" formControlName="hideAggregation"> <mat-slide-toggle class="mat-slide" formControlName="hideAggregation">
<!-- {{ 'timewindow.hide-aggregation' | translate }}-->
{{ 'timewindow.hide' | translate }} {{ 'timewindow.hide' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<ng-container formGroupName="aggregation"> <ng-container formGroupName="aggregation">
@ -185,9 +170,7 @@
*ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE"> *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
<div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div> <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
<div class="tb-form-row column-xs"> <div class="tb-form-row column-xs">
<!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">-->
<mat-slide-toggle class="mat-slide" formControlName="hideAggInterval"> <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
<!-- {{ 'timewindow.hide-max-values' | translate }}-->
{{ 'timewindow.hide' | translate }} {{ 'timewindow.hide' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<div formGroupName="aggregation" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"> <div formGroupName="aggregation" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center">
@ -208,49 +191,63 @@
<section class="tb-form-panel" [fxShow]="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE"> <section class="tb-form-panel" [fxShow]="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
<div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div> <div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">
{{ 'timewindow.hide-group-interval' | translate }} <ng-container *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME">
</mat-slide-toggle> <div class="tb-form-row" formGroupName="realtime">
<ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval"> {{ 'timewindow.disable-custom-interval' | translate }}
{{ 'timewindow.disable-custom-interval' | translate }} </mat-slide-toggle>
</mat-slide-toggle> </div>
<div class="tb-form-row"> <div class="tb-form-row column-xs">
<tb-timeinterval <ng-container formGroupName="realtime">
formControlName="interval" <ng-container *ngTemplateOutlet="hideAggInterval">
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()" </ng-container>
useCalendarIntervals <tb-timeinterval
subscriptSizing="dynamic" formControlName="interval"
appearance="outline" [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value"> useCalendarIntervals
</tb-timeinterval> subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value">
</tb-timeinterval>
</ng-container>
</div> </div>
</ng-container> </ng-container>
<ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY"> <ng-container *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval"> <div class="tb-form-row" formGroupName="history">
{{ 'timewindow.disable-custom-interval' | translate }} <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
</mat-slide-toggle> {{ 'timewindow.disable-custom-interval' | translate }}
<div class="tb-form-row"> </mat-slide-toggle>
<tb-timeinterval </div>
formControlName="interval" <div class="tb-form-row column-xs">
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()" <ng-container *ngTemplateOutlet="hideAggInterval">
useCalendarIntervals </ng-container>
subscriptSizing="dynamic" <ng-container formGroupName="history">
appearance="outline" <tb-timeinterval
[disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value"> formControlName="interval"
</tb-timeinterval> [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value">
</tb-timeinterval>
</ng-container>
</div> </div>
</ng-container> </ng-container>
<ng-template #hideAggInterval>
<mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
{{ 'timewindow.hide' | translate }}
</mat-slide-toggle>
</ng-template>
</section> </section>
</ng-container> </ng-container>
<section class="tb-form-panel"> <section class="tb-form-panel">
<div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div> <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
<div class="tb-form-row column-xs"> <div class="tb-form-row column-xs">
<!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideTimezone">-->
<mat-slide-toggle class="mat-slide" formControlName="hideTimezone"> <mat-slide-toggle class="mat-slide" formControlName="hideTimezone">
{{ 'timewindow.hide' | translate }} {{ 'timewindow.hide' | translate }}
<!-- {{ 'timewindow.hide-timezone' | translate }}-->
</mat-slide-toggle> </mat-slide-toggle>
<tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true" <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true"
formControlName="timezone" formControlName="timezone"

4
ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss
View File

@ -23,9 +23,7 @@
padding: 0; padding: 0;
} }
tb-timezone-select, tb-timezone-select {
tb-quick-time-interval,
tb-datetime-period {
flex: 1; flex: 1;
} }
} }

6
ui-ngx/src/app/shared/components/time/timewindow-form.scss
View File

@ -29,6 +29,12 @@
&-content { &-content {
overflow: auto; overflow: auto;
tb-timeinterval,
tb-quick-time-interval,
tb-datetime-period {
flex: 1;
}
} }
} }

6
ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
View File

@ -15,7 +15,7 @@
*/ */
:host { :host {
width: 500px; width: 450px;
.tb-timewindow-form { .tb-timewindow-form {
display: flex; display: flex;
@ -27,9 +27,7 @@
align-items: center; align-items: center;
} }
&-type-options, &-type-options {
tb-quick-time-interval,
tb-timeinterval{
flex: 1; flex: 1;
} }

7
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -5156,13 +5156,6 @@
"relative": "Relative", "relative": "Relative",
"range": "Range", "range": "Range",
"hide-timewindow-section": "Hide timewindow section from end-users", "hide-timewindow-section": "Hide timewindow section from end-users",
"hide-last-interval": "Hide last interval from end-users",
"hide-relative-interval": "Hide relative interval from end-users",
"hide-fixed-interval": "Hide fixed interval from end-users",
"hide-aggregation": "Hide aggregation from end-users",
"hide-group-interval": "Hide grouping interval from end-users",
"hide-max-values": "Hide max values from end-users",
"hide-timezone": "Hide timezone from end-users",
"disable-custom-interval": "Disable custom interval selection" "disable-custom-interval": "Disable custom interval selection"
}, },
"tooltip": { "tooltip": {