@senx/discovery-widgets
Version:
Discovery Widgets Elements
336 lines (335 loc) • 13.9 kB
JavaScript
/*
* Copyright 2022-2025 SenX S.A.S.
*
* 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 { h } from "@stencil/core";
import { Utils } from "../../utils/utils";
import { Param } from "../../model/param";
import { Logger } from "../../utils/logger";
import { JsonLib } from "../../utils/jsonLib";
import { GTSLib } from "../../utils/gts.lib";
import { ColorLib } from "../../utils/color-lib";
export class DiscoveryModalComponent {
constructor() {
this.options = new Param();
this.debug = false;
this.showModal = false;
}
handleKeyDown(ev) {
if (ev.key === 'Escape') {
this.closeModal();
}
}
optionsUpdate(newValue, oldValue) {
var _a;
if (!!this.options && typeof this.options === 'string') {
this.options = JSON.parse(this.options);
}
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['optionsUpdate'], {
options: this.options,
newValue, oldValue,
});
}
dataUpdate(newValue, oldValue) {
var _a;
if (!!this.data && typeof this.data === 'string') {
this.data = new JsonLib().parse(this.data);
}
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['dataUpdate'], { data: this.data, newValue, oldValue });
this.parseData();
}
async open() {
this.showModal = true;
setTimeout(() => void this.resize(), 1000);
return Promise.resolve();
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
this.LOG = new Logger(DiscoveryModalComponent, this.debug);
this.parseData();
}
parseData() {
var _a, _b;
if (GTSLib.isArray(this.data)) {
this.data = this.data[0];
}
if (this.data) {
if ((_a = this.data.macro) !== null && _a !== void 0 ? _a : this.data.data) {
this.dashboard = undefined;
this.tile = this.data;
this.title = this.tile.title;
this.tile.title = undefined;
}
else {
this.tile = undefined;
this.dashboard = this.data;
this.title = this.dashboard.title;
this.dashboard.title = undefined;
}
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['parseData'], { tile: this.tile, dashboard: this.dashboard });
}
}
async resize() {
if (this.modalWrapper) {
this.modalWrapper.style.height = Utils.getContentBounds(this.modalWrapper).h + 'px';
if (this.tileElem)
await this.tileElem.resize();
}
}
closeModal() {
var _a, _b;
if (this.showModal) {
this.showModal = false;
for (const e of ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.events) !== null && _b !== void 0 ? _b : [])) {
this.discoveryEvent.emit(Object.assign(Object.assign({}, e), { source: this.parentId }));
}
}
}
closeModalViaBackDrop(e) {
if (e.target === this.backDrop) {
this.closeModal();
}
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
return h("div", { key: '91270e4568247400a88b8cae1ebee2bf4df05df8', ref: (el) => this.modal = el }, this.showModal ? h("div", { class: "modal", onClick: e => this.closeModalViaBackDrop(e), ref: el => this.backDrop = el, style: {
backgroundColor: ((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.popup) === null || _b === void 0 ? void 0 : _b.backdropColor)
? ColorLib.sanitizeColor((_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.popup) === null || _d === void 0 ? void 0 : _d.backdropColor)
: Utils.getCSSColor(this.modal, '--warp-view-modal-backdrop-color', '#00000066'),
} }, h("div", { class: "modal-content", style: {
width: (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.popup) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : '80%',
minHeight: (_k = (_j = (_h = this.options) === null || _h === void 0 ? void 0 : _h.popup) === null || _j === void 0 ? void 0 : _j.height) !== null && _k !== void 0 ? _k : '80%',
backgroundColor: ((_m = (_l = this.options) === null || _l === void 0 ? void 0 : _l.popup) === null || _m === void 0 ? void 0 : _m.bgColor)
? ColorLib.sanitizeColor((_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.popup) === null || _p === void 0 ? void 0 : _p.bgColor)
: Utils.getCSSColor(this.modal, '--warp-view-modal-bg-color', '#fefefe'),
} }, h("div", { class: "header" }, this.title ? h("h2", { class: "title", style: {
color: ((_r = (_q = this.options) === null || _q === void 0 ? void 0 : _q.popup) === null || _r === void 0 ? void 0 : _r.fontColor)
? ColorLib.sanitizeColor((_t = (_s = this.options) === null || _s === void 0 ? void 0 : _s.popup) === null || _t === void 0 ? void 0 : _t.fontColor)
: Utils.getCSSColor(this.modal, '--warp-view-font-color', '#404040'),
} }, this.title) : h("span", null), h("span", { class: "close", style: {
color: ((_v = (_u = this.options) === null || _u === void 0 ? void 0 : _u.popup) === null || _v === void 0 ? void 0 : _v.fontColor)
? ColorLib.sanitizeColor((_x = (_w = this.options) === null || _w === void 0 ? void 0 : _w.popup) === null || _x === void 0 ? void 0 : _x.fontColor)
: Utils.getCSSColor(this.modal, '--warp-view-font-color', '#404040'),
}, onClick: () => this.closeModal() }, "\u00D7")), h("div", { class: "modal-wrapper", ref: (el) => this.modalWrapper = el }, this.tile
? this.tile.macro
? h("discovery-tile", { url: (_y = this.tile.endpoint) !== null && _y !== void 0 ? _y : this.url, type: this.tile.type, "chart-title": this.tile.title, debug: this.debug, onDraw: () => void this.resize(), ref: (el) => this.tileElem = el, options: JSON.stringify(Utils.merge(this.options, this.tile.options)) }, this.tile.macro + ' EVAL')
: h("discovery-tile-result", { url: (_z = this.tile.endpoint) !== null && _z !== void 0 ? _z : this.url, result: Utils.sanitize(this.tile.data), type: this.tile.type, unit: this.tile.unit, options: Utils.merge(this.options, this.tile.options), debug: this.debug, onDraw: () => void this.resize(), ref: (el) => this.tileElem = el, "chart-title": this.tile.title })
: '', this.dashboard
? h("discovery-dashboard", { url: this.url, "dashboard-title": this.dashboard.title, cols: this.dashboard.cols, "cell-height": this.dashboard.cellHeight, debug: this.debug, options: this.options }, `<%
<'
${JSON.stringify(this.dashboard)}
'>
JSON-> %> EVAL`)
: ''))) : '');
}
static get is() { return "discovery-modal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-modal.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-modal.css"]
};
}
static get properties() {
return {
"data": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Tile | Dashboard",
"resolved": "Dashboard | Tile",
"references": {
"Tile": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::Tile"
},
"Dashboard": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::Dashboard"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
},
"options": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Param | string",
"resolved": "Param | string",
"references": {
"Param": {
"location": "import",
"path": "../../model/param",
"id": "src/model/param.ts::Param"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "options",
"reflect": false,
"defaultValue": "new Param()"
},
"url": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "url",
"reflect": false
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"parentId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "parent-id",
"reflect": false
}
};
}
static get states() {
return {
"tile": {},
"dashboard": {},
"showModal": {}
};
}
static get events() {
return [{
"method": "discoveryEvent",
"name": "discoveryEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "DiscoveryEvent",
"resolved": "DiscoveryEvent",
"references": {
"DiscoveryEvent": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::DiscoveryEvent"
}
}
}
}];
}
static get methods() {
return {
"open": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "options",
"methodName": "optionsUpdate"
}, {
"propName": "data",
"methodName": "dataUpdate"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": "document",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=discovery-modal.js.map