Add snapshots UI to hassio (#333)

This commit is contained in:
Paulus Schoutsen 2017-07-11 09:07:28 -07:00 committed by GitHub
parent 96ad1dae38
commit c8c8b6aaab
4 changed files with 161 additions and 5 deletions

View File

@ -4,8 +4,6 @@
<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="../../../src/components/ha-menu-button.html">
<link rel="import" href="./hassio-repositories-editor.html">
<link rel="import" href="./hassio-addon-repository.html">

View File

@ -58,6 +58,9 @@
slot="dropdown-trigger"
></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item
on-tap='_openSnapshot'
>Snapshots</paper-item>
<paper-item
on-tap='_openAdvanced'
>Advanced Settings</paper-item>
@ -120,5 +123,11 @@ Polymer({
this.fire('location-changed');
ev.target.blur();
},
_openSnapshot: function (ev) {
history.pushState(null, null, '/hassio/snapshot');
this.fire('location-changed');
ev.target.blur();
},
});
</script>

View File

@ -10,6 +10,7 @@
<link rel="import" href="./addon-view/hassio-addon-view.html">
<link rel="import" href="./addon-store/hassio-addon-store.html">
<link rel="import" href="./supervisor/hassio-supervisor.html">
<link rel="import" href="./snapshot/hassio-snapshot.html">
<link rel="import" href="./hassio-data.html">
<dom-module id="hassio-main">
@ -64,14 +65,12 @@
<hassio-supervisor
page-name='supervisor'
route='[[_routeTail]]'
hass='[[hass]]'
supervisor-info='[[supervisorInfo]]'
></hassio-supervisor>
<hassio-dashboard
page-name='dashboard'
route='[[_routeTail]]'
hass='[[hass]]'
narrow='[[narrow]]'
show-menu='[[showMenu]]'
@ -81,7 +80,6 @@
<hassio-advanced
page-name='advanced'
route='[[_routeTail]]'
hass='[[hass]]'
narrow='[[narrow]]'
show-menu='[[showMenu]]'
@ -90,6 +88,14 @@
hass-info='[[hassInfo]]'
></hassio-advanced>
<hassio-snapshot
page-name='snapshot'
hass='[[hass]]'
narrow='[[narrow]]'
show-menu='[[showMenu]]'
supervisor-info='[[supervisorInfo]]'
></hassio-snapshot>
<hass-error-screen
page-name='not-found'
error='Page not found.'

View File

@ -0,0 +1,143 @@
<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-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../src/components/ha-menu-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
<dom-module id="hassio-snapshot">
<template>
<style include="iron-flex ha-style">
paper-card {
display: block;
}
paper-card:first-child {
margin-bottom: 32px;
}
.content {
padding: 24px 0 32px;
max-width: 600px;
margin: 0 auto;
}
.form paper-input {
max-width: 300px;
}
ha-call-api-button {
color: var(--primary-color);
}
</style>
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<paper-icon-button
icon='mdi:arrow-left'
on-tap='_backTapped'
></paper-icon-button>
<div main-title>Snapshots</div>
</app-toolbar>
</app-header>
<div class='content'>
<template is='dom-if' if='[[_error]]'>
<p class='error'>[[_error]]</p>
</template>
<paper-card heading='Make a snapshot'>
<div class='card-content form'>
Snapshots allow you to easily backup and restore all data in your Hass.io instance.
<p>
<paper-input
disabled='[[_creatingSnapshot]]'
label="Snapshot name"
value='{{_snapshotName}}'
></paper-input>
</div>
<div class='card-actions'>
<paper-button
disabled='[[_creatingSnapshot]]'
on-tap='_createSnapshot'
>Create</paper-button>
</div>
</paper-card>
<paper-card heading='Available Snapshots'>
<div class='card-content'>
Snapshots allow you to easily backup and restore all data in your Hass.io instance.
<template is='dom-if' if='[[!data.length]]'>
<p>Looks like you don't have any snapshots yet.</p>
</template>
</div>
<template is='dom-repeat' items='[[data]]' as='snapshot'>
<paper-item>
<paper-item-body two-line>
<div>[[snapshot.name]]</div>
<div secondary>[[snapshot.date]]</div>
</paper-item-body>
<ha-call-api-button
hass='[[hass]]'
path="[[_computeRestorePath(snapshot)]]"
>Restore</ha-call-api-button>
</paper-item>
</template>
</paper-card>
</div>
</app-header-layout>
</template>
</dom-module>
<script>
Polymer({
is: 'hassio-snapshot',
properties: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
supervisorInfo: Object,
_snapshotName: String,
_creatingSnapshot: Boolean,
_error: Object,
data: {
type: Array,
computed: '_computeData(supervisorInfo)'
}
},
_createSnapshot: function () {
this._creatingSnapshot = true;
this.hass.callApi('post', 'hassio/snapshots/new/full', {
name: this._snapshotName,
})
.then(function () {
this._creatingSnapshot = false;
this._snapshotName = '';
// This will trigger a refresh of supervisor info
this.fire('hass-api-called', { success: true });
}.bind(this), function (error) {
this._creatingSnapshot = false;
this._error = error.message;
}.bind(this));
},
_computeData: function (supervisorInfo) {
return supervisorInfo.snapshots;
},
_computeRestorePath: function (snapshot) {
return 'hassio/snapshots/' + snapshot.slug + '/restore/full';
},
_backTapped: function () {
history.back();
},
});
</script>