ha-frontend/panels/dev-service/ha-panel-dev-service.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="./services-list.html">

<dom-module id="ha-panel-dev-service">
  <template>
    <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;
      }

      .description {
        margin-top: 24px;
        white-space: pre-wrap;
      }

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

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

      <div class$='[[computeFormClasses(narrow)]]'>
        <div class='flex'>
          <p>
            Call a service from a component.
          </p>

          <div class='ha-form'>
            <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
            <paper-input label="Service" value='{{service}}'></paper-input>
            <paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
            <paper-button on-tap='callService' raised>Call Service</paper-button>
          </div>
          <div class='description'>[[description]]</div>
        </div>

        <div>
          <div class='header'>Available services</div>
          <services-list on-service-selected='serviceSelected' hass='[[hass]]'></services-list>
        </div>
      </div>
    </partial-base>
  </template>
</dom-module>

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

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

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

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

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

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

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

    description: {
      type: String,
      computed: 'computeDescription(hass, domain, service)',
    },
  },

  computeDescription: function (hass, domain, service) {
    return hass.reactor.evaluate([
      hass.serviceGetters.entityMap,
      function (map) {
        if (map.has(domain) && map.get(domain).get('services').has(service)) {
          return JSON.stringify(
            map
              .get(domain)
              .get('services')
              .get(service)
              .toJS(),
            null, 2);
        }
        return 'No description available';
      },
    ]);
  },

  serviceSelected: function (ev) {
    this.domain = ev.detail.domain;
    this.service = ev.detail.service;
  },

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

    this.hass.serviceActions.callService(this.domain, this.service, serviceData);
  },

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