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

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel='import' href='../../bower_components/paper-card/paper-card.html'>
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>

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

<dom-module id="hassio-addon-info">
  <template>
    <style include='ha-style'>
      :host {
        display: block;
      }
      paper-card {
        display: block;
        margin-bottom: 16px;
      }
      .addon-header {
        @apply --paper-font-headline;
      }
      .light-color {
        color: var(--secondary-text-color);
      }
      .addon-version {
        float: right;
        font-size: 15px;
        vertical-align: middle;
      }
      .description {
        margin-bottom: 16px;
      }
      .logo img {
        max-height: 60px;
        margin: 16px 0;
        display: block;
      }
      .state div{
        width: 150px;
        display: inline-block;
      }
      paper-toggle-button {
        display: inline;
      }
      iron-icon.running {
        color: var(--paper-green-400);
      }
      iron-icon.stopped {
        color: var(--google-red-300);
      }      
      ha-call-api-button {
        font-weight: 500;
        color: var(--primary-color);
      }      
      .right {
        float: right;
      }
    </style>
    <template is='dom-if' if='[[computeUpdateAvailable(addon)]]'>
      <paper-card heading='Update available! 🎉'>
        <div class='card-content'>
          <hassio-item-info
            title='[[addon.name]] [[addon.last_version]] is available'
            description='You are currently running version [[addon.version]]'
            icon='mdi:arrow-up-bold-circle'
            classname='update'
          ></hassio-item-info>
        </div>
        <div class='card-actions'>
          <ha-call-api-button
            hass='[[hass]]'
            path='hassio/addons/[[addonSlug]]/update'
          >Update</ha-call-api-button>
        </div>
      </paper-card>
    </template>

    <paper-card>
      <div class='card-content'>
        <div class='addon-header'>[[addon.name]]
          <div class='addon-version light-color'>
            <template is='dom-if' if='[[addon.version]]'>
              [[addon.version]]
              <template is='dom-if' if='[[isRunning]]'>
                <iron-icon
                  title='Add-on is running'
                  class='running'
                  icon='mdi:circle'
                ></iron-icon>
              </template>
              <template is='dom-if' if='[[!isRunning]]'>
                <iron-icon
                  title='Add-on is stopped'
                  class='stopped'
                  icon='mdi:circle'
                ></iron-icon>
              </template>
            </template>
            <template is='dom-if' if='[[!addon.version]]'>
              [[addon.last_version]]
            </template>
          </div>
        </div>
        <div class='description light-color'>
          [[addon.description]].<br/>
          Visit <a href='[[addon.url]]' target='_blank'>[[addon.name]] page</a> for details.
        </div>
        <template is='dom-if' if='[[addon.logo]]'>
          <a href='[[addon.url]]' target='_blank' class='logo'>
            <img src='/api/hassio/addons/[[addonSlug]]/logo'/>
          </a>
        </template>
        <template is='dom-if' if='[[addon.version]]'>
          <div class='state'>
            <div>Start on boot</div>
            <paper-toggle-button
              on-change='startOnBootToggled'
              checked='[[computeStartOnBoot(addon.boot)]]'
            ></paper-toggle-button>
          </div>
          <div class='state'>
            <div>Auto update</div>
            <paper-toggle-button
              on-change='autoUpdateToggled'
              checked='[[addon.auto_update]]'
            ></paper-toggle-button>
          </div>
        </template>
      </div>
      <div class='card-actions'>
        <template is='dom-if' if='[[addon.version]]'>
          <ha-call-api-button
            class='warning'
            hass='[[hass]]'
            path='hassio/addons/[[addonSlug]]/uninstall'
          >Uninstall</ha-call-api-button>
          <template is='dom-if' if='[[addon.build]]'>
            <ha-call-api-button
              class='warning'
              hass='[[hass]]'
              path='hassio/addons/[[addonSlug]]/rebuild'
            >Rebuild</ha-call-api-button>
          </template>
          <template is='dom-if' if='[[isRunning]]'>
            <ha-call-api-button
              class='warning'
              hass='[[hass]]'
              path='hassio/addons/[[addonSlug]]/restart'
            >Restart</ha-call-api-button>
            <ha-call-api-button
              class='warning'
              hass='[[hass]]'
              path='hassio/addons/[[addonSlug]]/stop'
            >Stop</ha-call-api-button>
          </template>
          <template is='dom-if' if='[[!isRunning]]'>            
            <ha-call-api-button
              hass='[[hass]]'
              path='hassio/addons/[[addonSlug]]/start'
            >Start</ha-call-api-button>
          </template>
          <template is='dom-if' if='[[computeShowWebUI(addon.webui, isRunning)]]'>
            <a
              href='[[pathWebui(addon.webui)]]'
              tabindex='-1'
              target='_blank'
              class='right'
            ><paper-button>Open web UI</paper-button></a>
          </template>
        </template>
        <template is='dom-if' if='[[!addon.version]]'>
          <ha-call-api-button
            hass='[[hass]]'
            path='hassio/addons/[[addonSlug]]/install'
          >Install</ha-call-api-button>
        </template>
      </div>
    </paper-card>
    <template is='dom-if' if='[[addon.long_description]]'>
      <paper-card>
        <div class='card-content'>
          <ha-markdown content='[[addon.long_description]]'></ha-markdown>
        </div>
      </paper-card>
    </template>
  </template>
</dom-module>

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

  static get properties() {
    return {
      hass: Object,
      addon: Object,
      addonSlug: String,
      isRunning: {
        type: Boolean,
        computed: 'computeIsRunning(addon)',
      },
    };
  }

  computeIsRunning(addon) {
    return addon && addon.state === 'started';
  }

  computeUpdateAvailable(addon) {
    return addon && !addon.detached && addon.version && addon.version !== addon.last_version;
  }

  pathWebui(webui) {
    return webui && webui.replace('[HOST]', document.location.hostname);
  }

  computeShowWebUI(webui, isRunning) {
    return webui && isRunning;
  }

  computeStartOnBoot(state) {
    return state === 'auto';
  }

  startOnBootToggled() {
    const data = { boot: this.addon.boot === 'auto' ? 'manual' : 'auto' };
    this.hass.callApi('POST', `hassio/addons/${this.addonSlug}/options`, data);
  }

  autoUpdateToggled() {
    const data = { auto_update: !this.addon.auto_update };
    this.hass.callApi('POST', `hassio/addons/${this.addonSlug}/options`, data);
  }
}
customElements.define(HassioAddonInfo.is, HassioAddonInfo);
</script>