ha-frontend/hassio/addon-store/hassio-addon-store-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/paper-card/paper-card.html">

<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">

<dom-module id="hassio-addon-store-view">
  <template>
    <style include="iron-flex ha-style">
      paper-card {
        display: block;
        margin-bottom: 32px;
      }

      .content {
        padding: 24px 0 32px;
        max-width: 600px;
        margin: 0 auto;
      }

      .addon-header {
        @apply --paper-font-headline;
      }
      .addon-light {
        color: var(--secondary-text-color);
      }
      .addon-version {
        float: right;
        font-size: 15px;
        vertical-align: middle;
      }
    </style>
    <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>[[addon.name]]</div>
        </app-toolbar>
      </app-header>

      <div class='content'>
        <paper-card>
          <div class="card-content">
            <div class="addon-header">[[addon.name]]
              <div class="addon-version addon-light">
                v[[addon.version]]
              </div>
            </div>
            <p>[[addon.description]]</p>
            <p class='addon-light'>
              Made available via repository [[addon.repository]].
            </p>
            <template is='dom-if' if='[[addon.url]]'>
              <p><a target='_blank' href='[[addon.url]]'>Visit website</a></p>
            </template>
            <template is='dom-if' if='[[addon.build]]'>
              <p class='addon-light'>
                This add-on will built locally on the device.
              </p>
            </template>
          </div>
          <div class="card-actions">
            <template is='dom-if' if='[[addon.installed]]'>
              <paper-button on-tap='openAddon'>Open</paper-button>
            </template>
            <template is='dom-if' if='[[!addon.installed]]'>
              <ha-call-api-button
                hass='[[hass]]'
                path="[[pathInstall(addon)]]"
              >Install</ha-call-api-button>
            </template>
          </div>
        </paper-card>

        <paper-card>
          <div class='card-content'>
            <div class='addon-header'>Repository: [[repo.name]]</div>
            <p>Maintainer: [[repo.maintainer]]</p>
            <p><a target='_blank' href='[[repo.url]]'>Visit website</a></p>
          </div>
        </paper-card>
      </div>
    </app-header-layout>
  </template>
</dom-module>

<script>
class HassioAddonStoreView extends window.hassMixins.EventsMixin(Polymer.Element) {
  static get is() { return 'hassio-addon-store-view'; }

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

      selectedAddon: {
        type: String,
        value: null,
        notify: true,
      },

      addon: {
        type: Object,
      },

      repo: {
        type: Object,
      },
    };
  }

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

  pathInstall(addon) {
    return addon && 'hassio/addons/' + addon.slug + '/install';
  }

  apiCalled(ev) {
    if (ev.detail.success) {
      this.openAddon();
    }
  }

  openAddon() {
    history.pushState(null, null, '/hassio/addon/' + this.addon.slug);
    this.fire('location-changed');
  }

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

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