ha-frontend-cdce8p/panels/zwave/zwave-groups.html

<link rel="import" href="../../bower_components/polymer/polymer.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="../../src/components/buttons/ha-call-service-button.html">

<dom-module id='zwave-groups'>
  <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;
        }

      .help-text {
        padding-left: 24px;
        padding-right: 24px;
      }
    </style>
      <div class='content'>
        <paper-card heading='Node group associations'>
          <div class='device-picker'>
          <paper-dropdown-menu label="Node to control" class='flex'>
            <paper-listbox
              slot="dropdown-content"
              selected='{{selectedTargetNode}}'>
               <template is='dom-repeat' items='[[nodes]]' as='state'>
                <paper-item>[[computeSelectCaption(state)]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
          </div>
        <template is='dom-if' if='[[!computeIsTargetNodeSelected(selectedTargetNode)]]'>
          <!--TODO make api for getting groups and members-->
          <div class='device-picker'>
          <paper-dropdown-menu label="Group" class='flex'>
            <paper-listbox
              slot="dropdown-content"
              selected='{{selectedGroup}}'>
              <template is='dom-repeat' items='[[groups]]' as='state'>
                <paper-item>[[computeSelectCaptionGroup(state)]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
          </div>
        </template>
        <template is='dom-if' if='[[!computeIsGroupSelected(selectedGroup)]]'>
          <div class='help-text'>
            <span>Other Nodes in this group:</span>
            <template is='dom-repeat' items='[[otherGroupNodes]]' as='state'>
            <span>[[state]]</span>
            </template>
          </div>
          <div class='help-text'>
            <span>Max Associations:</span>
            <span>[[maxAssociations]]</span>
          </div>
          <div class='card-actions'>
            <template is='dom-if' if='[[!noAssociationsLeft]]'>
              <ha-call-service-button
                hass='[[hass]]'
                domain='zwave'
                service='change_association'
                service-data='[[computeAssocServiceData(selectedGroup, "add")]]'
              >Add To Group</ha-call-service-button>
            </template>
          <ha-call-service-button
            hass='[[hass]]'
            domain='zwave'
            service='change_association'
            service-data='[[computeAssocServiceData(selectedGroup, "remove")]]'
          >Remove From Group</ha-call-service-button>
        </div>
      </template>
      </paper-card>
    </div>
  </template>
</dom-module>

<script>
Polymer({
  is: 'zwave-groups',

  properties: {
    hass: {
      type: Object,
    },

    nodes: {
      type: Array,
    },

    groups: {
      type: Array,
    },

    selectedNode: {
      type: Number,
    },

    selectedTargetNode: {
      type: Number,
      value: -1
    },

    selectedGroup: {
      type: Number,
      value: -1,
      observer: 'selectedGroupChanged'
    },

    otherGroupNodes: {
      type: Array,
      value: -1,
      computed: 'computeOtherGroupNodes(selectedGroup)'
    },

    maxAssociations: {
      type: String,
      value: '',
      computed: 'computeMaxAssociations(selectedGroup)'
    },

    noAssociationsLeft: {
      type: Boolean,
      value: true,
      computed: 'computeAssociationsLeft(selectedGroup)'
    },
  },

  listeners: {
    'hass-service-called': 'serviceCalled',
  },

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

  computeAssociationsLeft: function (selectedGroup) {
    if (selectedGroup === -1) return true;
    return (this.maxAssociations === this.otherGroupNodes.length);
  },

  computeMaxAssociations: function (selectedGroup) {
    if (selectedGroup === -1) return -1;
    var maxAssociations = this.groups[selectedGroup].value.max_associations;
    if (!maxAssociations) return ['None'];
    return maxAssociations;
  },

  computeOtherGroupNodes: function (selectedGroup) {
    if (selectedGroup === -1) return -1;
    var associations = Object.values(this.groups[selectedGroup].value.associations);
    if (!associations.length) return ['None'];
    return associations;
  },

  computeSelectCaption: function (stateObj) {
    return window.hassUtil.computeStateName(stateObj) + ' (Node:' +
      stateObj.attributes.node_id + ' ' +
      stateObj.attributes.query_stage + ')';
  },

  computeSelectCaptionGroup: function (stateObj) {
    return (stateObj.key + ': ' + stateObj.value.label);
  },

  computeIsTargetNodeSelected: function (selectedTargetNode) {
    return (!this.nodes || selectedTargetNode === -1);
  },

  computeIsGroupSelected: function (selectedGroup) {
    return (!this.nodes || this.selectedNode === -1 || selectedGroup === -1);
  },

  computeAssocServiceData: function (selectedGroup, type) {
    if (!this.groups === -1 || selectedGroup === -1 || this.selectedNode === -1) return -1;
    return { node_id: this.nodes[this.selectedNode].attributes.node_id,
      association: type,
      target_node_id: this.nodes[this.selectedTargetNode].attributes.node_id,
      group: this.groups[selectedGroup].key };
  },

  refreshGroups: function (selectedNode) {
    var groupData = [];
    this.hass.callApi('GET', 'zwave/groups/' + this.nodes[selectedNode].attributes.node_id).then(
      function (groups) {
        Object.keys(groups).forEach(function (key) {
          groupData.push({
            key: key,
            value: groups[key],
          });
        });
        this.groups = groupData;
        this.selectedGroupChanged(this.selectedGroup);
      }.bind(this));
  },

  selectedGroupChanged: function (selectedGroup) {
    if (this.selectedGroup === -1 || selectedGroup === -1) return;
    this.maxAssociations = this.groups[selectedGroup].value.max_associations;
    this.otherGroupNodes = Object.values(this.groups[selectedGroup].value.associations);
  },
});
</script>