@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
234 lines (233 loc) • 9.78 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { h, forceUpdate } from "@stencil/core";
import map from "lodash-es/map";
import forOwn from "lodash-es/forOwn";
import sortBy from "lodash-es/sortBy";
import uniq from "lodash-es/uniq";
import groupBy from "lodash-es/groupBy";
export class AreaBypass {
constructor() {
this.bypassZones = [];
this.zonesList = [];
this.troubleList = [];
}
togglePyPassZone(zone) {
const bypassedIndex = this.bypassZones.indexOf(zone.id);
if (bypassedIndex > -1) {
this.bypassZones.splice(bypassedIndex, 1);
}
else {
this.bypassZones.push(zone.id);
}
forceUpdate(this.el);
}
bypassAutoSelect(group, fault) {
if ((group === undefined || group === null || group === '') && !fault) { // no group or fault - clear selection
this.bypassZones = [];
return;
}
this.zonesList.forEach(zone => {
if (!zone.persistent && fault && (zone.state === 'open_circuit' || zone.state === 'short_circuit') && !this.isZoneByPassed(zone)) {
this.togglePyPassZone(zone);
}
if (!zone.persistent && zone.group === group && !this.isZoneByPassed(zone)) {
this.togglePyPassZone(zone);
}
});
}
isZoneByPassed(zone) {
const bypassedIndex = this.bypassZones.indexOf(zone.id);
return bypassedIndex > -1 ? true : false;
}
renderZoneSelector() {
const selectors = [];
if (this.troubleList.length > 0) {
selectors.push(h("lar-button", { onClick: () => this.bypassAutoSelect('', true), color: "danger", size: "small", class: "zone-group", expand: "block", outline: true }, h("lar-translate", { t: "area.faultedOrTampered" })));
}
const filteredZones = this.zonesList.filter(z => !z.persistent && z.group !== '');
const allGroups = map(filteredZones, 'group');
const groups = uniq(allGroups);
groups.forEach(group => {
if (group === null || group === undefined) {
return;
}
selectors.push(h("lar-button", { color: this.color, onClick: () => this.bypassAutoSelect(group), size: "small", expand: "block", class: "zone-group", outline: true }, h("lar-translate", { t: (group || '<no name>') })));
});
selectors.push(h("lar-button", { color: "warning", onClick: () => this.bypassAutoSelect(), size: "small", class: "zone-group", expand: "block", outline: true }, h("lar-translate", { t: "area.clearSelection" })));
return selectors;
}
partialarm() {
if (this.modal) {
this.modal.dismiss();
}
this.output.emit({ command: 'arm', override_zones: this.bypassZones, override_troubles: this.troubleList.length > 0 });
}
render() {
const zones = [];
this.zonesList = sortBy(JSON.parse(this.zones), 'group');
this.troubleList = JSON.parse(this.troubles);
const groupedZones = groupBy(this.zonesList, 'group');
forOwn(groupedZones, (groupedZonesOwn, group) => {
zones.push(h("lar-list-header", null, h("lar-translate", { t: group })));
sortBy(groupedZonesOwn, 'name').forEach(zone => {
let color = 'success';
if (zone.state === 'open') {
color = 'tertiary';
}
if (zone.state === 'short_circuit') {
color = 'warning';
}
if (zone.state === 'open_circuit') {
color = 'danger';
}
zones.push(h("lar-list-item", { disabled: this.isZoneByPassed(zone), onClick: () => { this.togglePyPassZone(zone); }, style: { cursor: 'pointer' } }, h("div", { slot: "start", class: "circle" }, h("lar-icon", { icon: zone.type, color: color })), h("div", null, h("h4", null, h("lar-translate", { t: zone.name })), h("lar-badge", { color: color }, h("lar-translate", { t: 'area.zone_state.' + zone.state })), zone.overridden &&
h("span", null, "\u00A0", h("lar-badge", { color: "danger" }, h("lar-translate", { t: 'area.zone_state.bypassed' }))))));
});
});
return [
h("h4", { key: 'a639c373104330dce549c827228b90fa7b637f36', class: "center" }, this.troubleList.length > 0
?
h("lar-translate", { t: "area.overrideTroblesZonesInfo", values: { troubles: this.troubleList.length > 0 ? this.troubleList.length : '0', zones: this.bypassZones.length > 0 ? this.bypassZones.length : '0' } })
:
h("lar-translate", { t: "area.overrideZonesInfo", values: { zones: this.bypassZones.length > 0 ? this.bypassZones.length : '0' } })),
h("div", { key: '175ee2779e2be92ceafcbf94b5bbdf3c579e0d8c', class: "spacer" }),
h("lar-button", { key: '04ca711a74cf8c1ccdddf2b6e8b88363f478d226', onClick: () => this.partialarm(), color: this.color }, h("lar-icon", { key: 'e069488cc386283388c82d48339fcfe429d09e4c', icon: this.bypassZones.length > 0 ? 'halflock' : 'lock' }), "\u00A0", h("lar-translate", { key: 'a904c8a02dd66e01e2f28e3674b539980278ad09', t: this.troubleList.length > 0 ?
this.bypassZones.length > 0 ? 'area.overridePartialArm' : 'area.overridearm'
:
this.bypassZones.length > 0 ? 'area.partialarm' : 'area.arm' })),
h("div", { key: '6bd714fc9d6fba22efdc20a8cfafc918afb4b02a', class: "spacer" }),
h("div", { key: '1ec33348a229db7c430f856f19230f94a1c06a23', class: "zone-selectors" }, this.renderZoneSelector()),
h("div", { key: '2b9856f1a1c6f870f3523bb65c926f9d4ee5cf66', class: "zone-list" }, zones)
];
}
static get is() { return "lar-area-bypass"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["area.scss"]
};
}
static get styleUrls() {
return {
"$": ["area.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color"
},
"zones": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "zones"
},
"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"
},
"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"
}
};
}
static get states() {
return {
"bypassZones": {}
};
}
static get events() {
return [{
"method": "output",
"name": "output",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=area-bypass.js.map