ha-frontend-cdce8p/panels/hassio/addon-view/hassio-addon-view.html

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

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

<link rel="import" href="./hassio-addon-info.html">
<link rel="import" href="./hassio-addon-options.html">
<link rel="import" href="./hassio-addon-network.html">
<link rel="import" href="./hassio-addon-logs.html">

<dom-module id="hassio-addon-view">
  <template>
    <style include="iron-flex ha-style">
      hassio-addon-info,
      hassio-addon-network,
      hassio-addon-options {
        margin-bottom: 24px;
      }
      .content {
        padding: 24px 0 32px;
        max-width: 600px;
        margin: 0 auto;
      }
    </style>
    <app-route
      route='[[route]]'
      pattern='/addon/:addon'
      data="{{_routeData}}"
    ></app-route>
    <app-header-layout has-scrolling-region>
      <app-header slot="header" fixed>
        <app-toolbar>
          <paper-icon-button
            icon='mdi:arrow-left'
            on-tap='backTapped'
          ></paper-icon-button>
          <div main-title>[[addonInfo.name]]</div>
        </app-toolbar>
      </app-header>

      <div class='content'>
        <hassio-addon-info
          hass='[[hass]]'
          addon-info='[[addonInfo]]'
          addon-state='[[addonState]]'
        ></hassio-addon-info>

        <hassio-addon-options
          hass='[[hass]]'
          addon='[[_routeData.addon]]'
          addon-state='[[addonState]]'
        ></hassio-addon-options>

        <hassio-addon-network
          hass='[[hass]]'
          addon='[[_routeData.addon]]'
          addon-state='[[addonState]]'
        ></hassio-addon-network>

        <hassio-addon-logs
          hass='[[hass]]'
          addon='[[_routeData.addon]]'
        ></hassio-addon-logs>
      </div>
    </app-header-layout>
  </template>
</dom-module>

<script>
class HassioAddonView extends Polymer.Element {
  static get is() { return 'hassio-addon-view'; }

  static get properties() {
    return {
      hass: {
        type: Object,
      },

      route: Object,
      _routeData: {
        type: Object,
        observer: '_routeDataChanged',
      },

      supervisorInfo: {
        type: Object,
      },

      addonInfo: {
        type: Object,
        computed: 'computeAddonInfo(supervisorInfo, _routeData.addon)',
      },

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

      addonLogs: {
        type: String,
        value: '',
      },
    };
  }

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

  apiCalled(ev) {
    var path = ev.detail.path;

    if (!path) return;

    if (path.substr(path.lastIndexOf('/') + 1) === 'uninstall') {
      this.backTapped();
    } else {
      this._routeDataChanged(this._routeData);
    }
  }

  _routeDataChanged(routeData) {
    if (!routeData || !routeData.addon) return;
    this.hass.callApi('get', 'hassio/addons/' + routeData.addon + '/info')
      .then(function (info) {
        this.addonState = info.data;
      }.bind(this), function () {
        this.addonState = null;
      }.bind(this));
  }

  computeAddonInfo(supervisorInfo, addon) {
    if (!supervisorInfo) return null;

    for (var i = 0; i < supervisorInfo.addons.length; i++) {
      var addonInfo = supervisorInfo.addons[i];
      if (addonInfo.slug === addon) return addonInfo;
    }
    return null;
  }

  backTapped() {
    history.back();
  }
}

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