Re-organize addon code

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

@@ -0,0 +1,65 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
+
+<link rel="import" href="../../../src/components/ha-menu-button.html">
+
+<dom-module id="hassio-addon-info">
+  <template>
+    <style include="ha-style">
+      :host {
+        display: block;
+      }
+      paper-card {
+        display: block;
+      }
+    </style>
+    <paper-card heading='Info'>
+      <div class="card-content">
+        <div>[[addonInfo.description]]</div>
+        <table class='info'>
+          <tr>
+            <td>Installed</td>
+            <td>[[computeInstallStatus(addonInfo)]]</td>
+          </tr>
+          <tr>
+            <td>Version</td>
+            <td>[[addonInfo.version]]</td>
+          </tr>
+          <tr>
+            <td>Dedicated</td>
+            <td>[[addonInfo.dedicated]]</td>
+          </tr>
+        </table>
+      </div>
+    </paper-card>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-addon-info',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    addonInfo: {
+      type: Object,
+    },
+  },
+
+  computeInstallStatus(addon) {
+    return addon.installed || 'Not installed';
+  },
+});
+</script>

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

@@ -0,0 +1,60 @@
+<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-button/paper-button.html">
+
+<dom-module id="hassio-addon-logs">
+  <template>
+    <style include="iron-flex ha-style">
+      :host,
+      paper-card {
+        display: block;
+      }
+    </style>
+    <paper-card heading='Logs'>
+      <div class="card-content">
+        <pre>[[addonLogs]]</pre>
+      </div>
+      <div class="card-actions">
+        <paper-button on-tap='refresh'>Refresh</paper-button>
+      </div>
+    </paper-card>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-addon-logs',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    addon: {
+      type: String,
+      observer: 'addonChanged',
+    },
+
+    addonLogs: {
+      type: String,
+      value: '',
+    },
+  },
+
+  addonChanged: function (addon) {
+    if (!this.hass) {
+      setTimeout(function () { this.addonChanged(addon); }.bind(this), 0);
+      return;
+    }
+
+    this.refresh();
+  },
+
+  refresh: function () {
+    this.hass.callApi('get', 'hassio/addons/' + this.addon + '/logs')
+      .then(function (info) {
+        this.addonLogs = info;
+      }.bind(this));
+  },
+});
+</script>

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

@@ -0,0 +1,88 @@
+<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/iron-autogrow-textarea/iron-autogrow-textarea.html">
+
+<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+
+<dom-module id="hassio-addon-options">
+  <template>
+    <style include="ha-style">
+      :host {
+        display: block;
+      }
+      paper-card {
+        display: block;
+      }
+      iron-autogrow-textarea {
+        width: 100%;
+      }
+    </style>
+    <paper-card heading='Options'>
+      <div class="card-content">
+        <iron-autogrow-textarea value="{{options}}"></iron-autogrow-textarea>
+      </div>
+      <div class="card-actions">
+        <ha-call-api-button
+          hass='[[hass]]'
+          disabled='[[!optionsParsed]]'
+          data='[[computeOptionsData(optionsParsed)]]'
+          path="[[pathOptions(addon)]]"
+        >Save</ha-call-api-button>
+      </div>
+    </paper-card>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-addon-options',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    addon: {
+      type: String,
+    },
+
+    options: {
+      type: String,
+      value: '',
+    },
+
+    optionsParsed: {
+      type: Object,
+      computed: 'parseOptions(options)',
+    },
+
+    addonState: {
+      type: Object,
+      value: null,
+      observer: 'addonStateChanged',
+    },
+  },
+
+  addonStateChanged: function (addonState) {
+    this.options = addonState ? JSON.stringify(addonState.options, null, 2) : '';
+  },
+
+  parseOptions: function (options) {
+    try {
+      return JSON.parse(options);
+    } catch (err) {
+      return null;
+    }
+  },
+
+  computeOptionsData: function (optionsParsed) {
+    return {
+      options: optionsParsed,
+    };
+  },
+
+  pathOptions: function (addon) {
+    return 'hassio/addons/' + addon + '/options';
+  },
+});
+</script>

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

@@ -0,0 +1,134 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.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-addon-state">
+  <template>
+    <style include="ha-style">
+      :host {
+        display: block;
+      }
+      paper-card {
+        display: block;
+      }
+    </style>
+    <paper-card heading='Installed'>
+      <template is='dom-if' if='[[!addonState]]'>
+        <div class="card-content">
+          <div>Add-on is not installed.</div>
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button
+            hass='[[hass]]'
+            path="[[pathInstall(addon)]]"
+          >Install</ha-call-api-button>
+        </div>
+      </template>
+
+      <template is='dom-if' if='[[addonState]]'>
+        <div class="card-content">
+          <table class='info'>
+            <tr>
+              <td>Version</td>
+              <td>[[addonState.version]]</td>
+            </tr>
+            <tr>
+              <td>State</td>
+              <td>[[addonState.state]]</td>
+            </tr>
+            <tr>
+              <td>Boot</td>
+              <td>[[addonState.boot]]</td>
+            </tr>
+          </table>
+        </div>
+        <div class="card-actions">
+          <template is='dom-if' if='[[!isRunning]]'>
+            <ha-call-api-button
+              hass='[[hass]]'
+              path="[[pathStart(addon)]]"
+            >Start</ha-call-api-button>
+          </template>
+          <template is='dom-if' if='[[isRunning]]'>
+            <ha-call-api-button
+              class='warning'
+              hass='[[hass]]'
+              path="[[pathStop(addon)]]"
+            >Stop</ha-call-api-button>
+          </template>
+          <template is='dom-if' if='[[computeUpdateAvailable(addonState)]]'>
+            <ha-call-api-button
+              hass='[[hass]]'
+              path="[[pathUpdate(addon)]]"
+            >Update</ha-call-api-button>
+          </template>
+          <ha-call-api-button
+            class='warning'
+            hass='[[hass]]'
+            path="[[pathUninstall(addon)]]"
+          >Uninstall</ha-call-api-button>
+        </div>
+      </template>
+    </paper-card>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-addon-state',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    addon: {
+      type: String,
+    },
+
+    isRunning: {
+      type: Boolean,
+      computed: 'computeIsRunning(addonState)',
+    },
+
+    addonInfo: {
+      type: Object,
+      value: null,
+    },
+
+    addonState: {
+      type: Object,
+      value: null,
+    },
+  },
+
+  computeIsRunning: function (addonState) {
+    return addonState && addonState.state === 'started';
+  },
+
+  computeUpdateAvailable: function (data) {
+    return data && data.version !== data.last_version;
+  },
+
+  pathStart: function (addon) {
+    return 'hassio/addons/' + addon + '/start';
+  },
+
+  pathStop: function (addon) {
+    return 'hassio/addons/' + addon + '/stop';
+  },
+
+  pathInstall: function (addon) {
+    return 'hassio/addons/' + addon + '/install';
+  },
+
+  pathUninstall: function (addon) {
+    return 'hassio/addons/' + addon + '/uninstall';
+  },
+
+  pathUpdate: function (addon) {
+    return 'hassio/addons/' + addon + '/update';
+  },
+});
+</script>

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

@@ -2,28 +2,24 @@
 <link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
-<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
 <link rel="import" href="../../../src/components/ha-menu-button.html">
 
+<link rel="import" href="./hassio-addon-info.html">
+<link rel="import" href="./hassio-addon-state.html">
+<link rel="import" href="./hassio-addon-options.html">
+<link rel="import" href="./hassio-addon-logs.html">
+
 <dom-module id="hassio-addon-view">
   <template>
     <style include="iron-flex ha-style">
       paper-card {
         display: block;
       }
-      .controls paper-card {
+      .controls paper-card,
+      hassio-addon-options {
         margin-bottom: 24px;
       }
-      iron-autogrow-textarea {
-        width: 100%;
-      }
       .content {
         padding: 24px 0 32px;
         max-width: 600px;
@@ -53,112 +49,31 @@
 
       <div class='content'>
         <div class='status'>
-          <paper-card heading='Info'>
+          <hassio-addon-info
-            <div class="card-content">
-              <div>[[addonInfo.description]]</div>
-              <table class='info'>
-                <tr>
-                  <td>Installed</td>
-                  <td>[[computeInstallStatus(addonInfo)]]</td>
-                </tr>
-                <tr>
-                  <td>Version</td>
-                  <td>[[addonInfo.version]]</td>
-                </tr>
-                <tr>
-                  <td>Dedicated</td>
-                  <td>[[addonInfo.dedicated]]</td>
-                </tr>
-              </table>
-            </div>
-            <template is='dom-if' if='[[!addonState]]'>
-              <div class="card-actions">
-                <ha-call-api-button
             hass='[[hass]]'
-                  path="[[pathInstall(addon)]]"
+            addon-info='[[addonInfo]]'
-                >Install</ha-call-api-button>
+          ></hassio-addon-info>
-              </div>
-            </template>
-          </paper-card>
 
-          <paper-card heading='Installed'>
+          <hassio-addon-state
-            <template is='dom-if' if='[[!addonState]]'>
-              <div class="card-content">
-                <div>Add-on is not installed.</div>
-              </div>
-            </template>
-
-            <template is='dom-if' if='[[addonState]]'>
-              <div class="card-content">
-                <table class='info'>
-                  <tr>
-                    <td>Version</td>
-                    <td>[[addonState.version]]</td>
-                  </tr>
-                  <tr>
-                    <td>State</td>
-                    <td>[[addonState.state]]</td>
-                  </tr>
-                  <tr>
-                    <td>Boot</td>
-                    <td>[[addonState.boot]]</td>
-                  </tr>
-                </table>
-              </div>
-              <div class="card-actions">
-                <template is='dom-if' if='[[!isRunning]]'>
-                  <ha-call-api-button
             hass='[[hass]]'
-                    path="[[pathStart(addon)]]"
+            addon='[[addon]]'
-                  >Start</ha-call-api-button>
+            addon-info='[[addonInfo]]'
-                </template>
+            addon-state='[[addonState]]'
-                <template is='dom-if' if='[[computeUpdateAvailable(addonInfo)]]'>
+          ></hassio-addon-state>
-                  <ha-call-api-button
-                    hass='[[hass]]'
-                    path="[[pathUpdate(addon)]]"
-                  >Update</ha-call-api-button>
-                </template>
-                <template is='dom-if' if='[[isRunning]]'>
-                  <ha-call-api-button
-                    class='warning'
-                    hass='[[hass]]'
-                    path="[[pathStop(addon)]]"
-                  >Stop</ha-call-api-button>
-                </template>
-                <ha-call-api-button
-                  class='warning'
-                  hass='[[hass]]'
-                  path="[[pathUninstall(addon)]]"
-                >Uninstall</ha-call-api-button>
-              </div>
-            </template>
-          </paper-card>
         </div>
 
         <template is='dom-if' if='[[addonState]]'>
           <div class='controls'>
-            <paper-card heading='Options'>
+            <hassio-addon-options
-              <div class="card-content">
-                <iron-autogrow-textarea value="{{options}}"></iron-autogrow-textarea>
-              </div>
-              <div class="card-actions">
-                <ha-call-api-button
               hass='[[hass]]'
-                  disabled='[[!optionsParsed]]'
+              addon='[[addon]]'
-                  data='[[computeOptionsData(optionsParsed)]]'
+              addon-state='[[addonState]]'
-                  path="[[pathOptions(addon)]]"
+            ></hassio-addon-options>
-                >Save</ha-call-api-button>
-              </div>
-            </paper-card>
 
-            <paper-card heading='Logs'>
+            <hassio-addon-logs
-              <div class="card-content">
+              hass='[[hass]]'
-                <pre>[[addonLogs]]</pre>
+              addon='[[addon]]'
-              </div>
+            ></hassio-addon-logs>
-              <div class="card-actions">
-                <paper-button on-tap='refreshLogs'>Refresh</paper-button>
-              </div>
-            </paper-card>
           </div>
         </template>
       </div>
@@ -189,29 +104,10 @@ Polymer({
       observer: 'addonChanged',
     },
 
-    options: {
-      type: String,
-      value: '',
-    },
-
-    optionsParsed: {
-      type: Object,
-      computed: 'parseOptions(options)',
-    },
-
     supervisorInfo: {
       type: Object,
     },
 
-    hostInfo: {
-      type: Object,
-    },
-
-    isRunning: {
-      type: Boolean,
-      computed: 'computeIsRunning(addonState)',
-    },
-
     addonInfo: {
       type: Object,
       computed: 'computeAddonInfo(supervisorInfo, addon)',
@@ -220,7 +116,6 @@ Polymer({
     addonState: {
       type: Object,
       value: null,
-      observer: 'addonStateChanged',
     },
 
     addonLogs: {
@@ -249,18 +144,6 @@ Polymer({
       }.bind(this), function () {
         this.addonState = null;
       }.bind(this));
-    this.refreshLogs();
-  },
-
-  refreshLogs: function () {
-    this.hass.callApi('get', 'hassio/addons/' + this.addon + '/logs')
-      .then(function (info) {
-        this.addonLogs = info;
-      }.bind(this));
-  },
-
-  addonStateChanged: function (addonState) {
-    this.options = addonState ? JSON.stringify(addonState.options, null, 2) : '';
   },
 
   computeAddonInfo: function (supervisorInfo, addon) {
@@ -273,58 +156,8 @@ Polymer({
     return null;
   },
 
-  computeIsRunning: function (addonState) {
-    return addonState && addonState.state === 'started';
-  },
-
-  computeInstallStatus(addon) {
-    return addon.installed || 'Not installed';
-  },
-
-  computeUpdateAvailable: function (data) {
-    return data.version !== data.last_version;
-  },
-
-  parseOptions: function (options) {
-    try {
-      return JSON.parse(options);
-    } catch (err) {
-      return null;
-    }
-  },
-
-  computeOptionsData: function (optionsParsed) {
-    return {
-      options: optionsParsed,
-    };
-  },
-
   backTapped: function () {
     this.fire('hassio-select-addon', { addon: null });
   },
-
-  pathStart: function (addon) {
-    return 'hassio/addons/' + addon + '/start';
-  },
-
-  pathStop: function (addon) {
-    return 'hassio/addons/' + addon + '/stop';
-  },
-
-  pathInstall: function (addon) {
-    return 'hassio/addons/' + addon + '/install';
-  },
-
-  pathUninstall: function (addon) {
-    return 'hassio/addons/' + addon + '/uninstall';
-  },
-
-  pathUpdate: function (addon) {
-    return 'hassio/addons/' + addon + '/update';
-  },
-
-  pathOptions: function (addon) {
-    return 'hassio/addons/' + addon + '/options';
-  },
 });
 </script>

panels/hassio/ha-panel-hassio.html

@@ -71,7 +71,7 @@ Polymer({
 
     addon: {
       type: String,
-      value: '',
+      value: 'samba', // TEMP
     },
 
     supervisorInfo: {

panels/hassio/todo.md

@@ -5,9 +5,6 @@ Supervisor:
  - logs
  - toggle beta channel (/options)
 
-Addon View:
- - break up UI in smaller custom elements to organize code
-
 Network:
  - show
  - update