diff --git a/README.md b/README.md index 46d5d9c..29219d7 100644 --- a/README.md +++ b/README.md @@ -22,3 +22,12 @@ elements: image: /local/images/floorplan.svg type: picture-elements ``` + +### Options + +| Name | Type | Requirement | Description | Default | +| ----------------- | ------- | ------------ | ------------------------------------------- | ------------------- | +| type | string | **Required** | `custom:cover-icon-element` | | +| entity | string | **Required** | Home Assistant cover entity ID. | | +| breakpoints | array | **Optional** | Sorted array of 4 elements which maps a cover's position to the number of bars shown in the Icon.
     0 - arr[0] => 4 bars 
arr[0] - arr[1] => 3 bars
arr[1] - arr[2] => 2 bars
arr[2] - arr[3] => 1 bars
arr[3] - 100 => 0 bars
| `[1, 50, 75, 100]` | +| style | object | **Optional** | CSS style properties to apply | | diff --git a/cover-icon-element.js b/cover-icon-element.js index 9a35a5b..d7977cd 100644 --- a/cover-icon-element.js +++ b/cover-icon-element.js @@ -1,8 +1,12 @@ class CoverIconElement extends HTMLElement { + defaults = { + breakpoints: [1, 50, 75, 100] + } + setImage(hass) { if (hass && this._config) { - let image = CoverIconElement.dataImage0; + let image = CoverIconElement.dataImage4; if (this._config.entity) { const stateObj = hass.states[this._config.entity]; @@ -12,16 +16,16 @@ class CoverIconElement extends HTMLElement { if (state === "closing") { image = CoverIconElement.dataImageClosing; - } else if(state === "opening") { + } else if(state === "opening") { image = CoverIconElement.dataImageOpening; - } else if (position === 0) { - image = CoverIconElement.dataImage4; - } else if (position > 0 && position <= 50) { - image = CoverIconElement.dataImage3; - } else if (position > 50 && position <= 77) { - image = CoverIconElement.dataImage2; - } else if (position > 77 && position <= 99) { + } else if (position >= this._config.breakpoints[3]) { + image = CoverIconElement.dataImage0; + } else if (position >= this._config.breakpoints[2]) { image = CoverIconElement.dataImage1; + } else if (position >= this._config.breakpoints[1]) { + image = CoverIconElement.dataImage2; + } else if (position >= this._config.breakpoints[0]) { + image = CoverIconElement.dataImage3; } } } @@ -36,12 +40,31 @@ class CoverIconElement extends HTMLElement { } } - async setConfig(config) { + validateConfig(oldConfig) { + const config = {...this.defaults, ...oldConfig}; + + if (!(Array.isArray(config.breakpoints) && config.breakpoints.length === 4)) { + throw new Error("Config 'breakpoints' must be an 4 element number array"); + } else { + config.breakpoints.reduce((prev, curr) => { + if (prev >= curr) { + throw new Error("Config 'breakpoints' elements must be sorted in ascending order"); + } + }) + } + + return config; + } + + setConfig(config) { if (!this.img) { this.img = document.createElement('hui-image-element'); this.appendChild(this.img); } - this._config = config; + + const configWithDefaults = this.validateConfig(config); + + this._config = configWithDefaults; this.setImage(); }