Hassio improv (#348)

* Add Home Assistant restart option

* Use addons/reload in store refresh

* Add link to web UI

* Show logo in addon view

* Fix routing showing not found

* Add reset options button to addon view

* Fix unload error in addon info

* Add refresh button to snapshot page

* Lint

panels/hassio/addon-store/hassio-addon-store.html

@@ -125,7 +125,7 @@ Polymer({
   },
 
   refreshData: function () {
-    this.hass.callApi('post', 'hassio/supervisor/reload')
+    this.hass.callApi('post', 'hassio/addons/reload')
       .then(function () {
         this._loadData();
       }.bind(this));

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

@@ -10,6 +10,7 @@
 
 
 <link rel="import" href="../../../src/components/ha-icon-check.html">
+<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-addon-info">
   <template>
@@ -32,10 +33,24 @@
         --iron-icon-width: 16px;
         color: var(--primary-color);
       }
+
+      .card-actions a {
+        text-decoration: none;
+      }
+      .logo {
+        max-height: 70px;
+        max-width: 100%;
+      }
     </style>
     <paper-card heading='Info'>
       <div class="card-content">
         <table class='info' cellspacing="0">
+          <template is='dom-if' if='[[addonState.logo]]'>
+            <tr>
+              <td>Logo</td>
+              <td><img src='[[_pathLogo(addonInfo.slug)]]' class='logo'></td>
+            </tr>
+          </template>
           <tr>
             <td>Description</td>
             <td>[[addonInfo.description]]</td>
@@ -128,6 +143,13 @@
           >Start</ha-call-api-button>
         </template>
         <template is='dom-if' if='[[_isRunning]]'>
+          <template is='dom-if' if='[[addonState.webui]]'>
+            <a
+              href='[[_pathWebui(addonState.webui)]]'
+              tabindex="-1"
+              target="_blank"
+            ><paper-button>Open web UI</paper-button></a>
+          </template>
           <ha-call-api-button
             class='warning'
             hass='[[hass]]'
@@ -196,6 +218,14 @@ Polymer({
     return 'hassio/addons/' + addon + '/options';
   },
 
+  _pathWebui: function (webui) {
+    return webui && webui.replace('[HOST]', document.location.hostname);
+  },
+
+  _pathLogo: function (addon) {
+    return 'hassio/addons/' + addon + '/logo';
+  },
+
   _dataToggleAutoUpdate: function (addon, addonState) {
     return addonState && { auto_update: !addonState.auto_update };
   },

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

@@ -1,6 +1,8 @@
 <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="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 
 <link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
 
@@ -13,6 +15,10 @@
       paper-card {
         display: block;
       }
+      .card-actions {
+        @apply(--layout);
+        @apply(--layout-justified);
+      }
       .errors {
         color: var(--google-red-500);
         margin-bottom: 16px;
@@ -33,6 +39,12 @@
           on-tap='saveTapped'
           disabled='[[!optionsParsed]]'
         >Save</paper-button>
+        <ha-call-api-button
+          class='warning'
+          hass='[[hass]]'
+          path="[[pathOptions(addon)]]"
+          data='[[_resetOptionsData]]'
+        >Reset to defaults</ha-call-api-button>
       </div>
     </paper-card>
   </template>
@@ -71,6 +83,11 @@ Polymer({
       value: null,
       observer: 'addonStateChanged',
     },
+
+    _resetOptionsData: {
+      type: Object,
+      value: { options: {} },
+    },
   },
 
   addonStateChanged: function (addonState) {

panels/hassio/dashboard/hassio-dashboard.html

@@ -58,6 +58,9 @@
               slot="dropdown-trigger"
             ></paper-icon-button>
             <paper-listbox slot="dropdown-content">
+              <paper-item
+                on-tap='_restartHomeAssistant'
+              >Restart Home Assistant</paper-item>
               <paper-item
                 on-tap='_openSnapshot'
               >Snapshots</paper-item>
@@ -129,5 +132,13 @@ Polymer({
     this.fire('location-changed');
     ev.target.blur();
   },
+
+  _restartHomeAssistant: function (ev) {
+    ev.target.blur();
+    // eslint-disable-next-line no-alert
+    if (confirm('Are you sure you want to restart Home Assistant?')) {
+      this.hass.callApi('POST', 'hassio/homeassistant/restart');
+    }
+  }
 });
 </script>

panels/hassio/ha-panel-hassio.html

@@ -26,15 +26,7 @@ Polymer({
     hass: Object,
     narrow: Boolean,
     showMenu: Boolean,
-    route: {
-      type: Object,
-      // Fake route object
-      value: {
-        prefix: '/hassio',
-        path: '',
-        __queryParams: {}
-      }
-    },
+    route: Object,
 
     loaded: {
       type: Boolean,

panels/hassio/hassio-main.html

@@ -94,6 +94,7 @@
         <hass-error-screen
           page-name='not-found'
           error='Page not found.'
+          title='Hass.io'
         ></hass-error-screen>
       </iron-pages>
     </template>
@@ -110,6 +111,12 @@ Polymer({
     showMenu: Boolean,
     route: {
       type: Object,
+      // Fake route object
+      value: {
+        prefix: '/hassio',
+        path: '/dashboard',
+        __queryParams: {}
+      },
       observer: '_routeChanged',
     },
     _routeData: Object,

panels/hassio/snapshot/hassio-snapshot.html

@@ -43,6 +43,10 @@
             on-tap='_backTapped'
           ></paper-icon-button>
           <div main-title>Snapshots</div>
+          <paper-icon-button
+            icon="mdi:refresh"
+            on-tap="_refreshTapped"
+          ></paper-icon-button>
         </app-toolbar>
       </app-header>
 
@@ -161,5 +165,12 @@ Polymer({
   _backTapped: function () {
     history.back();
   },
+
+  _refreshTapped: function () {
+    this.hass.callApi('post', 'hassio/snapshots/reload')
+      .then(function () {
+        this._updateData();
+      }.bind(this));
+  },
 });
 </script>

src/layouts/hass-error-screen.html

@@ -24,7 +24,7 @@
     <div class='placeholder'>
       <app-toolbar>
         <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-        <div main-title>Home Assistant</div>
+        <div main-title>[[title]]</div>
       </app-toolbar>
       <div class='layout vertical center-center'>
         <h3>[[error]]</h3>
@@ -49,6 +49,11 @@ Polymer({
       value: false,
     },
 
+    title: {
+      type: String,
+      value: 'Home Assistant',
+    },
+
     error: {
       type: String,
       value: 'Oops! It looks like something went wrong.'

src/resources/ha-style.html

@@ -86,16 +86,16 @@
         @apply(--paper-font-title);
       }
 
-      .card-actions > paper-button:not([disabled]),
-      .card-actions > ha-call-api-button:not([disabled]),
-      .card-actions > ha-call-service-button:not([disabled]) {
+      .card-actions paper-button:not([disabled]),
+      .card-actions ha-call-api-button:not([disabled]),
+      .card-actions ha-call-service-button:not([disabled]) {
         color: var(--primary-color);
         font-weight: 500;
       }
 
-      .card-actions > paper-button.warning:not([disabled]),
-      .card-actions > ha-call-api-button.warning:not([disabled]),
-      .card-actions > ha-call-service-button.warning:not([disabled]) {
+      .card-actions paper-button.warning:not([disabled]),
+      .card-actions ha-call-api-button.warning:not([disabled]),
+      .card-actions ha-call-service-button.warning:not([disabled]) {
         color: var(--google-red-500);
       }
     </style>