ha-frontend-cdce8p/panels/config/zwave/zwave-usercodes.html

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel='import' href="../../../bower_components/paper-input/paper-input.html">

<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">

<dom-module id='zwave-usercodes'>
  <template>
    <style include="iron-flex ha-style">
      .content {
        margin-top: 24px;
      }

      paper-card {
        display: block;
        margin: 0 auto;
        max-width: 600px;
      }

      .device-picker {
        @apply(--layout-horizontal);
        @apply(--layout-center-center);
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 24px;
        }
    </style>
      <div class='content'>
        <paper-card heading='Node user codes'>
          <div class='device-picker'>
          <paper-dropdown-menu label="Code slot" class='flex'>
            <paper-listbox
              slot="dropdown-content"
              selected='{{selectedUserCode}}'>
              <template is='dom-repeat' items='[[userCodes]]' as='state'>
                <paper-item>[[computeSelectCaptionUserCodes(state)]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
          </div>

          <template is='dom-if' if="[[isUserCodeSelected(selectedUserCode)]]">
            <div class='card-actions'>
              <paper-input
                label='User code'
                type=number
                value='{{selectedUserCodeValue}}'
                maxlength='{{userCodeMaxLen}}'
                min='0'>
              </paper-input>
            </div>
            <div class='card-actions'>
              <ha-call-service-button
                hass='[[hass]]'
                domain='lock'
                service='set_usercode'
                service-data='[[computeUserCodeServiceData(selectedUserCodeValue, "Add")]]'
              >Set Usercode</ha-call-service-button>
              <ha-call-service-button
                hass='[[hass]]'
                domain='lock'
                service='clear_usercode'
                service-data='[[computeUserCodeServiceData(selectedUserCode, "Delete")]]'
              >Delete Usercode</ha-call-service-button>
            </div>
          </template>
        </paper-card>
      </div>
    </template>
</dom-module>
<script>

class ZwaveUsercodes extends Polymer.Element {
  static get is() { return 'zwave-usercodes'; }

  static get properties() {
    return {
      hass: {
        type: Object,
      },

      nodes: {
        type: Array,
      },

      selectedNode: {
        type: Number,
      },

      userCodes: {
        type: Object,
      },

      userCodeMaxLen: {
        type: Number,
        value: 4
      },

      selectedUserCode: {
        type: Number,
        value: -1,
        observer: 'selectedUserCodeChanged'
      },

      selectedUserCodeValue: {
        type: Number,
        value: -1
      },
    };
  }

  ready() {
    super.ready();
    this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
  }

  serviceCalled(ev) {
    if (ev.detail.success) {
      var foo = this;
      setTimeout(function () {
        foo.refreshUserCodes(foo.selectedNode);
      }, 5000);
    }
  }

  isUserCodeSelected(selectedUserCode) {
    if (selectedUserCode === -1) return false;
    return true;
  }

  computeSelectCaptionUserCodes(stateObj) {
    return (stateObj.key + ': ' + stateObj.value.label);
  }

  selectedUserCodeChanged(selectedUserCode) {
    if (this.selectedUserCode === -1 || selectedUserCode === -1) return;
    var value = (parseInt((this.userCodes[selectedUserCode].value.code).trim()));
    this.userCodeMaxLen = (this.userCodes[selectedUserCode].value.length);
    if (isNaN(value)) this.selectedUserCodeValue = '';
    else this.selectedUserCodeValue = value;
  }

  computeUserCodeServiceData(selectedUserCodeValue, type) {
    if (this.selectedNode === -1 || !selectedUserCodeValue) return -1;
    var serviceData = null;
    var valueData = null;
    if (type === 'Add') {
      valueData = selectedUserCodeValue;
      serviceData = {
        node_id: this.nodes[this.selectedNode].attributes.node_id,
        code_slot: this.selectedUserCode,
        usercode: valueData
      };
    }
    if (type === 'Delete') {
      serviceData = {
        node_id: this.nodes[this.selectedNode].attributes.node_id,
        code_slot: this.selectedUserCode
      };
    }
    return serviceData;
  }

  refreshUserCodes(selectedNode) {
    this.selectedUserCodeValue = '';
    var userCodes = [];
    this.hass.callApi('GET', 'zwave/usercodes/' + this.nodes[selectedNode].attributes.node_id).then(function (usercodes) {
      Object.keys(usercodes).forEach(function (key) {
        userCodes.push({
          key: key,
          value: usercodes[key],
        });
      });
      this.userCodes = userCodes;
      this.selectedUserCodeChanged(this.selectedUserCode);
    }.bind(this));
  }
}

customElements.define(ZwaveUsercodes.is, ZwaveUsercodes);
</script>