Add snapshots UI to hassio (#333)

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

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

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='_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>

panels/hassio/hassio-main.html

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

panels/hassio/snapshot/hassio-snapshot.html

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