feat(#77): Basic visual editor support

Author: MindFreeze

src/editor.ts

@@ -4,53 +4,14 @@ import { HomeAssistant, fireEvent, LovelaceCardEditor, ActionConfig } from 'cust
 
 import { SankeyChartConfig } from './types';
 import { customElement, property, state } from 'lit/decorators';
+import { localize } from './localize/localize';
 
-const options = {
-  required: {
-    icon: 'tune',
-    name: 'Required',
-    secondary: 'Required options for this card to function',
-    show: true,
-  },
-  actions: {
-    icon: 'gesture-tap-hold',
-    name: 'Actions',
-    secondary: 'Perform actions based on tapping/clicking',
-    show: false,
-    options: {
-      tap: {
-        icon: 'gesture-tap',
-        name: 'Tap',
-        secondary: 'Set the action to perform on tap',
-        show: false,
-      },
-      hold: {
-        icon: 'gesture-tap-hold',
-        name: 'Hold',
-        secondary: 'Set the action to perform on hold',
-        show: false,
-      },
-      double_tap: {
-        icon: 'gesture-double-tap',
-        name: 'Double Tap',
-        secondary: 'Set the action to perform on double tap',
-        show: false,
-      },
-    },
-  },
-  appearance: {
-    icon: 'palette',
-    name: 'Appearance',
-    secondary: 'Customize the name, icon, etc',
-    show: false,
-  },
-};
+type MutateConfigFn = (config: SankeyChartConfig) => SankeyChartConfig;
 
 @customElement('sankey-chart-editor')
 export class SankeyChartEditor extends LitElement implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
   @state() private _config?: SankeyChartConfig;
-  @state() private _toggle?: boolean;
   @state() private _helpers?: any;
   private _initialized = false;
 
@@ -68,162 +29,45 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
     return true;
   }
 
-  get _name(): string {
-    return this._config?.name || '';
-  }
-
-  get _entity(): string {
-    return this._config?.entity || '';
-  }
-
-  get _show_warning(): boolean {
-    return this._config?.show_warning || false;
-  }
-
-  get _show_error(): boolean {
-    return this._config?.show_error || false;
-  }
-
-  get _tap_action(): ActionConfig {
-    return this._config?.tap_action || { action: 'more-info' };
-  }
-
-  get _hold_action(): ActionConfig {
-    return this._config?.hold_action || { action: 'none' };
-  }
-
-  get _double_tap_action(): ActionConfig {
-    return this._config?.double_tap_action || { action: 'none' };
-  }
-
   protected render(): TemplateResult | void {
     if (!this.hass || !this._helpers) {
       return html``;
     }
 
     // The climate more-info has ha-switch and paper-dropdown-menu elements that are lazy loaded unless explicitly done here
-    this._helpers.importMoreInfoControl('climate');
+    // this._helpers.importMoreInfoControl('climate');
 
     // You can restrict on domain type
-    const entities = Object.keys(this.hass.states).filter(eid => eid.substr(0, eid.indexOf('.')) === 'sun');
+    // const entities = Object.keys(this.hass.states).filter(eid => eid.substr(0, eid.indexOf('.')) === 'sun');
 
     return html`
       <div class="card-config">
-        <div class="option" @click=${this._toggleOption} .option=${'required'}>
-          <div class="row">
-            <ha-icon .icon=${`mdi:${options.required.icon}`}></ha-icon>
-            <div class="title">${options.required.name}</div>
-          </div>
-          <div class="secondary">${options.required.secondary}</div>
-        </div>
-        ${options.required.show
-          ? html`
-              <div class="values">
-                <paper-dropdown-menu
-                  label="Entity (Required)"
-                  @value-changed=${this._valueChanged}
-                  .configValue=${'entity'}
-                >
-                  <paper-listbox slot="dropdown-content" .selected=${entities.indexOf(this._entity)}>
-                    ${entities.map(entity => {
-                      return html`
-                        <paper-item>${entity}</paper-item>
-                      `;
-                    })}
-                  </paper-listbox>
-                </paper-dropdown-menu>
-              </div>
-            `
-          : ''}
-        <div class="option" @click=${this._toggleOption} .option=${'actions'}>
-          <div class="row">
-            <ha-icon .icon=${`mdi:${options.actions.icon}`}></ha-icon>
-            <div class="title">${options.actions.name}</div>
-          </div>
-          <div class="secondary">${options.actions.secondary}</div>
+        <div class="values">
+          <h3>${localize('editor.autoconfig')}</h3>
+          <ha-formfield .label=${localize('editor.enable')}>
+            <ha-switch
+              .checked=${!!this._config?.autoconfig}
+              .configValue=${(conf, val) => {
+                const newConf = { ...conf };
+                if (val && !conf.autoconfig) {
+                  newConf.autoconfig = { print_yaml: false };
+                } else if (!val && conf.autoconfig) {
+                  delete newConf.autoconfig;
+                }
+                return newConf;
+              }}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-formfield>
+          <ha-formfield .label=${localize('editor.print')}>
+            <ha-switch
+              .checked=${!!this._config?.autoconfig?.print_yaml}
+              .configValue=${(conf, print_yaml) => ({ ...conf, autoconfig: { print_yaml } })}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-formfield>
         </div>
-        ${options.actions.show
-          ? html`
-              <div class="values">
-                <div class="option" @click=${this._toggleAction} .option=${'tap'}>
-                  <div class="row">
-                    <ha-icon .icon=${`mdi:${options.actions.options.tap.icon}`}></ha-icon>
-                    <div class="title">${options.actions.options.tap.name}</div>
-                  </div>
-                  <div class="secondary">${options.actions.options.tap.secondary}</div>
-                </div>
-                ${options.actions.options.tap.show
-                  ? html`
-                      <div class="values">
-                        <paper-item>Action Editors Coming Soon</paper-item>
-                      </div>
-                    `
-                  : ''}
-                <div class="option" @click=${this._toggleAction} .option=${'hold'}>
-                  <div class="row">
-                    <ha-icon .icon=${`mdi:${options.actions.options.hold.icon}`}></ha-icon>
-                    <div class="title">${options.actions.options.hold.name}</div>
-                  </div>
-                  <div class="secondary">${options.actions.options.hold.secondary}</div>
-                </div>
-                ${options.actions.options.hold.show
-                  ? html`
-                      <div class="values">
-                        <paper-item>Action Editors Coming Soon</paper-item>
-                      </div>
-                    `
-                  : ''}
-                <div class="option" @click=${this._toggleAction} .option=${'double_tap'}>
-                  <div class="row">
-                    <ha-icon .icon=${`mdi:${options.actions.options.double_tap.icon}`}></ha-icon>
-                    <div class="title">${options.actions.options.double_tap.name}</div>
-                  </div>
-                  <div class="secondary">${options.actions.options.double_tap.secondary}</div>
-                </div>
-                ${options.actions.options.double_tap.show
-                  ? html`
-                      <div class="values">
-                        <paper-item>Action Editors Coming Soon</paper-item>
-                      </div>
-                    `
-                  : ''}
-              </div>
-            `
-          : ''}
-        <div class="option" @click=${this._toggleOption} .option=${'appearance'}>
-          <div class="row">
-            <ha-icon .icon=${`mdi:${options.appearance.icon}`}></ha-icon>
-            <div class="title">${options.appearance.name}</div>
-          </div>
-          <div class="secondary">${options.appearance.secondary}</div>
-        </div>
-        ${options.appearance.show
-          ? html`
-              <div class="values">
-                <paper-input
-                  label="Name (Optional)"
-                  .value=${this._name}
-                  .configValue=${'name'}
-                  @value-changed=${this._valueChanged}
-                ></paper-input>
-                <br />
-                <ha-formfield .label=${`Toggle warning ${this._show_warning ? 'off' : 'on'}`}>
-                  <ha-switch
-                    .checked=${this._show_warning !== false}
-                    .configValue=${'show_warning'}
-                    @change=${this._valueChanged}
-                  ></ha-switch>
-                </ha-formfield>
-                <ha-formfield .label=${`Toggle error ${this._show_error ? 'off' : 'on'}`}>
-                  <ha-switch
-                    .checked=${this._show_error !== false}
-                    .configValue=${'show_error'}
-                    @change=${this._valueChanged}
-                  ></ha-switch>
-                </ha-formfield>
-              </div>
-            `
-          : ''}
+        <p>${localize('editor.yaml_disclaimer')}</p>
       </div>
     `;
   }
@@ -239,33 +83,15 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
     this._helpers = await (window as any).loadCardHelpers();
   }
 
-  private _toggleAction(ev): void {
-    this._toggleThing(ev, options.actions.options);
-  }
-
-  private _toggleOption(ev): void {
-    this._toggleThing(ev, options);
-  }
-
-  private _toggleThing(ev, optionList): void {
-    const show = !optionList[ev.target.option].show;
-    for (const [key] of Object.entries(optionList)) {
-      optionList[key].show = false;
-    }
-    optionList[ev.target.option].show = show;
-    this._toggle = !this._toggle;
-  }
-
   private _valueChanged(ev): void {
     if (!this._config || !this.hass) {
       return;
     }
     const target = ev.target;
-    if (this[`_${target.configValue}`] === target.value) {
-      return;
-    }
     if (target.configValue) {
-      if (target.value === '') {
+      if (typeof target.configValue === 'function') {
+        this._config = target.configValue(this._config, target.checked !== undefined ? target.checked : target.value);
+      } else if (target.value === '') {
         const tmpConfig = { ...this._config };
         delete tmpConfig[target.configValue];
         this._config = tmpConfig;
@@ -281,29 +107,13 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
 
   static get styles(): CSSResultGroup {
     return css`
-      .option {
-        padding: 4px 0px;
-        cursor: pointer;
-      }
-      .row {
-        display: flex;
-        margin-bottom: -14px;
-        pointer-events: none;
-      }
-      .title {
-        padding-left: 16px;
-        margin-top: -6px;
-        pointer-events: none;
-      }
-      .secondary {
-        padding-left: 40px;
-        color: var(--secondary-text-color);
-        pointer-events: none;
+      .card-config {
+        padding: 16px;
+        background: var(--secondary-background-color);
       }
       .values {
-        padding-left: 16px;
-        background: var(--secondary-background-color);
         display: grid;
+        margin-bottom: 20px;
       }
       ha-formfield {
         padding-bottom: 8px;

src/editor.ts.old

@@ -19,6 +19,7 @@ import {
 } from './energy';
 import { until } from 'lit/directives/until';
 import { getEntitiesByArea, HomeAssistantReal } from './hass';
+import { LovelaceCardEditor } from 'custom-card-helpers';
 
 /* eslint no-console: 0 */
 console.info(
@@ -40,12 +41,13 @@ const ENERGY_DATA_TIMEOUT = 10000;
 
 @customElement('sankey-chart')
 export class SankeyChart extends SubscribeMixin(LitElement) {
-  // public static async getConfigElement(): Promise<LovelaceCardEditor> {
-  //   return document.createElement('sankey-chart-editor');
-  // }
+  public static async getConfigElement(): Promise<LovelaceCardEditor> {
+    await import('./editor');
+    return document.createElement('sankey-chart-editor');
+  }
 
   public static getStubConfig(): Record<string, unknown> {
-    return {};
+    return { autoconfig: { print_yaml: false } };
   }
 
   // https://lit.dev/docs/components/properties/

src/ha-sankey-chart.ts

@@ -6,5 +6,11 @@
     "entity_not_found": "Entity state not found",
     "missing_child": "Missing child entity",
     "loading": "Loading..."
+  },
+  "editor": {
+    "yaml_disclaimer": "Please use yaml mode for the other options",
+    "autoconfig": "Autoconfig",
+    "enable": "Enable",
+    "print": "Print auto generated config yaml"
   }
 }

src/localize/languages/en.json

@@ -6,5 +6,6 @@
     "entity_not_found": "Entiteit niet gevonden",
     "missing_child": "Ontbrekende onderliggende entiteit",
     "loading": "Laden..."
-  }
+  },
+  "editor": {}
 }