@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
186 lines (185 loc) • 7.6 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { h } from "@stencil/core";
import ReportHelpers from "../internal/log-modal/report-codes-helper";
import moment from "moment";
import has from "lodash-es/has";
import filter from "lodash-es/filter";
import forOwn from "lodash-es/forOwn";
import sortBy from "lodash-es/sortBy";
import { getEventMessage } from "@larva.io/report-definitions";
import { config } from "../../global/config";
export class AreaTroubleList {
constructor() {
this.config = config;
}
acktrouble(trouble) {
this.output.emit({ command: 'ack_trouble', trouble_id: trouble.id });
}
render() {
const troubleList = JSON.parse(this.troubles);
if (troubleList.length === 0) {
this.modal.dismiss();
return;
}
const troubles = [];
const formatDateTime = this.config.get('formatDateTime', 'DD.MM.YYYY HH:mm');
const zoneTroubles = filter(troubleList, t => has(t, 'zone') && t.type_id !== 0 && t.type_id !== 3);
const alarms = filter(troubleList, t => t.type_id === 0 || t.type_id === 3);
const systemTroubles = filter(troubleList, t => !has(t, 'zone'));
const groupedTroubles = {
'area.alarmsTroubles': alarms,
'area.systemTroubles': systemTroubles,
'area.zoneTroubles': zoneTroubles,
};
forOwn(groupedTroubles, (groupTroubles, group) => {
if (groupTroubles.length > 0) {
troubles.push(h("lar-list-header", null, h("lar-translate", { t: group })));
}
groupTroubles = sortBy(groupTroubles, 'created');
groupTroubles.forEach(trouble => {
let text = h("lar-translate", { t: 'area.trouble_code_messages.' + trouble.type_id, fallback: trouble.text });
// tslint:disable-next-line: strict-boolean-conditions
if ((trouble.type_id === 0 || trouble.type_id === 3) && trouble.zone && trouble.zone.reportcode && ReportHelpers.isSecurityEvent(trouble.zone.reportcode)) {
const message = getEventMessage(trouble.zone.reportcode);
text = h("lar-translate", { t: 'log_entries.' + trouble.zone.reportcode, fallback: message });
}
troubles.push(h("lar-list-item", null, h("div", { slot: "start", class: "circle" }, trouble.zone
&&
h("lar-icon", { icon: trouble.zone.type, color: group === 'area.alarmsTroubles' ? 'danger' : 'warning' }), !trouble.zone
&&
h("lar-icon", { icon: "device", color: "warning" })), h("div", null, h("h4", null, trouble.zone
&&
h("span", null, h("lar-translate", { t: trouble.zone.name }), " - "), text), h("small", null, moment(trouble.created).format(formatDateTime)), trouble.resolved !== null && trouble.resolved !== undefined
&&
h("small", null, h("br", null), moment(trouble.resolved).format(formatDateTime), "\u00A0", h("lar-badge", { color: "success" }, h("lar-translate", { t: 'log.resolved' }))), trouble.overridden &&
h("span", null, "\u00A0", h("lar-badge", { color: "danger" }, h("lar-translate", { t: 'area.zone_state.bypassed' })))), h("div", { slot: "end" }, trouble.resolved !== null && trouble.resolved !== undefined &&
h("lar-button", { size: "small", onClick: () => { this.acktrouble(trouble); }, outline: true, color: this.colorInputs }, h("lar-translate", { t: "area.clear" })))));
});
});
return h("lar-list", { class: "trouble-list" }, troubles);
}
static get is() { return "lar-area-troubles"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["area-troubles.scss"]
};
}
static get styleUrls() {
return {
"$": ["area-troubles.css"]
};
}
static get properties() {
return {
"header": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "header"
},
"modal": {
"type": "any",
"mutable": false,
"complexType": {
"original": "HTMLLarModalElement",
"resolved": "HTMLLarModalElement",
"references": {
"HTMLLarModalElement": {
"location": "global",
"id": "global::HTMLLarModalElement"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "modal"
},
"troubles": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "troubles"
},
"colorInputs": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette for inputs"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-inputs"
}
};
}
static get events() {
return [{
"method": "output",
"name": "output",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
}
//# sourceMappingURL=area-troubles.js.map