base attempt for cardpicker

snootched · Jan 3, 2025 · b0613e7 · b0613e7
1 parent 4dbc1b3
commit b0613e7
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ha-editor-formbuilder-yaml",
-  "version": "2025.01.1-beta.1",
+  "version": "2025.01.2-beta.1",
   "description": "A reimplementation of ha-editor-formbuilder - supporting YAML configuration of HA Selector controls, conditional expresssions, and more.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/controls.ts b/src/controls.ts
@@ -86,7 +86,7 @@ export function generateControl(control: AnyControl, card: EditorForm){
 
      - controls:
         - label: "options from vars"
-          configValue: "cblcars_card_config.variables.card.color.background.inactive"
+          configValue: "variables.card.color.background.inactive"
           type: Selector
           selector:
             select:
@@ -112,23 +112,38 @@ export function generateControl(control: AnyControl, card: EditorForm){
 
     switch (control.type) {
 
-        case 'Selector':
-        return html`
-            <div class="form-control">
-            <ha-selector
-                .hass=${card._hass}
-                .selector=${control.selector}
-                .configValue=${control.configValue}
-                .value=${getNestedProperty(card._config, control.configValue)}
-                .label=${control.label}
-                .helper=${control.helper}
-                .disabled=${isDisabled}
-                .required=${isRequired}
-                @value-changed=${card._valueChanged}
-            ></ha-selector>
-            </div>
+        case 'CardPicker':
+            return html`
+                <div class="form-control">
+                    <ha-card-picker
+                        .hass=${card._hass}
+                        .value=${getNestedProperty(card._config, control.configValue)}
+                        .label=${control.label}
+                        .helper=${control.helper}
+                        .disabled=${isDisabled}
+                        .required=${isRequired}
+                        @value-changed=${card._cardPicked}
+                    ></ha-card-picker>
+                </div>
             `;
 
+        case 'Selector':
+            return html`
+                <div class="form-control">
+                <ha-selector
+                    .hass=${card._hass}
+                    .selector=${control.selector}
+                    .configValue=${control.configValue}
+                    .value=${getNestedProperty(card._config, control.configValue)}
+                    .label=${control.label}
+                    .helper=${control.helper}
+                    .disabled=${isDisabled}
+                    .required=${isRequired}
+                    @value-changed=${card._valueChanged}
+                ></ha-selector>
+                </div>
+                `;
+
         case 'Filler':
             return html`<div class="form-control"></div>`;
 

diff --git a/src/index.ts b/src/index.ts
@@ -297,6 +297,33 @@ export default class EditorForm extends LitElement {
         }
     }
 
+
+    //CardPicker methods
+    _cardPicked(event: CustomEvent) {
+        const cardConfig = event.detail.value;
+        this._loadChildCardEditor(cardConfig);
+    }
+
+    async _loadChildCardEditor(cardConfig: any) {
+        const cardElement = await this._createCardElement(cardConfig);
+        const editorElement = await this._loadCardEditor(cardElement, cardConfig);
+
+        // Render the child card editor within your form builder
+        this.shadowRoot.querySelector('#child-card-editor').appendChild(editorElement);
+    }
+
+
+    async _createCardElement(cardConfig: LovelaceCardConfig): Promise<HTMLElement & { setConfig: (config: LovelaceCardConfig) => void }> {
+        const cardElement = document.createElement(cardConfig.type) as HTMLElement & { setConfig: (config: LovelaceCardConfig) => void };
+        cardElement.setConfig(cardConfig);
+        return cardElement;
+    }
+
+    async _loadCardEditor(cardElement: HTMLElement & { setConfig: (config: LovelaceCardConfig) => void }, cardConfig: LovelaceCardConfig): Promise<HTMLElement & { setConfig: (config: LovelaceCardConfig) => void }> {
+        const editorElement = document.createElement(`${cardElement.localName}-editor`) as HTMLElement & { setConfig: (config: LovelaceCardConfig) => void };
+        editorElement.setConfig(cardConfig); // Pass the configuration directly
+        return editorElement;
+    }
     static get styles() {
         const baseStyles = css`
             /* Base styles for the form container */

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -34,6 +34,12 @@ export interface Control {
     visibilityCondition?: any;
     disabledCondition?: any;
     requiredCondition?: any;
+    alertType?: string;
+    title?: string;
+    message?: string;
+    html?: string;
+    selector?: any;
+
 }
 
 export interface SelectorControl extends Control {
@@ -72,6 +78,15 @@ export interface ColorPreviewControl extends Control {
   configValue: string;
 }
 
+export interface CardPickerControl extends Control{
+  hass: any;
+  value: any;
+  label: string;
+  helper?: string;
+  disabled?: boolean;
+  required?: boolean;
+}
+
 export interface ControlRow {
     label?: string;
     type?: string;
@@ -112,7 +127,8 @@ export type AnyControl =
     | RawHTMLControl
     | DividerControl
     | FillerControl
-    | ColorPreviewControl;
+    | ColorPreviewControl
+    | CardPickerControl;
 
 export function isSection(row: ControlRow | Section): row is Section {
     return row.type === 'Section';