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
This commit is contained in:
Paulus Schoutsen 2017-07-22 11:02:33 -07:00 committed by GitHub
parent c7be840a9d
commit 5cdba73bac
9 changed files with 90 additions and 17 deletions

View File

@ -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));

View File

@ -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 };
},

View File

@ -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) {

View File

@ -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>

View File

@ -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,

View File

@ -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,

View File

@ -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>

View File

@ -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.'

View File

@ -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>