tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Timewindow settings style change

pull/11633/head
Chantsova Ekaterina 2 years ago
parent
fdb9913625
commit
769d110c0a
2 changed files with 145 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 241
      ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
  2. 6
      ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss

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

@ -33,7 +33,7 @@
</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"> <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
<section formGroupName="realtime" class="tb-form-panel stroked"> <section 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>
<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 }}
@ -44,43 +44,54 @@
</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" <!-- <mat-slide-toggle *ngIf="!quickIntervalOnly"-->
class="mat-slide fixed-title-width" formControlName="hideLastInterval"> <!-- class="mat-slide fixed-title-width" formControlName="hideLastInterval">-->
{{ 'timewindow.hide-last-interval' | translate }} <!-- {{ 'timewindow.hide-last-interval' | translate }}-->
</mat-slide-toggle> <!-- </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>
<tb-timeinterval <div class="tb-form-row">
formControlName="timewindowMs" <mat-slide-toggle *ngIf="!quickIntervalOnly"
subscriptSizing="dynamic" class="mat-slide" formControlName="hideLastInterval">
appearance="outline" {{ 'timewindow.hide' | translate }}
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value" </mat-slide-toggle>
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && <tb-timeinterval
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
</tb-timeinterval> </tb-timeinterval>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"> <ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<mat-slide-toggle *ngIf="!quickIntervalOnly" <div class="tb-form-row">
class="mat-slide fixed-title-width" formControlName="hideQuickInterval"> <!-- <mat-slide-toggle *ngIf="!quickIntervalOnly"-->
{{ 'timewindow.hide-relative-interval' | translate }} <!-- class="mat-slide fixed-title-width" formControlName="hideQuickInterval">-->
</mat-slide-toggle> <mat-slide-toggle *ngIf="!quickIntervalOnly"
<tb-quick-time-interval class="mat-slide" formControlName="hideQuickInterval">
displayLabel="false" {{ 'timewindow.hide' | translate }}
formControlName="quickInterval" <!-- {{ 'timewindow.hide-relative-interval' | translate }}-->
onlyCurrentInterval="true" </mat-slide-toggle>
subscriptSizing="dynamic" <tb-quick-time-interval
appearance="outline" displayLabel="false"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && formControlName="quickInterval"
onlyCurrentInterval="true"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"> timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
</tb-quick-time-interval> </tb-quick-time-interval>
</div>
</ng-container> </ng-container>
</section> </section>
</ng-container> </ng-container>
<ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY"> <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
<section formGroupName="history" class="tb-form-panel stroked"> <section 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>
<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 }}
@ -90,78 +101,96 @@
</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"> <!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideLastInterval">-->
{{ 'timewindow.hide-last-interval' | translate }} <!-- {{ 'timewindow.hide-last-interval' | translate }}-->
</mat-slide-toggle> <!-- </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>
<tb-timeinterval <div class="tb-form-row">
formControlName="timewindowMs" <mat-slide-toggle class="mat-slide" formControlName="hideLastInterval">
subscriptSizing="dynamic" {{ 'timewindow.hide' | translate }}
appearance="outline" </mat-slide-toggle>
[disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value" <tb-timeinterval
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
</tb-timeinterval> </tb-timeinterval>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"> <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideFixedInterval"> <div class="tb-form-row">
{{ 'timewindow.hide-fixed-interval' | translate }} <!-- <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">-->
</mat-slide-toggle> <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">
<tb-datetime-period {{ 'timewindow.hide' | translate }}
formControlName="fixedTimewindow" <!-- {{ 'timewindow.hide-fixed-interval' | translate }}-->
subscriptSizing="dynamic" </mat-slide-toggle>
appearance="outline" <tb-datetime-period
class="history-time-input" formControlName="fixedTimewindow"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && subscriptSizing="dynamic"
appearance="outline"
class="history-time-input"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED"> timewindowForm.get('history.historyType').value === historyTypes.FIXED">
</tb-datetime-period> </tb-datetime-period>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"> <ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval"> <div class="tb-form-row">
{{ 'timewindow.hide-relative-interval' | translate }} <!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval">-->
</mat-slide-toggle> <mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval">
<tb-quick-time-interval {{ 'timewindow.hide' | translate }}
displayLabel="false" <!-- {{ 'timewindow.hide-relative-interval' | translate }}-->
formControlName="quickInterval" </mat-slide-toggle>
subscriptSizing="dynamic" <tb-quick-time-interval
appearance="outline" displayLabel="false"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && formControlName="quickInterval"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"> timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
</tb-quick-time-interval> </tb-quick-time-interval>
</div>
</ng-container> </ng-container>
</section> </section>
</ng-container> </ng-container>
<ng-container *ngIf="aggregation"> <ng-container *ngIf="aggregation">
<section class="tb-form-panel stroked"> <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>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggregation"> <div class="tb-form-row column-xs">
{{ 'timewindow.hide-aggregation' | translate }} <!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggregation">-->
</mat-slide-toggle> <mat-slide-toggle class="mat-slide" formControlName="hideAggregation">
<ng-container formGroupName="aggregation"> <!-- {{ 'timewindow.hide-aggregation' | translate }}-->
<mat-form-field subscriptSizing="dynamic" appearance="outline"> {{ 'timewindow.hide' | translate }}
<mat-select formControlName="type"> </mat-slide-toggle>
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> <ng-container formGroupName="aggregation">
{{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
</mat-option> <mat-select formControlName="type">
</mat-select> <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
</mat-form-field> {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
</ng-container> </mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</div>
</section> </section>
<section class="tb-form-panel stroked" <section class="tb-form-panel"
*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>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval"> <div class="tb-form-row column-xs">
{{ 'timewindow.hide-max-values' | translate }} <!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">-->
</mat-slide-toggle> <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
<div formGroupName="aggregation" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center" <!-- {{ 'timewindow.hide-max-values' | translate }}-->
fxLayout.xs="column" fxLayoutAlign.xs="stretch"> {{ 'timewindow.hide' | translate }}
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> </mat-slide-toggle>
<div formGroupName="aggregation" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center">
<mat-slider fxFlex <mat-slider fxFlex
min="{{minDatapointsLimit()}}" min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"> max="{{maxDatapointsLimit()}}">
@ -177,7 +206,7 @@
</div> </div>
</section> </section>
<section class="tb-form-panel stroked" [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"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">
{{ 'timewindow.hide-group-interval' | translate }} {{ 'timewindow.hide-group-interval' | translate }}
@ -186,42 +215,50 @@
<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>
<tb-timeinterval <div class="tb-form-row">
formControlName="interval" <tb-timeinterval
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()" formControlName="interval"
useCalendarIntervals [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
subscriptSizing="dynamic" useCalendarIntervals
appearance="outline" subscriptSizing="dynamic"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value"> appearance="outline"
</tb-timeinterval> [disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value">
</tb-timeinterval>
</div>
</ng-container> </ng-container>
<ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY"> <ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
<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>
<tb-timeinterval <div class="tb-form-row">
formControlName="interval" <tb-timeinterval
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()" formControlName="interval"
useCalendarIntervals [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
subscriptSizing="dynamic" useCalendarIntervals
appearance="outline" subscriptSizing="dynamic"
[disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value"> appearance="outline"
</tb-timeinterval> [disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value">
</tb-timeinterval>
</div>
</ng-container> </ng-container>
</section> </section>
</ng-container> </ng-container>
<section class="tb-form-panel stroked tb-flex"> <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>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideTimezone"> <div class="tb-form-row column-xs">
{{ 'timewindow.hide-timezone' | translate }} <!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideTimezone">-->
</mat-slide-toggle> <mat-slide-toggle class="mat-slide" formControlName="hideTimezone">
<tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true" {{ 'timewindow.hide' | translate }}
formControlName="timezone" <!-- {{ 'timewindow.hide-timezone' | translate }}-->
subscriptSizing="dynamic" </mat-slide-toggle>
appearance="outline" <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true"
displayLabel="false"> formControlName="timezone"
</tb-timezone-select> subscriptSizing="dynamic"
appearance="outline"
displayLabel="false">
</tb-timezone-select>
</div>
</section> </section>
</div> </div>
</form> </form>

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

@ -22,5 +22,11 @@
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
} }
tb-timezone-select,
tb-quick-time-interval,
tb-datetime-period {
flex: 1;
}
} }
} }

Write Preview
Loading…
Cancel
Save