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

Merge branch 'mircopz-feature/hide-timewindow-fields'

Browse Source
This commit is contained in:
Igor Kulikov 2019-08-16 12:52:47 +03:00
commit d94907c146
13 changed files with 132 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/app/api/time.service.js
View File

@ -235,6 +235,9 @@ function TimeService($translate, $http, $q, types) {
var timewindow = {
displayValue: "",
selectedTab: 0,
hideInterval: false,
hideAggregation: false,
hideAggInterval: false,
realtime: {
interval: SECOND,
timewindowMs: MINUTE // 1 min by default

3
ui/src/app/components/dashboard.tpl.html
View File

@ -56,7 +56,8 @@
<span ng-bind-html="vm.widgetTitleTooltip(widget)"></span>
</md-tooltip>
</span>
<tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
<tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" is-edit="vm.isEdit"
ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
</div>
<div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(widget)" tb-mousedown="$event.stopPropagation()"
ng-class="{'tb-widget-actions-absolute': !(vm.showWidgetTitlePanel(widget)&&(vm.hasWidgetTitleTemplate(widget)||vm.showWidgetTitle(widget)||vm.hasAggregation(widget)))}">

4
ui/src/app/components/timeinterval.directive.js
View File

@ -231,7 +231,9 @@ function Timeinterval($compile, $templateCache, timeService) {
required: '=ngRequired',
min: '=?',
max: '=?',
predefinedName: '=?'
predefinedName: '=?',
hideFlag: '=?',
isEdit: '=?'
},
link: linker
};

19
ui/src/app/components/timeinterval.tpl.html
View File

@ -16,7 +16,12 @@
-->
<section layout="row">
<section layout="column" flex ng-show="advanced">
<section layout="column" layout-align=" none" ng-show="isEdit">
<label class="tb-small advanced-label" translate>timewindow.hide</label>
<md-checkbox aria-label="{{ 'timewindow.hide' | translate }}" ng-model="hideFlag">
</md-checkbox>
</section>
<section layout="column" flex ng-show="advanced && (isEdit || !hideFlag)">
<label class="tb-small" translate>{{ predefinedName }}</label>
<section layout="row" layout-align="start start" flex>
<md-input-container>
@ -25,7 +30,7 @@
</md-input-container>
<md-input-container>
<label translate>timeinterval.hours</label>
<input type="number" ng-model="hours" step="1" aria-label="{{ 'timeinterval.hours' | translate }}">
<input ng-disabled="hideFlag" type="number" ng-model="hours" step="1" aria-label="{{ 'timeinterval.hours' | translate }}">
</md-input-container>
<md-input-container>
<label translate>timeinterval.minutes</label>
@ -33,23 +38,23 @@
</md-input-container>
<md-input-container>
<label translate>timeinterval.seconds</label>
<input type="number" ng-model="secs" step="1" aria-label="{{ 'timeinterval.seconds' | translate }}">
<input ng-disabled="hideFlag" type="number" ng-model="secs" step="1" aria-label="{{ 'timeinterval.seconds' | translate }}">
</md-input-container>
</section>
</section>
<section layout="row" flex ng-show="!advanced">
<section layout="row" flex ng-show="!advanced && (isEdit || !hideFlag)">
<md-input-container flex>
<label translate>{{ predefinedName }}</label>
<md-select ng-model="intervalMs" style="min-width: 150px;" aria-label="predefined-interval">
<md-select ng-disabled="hideFlag" ng-model="intervalMs" style="min-width: 150px;" aria-label="predefined-interval">
<md-option ng-repeat="interval in intervals" ng-value="interval.value">
{{interval.name}}
</md-option>
</md-select>
</md-input-container>
</section>
<section layout="column" layout-align="center center">
<section layout="column" layout-align="center center" ng-show="(isEdit || !hideFlag)">
<label class="tb-small advanced-label" translate>timeinterval.advanced</label>
<md-switch class="advanced-switch" ng-model="advanced" aria-label="predefined-switcher">
<md-switch ng-disabled="hideFlag" class="advanced-switch" ng-model="advanced" aria-label="predefined-switcher">
</md-switch>
</section>
</section>

3
ui/src/app/components/timewindow-panel.controller.js
View File

@ -14,7 +14,7 @@
* limitations under the License.
*/
/*@ngInject*/
export default function TimewindowPanelController(mdPanelRef, $scope, timeService, types, timewindow, historyOnly, aggregation, onTimewindowUpdate) {
export default function TimewindowPanelController(mdPanelRef, $scope, timeService, types, timewindow, historyOnly, aggregation, isEdit, onTimewindowUpdate) {
var vm = this;
@ -33,6 +33,7 @@ export default function TimewindowPanelController(mdPanelRef, $scope, timeServic
vm.maxHistoryAggInterval = maxHistoryAggInterval;
vm.minDatapointsLimit = minDatapointsLimit;
vm.maxDatapointsLimit = maxDatapointsLimit;
vm.isEdit = isEdit;
if (vm.historyOnly) {
vm.timewindow.selectedTab = 1;

126
ui/src/app/components/timewindow-panel.tpl.html
View File

@ -22,62 +22,92 @@
<md-tabs ng-class="{'tb-headless': vm.historyOnly}" md-dynamic-height md-selected="vm.timewindow.selectedTab" md-border-bottom>
<md-tab label="{{ 'timewindow.realtime' | translate }}">
<md-content class="md-padding" layout="column">
<tb-timeinterval predefined-name="'timewindow.last'"
ng-required="vm.timewindow.selectedTab === 0"
<tb-timeinterval hide-flag="vm.timewindow.hideInterval" predefined-name="'timewindow.last'"
is-edit="vm.isEdit" ng-required="vm.timewindow.selectedTab === 0"
ng-model="vm.timewindow.realtime.timewindowMs" style="padding-top: 8px;"></tb-timeinterval>
</md-content>
</md-tab>
<md-tab label="{{ 'timewindow.history' | translate }}">
<md-content class="md-padding" layout="column" style="padding-top: 8px;">
<md-radio-group ng-model="vm.timewindow.history.historyType" class="md-primary">
<md-radio-button ng-value=0 aria-label="{{ 'timewindow.last' | translate }}" class="md-primary md-align-top-left md-radio-interactive">
<section layout="column">
<tb-timeinterval predefined-name="'timewindow.last'"
ng-required="vm.timewindow.selectedTab === 1 && vm.timewindow.history.historyType === 0"
ng-show="vm.timewindow.history.historyType === 0"
ng-model="vm.timewindow.history.timewindowMs" style="padding-top: 8px;"></tb-timeinterval>
</section>
</md-radio-button>
<md-radio-button ng-value=1 aria-label="{{ 'timewindow.time-period' | translate }}" class="md-primary md-align-top-left md-radio-interactive">
<section layout="column">
<span translate>timewindow.time-period</span>
<tb-datetime-period
ng-required="vm.timewindow.selectedTab === 1 && vm.timewindow.history.historyType === 1"
ng-show="vm.timewindow.history.historyType === 1"
ng-model="vm.timewindow.history.fixedTimewindow" style="padding-top: 8px;"></tb-datetime-period>
</section>
</md-radio-button>
</md-radio-group>
</md-content>
<section layout="row">
<section layout="column" class="md-padding" style="padding-top: 8px;">
<label ng-if="vm.isEdit" class="tb-small advanced-label" translate>timewindow.hide</label>
<md-checkbox ng-if="vm.isEdit" aria-label="{{ 'timewindow.hide' | translate }}"
ng-model="vm.timewindow.hideInterval">
</md-checkbox>
</section>
<section layout="column" flex ng-show="vm.isEdit || !vm.timewindow.hideInterval">
<md-content class="md-padding" layout="column" style="padding-top: 8px;">
<md-radio-group ng-disabled="vm.timewindow.hideInterval" ng-model="vm.timewindow.history.historyType" class="md-primary">
<md-radio-button ng-value=0 aria-label="{{ 'timewindow.last' | translate }}" class="md-primary md-align-top-left md-radio-interactive">
<section layout="column">
<tb-timeinterval predefined-name="'timewindow.last'"
ng-required="vm.timewindow.selectedTab === 1 && vm.timewindow.history.historyType === 0"
ng-show="vm.timewindow.history.historyType === 0"
ng-model="vm.timewindow.history.timewindowMs" style="padding-top: 8px;"></tb-timeinterval>
</section>
</md-radio-button>
<md-radio-button ng-value=1 aria-label="{{ 'timewindow.time-period' | translate }}" class="md-primary md-align-top-left md-radio-interactive">
<section layout="column">
<span translate>timewindow.time-period</span>
<tb-datetime-period
ng-required="vm.timewindow.selectedTab === 1 && vm.timewindow.history.historyType === 1"
ng-show="vm.timewindow.history.historyType === 1"
ng-model="vm.timewindow.history.fixedTimewindow" style="padding-top: 8px;"></tb-datetime-period>
</section>
</md-radio-button>
</md-radio-group>
</md-content>
</section>
</section>
</md-tab>
</md-tabs>
<md-content ng-if="vm.aggregation" class="md-padding" layout="column">
<md-input-container>
<label translate>aggregation.function</label>
<md-select ng-model="vm.timewindow.aggregation.type" style="min-width: 150px;">
<md-option ng-repeat="type in vm.aggregationTypes" ng-value="type.value">
{{type.name | translate}}
</md-option>
</md-select>
</md-input-container>
<md-slider-container ng-if="vm.showLimit()">
<span translate>aggregation.limit</span>
<md-slider flex min="{{vm.minDatapointsLimit()}}" max="{{vm.maxDatapointsLimit()}}" step="1"
ng-model="vm.timewindow.aggregation.limit" aria-label="limit" id="limit-slider">
</md-slider>
<md-input-container style="max-width: 80px;">
<input flex type="number" step="1"
min="{{vm.minDatapointsLimit()}}" max="{{vm.maxDatapointsLimit()}}"
ng-model="vm.timewindow.aggregation.limit" aria-label="limit" aria-controls="limit-slider">
</md-input-container>
</md-slider-container>
<tb-timeinterval ng-if="vm.showRealtimeAggInterval()" min="vm.minRealtimeAggInterval()" max="vm.maxRealtimeAggInterval()"
predefined-name="'aggregation.group-interval'"
ng-model="vm.timewindow.realtime.interval">
<section layout="row">
<section layout="column" style="padding-top: 5px;" ng-show="vm.isEdit">
<label class="tb-small advanced-label" translate>timewindow.hide</label>
<md-checkbox aria-label="{{ 'timewindow.hide' | translate }}"
ng-model="vm.timewindow.hideAggregation">
</md-checkbox>
</section>
<section layout="column" flex ng-show="vm.isEdit || !vm.timewindow.hideAggregation">
<md-input-container>
<label translate>aggregation.function</label>
<md-select ng-disabled="vm.timewindow.hideAggregation" ng-model="vm.timewindow.aggregation.type" style="min-width: 150px;">
<md-option ng-repeat="type in vm.aggregationTypes" ng-value="type.value">
{{type.name | translate}}
</md-option>
</md-select>
</md-input-container>
</section>
</section>
<section layout="row" ng-show="vm.showLimit()">
<section layout="column" style="padding-top: 5px;" ng-show="vm.showLimit() && vm.isEdit">
<label class="tb-small advanced-label" translate>timewindow.hide</label>
<md-checkbox aria-label="{{ 'timewindow.hide' | translate }}"
ng-model="vm.timewindow.hideAggInterval" >
</md-checkbox>
</section>
<section layout="column" flex ng-show="vm.isEdit || !vm.timewindow.hideAggInterval">
<md-slider-container>
<span translate>aggregation.limit</span>
<md-slider flex min="{{vm.minDatapointsLimit()}}" max="{{vm.maxDatapointsLimit()}}" step="1"
ng-disabled="vm.timewindow.hideAggInterval" ng-model="vm.timewindow.aggregation.limit" aria-label="limit" id="limit-slider">
</md-slider>
<md-input-container style="max-width: 80px;">
<input flex type="number" step="1" ng-disabled="vm.timewindow.hideAggInterval"
min="{{vm.minDatapointsLimit()}}" max="{{vm.maxDatapointsLimit()}}"
ng-model="vm.timewindow.aggregation.limit" aria-label="limit" aria-controls="limit-slider">
</md-input-container>
</md-slider-container>
</section>
</section>
<tb-timeinterval ng-if="vm.showRealtimeAggInterval()" min="vm.minRealtimeAggInterval()"
max="vm.maxRealtimeAggInterval()" ng-model="vm.timewindow.realtime.interval" is-edit="vm.isEdit"
hide-flag="vm.timewindow.hideAggInterval" predefined-name="'aggregation.group-interval'">
</tb-timeinterval>
<tb-timeinterval ng-if="vm.showHistoryAggInterval()" min="vm.minHistoryAggInterval()" max="vm.maxHistoryAggInterval()"
predefined-name="'aggregation.group-interval'"
ng-model="vm.timewindow.history.interval">
<tb-timeinterval ng-if="vm.showHistoryAggInterval()" min="vm.minHistoryAggInterval()"
max="vm.maxHistoryAggInterval()" ng-model="vm.timewindow.history.interval" is-edit="vm.isEdit"
hide-flag="vm.timewindow.hideAggInterval" predefined-name="'aggregation.group-interval'">
</tb-timeinterval>
</md-content>
</section>

16
ui/src/app/components/timewindow.directive.js
View File

@ -43,6 +43,9 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
/* tbTimewindow (ng-model)
* {
* hideInterval: false,
* hideAggregation: false,
* hideAggInterval: false,
* realtime: {
* interval: 0,
* timewindowMs: 0
@ -64,6 +67,8 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
scope.historyOnly = angular.isDefined(attrs.historyOnly);
scope.isEdit = attrs.isEdit === 'true';
scope.aggregation = scope.$eval(attrs.aggregation);
scope.isToolbar = angular.isDefined(attrs.isToolbar);
@ -136,6 +141,7 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
'timewindow': angular.copy(scope.model),
'historyOnly': scope.historyOnly,
'aggregation': scope.aggregation,
'isEdit': scope.isEdit,
'onTimewindowUpdate': function (timewindow) {
scope.model = timewindow;
scope.updateView();
@ -177,6 +183,9 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
type: model.aggregation.type,
limit: model.aggregation.limit
};
value.hideInterval = model.hideInterval;
value.hideAggregation = model.hideAggregation;
value.hideAggInterval = model.hideAggInterval;
ngModelCtrl.$setViewValue(value);
scope.updateDisplayValue();
}
@ -230,6 +239,9 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
}
model.aggregation.limit = value.aggregation.limit || Math.floor(timeService.getMaxDatapointsLimit() / 2);
}
model.hideInterval = value.hideInterval;
model.hideAggregation = value.hideAggregation;
model.hideAggInterval = value.hideAggInterval;
}
scope.updateDisplayValue();
};
@ -242,7 +254,9 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
require: "^ngModel",
scope: {
asButton: '=asButton',
disabled:'=ngDisabled'
disabled:'=ngDisabled',
isEdit: '=?'
},
link: linker
};

2
ui/src/app/components/widget/widget-config.tpl.html
View File

@ -34,7 +34,7 @@
<section flex layout="row" layout-align="start center" style="margin-bottom: 16px;">
<span ng-class="{'tb-disabled-label': useDashboardTimewindow}" translate style="padding-right: 8px;">widget-config.timewindow</span>
<tb-timewindow ng-disabled="useDashboardTimewindow" as-button="true" aggregation="{{ widgetType === types.widgetType.timeseries.value }}"
flex ng-model="timewindow"></tb-timewindow>
is-edit="true" flex ng-model="timewindow"></tb-timewindow>
</section>
</div>
<div ng-show="widgetType === types.widgetType.alarm.value" layout='column' layout-align="center"

2
ui/src/app/dashboard/dashboard.tpl.html
View File

@ -50,7 +50,7 @@
<md-icon aria-label="{{ 'action.export' | translate }}" class="material-icons">file_download</md-icon>
</md-button>
<tb-timewindow ng-show="vm.isEdit || vm.displayDashboardTimewindow()"
is-toolbar
is-toolbar is-edit="vm.isEdit"
direction="left"
tooltip-direction="bottom" aggregation="true"
ng-model="vm.dashboardCtx.dashboardTimewindow">

3
ui/src/app/locale/locale.constant-en_US.json
View File

@ -1412,7 +1412,8 @@
"edit": "Edit timewindow",
"date-range": "Date range",
"last": "Last",
"time-period": "Time period"
"time-period": "Time period",
"hide": "Hide"
},
"user": {
"user": "User",

3
ui/src/app/locale/locale.constant-es_ES.json
View File

@ -1411,7 +1411,8 @@
"edit": "Editar ventana de tiempo",
"date-range": "Rango de fecha",
"last": "Último(s)",
"time-period": "Período de tiempo"
"time-period": "Período de tiempo",
"hide": "Ocultar"
},
"user": {
"user": "Usuario",

3
ui/src/app/locale/locale.constant-fr_FR.json
View File

@ -1263,7 +1263,8 @@
"period": "de {{startTime}} à {{endTime}}",
"realtime": "Temps réel",
"seconds": "{seconds, plural, 0 {second} 1 {1 second} other {# seconds}}",
"time-period": "Période"
"time-period": "Période",
"hide": "Masquer"
},
"user": {
"activation-email-sent-message": "L'e-mail d'activation a été envoyé avec succès!",

3
ui/src/app/locale/locale.constant-it_IT.json
View File

@ -1353,7 +1353,8 @@
"edit": "Modifica intervallo temporale",
"date-range": "Intervallo date",
"last": "Ultimo",
"time-period": "Intervallo temporale"
"time-period": "Intervallo temporale",
"hide": "Nascondi"
},
"user": {
"user": "Utente",