Merge pull request #199 from FamousWolf/dev

[MERGE] Changes for release 1.10.1

Author: FamousWolf

README.md

@@ -39,7 +39,7 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit
     Add:
     ```yaml
     resources:
-      - url: /local/week-planner-card.js?version=1.10.0
+      - url: /local/week-planner-card.js?version=1.10.1
     type: module
     ```
   - **Using the graphical editor**

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "week-planner-card",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Custom Home Assistant card to display events for a number of days from one or several calendars.",
   "source": "src/index.js",
   "module": "dist/week-planner-card.js",

package.json

@@ -4,6 +4,17 @@ import styles from './editor.styles';
 export class WeekPlannerCardEditor extends LitElement {
     static styles = styles;
 
+    connectedCallback() {
+        super.connectedCallback();
+        this.loadCustomElements();
+    }
+
+    async loadCustomElements() {
+        if (!customElements.get("ha-entity-picker")) {
+            await customElements.get("hui-entities-card").getConfigElement();
+        }
+    }
+
     static get properties() {
         return {
             hass: {},
@@ -31,10 +42,10 @@ export class WeekPlannerCardEditor extends LitElement {
                                 ${this.addExpansionPanel(
                                     `Calendar: ${calendar.name ?? calendar.entity}`,
                                     html`
-                                        ${this.addTextField('calendars.' + index + '.entity', 'Entity')}
+                                        ${this.addEntityPickerField('calendars.' + index + '.entity', 'Entity', ['calendar'])}
                                         ${this.addTextField('calendars.' + index + '.name', 'Name')}
                                         ${this.addTextField('calendars.' + index + '.color', 'Color')}
-                                        ${this.addTextField('calendars.' + index + '.icon', 'Icon')}
+                                        ${this.addIconPickerField('calendars.' + index + '.icon', 'Icon')}
                                         ${this.addTextField('calendars.' + index + '.filter', 'Filter events (regex)')}
                                         ${this.addTextField('calendars.' + index + '.filterText', 'Filter event text (regex)')}
                                         ${this.addBooleanField('calendars.' + index + '.hideInLegend', 'Hide in legend')}
@@ -125,7 +136,7 @@ export class WeekPlannerCardEditor extends LitElement {
                 ${this.addExpansionPanel(
                     'Weather',
                     html`
-                        ${this.addTextField('weather.entity', 'Weather entity')}
+                        ${this.addEntityPickerField('weather.entity', 'Weather entity', ['weather'])}
                         ${this.addBooleanField('weather.showCondition', 'Show condition icon')}
                         ${this.addBooleanField('weather.showTemperature', 'Show temperature')}
                         ${this.addBooleanField('weather.showLowTemperature', 'Show low temperature')}
@@ -181,6 +192,31 @@ export class WeekPlannerCardEditor extends LitElement {
         `;
     }
 
+    addEntityPickerField(name, label, includeDomains) {
+        return html`
+            <ha-entity-picker
+                .hass="${this.hass}"
+                name="${name}"
+                label="${label ?? name}"
+                value="${this.getConfigValue(name)}"
+                .includeDomains="${includeDomains}"
+                @change="${this._valueChanged}"
+            />
+        `;
+    }
+
+    addIconPickerField(name, label) {
+        return html`
+            <ha-icon-picker
+                .hass="${this.hass}"
+                name="${name}"
+                label="${label ?? name}"
+                value="${this.getConfigValue(name)}"
+                @change="${this._valueChanged}"
+            />
+        `;
+    }
+
     addSelectField(name, label, options, clearable) {
         return html`
             <ha-select

src/editor.js

@@ -5,7 +5,9 @@ export default css`
     ha-select,
     ha-formfield,
     ha-expansion-panel,
-    ha-button {
+    ha-button,
+    ha-entity-picker,
+    ha-icon-picker {
       margin: 8px 0;
     }
 `;