@openremote/or-attribute-picker 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001
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/README.md +31 -31
- package/custom-elements.json +19 -19
- package/dist/umd/index.js +616 -616
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/index.orbundle.js +1311 -1311
- package/dist/umd/index.orbundle.js.map +1 -1
- package/lib/asset-attribute-picker.js +183 -24
- package/lib/assettype-attribute-picker.js +223 -24
- package/lib/assettype-list.js +23 -5
- package/lib/attribute-picker.js +169 -28
- package/lib/index.js +27 -1
- package/package.json +6 -6
|
@@ -1,24 +1,183 @@
|
|
|
1
|
-
var __decorate
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
8
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
9
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
10
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
11
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
12
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
13
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
import { customElement, property, state } from "lit/decorators.js";
|
|
17
|
+
import { AttributePicker, AttributePickerPickedEvent } from "./attribute-picker";
|
|
18
|
+
import manager, { DefaultColor5, Util } from "@openremote/core";
|
|
19
|
+
import { html, unsafeCSS } from "lit";
|
|
20
|
+
import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
|
|
21
|
+
import { when } from "lit/directives/when.js";
|
|
22
|
+
import { until } from "lit/directives/until.js";
|
|
23
|
+
/**
|
|
24
|
+
* Custom Event that is dispatched upon closing the dialog.
|
|
25
|
+
* Contains a list of {@link AttributeRef} of the selected attributes.
|
|
26
|
+
*/
|
|
27
|
+
export class OrAssetAttributePickerPickedEvent extends AttributePickerPickedEvent {
|
|
28
|
+
constructor(attrRefs) {
|
|
29
|
+
super(OrAssetAttributePickerPickedEvent.NAME, {
|
|
30
|
+
bubbles: true,
|
|
31
|
+
composed: true,
|
|
32
|
+
detail: attrRefs
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
OrAssetAttributePickerPickedEvent.NAME = "or-asset-attribute-picker-picked";
|
|
37
|
+
/**
|
|
38
|
+
* The "Attribute Picker" component using the {@link OrAssetTree} component for selecting assets and its attributes.
|
|
39
|
+
*
|
|
40
|
+
* @attribute {object} attributeFilter - Callback method for consumers to filter the attribute list shown. Returning true will make the attribute visible, returning false hides it.
|
|
41
|
+
*/
|
|
42
|
+
let OrAssetAttributePicker = class OrAssetAttributePicker extends AttributePicker {
|
|
43
|
+
constructor() {
|
|
44
|
+
super(...arguments);
|
|
45
|
+
this.selectedAssets = [];
|
|
46
|
+
this.selectedAttributes = [];
|
|
47
|
+
}
|
|
48
|
+
setAttributeFilter(attributeFilter) {
|
|
49
|
+
this.attributeFilter = attributeFilter;
|
|
50
|
+
return this;
|
|
51
|
+
}
|
|
52
|
+
setSelectedAssets(selectedAssets) {
|
|
53
|
+
this.selectedAssets = selectedAssets;
|
|
54
|
+
this._updateDialogContent();
|
|
55
|
+
return this;
|
|
56
|
+
}
|
|
57
|
+
setSelectedAttributes(selectedAttributes) {
|
|
58
|
+
this.selectedAttributes = selectedAttributes;
|
|
59
|
+
if (this.addBtn) {
|
|
60
|
+
this.addBtn.disabled = this.selectedAttributes.length === 0;
|
|
61
|
+
}
|
|
62
|
+
return this;
|
|
63
|
+
}
|
|
64
|
+
_setDialogActions() {
|
|
65
|
+
this.actions = [
|
|
66
|
+
{
|
|
67
|
+
actionName: "cancel",
|
|
68
|
+
content: "cancel"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
actionName: "add",
|
|
72
|
+
content: html `
|
|
73
|
+
<or-mwc-input id="add-btn" class="button" label="add" .type="${InputType.BUTTON}"></or-mwc-input>`,
|
|
74
|
+
action: () => {
|
|
75
|
+
if (!this.addBtn.disabled) {
|
|
76
|
+
this.dispatchEvent(new OrAssetAttributePickerPickedEvent(this.selectedAttributes));
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
];
|
|
81
|
+
}
|
|
82
|
+
_setDialogContent() {
|
|
83
|
+
this.content = () => html `
|
|
84
|
+
<div class="row" style="display: flex;height: 600px;width: 800px;border-top: 1px solid ${unsafeCSS(DefaultColor5)};">
|
|
85
|
+
<div class="col" style="width: 260px;overflow: auto;border-right: 1px solid ${unsafeCSS(DefaultColor5)};">
|
|
86
|
+
<or-asset-tree id="chart-asset-tree" readonly .selectedIds="${this.selectedAssets.length > 0 ? this.selectedAssets : null}"
|
|
87
|
+
@or-asset-tree-selection="${(ev) => this._onAssetSelectionChanged(ev)}">
|
|
88
|
+
</or-asset-tree>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="col" style="flex: 1 1 auto;width: 260px;overflow: auto;">
|
|
91
|
+
${when(this._assetAttributes && this._assetAttributes.length > 0, () => {
|
|
92
|
+
const selectedNames = this.selectedAttributes.filter(attrRef => { var _a; return attrRef.id === ((_a = this._asset) === null || _a === void 0 ? void 0 : _a.id); }).map(attrRef => attrRef.name);
|
|
93
|
+
return html `
|
|
94
|
+
<div class="attributes-header">
|
|
95
|
+
<or-translate value="attribute_plural"></or-translate>
|
|
96
|
+
</div>
|
|
97
|
+
${until(this._getAttributesTemplate(this._assetAttributes, undefined, selectedNames, this.multiSelect, (attrNames) => this._onAttributesSelect(attrNames)), html `<or-loading></or-loading>`)}
|
|
98
|
+
`;
|
|
99
|
+
}, () => html `
|
|
100
|
+
<div style="display: flex;align-items: center;text-align: center;height: 100%;padding: 0 20px;">
|
|
101
|
+
<span style="width:100%">
|
|
102
|
+
<or-translate value="${(this._assetAttributes && this._assetAttributes.length === 0) ?
|
|
103
|
+
((this.showOnlyDatapointAttrs && this.showOnlyRuleStateAttrs) ? "noDatapointsOrRuleStateAttributes" :
|
|
104
|
+
this.showOnlyDatapointAttrs ? "noDatapointsAttributes" :
|
|
105
|
+
this.showOnlyRuleStateAttrs ? "noRuleStateAttributes" : "noAttributesToShow") : "selectAssetOnTheLeft"}">
|
|
106
|
+
</or-translate>
|
|
107
|
+
</span>
|
|
108
|
+
</div>
|
|
109
|
+
`)}
|
|
110
|
+
</div>
|
|
111
|
+
`;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Event callback function that is triggered once a user selects an asset.
|
|
115
|
+
* It fetches the attributes of that specific asset, and caches these to be displayed later.
|
|
116
|
+
* Also applies the filtering such as {@link showOnlyDatapointAttrs}, {@link showOnlyRuleStateAttrs} and {@link attributeFilter} if set.
|
|
117
|
+
*/
|
|
118
|
+
_onAssetSelectionChanged(event) {
|
|
119
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
120
|
+
this._assetAttributes = undefined;
|
|
121
|
+
if (!this.multiSelect) {
|
|
122
|
+
this.selectedAttributes = [];
|
|
123
|
+
}
|
|
124
|
+
// Disable buttons / elements if necessary
|
|
125
|
+
this.addBtn.disabled = this.selectedAttributes.length === 0;
|
|
126
|
+
const assetTree = event.target;
|
|
127
|
+
assetTree.disabled = true;
|
|
128
|
+
let selectedAsset = event.detail.newNodes.length === 0 ? undefined : event.detail.newNodes[0].asset;
|
|
129
|
+
this._asset = selectedAsset;
|
|
130
|
+
if (selectedAsset) {
|
|
131
|
+
// Fetch the asset in full, including all its attributes
|
|
132
|
+
const assetResponse = yield manager.rest.api.AssetResource.get(selectedAsset.id);
|
|
133
|
+
selectedAsset = assetResponse.data;
|
|
134
|
+
if (selectedAsset) {
|
|
135
|
+
this._assetAttributes = Object.values(selectedAsset.attributes)
|
|
136
|
+
.map(attr => (Object.assign(Object.assign({}, attr), { id: selectedAsset.id })))
|
|
137
|
+
.sort(Util.sortByString((attribute) => attribute.name));
|
|
138
|
+
if (this.attributeFilter) {
|
|
139
|
+
this._assetAttributes = this._assetAttributes.filter((attr) => this.attributeFilter(attr));
|
|
140
|
+
}
|
|
141
|
+
if (this.showOnlyDatapointAttrs && this.showOnlyRuleStateAttrs) {
|
|
142
|
+
this._assetAttributes = this._assetAttributes
|
|
143
|
+
.filter(e => e.meta && (e.meta["storeDataPoints" /* WellknownMetaItems.STOREDATAPOINTS */] || e.meta["ruleState" /* WellknownMetaItems.RULESTATE */] || e.meta["agentLink" /* WellknownMetaItems.AGENTLINK */]));
|
|
144
|
+
}
|
|
145
|
+
else if (this.showOnlyDatapointAttrs) {
|
|
146
|
+
this._assetAttributes = this._assetAttributes
|
|
147
|
+
.filter(e => e.meta && (e.meta["storeDataPoints" /* WellknownMetaItems.STOREDATAPOINTS */] || e.meta["agentLink" /* WellknownMetaItems.AGENTLINK */]));
|
|
148
|
+
}
|
|
149
|
+
else if (this.showOnlyRuleStateAttrs) {
|
|
150
|
+
this._assetAttributes = this._assetAttributes
|
|
151
|
+
.filter(e => e.meta && (e.meta["ruleState" /* WellknownMetaItems.RULESTATE */] || e.meta["agentLink" /* WellknownMetaItems.AGENTLINK */]));
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
// Enable interaction with the asset tree again
|
|
156
|
+
assetTree.disabled = false;
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* HTML Callback function when the selected attributes have been updated.
|
|
161
|
+
*
|
|
162
|
+
* @remarks
|
|
163
|
+
* The {@link attrNames} parameter contains a list of attribute names VISIBLE in the list.
|
|
164
|
+
* So, selected attributes of other assets, will merge together with the new {@link attrNames}.
|
|
165
|
+
*/
|
|
166
|
+
_onAttributesSelect(attrNames) {
|
|
167
|
+
this.setSelectedAttributes([
|
|
168
|
+
...this.selectedAttributes.filter(attributeRef => attributeRef.id !== this._asset.id),
|
|
169
|
+
...attrNames.map(a => { var _a; return ({ id: (_a = this._asset) === null || _a === void 0 ? void 0 : _a.id, name: a }); })
|
|
170
|
+
]);
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
__decorate([
|
|
174
|
+
property()
|
|
175
|
+
], OrAssetAttributePicker.prototype, "attributeFilter", void 0);
|
|
176
|
+
__decorate([
|
|
177
|
+
state()
|
|
178
|
+
], OrAssetAttributePicker.prototype, "_assetAttributes", void 0);
|
|
179
|
+
OrAssetAttributePicker = __decorate([
|
|
180
|
+
customElement("or-asset-attribute-picker")
|
|
181
|
+
], OrAssetAttributePicker);
|
|
182
|
+
export { OrAssetAttributePicker };
|
|
183
|
+
//# sourceMappingURL=asset-attribute-picker.js.map
|
|
@@ -1,24 +1,223 @@
|
|
|
1
|
-
var __decorate
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { customElement, property, state } from "lit/decorators.js";
|
|
8
|
+
import { AttributePicker, AttributePickerPickedEvent } from "./attribute-picker";
|
|
9
|
+
import { html, unsafeCSS } from "lit";
|
|
10
|
+
import { DefaultColor5, Util } from "@openremote/core";
|
|
11
|
+
import { when } from "lit/directives/when.js";
|
|
12
|
+
import { until } from "lit/directives/until.js";
|
|
13
|
+
import { AssetModelUtil } from "@openremote/model";
|
|
14
|
+
import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
|
|
15
|
+
import "./assettype-list";
|
|
16
|
+
/**
|
|
17
|
+
* Custom Event that is dispatched upon closing the dialog.
|
|
18
|
+
* Contains a map that is keyed by {@link AssetDescriptor.name}, with an array of {@link AttributeDescriptor}s of the selected attributes.
|
|
19
|
+
*/
|
|
20
|
+
export class OrAssetTypeAttributePickerPickedEvent extends AttributePickerPickedEvent {
|
|
21
|
+
constructor(attrDescriptors) {
|
|
22
|
+
super(OrAssetTypeAttributePickerPickedEvent.NAME, {
|
|
23
|
+
bubbles: true,
|
|
24
|
+
composed: true,
|
|
25
|
+
detail: attrDescriptors
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
OrAssetTypeAttributePickerPickedEvent.NAME = "or-asset-type-attribute-picker-picked";
|
|
30
|
+
/**
|
|
31
|
+
* The "Attribute Picker" component using the {@link OrAssetTree} component for selecting assets and its attributes.
|
|
32
|
+
*
|
|
33
|
+
* @attribute {object} assetTypeFilter -Callback method for consumers to filter the asset type list shown. Returning true will make the asset type visible, returning false hides it.
|
|
34
|
+
* @attribute {object} attributeFilter - Callback method for consumers to filter the attribute list shown. Returning true will make the attribute visible, returning false hides it.
|
|
35
|
+
*/
|
|
36
|
+
let OrAssetTypeAttributePicker = class OrAssetTypeAttributePicker extends AttributePicker {
|
|
37
|
+
constructor() {
|
|
38
|
+
super(...arguments);
|
|
39
|
+
this.selectedAttributes = new Map();
|
|
40
|
+
}
|
|
41
|
+
setSelectedAttributes(selectedAttributes) {
|
|
42
|
+
this.selectedAttributes = selectedAttributes;
|
|
43
|
+
return this;
|
|
44
|
+
}
|
|
45
|
+
willUpdate(changedProps) {
|
|
46
|
+
if (!this._loadedAssetTypes) {
|
|
47
|
+
this._loadedAssetTypes = this._loadAssetTypes();
|
|
48
|
+
}
|
|
49
|
+
if (changedProps.has("_selectedAssetType")) {
|
|
50
|
+
const descriptor = this._getAssetDescriptorByName(this._selectedAssetType);
|
|
51
|
+
if (descriptor) {
|
|
52
|
+
this._loadedAttributeTypes = this._loadAttributeTypes(descriptor);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
// Update UI manually
|
|
56
|
+
this._updateDialogContent();
|
|
57
|
+
this._updateDialogActions();
|
|
58
|
+
return super.willUpdate(changedProps);
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Function that will load and update the available asset types up for selection.
|
|
62
|
+
* Also applies the filtering such as {@link assetTypeFilter} if set.
|
|
63
|
+
*/
|
|
64
|
+
_loadAssetTypes() {
|
|
65
|
+
let assetTypes = AssetModelUtil.getAssetDescriptors();
|
|
66
|
+
if (this.assetTypeFilter !== undefined) {
|
|
67
|
+
assetTypes = assetTypes.filter(this.assetTypeFilter);
|
|
68
|
+
}
|
|
69
|
+
this._loadedAssetTypes = assetTypes;
|
|
70
|
+
return assetTypes || [];
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Function that will load and update the available attributes up for selection.
|
|
74
|
+
* The {@link descriptor} parameter is usually the selected asset type.
|
|
75
|
+
* Also applies the filtering such as {@link showOnlyDatapointAttrs}, {@link showOnlyRuleStateAttrs} and {@link attributeFilter} if set.
|
|
76
|
+
*/
|
|
77
|
+
_loadAttributeTypes(descriptor) {
|
|
78
|
+
const typeInfo = AssetModelUtil.getAssetTypeInfo(descriptor);
|
|
79
|
+
let descriptors = typeInfo.attributeDescriptors;
|
|
80
|
+
// Apply necessary filtering
|
|
81
|
+
if (this.attributeFilter !== undefined) {
|
|
82
|
+
descriptors = descriptors === null || descriptors === void 0 ? void 0 : descriptors.filter(this.attributeFilter);
|
|
83
|
+
}
|
|
84
|
+
if (this.showOnlyDatapointAttrs) {
|
|
85
|
+
descriptors = descriptors === null || descriptors === void 0 ? void 0 : descriptors.filter(d => { var _a; return (_a = d.meta) === null || _a === void 0 ? void 0 : _a["storeDataPoints" /* WellknownMetaItems.STOREDATAPOINTS */]; });
|
|
86
|
+
}
|
|
87
|
+
if (this.showOnlyRuleStateAttrs) {
|
|
88
|
+
descriptors = descriptors === null || descriptors === void 0 ? void 0 : descriptors.filter(d => { var _a; return (_a = d.meta) === null || _a === void 0 ? void 0 : _a["ruleState" /* WellknownMetaItems.RULESTATE */]; });
|
|
89
|
+
}
|
|
90
|
+
this._loadedAttributeTypes = descriptors || [];
|
|
91
|
+
return descriptors || [];
|
|
92
|
+
}
|
|
93
|
+
/* ----------------------------- */
|
|
94
|
+
_setDialogContent() {
|
|
95
|
+
var _a;
|
|
96
|
+
const assetTypes = this._loadedAssetTypes || this._loadAssetTypes();
|
|
97
|
+
const selectedTypeNames = this.selectedAttributes ? Array.from(this.selectedAttributes.keys()) : undefined;
|
|
98
|
+
const assetTypeItems = this._getAssetTypeDescriptors(assetTypes, assetTypes.filter(type => !selectedTypeNames || selectedTypeNames.includes(type.name)));
|
|
99
|
+
const assetDescriptor = this._getAssetDescriptorByName(this._selectedAssetType);
|
|
100
|
+
const attributeTypes = (_a = (this._loadedAttributeTypes || (assetDescriptor ? this._loadAttributeTypes(assetDescriptor) : undefined))) === null || _a === void 0 ? void 0 : _a.sort(Util.sortByString(item => item.name));
|
|
101
|
+
this.content = () => html `
|
|
102
|
+
<div class="row" style="display: flex;height: 600px;width: 800px;border-top: 1px solid ${unsafeCSS(DefaultColor5)};">
|
|
103
|
+
<div class="col" style="width: 320px;overflow: auto;border-right: 1px solid ${unsafeCSS(DefaultColor5)};">
|
|
104
|
+
<asset-type-list .listItems="${assetTypeItems}" style="--or-icon-fill: #000000;" @or-mwc-list-changed="${(evt) => {
|
|
105
|
+
if (evt.detail.length === 1)
|
|
106
|
+
this._onAssetTypeItemClick(evt.detail[0]);
|
|
107
|
+
}}"
|
|
108
|
+
></asset-type-list>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="col" style="flex: 1 1 auto;width: 320px;overflow: auto;">
|
|
111
|
+
${when(attributeTypes && attributeTypes.length > 0, () => {
|
|
112
|
+
var _a;
|
|
113
|
+
const selectedAttrNames = this._selectedAssetType ? (_a = this.selectedAttributes.get(this._selectedAssetType)) === null || _a === void 0 ? void 0 : _a.map(desc => desc.name) : undefined;
|
|
114
|
+
return html `
|
|
115
|
+
<div class="attributes-header">
|
|
116
|
+
<or-translate value="attribute_plural"></or-translate>
|
|
117
|
+
</div>
|
|
118
|
+
${until(this._getAttributesTemplate(undefined, attributeTypes, selectedAttrNames, this.multiSelect, (attrNames) => this._onAttributesSelect(attrNames)), html `<or-loading></or-loading>`)}
|
|
119
|
+
`;
|
|
120
|
+
}, () => html `
|
|
121
|
+
<div style="display: flex;align-items: center;text-align: center;height: 100%;padding: 0 20px;">
|
|
122
|
+
<span style="width:100%">
|
|
123
|
+
<or-translate value="${(attributeTypes && attributeTypes.length === 0) ?
|
|
124
|
+
((this.showOnlyDatapointAttrs && this.showOnlyRuleStateAttrs) ? "noDatapointsOrRuleStateAttributes" :
|
|
125
|
+
this.showOnlyDatapointAttrs ? "noDatapointsAttributes" :
|
|
126
|
+
this.showOnlyRuleStateAttrs ? "noRuleStateAttributes" : "noAttributesToShow") : "selectAssetTypeOnTheLeft"}">
|
|
127
|
+
</or-translate>
|
|
128
|
+
</span>
|
|
129
|
+
</div>
|
|
130
|
+
`)}
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
`;
|
|
134
|
+
}
|
|
135
|
+
_setDialogActions() {
|
|
136
|
+
this.actions = [
|
|
137
|
+
{
|
|
138
|
+
actionName: "cancel",
|
|
139
|
+
content: "cancel"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
actionName: "add",
|
|
143
|
+
content: html `
|
|
144
|
+
<or-mwc-input id="add-btn" class="button" label="add" .type="${InputType.BUTTON}"></or-mwc-input>`,
|
|
145
|
+
action: () => {
|
|
146
|
+
if (!this.addBtn.disabled) {
|
|
147
|
+
this.dispatchEvent(new OrAssetTypeAttributePickerPickedEvent(this.selectedAttributes));
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
];
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* HTML Callback function when the selected asset type has been updated.
|
|
155
|
+
*/
|
|
156
|
+
_onAssetTypeItemClick(listItem) {
|
|
157
|
+
this._selectedAssetType = listItem.data.name;
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* HTML callback function when the selected attributes have been updated.
|
|
161
|
+
*/
|
|
162
|
+
_onAttributesSelect(attrNames) {
|
|
163
|
+
var _a;
|
|
164
|
+
if (!this._selectedAssetType) {
|
|
165
|
+
console.warn("Could not select attribute, since no asset type seemed to be selected.");
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
if (!this._loadedAttributeTypes) {
|
|
169
|
+
console.warn("Could not select attribute, since the attribute list seems to be empty?");
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
172
|
+
this.selectedAttributes.set(this._selectedAssetType, (_a = this._loadedAttributeTypes) === null || _a === void 0 ? void 0 : _a.filter(desc => attrNames.includes(desc.name)));
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Function that maps the {@link AssetDescriptor}s to the formatted {@link ListItem}s.
|
|
176
|
+
* Uses helpers like {@link Util.getAssetTypeLabel} and sorts by {@link descriptorType} so that agents show up first.
|
|
177
|
+
*/
|
|
178
|
+
_getAssetTypeDescriptors(descriptors, selected, withNoneValue) {
|
|
179
|
+
const items = descriptors === null || descriptors === void 0 ? void 0 : descriptors.map((descriptor) => {
|
|
180
|
+
return {
|
|
181
|
+
styleMap: {
|
|
182
|
+
"--or-icon-fill": descriptor.colour ? "#" + descriptor.colour : "unset"
|
|
183
|
+
},
|
|
184
|
+
icon: descriptor.icon,
|
|
185
|
+
trailingIcon: (selected === null || selected === void 0 ? void 0 : selected.includes(descriptor)) ? 'cloud-upload-outline' : undefined,
|
|
186
|
+
text: Util.getAssetTypeLabel(descriptor),
|
|
187
|
+
value: descriptor.name,
|
|
188
|
+
data: descriptor
|
|
189
|
+
};
|
|
190
|
+
}).sort((a, b) => (a.data.descriptorType === "agent" ? 0 : 1) - (b.data.descriptorType === "agent" ? 0 : 1) || a.text.localeCompare(b.text));
|
|
191
|
+
if (withNoneValue) {
|
|
192
|
+
items === null || items === void 0 ? void 0 : items.splice(0, 0, withNoneValue);
|
|
193
|
+
}
|
|
194
|
+
return items;
|
|
195
|
+
}
|
|
196
|
+
/**
|
|
197
|
+
* Utility method to get the cached {@link AssetDescriptor} by its name
|
|
198
|
+
*/
|
|
199
|
+
_getAssetDescriptorByName(name) {
|
|
200
|
+
var _a;
|
|
201
|
+
return name ? (_a = this._loadedAssetTypes) === null || _a === void 0 ? void 0 : _a.find(at => at.name === name) : undefined;
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
__decorate([
|
|
205
|
+
property()
|
|
206
|
+
], OrAssetTypeAttributePicker.prototype, "assetTypeFilter", void 0);
|
|
207
|
+
__decorate([
|
|
208
|
+
property()
|
|
209
|
+
], OrAssetTypeAttributePicker.prototype, "attributeFilter", void 0);
|
|
210
|
+
__decorate([
|
|
211
|
+
state()
|
|
212
|
+
], OrAssetTypeAttributePicker.prototype, "_selectedAssetType", void 0);
|
|
213
|
+
__decorate([
|
|
214
|
+
state()
|
|
215
|
+
], OrAssetTypeAttributePicker.prototype, "_loadedAttributeTypes", void 0);
|
|
216
|
+
__decorate([
|
|
217
|
+
state()
|
|
218
|
+
], OrAssetTypeAttributePicker.prototype, "_loadedAssetTypes", void 0);
|
|
219
|
+
OrAssetTypeAttributePicker = __decorate([
|
|
220
|
+
customElement("or-assettype-attribute-picker")
|
|
221
|
+
], OrAssetTypeAttributePicker);
|
|
222
|
+
export { OrAssetTypeAttributePicker };
|
|
223
|
+
//# sourceMappingURL=assettype-attribute-picker.js.map
|
package/lib/assettype-list.js
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { OrMwcList } from "@openremote/or-mwc-components/or-mwc-list";
|
|
8
|
+
import { css } from "lit";
|
|
9
|
+
import { customElement } from "lit/decorators.js";
|
|
10
|
+
let AssettypeList = class AssettypeList extends OrMwcList {
|
|
11
|
+
static get styles() {
|
|
12
|
+
return [...super.styles, css `
|
|
13
|
+
.mdc-list-item__meta or-icon {
|
|
14
|
+
--or-icon-fill: gray;
|
|
15
|
+
}
|
|
16
|
+
`];
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
AssettypeList = __decorate([
|
|
20
|
+
customElement("asset-type-list")
|
|
21
|
+
], AssettypeList);
|
|
22
|
+
export { AssettypeList };
|
|
23
|
+
//# sourceMappingURL=assettype-list.js.map
|