From d705bd2e8fffe2e5c391f0e6736519b2c8dd6053 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 8 Jul 2017 22:37:44 -0700
Subject: [PATCH] Add routing to panels (#329)

* Add routes to Hass.io

* Add routing to automation editor

* Lint
---
 panels/automation/ha-automation-editor.html   |   8 +-
 panels/automation/ha-automation-picker.html   |   9 +-
 panels/automation/ha-panel-automation.html    |  83 +++-----
 .../addon-store/hassio-addon-repository.html  |  10 +-
 .../hassio-addon-store-overview.html          |   3 +-
 .../addon-store/hassio-addon-store-view.html  |   5 +-
 .../addon-store/hassio-addon-store.html       |  22 +-
 .../hassio/addon-view/hassio-addon-view.html  |  35 ++--
 panels/hassio/advanced/hassio-advanced.html   | 107 ++++++++++
 .../hassio-hass-info.html                     |   0
 .../hassio-host-info.html                     |   0
 .../hassio-supervisor-info.html               |   3 +-
 panels/hassio/dashboard/hassio-addons.html    |  10 +-
 panels/hassio/dashboard/hassio-dashboard.html |  69 ++++---
 .../hassio/dashboard/hassio-hass-update.html  |  72 +++++++
 panels/hassio/ha-panel-hassio.html            |  17 +-
 panels/hassio/hassio-main.html                | 192 ++++++++----------
 .../hassio/supervisor/hassio-supervisor.html  |   2 +-
 src/layouts/hass-error-screen.html            |  62 ++++++
 src/layouts/hass-loading-screen.html          |   4 -
 src/layouts/home-assistant-main.html          |   5 +-
 src/layouts/partial-cards.html                |   4 +-
 src/layouts/partial-panel-resolver.html       |   1 +
 23 files changed, 468 insertions(+), 255 deletions(-)
 create mode 100644 panels/hassio/advanced/hassio-advanced.html
 rename panels/hassio/{dashboard => advanced}/hassio-hass-info.html (100%)
 rename panels/hassio/{dashboard => advanced}/hassio-host-info.html (100%)
 rename panels/hassio/{dashboard => advanced}/hassio-supervisor-info.html (96%)
 create mode 100644 panels/hassio/dashboard/hassio-hass-update.html
 create mode 100644 src/layouts/hass-error-screen.html

diff --git a/panels/automation/ha-automation-editor.html b/panels/automation/ha-automation-editor.html
index 69e2f02ffa..c6eb04579a 100644
--- a/panels/automation/ha-automation-editor.html
+++ b/panels/automation/ha-automation-editor.html
@@ -228,7 +228,8 @@ Polymer({
         !confirm('You have unsaved changes. Are you sure you want to leave?')) {
       return;
     }
-    this.fire('hass-automation-picked', { id: null });
+    history.pushState(null, null, '/automation');
+    this.fire('location-changed');
   },
 
   _updateComponent: function () {
@@ -247,9 +248,8 @@ Polymer({
         this.dirty = false;
 
         if (this.creatingNew) {
-          this.fire('hass-automation-picked', {
-            id: id,
-          });
+          history.pushState(null, null, '/automation/edit/' + id);
+          this.fire('location-changed');
         }
       }.bind(this), function (errors) {
         this.errors = errors.body.message;
diff --git a/panels/automation/ha-automation-picker.html b/panels/automation/ha-automation-picker.html
index f1669f4eac..e7f20ae4b3 100644
--- a/panels/automation/ha-automation-picker.html
+++ b/panels/automation/ha-automation-picker.html
@@ -125,13 +125,14 @@ Polymer({
   },
 
   automationTapped: function (ev) {
-    this.fire('hass-automation-picked', {
-      id: this.automations[ev.model.index].attributes.id,
-    });
+    history.pushState(
+      null, null, '/automation/edit/' + this.automations[ev.model.index].attributes.id);
+    this.fire('location-changed');
   },
 
   addAutomation: function () {
-    this.fire('hass-create-automation');
+    history.pushState(null, null, '/automation/new');
+    this.fire('location-changed');
   },
 
   computeName: function (automation) {
diff --git a/panels/automation/ha-panel-automation.html b/panels/automation/ha-panel-automation.html
index e565ef2b9c..84240f7aac 100644
--- a/panels/automation/ha-panel-automation.html
+++ b/panels/automation/ha-panel-automation.html
@@ -1,5 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
+<link rel='import' href='../../bower_components/app-route/app-route.html'>
 
 <link rel="import" href="./ha-automation-picker.html">
 <link rel="import" href="./ha-automation-editor.html">
@@ -12,6 +13,17 @@
         height: 100%;
       }
     </style>
+    <app-route
+      route='[[route]]'
+      pattern='/edit/:automation'
+      data="{{_routeData}}"
+      active="{{_edittingAddon}}"
+    ></app-route>
+    <app-route
+      route='[[route]]'
+      pattern='/new'
+      active="{{_creatingNew}}"
+    ></app-route>
 
     <iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
     </iron-media-query>
@@ -30,7 +42,7 @@
         hass='[[hass]]'
         automation='[[automation]]'
         is-wide='[[isWide]]'
-        creating-new='[[creatingNew]]'
+        creating-new='[[_creatingNew]]'
       ></ha-automation-editor>
     </template>
   </template>
@@ -41,73 +53,49 @@ Polymer({
   is: 'ha-panel-automation',
 
   properties: {
-    hass: {
-      type: Object,
-    },
-
-    narrow: {
-      type: Boolean,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
+    hass: Object,
+    narrow: Boolean,
+    showMenu: Boolean,
+    route: Object,
+    _routeData: Object,
+    _routeMatches: Boolean,
+    _creatingNew: Boolean,
+    _edittingAddon: Boolean,
 
     automations: {
       type: Array,
       computed: 'computeAutomations(hass)',
     },
 
-    automationId: {
-      type: String,
-      value: null,
-    },
-
     automation: {
       type: Object,
-      computed: 'computeAutomation(automations, automationId, creatingNew)',
+      computed: 'computeAutomation(automations, _edittingAddon, _routeData)',
     },
 
-    wide: {
-      type: Boolean,
-    },
-
-    wideSidebar: {
-      type: Boolean,
-    },
+    wide: Boolean,
+    wideSidebar: Boolean,
 
     isWide: {
       type: Boolean,
       computed: 'computeIsWide(showMenu, wideSidebar, wide)'
     },
 
-    creatingNew: {
-      type: Boolean,
-      value: false,
-    },
-
     showEditor: {
       type: Boolean,
-      computed: 'computeShowEditor(automation, creatingNew)',
+      computed: 'computeShowEditor(_edittingAddon, _creatingNew)',
     }
   },
 
-  listeners: {
-    'hass-automation-picked': 'automationPicked',
-    'hass-create-automation': 'createAutomation',
-  },
-
   computeIsWide: function (showMenu, wideSidebar, wide) {
     return showMenu ? wideSidebar : wide;
   },
 
-  computeAutomation: function (automations, automationId, creatingNew) {
-    if (creatingNew || !automations) {
+  computeAutomation: function (automations, edittingAddon, routeData) {
+    if (!automations || !edittingAddon) {
       return null;
     }
     for (var i = 0; i < automations.length; i++) {
-      if (automations[i].attributes.id === automationId) {
+      if (automations[i].attributes.id === routeData.automation) {
         return automations[i];
       }
     }
@@ -142,19 +130,8 @@ Polymer({
     });
   },
 
-  computeShowEditor: function (automation, creatingNew) {
-    return creatingNew || automation;
-  },
-
-  automationPicked: function (ev) {
-    this.automationId = ev.detail.id;
-    if (this.creatingNew) {
-      this.creatingNew = false;
-    }
-  },
-
-  createAutomation: function () {
-    this.creatingNew = true;
+  computeShowEditor: function (_edittingAddon, _creatingNew) {
+    return _creatingNew || _edittingAddon;
   },
 });
 </script>
diff --git a/panels/hassio/addon-store/hassio-addon-repository.html b/panels/hassio/addon-store/hassio-addon-repository.html
index 520b5f465a..920e0c0f50 100644
--- a/panels/hassio/addon-store/hassio-addon-repository.html
+++ b/panels/hassio/addon-store/hassio-addon-repository.html
@@ -52,12 +52,6 @@ Polymer({
     addons: {
       type: Array,
     },
-
-    selectedAddon: {
-      type: String,
-      value: null,
-      notify: true,
-    },
   },
 
   computeShowIntro: function (repo) {
@@ -74,8 +68,8 @@ Polymer({
   },
 
   addonTapped: function (ev) {
-    this.selectedAddon = this.addons[ev.model.index].slug;
-    ev.target.blur();
+    history.pushState(null, null, '/hassio/store/' + this.addons[ev.model.index].slug);
+    this.fire('location-changed');
   },
 });
 </script>
diff --git a/panels/hassio/addon-store/hassio-addon-store-overview.html b/panels/hassio/addon-store/hassio-addon-store-overview.html
index 1343e49bcb..4df3c2a0b8 100644
--- a/panels/hassio/addon-store/hassio-addon-store-overview.html
+++ b/panels/hassio/addon-store/hassio-addon-store-overview.html
@@ -98,8 +98,7 @@ Polymer({
   },
 
   backTapped: function () {
-    // Closes the store. Needs to be done with app-route.
-    this.fire('hassio-select-addon', { addon: null });
+    history.back();
   },
 });
 </script>
diff --git a/panels/hassio/addon-store/hassio-addon-store-view.html b/panels/hassio/addon-store/hassio-addon-store-view.html
index 992c50f9a0..f74754da80 100644
--- a/panels/hassio/addon-store/hassio-addon-store-view.html
+++ b/panels/hassio/addon-store/hassio-addon-store-view.html
@@ -128,11 +128,12 @@ Polymer({
   },
 
   openAddon: function () {
-    this.fire('hassio-select-addon', { addon: this.addon.slug });
+    history.pushState(null, null, '/hassio/addon/' + this.addon.slug);
+    this.fire('location-changed');
   },
 
   backTapped: function () {
-    this.selectedAddon = null;
+    history.back();
   },
 });
 </script>
diff --git a/panels/hassio/addon-store/hassio-addon-store.html b/panels/hassio/addon-store/hassio-addon-store.html
index e693f66c4d..afe5defebc 100644
--- a/panels/hassio/addon-store/hassio-addon-store.html
+++ b/panels/hassio/addon-store/hassio-addon-store.html
@@ -3,6 +3,7 @@
 <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/app-route/app-route.html">
 
 <link rel="import" href="../../../src/components/ha-menu-button.html">
 
@@ -13,19 +14,23 @@
 
 <dom-module id="hassio-addon-store">
   <template>
-    <template is='dom-if' if='[[selectedAddon]]' restamp>
+    <app-route
+      route='[[route]]'
+      pattern='/:addon'
+      data="{{_routeData}}"
+      active="{{_routeMatches}}"
+    ></app-route>
+    <template is='dom-if' if='[[_routeMatches]]' restamp>
       <hassio-addon-store-view
         hass='[[hass]]'
-        selected-addon='{{selectedAddon}}'
         addon='[[selectedAddonObject]]'
         repo='[[computeActiveRepo(repos, selectedAddonObject)]]'
       ></hassio-addon-store-view>
     </template>
 
-    <template is='dom-if' if='[[!selectedAddon]]'>
+    <template is='dom-if' if='[[!_routeMatches]]'>
       <hassio-addon-store-overview
         hass='[[hass]]'
-        selected-addon='{{selectedAddon}}'
         addons='[[addons]]'
         repos='[[repos]]'
       ></hassio-addon-store-overview>
@@ -42,14 +47,13 @@ Polymer({
       type: Object,
     },
 
-    selectedAddon: {
-      type: String,
-      value: null,
-    },
+    route: Object,
+    _routeData: Object,
+    _routeMatches: Boolean,
 
     selectedAddonObject: {
       type: Object,
-      computed: 'computeActiveAddon(addons, selectedAddon)',
+      computed: 'computeActiveAddon(addons, _routeData.addon)',
     },
 
     addons: {
diff --git a/panels/hassio/addon-view/hassio-addon-view.html b/panels/hassio/addon-view/hassio-addon-view.html
index a65bc56765..6591469108 100644
--- a/panels/hassio/addon-view/hassio-addon-view.html
+++ b/panels/hassio/addon-view/hassio-addon-view.html
@@ -2,6 +2,7 @@
 <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/app-route/app-route.html">
 
 <link rel="import" href="../../../src/components/ha-menu-button.html">
 
@@ -36,6 +37,11 @@
         margin-right: 24px;
       }
     </style>
+    <app-route
+      route='[[route]]'
+      pattern='/addon/:addon'
+      data="{{_routeData}}"
+    ></app-route>
     <app-header-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
@@ -56,7 +62,7 @@
 
           <hassio-addon-state
             hass='[[hass]]'
-            addon='[[addon]]'
+            addon='[[_routeData.addon]]'
             addon-info='[[addonInfo]]'
             addon-state='[[addonState]]'
           ></hassio-addon-state>
@@ -66,13 +72,13 @@
           <div class='controls'>
             <hassio-addon-options
               hass='[[hass]]'
-              addon='[[addon]]'
+              addon='[[_routeData.addon]]'
               addon-state='[[addonState]]'
             ></hassio-addon-options>
 
             <hassio-addon-logs
               hass='[[hass]]'
-              addon='[[addon]]'
+              addon='[[_routeData.addon]]'
             ></hassio-addon-logs>
           </div>
         </template>
@@ -99,9 +105,10 @@ Polymer({
       value: false,
     },
 
-    addon: {
-      type: String,
-      observer: 'addonChanged',
+    route: Object,
+    _routeData: {
+      type: Object,
+      observer: '_routeDataChanged',
     },
 
     supervisorInfo: {
@@ -110,7 +117,7 @@ Polymer({
 
     addonInfo: {
       type: Object,
-      computed: 'computeAddonInfo(supervisorInfo, addon)',
+      computed: 'computeAddonInfo(supervisorInfo, _routeData.addon)',
     },
 
     addonState: {
@@ -134,17 +141,13 @@ Polymer({
     if (path.substr(path.lastIndexOf('/') + 1) === 'uninstall') {
       this.backTapped();
     } else {
-      this.addonChanged(this.addon);
+      this._routeDataChanged(this._routeData);
     }
   },
 
-  addonChanged: function (addon) {
-    if (!this.hass) {
-      setTimeout(function () { this.addonChanged(addon); }.bind(this), 0);
-      return;
-    }
-
-    this.hass.callApi('get', 'hassio/addons/' + addon + '/info')
+  _routeDataChanged: function (routeData) {
+    if (!routeData || !routeData.addon) return;
+    this.hass.callApi('get', 'hassio/addons/' + routeData.addon + '/info')
       .then(function (info) {
         this.addonState = info.data;
       }.bind(this), function () {
@@ -163,7 +166,7 @@ Polymer({
   },
 
   backTapped: function () {
-    this.fire('hassio-select-addon', { addon: null });
+    history.back();
   },
 });
 </script>
diff --git a/panels/hassio/advanced/hassio-advanced.html b/panels/hassio/advanced/hassio-advanced.html
new file mode 100644
index 0000000000..6afaaff87a
--- /dev/null
+++ b/panels/hassio/advanced/hassio-advanced.html
@@ -0,0 +1,107 @@
+<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/iron-flex-layout/iron-flex-layout-classes.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-host-info.html">
+<link rel="import" href="./hassio-hass-info.html">
+<link rel="import" href="./hassio-supervisor-info.html">
+
+<dom-module id="hassio-advanced">
+  <template>
+    <style include="iron-flex ha-style">
+      .content {
+        padding: 24px 0 32px;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+      .status {
+        @apply(--layout-horizontal);
+        margin-bottom: 24px;
+      }
+      .status > * {
+        @apply(--layout-flex);
+      }
+
+      .status > *:first-child {
+        margin-right: 24px;
+      }
+    </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>Advanced Settings</div>
+        </app-toolbar>
+      </app-header>
+
+      <div class='content'>
+        <div class='status'>
+          <hassio-supervisor-info
+            hass='[[hass]]'
+            data='[[supervisorInfo]]'
+          ></hassio-supervisor-info>
+
+          <hassio-host-info
+            hass='[[hass]]'
+            data='[[hostInfo]]'
+          ></hassio-host-info>
+        </div>
+        <div class='status'>
+          <hassio-hass-info
+            hass='[[hass]]'
+            data='[[hassInfo]]'
+          ></hassio-hass-info>
+          <div></div>
+        </div>
+      </div>
+    </app-header-layout>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-advanced',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    supervisorInfo: {
+      type: Object,
+      value: {},
+    },
+
+    hostInfo: {
+      type: Object,
+      value: {},
+    },
+
+    hassInfo: {
+      type: Object,
+      value: {},
+    },
+  },
+
+  backTapped: function () {
+    history.back();
+  },
+});
+</script>
diff --git a/panels/hassio/dashboard/hassio-hass-info.html b/panels/hassio/advanced/hassio-hass-info.html
similarity index 100%
rename from panels/hassio/dashboard/hassio-hass-info.html
rename to panels/hassio/advanced/hassio-hass-info.html
diff --git a/panels/hassio/dashboard/hassio-host-info.html b/panels/hassio/advanced/hassio-host-info.html
similarity index 100%
rename from panels/hassio/dashboard/hassio-host-info.html
rename to panels/hassio/advanced/hassio-host-info.html
diff --git a/panels/hassio/dashboard/hassio-supervisor-info.html b/panels/hassio/advanced/hassio-supervisor-info.html
similarity index 96%
rename from panels/hassio/dashboard/hassio-supervisor-info.html
rename to panels/hassio/advanced/hassio-supervisor-info.html
index 8ec55890b8..99bd9f4fc1 100644
--- a/panels/hassio/dashboard/hassio-supervisor-info.html
+++ b/panels/hassio/advanced/hassio-supervisor-info.html
@@ -100,7 +100,8 @@ Polymer({
   },
 
   supervisorLogsTapped: function () {
-    this.fire('hassio-show-page', { page: 'supervisor' });
+    history.pushState(null, null, '/hassio/supervisor');
+    this.fire('location-changed');
   }
 });
 </script>
diff --git a/panels/hassio/dashboard/hassio-addons.html b/panels/hassio/dashboard/hassio-addons.html
index df8be11f73..4dcc20e3aa 100644
--- a/panels/hassio/dashboard/hassio-addons.html
+++ b/panels/hassio/dashboard/hassio-addons.html
@@ -16,7 +16,7 @@
         cursor: pointer;
       }
     </style>
-    <paper-card heading="Installed Addons">
+    <paper-card heading="Installed Add-ons">
       <template is='dom-if' if='[[!data.length]]'>
         <div class='card-content'>
           Looks like you don't have any add-ons installed yet. Head over to <a href='#' on-tap='openStore'>the add-on store</a> to get started!
@@ -60,13 +60,15 @@ Polymer({
   },
 
   addonTapped: function (ev) {
-    this.fire('hassio-select-addon', { addon: this.data[ev.model.index].slug });
+    history.pushState(null, null, '/hassio/addon/' + this.data[ev.model.index].slug);
+    this.fire('location-changed');
     ev.target.blur();
   },
 
   openStore: function (ev) {
-    ev.preventDefault();
-    this.fire('hassio-show-page', { page: 'addon-store' });
+    history.pushState(null, null, '/hassio/store');
+    this.fire('location-changed');
+    ev.target.blur();
   }
 });
 </script>
diff --git a/panels/hassio/dashboard/hassio-dashboard.html b/panels/hassio/dashboard/hassio-dashboard.html
index 47c1cab021..92d555c3c9 100644
--- a/panels/hassio/dashboard/hassio-dashboard.html
+++ b/panels/hassio/dashboard/hassio-dashboard.html
@@ -5,12 +5,16 @@
 <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
+<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+
+
 <link rel="import" href="../../../src/components/ha-menu-button.html">
 
-<link rel="import" href="./hassio-host-info.html">
-<link rel="import" href="./hassio-hass-info.html">
-<link rel="import" href="./hassio-supervisor-info.html">
 <link rel="import" href="./hassio-addons.html">
+<link rel="import" href="./hassio-hass-update.html">
 
 <dom-module id="hassio-dashboard">
   <template>
@@ -31,6 +35,10 @@
       .status > *:first-child {
         margin-right: 24px;
       }
+
+      paper-listbox paper-item {
+        cursor: pointer;
+      }
     </style>
     <app-header-layout has-scrolling-region>
       <app-header slot="header" fixed>
@@ -39,30 +47,30 @@
           <div main-title>Hass.io</div>
           <paper-icon-button
             icon="mdi:shopping"
-            on-tap="storeTapped"
+            on-tap="_openStore"
           ></paper-icon-button>
+          <paper-menu-button
+            no-animations
+            horizontal-align="right"
+          >
+            <paper-icon-button
+              icon="mdi:dots-vertical"
+              slot="dropdown-trigger"
+            ></paper-icon-button>
+            <paper-listbox slot="dropdown-content">
+              <paper-item
+                on-tap='_openAdvanced'
+              >Advanced Settings</paper-item>
+            </paper-listbox>
+          </paper-menu-button>
         </app-toolbar>
       </app-header>
 
       <div class='content'>
-        <div class='status'>
-          <hassio-supervisor-info
-            hass='[[hass]]'
-            data='[[supervisorInfo]]'
-          ></hassio-supervisor-info>
-
-          <hassio-host-info
-            hass='[[hass]]'
-            data='[[hostInfo]]'
-          ></hassio-host-info>
-        </div>
-        <div class='status'>
-          <hassio-hass-info
-            hass='[[hass]]'
-            data='[[hassInfo]]'
-          ></hassio-hass-info>
-          <div></div>
-        </div>
+        <hassio-hass-update
+          hass='[[hass]]'
+          data='[[hassInfo]]'
+        ></hassio-hass-update>
         <hassio-addons
           hass='[[hass]]'
           data='[[supervisorInfo.addons]]'
@@ -95,19 +103,22 @@ Polymer({
       value: {},
     },
 
-    hostInfo: {
-      type: Object,
-      value: {},
-    },
-
     hassInfo: {
       type: Object,
       value: {},
     },
   },
 
-  storeTapped: function () {
-    this.fire('hassio-show-page', { page: 'addon-store' });
+  _openStore: function (ev) {
+    history.pushState(null, null, '/hassio/store');
+    this.fire('location-changed');
+    ev.target.blur();
+  },
+
+  _openAdvanced: function (ev) {
+    history.pushState(null, null, '/hassio/advanced');
+    this.fire('location-changed');
+    ev.target.blur();
   },
 });
 </script>
diff --git a/panels/hassio/dashboard/hassio-hass-update.html b/panels/hassio/dashboard/hassio-hass-update.html
new file mode 100644
index 0000000000..6cef5e6356
--- /dev/null
+++ b/panels/hassio/dashboard/hassio-hass-update.html
@@ -0,0 +1,72 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+
+<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
+
+<dom-module id="hassio-hass-update">
+  <template>
+    <style include="iron-flex ha-style">
+      paper-card {
+        display: block;
+        height: 100%;
+        margin-bottom: 32px;
+      }
+      .errors {
+        color: var(--google-red-500);
+        margin-top: 16px;
+      }
+    </style>
+
+    <template is='dom-if' if='[[_computeUpdateAvailable(data)]]'>
+      <paper-card heading='Update Available! 🎉'>
+        <div class="card-content">
+          You are currently running Home Assistant version [[data.version]] and [[data.last_version]] is available.
+          <template is='dom-if' if='[[errors]]'>
+            <div class='errors'>Error: [[errors]]</div>
+          </template>
+        </div>
+        <div class='card-actions'>
+          <ha-call-api-button
+            hass='[[hass]]'
+            path="hassio/homeassistant/update"
+          >Update</ha-call-api-button>
+        </div>
+      </paper-card>
+    </template>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-hass-update',
+
+  properties: {
+    hass: Object,
+    data: Object,
+  },
+
+  listeners: {
+    'hass-api-called': 'apiCalled',
+  },
+
+  apiCalled: function (ev) {
+    if (ev.detail.success) {
+      this.errors = null;
+      return;
+    }
+
+    var response = ev.detail.response;
+
+    if (typeof response.body === 'object') {
+      this.errors = response.body.message || 'Unknown error';
+    } else {
+      this.errors = response.body;
+    }
+  },
+
+  _computeUpdateAvailable: function (data) {
+    return data.version !== data.last_version;
+  },
+});
+</script>
diff --git a/panels/hassio/ha-panel-hassio.html b/panels/hassio/ha-panel-hassio.html
index c73c27b7d7..cf1e084563 100644
--- a/panels/hassio/ha-panel-hassio.html
+++ b/panels/hassio/ha-panel-hassio.html
@@ -13,6 +13,7 @@
       hass='[[hass]]'
       narrow='[[narrow]]'
       show-menu='[[showMenu]]'
+      route='[[route]]'
     ></hassio-main>
   </template>
 </dom-module>
@@ -22,18 +23,10 @@ Polymer({
   is: 'ha-panel-hassio',
 
   properties: {
-    hass: {
-      type: Object,
-    },
-
-    narrow: {
-      type: Boolean,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
+    hass: Object,
+    narrow: Boolean,
+    showMenu: Boolean,
+    route: Object,
 
     loaded: {
       type: Boolean,
diff --git a/panels/hassio/hassio-main.html b/panels/hassio/hassio-main.html
index ff4297ee00..0c4bace719 100644
--- a/panels/hassio/hassio-main.html
+++ b/panels/hassio/hassio-main.html
@@ -1,8 +1,12 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/app-route/app-route.html">
+<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
 
 <link rel="import" href="../../src/layouts/hass-loading-screen.html">
+<link rel="import" href="../../src/layouts/hass-error-screen.html">
 
 <link rel="import" href="./dashboard/hassio-dashboard.html">
+<link rel="import" href="./advanced/hassio-advanced.html">
 <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">
@@ -10,6 +14,17 @@
 
 <dom-module id="hassio-main">
   <template>
+    <style>
+      iron-pages {
+        height: 100%;
+      }
+    </style>
+    <app-route
+      route='[[route]]'
+      pattern='/:page'
+      data="{{_routeData}}"
+      tail="{{_routeTail}}"
+    ></app-route>
     <hassio-data
       id='data'
       hass='[[hass]]'
@@ -18,46 +33,68 @@
       host='{{hostInfo}}'
     ></hassio-data>
 
-    <template is='dom-if' if='[[dashboardSelected(currentPage)]]'>
-      <template is='dom-if' if='[[!loaded]]'>
-        <hass-loading-screen
+    <template is='dom-if' if='[[!loaded]]'>
+      <hass-loading-screen
+        narrow='[[narrow]]'
+        show-menu='[[showMenu]]'
+      ></hass-loading-screen>
+    </template>
+    <template is='dom-if' if='[[loaded]]'>
+      <iron-pages
+        selected='[[_routeData.page]]'
+        attr-for-selected='page-name'
+        fallback-selection='not-found'
+        selected-attribute='visible'
+      >
+        <hassio-addon-view
+          page-name='addon'
+          route='[[route]]'
+          hass='[[hass]]'
+          supervisor-info='[[supervisorInfo]]'
+          host-info='[[hostInfo]]'
+          addon='[[addon]]'
+        ></hassio-addon-view>
+
+        <hassio-addon-store
+          page-name='store'
+          route='[[_routeTail]]'
+          hass='[[hass]]'
+          supervisor-info='[[supervisorInfo]]'
+        ></hassio-addon-store>
+
+        <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]]'
-        ></hass-loading-screen>
-      </template>
-      <template is='dom-if' if='[[loaded]]'>
-        <hassio-dashboard
+          supervisor-info='[[supervisorInfo]]'
+          hass-info='[[hassInfo]]'
+        ></hassio-dashboard>
+
+        <hassio-advanced
+          page-name='advanced'
+          route='[[_routeTail]]'
           hass='[[hass]]'
           narrow='[[narrow]]'
           show-menu='[[showMenu]]'
           supervisor-info='[[supervisorInfo]]'
           host-info='[[hostInfo]]'
           hass-info='[[hassInfo]]'
-        ></hassio-dashboard>
-      </template>
-    </template>
+        ></hassio-advanced>
 
-    <template is='dom-if' if='[[addonViewSelected(currentPage)]]' restamp>
-      <hassio-addon-view
-        hass='[[hass]]'
-        supervisor-info='[[supervisorInfo]]'
-        host-info='[[hostInfo]]'
-        addon='[[addon]]'
-      ></hassio-addon-view>
-    </template>
-
-    <template is='dom-if' if='[[addonStoreSelected(currentPage)]]'>
-      <hassio-addon-store
-        hass='[[hass]]'
-        supervisor-info='[[supervisorInfo]]'
-      ></hassio-addon-store>
-    </template>
-
-    <template is='dom-if' if='[[supervisorSelected(currentPage)]]'>
-      <hassio-supervisor
-        hass='[[hass]]'
-        supervisor-info='[[supervisorInfo]]'
-      ></hassio-supervisor>
+        <hass-error-screen
+          page-name='not-found'
+          error='Page not found.'
+        ></hass-error-screen>
+      </iron-pages>
     </template>
   </template>
 </dom-module>
@@ -67,18 +104,15 @@ Polymer({
   is: 'hassio-main',
 
   properties: {
-    hass: {
+    hass: Object,
+    narrow: Boolean,
+    showMenu: Boolean,
+    route: {
       type: Object,
+      observer: '_routeChanged',
     },
-
-    narrow: {
-      type: Boolean,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
+    _routeData: Object,
+    _routeTail: Object,
 
     addon: {
       type: String,
@@ -100,34 +134,21 @@ Polymer({
       value: null,
     },
 
-    forceLoading: {
-      type: Boolean,
-      value: false,
-    },
-
     loaded: {
       type: Boolean,
-      computed: 'computeIsLoaded(supervisorInfo, hostInfo, hassInfo, forceLoading)',
-    },
-
-    currentPage: {
-      type: String,
-      value: 'dashboard',
-    },
-
-    lastPage: {
-      type: String,
-      value: 'dashboard',
+      computed: '_computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
     },
   },
 
   listeners: {
-    'hassio-select-addon': 'addonSelected',
-    'hassio-show-page': 'showPage',
-    'hass-api-called': 'apiCalled',
+    'hass-api-called': '_apiCalled',
   },
 
-  apiCalled: function (ev) {
+  attached: function () {
+    this._routeChanged(this.route);
+  },
+
+  _apiCalled: function (ev) {
     if (ev.detail.success) {
       var tries = 1;
 
@@ -142,52 +163,17 @@ Polymer({
     }
   },
 
-  computeIsLoaded: function (supervisorInfo, hostInfo, hassInfo, forceLoading) {
+  _computeIsLoaded: function (supervisorInfo, hostInfo, hassInfo) {
     return (supervisorInfo !== null &&
             hostInfo !== null &&
-            hassInfo !== null &&
-            !forceLoading);
+            hassInfo !== null);
   },
 
-  addonSelected: function (ev) {
-    var addon = ev.detail.addon;
-
-    if (this.currentPage === this.lastPage) {
-      this.lastPage = 'dashboard';
+  _routeChanged: function (route) {
+    if (route.path === '' && route.prefix === '/hassio') {
+      history.replaceState(null, null, '/hassio/dashboard');
+      this.fire('location-changed');
     }
-
-    if (addon) {
-      this.lastPage = this.currentPage;
-      this.currentPage = 'addon-view';
-      this.addon = addon;
-    } else {
-      this.currentPage = this.lastPage;
-      // Give time to cleanup the addon-view panel or it crashes
-      setTimeout(function () {
-        this.addon = addon;
-      }.bind(this), 0);
-    }
-  },
-
-  showPage: function (ev) {
-    this.currentPage = ev.detail.page;
-  },
-
-  dashboardSelected: function (currentPage) {
-    return currentPage === 'dashboard';
-  },
-
-  addonStoreSelected: function (currentPage) {
-    return currentPage === 'addon-store';
-  },
-
-  addonViewSelected: function (currentPage) {
-    return currentPage === 'addon-view';
-  },
-
-  supervisorSelected: function (currentPage) {
-    return currentPage === 'supervisor';
-  },
-
+  }
 });
 </script>
diff --git a/panels/hassio/supervisor/hassio-supervisor.html b/panels/hassio/supervisor/hassio-supervisor.html
index 034913a8f5..4a1856da7a 100644
--- a/panels/hassio/supervisor/hassio-supervisor.html
+++ b/panels/hassio/supervisor/hassio-supervisor.html
@@ -81,7 +81,7 @@ Polymer({
   },
 
   backTapped: function () {
-    this.fire('hassio-select-addon', { addon: null });
+    history.back();
   },
 });
 </script>
diff --git a/src/layouts/hass-error-screen.html b/src/layouts/hass-error-screen.html
new file mode 100644
index 0000000000..e98ece000d
--- /dev/null
+++ b/src/layouts/hass-error-screen.html
@@ -0,0 +1,62 @@
+<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
+
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+
+<dom-module id='hass-error-screen'>
+  <template>
+    <style include='iron-flex ha-style'>
+      .placeholder {
+        height: 100%;
+      }
+
+      .layout {
+        height: calc(100% - 64px);
+      }
+
+      paper-button {
+        font-weight: bold;
+        color: var(--primary-color);
+      }
+    </style>
+
+    <div class='placeholder'>
+      <app-toolbar>
+        <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+        <div main-title>Home Assistant</div>
+      </app-toolbar>
+      <div class='layout vertical center-center'>
+        <h3>[[error]]</h3>
+        <paper-button on-tap='backTapped'>go back</paper-button>
+      </div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hass-error-screen',
+
+  properties: {
+    narrow: {
+      type: Boolean,
+      value: false,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    error: {
+      type: String,
+      value: 'Oops! It looks like something went wrong.'
+    },
+  },
+
+  backTapped: function () {
+    history.back();
+  },
+});
+</script>
diff --git a/src/layouts/hass-loading-screen.html b/src/layouts/hass-loading-screen.html
index c0b1674e82..883f6a52ca 100644
--- a/src/layouts/hass-loading-screen.html
+++ b/src/layouts/hass-loading-screen.html
@@ -7,10 +7,6 @@
 <dom-module id='hass-loading-screen'>
   <template>
     <style include='iron-flex ha-style'>
-      [hidden] {
-        display: none !important;
-      }
-
       .placeholder {
         height: 100%;
       }
diff --git a/src/layouts/home-assistant-main.html b/src/layouts/home-assistant-main.html
index 32ce503862..7b38ad38ae 100644
--- a/src/layouts/home-assistant-main.html
+++ b/src/layouts/home-assistant-main.html
@@ -56,7 +56,7 @@
           narrow='[[narrow]]'
           hass='[[hass]]'
           show-menu='[[dockedSidebar]]'
-          route='[[routeTail]]'
+          route='[[route]]'
         ></partial-cards>
 
         <partial-panel-resolver
@@ -129,6 +129,9 @@ Polymer({
 
   attached: function () {
     window.removeInitMsg();
+    if (document.location.pathname === '/') {
+      history.replaceState(null, null, '/states');
+    }
   },
 
   computeForceNarrow: function (narrow, dockedSidebar) {
diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html
index 51f5c8e89a..c0819678b5 100644
--- a/src/layouts/partial-cards.html
+++ b/src/layouts/partial-cards.html
@@ -38,7 +38,7 @@
     </style>
     <app-route
       route="{{route}}"
-      pattern="/:view"
+      pattern="/states/:view"
       data="{{routeData}}"
       active="{{routeMatch}}"
     ></app-route>
@@ -264,7 +264,7 @@ Polymer({
     var current = this.currentView;
 
     if (view !== current) {
-      var path = this.route.prefix;
+      var path = '/states';
       if (view) {
         path += '/' + view;
       }
diff --git a/src/layouts/partial-panel-resolver.html b/src/layouts/partial-panel-resolver.html
index f24f27ac31..7ad858de89 100644
--- a/src/layouts/partial-panel-resolver.html
+++ b/src/layouts/partial-panel-resolver.html
@@ -100,6 +100,7 @@ Polymer({
             hass: this.hass,
             narrow: this.narrow,
             showMenu: this.showMenu,
+            route: this.routeTail,
             panel: panel,
           });
         this.resolved = true;