Add customization config panel

panels/config/core/ha-config-section-themes.html

@@ -11,7 +11,7 @@
     <ha-config-section is-wide='[[isWide]]'>
       <span slot='header'>Set a theme</span>
       <span slot='introduction'>
-        Choose 'default' to use whatever theme the backend chooses or pick a theme for this device.
+        Choose 'Backend-selected' to use whatever theme the backend chooses or pick a theme for this device.
       </span>
 
       <paper-card>

panels/config/customize/ha-config-customize.html

@@ -0,0 +1,89 @@
+<link rel="import" href="../../../bower_components/polymer/polymer-element.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/util/hass-util.html">
+<link rel="import" href="../../../src/resources/ha-style.html">
+
+<link rel="import" href="./ha-form-customize.html">
+<link rel="import" href="../ha-config-section.html">
+<link rel="import" href="../ha-entity-config.html">
+
+<dom-module id="ha-config-customize">
+  <template>
+    <style include="ha-style">
+    </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>Customization</div>
+        </app-toolbar>
+      </app-header>
+
+      <div class$='[[computeClasses(isWide)]]'>
+        <ha-config-section is-wide='[[isWide]]'>
+          <span slot='header'>Customization</span>
+          <span slot='introduction'>
+            Tweak per-entity attributes.<br>
+            Added/edited customizations will take effect immidiately. Removed customizations will take effect when the entity is updated.
+          </span>
+          <ha-entity-config
+            hass='[[hass]]'
+            label='Entity'
+            entities='[[entities]]'
+            config='[[entityConfig]]'>
+          </ha-entity-config>
+        </ha-config-section>
+      </div>
+    </app-header-layout>
+  </template>
+</dom-module>
+
+<script>
+class HaConfigCustomize extends Polymer.Element {
+  static get is() { return 'ha-config-customize'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      isWide: Boolean,
+
+      entities: {
+        type: Array,
+        computed: 'computeEntities(hass)',
+      },
+
+      entityConfig: {
+        type: Object,
+        value: {
+          component: 'ha-form-customize',
+          computeSelectCaption: stateObj =>
+            window.hassUtil.computeStateName(stateObj) + ' (' + window.hassUtil.computeDomain(stateObj) + ')'
+        }
+      },
+    };
+  }
+
+  computeClasses(isWide) {
+    return isWide ? 'content' : 'content narrow';
+  }
+
+  _backTapped() {
+    history.back();
+  }
+
+  computeEntities(hass) {
+    return Object.keys(hass.states)
+      .map(key => hass.states[key])
+      .sort(window.hassUtil.sortByName);
+  }
+}
+customElements.define(HaConfigCustomize.is, HaConfigCustomize);
+</script>

panels/config/customize/ha-customize-attribute.html

@@ -0,0 +1,82 @@
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel='import' href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../ha-form-style.html">
+<script src="../../../src/util/hass-attributes-util.js"></script>
+<link rel="import" href="./types/ha-customize-array.html">
+<link rel="import" href="./types/ha-customize-boolean.html">
+<link rel="import" href="./types/ha-customize-icon.html">
+<link rel="import" href="./types/ha-customize-key-value.html">
+<link rel="import" href="./types/ha-customize-string.html">
+
+<dom-module id="ha-customize-attribute">
+  <template>
+    <style include="ha-form-style">
+      :host {
+        display: block;
+        position: relative;
+        padding-right: 40px;
+      }
+
+      .button {
+        position: absolute;
+        margin-top: -20px;
+        top: 50%;
+        right: 0;
+      }
+    </style>
+    <div id='wrapper' class='form-group'></div>
+    <paper-icon-button class="button" icon="[[getIcon(item.secondary)]]" on-tap="tapButton"></paper-icon-button>
+  </template>
+</dom-module>
+
+<script>
+class HaCustomizeAttribute extends Polymer.Element {
+
+  static get is() { return 'ha-customize-attribute'; }
+
+  static get properties() {
+    return {
+      item: {
+        type: Object,
+        notify: true,
+        observer: 'itemObserver',
+      }
+    };
+  }
+
+  tapButton() {
+    if (this.item.secondary) {
+      this.item = Object.assign({}, this.item, { secondary: false });
+    } else {
+      this.item = Object.assign({}, this.item, { closed: true });
+    }
+  }
+
+  getIcon(secondary) {
+    return secondary ? 'mdi:pencil' : 'mdi:close';
+  }
+
+  itemObserver(item) {
+    const wrapper = this.$.wrapper;
+    const tag = window.hassAttributeUtil.TYPE_TO_TAG[item.type].toUpperCase();
+    let child;
+    if (wrapper.lastChild && wrapper.lastChild.tagName === tag) {
+      child = wrapper.lastChild;
+    } else {
+      if (wrapper.lastChild) {
+        wrapper.removeChild(wrapper.lastChild);
+      }
+      this.$.child = child = document.createElement(tag);
+      child.className = 'form-control';
+      child.addEventListener('item-changed', () => {
+        this.item = Object.assign({}, child.item);
+      });
+    }
+    child.setProperties({ item: this.item });
+    if (child.parentNode === null) {
+      wrapper.appendChild(child);
+    }
+  }
+}
+customElements.define(HaCustomizeAttribute.is, HaCustomizeAttribute);
+</script>

panels/config/customize/ha-form-customize-attributes.html

@@ -0,0 +1,36 @@
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+
+<link rel="import" href="./ha-customize-attribute.html">
+
+<dom-module id="ha-form-customize-attributes">
+  <template>
+    <style>
+      [hidden] {
+        display: none;
+      }
+    </style>
+    <template is='dom-repeat' items='{{attributes}}'>
+      <ha-customize-attribute
+        item="{{item}}"
+        hidden$="[[item.closed]]">
+      </ha-customize-attribute>
+    </template>
+  </template>
+</dom-module>
+
+<script>
+class HaFormCustomizeAttributes extends Polymer.Element {
+
+  static get is() { return 'ha-form-customize-attributes'; }
+
+  static get properties() {
+    return {
+      attributes: {
+        type: Array,
+        notify: true,
+      },
+    };
+  }
+}
+customElements.define(HaFormCustomizeAttributes.is, HaFormCustomizeAttributes);
+</script>