ha-frontend/src/layouts/partial-panel-resolver.html

<link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>

<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">

<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel='import' href='../components/ha-menu-button.html'>
<link rel="import" href="../resources/ha-style.html">

<dom-module id='partial-panel-resolver'>
  <template>
    <style include='iron-flex ha-style'>
      [hidden] {
        display: none !important;
      }

      .placeholder {
        height: 100%;
      }

      .layout {
        height: calc(100% - 64px);
      }
    </style>

    <div hidden$='[[resolved]]' class='placeholder'>
      <app-toolbar>
        <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
      </app-toolbar>
      <div class='layout horizontal center-center'>
        <template is='dom-if' if='[[!errorLoading]]'>
          <paper-spinner active></paper-spinner>
        </template>
        <template is='dom-if' if='[[errorLoading]]'>
          Error loading panel :(
        </template>
      </div>
    </div>

    <span id='panel' hidden$='[[!resolved]]'></span>
  </template>
</dom-module>

<script>
Polymer({
  is: 'partial-panel-resolver',

  properties: {
    hass: {
      type: Object,
      observer: 'updateAttributes',
    },

    narrow: {
      type: Boolean,
      value: false,
      observer: 'updateAttributes',
    },

    showMenu: {
      type: Boolean,
      value: false,
      observer: 'updateAttributes',
    },

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

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

    panel: {
      type: Object,
      computed: 'computeCurrentPanel(hass)',
      observer: 'panelChanged',
    },
  },

  computeCurrentPanel: function (hass) {
    return hass.config.panels[hass.currentPanel];
  },

  panelChanged: function (panel) {
    if (!panel) {
      if (this.$.panel.lastChild) {
        this.$.panel.removeChild(this.$.panel.lastChild);
      }
      return;
    }

    this.resolved = false;
    this.errorLoading = false;

    this.importHref(
      panel.url,

      function success() {
        window.hassUtil.dynamicContentUpdater(
          this.$.panel, 'ha-panel-' + panel.component_name, {
            hass: this.hass,
            narrow: this.narrow,
            showMenu: this.showMenu,
            panel: panel,
          });
        this.resolved = true;
      }.bind(this),

      function error() {
        this.errorLoading = true;
      }.bind(this),

      true /* async */);
  },

  updateAttributes: function () {
    var customEl = Polymer.dom(this.$.panel).lastChild;
    if (!customEl) return;
    customEl.hass = this.hass;
    customEl.narrow = this.narrow;
    customEl.showMenu = this.showMenu;
  },
});
</script>