ha-frontend-cdce8p/panels/hassio/addon-view/hassio-addon-network.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="../../../bower_components/paper-input/paper-input.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-network">
  <template>
    <style include="ha-style">
      :host {
        display: block;
      }
      paper-card {
        display: block;
      }
      .errors {
        color: var(--google-red-500);
        margin-bottom: 16px;
      }
      .card-actions {
        @apply(--layout);
        @apply(--layout-justified);
      }
    </style>
    <paper-card heading='Network'>
      <div class="card-content">
        <template is='dom-if' if='[[errors]]'>
          <div class='errors'>[[errors]]</div>
        </template>

        <table>
          <tr>
            <th>Container</th>
            <th>Host</th>
          </tr>
          <template
            is='dom-repeat'
            items='[[_data]]'
          >
            <tr>
              <td>
                [[item.container]]
              </td>
              <td>
                <paper-input
                  value='{{item.host}}'
                  no-label-float
                ></paper-input>
              </td>
            </tr>
          </template>
        </table>
      </div>
      <div class="card-actions">
        <paper-button
          on-tap='_saveTapped'
        >Save</paper-button>
        <ha-call-api-button
          class='warning'
          hass='[[hass]]'
          path="[[_pathAddonOptions(addon)]]"
          data="[[_resetData]]"
        >Reset</ha-call-api-button>
      </div>
    </paper-card>
  </template>
</dom-module>

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

  static get properties() {
    return {
      hass: Object,
      addon: String,
      errors: {
        type: String,
        value: null,
      },

      _data: {
        type: Object,
        value: [],
      },

      addonState: {
        type: Object,
        observer: '_addonStateChanged',
      },

      _resetData: {
        type: Object,
        value: {
          network: null,
        },
      },
    };
  }

  _addonStateChanged(addonState) {
    if (!addonState) return;

    var network = addonState.network || {};
    var items = Object.keys(network).map(function (key) {
      return {
        container: key,
        host: '' + network[key]
      };
    });
    this._data = items.sort(function (el1, el2) { return el1.host - el2.host; });
  }

  _saveTapped() {
    this.errors = null;
    var toSend = {};
    this._data.forEach(function (item) {
      toSend[item.container] = parseInt(item.host);
    });
    var path = 'hassio/addons/' + this.addon + '/options';

    this.hass.callApi('post', path, {
      network: toSend
    }).then(function () {
      this.fire('hass-api-called', { success: true, path: path });
    }.bind(this), function (resp) {
      this.errors = resp.body.message;
    }.bind(this));
  }

  _pathAddonOptions(addon) {
    return 'hassio/addons/' + addon + '/options';
  }
}

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