Hassio: select audio input/output for add-ons (#1078)

* Hassio: audio input/output for add-ons

* Lint

* Lint

* Lint...

* Pimp code

* Update to latest changes

* Lint

* Lint

* try again

* hm...

* Fix this.fire

hassio/addon-view/hassio-addon-audio.html

@@ -0,0 +1,119 @@
+<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-button/paper-button.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
+<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../../bower_components/neon-animation/web-animations.html'>
+
+<link rel='import' href='../../src/resources/ha-style.html'>
+<link rel='import' href='../../src/util/hass-mixins.html'>
+
+<dom-module id="hassio-addon-audio">
+  <template>
+    <style include="ha-style">
+      :host,
+      paper-card,
+      paper-dropdown-menu {
+        display: block;
+      }
+      .errors {
+        color: var(--google-red-500);
+        margin-bottom: 16px;
+      }
+      paper-item {
+        width: 450px;
+      }
+      .card-actions {
+        text-align: right;
+      }
+    </style>
+    <paper-card heading='Audio'>
+      <div class="card-content">
+        <template is='dom-if' if='[[error]]'>
+          <div class='errors'>[[error]]</div>
+        </template>
+        
+        <paper-dropdown-menu label="Input">
+          <paper-listbox slot="dropdown-content" attr-for-selected="device" selected="{{selectedInput}}">
+            <template is='dom-repeat' items='[[inputDevices]]'>
+              <paper-item device$="[[item.device]]">[[item.name]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+        <paper-dropdown-menu label="Output">
+          <paper-listbox slot="dropdown-content" attr-for-selected="device" selected="{{selectedOutput}}">
+            <template is='dom-repeat' items='[[outputDevices]]'>
+              <paper-item device$="[[item.device]]">[[item.name]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+      </div>
+      <div class="card-actions">
+        <paper-button
+          on-click='_saveSettings'
+        >Save</paper-button>
+      </div>
+    </paper-card>
+  </template>
+</dom-module>
+
+<script>
+class HassioAddonAudio extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'hassio-addon-audio'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addon: {
+        type: Object,
+        observer: 'addonChanged'
+      },
+      inputDevices: Array,
+      outputDevices: Array,
+      selectedInput: String,
+      selectedOutput: String,
+      error: String,
+    };
+  }
+
+  addonChanged(addon) {
+    this.setProperties({
+      selectedInput: addon.audio_input || 'null',
+      selectedOutput: addon.audio_output || 'null'
+    });
+    if (this.outputDevices) return;
+
+    const noDevice = [{ device: 'null', name: '-' }];
+    this.hass.callApi('get', 'hassio/hardware/audio').then((resp) => {
+      const dev = resp.data.audio;
+      const input = Object.keys(dev.input).map(key => ({ device: key, name: dev.input[key] }));
+      const output = Object.keys(dev.output).map(key => ({ device: key, name: dev.output[key] }));
+      this.setProperties({
+        inputDevices: noDevice.concat(input),
+        outputDevices: noDevice.concat(output)
+      });
+    }, () => {
+      this.setProperties({
+        inputDevices: noDevice,
+        outputDevices: noDevice
+      });
+    });
+  }
+
+  _saveSettings() {
+    this.error = null;
+    const path = `hassio/addons/${this.addon.slug}/options`;
+    this.hass.callApi('post', path, {
+      audio_input: this.selectedInput === 'null' ? null : this.selectedInput,
+      audio_output: this.selectedOutput === 'null' ? null : this.selectedOutput
+    }).then(() => {
+      this.fire('hass-api-called', { success: true, path: path });
+    }, (resp) => {
+      this.error = resp.body.message;
+    });
+  }
+}
+
+customElements.define(HassioAddonAudio.is, HassioAddonAudio);
+</script>

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

@@ -10,6 +10,7 @@
 
 <link rel="import" href="./hassio-addon-info.html">
 <link rel="import" href="./hassio-addon-config.html">
+<link rel="import" href="./hassio-addon-audio.html">
 <link rel="import" href="./hassio-addon-network.html">
 <link rel="import" href="./hassio-addon-logs.html">
 <link rel='import' href='../hassio-markdown-dialog.html'>
@@ -28,6 +29,7 @@
       }
       hassio-addon-info,
       hassio-addon-network,
+      hassio-addon-audio,
       hassio-addon-config {
         margin-bottom: 24px;
       }
@@ -63,6 +65,13 @@
             addon-slug='[[routeData.slug]]'
           ></hassio-addon-config>
 
+          <template is='dom-if' if='[[addon.audio]]'>
+            <hassio-addon-audio
+              hass='[[hass]]'
+              addon='[[addon]]'
+            ></hassio-addon-audio>
+          </template>
+
           <template is='dom-if' if='[[addon.network]]'>
             <hassio-addon-network
               hass='[[hass]]'

hassio/system/hassio-host-info.html

@@ -137,7 +137,7 @@ class HassioHostInfo extends window.hassMixins.EventsMixin(Polymer.Element) {
   }
 
   _showHardware() {
-    this.hass.callApi('get', 'hassio/host/hardware')
+    this.hass.callApi('get', 'hassio/hardware/info')
       .then(
         resp => this._objectToMarkdown(resp.data)
         , () => 'Error getting hardware info'