${this.createBrightnessSlider(t)}
@@ -78,7 +335,7 @@
${this.createColorPicker(t)}
${this.createEffectList(t)}
- `}createHeader(t){if(!1===this.config.header)return k``;const e=this.config.header||t.attributes.friendly_name||t.entity_id;return k`
+ `}createHeader(t){if(!1===this.config.header)return C``;const e=this.config.header||t.attributes.friendly_name||t.entity_id;return C`
- `}createBrightnessSlider(t){return!1===this.config.brightness?k``:this.dontShowFeature("brightness",t)?k``:k`
+ `}createBrightnessSlider(t){return!1===this.config.brightness?C``:this.dontShowFeature("brightness",t)?C``:C`
- this.setBrightness(e,t)}"
- min="1"
- max="255"
- >
+ this.setBrightness(e,t)}" min="1"
+ max="255">
- `}createColorTemperature(t){return!1===this.config.color_temp?k``:this.dontShowFeature("colorTemp",t)?k``:k`
+ `}createColorTemperature(t){return!1===this.config.color_temp?C``:this.dontShowFeature("colorTemp",t)?C``:C`
- this.setColorTemp(e,t)}"
- >
+ this.setColorTemp(e,t)}">
+
- `}createWhiteValue(t){return!1===this.config.white_value?k``:this.dontShowFeature("whiteValue",t)?k``:k`
+ `}createWhiteValue(t){return!1===this.config.white_value?C``:this.dontShowFeature("whiteValue",t)?C``:C`
- this.setWhiteValue(e,t)}"
- >
+ this.setWhiteValue(e,t)}">
+
- `}createEffectList(t){if(!1===this.config.effects_list)return k``;if(!this.config.persist_features&&!this.isEntityOn(t))return k``;let e=t.attributes.effect_list||[];if(this.config.effects_list&&Array.isArray(this.config.effects_list))e=this.config.effects_list;else if(this.config.effects_list&&this.hass.states[this.config.effects_list]){const t=this.hass.states[this.config.effects_list];e=t.attributes&&t.attributes.options||[]}else if(this.dontShowFeature("effectList",t))return k``;const s=e.map(t=>k`
${t}`),i=e.indexOf(t.attributes.effect),r=this.language["ui.card.light.effect"];return k`
+ `}createEffectList(t){if(!1===this.config.effects_list)return C``;if(!this.config.persist_features&&!this.isEntityOn(t))return C``;let e=t.attributes.effect_list||[];if(this.config.effects_list&&Array.isArray(this.config.effects_list))e=this.config.effects_list;else if(this.config.effects_list&&this.hass.states[this.config.effects_list]){const t=this.hass.states[this.config.effects_list];e=t.attributes&&t.attributes.options||[]}else if(this.dontShowFeature("effectList",t))return C``;const n=e.map(t=>C`
${t}`),r=e.indexOf(t.attributes.effect),i=this.language["ui.card.light.effect"];return C`
-
this.setEffect(e,t)} label="${r}">
-
- ${s}
+ this.setEffect(e,t)} label="${i}">
+
+ ${n}
- `}createColorPicker(t){return!1===this.config.color_picker?k``:this.dontShowFeature("color",t)?k``:k`
+ `}createColorPicker(t){return!1===this.config.color_picker?C``:this.dontShowFeature("color",t)?C``:C`
- this.setColorPicker(e,t)}
- >
+ this.setColorPicker(e,t)}
+ >
- `}dontShowFeature(t,e){return!(it.featureNames[t]&e.attributes.supported_features)||(!this.config.persist_features&&!this.isEntityOn(e)||void 0)}generateColorPickerId(t){return`light-entity-card-${t.entity_id.replace(".","-")}`}setColorPicker(t,e){this.callEntityService({hs_color:[t.detail.hs.h,100*t.detail.hs.s]},e)}setBrightness(t,e){const s=parseInt(t.target.value,0);isNaN(s)||parseInt(e.attributes.brightness,0)===s||this.callEntityService({brightness:s},e)}setColorTemp(t,e){const s=parseInt(t.target.value,0);isNaN(s)||parseInt(e.attributes.color_temp,0)===s||this.callEntityService({color_temp:s},e)}setWhiteValue(t,e){const s=parseInt(t.target.value,0);isNaN(s)||parseInt(e.attributes.white_value,0)===s||this.callEntityService({white_value:s},e)}setToggle(t,e){const s=this.isEntityOn(e)?it.cmdToggle.off:it.cmdToggle.on;this.callEntityService({},e,s)}setEffect(t,e){this.callEntityService({effect:t.detail.value},e)}callEntityService(t,e,s){if(this._isUpdating)return;const i=e.entity_id.split(".")[0];this.hass.callService(i,s||it.cmdToggle.on,{entity_id:e.entity_id,...t})}}customElements.define("light-entity-card",it)}();
+ `}dontShowFeature(t,e){return!(dt.featureNames[t]&e.attributes.supported_features)||(!this.config.persist_features&&!this.isEntityOn(e)||void 0)}generateColorPickerId(t){return`light-entity-card-${t.entity_id.replace(".","-")}`}setColorPicker(t,e){this.callEntityService({hs_color:[t.detail.hs.h,100*t.detail.hs.s]},e)}setBrightness(t,e){const n=parseInt(t.target.value,0);isNaN(n)||parseInt(e.attributes.brightness,0)===n||this.callEntityService({brightness:n},e)}setColorTemp(t,e){const n=parseInt(t.target.value,0);isNaN(n)||parseInt(e.attributes.color_temp,0)===n||this.callEntityService({color_temp:n},e)}setWhiteValue(t,e){const n=parseInt(t.target.value,0);isNaN(n)||parseInt(e.attributes.white_value,0)===n||this.callEntityService({white_value:n},e)}setToggle(t,e){const n=this.isEntityOn(e)?dt.cmdToggle.off:dt.cmdToggle.on;this.callEntityService({},e,n)}setEffect(t,e){this.callEntityService({effect:t.detail.value},e)}callEntityService(t,e,n){if(this._isUpdating)return;const r=e.entity_id.split(".")[0];this.hass.callService(r,n||dt.cmdToggle.on,{entity_id:e.entity_id,...t})}}customElements.define("light-entity-card",dt)}]);
\ No newline at end of file
diff --git a/package.json b/package.json
index 0e093fb..34e17e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "light-entity-card",
- "version": "2.3.1",
+ "version": "2.4.0",
"description": "A light-entity card for Home Assistant Lovelace UI",
"keywords": [
"home-assistant",
@@ -11,8 +11,6 @@
"custom-cards",
"light-entity"
],
- "main": "main.js",
- "module": "main.js",
"repository": "git@github.com:ljmerza/light-entity-card.git",
"author": "Leonardo Merza
",
"license": "MIT",
@@ -20,19 +18,22 @@
"lit-element": "^2.0.1"
},
"devDependencies": {
+ "@babel/cli": "^7.4.3",
+ "@babel/core": "^7.4.3",
+ "@babel/plugin-transform-modules-umd": "^7.2.0",
+ "@babel/polyfill": "^7.4.3",
+ "@babel/preset-env": "^7.4.3",
+ "babel-loader": "^8.0.5",
"eslint": "^5.13.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.16.0",
- "rollup": "^0.66.6",
- "rollup-plugin-commonjs": "^9.2.0",
- "rollup-plugin-node-resolve": "^3.4.0",
- "rollup-plugin-replace": "^2.1.0",
- "rollup-plugin-terser": "^3.0.0"
+ "webpack": "^4.29.6",
+ "webpack-cli": "^3.3.0",
+ "webpack-merge": "^4.2.1"
},
"scripts": {
- "build": "npm run lint && npm run rollup",
- "rollup": "rollup -c",
- "lint": "eslint main.js style.js",
- "watch": "rollup -c --watch"
+ "lint": "eslint ./src",
+ "start": "webpack --watch --config webpack/config.dev.js",
+ "build": "webpack --config webpack/config.prod.js"
}
}
diff --git a/rollup.config.js b/rollup.config.js
deleted file mode 100644
index fa04f9c..0000000
--- a/rollup.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import { terser } from "rollup-plugin-terser";
-
-export default {
- input: 'main.js',
- output: {
- file: 'light-entity-card.js',
- format: 'iife'
- },
- plugins: [
- resolve(),
- commonjs(),
- terser()
- ]
-};
\ No newline at end of file
diff --git a/src/defaults.js b/src/defaults.js
new file mode 100644
index 0000000..acaf9f8
--- /dev/null
+++ b/src/defaults.js
@@ -0,0 +1,9 @@
+export default {
+ group: false,
+ color_wheel: true,
+ persist_features: false,
+ brightness: true,
+ color_temp: true,
+ white_value: true,
+ color_picker: true,
+};
diff --git a/src/index-editor.js b/src/index-editor.js
new file mode 100644
index 0000000..f8b3164
--- /dev/null
+++ b/src/index-editor.js
@@ -0,0 +1,157 @@
+import { LitElement, html } from 'lit-element';
+import style from './style-editor';
+import defaultConfig from './defaults';
+
+
+const fireEvent = (node, type, detail = {}, options = {}) => {
+ const event = new Event(type, {
+ bubbles: options.bubbles === undefined ? true : options.bubbles,
+ cancelable: Boolean(options.cancelable),
+ composed: options.composed === undefined ? true : options.composed,
+ });
+
+ event.detail = detail;
+ node.dispatchEvent(event);
+ return event;
+};
+
+
+export default class LightEntityCardEditor extends LitElement {
+ static get styles() {
+ return style;
+ }
+
+ static get properties() {
+ return { hass: {}, _config: {} };
+ }
+
+ setConfig(config) {
+ this._config = {
+ ...defaultConfig,
+ ...config
+ };
+ }
+
+ get entityOptions() {
+ return Object.keys(this.hass.states).filter(eid => {
+ return ['switch', 'light', 'group'].includes( eid.substr(0, eid.indexOf('.')) )
+ });
+ }
+
+ firstUpdated(){
+ this._firstRendered = true;
+ }
+
+ render() {
+ if (!this.hass) {
+ return html``;
+ }
+
+ return html`
+
+
+
+
+
+
+
+ ${
+ this.entityOptions.map(entity => {
+ return html`${entity}`;
+ })
+ }
+
+
+
+
+
+
+
+
Show Color Wheel
+
Group Entities
+
+
+
+
Persist Features
+
Show Brightness
+
+
+
+
Show Color Temp
+
Show White Value
+
+
+
+
Show Color Picker
+
Show Effects List
+
+
+
+
+
+ `;
+ }
+
+ _valueChanged(ev) {
+ console.log({ ev });
+
+ if (!this._config || !this.hass || !this._firstRendered) return;
+ const { target: { configValue, value }, detail: { value: checkedValue} } = ev;
+
+ if (checkedValue !== undefined || checkedValue !== null){
+ this._config = { ...this._config, [configValue]: checkedValue };
+ } else {
+ this._config = { ...this._config, [configValue]: value };
+ }
+
+ console.log(this._config);
+ fireEvent(this, 'config-changed', { config: this._config });
+ }
+}
+
diff --git a/main.js b/src/index.js
similarity index 89%
rename from main.js
rename to src/index.js
index fbba4c5..d3fbf6c 100644
--- a/main.js
+++ b/src/index.js
@@ -1,7 +1,15 @@
+import '@babel/polyfill';
import { LitElement, html } from 'lit-element';
import style from './style';
+import defaultConfig from './defaults';
+import LightEntityCardEditor from './index-editor';
+
+
+const editorName = 'light-entity-card-editor';
+customElements.define(editorName, LightEntityCardEditor);
+
class LightEntityCard extends LitElement {
static get properties() {
@@ -11,6 +19,23 @@ class LightEntityCard extends LitElement {
};
}
+ /**
+ * checks and saves config of entity
+ * @param {*} config
+ */
+ setConfig(config) {
+ if (!config.entity) throw Error('entity required.');
+
+ this.config = {
+ ...defaultConfig,
+ ...config,
+ };
+ }
+
+ static async getConfigElement() {
+ return document.createElement(editorName);
+ }
+
static get featureNames() {
return {
brightness: 1,
@@ -35,10 +60,6 @@ class LightEntityCard extends LitElement {
};
}
- constructor() {
- super();
- }
-
/**
* get the current size of the card
* @return {Number}
@@ -122,24 +143,6 @@ class LightEntityCard extends LitElement {
});
}
- /**
- * checks and saves config of entity
- * @param {*} config
- */
- setConfig(config) {
- if (!config.entity) throw Error('entity required.');
-
- this.config = {
- group: false,
- persist_features: false,
- brightness: true,
- color_temp: true,
- white_value: true,
- color_picker: true,
- ...config,
- };
- }
-
/**
* generates a card for each given entiy in the config
* @return {TemplateResult}
@@ -176,7 +179,7 @@ class LightEntityCard extends LitElement {
*/
createCard(stateObj) {
return html`
-