Alarm card updated to 0.4.0 (ciotlosm#192)

ciotlosm · ciotlosm · commit baf4f4686d1a · 2018-09-12T12:05:05.000+03:00
* Get rid of memory leak

* Add requested changes for labels and hide/show buttons

* Remove console.log messages

* Add label method

* Handle translations

* Fix labels documentation.

* Address PR comments.

* Added changelog and version updates
diff --git a/alarm_control_panel-card/README.md b/alarm_control_panel-card/README.md
@@ -16,6 +16,8 @@ Alarm control panel card allows you to control [alarm_control_panel](https://www
 | states | list | optional | A list of possible arm buttons. Supports `arm_home`, `arm_away`, `arm_night`, `arm_custom_bypass`.
 | style | string | optional | Allows to override some default styles. Example `--alarm-color-disarmed: var(--label-badge-blue);`
 | auto_enter | object | optional | Options to auto arm and disarm. See `auto_enter` options.
+| labels | object | optional | Labels that augment/override defaults.
+| show_label_ids | boolean | optional | Allow displaying label constants (when setting to `true`) to be able to map your own translations under `labels`. Defaults to `false`.
 
 `auto_enter` options:
 
@@ -24,6 +26,9 @@ Alarm control panel card allows you to control [alarm_control_panel](https://www
 | code_length | integer | Required | When number of digits entered system will arm/disarm
 | arm_action | string | Required | Action to invoke when after digits entered. Can be any of the same values as `states` above.
 
+`labels`:
+The labels to display. Label name and value. See example.
+
 **Example**
 
 ```yaml
@@ -35,8 +40,12 @@ Alarm control panel card allows you to control [alarm_control_panel](https://www
   states:
     - arm_home
     - arm_away
+  labels:
+    ui.card.alarm_control_panel.code: Inserire un codice a 4 cifre
+    state.alarm_control_panel.arm_away: Away!!
 ```
 
 **Credits**
+- [@gwww](https://github.com/gwww) Added translations
 - [@gwww](https://github.com/gwww) Awesome refactoring
-- [@ciotlosm](https://github.com/ciotlosm)
+- [@ciotlosm](https://github.com/ciotlosm)
diff --git a/alarm_control_panel-card/VERSION b/alarm_control_panel-card/VERSION
@@ -1 +1 @@
-0.3.2
+0.4.0
diff --git a/alarm_control_panel-card/alarm_control_panel-card.js b/alarm_control_panel-card/alarm_control_panel-card.js
@@ -2,21 +2,6 @@ class AlarmControlPanelCard extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
-    this._stateStrings = {
-      'arm_away': 'Arm away',
-      'arm_custom_bypass': 'Custom',
-      'arm_home': 'Arm home',
-      'arming': 'Arming',
-      'arm_night': 'Arm night',
-      'armed_away': 'Armed away',
-      'armed_custom_bypass': 'Armed custom',
-      'armed_home': 'Armed home',
-      'armed_night': 'Armed night',
-      'disarm': 'Disarm',
-      'disarmed': 'Disarmed',
-      'pending': 'Pending',
-      'triggered': 'Triggered',
-    }
     this._icons = {
       'armed_away': 'mdi:security-lock',
       'armed_custom_bypass': 'mdi:security',
@@ -29,14 +14,47 @@ class AlarmControlPanelCard extends HTMLElement {
   }
 
   set hass(hass) {
-    this.myhass = hass;
     const entity = hass.states[this._config.entity];
-    if (entity && entity.state != this._state) {
-      this._state = entity.state;
-      this._updateCardContent(entity);
+
+    if (entity) {
+      this.myhass = hass;
+      if(!this.shadowRoot.lastChild) {
+        this._createCard(entity);
+      }
+      if (entity.state != this._state) {
+        this._state = entity.state;
+        this._updateCardContent(entity);
+      }
     }
   }
 
+  _createCard(entity) {
+    const config = this._config;
+
+    const card = document.createElement('ha-card');
+    const content = document.createElement('div');
+    content.id = "content";
+    content.innerHTML = `
+      ${config.title ? '<div id="state-text"></div>' : ''}
+      <ha-icon id="state-icon"></ha-icon>
+      ${this._actionButtons()}
+      ${entity.attributes.code_format ?
+          `<paper-input label='${this._label("ui.card.alarm_control_panel.code")}'
+          type="password"></paper-input>` : ''}
+      ${this._keypad(entity)}
+    `;
+    card.appendChild(this._style(config.style));
+    card.appendChild(content);
+    this.shadowRoot.appendChild(card);
+
+    this._setupInput();
+    this._setupKeypad();
+    this._setupActions();
+  }
+
+  connectedCallback() {
+  }
+
   setConfig(config) {
     if (!config.entity || config.entity.split(".")[0] !== "alarm_control_panel") {
       throw new Error('Please specify an entity from alarm_control_panel domain.');
@@ -48,70 +66,54 @@ class AlarmControlPanelCard extends HTMLElement {
       }
       this._arm_action = config.auto_enter.arm_action;
     }
+    if (!config.states) config.states = ['arm_away', 'arm_home'];
+    if (!config.scale) config.scale = '15px';
+    this._config = Object.assign({}, config);
 
     const root = this.shadowRoot;
     if (root.lastChild) root.removeChild(root.lastChild);
-    if (!config.states) config.states = ['arm_home', 'arm_away'];
-    if (!config.scale) config.scale = '15px';
-
-    this._card = document.createElement('ha-card');
-    const content = document.createElement('div');
-    content.id = "content";
-    this._config = Object.assign({}, config);
-    this._card.appendChild(this._style(config.style));
-    this._card.appendChild(content);
-    root.appendChild(this._card);
-    this._config = Object.assign({}, config);
   }
 
   _updateCardContent(entity) {
     const root = this.shadowRoot;
     const card = root.lastChild;
     const config = this._config;
 
-    if (!config.title) {
-      card.header = this._stateToText(this._state);
-    } else {
+    const state_str = "state.alarm_control_panel." + this._state;
+    if (config.title) {
       card.header = config.title;
+      root.getElementById("state-text").innerHTML = this._label(state_str);
+      root.getElementById("state-text").className = `state ${this._state}`;
+    } else {
+      card.header = this._label(state_str);
     }
 
-    root.getElementById("content").innerHTML = `
-      ${this._icon()}
-      ${config.title ? `<div class='state ${this._state}'>
-        ${this._stateToText(this._state)}</div>` : ''}
-      ${this._actionButtons()}
-      ${entity.attributes.code_format ? '<paper-input label="Alarm code" type="password"></paper-input>' : ''}
-      ${this._keypad(entity)}
-    `;
-
-    this._setupActions();
-    this._setupInput();
-    this._setupKeypad();
-  }
+    root.getElementById("state-icon").setAttribute("icon",
+      this._icons[this._state] || 'mdi:shield-outline');
+    root.getElementById("state-icon").className = this._state;
 
-  _icon() {
-    return `<ha-icon icon='${this._stateToIcon(this._state)}'
-      class='${this._state}'></ha-icon>`
+    const armVisible = (this._state === 'disarmed');
+    root.getElementById("arm-actions").style.display = armVisible ? "" : "none";
+    root.getElementById("disarm-actions").style.display = armVisible ? "none" : "";
   }
 
   _actionButtons() {
     const armVisible = (this._state === 'disarmed');
     return `
-      <div class="actions">
-        ${armVisible
-        ? `${this._config.states.map(el => `${this._actionButton(el)}`).join('')}`
-        : `${this._actionButton('disarm')}`}
-      </div>`
+      <div id="arm-actions" class="actions">
+        ${this._config.states.map(el => `${this._actionButton(el)}`).join('')}
+      </div>
+      <div id="disarm-actions" class="actions">
+        ${this._actionButton('disarm')}
+      </div>`;
   }
 
   _actionButton(state) {
-    return `<paper-button noink raised id="${state}">${this._stateToText(state)}
-      </paper-button>`;
+    return `<paper-button noink raised id="${state}">
+      ${this._label("ui.card.alarm_control_panel." + state)}</paper-button>`;
   }
 
   _setupActions() {
-    // TODO: fix memory leak for reattaching handlers every time
-    // Need a way to avoid doing innerHTML, at least without detaching handlers first
     const card = this.shadowRoot.lastChild;
     const config = this._config;
 
@@ -161,7 +163,8 @@ class AlarmControlPanelCard extends HTMLElement {
 
     const input = root.lastChild.querySelector('paper-input');
     root.querySelectorAll(".pad paper-button").forEach(element => {
-      if (element.getAttribute('value') === 'Clear') {
+      if (element.getAttribute('value') === 
+        this._label("ui.card.alarm_control_panel.clear_code")) {
         element.addEventListener('click', event => {
           input.value = '';
         })
@@ -207,7 +210,7 @@ class AlarmControlPanelCard extends HTMLElement {
           ${this._keypadButton("3", "DEF")}
           ${this._keypadButton("6", "MNO")}
           ${this._keypadButton("9", "WXYZ")}
-          ${this._keypadButton("Clear", "")}
+          ${this._keypadButton(this._label("ui.card.alarm_control_panel.clear_code"), "")}
         </div>
       </div>`
   }
@@ -324,17 +327,28 @@ class AlarmControlPanelCard extends HTMLElement {
     return style;
   }
 
-  _stateToIcon(state) {
-    return this._icons[state] || 'mdi:shield-outline'
-  }
+  _label(label, default_label=undefined) {
+    // Just show "raw" label; useful when want to see underlying const
+    // so you can define your own label.
+    if (this._config.show_label_ids) return label;
+
+    if (this._config.labels && this._config.labels[label])
+      return this._config.labels[label];
+
+    const lang = this.myhass.selectedLanguage || this.myhass.language;
+    const translations = this.myhass.resources[lang];
+    if (translations && translations[label]) return translations[label];
+
+    if (default_label) return default_label;
 
-  _stateToText(state) {
-    return this._stateStrings[state] || 'Unknown'
+    // If all else fails then pretify the passed in label const
+    const last_bit = label.split('.').pop();
+    return last_bit.split('_').join(' ').replace(/^\w/, c => c.toUpperCase());
   }
 
   getCardSize() {
     return 1;
   }
 }
 
-customElements.define('alarm_control_panel-card', AlarmControlPanelCard);
+customElements.define('alarm_control_panel-card', AlarmControlPanelCard);
diff --git a/alarm_control_panel-card/changelog.md b/alarm_control_panel-card/changelog.md
@@ -1,3 +1,8 @@
+## 0.4.0
+- Major refactoring from @gwww
+- Add translation support
+- Fixes some memory leaks
+
 ## 0.3.2
 - Fixed javascript error on code clear when no code was used 
 
