Add network options for addon (#336)

* Add network options for addon

* Fix bugs

* Reinstate line

panels/hassio/addon-view/hassio-addon-network.html

@@ -0,0 +1,133 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.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/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>
+Polymer({
+  is: 'hassio-addon-network',
+
+  properties: {
+    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: function (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: function () {
+    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: function (addon) {
+    return 'hassio/addons/' + addon + '/options';
+  },
+});
+</script>

panels/hassio/addon-view/hassio-addon-view.html

@@ -8,12 +8,14 @@
 
 <link rel="import" href="./hassio-addon-info.html">
 <link rel="import" href="./hassio-addon-options.html">
+<link rel="import" href="./hassio-addon-network.html">
 <link rel="import" href="./hassio-addon-logs.html">
 
 <dom-module id="hassio-addon-view">
   <template>
     <style include="iron-flex ha-style">
       hassio-addon-info,
+      hassio-addon-network,
       hassio-addon-options {
         margin-bottom: 24px;
       }
@@ -52,6 +54,12 @@
           addon-state='[[addonState]]'
         ></hassio-addon-options>
 
+        <hassio-addon-network
+          hass='[[hass]]'
+          addon='[[_routeData.addon]]'
+          addon-state='[[addonState]]'
+        ></hassio-addon-network>
+
         <hassio-addon-logs
           hass='[[hass]]'
           addon='[[_routeData.addon]]'