feat: preview and translations

Author: MHA

README.md

@@ -6,7 +6,7 @@ Display the options of an input_select entity as a clickable list card.
 In other words: the content of the dropdown menu is displayed as a card.  
 
 Some use cases:
-* Select with (too) many options
+* Select with too many options to show in dropdown
 * Options with long titles
 * Have all options directly shown 
 * You dont't want the extra click to open the dropdown menu  

dist/select-list-card.js

@@ -1,6 +1,6 @@
 {
   "name": "select-list-card",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Lovelace select-list-card",
   "keywords": [
     "home-assistant",

package.json

@@ -1 +1 @@
-export const CARD_VERSION = '0.2.1';
+export const CARD_VERSION = '0.2.2';

src/const.ts

@@ -1,36 +1,20 @@
 import { LitElement, html, customElement, property, TemplateResult, CSSResult, css } from 'lit-element';
 import { HomeAssistant, fireEvent, LovelaceCardEditor } from 'custom-card-helpers';
-
+import { localize } from './localize/localize';
 import { SelectListCardConfig } from './types';
 
-const options = {
-  required: {
-    icon: 'tune',
-    name: 'Required',
-    secondary: 'Required options for this card to function',
-    show: true,
-  },
-  appearance: {
-    icon: 'palette',
-    name: 'Appearance',
-    secondary: 'Customize the name, max-height, truncate',
-    show: true,
-  },
-};
-
 @customElement('select-list-card-editor')
 export class SelectListCardEditor extends LitElement implements LovelaceCardEditor {
   @property() public hass?: HomeAssistant;
   @property() private _config?: SelectListCardConfig;
-  @property() private _toggle?: boolean;
 
   public setConfig(config: SelectListCardConfig): void {
     this._config = config;
   }
 
-  get _name(): string {
+  get _title(): string {
     if (this._config) {
-      return this._config.name || '';
+      return this._config.title || '';
     }
 
     return '';
@@ -62,7 +46,7 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
 
   get _max_options(): number {
     if (this._config) {
-      return this._config.max_options || 5;
+      return typeof this._config.max_options !== 'undefined' ? this._config.max_options : 5;
     }
     return 5;
   }
@@ -80,7 +64,7 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
         <div class="values">
           <div class="row">
             <paper-dropdown-menu
-              label="Entity (Required)"
+              label="${localize('editor.entity')}"
               @value-changed=${this._valueChanged}
               .configValue=${'entity'}
             >
@@ -95,15 +79,15 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
           </div>
           <div class="row">
             <paper-input
-              label="Name (Optional)"
-              .value=${this._name}
-              .configValue=${'name'}
+              label="${localize('editor.title')}"
+              .value=${this._title}
+              .configValue=${'title'}
               @value-changed=${this._valueChanged}
             ></paper-input>
           </div>
           <div class="row">
             <paper-input
-              label="Max options (0 = show all)"
+              label="${localize('editor.max_options')}"
               .value=${this._max_options}
               .configValue=${'max_options'}
               type="number"
@@ -116,36 +100,23 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
               .checked=${this._truncate}
               .configValue=${'truncate'}
               @change=${this._valueChanged}
-              >Truncate long names?</ha-switch
+              >${localize('editor.truncate')}</ha-switch
             >
           </div>
           <div class="row">
             <ha-switch
-              aria-label=${`Toggle scroll to selected ${this._truncate ? 'off' : 'on'}`}
+              aria-label=${`Toggle scroll to selected ${this._scroll_to_selected ? 'off' : 'on'}`}
               .checked=${this._scroll_to_selected}
               .configValue=${'scroll_to_selected'}
               @change=${this._valueChanged}
-              >Scroll to selected?</ha-switch
+              >${localize('editor.scroll_to_selected')}</ha-switch
             >
           </div>
         </div>
       </div>
     `;
   }
 
-  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;
@@ -156,7 +127,7 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
       return;
     }
     if (target.configValue) {
-      if (value === '') {
+      if (value === '' && target.configValue !== 'entity') {
         delete this._config[target.configValue];
       } else {
         this._config = {

src/editor.ts

@@ -1,7 +1,19 @@
 {
   "common": {
     "version": "Version",
+    "name": "Select list card",
+    "description": "Display the options of an input_select entity as a clickable list card."
+  },
+  "error": {
+    "missing_entity": "Entity is required",
     "invalid_configuration": "Invalid configuration",
-    "show_warning": "Show Warning"
+    "not_available": "Entity is not available"
+  },
+  "editor": {
+    "entity": "Entity (required)",
+    "title": "Card title (optional)",
+    "max_options": "NUmber of options shown (0 = all)",
+    "truncate": "Truncate long option name",
+    "scroll_to_selected": "Selected option always in view"
   }
 }

src/localize/languages/en.json

@@ -0,0 +1,20 @@
+
+{
+  "common": {
+    "version": "Versie",
+    "name": "Select lijst kaart",
+    "description": "Toon de opties van een input_select entiteit in een kaart"
+  },
+  "error": {
+    "missing_entity": "Het specificeren van een entiteit is verplicht!",
+    "invalid_configuration": "Geen geldige configuratie",
+    "not_available": "Entiteit is niet beschikbaar"
+  },
+  "editor": {
+    "entity": "Entiteit (verplicht)",
+    "title": "Kaart titel (optioneel)",
+    "max_options": "Aantal opties zichtbaar (0 = alles)",
+    "truncate": "Kap lange optie name af",
+    "scroll_to_selected": "Geselecteerde optie altijd zichtbaar"
+  }
+}

src/localize/languages/nb.json

@@ -1,9 +1,9 @@
 import * as en from './languages/en.json';
-import * as nb from './languages/nb.json';
+import * as nl from './languages/nl.json';
 
 var languages = {
   en: en,
-  nb: nb,
+  nl: nl,
 };
 
 export function localize(string: string, search: string = '', replace: string = '') {

src/localize/languages/nl.json

@@ -24,8 +24,9 @@ console.info(
 (window as any).customCards = (window as any).customCards || [];
 (window as any).customCards.push({
   type: 'select-list-card',
-  name: 'Select list Card',
-  description: 'Display an input_select as a list',
+  name: `${localize('common.name')}`,
+  description: `${localize('common.description')}`,
+  preview: true,
 });
 
 @customElement('select-list-card')
@@ -34,24 +35,32 @@ export class SelectListCard extends LitElement {
     return document.createElement('select-list-card-editor') as LovelaceCardEditor;
   }
 
-  public static getStubConfig(): object {
-    return {};
+  public static getStubConfig(hass, entities): object {
+    const entity = entities.find(item => item.startsWith('input_select'));
+    const dummy = hass;
+    return {
+      entity: entity || '',
+      name: '',
+      truncate: true,
+      scroll_to_selected: false,
+      max_options: 3,
+    };
   }
 
   @property() public hass!: HomeAssistant;
   @property() private config!: SelectListCardConfig;
 
   public setConfig(config: SelectListCardConfig): void {
     if (!config || !config.entity || !config.entity.startsWith('input_select') || config.show_error) {
-      throw new Error(localize('common.invalid_configuration'));
+      throw new Error(localize('error.invalid_configuration'));
     }
 
     if (config.test_gui) {
       getLovelace().setEditMode(true);
     }
 
     this.config = {
-      name: '',
+      title: '',
       truncate: true,
       scroll_to_selected: true,
       max_options: 5,
@@ -64,11 +73,24 @@ export class SelectListCard extends LitElement {
   }
 
   protected render(): TemplateResult | void {
+    if (!this.config.entity) {
+      return html`
+        <ha-card>
+          <div class="preview not-available">
+            <div class="metadata">
+              <div class="not-available">
+                ${localize('error.not_available')}
+              </div>
+            <div>
+          </div>
+        </ha-card>
+      `;
+    }
     const selected = this.hass.states[this.config.entity].state;
     const options = this.hass.states[this.config.entity].attributes.options;
-    const style = this.config.max_options === 0 ? '' : `max-height: ${(this.config.max_options || 5) * 48}px`;
+    const style = this.config.max_options === 0 ? '' : `max-height: ${(this.config.max_options || 5) * 48 + 16}px`;
     return html`
-      <ha-card .header=${this.config.name} aria-label=${`Select list card: ${this.config.entity}`}>
+      <ha-card .header=${this.config.title} aria-label=${`Select list card: ${this.config.entity}`}>
         <paper-listbox
           @iron-select=${this._selectedOptionChanged}
           .selected=${options.indexOf(selected)}

src/localize/localize.ts

@@ -2,7 +2,7 @@ import { LovelaceCardConfig } from 'custom-card-helpers';
 
 export interface SelectListCardConfig extends LovelaceCardConfig {
   type: string;
-  name?: string;
+  title?: string;
   entity: string;
   truncate?: boolean;
   scroll_to_selected?: boolean;