From a1225636198de80f243c47b5de5ef6a73e25a1e5 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 25 Feb 2020 19:11:25 +0200 Subject: [PATCH] Propagate UI changes --- ui-ngx/src/app/core/services/utils.service.ts | 2 +- .../dashboard/dashboard.component.html | 9 +- .../widget/widget-config.component.html | 5 + .../widget/widget-config.component.ts | 2 + .../components/widget/widget.component.ts | 2 +- .../home/models/dashboard-component.models.ts | 3 + .../home/models/widget-component.models.ts | 1 + .../dashboard/dashboard-page.component.html | 1 + .../json-form/json-form.component.ts | 11 ++ .../json-form/react/json-form-array.tsx | 2 +- .../json-form/react/json-form-fieldset.tsx | 2 +- .../json-form/react/json-form-icon.tsx | 159 ++++++++++++++++++ .../json-form/react/json-form-schema-form.tsx | 17 +- .../json-form/react/json-form.models.ts | 5 + .../time/datetime-period.component.html | 8 +- .../time/timeinterval.component.html | 22 ++- .../time/timeinterval.component.scss | 5 + .../components/time/timeinterval.component.ts | 32 +++- .../time/timewindow-panel.component.html | 133 +++++++++------ .../time/timewindow-panel.component.scss | 5 + .../time/timewindow-panel.component.ts | 91 +++++++--- .../components/time/timewindow.component.html | 6 +- .../components/time/timewindow.component.ts | 37 +++- .../src/app/shared/models/time/time.models.ts | 17 +- ui-ngx/src/app/shared/models/widget.models.ts | 1 + 25 files changed, 470 insertions(+), 108 deletions(-) create mode 100644 ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx diff --git a/ui-ngx/src/app/core/services/utils.service.ts b/ui-ngx/src/app/core/services/utils.service.ts index ad45a1e858..24e2c81d03 100644 --- a/ui-ngx/src/app/core/services/utils.service.ts +++ b/ui-ngx/src/app/core/services/utils.service.ts @@ -395,7 +395,7 @@ export class UtilsService { } else if (variableName === 'deviceName') { label = label.split(variable).join(datasource.entityName); } else if (variableName === 'entityLabel') { - label = label.split(variable).join(datasource.entityLabel); + label = label.split(variable).join(datasource.entityLabel || datasource.entityName); } else if (variableName === 'aliasName') { label = label.split(variable).join(datasource.aliasName); } else if (variableName === 'entityDescription') { diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html index c5061d37a1..c7894281bc 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html @@ -82,14 +82,19 @@
TODO:
- + {{widget.titleIcon}} {{widget.title}} diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index aa9bb614bf..bedfa953a3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -32,6 +32,7 @@
widget-config.timewindow
@@ -307,6 +308,10 @@ widget-config.icon-size + + widget-config.title-tooltip + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts index 22e4597dd1..344f7cf02d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts @@ -173,6 +173,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont titleIcon: [null, []], iconColor: [null, []], iconSize: [null, []], + titleTooltip: [null, []], showTitle: [null, []], dropShadow: [null, []], enableFullscreen: [null, []], @@ -344,6 +345,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont titleIcon: isDefined(config.titleIcon) ? config.titleIcon : '', iconColor: isDefined(config.iconColor) ? config.iconColor : 'rgba(0, 0, 0, 0.87)', iconSize: isDefined(config.iconSize) ? config.iconSize : '24px', + titleTooltip: isDefined(config.titleTooltip) ? config.titleTooltip : '', showTitle: config.showTitle, dropShadow: isDefined(config.dropShadow) ? config.dropShadow : true, enableFullscreen: isDefined(config.enableFullscreen) ? config.enableFullscreen : true, diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index 95a77c2029..5ecf72ca2d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -1052,9 +1052,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI if (e.id) { const descriptors = this.getActionDescriptors('elementClick'); if (descriptors.length) { - $event.stopPropagation(); descriptors.forEach((descriptor) => { if (descriptor.name === e.id) { + $event.stopPropagation(); const entityInfo = this.getActiveEntityInfo(); const entityId = entityInfo ? entityInfo.entityId : null; const entityName = entityInfo ? entityInfo.entityName : null; diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index b1d9b832fd..102567ffef 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts @@ -295,6 +295,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { margin: string; title: string; + titleTooltip: string; showTitle: boolean; titleStyle: {[klass: string]: any}; @@ -360,6 +361,8 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { this.title = isDefined(this.widgetContext.widgetTitle) && this.widgetContext.widgetTitle.length ? this.widgetContext.widgetTitle : this.widget.config.title; + this.titleTooltip = isDefined(this.widgetContext.widgetTitleTooltip) + && this.widgetContext.widgetTitleTooltip.length ? this.widgetContext.widgetTitleTooltip : this.widget.config.titleTooltip; this.showTitle = isDefined(this.widget.config.showTitle) ? this.widget.config.showTitle : true; this.titleStyle = this.widget.config.titleStyle ? this.widget.config.titleStyle : {}; diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts index f76a6da9dc..165a1b4248 100644 --- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts @@ -178,6 +178,7 @@ export class WidgetContext { widgetTitleTemplate?: string; widgetTitle?: string; + widgetTitleTooltip?: string; customHeaderActions?: Array; widgetActions?: Array; diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html index 7513237824..20cfb91df2 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html @@ -55,6 +55,7 @@ void) { + this.dialogs.materialIconPicker(val).subscribe((icon) => { + if (icon && iconSelectedFn) { + iconSelectedFn(icon); + } + }); + } + private onToggleFullscreen(element: HTMLElement, fullscreenFinishFn?: () => void) { this.targetFullscreenElement = element; this.isFullscreen = !this.isFullscreen; diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx index 7cdc3cf9c7..a92eb103b5 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx @@ -143,7 +143,7 @@ class ThingsboardArray extends React.Component { const copy = this.copyWithIndex(form, i); return this.props.builder(copy, this.props.model, index, this.props.onChange, - this.props.onColorClick, this.props.onToggleFullscreen, this.props.mapper); + this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper); }); arrays.push(
  • diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx index f2aca21788..c15c526504 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx @@ -25,7 +25,7 @@ class ThingsboardFieldSet extends React.Component { return this.props.builder(form, this.props.model, index, this.props.onChange, - this.props.onColorClick, this.props.onToggleFullscreen, this.props.mapper); + this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper); }); return ( diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx new file mode 100644 index 0000000000..a8cfc498ab --- /dev/null +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx @@ -0,0 +1,159 @@ +/* + * Copyright © 2016-2020 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import ThingsboardBaseComponent from './json-form-base-component'; +import reactCSS from 'reactcss'; +import TextField from '@material-ui/core/TextField'; +import IconButton from '@material-ui/core/IconButton'; +import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; +import ClearIcon from '@material-ui/icons/Clear'; +import Icon from '@material-ui/core/Icon'; +import Tooltip from '@material-ui/core/Tooltip'; + +interface ThingsboardIconState extends JsonFormFieldState { + icon: string | null; + focused: boolean; +} + +class ThingsboardIcon extends React.Component { + + constructor(props) { + super(props); + this.onBlur = this.onBlur.bind(this); + this.onFocus = this.onFocus.bind(this); + this.onValueChanged = this.onValueChanged.bind(this); + this.onIconClick = this.onIconClick.bind(this); + this.onClear = this.onClear.bind(this); + const icon = props.value ? props.value : ''; + this.state = { + icon, + focused: false + }; + } + + onBlur() { + this.setState({focused: false}); + } + + onFocus() { + this.setState({focused: true}); + } + + componentDidMount() { + const node = ReactDOM.findDOMNode(this); + const iconContainer = $(node).children('#icon-container'); + iconContainer.click((event) => { + if (!this.props.form.readonly) { + this.onIconClick(event); + } + }); + } + + componentWillUnmount () { + const node = ReactDOM.findDOMNode(this); + const iconContainer = $(node).children('#icon-container'); + iconContainer.off( 'click' ); + } + + onValueChanged(value: string | null) { + const icon = value; + this.setState({ + icon: value + }); + this.props.onChange(this.props.form.key, value); + } + + onIconClick(event) { + this.props.onIconClick(this.props.form.key, this.state.icon, + (color) => { + this.onValueChanged(color); + } + ); + } + + onClear(event) { + if (event) { + event.stopPropagation(); + } + this.onValueChanged(''); + } + + render() { + + const styles = reactCSS({ + default: { + container: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center' + }, + icon: { + marginRight: '10px', + marginBottom: 'auto', + cursor: 'pointer', + border: 'solid 1px rgba(0, 0, 0, .27)', + borderRadius: '0' + }, + iconContainer: { + display: 'flex', + width: '100%' + }, + iconText: { + width: '100%' + }, + }, + }); + + let fieldClass = 'tb-field'; + if (this.props.form.required) { + fieldClass += ' tb-required'; + } + if (this.state.focused) { + fieldClass += ' tb-focused'; + } + + let pickedIcon = 'more_horiz'; + let icon = ''; + if (this.state.icon !== '') { + pickedIcon = this.state.icon; + icon = this.state.icon; + } + + return ( +
    +
    + + {pickedIcon} + + +
    + +
    + ); + } +} + +export default ThingsboardBaseComponent(ThingsboardIcon); diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx index 7125c9dadd..bee5e63a1a 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx @@ -32,7 +32,8 @@ import ThingsboardImage from './json-form-image'; import ThingsboardCheckbox from './json-form-checkbox'; import ThingsboardHelp from './json-form-help'; import ThingsboardFieldSet from './json-form-fieldset'; -import { JsonFormProps, JsonFormData, onChangeFn, OnColorClickFn } from './json-form.models'; +import ThingsboardIcon from './json-form-icon'; +import { JsonFormProps, JsonFormData, onChangeFn, OnColorClickFn, OnIconClickFn } from './json-form.models'; import _ from 'lodash'; import * as tinycolor_ from 'tinycolor2'; @@ -65,11 +66,13 @@ class ThingsboardSchemaForm extends React.Component { css: ThingsboardCss, color: ThingsboardColor, 'rc-select': ThingsboardRcSelect, - fieldset: ThingsboardFieldSet + fieldset: ThingsboardFieldSet, + icon: ThingsboardIcon }; this.onChange = this.onChange.bind(this); this.onColorClick = this.onColorClick.bind(this); + this.onIconClick = this.onIconClick.bind(this); this.onToggleFullscreen = this.onToggleFullscreen.bind(this); this.hasConditions = false; } @@ -86,6 +89,11 @@ class ThingsboardSchemaForm extends React.Component { this.props.onColorClick(key, val, colorSelectedFn); } + onIconClick(key: (string | number)[], val: string, + iconSelectedFn: (icon: string) => void) { + this.props.onIconClick(key, val, iconSelectedFn); + } + onToggleFullscreen(element: HTMLElement, fullscreenFinishFn?: () => void) { this.props.onToggleFullscreen(element, fullscreenFinishFn); } @@ -96,6 +104,7 @@ class ThingsboardSchemaForm extends React.Component { index: number, onChange: onChangeFn, onColorClick: OnColorClickFn, + onIconClick: OnIconClickFn, onToggleFullscreen: () => void, mapper: {[type: string]: any}): JSX.Element { const type = form.type; @@ -113,6 +122,7 @@ class ThingsboardSchemaForm extends React.Component { } return ; } @@ -124,7 +134,8 @@ class ThingsboardSchemaForm extends React.Component { mapper = _.merge(this.mapper, this.props.mapper); } const forms = merged.map(function(form, index) { - return this.builder(form, this.props.model, index, this.onChange, this.onColorClick, this.onToggleFullscreen, mapper); + return this.builder(form, this.props.model, index, this.onChange, this.onColorClick, + this.onIconClick, this.onToggleFullscreen, mapper); }.bind(this)); let formClass = 'SchemaForm'; diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form.models.ts b/ui-ngx/src/app/shared/components/json-form/react/json-form.models.ts index 65e924fa77..c6888685f3 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form.models.ts +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form.models.ts @@ -49,6 +49,8 @@ export interface DefaultsFormOptions { export type onChangeFn = (key: (string | number)[], val: any, forceUpdate?: boolean) => void; export type OnColorClickFn = (key: (string | number)[], val: tinycolor.ColorFormats.RGBA, colorSelectedFn: (color: tinycolor.ColorFormats.RGBA) => void) => void; +export type OnIconClickFn = (key: (string | number)[], val: string, + iconSelectedFn: (icon: string) => void) => void; export type onToggleFullscreenFn = (element: HTMLElement, fullscreenFinishFn?: () => void) => void; export interface JsonFormProps { @@ -61,6 +63,7 @@ export interface JsonFormProps { option: FormOption; onModelChange?: onChangeFn; onColorClick?: OnColorClickFn; + onIconClick?: OnIconClickFn; onToggleFullscreen?: onToggleFullscreenFn; mapper?: {[type: string]: any}; } @@ -107,6 +110,7 @@ export type ComponentBuilderFn = (form: JsonFormData, index: number, onChange: onChangeFn, onColorClick: OnColorClickFn, + onIconClick: OnIconClickFn, onToggleFullscreen: onToggleFullscreenFn, mapper: {[type: string]: any}) => JSX.Element; @@ -118,6 +122,7 @@ export interface JsonFormFieldProps { mapper?: {[type: string]: any}; onChange?: onChangeFn; onColorClick?: OnColorClickFn; + onIconClick?: OnIconClickFn; onChangeValidate?: (e: any, forceUpdate?: boolean) => void; onToggleFullscreen?: onToggleFullscreenFn; valid?: boolean; diff --git a/ui-ngx/src/app/shared/components/time/datetime-period.component.html b/ui-ngx/src/app/shared/components/time/datetime-period.component.html index 79baf0ab5c..cb72c7b0ad 100644 --- a/ui-ngx/src/app/shared/components/time/datetime-period.component.html +++ b/ui-ngx/src/app/shared/components/time/datetime-period.component.html @@ -21,13 +21,13 @@ datetime.date-from - + datetime.time-from - +
    @@ -35,13 +35,13 @@ datetime.date-to - + datetime.time-to - +
    diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.html b/ui-ngx/src/app/shared/components/time/timeinterval.component.html index 973a344a7c..d1d9a86887 100644 --- a/ui-ngx/src/app/shared/components/time/timeinterval.component.html +++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.html @@ -16,39 +16,43 @@ -->
    -
    +
    + + +
    +
    timeinterval.days - + timeinterval.hours - + timeinterval.minutes - + timeinterval.seconds - +
    -
    +
    {{ predefinedName }} - + {{ interval.name | translate:interval.translateParams }}
    -
    +
    - +
    diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.scss b/ui-ngx/src/app/shared/components/time/timeinterval.component.scss index 5c558083d1..fae58d8dc6 100644 --- a/ui-ngx/src/app/shared/components/time/timeinterval.component.scss +++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.scss @@ -24,6 +24,11 @@ margin: 5px 0; } + .hide-label { + margin-bottom: 5px; + margin-right: 5px; + } + .interval-section { min-height: 66px; .interval-label { diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts index 352d765f93..a377a1986e 100644 --- a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts +++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; import { ControlValueAccessor, FormControl, @@ -24,6 +24,7 @@ import { } from '@angular/forms'; import { Timewindow } from '@shared/models/time/time.models'; import { TimeInterval, TimeService } from '@core/services/time.service'; +import { coerceBooleanProperty } from '@angular/cdk/coercion'; @Component({ selector: 'tb-timeinterval', @@ -61,6 +62,31 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor { } @Input() predefinedName: string; + + isEditValue = false; + + @Input() + set isEdit(val) { + this.isEditValue = coerceBooleanProperty(val); + } + + get isEdit() { + return this.isEditValue; + } + + hideFlagValue = false; + + @Input() + get hideFlag() { + return this.hideFlagValue; + } + + set hideFlag(val) { + this.hideFlagValue = val; + } + + @Output() hideFlagChange = new EventEmitter(); + @Input() disabled: boolean; days = 0; @@ -189,6 +215,10 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor { this.updateView(); } + onHideFlagChange() { + this.hideFlagChange.emit(this.hideFlagValue); + } + onTimeInputChange(type: string) { switch (type) { case 'secs': diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html index 1cd5ce43d2..43aaacea71 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html @@ -23,6 +23,9 @@
    -
    - - -
    - +
    + + +
    +
    +
    + + +
    + -
    -     - -
    - timewindow.time-period - +
    +     + +
    + timewindow.time-period + -
    -     -     -
    + style="padding-top: 8px;"> +
    + + +
    +
    +
    - - aggregation.function - - - {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} - - - -
    - aggregation.limit - - - - - -
    +
    +
    + + +
    +
    + + aggregation.function + + + {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} + + + +
    +
    +
    +
    + + +
    +
    +
    + aggregation.limit + + + + + +
    +
    +
    @@ -99,6 +131,9 @@ timewindow.selectedTab === timewindowTypes.HISTORY" class="mat-content mat-padding" fxLayout="column"> diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss index cb98cbf2bd..f19a298aff 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss @@ -30,6 +30,11 @@ padding: 0 16px; } + .hide-label { + margin-bottom: 5px; + margin-right: 5px; + } + .limit-slider-container { >:first-child { margin-right: 16px; diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts index 9b60ac4293..ac0b22815e 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts @@ -48,6 +48,7 @@ export interface TimewindowPanelData { historyOnly: boolean; timewindow: Timewindow; aggregation: boolean; + isEdit: boolean; } @Component({ @@ -61,6 +62,8 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { aggregation = false; + isEdit = false; + timewindow: Timewindow; result: Timewindow; @@ -82,18 +85,19 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { protected store: Store, public fb: FormBuilder, private timeService: TimeService, - private translate: TranslateService, - private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe, - private datePipe: DatePipe, - private overlay: Overlay, public viewContainerRef: ViewContainerRef) { super(store); this.historyOnly = data.historyOnly; this.timewindow = data.timewindow; this.aggregation = data.aggregation; + this.isEdit = data.isEdit; } ngOnInit(): void { + const hideInterval = this.timewindow.hideInterval || false; + const hideAggregation = this.timewindow.hideAggregation || false; + const hideAggInterval = this.timewindow.hideAggInterval || false; + this.timewindowForm = this.fb.group({ realtime: this.fb.group( { @@ -109,42 +113,46 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { ), history: this.fb.group( { - historyType: [ - this.timewindow.history && typeof this.timewindow.history.historyType !== 'undefined' - ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL - ], - timewindowMs: [ - this.timewindow.history && typeof this.timewindow.history.timewindowMs !== 'undefined' - ? this.timewindow.history.timewindowMs : null - ], + historyType: this.fb.control({ + value: this.timewindow.history && typeof this.timewindow.history.historyType !== 'undefined' + ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL, + disabled: hideInterval + }), + timewindowMs: this.fb.control({ + value: this.timewindow.history && typeof this.timewindow.history.timewindowMs !== 'undefined' + ? this.timewindow.history.timewindowMs : null, + disabled: hideInterval + }), interval: [ this.timewindow.history && typeof this.timewindow.history.interval !== 'undefined' ? this.timewindow.history.interval : null ], - fixedTimewindow: [ - this.timewindow.history && typeof this.timewindow.history.fixedTimewindow !== 'undefined' - ? this.timewindow.history.fixedTimewindow : null - ] + fixedTimewindow: this.fb.control({ + value: this.timewindow.history && typeof this.timewindow.history.fixedTimewindow !== 'undefined' + ? this.timewindow.history.fixedTimewindow : null, + disabled: hideInterval + }) } ), aggregation: this.fb.group( { - type: [ - this.timewindow.aggregation && typeof this.timewindow.aggregation.type !== 'undefined' - ? this.timewindow.aggregation.type : null - ], - limit: [ - this.timewindow.aggregation && typeof this.timewindow.aggregation.limit !== 'undefined' + type: this.fb.control({ + value: this.timewindow.aggregation && typeof this.timewindow.aggregation.type !== 'undefined' + ? this.timewindow.aggregation.type : null, + disabled: hideAggregation + }), + limit: this.fb.control({ + value: this.timewindow.aggregation && typeof this.timewindow.aggregation.limit !== 'undefined' ? this.timewindow.aggregation.limit : null, - [Validators.min(this.minDatapointsLimit()), Validators.max(this.maxDatapointsLimit())] - ] + disabled: hideAggInterval + }, [Validators.min(this.minDatapointsLimit()), Validators.max(this.maxDatapointsLimit())]) } ) }); } update() { - const timewindowFormValue = this.timewindowForm.value; + const timewindowFormValue = this.timewindowForm.getRawValue(); this.timewindow.realtime = { timewindowMs: timewindowFormValue.realtime.timewindowMs, interval: timewindowFormValue.realtime.interval @@ -194,7 +202,7 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { } currentHistoryTimewindow() { - const timewindowFormValue = this.timewindowForm.value; + const timewindowFormValue = this.timewindowForm.getRawValue(); if (timewindowFormValue.history.historyType === HistoryWindowType.LAST_INTERVAL) { return timewindowFormValue.history.timewindowMs; } else { @@ -203,4 +211,35 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { } } + onHideIntervalChanged() { + if (this.timewindow.hideInterval) { + this.timewindowForm.get('history').get('historyType').disable({emitEvent: false}); + this.timewindowForm.get('history').get('timewindowMs').disable({emitEvent: false}); + this.timewindowForm.get('history').get('fixedTimewindow').disable({emitEvent: false}); + } else { + this.timewindowForm.get('history').get('historyType').enable({emitEvent: false}); + this.timewindowForm.get('history').get('timewindowMs').enable({emitEvent: false}); + this.timewindowForm.get('history').get('fixedTimewindow').enable({emitEvent: false}); + } + this.timewindowForm.markAsDirty(); + } + + onHideAggregationChanged() { + if (this.timewindow.hideAggregation) { + this.timewindowForm.get('aggregation').get('type').disable({emitEvent: false}); + } else { + this.timewindowForm.get('aggregation').get('type').enable({emitEvent: false}); + } + this.timewindowForm.markAsDirty(); + } + + onHideAggIntervalChanged() { + if (this.timewindow.hideAggInterval) { + this.timewindowForm.get('aggregation').get('limit').disable({emitEvent: false}); + } else { + this.timewindowForm.get('aggregation').get('limit').enable({emitEvent: false}); + } + this.timewindowForm.markAsDirty(); + } + } diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html index b6d3851dbf..e1f7e4ea1e 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html @@ -15,7 +15,7 @@ limitations under the License. --> -
    -