ha-frontend/panels/hassio/hassio-main.html

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">

<link rel="import" href="../../src/layouts/hass-loading-screen.html">
<link rel="import" href="../../src/layouts/hass-error-screen.html">
<link rel='import' href='../../src/util/hass-mixins.html'>

<link rel="import" href="./dashboard/hassio-dashboard.html">
<link rel="import" href="./advanced/hassio-advanced.html">
<link rel="import" href="./addon-view/hassio-addon-view.html">
<link rel="import" href="./addon-store/hassio-addon-store.html">
<link rel="import" href="./supervisor/hassio-supervisor.html">
<link rel="import" href="./snapshot/hassio-snapshot.html">
<link rel="import" href="./hassio-data.html">

<dom-module id="hassio-main">
  <template>
    <style>
      iron-pages {
        height: 100%;
      }
    </style>
    <app-route
      route='[[route]]'
      pattern='/:page'
      data="{{_routeData}}"
      tail="{{_routeTail}}"
    ></app-route>
    <hassio-data
      id='data'
      hass='[[hass]]'
      supervisor='{{supervisorInfo}}'
      homeassistant='{{hassInfo}}'
      host='{{hostInfo}}'
    ></hassio-data>

    <template is='dom-if' if='[[!loaded]]'>
      <hass-loading-screen
        narrow='[[narrow]]'
        show-menu='[[showMenu]]'
      ></hass-loading-screen>
    </template>
    <template is='dom-if' if='[[loaded]]'>
      <iron-pages
        selected='[[_routeData.page]]'
        attr-for-selected='page-name'
        fallback-selection='not-found'
        selected-attribute='visible'
      >
        <hassio-addon-view
          page-name='addon'
          route='[[route]]'
          hass='[[hass]]'
          supervisor-info='[[supervisorInfo]]'
          host-info='[[hostInfo]]'
          addon='[[addon]]'
        ></hassio-addon-view>

        <hassio-addon-store
          page-name='store'
          route='[[_routeTail]]'
          hass='[[hass]]'
          supervisor-info='[[supervisorInfo]]'
        ></hassio-addon-store>

        <hassio-supervisor
          page-name='supervisor'
          hass='[[hass]]'
          supervisor-info='[[supervisorInfo]]'
        ></hassio-supervisor>

        <hassio-dashboard
          page-name='dashboard'
          hass='[[hass]]'
          narrow='[[narrow]]'
          show-menu='[[showMenu]]'
          supervisor-info='[[supervisorInfo]]'
          hass-info='[[hassInfo]]'
        ></hassio-dashboard>

        <hassio-advanced
          page-name='advanced'
          hass='[[hass]]'
          supervisor-info='[[supervisorInfo]]'
          host-info='[[hostInfo]]'
          hass-info='[[hassInfo]]'
        ></hassio-advanced>

        <hassio-snapshot
          page-name='snapshot'
          hass='[[hass]]'
        ></hassio-snapshot>

        <hass-error-screen
          page-name='not-found'
          error='Page not found.'
          title='Hass.io'
        ></hass-error-screen>
      </iron-pages>
    </template>
  </template>
</dom-module>

<script>
class HassioMain extends window.hassMixins.EventsMixin(Polymer.Element) {
  static get is() { return 'hassio-main'; }

  static get properties() {
    return {
      hass: Object,
      narrow: Boolean,
      showMenu: Boolean,
      route: {
        type: Object,
        // Fake route object
        value: {
          prefix: '/hassio',
          path: '/dashboard',
          __queryParams: {}
        },
        observer: '_routeChanged',
      },
      _routeData: Object,
      _routeTail: Object,

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

      supervisorInfo: {
        type: Object,
        value: null,
      },

      hostInfo: {
        type: Object,
        value: null,
      },

      hassInfo: {
        type: Object,
        value: null,
      },

      loaded: {
        type: Boolean,
        computed: '_computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
      },
    };
  }

  ready() {
    super.ready();
    this.addEventListener('hass-api-called', ev => this._apiCalled(ev));
  }

  connectedCallback() {
    super.connectedCallback();
    this._routeChanged(this.route);
  }

  _apiCalled(ev) {
    if (ev.detail.success) {
      var tries = 1;

      var tryUpdate = function () {
        this.$.data.refresh().catch(function () {
          tries += 1;
          setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
        });
      }.bind(this);

      tryUpdate();
    }
  }

  _computeIsLoaded(supervisorInfo, hostInfo, hassInfo) {
    return (supervisorInfo !== null &&
            hostInfo !== null &&
            hassInfo !== null);
  }

  _routeChanged(route) {
    if (route.path === '' && route.prefix === '/hassio') {
      history.replaceState(null, null, '/hassio/dashboard');
      this.fire('location-changed');
    }
  }
}

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