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

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

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

Write Preview
Loading…
Cancel
Save