From cce4c853c9b89b7afbcf89ea31964fb5a7e1cea2 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 11 Feb 2017 16:57:01 -0800
Subject: [PATCH] Add hassbian panel (#201)

* Add hassbian panel

* Lint

* Make config more generic
---
 panels/config/ha-config-section-hassbian.html | 175 ++++++++++++++++++
 panels/config/ha-config-section.html          | 123 ++++++++++++
 panels/config/ha-panel-config.html            |  52 ++++++
 3 files changed, 350 insertions(+)
 create mode 100644 panels/config/ha-config-section-hassbian.html
 create mode 100644 panels/config/ha-config-section.html
 create mode 100644 panels/config/ha-panel-config.html

diff --git a/panels/config/ha-config-section-hassbian.html b/panels/config/ha-config-section-hassbian.html
new file mode 100644
index 0000000000..722406146a
--- /dev/null
+++ b/panels/config/ha-config-section-hassbian.html
@@ -0,0 +1,175 @@
+<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/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.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="../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/resources/ha-style.html">
+
+<link rel="import" href="./ha-config-section.html">
+
+<dom-module id="ha-config-section-hassbian">
+  <template>
+    <style include="iron-flex ha-style">
+      .header {
+        font-size: 16px;
+        margin-bottom: 1em;
+      }
+
+      .header .status {
+        font-size: 14px;
+        float: right;
+      }
+
+      .card-actions paper-button {
+        color: var(--default-primary-color);
+        font-weight: 500;
+      }
+    </style>
+    <ha-config-section
+      narrow='[[narrow]]'
+      show-menu='[[showMenu]]'
+    >
+      <span slot='header'>Bring Hassbian to the next level</span>
+      <span slot='introduction'>
+        Discover exciting add-ons to enhance your Home Assistant installation. Add an MQTT server or control a connected TV via HDMI-CEC.
+      </span>
+
+      <template is='dom-if' if='[[suiteStatus]]'>
+        <template is='dom-repeat' items='[[computeSuiteKeys(suiteStatus)]]' as='suiteKey'>
+          <paper-card>
+            <div class='card-content'>
+              <div class='header'>
+                [[computeTitle(suiteKey)]]
+                <span class='status'>
+                  [[computeSuiteStatus(suiteStatus, suiteKey)]]
+                </span>
+              </div>
+              [[computeSuiteDescription(suiteStatus, suiteKey)]]
+            </div>
+            <div class='card-actions'>
+              <paper-button on-tap='suiteMoreInfoTapped'>LEARN MORE</paper-button>
+
+              <template is='dom-if' if='[[computeShowInstall(suiteStatus, suiteKey)]]'>
+                <paper-button on-tap='suiteActionTapped'>INSTALL</paper-button>
+              </template>
+            </div>
+          </paper-card>
+        </template>
+      </template>
+    </ha-config-section>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-config-section-hassbian',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    suiteStatus: {
+      type: Object,
+      value: null,
+    },
+  },
+
+  updateStatus: function () {
+    // TODO tapping install while something is installing triggers a second
+    //      update loop to start.
+    this.hass.callApi('GET', 'hassbian/suites').then(function (suites) {
+      this.suiteStatus = suites;
+
+      var isInstalling = false;
+      var keys = Object.keys(suites);
+      for (var i = 0; i < keys.length; i++) {
+        if (suites[keys[i]].state === 'installing') {
+          isInstalling = true;
+          break;
+        }
+      }
+
+      if (isInstalling) {
+        this.async(this.updateStatus, 5000);
+      }
+    }.bind(this));
+  },
+
+  attached: function () {
+    this.updateStatus = this.updateStatus.bind(this);
+    this.updateStatus();
+  },
+
+  computeSuiteKeys: function (suiteStatus) {
+    // Prioritize installing packages
+    return Object.keys(suiteStatus).sort(function (keyA, keyB) {
+      var installingA = suiteStatus[keyA].state === 'installing';
+      var installingB = suiteStatus[keyB].state === 'installing';
+
+      if (installingA && installingB) {
+        // do nothing
+      } else if (installingA) {
+        return -1;
+      } else if (installingB) {
+        return 1;
+      }
+
+      if (keyA < keyB) {
+        return -1;
+      }
+      if (keyA > keyB) {
+        return 1;
+      }
+      return 0;
+    });
+  },
+
+  computeSuiteDescription: function (suiteStatus, suiteKey) {
+    return suiteStatus[suiteKey].description;
+  },
+
+  computeTitle: function (suiteKey) {
+    return suiteKey.substr(0, 1).toUpperCase() + suiteKey.substr(1);
+  },
+
+  computeSuiteStatus: function (suiteStatus, suiteKey) {
+    const state = suiteStatus[suiteKey].state.replace(/_/, ' ');
+    return state.substr(0, 1).toUpperCase() + state.substr(1);
+  },
+
+  computeShowStatus: function (suiteStatus, suiteKey) {
+    var state = suiteStatus[suiteKey].state;
+    return state !== 'installing' && state !== 'not_installed';
+  },
+
+  computeShowInstall: function (suiteStatus, suiteKey) {
+    return suiteStatus[suiteKey].state === 'not_installed';
+  },
+
+  suiteMoreInfoTapped: function (ev) {
+    console.log('learn more', ev.model.item);
+  },
+
+  suiteActionTapped: function () {
+    // TODO install tapped suite
+    this.hass.callApi('POST', 'hassbian/suites/openzwave/install').then(this.updateStatus);
+  },
+});
+</script>
diff --git a/panels/config/ha-config-section.html b/panels/config/ha-config-section.html
new file mode 100644
index 0000000000..79b8123916
--- /dev/null
+++ b/panels/config/ha-config-section.html
@@ -0,0 +1,123 @@
+<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="../../src/resources/ha-style.html">
+
+<dom-module id="ha-config-section">
+  <template>
+    <style include="iron-flex ha-style">
+      .content {
+        padding: 28px 20px 0;
+        max-width: 1040px;
+        margin: 0 auto;
+      }
+
+      .header {
+        @apply(--paper-font-display1);
+        opacity: var(--dark-primary-opacity);
+      }
+
+      .together {
+        margin-top: 32px;
+      }
+
+      .intro {
+        @apply(--paper-font-subhead);
+        width: 100%;
+        max-width: 400px;
+        margin-right: 40px;
+        opacity: var(--dark-primary-opacity);
+      }
+
+      .panel {
+        margin-top: -24px;
+      }
+
+      .panel ::slotted(paper-card) {
+        margin-top: 24px;
+        display: block;
+      }
+
+      .narrow.content {
+        max-width: 640px;
+      }
+      .narrow .together {
+        margin-top: 20px;
+      }
+      .narrow .header {
+        @apply(--paper-font-headline);
+      }
+      .narrow .intro {
+        font-size: 14px;
+        padding-bottom: 20px;
+        margin-right: 0;
+        max-width: 500px;
+      }
+    </style>
+    <iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
+    </iron-media-query>
+    <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
+    </iron-media-query>
+
+    <div class$='[[computeContentClasses(isWide)]]'>
+      <div class='header'><slot name="header"></slot></div>
+      <div class$='[[computeClasses(isWide)]]'>
+        <div class='intro'>
+          <slot name="introduction"></slot>
+        </div>
+        <div class='flex panel'>
+          <slot>
+        </div>
+      </div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-config-section',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    wide: {
+      type: Boolean,
+    },
+
+    wideSidebar: {
+      type: Boolean,
+    },
+
+    isWide: {
+      type: Boolean,
+      computed: 'computeIsWide(showMenu, wideSidebar, wide)'
+    }
+  },
+
+  computeIsWide: function (showMenu, wideSidebar, wide) {
+    return showMenu ? wideSidebar : wide;
+  },
+
+  computeContentClasses: function (isWide) {
+    var classes = 'content ';
+
+    return isWide ? classes : classes + 'narrow';
+  },
+
+  computeClasses: function (isWide) {
+    var classes = 'together layout ';
+
+    return classes + (isWide ? 'horizontal' : 'vertical narrow');
+  },
+});
+</script>
diff --git a/panels/config/ha-panel-config.html b/panels/config/ha-panel-config.html
new file mode 100644
index 0000000000..24b8509fc0
--- /dev/null
+++ b/panels/config/ha-panel-config.html
@@ -0,0 +1,52 @@
+<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="../../src/components/ha-menu-button.html">
+
+<link rel="import" href="./ha-config-section-hassbian.html">
+
+<dom-module id="ha-panel-config">
+  <template>
+    <style include="iron-flex ha-style">
+      app-header-layout {
+        background-color: #fafafa;
+      }
+    </style>
+    <app-header-layout has-scrolling-region>
+      <app-header fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>Configuration</div>
+        </app-toolbar>
+      </app-header>
+
+      <ha-config-section-hassbian
+        narrow='[[narrow]]'
+        show-menu='[[showMenu]]'
+        hass='[[hass]]'
+      ></ha-config-section-hassbian>
+    </app-header-layout>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-panel-config',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+  },
+});
+</script>