ha-frontend-cdce8p/hassio/advanced/hassio-host-info.html

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">

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

<dom-module id="hassio-host-info">
  <template>
    <style include="iron-flex ha-style">
      paper-card {
        display: block;
        height: 100%;
      }
      .info {
        width: 100%;
      }
      .info td:nth-child(2) {
        text-align: right;
      }
      .errors {
        color: var(--google-red-500);
        margin-top: 16px;
      }
    </style>
    <paper-card heading="Host OS">
      <div class="card-content">
        <table class='info'>
          <tr>
            <td>Hostname</td>
            <td>[[data.hostname]]</td>
          </tr>
          <tr>
            <td>Type</td>
            <td>[[data.type]]</td>
          </tr>
          <tr>
            <td>OS</td>
            <td>[[data.os]]</td>
          </tr>
          <tr>
            <td>Host Control version</td>
            <td>[[data.version]]</td>
          </tr>
          <tr>
            <td>Latest available version</td>
            <td>[[data.last_version]]</td>
          </tr>
        </table>
        <template is='dom-if' if='[[errors]]'>
          <div class='errors'>Error: [[errors]]</div>
        </template>
      </div>
      <div class="card-actions">
        <template is='dom-if' if='[[computeUpdateAvailable(data)]]'>
          <ha-call-api-button
            hass='[[hass]]'
            path="hassio/host/update"
          >Update</ha-call-api-button>
        </template>
        <template is='dom-if' if='[[computeRebootAvailable(data)]]'>
          <ha-call-api-button
            class='warning'
            hass='[[hass]]'
            path="hassio/host/reboot"
          >Reboot</ha-call-api-button>
        </template>
        <template is='dom-if' if='[[computeShutdownAvailable(data)]]'>
          <ha-call-api-button
            class='warning'
            hass='[[hass]]'
            path="hassio/host/shutdown"
          >Shutdown</ha-call-api-button>
        </template>
      </div>
    </paper-card>
  </template>
</dom-module>

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

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

      data: {
        type: Object,
        value: {},
      },

      errors: String,
    };
  }

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

  apiCalled(ev) {
    if (ev.detail.success) {
      this.errors = null;
      return;
    }

    var response = ev.detail.response;

    if (typeof response.body === 'object') {
      this.errors = response.body.message || 'Unknown error';
    } else {
      this.errors = response.body;
    }
  }

  computeUpdateAvailable(data) {
    return data.version !== data.last_version;
  }

  computeRebootAvailable(data) {
    return data.features && data.features.indexOf('reboot') !== -1;
  }

  computeShutdownAvailable(data) {
    return data.features && data.features.indexOf('shutdown') !== -1;
  }
}

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