From b64c9548bca0f773b2c9a224b277b83c7789bf3f Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Wed, 28 Jun 2017 22:46:00 -0700
Subject: [PATCH] Update Hass.io panel with store details page

---
 .../addon-store/hassio-addon-repository.html  |  10 +-
 .../hassio-addon-store-overview.html          | 105 +++++++++++++
 .../addon-store/hassio-addon-store-view.html  | 138 ++++++++++++++++++
 .../addon-store/hassio-addon-store.html       |  99 ++++++-------
 .../hassio/addon-view/hassio-addon-state.html | 102 ++++++-------
 .../hassio/addon-view/hassio-addon-view.html  |  10 +-
 6 files changed, 345 insertions(+), 119 deletions(-)
 create mode 100644 panels/hassio/addon-store/hassio-addon-store-overview.html
 create mode 100644 panels/hassio/addon-store/hassio-addon-store-view.html

diff --git a/panels/hassio/addon-store/hassio-addon-repository.html b/panels/hassio/addon-store/hassio-addon-repository.html
index 35f9a56712..3460e46349 100644
--- a/panels/hassio/addon-store/hassio-addon-repository.html
+++ b/panels/hassio/addon-store/hassio-addon-repository.html
@@ -51,7 +51,13 @@ Polymer({
 
     addons: {
       type: Array,
-    }
+    },
+
+    selectedAddon: {
+      type: String,
+      value: null,
+      notify: true,
+    },
   },
 
   computeShowIntro: function (repo) {
@@ -63,7 +69,7 @@ Polymer({
   },
 
   addonTapped: function (ev) {
-    this.fire('hassio-select-addon', { addon: this.addons[ev.model.index].slug });
+    this.selectedAddon = this.addons[ev.model.index].slug;
     ev.target.blur();
   },
 });
diff --git a/panels/hassio/addon-store/hassio-addon-store-overview.html b/panels/hassio/addon-store/hassio-addon-store-overview.html
new file mode 100644
index 0000000000..1343e49bcb
--- /dev/null
+++ b/panels/hassio/addon-store/hassio-addon-store-overview.html
@@ -0,0 +1,105 @@
+<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="../../../src/components/ha-menu-button.html">
+
+<link rel="import" href="./hassio-repositories-editor.html">
+<link rel="import" href="./hassio-addon-repository.html">
+
+<dom-module id="hassio-addon-store-overview">
+  <template>
+    <style include="iron-flex ha-style">
+      paper-card {
+        display: block;
+      }
+      .content {
+        padding: 24px 0 32px;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      hassio-addon-repository {
+        margin-top: 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>Hass.io Add-Ons</div>
+          <paper-icon-button
+            icon="mdi:refresh"
+            on-tap="refreshTapped"
+          ></paper-icon-button>
+        </app-toolbar>
+      </app-header>
+
+      <div class='content'>
+        <hassio-repositories-editor
+          hass='[[hass]]'
+          repos='[[supervisorInfo.addons_repositories]]'
+        ></hassio-repositories-editor>
+        <template is='dom-repeat' items='[[repos]]' as='repo'>
+          <hassio-addon-repository
+            repo='[[repo]]'
+            addons='[[computeAddOns(repo.slug)]]'
+            selected-addon='{{selectedAddon}}'
+          ></hassio-addon-repository>
+        </template>
+      </div>
+    </app-header-layout>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-addon-store-overview',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    selectedAddon: {
+      type: String,
+      value: null,
+      notify: true,
+    },
+
+    addons: {
+      type: Array,
+      value: [],
+    },
+
+    repos: {
+      type: Array,
+      value: []
+    },
+
+    supervisorInfo: {
+      type: Object,
+    }
+  },
+
+  computeAddOns: function (repo) {
+    return this.addons.filter(function (addon) {
+      return addon.repository === repo;
+    });
+  },
+
+  refreshTapped: function () {
+    this.fire('hassio-store-refresh');
+  },
+
+  backTapped: function () {
+    // Closes the store. Needs to be done with app-route.
+    this.fire('hassio-select-addon', { addon: null });
+  },
+});
+</script>
diff --git a/panels/hassio/addon-store/hassio-addon-store-view.html b/panels/hassio/addon-store/hassio-addon-store-view.html
new file mode 100644
index 0000000000..992c50f9a0
--- /dev/null
+++ b/panels/hassio/addon-store/hassio-addon-store-view.html
@@ -0,0 +1,138 @@
+<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-card/paper-card.html">
+
+<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+
+<dom-module id="hassio-addon-store-view">
+  <template>
+    <style include="iron-flex ha-style">
+      paper-card {
+        display: block;
+        margin-bottom: 32px;
+      }
+
+      .content {
+        padding: 24px 0 32px;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      .addon-header {
+        @apply --paper-font-headline;
+      }
+      .addon-light {
+        color: var(--secondary-text-color);
+      }
+      .addon-version {
+        float: right;
+        font-size: 15px;
+        vertical-align: middle;
+      }
+    </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>[[addon.name]]</div>
+        </app-toolbar>
+      </app-header>
+
+      <div class='content'>
+        <paper-card>
+          <div class="card-content">
+            <div class="addon-header">[[addon.name]]
+              <div class="addon-version addon-light">
+                v[[addon.version]]
+              </div>
+            </div>
+            <p>[[addon.description]]</p>
+            <p class='addon-light'>
+              Made available via repository [[addon.repository]].
+            </p>
+            <template is='dom-if' if='[[addon.url]]'>
+              <p><a target='_blank' href='[[addon.url]]'>Visit website</a></p>
+            </template>
+            <template is='dom-if' if='[[addon.build]]'>
+              <p class='addon-light'>
+                This add-on will built locally on the device.
+              </p>
+            </template>
+          </div>
+          <div class="card-actions">
+            <template is='dom-if' if='[[addon.installed]]'>
+              <paper-button on-tap='openAddon'>Open</paper-button>
+            </template>
+            <template is='dom-if' if='[[!addon.installed]]'>
+              <ha-call-api-button
+                hass='[[hass]]'
+                path="[[pathInstall(addon)]]"
+              >Install</ha-call-api-button>
+            </template>
+          </div>
+        </paper-card>
+
+        <paper-card>
+          <div class='card-content'>
+            <div class='addon-header'>Repository: [[repo.name]]</div>
+            <p>Maintainer: [[repo.maintainer]]</p>
+            <p><a target='_blank' href='[[repo.url]]'>Visit website</a></p>
+          </div>
+        </paper-card>
+      </div>
+    </app-header-layout>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-addon-store-view',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    selectedAddon: {
+      type: String,
+      value: null,
+      notify: true,
+    },
+
+    addon: {
+      type: Object,
+    },
+
+    repo: {
+      type: Object,
+    },
+  },
+
+  listeners: {
+    'hass-api-called': 'apiCalled',
+  },
+
+  pathInstall: function (addon) {
+    return addon && 'hassio/addons/' + addon.slug + '/install';
+  },
+
+  apiCalled: function (ev) {
+    if (ev.detail.success) {
+      this.openAddon();
+    }
+  },
+
+  openAddon: function () {
+    this.fire('hassio-select-addon', { addon: this.addon.slug });
+  },
+
+  backTapped: function () {
+    this.selectedAddon = null;
+  },
+});
+</script>
diff --git a/panels/hassio/addon-store/hassio-addon-store.html b/panels/hassio/addon-store/hassio-addon-store.html
index f0f06a8430..e693f66c4d 100644
--- a/panels/hassio/addon-store/hassio-addon-store.html
+++ b/panels/hassio/addon-store/hassio-addon-store.html
@@ -8,51 +8,28 @@
 
 <link rel="import" href="./hassio-repositories-editor.html">
 <link rel="import" href="./hassio-addon-repository.html">
+<link rel="import" href="./hassio-addon-store-view.html">
+<link rel="import" href="./hassio-addon-store-overview.html">
 
 <dom-module id="hassio-addon-store">
   <template>
-    <style include="iron-flex ha-style">
-      paper-card {
-        display: block;
-      }
-      .content {
-        padding: 24px 0 32px;
-        max-width: 600px;
-        margin: 0 auto;
-      }
+    <template is='dom-if' if='[[selectedAddon]]' restamp>
+      <hassio-addon-store-view
+        hass='[[hass]]'
+        selected-addon='{{selectedAddon}}'
+        addon='[[selectedAddonObject]]'
+        repo='[[computeActiveRepo(repos, selectedAddonObject)]]'
+      ></hassio-addon-store-view>
+    </template>
 
-      hassio-addon-repository {
-        margin-top: 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>Hass.io Add-Ons</div>
-          <paper-icon-button
-            icon="mdi:refresh"
-            on-tap="refreshTapped"
-          ></paper-icon-button>
-        </app-toolbar>
-      </app-header>
-
-      <div class='content'>
-        <hassio-repositories-editor
-          hass='[[hass]]'
-          repos='[[supervisorInfo.addons_repositories]]'
-        ></hassio-repositories-editor>
-        <template is='dom-repeat' items='[[repos]]' as='repo'>
-          <hassio-addon-repository
-            repo='[[repo]]'
-            addons='[[computeAddOns(repo.slug)]]'
-          ></hassio-addon-repository>
-        </template>
-      </div>
-    </app-header-layout>
+    <template is='dom-if' if='[[!selectedAddon]]'>
+      <hassio-addon-store-overview
+        hass='[[hass]]'
+        selected-addon='{{selectedAddon}}'
+        addons='[[addons]]'
+        repos='[[repos]]'
+      ></hassio-addon-store-overview>
+    </template>
   </template>
 </dom-module>
 
@@ -65,13 +42,14 @@ Polymer({
       type: Object,
     },
 
-    narrow: {
-      type: Boolean,
+    selectedAddon: {
+      type: String,
+      value: null,
     },
 
-    showMenu: {
-      type: Boolean,
-      value: false,
+    selectedAddonObject: {
+      type: Object,
+      computed: 'computeActiveAddon(addons, selectedAddon)',
     },
 
     addons: {
@@ -91,6 +69,7 @@ Polymer({
 
   listeners: {
     'hass-api-called': 'apiCalled',
+    'hassio-store-refresh': 'refreshData',
   },
 
   apiCalled: function (ev) {
@@ -114,21 +93,31 @@ Polymer({
       }.bind(this));
   },
 
-  computeAddOns: function (repo) {
-    return this.addons.filter(function (addon) {
-      return addon.repository === repo;
-    });
+  computeActiveAddon: function (addons, selectedAddon) {
+    for (var i = 0; i < addons.length; i++) {
+      if (addons[i].slug === selectedAddon) {
+        return addons[i];
+      }
+    }
+    return null;
   },
 
-  refreshTapped: function () {
+  computeActiveRepo: function (repos, selectedAddonObject) {
+    if (!selectedAddonObject) return null;
+
+    for (var i = 0; i < repos.length; i++) {
+      if (repos[i].slug === selectedAddonObject.repository) {
+        return repos[i];
+      }
+    }
+    return null;
+  },
+
+  refreshData: function () {
     this.hass.callApi('post', 'hassio/supervisor/reload')
       .then(function () {
         this.loadData();
       }.bind(this));
   },
-
-  backTapped: function () {
-    this.fire('hassio-select-addon', { addon: null });
-  },
 });
 </script>
diff --git a/panels/hassio/addon-view/hassio-addon-state.html b/panels/hassio/addon-view/hassio-addon-state.html
index 42eae8abf2..7efdae14ca 100644
--- a/panels/hassio/addon-view/hassio-addon-state.html
+++ b/panels/hassio/addon-view/hassio-addon-state.html
@@ -14,67 +14,53 @@
       }
     </style>
     <paper-card heading='Installed'>
-      <template is='dom-if' if='[[!addonState]]'>
-        <div class="card-content">
-          <div>Add-on is not installed.</div>
-        </div>
-        <div class="card-actions">
+      <div class="card-content">
+        <table class='info'>
+          <tr>
+            <td>Version</td>
+            <td>[[addonState.version]]</td>
+          </tr>
+          <tr>
+            <td>State</td>
+            <td>[[addonState.state]]</td>
+          </tr>
+          <tr>
+            <td>Boot</td>
+            <td>[[addonState.boot]]</td>
+          </tr>
+        </table>
+      </div>
+      <div class="card-actions">
+        <template is='dom-if' if='[[!isRunning]]'>
           <ha-call-api-button
             hass='[[hass]]'
-            path="[[pathInstall(addon)]]"
-          >Install</ha-call-api-button>
-        </div>
-      </template>
-
-      <template is='dom-if' if='[[addonState]]'>
-        <div class="card-content">
-          <table class='info'>
-            <tr>
-              <td>Version</td>
-              <td>[[addonState.version]]</td>
-            </tr>
-            <tr>
-              <td>State</td>
-              <td>[[addonState.state]]</td>
-            </tr>
-            <tr>
-              <td>Boot</td>
-              <td>[[addonState.boot]]</td>
-            </tr>
-          </table>
-        </div>
-        <div class="card-actions">
-          <template is='dom-if' if='[[!isRunning]]'>
-            <ha-call-api-button
-              hass='[[hass]]'
-              path="[[pathStart(addon)]]"
-            >Start</ha-call-api-button>
-          </template>
-          <template is='dom-if' if='[[isRunning]]'>
-            <ha-call-api-button
-              class='warning'
-              hass='[[hass]]'
-              path="[[pathRestart(addon)]]"
-            >Restart</ha-call-api-button>
-            <ha-call-api-button
-              class='warning'
-              hass='[[hass]]'
-              path="[[pathStop(addon)]]"
-            >Stop</ha-call-api-button>
-          </template>
-          <template is='dom-if' if='[[computeUpdateAvailable(addonState)]]'>
-            <ha-call-api-button
-              hass='[[hass]]'
-              path="[[pathUpdate(addon)]]"
-            >Update</ha-call-api-button>
-          </template>
+            path="[[pathStart(addon)]]"
+          >Start</ha-call-api-button>
+        </template>
+        <template is='dom-if' if='[[isRunning]]'>
           <ha-call-api-button
             class='warning'
             hass='[[hass]]'
-            path="[[pathUninstall(addon)]]"
-          >Uninstall</ha-call-api-button>
-        </div>
-      </template>
+            path="[[pathRestart(addon)]]"
+          >Restart</ha-call-api-button>
+          <ha-call-api-button
+            class='warning'
+            hass='[[hass]]'
+            path="[[pathStop(addon)]]"
+          >Stop</ha-call-api-button>
+        </template>
+        <template is='dom-if' if='[[computeUpdateAvailable(addonState)]]'>
+          <ha-call-api-button
+            hass='[[hass]]'
+            path="[[pathUpdate(addon)]]"
+          >Update</ha-call-api-button>
+        </template>
+        <ha-call-api-button
+          class='warning'
+          hass='[[hass]]'
+          path="[[pathUninstall(addon)]]"
+        >Uninstall</ha-call-api-button>
+      </div>
     </paper-card>
   </template>
 </dom-module>
@@ -128,10 +114,6 @@ Polymer({
     return 'hassio/addons/' + addon + '/restart';
   },
 
-  pathInstall: function (addon) {
-    return 'hassio/addons/' + addon + '/install';
-  },
-
   pathUninstall: function (addon) {
     return 'hassio/addons/' + addon + '/uninstall';
   },
diff --git a/panels/hassio/addon-view/hassio-addon-view.html b/panels/hassio/addon-view/hassio-addon-view.html
index 6f097396db..a65bc56765 100644
--- a/panels/hassio/addon-view/hassio-addon-view.html
+++ b/panels/hassio/addon-view/hassio-addon-view.html
@@ -128,8 +128,14 @@ Polymer({
     'hass-api-called': 'apiCalled',
   },
 
-  apiCalled: function () {
-    this.addonChanged(this.addon);
+  apiCalled: function (ev) {
+    var path = ev.detail.path;
+
+    if (path.substr(path.lastIndexOf('/') + 1) === 'uninstall') {
+      this.backTapped();
+    } else {
+      this.addonChanged(this.addon);
+    }
   },
 
   addonChanged: function (addon) {