ZWave Panel Updates (#1647)

* Add padding to zwave log text

* Replace entity dropdown with actual entity_id

* Add Node Information button for more-info popup, and remove less-functional Node Info card.

* Fix indentation

* Address review comments

* Fix lint/mixin

* Update comment

src/panels/config/zwave/ha-config-zwave.js

@@ -21,7 +21,6 @@ import './zwave-groups.js';
 import './zwave-log.js';
 import './zwave-network.js';
 import './zwave-node-config.js';
-import './zwave-node-information.js';
 import './zwave-usercodes.js';
 import './zwave-values.js';
 import './zwave-node-protection.js';
@@ -29,12 +28,14 @@ import './zwave-node-protection.js';
 import sortByName from '../../../common/entity/states_sort_by_name.js';
 import computeStateName from '../../../common/entity/compute_state_name.js';
 import computeStateDomain from '../../../common/entity/compute_state_domain.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
 import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 /*
  * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
  */
-class HaConfigZwave extends LocalizeMixin(PolymerElement) {
+class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-flex ha-style ha-form-style">
@@ -203,13 +204,14 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
               service="test_node"
               hidden$="[[!showHelp]]">
             </ha-service-description>
+            <paper-button on-click="_nodeMoreInfo">Node Information</paper-button>
           </div>
 
            <div class="device-picker">
             <paper-dropdown-menu label="Entities of this node" dynamic-align="" class="flex">
               <paper-listbox slot="dropdown-content" selected="{{selectedEntity}}">
                 <template is="dom-repeat" items="[[entities]]" as="state">
-                  <paper-item>[[computeSelectCaptionEnt(state)]]</paper-item>
+                  <paper-item>[[state.entity_id]]</paper-item>
                 </template>
               </paper-listbox>
             </paper-dropdown-menu>
@@ -269,12 +271,6 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
         </paper-card>
 
         <template is="dom-if" if="[[computeIsNodeSelected(selectedNode)]]">
-          <!--Node info card-->
-          <zwave-node-information
-            id="zwave-node-information"
-            nodes="[[nodes]]"
-            selected-node="[[selectedNode]]"
-          ></zwave-node-information>
 
           <!--Value card-->
           <zwave-values
@@ -563,6 +559,10 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
     };
   }
 
+  _nodeMoreInfo() {
+    this.fire('hass-more-info', { entityId: this.nodes[this.selectedNode].entity_id });
+  }
+
   _saveEntity() {
     const data = {
       ignored: this.entityIgnored,

src/panels/config/zwave/zwave-log.js

@@ -26,20 +26,24 @@ class OzwLog extends PolymerElement {
         padding-right: 24px;
         padding-bottom: 24px;
       }
+
+      .help-text {
+        padding: 5px 24px;
+      }
     </style>
     <ha-config-section is-wide="[[isWide]]">
       <span slot="header">OZW Log</span>
       <paper-card>
-      <div class="device-picker">
-        <paper-input label="Number of last log lines." type="number" min="0" max="1000" step="10" value="{{numLogLines}}">
-        </paper-input>
-      </div>
-      <div class="card-actions">
-        <paper-button raised="" on-click="refreshLog">Refresh</paper-button>
-      </div>
-      <div class="help-text">
-             <pre>[[ozwLogs]]</pre>
-      </div>
+        <div class="device-picker">
+          <paper-input label="Number of last log lines." type="number" min="0" max="1000" step="10" value="{{numLogLines}}">
+          </paper-input>
+        </div>
+        <div class="card-actions">
+          <paper-button raised="" on-click="refreshLog">Refresh</paper-button>
+        </div>
+        <div class="help-text">
+          <pre>[[ozwLogs]]</pre>
+        </div>
       </paper-card>
     </ha-config-section>
 `;

src/panels/config/zwave/zwave-node-information.js

@@ -1,74 +0,0 @@
-import '@polymer/paper-button/paper-button.js';
-import '@polymer/paper-card/paper-card.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
-class ZwaveNodeInformation extends PolymerElement {
-  static get template() {
-    return html`
-    <style include="iron-flex ha-style">
-      .content {
-        margin-top: 24px;
-      }
-
-      .node-info {
-        margin-left: 16px;
-      }
-
-      paper-card {
-        display: block;
-        margin: 0 auto;
-        max-width: 600px;
-      }
-
-      paper-button[toggles][active] {
-        background: lightgray;
-      }
-
-    </style>
-
-    <div class="content">
-      <paper-card heading="Node Information">
-      <div class="card-actions">
-        <paper-button toggles="" raised="" noink="" active="{{nodeInfoActive}}">Show</paper-button>
-      </div>
-      <template is="dom-if" if="{{nodeInfoActive}}">
-        <template is="dom-repeat" items="[[selectedNodeAttrs]]" as="state">
-          <div class="node-info">
-            <span>[[state]]</span>
-          </div>
-        </template>
-      </template>
-      </paper-card>
-    </div>
-`;
-  }
-
-  static get properties() {
-    return {
-      nodes: Array,
-
-      selectedNode: {
-        type: Number,
-        value: -1,
-        observer: 'nodeChanged'
-      },
-
-      selectedNodeAttrs: Array,
-
-      nodeInfoActive: Boolean,
-    };
-  }
-
-  nodeChanged(selectedNode) {
-    if (!this.nodes || selectedNode === -1) return;
-    const nodeAttrs = this.nodes[this.selectedNode].attributes;
-    const att = [];
-    Object.keys(nodeAttrs).forEach((key) => {
-      att.push(key + ': ' + nodeAttrs[key]);
-    });
-    this.selectedNodeAttrs = att.sort();
-  }
-}
-
-customElements.define('zwave-node-information', ZwaveNodeInformation);