Polymer .9: More info dialog with default content

homeassistant/components/frontend/www_static/polymer/bower.json

@@ -21,6 +21,7 @@
     "iron-image": "PolymerElements/iron-image#^0.9",
     "paper-toast": "PolymerElements/paper-toast#^0.9",
     "paper-dialog": "PolymerElements/paper-dialog#^0.9",
+    "paper-dialog-scrollable": "polymerelements/paper-dialog-scrollable#^0.9",
     "paper-spinner": "PolymerElements/paper-spinner#^0.9",
     "paper-button": "PolymerElements/paper-button#^0.9",
     "paper-input": "PolymerElements/paper-input#^0.9",

homeassistant/components/frontend/www_static/polymer/cards/state-card-toggle.html

@@ -3,7 +3,12 @@
 
 <link rel="import" href="../components/state-info.html">
 
-<dom-module is="state-card-toggle">
+<dom-module id="state-card-toggle">
+  <style>
+    paper-toggle-button {
+      margin-left: 16px;
+    }
+  </style>
   <template>
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]"></state-info>

homeassistant/components/frontend/www_static/polymer/dialogs/more-info-dialog.html

@@ -1,53 +1,76 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
-<link rel="import" href="ha-dialog.html">
+<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
+
+<!-- <link rel="import" href="ha-dialog.html"> -->
+
 <link rel="import" href="../cards/state-card-content.html">
-<link rel="import" href="../components/state-timeline.html">
+<link rel="import" href="../components/state-history-charts.html">
 <link rel="import" href="../more-infos/more-info-content.html">
 
-<polymer-element name="more-info-dialog">
+<dom-module id="more-info-dialog">
+  <style>
+    state-card-content {
+      margin-bottom: 24px;
+    }
+  </style>
   <template>
-  <ha-dialog id="dialog" on-core-overlay-open="{{dialogOpenChanged}}">
+    <paper-dialog id="dialog" on-core-overlay-open="dialogOpenChanged" with-backdrop>
       <div>
-      <state-card-content stateObj="{{stateObj}}" style='margin-bottom: 24px;'>
+        <state-card-content state-obj="[[stateObj]]"></state-card-content>
-      </state-card-content>
+        <template is='dom-if' if="[[hasHistoryComponent]]">
-      <template if="{{hasHistoryComponent}}">
+          <state-history-charts stateHistory="[[stateHistory]]"
-        <state-timeline stateHistory="{{stateHistory}}" isLoadingData="{{isLoadingHistoryData}}"></state-timeline>
+            isLoadingData="[[isLoadingHistoryData]]"></state-history-charts>
         </template>
-      <more-info-content
+        <paper-dialog-scrollable>
-        stateObj="{{stateObj}}"
+          <more-info-content state-obj="[[stateObj]]"
-        dialogOpen="{{dialogOpen}}"></more-info-content>
+            dialog-open="[[dialogOpen]]"></more-info-content>
+        </paper-dialog-scrollable>
       </div>
-  </ha-dialog>
+    </paper-dialog>
   </template>
+</dom-module>
+
 <script>
-var storeListenerMixIn = window.hass.storeListenerMixIn;
+(function() {
   var stateStore = window.hass.stateStore;
   var stateHistoryStore = window.hass.stateHistoryStore;
   var stateHistoryActions = window.hass.stateHistoryActions;
 
-Polymer(Polymer.mixin({
+  Polymer({
-  entityId: false,
+    is: 'more-info-dialog',
-  stateObj: null,
-  stateHistory: null,
-  hasHistoryComponent: false,
-  dialogOpen: false,
-  isLoadingHistoryData: false,
 
-  observe: {
+    behaviors: [StoreListenerBehavior],
-    'stateObj.attributes': 'reposition'
+
+    properties: {
+      entityId: {
+        type: String,
       },
 
-  created: function() {
+      stateObj: {
-    this.dialogOpenChanged = this.dialogOpenChanged.bind(this);
+        type: Object,
+        observer: 'reposition',
       },
 
-  attached: function() {
+      stateHistory: {
-    this.listenToStores(true);
+        type: Object,
       },
 
-  detached: function() {
+      isLoadingHistoryData: {
-    this.stopListeningToStores();
+        type: Boolean,
+        value: false,
+      },
+
+      hasHistoryComponent: {
+        type: Boolean,
+        value: false,
+      },
+
+      dialogOpen: {
+        type: Boolean,
+        value: false,
+      },
     },
 
     componentStoreChanged: function(componentStore) {
@@ -70,7 +93,9 @@ Polymer(Polymer.mixin({
       } else {
         newHistory = null;
       }
+
       this.isLoadingHistoryData = false;
+
       if (newHistory !== this.stateHistory) {
         this.stateHistory = newHistory;
       }
@@ -78,6 +103,7 @@ Polymer(Polymer.mixin({
 
     dialogOpenChanged: function(ev) {
       // we get CustomEvent, undefined and true/false from polymer…
+      console.log('debug', ev);
       if (typeof ev === 'object') {
         this.dialogOpen = ev.detail;
       }
@@ -99,10 +125,10 @@ Polymer(Polymer.mixin({
      * Whenever the attributes change, the more info component can
      * hide or show elements. We will reposition the dialog.
      */
-  reposition: function(oldVal, newVal) {
+    reposition: function(newVal, oldVal) {
       // Only resize if already open
-    if(this.$.dialog.opened) {
+      if(this.dialogOpen) {
-      this.job('resizeAfterLayoutChange', function() {
+        this.debounce('resizeAfterLayoutChange', function() {
           this.$.dialog.resizeHandler();
         }.bind(this), 1000);
       }
@@ -111,10 +137,10 @@ Polymer(Polymer.mixin({
     show: function(entityId) {
       this.changeEntityId(entityId);
 
-    this.job('showDialogAfterRender', function() {
+      this.debounce('showDialogAfterRender', function() {
         this.$.dialog.toggle();
       }.bind(this));
     },
-}, storeListenerMixIn));
+  });
+})();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html

@@ -16,11 +16,12 @@
 <link rel="import" href="../layouts/partial-dev-fire-event.html">
 <link rel="import" href="../layouts/partial-dev-set-state.html">
 
-<link rel="import" href="../components/ha-notifications.html">
+<link rel="import" href="../managers/notification-manager.html">
-<!--<link rel="import" href="../components/ha-modals.html"> -->
+<link rel="import" href="../managers/modal-manager.html">
+
 <link rel="import" href="../components/stream-status.html">
 
-<dom-module is="home-assistant-main">
+<dom-module id="home-assistant-main">
   <style>
     .sidenav {
       background: #fafafa;
@@ -54,10 +55,9 @@
     }
   </style>
 
-
   <template>
-    <ha-notifications></ha-notifications>
+    <notification-manager></notification-manager>
-    <!-- <ha-modals></ha-modals> -->
+    <modal-manager></modal-manager>
 
     <paper-drawer-panel id="drawer" narrow='{{narrow}}'>
       <paper-header-panel mode="scroll" drawer class='sidenav fit'>

homeassistant/components/frontend/www_static/polymer/managers/modal-manager.html

@@ -2,24 +2,29 @@
 
 <link rel="import" href="../dialogs/more-info-dialog.html">
 
-<polymer-element name="ha-modals">
+<dom-module id="modal-manager">
   <template>
     <more-info-dialog id="moreInfoDialog"></more-info-dialog>
   </template>
+</dom-module>
+
 <script>
-  var uiActions = window.hass.uiActions,
+(function() {
+  var uiConstants = window.hass.uiConstants,
       dispatcher = window.hass.dispatcher;
 
   Polymer({
+    is: 'modal-manager',
+
     ready: function() {
       dispatcher.register(function(payload) {
         switch (payload.actionType) {
-          case uiActions.ACTION_SHOW_DIALOG_MORE_INFO:
+          case uiConstants.ACTION_SHOW_DIALOG_MORE_INFO:
             this.$.moreInfoDialog.show(payload.entityId);
             break;
         }
       }.bind(this));
     },
   });
+})();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/managers/notification-manager.html

@@ -2,7 +2,7 @@
 
 <link rel="import" href="../bower_components/paper-toast/paper-toast.html">
 
-<dom-module id="ha-notifications">
+<dom-module id="notification-manager">
   <style>
     paper-toast {
       z-index: 1;
@@ -16,7 +16,7 @@
 <script>
 (function() {
   Polymer({
-    is: 'ha-notifications',
+    is: 'notification-manager',
 
     behaviors: [StoreListenerBehavior],
 

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html

@@ -1,24 +1,44 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <link rel="import" href="more-info-default.html">
-<link rel="import" href="more-info-light.html">
+<!-- <link rel="import" href="more-info-light.html">
 <link rel="import" href="more-info-group.html">
 <link rel="import" href="more-info-sun.html">
 <link rel="import" href="more-info-configurator.html">
 <link rel="import" href="more-info-thermostat.html">
-<link rel="import" href="more-info-script.html">
+<link rel="import" href="more-info-script.html"> -->
 
-<polymer-element name="more-info-content" attributes="stateObj dialogOpen">
+<dom-module id="more-info-content">
-<template>
   <style>
     :host {
       display: block;
     }
   </style>
-  <div id='moreInfoContainer' class='{{classNames}}'></div>
+</dom-module>
-</template>
+
 <script>
+(function() {
+  var uiUtil = window.hass.uiUtil;
+
   Polymer({
+    is: 'more-info-content',
+
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'stateObjChanged',
+      },
+
+      dialogOpen: {
+        type: Boolean,
+        value: false,
+      },
+
+      classNames: {
+        type: String,
+        value: '',
+      }
+    },
     classNames: '',
     dialogOpen: false,
 
@@ -26,7 +46,7 @@ Polymer({
       'stateObj.attributes': 'stateAttributesChanged',
     },
 
-  dialogOpenChanged: function(oldVal, newVal) {
+    dialogOpenChanged: function(newVal, oldVal) {
       var moreInfoContainer = this.$.moreInfoContainer;
 
       if (moreInfoContainer.lastChild) {
@@ -34,40 +54,39 @@ Polymer({
       }
     },
 
-  stateObjChanged: function(oldVal, newVal) {
+    stateObjChanged: function(newVal, oldVal) {
-    var moreInfoContainer = this.$.moreInfoContainer;
+      var root = Polymer.dom(this);
 
       if (!newVal) {
-      if (moreInfoContainer.lastChild) {
+        if (root.lastChild) {
-        moreInfoContainer.removeChild(moreInfoContainer.lastChild);
+          root.removeChild(root.lastChild);
         }
         return;
       }
 
-    if (!oldVal || oldVal.moreInfoType != newVal.moreInfoType) {
+      var newMoreInfoType = uiUtil.stateMoreInfoType(newVal);
-      if (moreInfoContainer.lastChild) {
+      newMoreInfoType = 'default';
-        moreInfoContainer.removeChild(moreInfoContainer.lastChild);
+
+      if (!oldVal || uiUtil.stateMoreInfoType(oldVal) != newMoreInfoType) {
+        if (root.lastChild) {
+          root.removeChild(root.lastChild);
         }
 
-      var moreInfo = document.createElement("more-info-" + newVal.moreInfoType);
+        var moreInfo = document.createElement("more-info-" + newMoreInfoType);
         moreInfo.stateObj = newVal;
         moreInfo.dialogOpen = this.dialogOpen;
-      moreInfoContainer.appendChild(moreInfo);
+        root.appendChild(moreInfo);
 
       } else {
 
-      moreInfoContainer.lastChild.dialogOpen = this.dialogOpen;
+        root.lastChild.dialogOpen = this.dialogOpen;
-      moreInfoContainer.lastChild.stateObj = newVal;
+        root.lastChild.stateObj = newVal;
 
       }
-  },
 
-  stateAttributesChanged: function(oldVal, newVal) {
+      this.classNames = Object.keys(newVal.attributes).map(
-    if (!newVal) return;
-
-    this.classNames = Object.keys(newVal).map(
         function(key) { return "has-" + key; }).join(' ');
     },
   });
+})();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html

@@ -1,34 +1,42 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/core-style/core-style.html">
 
-<polymer-element name="more-info-default" attributes="stateObj">
+<dom-module id="more-info-default">
-<template>
-  <core-style ref='ha-key-value-table'></core-style>
   <style>
     .data-entry .value {
       max-width: 200px;
     }
   </style>
-
+  <!-- <core-style ref='ha-key-value-table'></core-style> -->
-  <div layout vertical>
+  <template>
-
+    <div class='layout vertical'>
-    <template repeat="{{key in stateObj.attributes | getKeys}}">
+      <template is='dom-repeat' items="[[getAttributes(stateObj)]]" as="attribute">
-      <div layout justified horizontal class='data-entry'>
+        <div class='data-entry layout justified horizontal'>
-        <div class='key'>
+          <div class='key'>[[attribute]]</div>
-          {{key}}
+          <div class='value'>[[getAttributeValue(stateObj, attribute)]]</div>
-        </div>
-        <div class='value'>
-          {{stateObj.attributes[key]}}
-        </div>
         </div>
       </template>
     </div>
   </template>
+</dom-module>
+
 <script>
+(function() {
   Polymer({
-    getKeys: function(obj) {
+    is: 'more-info-default',
-      return Object.keys(obj || {});
+
-    }
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+
+    getAttributes: function(stateObj) {
+      return stateObj ? Object.keys(stateObj.attributes) : [];
+    },
+
+    getAttributeValue: function(stateObj, attribute) {
+      return stateObj.attributes[attribute];
+    },
   });
+})();
 </script>
-</polymer-element>