@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
554 lines (553 loc) • 20.4 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { h } from "@stencil/core";
import isArray from "lodash-es/isArray";
import isObject from "lodash-es/isObject";
import isNumber from "lodash-es/isNumber";
import clone from "lodash-es/clone";
import { DoorState } from "./sliding-door-interface";
export class SlidingDoorNode {
constructor() {
/////// LarvaNode base properties
/**
* Component main icon
*/
this.icon = 'off';
/**
* 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';
/**
* Disable quck actions
*/
this.disableQuickActions = false;
/**
* Allow node indication color automatic change based on feedback/node value. Defaults to false
*/
this.allowIndicationAutoColoring = false;
/**
* Is logging for this component enabled (lar-log subcomponent loaded)
*/
this.log = true;
/**
* Node size
*/
this.nodeSize = 'default';
/////// LarvaNode base properties and events - end
this.loading = true;
this.fullState = {
doorState: undefined,
doorStateString: DoorState.UNKNOWN,
slidingTimerRunning: false,
slidingTimerElapsed: 0,
slidingTimerTimeout: 0,
slidingTimerStartedAt: 0,
stopEnabled: false
};
}
componentDidLoad() {
const el = this.el.shadowRoot || this.el;
this.node = el.querySelector('lar-node');
this.output.emit({ command: 'get' });
}
/**
* Larva error input
*/
async error(data) {
if (this.node) {
this.node.error(data);
}
this.loading = false;
}
/**
* Input Larva event message (see above)
*/
async input(data) {
if (isArray(data)) {
// this is the door output message with [open, close, stop] booleans
}
else if (isObject(data)) {
const lastState = clone(this.fullState);
this.fullState = data;
if (this.fullState.slidingTimerRunning && isNumber(this.fullState.slidingTimerElapsed) && isNumber(this.fullState.slidingTimerTimeout)) {
if (!this.timer || lastState.slidingTimerStartedAt !== this.fullState.slidingTimerStartedAt) {
// restart the timer if slidingTimerStartedAt has changed
this.startTimer();
}
}
if (!this.fullState.slidingTimerRunning && this.timer) {
this.resetTimer();
}
}
this.loading = false;
}
resetTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
}
startTimer() {
this.timerValue = this.fullState.slidingTimerElapsed;
const intervalTime = 1000;
this.resetTimer();
this.timer = setInterval(() => {
try {
if (!this.fullState.slidingTimerRunning || this.timerValue > this.fullState.slidingTimerTimeout) {
this.resetTimer();
// timer should have been stopped by now
// make read request to get the state
this.output.emit({ command: 'get' });
this.loading = true;
}
this.timerValue += intervalTime;
}
catch (err) {
console.error(err);
}
}, intervalTime);
}
sendCommand(cmd) {
this.output.emit({ command: cmd });
this.loading = true;
}
render() {
let value = this.loading ? '' : 'slidingDoor.stateUnknown';
let iconSmall = '';
let colorIconSmall = this.colorIconSmall;
switch (this.fullState.doorStateString) {
case DoorState.CLOSED: {
value = 'slidingDoor.stateClosed';
iconSmall = 'lock';
colorIconSmall = this.allowIndicationAutoColoring ? 'success' : this.colorIconSmall;
break;
}
case DoorState.OPEN: {
value = 'slidingDoor.stateOpen';
iconSmall = 'unlock';
colorIconSmall = this.allowIndicationAutoColoring ? 'danger' : this.colorIconSmall;
break;
}
case DoorState.OPENING: {
iconSmall = 'moving-cogs';
value = 'slidingDoor.stateOpening';
break;
}
case DoorState.CLOSING: {
iconSmall = 'moving-cogs';
value = 'slidingDoor.stateClosing';
break;
}
}
const componentProps = {
doorState: this.fullState.doorStateString,
stopEnabled: Boolean(this.fullState.stopEnabled),
color: this.colorInputs || this.color,
loading: this.loading,
onSendcommand: (ev) => this.sendCommand(ev.detail),
};
return (h("lar-node", { key: '390a6cfd0d7a6325c6b58d536c3837361ead69d6', value: value, hideTitles: this.hideTitles, icon: this.icon, iconSmall: iconSmall, color: this.color, supTitle: this.supTitle, mainTitle: this.mainTitle, subTitle: this.subTitle, colorModal: this.colorModal, colorInputs: this.colorInputs, colorIconSmall: colorIconSmall, loading: this.loading, log: this.log, nodeSize: this.nodeSize, component: "sliding-door-content", componentProps: componentProps }, this.disableQuickActions === false &&
h("lar-button-push", { key: '9c30b34b67b21e064356b40937db5cb293cf7151', size: "small", slot: "titles", color: this.colorInputs || this.color, disabled: this.loading || this.fullState.slidingTimerRunning || !this.fullState.doorStateString || this.fullState.doorStateString === DoorState.UNKNOWN || this.fullState.doorStateString === DoorState.OPENING || this.fullState.doorStateString === DoorState.CLOSING, onClick: ev => this.fullState.doorStateString === DoorState.CLOSED ? this.sendCommand('open') : this.sendCommand('close') }), h("slot", { key: '7d45b188ba352f169058e0c0af03204badb1b11a' })));
}
static get is() { return "lar-sliding-door"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["sliding-door.scss"]
};
}
static get styleUrls() {
return {
"$": ["sliding-door.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": "'off'"
},
"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"
},
"disableQuickActions": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disable quck actions"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disable-quick-actions",
"defaultValue": "false"
},
"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"
},
"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": "true"
},
"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 {
"loading": {},
"doorState": {},
"fullState": {},
"timerValue": {}
};
}
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 {
"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": []
}
},
"input": {
"complexType": {
"signature": "(data: SlidingDoorState) => Promise<void>",
"parameters": [{
"name": "data",
"type": "SlidingDoorState",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"SlidingDoorState": {
"location": "import",
"path": "./sliding-door-interface",
"id": "src/components/sliding-door/sliding-door-interface.tsx::SlidingDoorState"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Input Larva event message (see above)",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=sliding-door.js.map