ha-frontend-cdce8p/hassio/addon-view/hassio-addon-view.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/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/paper-icon-button/paper-icon-button.html'>

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

<link rel="import" href="./hassio-addon-info.html">
<link rel="import" href="./hassio-addon-config.html">
<link rel="import" href="./hassio-addon-audio.html">
<link rel="import" href="./hassio-addon-network.html">
<link rel="import" href="./hassio-addon-logs.html">
<link rel='import' href='../hassio-markdown-dialog.html'>

<dom-module id="hassio-addon-view">
  <template>
    <style include="iron-flex ha-style">
      :host {
        color: var(--primary-text-color);
        --paper-card-header-color: var(--primary-text-color);
      }      
      .content {
        padding: 24px 0 32px;
        max-width: 600px;
        margin: 0 auto;
      }
      hassio-addon-info,
      hassio-addon-network,
      hassio-addon-audio,
      hassio-addon-config {
        margin-bottom: 24px;
      }
    </style>
    <app-route
      route='[[route]]'
      pattern='/addon/:slug'
      data="{{routeData}}"
      active='{{routeMatches}}'
    ></app-route>
    <app-header-layout has-scrolling-region>
      <app-header fixed slot='header'>
        <app-toolbar>            
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <paper-icon-button
            icon='mdi:arrow-left'
            on-click='backTapped'
          ></paper-icon-button>
          <div main-title>Hass.io: add-on details</div>
        </app-toolbar>
      </app-header>
      <div class='content'>
        <hassio-addon-info
          hass='[[hass]]'
          addon='[[addon]]'
          addon-slug='[[routeData.slug]]'
        ></hassio-addon-info>

        <template is='dom-if' if='[[addon.version]]'>
          <hassio-addon-config
            hass='[[hass]]'
            addon='[[addon]]'
            addon-slug='[[routeData.slug]]'
          ></hassio-addon-config>

          <template is='dom-if' if='[[addon.audio]]'>
            <hassio-addon-audio
              hass='[[hass]]'
              addon='[[addon]]'
            ></hassio-addon-audio>
          </template>

          <template is='dom-if' if='[[addon.network]]'>
            <hassio-addon-network
              hass='[[hass]]'
              addon='[[addon]]'
              addon-slug='[[routeData.slug]]'
            ></hassio-addon-network>
          </template>

          <hassio-addon-logs
            hass='[[hass]]'
            addon-slug='[[routeData.slug]]'
          ></hassio-addon-logs>
        </template>
      </div>
    </app-header-layout>

    <hassio-markdown-dialog
      title='[[markdownTitle]]'
      content='[[markdownContent]]'
    ></hassio-markdown-dialog>
  </template>
</dom-module>

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

  static get properties() {
    return {
      hass: Object,
      showMenu: Boolean,
      narrow: Boolean,
      route: Object,
      routeData: {
        type: Object,
        observer: 'routeDataChanged',
      },
      routeMatches: Boolean,
      addon: Object,

      markdownTitle: String,
      markdownContent: {
        type: String,
        value: '',
      },
    };
  }

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

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

    if (!path) return;

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

  routeDataChanged(routeData) {
    if (!this.routeMatches || !routeData || !routeData.slug) return;
    this.hass.callApi('get', `hassio/addons/${routeData.slug}/info`)
      .then((info) => {
        this.addon = info.data;
      }, () => {
        this.addon = null;
      });
  }

  backTapped() {
    history.back();
  }

  openMarkdown(ev) {
    this.setProperties({
      markdownTitle: ev.detail.title,
      markdownContent: ev.detail.content,
    });
    this.shadowRoot.querySelector('hassio-markdown-dialog').openDialog();
  }
}

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