hassio-addon-view.html

<link rel="import" href="../../../bower_components/polymer/polymer.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>
Polymer({
  is: 'hassio-addon-view',

  properties: {
    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: '',
    },
  },

  listeners: {
    'hass-api-called': 'apiCalled',
  },

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

    if (!path) return;

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

  _routeDataChanged: function (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: function (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: function () {
    history.back();
  },
});
</script>