ha-frontend/panels/config/config-entries/ha-config-flow.html

<link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../bower_components/paper-dialog/paper-dialog.html'>
<link rel='import' href='../../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html'>
<link rel="import" href='../../../bower_components/paper-button/paper-button.html'>

<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href='../../../src/components/ha-markdown.html'>
<link rel='import' href='../../../src/resources/ha-style.html'>
<link rel="import" href='../../../src/components/ha-form.html'>

<dom-module id="ha-config-flow">
  <template>
    <style include='ha-style-dialog'>
      .error {
        color: red;
      }
      paper-dialog {
        max-width: 500px;
      }
      ha-markdown img:first-child:last-child {
        display: block;
        margin: 0 auto;
      }
    </style>
    <paper-dialog
      id='dialog'
      with-backdrop
      opened='[[step]]'
      on-opened-changed='_openedChanged'
    >
      <h2>
        <template is='dom-if' if='[[_equals(step.type, "abort")]]'>
          Aborted
        </template>
        <template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
          Success!
        </template>
        <template is='dom-if' if='[[_equals(step.type, "form")]]'>
          [[_computeStepTitle(localize, step)]]
        </template>
      </h2>
      <paper-dialog-scrollable>
        <template is='dom-if' if='[[!step]]'>
          Loading flow.
        </template>
        <template is='dom-if' if='[[step]]'>
          <template is='dom-if' if='[[_equals(step.type, "abort")]]'>
            <p>[[_computeStepAbortedReason(localize, step)]]</p>
          </template>

          <template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
            <p>Created config for [[step.title]]</p>
          </template>

          <template is='dom-if' if='[[_equals(step.type, "form")]]'>
            <template is='dom-if' if='[[_computeStepDescription(localize, step)]]'>
              <ha-markdown content='[[_computeStepDescription(localize, step)]]'></ha-markdown>
            </template>

            <ha-form
              data='{{stepData}}'
              schema='[[step.data_schema]]'
              error='[[step.errors]]'
              compute-label='[[_computeLabelCallback(localize, step)]]'
              compute-error='[[_computeErrorCallback(localize, step)]]'
            ></ha-form>
          </template>
        </template>
      </paper-dialog-scrollable>
      <div class='buttons'>
        <template is='dom-if' if='[[_equals(step.type, "abort")]]'>
          <paper-button on-click='_flowDone'>Close</paper-button>
        </template>
        <template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
          <paper-button on-click='_flowDone'>Close</paper-button>
        </template>
        <template is='dom-if' if='[[_equals(step.type, "form")]]'>
          <paper-button on-click='_submitStep'>Submit</paper-button>
        </template>
      </div>
    </paper-dialog>
  </template>
</dom-module>

<script>
/*
 * @appliesMixin window.hassMixins.LocalizeMixin
 * @appliesMixin window.hassMixins.EventsMixin
 */
class HaConfigFlow extends
  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
  static get is() { return 'ha-config-flow'; }

  static get properties() {
    return {
      hass: Object,
      step: {
        type: Object,
        notify: true,
      },
      flowId: {
        type: String,
        observer: '_flowIdChanged'
      },
      /*
       * Store user entered data.
       */
      stepData: Object,
    };
  }

  ready() {
    super.ready();
    this.addEventListener('keypress', (ev) => {
      if (ev.keyCode === 13) {
        this._submitStep();
      }
    });
    // Fix for overlay showing on top of dialog.
    this.$.dialog.addEventListener('iron-overlay-opened', (ev) => {
      if (ev.target.withBackdrop) {
        ev.target.parentNode.insertBefore(ev.target.backdropElement, ev.target);
      }
    });
  }

  _flowIdChanged(flowId) {
    if (!flowId) {
      this.setProperties({
        step: null,
        stepData: {},
      });
      return;

    // Check if parent passed in step data to use.
    } else if (this.step) {
      this._processStep(this.step);
      return;
    }

    this.hass.callApi('get', `config/config_entries/flow/${flowId}`)
      .then((step) => {
        this._processStep(step);
        // When the flow changes, center the dialog.
        // Don't do it on each step or else the dialog keeps bouncing.
        setTimeout(() => this.$.dialog.center(), 0);
      });
  }

  _submitStep() {
    this.hass.callApi('post', `config/config_entries/flow/${this.flowId}`, this.stepData)
      .then(step => this._processStep(step));
  }

  _processStep(step) {
    if (!step.errors) step.errors = {};
    this.step = step;
    // We got a new form if there are no errors.
    if (Object.keys(step.errors).length === 0) {
      this.stepData = {};
    }
  }

  _flowDone() {
    this.fire('flow-closed', {
      flowFinished: true
    });
  }

  _equals(a, b) {
    return a === b;
  }

  _openedChanged(ev) {
    // Closed dialog by clicking on the overlay
    if (this.step && !ev.detail.value) {
      this.fire('flow-closed', {
        flowFinished: ['success', 'abort'].includes(this.step.type)
      });
    }
  }

  _computeStepAbortedReason(localize, step) {
    return localize(`component.${step.handler}.config.abort.${step.reason}`);
  }

  _computeStepTitle(localize, step) {
    return localize(`component.${step.handler}.config.step.${step.step_id}.title`);
  }

  _computeStepDescription(localize, step) {
    return localize(`component.${step.handler}.config.step.${step.step_id}.description`);
  }

  _computeLabelCallback(localize, step) {
    // Returns a callback for ha-form to calculate labels per schema object
    return schema => localize(`component.${step.handler}.config.step.${step.step_id}.data.${schema.name}`);
  }

  _computeErrorCallback(localize, step) {
    // Returns a callback for ha-form to calculate error messages
    return error => localize(`component.${step.handler}.config.error.${error}`);
  }
}

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