@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
665 lines (664 loc) • 26.2 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { h, forceUpdate } from "@stencil/core";
import ReportHelpers from "../internal/log-modal/report-codes-helper";
import has from "lodash-es/has";
export class Area {
constructor() {
/////// LarvaNode base properties
/**
* Component main icon
*/
this.icon = 'security';
/**
* The color to use from your application's color palette.
* Detrouble options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/
this.color = 'primary';
/**
* Allow node indication color automatic change based on feedback/node value. Defaults to false
*/
this.allowIndicationAutoColoring = false;
/**
* Allow node color automatic change based on feedback/node value. Defaults to true
*/
this.allowNodeAutoColoring = true;
/**
* Enable quick action for security node
*/
this.enableSecurityQuickActions = false;
/**
* Is logging for this component enabled (lar-log subcomponent loaded)
*/
this.log = false;
/**
* Node size
*/
this.nodeSize = 'default';
/////// LarvaNode base properties and events - end
this.troubles = [];
this.zones = [];
this.armed = false;
this.zoneopened = false;
this.exitDelayActive = false;
this.entryDelayActive = false;
this.transactionDelay = 0;
this.alarm = false;
this.loading = true;
}
/**
* Larva input message
*/
async input(data) {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (!this.validateData(data)) {
// this may be some success response ors.
return;
}
// 8.5 Indications - Table 8 – Indication - I&HAS set / I&HAS unset
this.armed = ((_a = data.state) === null || _a === void 0 ? void 0 : _a.armed) ? true : false;
// 8.5 Indications - Table 8 – Indication - Entry indication (see 8.3.8.2) & Completion of setting (see 8.3.7) & Setting (see 8.3.4)
this.exitDelayActive = ((_b = data.state) === null || _b === void 0 ? void 0 : _b.exit_delay_active) ? true : false;
this.entryDelayActive = ((_c = data.state) === null || _c === void 0 ? void 0 : _c.entry_delay_active) ? true : false;
if (this.exitDelayActive || this.entryDelayActive) {
this.transactionDelay = this.exitDelayActive ? (_d = data.state) === null || _d === void 0 ? void 0 : _d.exit_delay_expires_in_seconds : (_e = data.state) === null || _e === void 0 ? void 0 : _e.entry_delay_expires_in_seconds;
this.transactionDelay = this.transactionDelay || 0;
this.transactionDelay = Math.round(this.transactionDelay);
}
// 8.5 Indications - Table 8 – Indication - Hold-up alarm condition, Intruder alarm condition
this.alarm = ((_f = data.state) === null || _f === void 0 ? void 0 : _f.alarm) ? true : false;
// 8.5 Indications - Table 8 – Indication - Fault conditions (see Table 1), Tamper condition, Alert indication
this.troubles = Array.isArray((_g = data.state) === null || _g === void 0 ? void 0 : _g.troubles) ? (_h = data.state) === null || _h === void 0 ? void 0 : _h.troubles : [];
// show only unacked troubles
this.troubles = this.troubles.filter(e => e.acked === null || e.acked === undefined);
// 8.5 Indications - Table 8 – Indication - Individual intrusion detector indication
this.zones = Array.isArray(data.zones) ? data.zones : [];
this.zonesString = JSON.stringify(this.zones);
this.troublesString = JSON.stringify(this.troubles);
if (this.troubles.length === 0) {
// this.hideModal('#troublesmodal');
}
this.loading = false;
}
/**
* Larva error input
*/
async error(data) {
if (this.node) {
this.node.error(data);
}
this.loading = false;
}
componentDidLoad() {
const el = this.el.shadowRoot || this.el;
this.node = el.querySelector('lar-node');
this.output.emit();
}
validateData(data) {
if (has(data, 'id') && has(data, 'state') && has(data, 'state.armed')) {
return true;
}
if (!has(data, 'success')) {
console.error('Area Invalid input message', data);
}
return false;
}
arm() {
this.loading = true;
return this.output.emit({ command: 'arm' });
}
partialArm(data) {
this.loading = true;
this.output.emit({ command: 'arm', override_zones: data.bypassZones, override_troubles: data.overrideTroubles });
}
disarm() {
this.loading = true;
this.output.emit({ command: 'disarm' });
}
render() {
let value = this.loading ? ' ' : 'area.disarmed';
let iconSmall = 'unlock';
let valueTranslationValues;
let iconSmallColor = this.colorIconSmall;
if (this.transactionDelayTimeout !== undefined) {
clearTimeout(this.transactionDelayTimeout);
this.transactionDelayTimeout = undefined;
}
// if ARMED, detect how its armed
if (this.armed) {
const bypassedZone = this.zones.find(z => z.overridden === true) ? true : false;
const bypassedTrouble = this.troubles.find(t => t.overridden === true) ? true : false;
const newTroubles = this.troubles.find(t => !t.overridden) ? true : false;
if (bypassedZone && bypassedTrouble) {
value = 'area.partalArmedWithTrouble';
iconSmall = 'halflock_trouble';
}
else if (bypassedTrouble) {
value = 'area.armedWithTouble';
iconSmall = 'lock_trouble';
}
else if (bypassedZone) {
value = 'area.partalArmed';
iconSmall = 'halflock';
}
else {
value = 'area.armed';
iconSmall = 'lock';
}
if (newTroubles) {
iconSmall = 'warning';
}
}
// if unarmed and we have troubles, change icon to warning
if (this.troubles.length > 0 && !this.armed) {
iconSmall = 'warning';
}
// exit delay indiction
if ((this.exitDelayActive || this.entryDelayActive) && this.transactionDelay > 0) {
value = this.exitDelayActive ? 'area.exitdelay' : 'area.entrydelay';
valueTranslationValues = { seconds: String(this.transactionDelay) };
this.transactionDelayTimeout = window.setTimeout(() => {
if (this.transactionDelay === 0) {
clearTimeout(this.transactionDelayTimeout);
}
else {
this.transactionDelay--;
}
forceUpdate(this.el);
}, 1000);
}
// if we have alarm state
// detect what alarm we have
if (this.alarm) {
const alarms = [];
const unresolvedRroubles = this.troubles.filter(t => (t.resolved === '' || t.resolved === null || t.resolved === undefined));
const intruderAlarm = unresolvedRroubles.find(t => (t.type_id === 0)) ? true : false;
const zoneAlarms = unresolvedRroubles.filter(t => { var _a; return t.type_id === 3 && !!((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); });
const fireAlarm = zoneAlarms.find(t => { var _a; return ReportHelpers.isFireAlarm((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); }) ? true : false;
const medicalAlarm = zoneAlarms.find(t => { var _a; return ReportHelpers.isMedicalAlarm((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); }) ? true : false;
const panicAlarm = zoneAlarms.find(t => { var _a; return ReportHelpers.isPanicAlarm((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); }) ? true : false;
const otherAlarm = zoneAlarms.find(t => { var _a; return ReportHelpers.isOtherAreaAlarm((_a = t.zone) === null || _a === void 0 ? void 0 : _a.reportcode); }) ? true : false;
if (intruderAlarm) {
alarms.push('intruder');
}
if (fireAlarm) {
alarms.push('fire');
}
if (medicalAlarm) {
alarms.push('medical');
}
if (panicAlarm) {
alarms.push('panic');
}
if (otherAlarm) {
alarms.push('other');
}
if (alarms.length === 0) {
alarms.push('other');
}
value = alarms.length > 1 ? 'area.alarms.multiple' : 'area.alarms.' + alarms[0];
iconSmall = alarms.length > 1 ? 'alarm' : alarms[0] + '_alarm';
}
if (this.allowIndicationAutoColoring && this.alarm) {
iconSmallColor = this.allowNodeAutoColoring === true ? 'light' : 'danger'; // node is collored, do not color icon
}
else if (this.allowIndicationAutoColoring) {
switch (iconSmall) {
case 'halflock_trouble':
case 'lock_trouble':
case 'halflock':
case 'warning':
iconSmallColor = 'warning';
break;
case 'unlock':
iconSmallColor = 'danger';
break;
case 'lock':
iconSmallColor = 'success';
break;
}
}
const componentProps = {
color: this.colorInputs || this.color,
colorModal: this.colorModal || this.color,
zones: this.zonesString,
troubles: this.troublesString,
armed: this.armed,
alarm: this.alarm,
zoneopened: this.zones.find(z => (z.state === 'open')) ? true : false,
hastroubles: this.troubles.length > 0,
icon: this.icon,
loading: this.loading,
onArm: () => this.arm(),
onDisarm: () => this.disarm(),
onOutput: (evt) => {
this.loading = true;
this.output.emit(evt.detail);
},
};
return [
h("lar-node", { key: 'f4d76b79f0f754bd1c672f2c10e853ac11838452', value: value, hideTitles: this.hideTitles, valueTranslationValues: valueTranslationValues, iconSmall: iconSmall, icon: this.icon, colorIconSmall: iconSmallColor, color: this.alarm && this.allowNodeAutoColoring === true ? 'danger' : this.color, supTitle: this.supTitle, mainTitle: this.mainTitle, subTitle: this.subTitle, colorModal: this.alarm && this.allowNodeAutoColoring === true ? 'danger' : this.colorModal, colorInputs: this.colorInputs, log: this.log, loading: this.loading, nodeSize: this.nodeSize, component: "lar-area-content", componentProps: componentProps }, this.enableSecurityQuickActions === true &&
h("lar-button-push", { key: 'b2a6c303bb9c096c499229f2d3acd77e31f1bd2a', size: "small", slot: "titles", color: this.colorInputs || this.color, disabled: this.loading || (this.zoneopened && !this.armed) || this.troubles.length > 0, onClick: ev => this.armed ? this.disarm() : this.arm() }), h("slot", { key: '8283b482e42c33b91a44cc1882be1e648a9e1920' })),
];
}
static get is() { return "lar-area"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["area.scss"]
};
}
static get styleUrls() {
return {
"$": ["area.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Component main icon"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon",
"defaultValue": "'security'"
},
"color": {
"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.\nDetrouble options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color",
"defaultValue": "'primary'"
},
"colorModal": {
"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 Components modal window."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-modal"
},
"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"
},
"colorIconSmall": {
"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": "The color to use from your application's color palette for indication icon"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color-icon-small"
},
"allowIndicationAutoColoring": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Allow node indication color automatic change based on feedback/node value. Defaults to false"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "allow-indication-auto-coloring",
"defaultValue": "false"
},
"allowNodeAutoColoring": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Allow node color automatic change based on feedback/node value. Defaults to true"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "allow-node-auto-coloring",
"defaultValue": "true"
},
"enableSecurityQuickActions": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enable quick action for security node"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "enable-security-quick-actions",
"defaultValue": "false"
},
"hideTitles": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Hide node titles"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "hide-titles"
},
"supTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Component superscript title"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "sup-title"
},
"subTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Component subtitle"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "sub-title"
},
"log": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is logging for this component enabled (lar-log subcomponent loaded)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "log",
"defaultValue": "false"
},
"mainTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Component main title"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "main-title"
},
"nodeSize": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Size",
"resolved": "\"default\" | \"small\"",
"references": {
"Size": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::Size"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Node size"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "node-size",
"defaultValue": "'default'"
}
};
}
static get states() {
return {
"zonesString": {},
"armed": {},
"zoneopened": {},
"exitDelayActive": {},
"entryDelayActive": {},
"transactionDelay": {},
"alarm": {},
"troublesString": {},
"loading": {}
};
}
static get events() {
return [{
"method": "output",
"name": "output",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link ../readme.md} chapter \"Components input and output\" for further information."
}],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "request",
"name": "request",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link ../readme.md} chapter \"Sub-Components requests and responses\" for further information."
}],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"input": {
"complexType": {
"signature": "(data: any) => Promise<void>",
"parameters": [{
"name": "data",
"type": "any",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Larva input message",
"tags": []
}
},
"error": {
"complexType": {
"signature": "(data: any) => Promise<void>",
"parameters": [{
"name": "data",
"type": "any",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Larva error input",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=area.js.map