frontend/panels/dev-state/ha-panel-dev-state.html

<!--
<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">

<link rel="import" href="./partial-base.html">
-->
<link rel="import" href="./entity-list.html">

<dom-module id="ha-panel-dev-state">
  <style is="custom-style" include="iron-flex iron-positioning"></style>
  <style>
    .content {
      @apply(--paper-font-body1);
      margin-top: 64px;
      padding: 24px;
      background-color: white;
      -ms-user-select: initial;
      -webkit-user-select: initial;
      -moz-user-select: initial;
    }

    .ha-form {
      margin-right: 16px;
    }

    .header {
      @apply(--paper-font-title);
    }
  </style>

  <template>
    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
      <span header-title>States</span>

      <div class$='[[computeFormClasses(narrow)]]'>
        <div class='flex'>
          <p>
            Set the representation of a device within Home Assistant.<br />
            This will not communicate with the actual device.
          </p>

          <div class='ha-form'>
            <paper-input label="Entity ID" autofocus required value='{{entityId}}'></paper-input>
            <paper-input label="State" required value='{{state}}'></paper-input>
            <paper-textarea label="State attributes (JSON, optional)" value='{{stateAttributes}}'></paper-textarea>
            <paper-button on-tap='handleSetState' raised>Set State</paper-button>
          </div>
        </div>

        <div>
          <div class='header'>Current entities</div>
          <entity-list on-entity-selected='entitySelected' hass='[[hass]]'></entity-list>
        </div>
      </div>
    </partial-base>
  </template>
</dom-module>

<script>
Polymer({
  is: 'ha-panel-dev-state',

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

    narrow: {
      type: Boolean,
      value: false,
    },

    showMenu: {
      type: Boolean,
      value: false,
    },

    entityId: {
      type: String,
      value: '',
    },

    state: {
      type: String,
      value: '',
    },

    stateAttributes: {
      type: String,
      value: '',
    },
  },

  setStateData: function (stateData) {
    var value = stateData ? JSON.stringify(stateData, null, '  ') : '';

    this.$.inputData.value = value;

    // not according to the spec but it works...
    this.$.inputDataWrapper.update(this.$.inputData);
  },

  entitySelected: function (ev) {
    var state = this.hass.reactor.evaluate(this.hass.entityGetters.byId(ev.detail.entityId));

    this.entityId = state.entityId;
    this.state = state.state;
    this.stateAttributes = JSON.stringify(state.attributes, null, '  ');
  },

  handleSetState: function () {
    var attr;
    try {
      attr = this.stateAttributes ? JSON.parse(this.stateAttributes) : {};
    } catch (err) {
      /* eslint-disable no-alert */
      alert('Error parsing JSON: ' + err);
      /* eslint-enable no-alert */
      return;
    }

    this.hass.entityActions.save({
      entityId: this.entityId,
      state: this.state,
      attributes: attr,
    });
  },

  computeFormClasses: function (narrow) {
    return narrow ?
      'content fit' : 'content fit layout horizontal';
  },
});
</script>