mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-12 20:06:33 +00:00
Add snapshots UI to hassio (#333)
This commit is contained in:
parent
96ad1dae38
commit
c8c8b6aaab
@ -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">
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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.'
|
||||
|
143
panels/hassio/snapshot/hassio-snapshot.html
Normal file
143
panels/hassio/snapshot/hassio-snapshot.html
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user