@c8y/ng1-modules 1017.10.0 → 1017.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alarms/widget-config.html +1 -1
- package/alarmsEventsExplorer/alarmsEventsTimelinesConfig/alarmsEventsTimelinesConfig.html +88 -55
- package/assetPropertyWidget/views/config.html +3 -2
- package/assetTable/views/assetsConfig2.html +6 -8
- package/core/ui/directives/aggregation.js +1 -1
- package/core/ui/views/dateTimePicker.html +1 -1
- package/dataPointExplorer/controllers/dataPointWidget.js +1 -1
- package/dataPointExplorer/controllers/dataPointWidgetConfig.js +1 -1
- package/dataPointExplorer/directives/dataPointList.js +1 -1
- package/dataPointExplorer/index.js +1 -1
- package/dataPointExplorer/views/dataPointList.html +1 -0
- package/dataPointExplorer/views/widgetConfig.html +143 -81
- package/dataPointTable/views/widgetConfig.html +60 -50
- package/eventList/views/eventListConfig.html +1 -1
- package/htmlWidget/views/config.html +12 -10
- package/infoGauge/infoGaugeWidget.config.html +55 -35
- package/kpi/views/gaugeConfig.html +33 -14
- package/kpi/views/listConfig.html +39 -26
- package/kpi/views/pieChartConfig.html +37 -36
- package/modbusWidget4/widget-config.html +4 -7
- package/package.json +1 -1
- package/rotation3dWidget/views/rotation3dConfig.html +23 -22
- package/scada/views/componentConfig.html +22 -21
- package/trafficLightWidget/states-mapping.html +13 -9
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="alarms-widget-config" ng-controller="AlarmsConfigController as vm">
|
|
1
|
+
<div class="alarms-widget-config p-t-8" ng-controller="AlarmsConfigController as vm">
|
|
2
2
|
<label translate>Status</label>
|
|
3
3
|
<div class="form-group d-flex gap-16">
|
|
4
4
|
<div ng-repeat="(key, value) in vm.status">
|
|
@@ -1,67 +1,100 @@
|
|
|
1
1
|
<div class="card-header separator bg-inherit sticky-top">
|
|
2
|
-
<span
|
|
2
|
+
<span
|
|
3
|
+
class="card-title h4"
|
|
4
|
+
translate
|
|
5
|
+
>Alarms/events</span>
|
|
3
6
|
</div>
|
|
4
|
-
<div
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
<div
|
|
8
|
+
ng-if="vm.configs.length === 0"
|
|
9
|
+
class="p-t-8"
|
|
10
|
+
>
|
|
11
|
+
<c8y-ui-empty-state
|
|
12
|
+
[icon]="'c8y-events'"
|
|
13
|
+
[title]="'No alarms/events found.' | translate"
|
|
14
|
+
[horizontal]="true"
|
|
15
|
+
>
|
|
16
|
+
<p c8y-guide-docs>
|
|
17
|
+
<small translate>
|
|
10
18
|
Find out more in the
|
|
11
|
-
<a c8y-guide-href="users-guide/cockpit/#adding-alarms-or-events">
|
|
12
|
-
User guide`KEEP_ORIGINAL`
|
|
13
|
-
</a>
|
|
19
|
+
<a c8y-guide-href="users-guide/cockpit/#adding-alarms-or-events">User guide`KEEP_ORIGINAL`</a>
|
|
14
20
|
.
|
|
15
|
-
</
|
|
16
|
-
</
|
|
17
|
-
</
|
|
21
|
+
</small>
|
|
22
|
+
</p>
|
|
23
|
+
</c8y-ui-empty-state>
|
|
18
24
|
</div>
|
|
19
25
|
|
|
20
26
|
<div
|
|
21
|
-
class="c8y-data-point-list c8y-list__group bg-inherit
|
|
27
|
+
class="c8y-data-point-list c8y-list__group bg-inherit"
|
|
22
28
|
ng-form="forms.alarmsEventsTimelineForm"
|
|
23
29
|
>
|
|
24
30
|
<div
|
|
25
31
|
class="c8y-data-point c8y-list__item bg-inherit"
|
|
26
32
|
ng-repeat="cfg in vm.configs | orderBy: 'label'"
|
|
27
33
|
ng-form="forms.alarmsEventsTimelineChildForm{{ $index }}"
|
|
28
|
-
ng-class="{ expanded: isCollapsed }"
|
|
29
34
|
>
|
|
30
|
-
<div class="c8y-list__item__block
|
|
31
|
-
<div class="c8y-list__item__check p-r-0">
|
|
35
|
+
<div class="c8y-list__item__block">
|
|
36
|
+
<div class="c8y-list__item__check p-r-0 a-s-center">
|
|
32
37
|
<label class="c8y-switch c8y-switch--inline">
|
|
33
|
-
<input
|
|
38
|
+
<input
|
|
39
|
+
name="active"
|
|
40
|
+
type="checkbox"
|
|
41
|
+
ng-model="cfg.__active"
|
|
42
|
+
/>
|
|
34
43
|
<span></span>
|
|
35
|
-
<span
|
|
44
|
+
<span
|
|
45
|
+
class="sr-only"
|
|
46
|
+
translate
|
|
47
|
+
>Active switch</span>
|
|
36
48
|
</label>
|
|
37
49
|
</div>
|
|
38
50
|
|
|
39
|
-
<div
|
|
51
|
+
<div
|
|
52
|
+
class="c8y-list__item__colorpicker p-l-0 a-s-center"
|
|
53
|
+
title="{{ 'Change color' | translate }}"
|
|
54
|
+
>
|
|
40
55
|
<div class="c8y-colorpicker">
|
|
41
|
-
<label
|
|
42
|
-
|
|
56
|
+
<label
|
|
57
|
+
for="colorpicker-{{$index}}"
|
|
58
|
+
class="sr-only"
|
|
59
|
+
>{{ 'Color picker' | translate }}</label>
|
|
60
|
+
<input
|
|
61
|
+
type="color"
|
|
62
|
+
id="colorpicker-{{$index}}"
|
|
63
|
+
ng-model="cfg.color"
|
|
64
|
+
/>
|
|
43
65
|
<span style="background-color:{{ cfg.color }}"></span>
|
|
44
66
|
</div>
|
|
45
67
|
</div>
|
|
46
68
|
|
|
47
|
-
<div
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
69
|
+
<div class="c8y-list__item__body text-truncate">
|
|
70
|
+
<button
|
|
71
|
+
class="btn-clean data-point-label text-truncate"
|
|
72
|
+
ng-click="isCollapsed = !isCollapsed"
|
|
73
|
+
aria-expanded="{{ isCollapsed || false}}"
|
|
74
|
+
>
|
|
75
|
+
<span
|
|
76
|
+
name="label"
|
|
77
|
+
title="{{ cfg.label }}"
|
|
78
|
+
class="text-truncate"
|
|
79
|
+
>{{ cfg.label }}</span>
|
|
80
|
+
<small class="text-truncate text-muted icon-flex" *ngIf="cfg.__target.name">
|
|
81
|
+
<i c8y-icon="exchange"></i>
|
|
82
|
+
<span class="text-truncate" title="{{ cfg.__target.name }}">{{ cfg.__target.name }}</span>
|
|
83
|
+
</small>
|
|
84
|
+
</button>
|
|
53
85
|
</div>
|
|
54
|
-
<div class="c8y-list__item__actions">
|
|
86
|
+
<div class="c8y-list__item__actions" ng-class="{ expanded: isCollapsed }">
|
|
55
87
|
<button
|
|
56
88
|
type="button"
|
|
57
89
|
title="{{ 'Expand' | translate }}"
|
|
58
90
|
class="collapse-btn"
|
|
59
91
|
ng-click="isCollapsed = !isCollapsed"
|
|
92
|
+
aria-expanded="{{ isCollapsed || false}}"
|
|
60
93
|
>
|
|
61
94
|
<i c8y-icon="chevron-down"></i>
|
|
62
95
|
</button>
|
|
63
96
|
|
|
64
|
-
<
|
|
97
|
+
<div
|
|
65
98
|
class="dropdown settings"
|
|
66
99
|
is-open="isopen"
|
|
67
100
|
uib-dropdown
|
|
@@ -75,36 +108,34 @@
|
|
|
75
108
|
>
|
|
76
109
|
<i c8y-icon="ellipsis-v"></i>
|
|
77
110
|
</button>
|
|
78
|
-
<ul
|
|
111
|
+
<ul
|
|
112
|
+
class="dropdown-menu dropdown-menu-right text-right"
|
|
113
|
+
uib-dropdown-menu
|
|
114
|
+
>
|
|
79
115
|
<li>
|
|
80
|
-
<button
|
|
81
|
-
|
|
116
|
+
<button
|
|
117
|
+
title="{{ 'Remove' | translate }}"
|
|
118
|
+
type="button"
|
|
119
|
+
ng-click="vm.remove(cfg)"
|
|
120
|
+
>
|
|
121
|
+
<i c8y-icon="minus-circle"></i>
|
|
82
122
|
{{ 'Remove' | translate }}
|
|
83
123
|
</button>
|
|
84
124
|
</li>
|
|
85
125
|
</ul>
|
|
86
|
-
</
|
|
126
|
+
</div>
|
|
87
127
|
</div>
|
|
88
128
|
</div>
|
|
89
129
|
<div uib-collapse="!isCollapsed">
|
|
90
130
|
<div class="data-point-details c8y-list__item__collapse--container">
|
|
91
|
-
<div class="data-point-target" ng-if="!noAsset">
|
|
92
|
-
<ul class="list-unstyled small m-b-16">
|
|
93
|
-
<li class="p-t-4 p-b-4 d-flex separator-top-bottom">
|
|
94
|
-
<label class="small m-b-0 m-r-8 a-s-start text-muted">
|
|
95
|
-
{{ 'Source' | translate }}
|
|
96
|
-
</label>
|
|
97
|
-
<span class="m-l-auto">
|
|
98
|
-
{{ cfg.__target.name }}
|
|
99
|
-
</span>
|
|
100
|
-
</li>
|
|
101
|
-
</ul>
|
|
102
|
-
</div>
|
|
103
131
|
<div class="form-group form-group-sm">
|
|
104
|
-
<label
|
|
132
|
+
<label
|
|
133
|
+
for="label-{{$index}}"
|
|
134
|
+
translate
|
|
135
|
+
>Label</label>
|
|
105
136
|
<input
|
|
106
137
|
name="label"
|
|
107
|
-
id="label"
|
|
138
|
+
id="label-{{$index}}"
|
|
108
139
|
ng-model="cfg.label"
|
|
109
140
|
ng-model-options="{debounce: 300}"
|
|
110
141
|
class="form-control"
|
|
@@ -112,10 +143,13 @@
|
|
|
112
143
|
</div>
|
|
113
144
|
<div class="tight-grid">
|
|
114
145
|
<div class="form-group form-group-sm col-xs-6 col-sm-4">
|
|
115
|
-
<label
|
|
146
|
+
<label
|
|
147
|
+
for="dataType-{{$index}}"
|
|
148
|
+
translate
|
|
149
|
+
>Data type</label>
|
|
116
150
|
<div class="c8y-select-wrapper">
|
|
117
151
|
<select
|
|
118
|
-
id="dataType"
|
|
152
|
+
id="dataType-{{$index}}"
|
|
119
153
|
class="form-control"
|
|
120
154
|
ng-options="tt.value as (tt.label | translate) for tt in vm.timelineTypes"
|
|
121
155
|
ng-model="cfg.timelineType"
|
|
@@ -126,12 +160,12 @@
|
|
|
126
160
|
</div>
|
|
127
161
|
|
|
128
162
|
<div class="form-group form-group-sm col-xs-6 col-sm-8">
|
|
129
|
-
<label for="alarmEventType">
|
|
163
|
+
<label for="alarmEventType-{{$index}}">
|
|
130
164
|
{{ 'Alarm/event type' | translate }}
|
|
131
165
|
</label>
|
|
132
166
|
<input
|
|
133
167
|
name="alarmEventType"
|
|
134
|
-
id="alarmEventType"
|
|
168
|
+
id="alarmEventType-{{$index}}"
|
|
135
169
|
ng-model="cfg.filters.type"
|
|
136
170
|
ng-model-options="{debounce: 300}"
|
|
137
171
|
class="form-control"
|
|
@@ -141,10 +175,9 @@
|
|
|
141
175
|
</div>
|
|
142
176
|
</div>
|
|
143
177
|
</div>
|
|
144
|
-
<!-- /.data-point -->
|
|
145
178
|
</div>
|
|
146
179
|
|
|
147
|
-
<div class="card-footer
|
|
180
|
+
<div class="card-footer bg-inherit">
|
|
148
181
|
<button
|
|
149
182
|
title="{{ 'Add alarm/event' | translate }}"
|
|
150
183
|
type="button"
|
|
@@ -154,4 +187,4 @@
|
|
|
154
187
|
<i c8y-icon="plus-circle"></i>
|
|
155
188
|
{{ 'Add alarm/event' | translate }}
|
|
156
189
|
</button>
|
|
157
|
-
</div>
|
|
190
|
+
</div>
|
|
@@ -7,5 +7,6 @@
|
|
|
7
7
|
include-tree-children="true"
|
|
8
8
|
default-properties="['c8ySchema!!id', 'c8ySchema!!name', 'c8ySchema!!type']"
|
|
9
9
|
allow-duplicates="false"
|
|
10
|
-
single-property-selection="false"
|
|
11
|
-
|
|
10
|
+
single-property-selection="false"
|
|
11
|
+
class="d-block p-t-8"
|
|
12
|
+
></c8y-property-selector>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div ng-controller="AssetsTableConfigCtrl">
|
|
1
|
+
<div ng-controller="AssetsTableConfigCtrl" class="p-t-8">
|
|
2
2
|
<c8y-property-selector
|
|
3
3
|
properties="properties"
|
|
4
4
|
managed-object="config.device"
|
|
@@ -11,12 +11,10 @@
|
|
|
11
11
|
>
|
|
12
12
|
</c8y-property-selector>
|
|
13
13
|
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
class="help-block d-inline-block"
|
|
14
|
+
<div ng-if="forms.componentForm.$invalid"
|
|
15
|
+
ng-class="{'help-block d-inline-block': !forms.componentForm.$error.propertySelected,
|
|
16
|
+
'alert alert-warning': forms.componentForm.$error.propertySelected}"
|
|
18
17
|
>
|
|
19
|
-
You must select at least one property.
|
|
20
|
-
|
|
21
|
-
</p>
|
|
18
|
+
{{'You must select at least one property.' | translate}}
|
|
19
|
+
</div>
|
|
22
20
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";!function(){n.$inject=["$parse","$timeout","gettext"],angular.module("c8y.ui").factory("c8yAggregationSvc",function(){return{calculate:y}}).directive("c8yAggregation",n);var v="NONE",a="MINUTELY",e="HOURLY",t="DAILY",g=moment.duration(10,"minute"),o=moment.duration(1,"day"),i=moment.duration(4,"days");function y(n){return i<=n?t:o<=n?e:g<n?a:v}function n(g,s,n){var _=[{value:v,name:n("None")},{value:a,name:n("Minutely")},{value:e,name:n("Hourly")},{value:t,name:n("Daily")}],f=!1;return{restrict:"E",template:'\n <div class="c8y-select-wrapper"><select\n class="form-control"\n title="{{\'Aggregation\' | translate}}"\n aria-label="{{\'Aggregation\' | translate}}"\n ng-disabled="__realtime()"\n ng-model="__aggregation"\n ng-change="__onChange()">\n <option\n title="{{agg.name | translate}}"\n ng-repeat="agg in __aggregations"\n value="{{agg.value}}"\n ng-disabled="__disabled[agg.value]">\n {{agg.name | translate}}\n </option>\n </select><span></span></div>',replace:!0,scope:!0,link:function(o,n,i){var r=g(i.dateFrom),l=g(i.dateTo),u=g(i.aggregation),a=g(i.realtime),e=f||!!i.aggregateRealtime,m=function(n){return void 0===n?v:n},c=function(n){return n===v?void 0:n};o.__aggregations=_;var d=null;o.__onChange=function(){d=moment.duration(moment(l(o)).diff(r(o))),u.assign(o,c(o.__aggregation))},o.__realtime=function(){return a(o)};var t="{\n
|
|
1
|
+
"use strict";!function(){n.$inject=["$parse","$timeout","gettext"],angular.module("c8y.ui").factory("c8yAggregationSvc",function(){return{calculate:y}}).directive("c8yAggregation",n);var v="NONE",a="MINUTELY",e="HOURLY",t="DAILY",g=moment.duration(10,"minute"),o=moment.duration(1,"day"),i=moment.duration(4,"days");function y(n){return i<=n?t:o<=n?e:g<n?a:v}function n(g,s,n){var _=[{value:v,name:n("None")},{value:a,name:n("Minutely")},{value:e,name:n("Hourly")},{value:t,name:n("Daily")}],f=!1;return{restrict:"E",template:'\n <div class="c8y-select-wrapper"><select\n class="form-control"\n title="{{\'Aggregation\' | translate}}"\n aria-label="{{\'Aggregation\' | translate}}"\n ng-disabled="__realtime()"\n ng-model="__aggregation"\n ng-change="__onChange()">\n <option\n title="{{agg.name | translate}}"\n ng-repeat="agg in __aggregations"\n value="{{agg.value}}"\n ng-disabled="__disabled[agg.value]">\n {{agg.name | translate}}\n </option>\n </select><span></span></div>',replace:!0,scope:!0,link:function(o,n,i){var r=g(i.dateFrom),l=g(i.dateTo),u=g(i.aggregation),a=g(i.realtime),e=f||!!i.aggregateRealtime,m=function(n){return void 0===n?v:n},c=function(n){return n===v?void 0:n};o.__aggregations=_;var d=null;o.__onChange=function(){d=moment.duration(moment(l(o)).diff(r(o))),u.assign(o,c(o.__aggregation))},o.__realtime=function(){return a(o)};var t="{\n dateFrom: ".concat(i.dateFrom,",\n dateTo: ").concat(i.dateTo,",\n aggregation: ").concat(i.aggregation,",\n realtime: ").concat(i.realtime,"\n }");o.$on("$destroy",function(){e&&(f=!1)}),o.$watch(t,function(n,a){if(i.auto&&"false"!==i.auto){if(n.realtime&&!f)return o.__aggregation=m(),void u.assign(o,c(o.__aggregation));if(n!==a)if(n.aggregation===a.aggregation){var e=moment.duration(moment(l(o)).diff(r(o))),t=y(e),g=d&&y(d);t!==g&&(d=null,s(function(){o.__disabled={DAILY:e<=moment.duration(1,"day"),HOURLY:e<=moment.duration(1,"hour"),MINUTELY:e<=moment.duration(1,"minute")}}),o.__aggregation=t,u.assign(o,c(t)))}else o.__aggregation=m(n.aggregation);else o.__aggregation=m(n.aggregation)}},!0)}}}}();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";!function(){function n(i,n,t,e){i.onRealtimeAlarmFn=function(n){i.onAlarm=n},i.onRealtimeEventFn=function(n){i.onEvent=n};var a,o=200;function c(){var n=t.height();_.isUndefined(_.get(a,"height"))||(n-=a.height),i.dataPointsGraphHeight=_.max([o,n])}function
|
|
1
|
+
"use strict";!function(){function n(i,n,t,e){i.onRealtimeAlarmFn=function(n){i.onAlarm=n},i.onRealtimeEventFn=function(n){i.onEvent=n};var a,o=200;function c(n,t){!1!==i.child.config.updateDates&&(i.child.config.dateFrom=n,i.child.config.dateTo=t)}function d(){var n=t.height();_.isUndefined(_.get(a,"height"))||(n-=a.height),i.dataPointsGraphHeight=_.max([o,n])}function l(){n(function(){i.$broadcast("dashboardResize")},500)}function r(n,t){i.alarmsEventsTimeline=i.alarmsEventsTimeline||{},i.alarmsEventsTimeline.displayedDateFrom=n,i.alarmsEventsTimeline.displayedDateTo=t}function h(n){return _(n).map(function(n){return n.__target.id}).uniq().value().join(",")}i.onUpdateDates=c,i.onUpdateDisplayedDates=r,i.onBoxChanged=function(n){i.chartBox=n},i.onTimelinesChartSizeChanged=function(n){a=n,d(),l()},i.dataPointsGraphHeight=t.height(),function(){var n=i.child.config.interval;if(!n||n===e.custom.id)return;var t=_.find(e.intervals,function(n){return n.id===i.child.config.interval})||{};t.qty&&(i.child.config.dateFrom=moment().subtract(t.qty,t.unit).toDate(),i.child.config.dateTo=moment().toDate())}(),i.$watch("child.config.datapoints",function(n){var t=h(n);i.channel=t?"/measurements/".concat(t):""}),i.$watch("child.config.alarmsEventsConfigs",function(n){var t=h(n);i.alarmsChannel=t?"/alarms/".concat(t):"",i.eventsChannel=t?"/events/".concat(t):""}),i.$watchCollection(["child.config.dateFrom","child.config.dateTo"],function(){r(i.child.config.dateFrom,i.child.config.dateTo)}),i.$watch("child.config.date",function(){i.child.config.widgetInstanceGlobalTimeContext&&c(new Date(i.child.config.date[0]),new Date(i.child.config.date[1]))}),i.$on("dashboardResize",function(n){n.targetScope!==i&&(d(),l())})}n.$inject=["$scope","$timeout","$element","INTERVAL_CONSTANTS"],angular.module("c8y.cockpit.dataPointExplorer").controller("DataPointWidgetCtrl",n)}();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";angular.module("c8y.cockpit.dataPointExplorer").controller("DataPointWidgetConfigCtrl",["$scope","c8yDataPointSvc",function(t,
|
|
1
|
+
"use strict";angular.module("c8y.cockpit.dataPointExplorer").controller("DataPointWidgetConfigCtrl",["$scope","c8yDataPointSvc",function(t,o){t.noActions=!0,t.dontSave=!0,t.onRealtimeAlarmFn=function(a){t.onAlarm=a},t.onRealtimeEventFn=function(a){t.onEvent=a};var a=function(a,t){var e=_.pick(t,"dateFrom","dateTo","aggregation","displayDateSelection","interval","realtime","displayDateSelection","widgetInstanceGlobalTimeContext","canDecoupleGlobalTimeContext"),n=o.getDefaultFilters();_.assign(a,n,e)};t.onBoxChanged=function(a){t.chartBox=a},t.data={},t.data.datapoints=_.cloneDeep(t.config.datapoints),t.data.alarmsEventsConfigs=_.cloneDeep(t.config.alarmsEventsConfigs),a(t.data,t.config),t.dateSelection=t.data.widgetInstanceGlobalTimeContext?"dashboard_context":t.data.displayDateSelection?"view_and_config":"config",t.$watch("dateSelection",function(){switch(t.dateSelection){case"dashboard_context":t.data.widgetInstanceGlobalTimeContext=!0;break;case"view_and_config":t.data.widgetInstanceGlobalTimeContext=!1,t.data.displayDateSelection=!0;break;case"config":default:t.data.widgetInstanceGlobalTimeContext=!1,t.data.displayDateSelection=!1}},!0),t.$watch("data",function(){t.data.widgetInstanceGlobalTimeContext&&(t.data.dateFrom=t.config.date?t.config.date[0]:t.data.dateFrom,t.data.dateTo=t.config.date?t.config.date[1]:t.data.dateTo,t.data.realtime=!1,t.data.displayDateSelection=!1,t.data.canDecoupleGlobalTimeContext=!1,t.data.interval=null),a(t.config,t.data),t.config.datapoints=t.data.graphDataPoints,t.config.alarmsEventsConfigs=t.data.graphAlarmsEventsConfigs},!0)}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";angular.module("c8y.cockpit.dataPointExplorer").directive("c8yDataPointList",[function(){return{require:"?ng-form",restrict:"E",link:function(o,n,t){o.formConfig={showTarget:!0,showRange:!0,showYellowRange:!0,showRedRange:!0,showChart:!0},"basicList"in t&&(o.isBasicList=!0,o.formConfig.showTarget=!1,o.formConfig.showRange=!1,o.formConfig.showYellowRange=!1,o.formConfig.showRedRange=!1,o.formConfig.showChart=!1),"noChart"in t&&(o.noChart=!0,o.formConfig.showChart=!1),"noTarget"in t&&(o.formConfig.showTarget=!1),"noRange"in t&&(o.formConfig.showRange=!1),"noYellowRange"in t&&(o.formConfig.showYellowRange=!1),"noRedRange"in t&&(o.formConfig.showRedRange=!1),"noAsset"in t&&(o.noAsset=!0),"smartrules"in t&&(o.smartrules=!0),void 0===o.minSelectCount&&(o.minSelectCount=1),o.datapoints||(o.datapoints=[])},scope:{datapoints:"=",dontSave:"@",maxSelectCount:"<",allowAddingDataPointsFromContextMoOnly:"<",minSelectCount:"<"},templateUrl:":::PLUGIN_PATH:::/views/dataPointList.html",controller:"c8yDataPointListCtrl"}}]);
|
|
1
|
+
"use strict";angular.module("c8y.cockpit.dataPointExplorer").directive("c8yDataPointList",[function(){return{require:"?ng-form",restrict:"E",link:function(o,n,t){o.formConfig={showTarget:!0,showRange:!0,showYellowRange:!0,showRedRange:!0,showChart:!0},"basicList"in t&&(o.isBasicList=!0,o.formConfig.showTarget=!1,o.formConfig.showRange=!1,o.formConfig.showYellowRange=!1,o.formConfig.showRedRange=!1,o.formConfig.showChart=!1),"noChart"in t&&(o.noChart=!0,o.formConfig.showChart=!1),"noTarget"in t&&(o.formConfig.showTarget=!1),"noRange"in t&&(o.formConfig.showRange=!1),"noYellowRange"in t&&(o.formConfig.showYellowRange=!1),"noRedRange"in t&&(o.formConfig.showRedRange=!1),"noAsset"in t&&(o.noAsset=!0),"smartrules"in t&&(o.smartrules=!0),void 0===o.minSelectCount&&(o.minSelectCount=1),o.datapoints||(o.datapoints=[])},scope:{datapoints:"=",listTitle:"<",dontSave:"@",maxSelectCount:"<",allowAddingDataPointsFromContextMoOnly:"<",minSelectCount:"<"},templateUrl:":::PLUGIN_PATH:::/views/dataPointList.html",controller:"c8yDataPointListCtrl"}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";angular.module("c8y.cockpit.dataPointExplorer",["c8y.deviceSelector"]).constant("dataPointExplorerTemplateBasePath",":::PLUGIN_PATH:::/views/").config(["c8yComponentsProvider","gettext",function(t,
|
|
1
|
+
"use strict";angular.module("c8y.cockpit.dataPointExplorer",["c8y.deviceSelector"]).constant("dataPointExplorerTemplateBasePath",":::PLUGIN_PATH:::/views/").config(["c8yComponentsProvider","gettext",function(t,e){t.add({name:"Data points graph",nameDisplay:e("Data points graph"),description:e("A graph display of a collection of data points"),templateUrl:":::PLUGIN_PATH:::/views/widget.html",configTemplateUrl:":::PLUGIN_PATH:::/views/widgetConfig.html",previewImage:":::PLUGIN_PATH:::/img/data-points-graph-widget-pr.png",options:{noDeviceTarget:!0,minCol:4,datapointAttributes:["datapoints"]},displaySettings:{globalTimeContext:!0}})}]);
|
|
@@ -1,85 +1,147 @@
|
|
|
1
|
-
<div
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
1
|
+
<div
|
|
2
|
+
ng-controller="DataPointWidgetConfigCtrl"
|
|
3
|
+
ng-init="disableLocalStorage = true"
|
|
4
|
+
class="row no-card-context d-flex"
|
|
5
|
+
style="height: calc(100vh - 406px);"
|
|
6
|
+
>
|
|
7
|
+
<div class="col-md-5 bg-level-1 a-s-stretch inner-scroll">
|
|
8
|
+
<div class="p-l-24 bg-inherit p-t-8">
|
|
9
|
+
<div class="form-group m-b-0 p-b-16 separator-bottom">
|
|
10
|
+
<label for="dateSelection">
|
|
11
|
+
{{ 'Date selection' | translate }}
|
|
12
|
+
<button
|
|
13
|
+
type="button"
|
|
14
|
+
class="btn-help btn-help--sm"
|
|
15
|
+
aria-label="{{ 'Help' | translate }}"
|
|
16
|
+
uib-popover-html="'Choose how to select a date range, the available options are:
|
|
17
|
+
<ul class=\'m-l-0 p-l-8 m-t-8 m-b-0\'>
|
|
18
|
+
<li><b>Widget configuration:</b> restricts the date selection only to the widget configuration</li>
|
|
19
|
+
<li><b>Widget and widget configuration:</b> restricts the date selection to the widget view and widget configuration only</li>
|
|
20
|
+
<li><b>Dashboard time range:</b> restricts date selection to the global dashboard configuration only </li></ul>' | translate"
|
|
21
|
+
popover-placement="right"
|
|
22
|
+
popover-trigger="'focus'"
|
|
23
|
+
popover-append-to-body="true"
|
|
24
|
+
></button>
|
|
25
|
+
</label>
|
|
26
|
+
<div class="c8y-select-wrapper">
|
|
27
|
+
<select
|
|
28
|
+
id="dateSelection"
|
|
29
|
+
class="form-control"
|
|
30
|
+
title="{{ 'Date selection' | translate }}"
|
|
31
|
+
aria-label="{{ 'Date selection' | translate }}"
|
|
32
|
+
ng-model="dateSelection"
|
|
33
|
+
>
|
|
34
|
+
<option
|
|
35
|
+
title="{{ 'Widget configuration' | translate }}"
|
|
36
|
+
value="{{ 'config' }}"
|
|
37
|
+
>
|
|
38
|
+
{{ 'Widget configuration' | translate }}
|
|
39
|
+
</option>
|
|
40
|
+
<option
|
|
41
|
+
title="{{ 'Widget and widget configuration' | translate }}"
|
|
42
|
+
value="{{ 'view_and_config' }}"
|
|
43
|
+
>
|
|
44
|
+
{{ 'Widget and widget configuration' | translate }}
|
|
45
|
+
</option>
|
|
46
|
+
<option
|
|
47
|
+
title="{{ 'Dashboard time range' | translate }}"
|
|
48
|
+
value="{{ 'dashboard_context' }}"
|
|
49
|
+
>
|
|
50
|
+
{{ 'Dashboard time range' | translate }}
|
|
51
|
+
</option>
|
|
52
|
+
</select>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<c8y-data-point-list
|
|
57
|
+
datapoints="data.datapoints"
|
|
58
|
+
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
59
|
+
dont-save="true"
|
|
60
|
+
no-target
|
|
61
|
+
no-yellow-range
|
|
62
|
+
no-red-range
|
|
63
|
+
class="bg-inherit separator-bottom"
|
|
64
|
+
></c8y-data-point-list>
|
|
65
|
+
<c8y-alarms-events-timelines-config
|
|
66
|
+
configs="data.alarmsEventsConfigs"
|
|
67
|
+
allow-alarms-events-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
68
|
+
class="d-block bg-inherit separator-top"
|
|
69
|
+
style="padding-top: 1px;"
|
|
70
|
+
></c8y-alarms-events-timelines-config>
|
|
37
71
|
</div>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div class="col-md-7 sticky-top">
|
|
75
|
+
<div class="p-r-24 p-t-8">
|
|
76
|
+
<div
|
|
77
|
+
class="data-point-explorer d-flex d-col"
|
|
78
|
+
ng-controller="c8yDataPointExplorerCtrl"
|
|
79
|
+
>
|
|
80
|
+
<div class="m-b-4 m-t-4 d-flex j-c-end gap-8">
|
|
81
|
+
<c8y-realtime-button
|
|
82
|
+
ng-show="!data.widgetInstanceGlobalTimeContext"
|
|
83
|
+
class="top-right-control"
|
|
84
|
+
channel="{{ channel }}"
|
|
85
|
+
state="data.realtime"
|
|
86
|
+
on-data="onData($data)"
|
|
87
|
+
></c8y-realtime-button>
|
|
88
|
+
<c8y-realtime-button
|
|
89
|
+
ng-show="false"
|
|
90
|
+
channel="{{ alarmsChannel }}"
|
|
91
|
+
state="data.realtime"
|
|
92
|
+
on-data="onAlarm($data)"
|
|
93
|
+
on-data-update="onAlarm($data)"
|
|
94
|
+
></c8y-realtime-button>
|
|
95
|
+
<c8y-realtime-button
|
|
96
|
+
ng-show="false"
|
|
97
|
+
channel="{{ eventsChannel }}"
|
|
98
|
+
state="data.realtime"
|
|
99
|
+
on-data="onEvent($data)"
|
|
100
|
+
></c8y-realtime-button>
|
|
101
|
+
<c8y-aggregation
|
|
102
|
+
class="top-right-control"
|
|
103
|
+
date-from="data.dateFrom"
|
|
104
|
+
date-to="data.dateTo"
|
|
105
|
+
aggregation="data.aggregation"
|
|
106
|
+
realtime="data.realtime"
|
|
107
|
+
auto="true"
|
|
108
|
+
></c8y-aggregation>
|
|
109
|
+
<c8y-interval
|
|
110
|
+
ng-show="!data.widgetInstanceGlobalTimeContext"
|
|
111
|
+
class="top-right-control"
|
|
112
|
+
date-from="data.dateFrom"
|
|
113
|
+
date-to="data.dateTo"
|
|
114
|
+
interval="data.interval"
|
|
115
|
+
></c8y-interval>
|
|
116
|
+
</div>
|
|
117
|
+
<div
|
|
118
|
+
class="c8yGraphFill"
|
|
119
|
+
style="height: calc(100vh - 520px);"
|
|
120
|
+
>
|
|
121
|
+
<c8y-chart
|
|
122
|
+
datapoints="data.graphDataPoints"
|
|
123
|
+
date-from="data.dateFrom"
|
|
124
|
+
date-to="data.dateTo"
|
|
125
|
+
realtime="data.realtime"
|
|
126
|
+
aggregation="data.aggregation"
|
|
127
|
+
show-time="!data.widgetInstanceGlobalTimeContext"
|
|
128
|
+
on-data="(onData)"
|
|
129
|
+
on-update-dates="onUpdateDates($dateFrom, $dateTo)"
|
|
130
|
+
on-update-displayed-dates="onUpdateDisplayedDates($dateFrom, $dateTo)"
|
|
131
|
+
on-box-changed="onBoxChanged(box)"
|
|
132
|
+
></c8y-chart>
|
|
133
|
+
</div>
|
|
134
|
+
<c8y-alarms-events-timelines-chart
|
|
135
|
+
alarms-events-configs="data.graphAlarmsEventsConfigs"
|
|
136
|
+
date-from="data.displayedDateFrom"
|
|
137
|
+
date-to="data.displayedDateTo"
|
|
138
|
+
on-update-dates="onUpdateDates($dateFrom, $dateTo)"
|
|
139
|
+
realtime="data.realtime"
|
|
140
|
+
on-realtime-alarm-fn="onRealtimeAlarmFn(onRealtimeAlarm)"
|
|
141
|
+
on-realtime-event-fn="onRealtimeEventFn(onRealtimeEvent)"
|
|
142
|
+
chart-box="chartBox"
|
|
143
|
+
></c8y-alarms-events-timelines-chart>
|
|
144
|
+
</div>
|
|
51
145
|
</div>
|
|
52
|
-
<c8y-alarms-events-timelines-chart
|
|
53
|
-
alarms-events-configs="data.graphAlarmsEventsConfigs"
|
|
54
|
-
date-from="data.displayedDateFrom"
|
|
55
|
-
date-to="data.displayedDateTo"
|
|
56
|
-
on-update-dates="onUpdateDates($dateFrom, $dateTo)"
|
|
57
|
-
realtime="data.realtime"
|
|
58
|
-
on-realtime-alarm-fn="onRealtimeAlarmFn(onRealtimeAlarm)"
|
|
59
|
-
on-realtime-event-fn="onRealtimeEventFn(onRealtimeEvent)"
|
|
60
|
-
chart-box="chartBox"
|
|
61
|
-
></c8y-alarms-events-timelines-chart>
|
|
62
|
-
<c8y-data-point-list
|
|
63
|
-
datapoints="data.datapoints"
|
|
64
|
-
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
65
|
-
dont-save="true"
|
|
66
|
-
no-target
|
|
67
|
-
no-yellow-range
|
|
68
|
-
no-red-range
|
|
69
|
-
class="bg-level-0"
|
|
70
|
-
></c8y-data-point-list>
|
|
71
|
-
<c8y-alarms-events-timelines-config
|
|
72
|
-
configs="data.alarmsEventsConfigs"
|
|
73
|
-
allow-alarms-events-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
74
|
-
class="bg-level-0"
|
|
75
|
-
></c8y-alarms-events-timelines-config>
|
|
76
|
-
<label
|
|
77
|
-
title="{{ 'Show date selection' | translate }}"
|
|
78
|
-
class="checkbox-inline c8y-checkbox m-t-16"
|
|
79
|
-
>
|
|
80
|
-
<input type="checkbox" ng-model="data.displayDateSelection" />
|
|
81
|
-
<span></span>
|
|
82
|
-
<span>{{ 'Show date selection' | translate }}</span>
|
|
83
|
-
</label>
|
|
84
146
|
</div>
|
|
85
147
|
</div>
|
|
@@ -1,54 +1,64 @@
|
|
|
1
|
-
<div ng-controller="DataPointWidgetConfigCtrl" ng-init="disableLocalStorage = true">
|
|
2
|
-
<div class="
|
|
3
|
-
<div class="
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
interval="data.interval"
|
|
23
|
-
></c8y-interval>
|
|
1
|
+
<div ng-controller="DataPointWidgetConfigCtrl" ng-init="disableLocalStorage = true" class="no-card-context">
|
|
2
|
+
<div class="row" style="height: calc(100vh - 406px);" ng-controller="c8yDataPointExplorerCtrl">
|
|
3
|
+
<div class="col-md-5 bg-level-1 separator-top inner-scroll">
|
|
4
|
+
<div class="p-l-24 bg-inherit">
|
|
5
|
+
<div class="form-group m-b-0 p-b-8 p-t-8 separator-bottom">
|
|
6
|
+
<label
|
|
7
|
+
class="c8y-switch"
|
|
8
|
+
title="{{ 'Show date selection' | translate }}"
|
|
9
|
+
>
|
|
10
|
+
<input type="checkbox" ng-model="data.displayDateSelection" />
|
|
11
|
+
<span></span>
|
|
12
|
+
<span>{{ 'Display date selection on the widget' | translate }}</span>
|
|
13
|
+
</label>
|
|
14
|
+
</div>
|
|
15
|
+
<c8y-data-point-list
|
|
16
|
+
datapoints="data.datapoints"
|
|
17
|
+
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
18
|
+
dont-save="true"
|
|
19
|
+
class="bg-level-1"
|
|
20
|
+
></c8y-data-point-list>
|
|
21
|
+
</div>
|
|
24
22
|
</div>
|
|
25
|
-
<div class="
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
23
|
+
<div class="col-md-7 sticky-top">
|
|
24
|
+
<div class="p-r-24 p-t-8">
|
|
25
|
+
<div class="m-b-4 d-flex j-c-end gap-8">
|
|
26
|
+
<c8y-realtime-button
|
|
27
|
+
class="top-right-control"
|
|
28
|
+
channel="{{ channel }}"
|
|
29
|
+
state="data.realtime"
|
|
30
|
+
on-data="onData($data)"
|
|
31
|
+
></c8y-realtime-button>
|
|
32
|
+
<c8y-aggregation
|
|
33
|
+
class="top-right-control"
|
|
34
|
+
date-from="data.dateFrom"
|
|
35
|
+
date-to="data.dateTo"
|
|
36
|
+
aggregation="data.aggregation"
|
|
37
|
+
realtime="data.realtime"
|
|
38
|
+
auto="true"
|
|
39
|
+
></c8y-aggregation>
|
|
40
|
+
<c8y-interval
|
|
41
|
+
class="top-right-control"
|
|
42
|
+
date-from="data.dateFrom"
|
|
43
|
+
date-to="data.dateTo"
|
|
44
|
+
interval="data.interval"
|
|
45
|
+
></c8y-interval>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="c8yGraphFill" style="height: calc(100vh - 458px);">
|
|
48
|
+
<c8y-chart
|
|
49
|
+
datapoints="data.graphDataPoints"
|
|
50
|
+
date-from="data.dateFrom"
|
|
51
|
+
date-to="data.dateTo"
|
|
52
|
+
realtime="data.realtime"
|
|
53
|
+
aggregation="data.aggregation"
|
|
54
|
+
show-time="true"
|
|
55
|
+
on-data="(onData)"
|
|
56
|
+
on-update-dates="onUpdateDates($dateFrom, $dateTo)"
|
|
57
|
+
on-update-displayed-dates="onUpdateDisplayedDates($dateFrom, $dateTo)"
|
|
58
|
+
on-box-changed="onBoxChanged(box)"
|
|
59
|
+
></c8y-chart>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
38
62
|
</div>
|
|
39
|
-
<c8y-data-point-list
|
|
40
|
-
datapoints="data.datapoints"
|
|
41
|
-
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
42
|
-
dont-save="true"
|
|
43
|
-
class="bg-level-0"
|
|
44
|
-
></c8y-data-point-list>
|
|
45
|
-
<label
|
|
46
|
-
class="checkbox-inline c8y-checkbox m-t-24"
|
|
47
|
-
title="{{ 'Show date selection' | translate }}"
|
|
48
|
-
>
|
|
49
|
-
<input type="checkbox" ng-model="data.displayDateSelection" />
|
|
50
|
-
<span></span>
|
|
51
|
-
<span>{{ 'Show date selection' | translate }}</span>
|
|
52
|
-
</label>
|
|
53
63
|
</div>
|
|
54
64
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div ng-controller="htmlWidgetConfigCtrl" class="html-widget-config">
|
|
1
|
+
<div ng-controller="htmlWidgetConfigCtrl" class="html-widget-config p-t-8">
|
|
2
2
|
<div class="form-group">
|
|
3
3
|
<label>
|
|
4
4
|
{{ 'HTML code' | translate }}
|
|
@@ -68,15 +68,17 @@
|
|
|
68
68
|
|
|
69
69
|
<div class="form-group">
|
|
70
70
|
<label translate>Select code sanitization option</label>
|
|
71
|
-
<select
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
71
|
+
<div class="c8y-select-wrapper">
|
|
72
|
+
<select
|
|
73
|
+
class="form-control"
|
|
74
|
+
ng-model="config.sanitization"
|
|
75
|
+
ng-init="config.sanitization = config.sanitization || 'strict'"
|
|
76
|
+
>
|
|
77
|
+
<option value="strict" translate>strict`code sanitization`</option>
|
|
78
|
+
<option value="lax" translate>lax`code sanitization`</option>
|
|
79
|
+
<option value="none" translate>none`code sanitization`</option>
|
|
80
|
+
</select>
|
|
81
|
+
</div>
|
|
80
82
|
</div>
|
|
81
83
|
|
|
82
84
|
<div class="form-group">
|
|
@@ -1,38 +1,58 @@
|
|
|
1
|
-
<div
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
<div
|
|
2
|
+
ng-form="infoGaugeForm"
|
|
3
|
+
ng-controller="infoGaugeWidgetConfigController as vm"
|
|
4
|
+
class="no-card-context p-t-8"
|
|
5
|
+
>
|
|
6
|
+
<div class="p-l-24 p-r-24 separator-bottom">
|
|
7
|
+
<div class="row">
|
|
8
|
+
<div class="col-md-6">
|
|
9
|
+
<div class="form-group">
|
|
10
|
+
<label translate>Decimal places</label>
|
|
11
|
+
<input
|
|
12
|
+
name="decimalPlaces"
|
|
13
|
+
ng-model="config.fractionSize"
|
|
14
|
+
type="number"
|
|
15
|
+
ng-min="0"
|
|
16
|
+
ng-max="10"
|
|
17
|
+
step="1"
|
|
18
|
+
c8y-model-options="{unsetWhenNull: true}"
|
|
19
|
+
class="form-control"
|
|
20
|
+
/>
|
|
21
|
+
<c8y-error-feedback field="infoGaugeForm.decimalPlaces"></c8y-error-feedback>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="col-md-6">
|
|
25
|
+
<div class="alert alert-info" role="alert" ng-hide="vm.atLeastOneActiveDatapoint" translate>
|
|
26
|
+
At least one data point for the labels or the gauge needs to be selected.
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
4
30
|
</div>
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
ng-max="10"
|
|
32
|
-
step="1"
|
|
33
|
-
c8y-model-options="{unsetWhenNull: true}"
|
|
34
|
-
class="form-control"
|
|
35
|
-
/>
|
|
36
|
-
<c8y-error-feedback field="infoGaugeForm.decimalPlaces"></c8y-error-feedback>
|
|
31
|
+
<div class="p-l-24 p-r-24">
|
|
32
|
+
<div class="row">
|
|
33
|
+
<div class="col-md-6">
|
|
34
|
+
<c8y-data-point-list
|
|
35
|
+
min-select-count="0"
|
|
36
|
+
datapoints="config.datapointsLabels"
|
|
37
|
+
dont-save="true"
|
|
38
|
+
no-chart
|
|
39
|
+
list-title="'Data point for labels' | translate"
|
|
40
|
+
class="bg-level-0"
|
|
41
|
+
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
42
|
+
></c8y-data-point-list>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="col-md-6">
|
|
45
|
+
<c8y-data-point-list
|
|
46
|
+
max-select-count="1"
|
|
47
|
+
min-select-count="0"
|
|
48
|
+
datapoints="config.datapointsGauge"
|
|
49
|
+
dont-save="true"
|
|
50
|
+
no-chart
|
|
51
|
+
class="bg-level-0"
|
|
52
|
+
list-title="'Data point for gauge' | translate"
|
|
53
|
+
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
54
|
+
></c8y-data-point-list>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
37
57
|
</div>
|
|
38
58
|
</div>
|
|
@@ -1,16 +1,35 @@
|
|
|
1
|
-
<div ng-form="gaugeForm" ng-controller="kpiConfigCtrl">
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<
|
|
1
|
+
<div ng-form="gaugeForm" ng-controller="kpiConfigCtrl" class="p-l-24 p-r-24 no-card-context">
|
|
2
|
+
<div class="row">
|
|
3
|
+
<div class="col-md-6">
|
|
4
|
+
<c8y-data-point-list
|
|
5
|
+
max-select-count="1"
|
|
6
|
+
datapoints="config.datapoints"
|
|
7
|
+
ng-model="config"
|
|
8
|
+
dont-save="true"
|
|
9
|
+
no-chart
|
|
10
|
+
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
11
|
+
class="bg-level-0"
|
|
12
|
+
></c8y-data-point-list>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="col-md-6">
|
|
15
|
+
<div class="card-header separator">
|
|
16
|
+
<div class="card-title h4">{{ 'Decimal places' | translate }}</div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="form-group p-t-8">
|
|
19
|
+
<label translate class="sr-only">Decimal places</label>
|
|
20
|
+
<input
|
|
21
|
+
name="decimalPlaces"
|
|
22
|
+
ng-model="config.fractionSize"
|
|
23
|
+
type="number"
|
|
24
|
+
ng-min="0"
|
|
25
|
+
ng-max="10"
|
|
26
|
+
step="1"
|
|
27
|
+
c8y-model-options="{unsetWhenNull: true}"
|
|
28
|
+
class="form-control"
|
|
29
|
+
placeholder="{{ 'e.g.' | translate}} 2"
|
|
30
|
+
/>
|
|
31
|
+
<c8y-error-feedback field="gaugeForm.decimalPlaces"></c8y-error-feedback>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
15
34
|
</div>
|
|
16
35
|
</div>
|
|
@@ -1,37 +1,50 @@
|
|
|
1
1
|
<div ng-controller="kpiConfigCtrl">
|
|
2
|
-
<div ng-controller="listConfigCtrl">
|
|
3
|
-
<div class="
|
|
4
|
-
<label translate>Data point</label>
|
|
2
|
+
<div ng-controller="listConfigCtrl" class="no-card-context row m-l-0 m-r-0" style="height: calc(100vh - 406px)">
|
|
3
|
+
<div class="col-md-6 p-l-24 inner-scroll bg-level-1">
|
|
5
4
|
<c8y-data-point-list
|
|
6
5
|
ng-model="config"
|
|
7
6
|
datapoints="config.options.dataPoints"
|
|
8
7
|
no-chart
|
|
9
|
-
class="bg-level-
|
|
8
|
+
class="bg-level-1"
|
|
10
9
|
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
11
10
|
></c8y-data-point-list>
|
|
12
11
|
</div>
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
12
|
+
<div class="col-md-6 p-r-24 inner-scroll">
|
|
13
|
+
<div class="card-header separator sticky-top bg-level-0">
|
|
14
|
+
<span class="card-title">Column visibility</span>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="form-group p-t-8">
|
|
17
|
+
<label class="c8y-checkbox">
|
|
18
|
+
<input type="checkbox" ng-model="config.options.kpi" />
|
|
19
|
+
<span></span>
|
|
20
|
+
<span>{{ 'Label' | translate }}</span>
|
|
21
|
+
</label>
|
|
22
|
+
<label class="c8y-checkbox">
|
|
23
|
+
<input type="checkbox" ng-model="config.options.target" />
|
|
24
|
+
<span></span>
|
|
25
|
+
<span>{{ 'Target' | translate }}</span>
|
|
26
|
+
</label>
|
|
27
|
+
<label class="c8y-checkbox">
|
|
28
|
+
<input type="checkbox" ng-model="config.options.current" />
|
|
29
|
+
<span></span>
|
|
30
|
+
<span>{{ 'Current' | translate }}</span>
|
|
31
|
+
</label>
|
|
32
|
+
<label class="c8y-checkbox">
|
|
33
|
+
<input type="checkbox" ng-model="config.options.diff" />
|
|
34
|
+
<span></span>
|
|
35
|
+
<span>{{ 'Diff' | translate }}</span>
|
|
36
|
+
</label>
|
|
37
|
+
<label class="c8y-checkbox">
|
|
38
|
+
<input type="checkbox" ng-model="config.options.diffPercentage" />
|
|
39
|
+
<span></span>
|
|
40
|
+
<span>{{ 'Diff %' | translate }}</span>
|
|
41
|
+
</label>
|
|
42
|
+
<label class="c8y-checkbox">
|
|
43
|
+
<input type="checkbox" ng-model="config.options.asset" />
|
|
44
|
+
<span></span>
|
|
45
|
+
<span>{{ 'Asset' | translate }}</span>
|
|
46
|
+
</label>
|
|
47
|
+
</div>
|
|
35
48
|
</div>
|
|
36
49
|
</div>
|
|
37
50
|
</div>
|
|
@@ -1,40 +1,41 @@
|
|
|
1
|
-
<div ng-controller="kpiConfigCtrl">
|
|
2
|
-
<div ng-controller="pieChartConfigCtrl">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
</label>
|
|
16
|
-
</div>
|
|
17
|
-
<div class="checkbox">
|
|
18
|
-
<label>
|
|
19
|
-
<input type="checkbox" ng-model="config.pieChartOptions.showLegend" />
|
|
20
|
-
<translate>Show legend</translate>
|
|
21
|
-
</label>
|
|
22
|
-
</div>
|
|
1
|
+
<div ng-controller="kpiConfigCtrl" class="p-l-24 p-r-24 no-card-context">
|
|
2
|
+
<div ng-controller="pieChartConfigCtrl" class="alert alert-warning m-t-8 center-block" ng-show="differentUnits" translate>
|
|
3
|
+
Measurements with different units are selected.
|
|
4
|
+
</div>
|
|
5
|
+
<div class="row">
|
|
6
|
+
<div class="col-md-6">
|
|
7
|
+
<c8y-data-point-list
|
|
8
|
+
basic-list
|
|
9
|
+
ng-model="config"
|
|
10
|
+
datapoints="config.datapoints"
|
|
11
|
+
allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
|
|
12
|
+
dont-save="true"
|
|
13
|
+
class="bg-level-0"
|
|
14
|
+
></c8y-data-point-list>
|
|
23
15
|
</div>
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
16
|
+
<div class="col-md-6">
|
|
17
|
+
<div ng-controller="pieChartConfigCtrl">
|
|
18
|
+
<div class="card-header separator">
|
|
19
|
+
<div class="card-title h4" translate>Pie Chart Options</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="form-group p-t-8">
|
|
22
|
+
<label class="c8y-checkbox">
|
|
23
|
+
<input type="checkbox" ng-model="config.pieChartOptions.showTooltips" />
|
|
24
|
+
<span></span>
|
|
25
|
+
<span translate>Show tooltips</span>
|
|
26
|
+
</label>
|
|
27
|
+
<label class="c8y-checkbox">
|
|
28
|
+
<input type="checkbox" ng-model="config.pieChartOptions.showLabels" />
|
|
29
|
+
<span></span>
|
|
30
|
+
<span translate>Show percentages</span>
|
|
31
|
+
</label>
|
|
32
|
+
<label class="c8y-checkbox">
|
|
33
|
+
<input type="checkbox" ng-model="config.pieChartOptions.showLegend" />
|
|
34
|
+
<span></span>
|
|
35
|
+
<span translate>Show legend</span>
|
|
36
|
+
</label>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
38
39
|
</div>
|
|
39
40
|
</div>
|
|
40
41
|
</div>
|
|
@@ -86,13 +86,10 @@
|
|
|
86
86
|
|
|
87
87
|
<input type="hidden" name="modbusWidgetValidation" ng-model="vm.modbusWidgetValidation" />
|
|
88
88
|
|
|
89
|
-
<
|
|
89
|
+
<div
|
|
90
90
|
ng-if="vm.categoriesConfig.length > 0 && !vm.atLeastOneElementSelected"
|
|
91
|
-
class="
|
|
91
|
+
class="alert alert-warning"
|
|
92
92
|
>
|
|
93
|
-
<span
|
|
94
|
-
|
|
95
|
-
<span translate>At least one field needs to be selected.</span>
|
|
96
|
-
</span>
|
|
97
|
-
</p>
|
|
93
|
+
<span translate>At least one field needs to be selected.</span>
|
|
94
|
+
</div>
|
|
98
95
|
</ng-form>
|
package/package.json
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
|
+
<div class="form-group p-t-8">
|
|
2
|
+
<label translate>Select object model for rendering</label>
|
|
3
|
+
<div class="c8y-select-wrapper">
|
|
4
|
+
<select class="form-control" ng-model="vm.config.objectModel">
|
|
5
|
+
<option value="box.min.json" translate>Box model</option>
|
|
6
|
+
<option value="phoneModel.min.json" translate>Phone model</option>
|
|
7
|
+
</select>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="form-group">
|
|
11
|
+
<label class="fit-w" translate>Wireframe</label>
|
|
12
|
+
<label class="c8y-switch">
|
|
13
|
+
<input type="checkbox" ng-model="vm.config.isWireframe" />
|
|
14
|
+
<span></span>
|
|
15
|
+
</label>
|
|
16
|
+
</div>
|
|
1
17
|
<div class="form-group">
|
|
2
|
-
<label
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
title="{{ 'Wireframe' | translate }}"
|
|
10
|
-
type="button"
|
|
11
|
-
class="btn btn-default"
|
|
12
|
-
ng-model="vm.config.isWireframe"
|
|
13
|
-
uib-btn-checkbox
|
|
14
|
-
>
|
|
15
|
-
<i c8y-icon="minus-circle" class="text-danger" ng-show="!vm.config.isWireframe"></i>
|
|
16
|
-
<i c8y-icon="check-circle" class="text-success" ng-show="vm.config.isWireframe"></i>
|
|
17
|
-
<span translate>Wireframe</span>
|
|
18
|
-
</button>
|
|
19
|
-
<label style="width:100%;" translate>Camera type</label>
|
|
20
|
-
<select class="form-control" ng-model="vm.config.cameraType">
|
|
21
|
-
<option value="OC" translate>Orthographic camera</option>
|
|
22
|
-
<option value="PC" translate>Perspective camera</option>
|
|
23
|
-
</select>
|
|
18
|
+
<label translate>Camera type</label>
|
|
19
|
+
<div class="c8y-select-wrapper">
|
|
20
|
+
<select class="form-control" ng-model="vm.config.cameraType">
|
|
21
|
+
<option value="OC" translate>Orthographic camera</option>
|
|
22
|
+
<option value="PC" translate>Perspective camera</option>
|
|
23
|
+
</select>
|
|
24
|
+
</div>
|
|
24
25
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div ng-controller="ScadaWidgetConfigCtrl as ctrl">
|
|
1
|
+
<div ng-controller="ScadaWidgetConfigCtrl as ctrl" class="p-t-8">
|
|
2
2
|
<div class="form-group">
|
|
3
3
|
<label>
|
|
4
4
|
<span translate>SVG</span>
|
|
@@ -60,15 +60,17 @@
|
|
|
60
60
|
|
|
61
61
|
<div class="form-group">
|
|
62
62
|
<label translate>Select code sanitization option</label>
|
|
63
|
-
<select
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
63
|
+
<div class="c8y-select-wrapper">
|
|
64
|
+
<select
|
|
65
|
+
class="form-control"
|
|
66
|
+
ng-model="config.sanitization"
|
|
67
|
+
ng-init="config.sanitization = config.sanitization || 'strict'"
|
|
68
|
+
>
|
|
69
|
+
<option value="strict" translate>strict`code sanitization`</option>
|
|
70
|
+
<option value="lax" translate>lax`code sanitization`</option>
|
|
71
|
+
<option value="none" translate>none`code sanitization`</option>
|
|
72
|
+
</select>
|
|
73
|
+
</div>
|
|
72
74
|
</div>
|
|
73
75
|
|
|
74
76
|
<file-picker
|
|
@@ -80,6 +82,16 @@
|
|
|
80
82
|
<input type="hidden" />
|
|
81
83
|
<span id="helpBlock" class="help-block m-b-16" translate>SVG content will be sanitized.</span>
|
|
82
84
|
</div>
|
|
85
|
+
<div
|
|
86
|
+
c8y-scada-mapping
|
|
87
|
+
name="mapping"
|
|
88
|
+
ng-model="config.mapping"
|
|
89
|
+
device="ctrl.device"
|
|
90
|
+
devices="ctrl.devices"
|
|
91
|
+
device-ids="config.deviceIds"
|
|
92
|
+
on-device-ids-change="ctrl.onDeviceIdsChange()"
|
|
93
|
+
class="table-responsive"
|
|
94
|
+
></div>
|
|
83
95
|
|
|
84
96
|
<div class="form-group">
|
|
85
97
|
<label>{{ 'Preview' | translate }}</label>
|
|
@@ -102,15 +114,4 @@
|
|
|
102
114
|
</div>
|
|
103
115
|
</div>
|
|
104
116
|
</div>
|
|
105
|
-
|
|
106
|
-
<div
|
|
107
|
-
c8y-scada-mapping
|
|
108
|
-
name="mapping"
|
|
109
|
-
ng-model="config.mapping"
|
|
110
|
-
device="ctrl.device"
|
|
111
|
-
devices="ctrl.devices"
|
|
112
|
-
device-ids="config.deviceIds"
|
|
113
|
-
on-device-ids-change="ctrl.onDeviceIdsChange()"
|
|
114
|
-
class="table-responsive"
|
|
115
|
-
></div>
|
|
116
117
|
</div>
|
|
@@ -1,21 +1,27 @@
|
|
|
1
|
-
<div class="
|
|
2
|
-
<
|
|
1
|
+
<div class="card-header separator">
|
|
2
|
+
<div class="card-title h4" translate>States mapping</div>
|
|
3
|
+
</div>
|
|
4
|
+
<div class="alert alert-warning" ng-show="!vm.deviceId || vm.hasInvalidMapping" translate>
|
|
5
|
+
Select a device and complete the mapping for all light states.
|
|
6
|
+
</div>
|
|
7
|
+
<div class="table-responsive">
|
|
3
8
|
<table class="table table-striped">
|
|
4
9
|
<thead>
|
|
5
10
|
<tr>
|
|
6
11
|
<th translate>State</th>
|
|
7
12
|
<th>
|
|
8
13
|
<span translate>Property</span>
|
|
9
|
-
<
|
|
10
|
-
|
|
14
|
+
<button class="btn-help btn-help--sm"
|
|
15
|
+
aria-label="{{'Help' | translate}}"
|
|
16
|
+
type="button"
|
|
11
17
|
uib-tooltip="{{
|
|
12
18
|
'The value of the selected data point or property must be one of the following to have the respective light on: true, 1, any non-empty string or any non-null number.'
|
|
13
19
|
| translate
|
|
14
20
|
}}"
|
|
15
21
|
tooltip-popup-delay="500"
|
|
16
22
|
tooltip-append-to-body="true"
|
|
17
|
-
|
|
18
|
-
|
|
23
|
+
>
|
|
24
|
+
</button>
|
|
19
25
|
</th>
|
|
20
26
|
<th></th>
|
|
21
27
|
</tr>
|
|
@@ -59,7 +65,5 @@
|
|
|
59
65
|
</tr>
|
|
60
66
|
</tbody>
|
|
61
67
|
</table>
|
|
62
|
-
<div class="alert alert-warning" ng-show="!vm.deviceId || vm.hasInvalidMapping" translate>
|
|
63
|
-
Select a device and complete the mapping for all light states.
|
|
64
|
-
</div>
|
|
65
68
|
</div>
|
|
69
|
+
|