Frontend cleanup and bug fixes

homeassistant/components/frontend/version.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "a44970ec771fb08baa6b54ff00a4e223"
+VERSION = "9e4807d493dcb52e24dcd5163e6a2d4b"

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

@@ -37,8 +37,8 @@
     "layout": "Polymer/layout",
     "color-picker-element": "~0.0.3",
     "paper-styles": "polymerelements/paper-styles#^1.0.0",
-    "paper-date-picker": "vsimonian/paper-date-picker#master",
+    "lodash": "~3.9.3",
-    "lodash": "~3.9.3"
+    "pikaday": "~1.3.2"
   },
   "resolutions": {
     "polymer": "^1.0.0",

homeassistant/components/frontend/www_static/polymer/components/ha-logbook.html

@@ -10,13 +10,11 @@
     }
   </style>
   <template>
-    <template is='dom-if' if='[[!entries]]'>
+    <template is='dom-if' if='[[noEntries(entries)]]'>
       No logbook entries found.
     </template>
-    <template is='dom-if' if='[[entries]]'>
+    <template is='dom-repeat' items="[[entries]]">
-      <template is='dom-repeat' items="[[entries]]">
+      <logbook-entry entry-obj="[[item]]"></logbook-entry>
-        <logbook-entry entry-obj="[[item]]"></logbook-entry>
-      </template>
     </template>
   </template>
 </dom-module>
@@ -32,6 +30,10 @@
         value: [],
       },
     },
+
+    noEntries: function(entries) {
+      return !entries.length;
+    }
   });
 })();
 </script>

homeassistant/components/frontend/www_static/polymer/components/ha-sidebar.html

@@ -9,16 +9,6 @@
 <link rel='import' href='../bower_components/paper-item/paper-icon-item.html'>
 <link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
 
-<link rel='import' href='../layouts/partial-states.html'>
-<link rel='import' href='../layouts/partial-logbook.html'>
-<link rel='import' href='../layouts/partial-history.html'>
-<link rel='import' href='../layouts/partial-dev-call-service.html'>
-<link rel='import' href='../layouts/partial-dev-fire-event.html'>
-<link rel='import' href='../layouts/partial-dev-set-state.html'>
-
-<link rel='import' href='../managers/notification-manager.html'>
-<link rel='import' href='../managers/modal-manager.html'>
-
 <link rel='import' href='../components/stream-status.html'>
 
 <dom-module id='ha-sidebar'>
@@ -64,9 +54,9 @@
         <div class="title">Home Assistant</div>
       </paper-toolbar>
 
-      <paper-menu id='menu'
+      <paper-menu id='menu' on-iron-select='menuSelect'
         selectable='[data-panel]' attr-for-selected='data-panel'
-        on-iron-select='menuSelect' selected='[[selected]]'>
+        selected='[[selected]]'>
         <paper-icon-item data-panel='states'>
           <iron-icon item-icon icon='apps'></iron-icon> States
         </paper-icon-item>
@@ -123,7 +113,6 @@
 <script>
 (function() {
   var configGetters = window.hass.configGetters;
-  var entityGetters = window.hass.entityGetters;
   var navigationGetters = window.hass.navigationGetters;
 
   var authActions = window.hass.authActions;
@@ -140,13 +129,7 @@
     properties: {
       selected: {
         type: String,
-        bindNuclear: [
+        bindNuclear: navigationGetters.activePage,
-          navigationGetters.activePane,
-          navigationGetters.activeFilter,
-          function(pane, filter) {
-            return filter ? pane + '/' + filter : pane;
-          },
-        ],
       },
 
       possibleFilters: {
@@ -170,7 +153,7 @@
     },
 
     menuSelect: function(ev, detail, sender) {
-      this.selectPanel(this.$.menu.selected);
+      this.selectPanel(ev.target.selected);
     },
 
     handleDevClick: function(ev, detail, sender) {
@@ -180,15 +163,13 @@
     },
 
     selectPanel: function(newChoice) {
-      if (newChoice == 'logout') {
+      if(newChoice === this.selected) {
+        return;
+      } else if (newChoice == 'logout') {
         this.handleLogOut();
         return;
-      } else if(newChoice == this.selected) {
-        return;
       }
-
+      navigationActions.navigate.apply(null, newChoice.split('/'));
-      navigationActions.navigate.apply(
-        null, newChoice.split('/'));
     },
 
     handleLogOut: function() {

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

@@ -31,7 +31,7 @@
   </style>
   <template>
     <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
-    <paper-dialog id="dialog" with-backdrop>
+    <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
       <h2><state-card-content state-obj="[[stateObj]]"></state-card-content></h2>
       <div>
         <template is='dom-if' if="[[hasHistoryComponent]]">
@@ -66,7 +66,7 @@
       stateObj: {
         type: Object,
         bindNuclear: moreInfoGetters.currentEntity,
-        observer: 'fetchHistoryData',
+        observer: 'stateObjChanged',
       },
 
       stateHistory: {
@@ -99,34 +99,34 @@
       dialogOpen: {
         type: Boolean,
         value: false,
+        observer: 'dialogOpenChanged',
       },
     },
 
-    listeners: {
+    fetchHistoryData: function() {
-      'iron-overlay-opened': 'onIronOverlayOpened',
-      'iron-overlay-closed': 'onIronOverlayClosed'
-    },
-
-    fetchHistoryData: function(newVal) {
       if (this.stateObj && this.hasHistoryComponent &&
           this.shouldFetchHistory) {
         entityHistoryActions.fetchRecent(this.stateObj.entityId);
       }
     },
 
-    onIronOverlayOpened: function() {
+    stateObjChanged: function(newVal) {
-      this.dialogOpen = true;
+      if (!newVal) {
+        this.dialogOpen = false;
+        return;
+      }
+
+      this.fetchHistoryData();
+
+      window.requestAnimationFrame(function() {
+        this.dialogOpen = true;
+      }.bind(this));
     },
 
-    onIronOverlayClosed: function() {
+    dialogOpenChanged: function(newVal) {
-      this.dialogOpen = false;
+      if (!newVal) {
-      moreInfoActions.deselectEntity();
+        moreInfoActions.deselectEntity();
-    },
+      }
-
-    show: function() {
-      this.debounce('showDialogAfterRender', function() {
-        this.$.dialog.open();
-      }.bind(this), 1);
     },
   });
 })();

homeassistant/components/frontend/www_static/polymer/home-assistant-js

@@ -1 +1 @@
-Subproject commit 8242a36234b4fc55c8baec79f8ca72a86ca22751
+Subproject commit f8fb1d0440ac0d7aebbed3b43dd100462487c228

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

@@ -11,14 +11,14 @@
 <link rel='import' href='../layouts/partial-dev-set-state.html'>
 
 <link rel='import' href='../managers/notification-manager.html'>
-<link rel='import' href='../managers/modal-manager.html'>
+<link rel="import" href="../dialogs/more-info-dialog.html">
 
 <link rel='import' href='../components/ha-sidebar.html'>
 
 <dom-module id='home-assistant-main'>
   <template>
     <notification-manager></notification-manager>
-    <modal-manager></modal-manager>
+    <more-info-dialog></more-info-dialog>
 
     <paper-drawer-panel id='drawer' narrow='{{narrow}}'>
       <ha-sidebar drawer></ha-sidebar>

homeassistant/components/frontend/www_static/polymer/layouts/partial-history.html

@@ -6,6 +6,8 @@
 
 <link rel="import" href="../components/state-history-charts.html">
 
+<link rel="import" href="../resources/pikaday-js.html">
+
 <dom-module id="partial-history">
   <style>
     .content {
@@ -32,7 +34,7 @@
         on-click="handleRefreshClick"></paper-icon-button>
 
       <div class$="[[computeContentClasses(narrow)]]">
-        <paper-input label='Showing entries for' on-click='handleShowDatePicker'
+        <paper-input label='Showing entries for' id='datePicker'
           value='[[selectedDate]]'></paper-input>
 
         <state-history-charts state-history="[[stateHistory]]"
@@ -90,10 +92,20 @@
       entityHistoryActions.fetchSelectedDate();
     },
 
-    handleShowDatePicker: function() {
+    datepickerFocus: function() {
-      uiActions.showDatePicker(
+      this.datePicker.adjustPosition();
-        entityHistoryActions.changeCurrentDate,
+      this.datePicker.gotoDate(moment('2015-06-30').toDate());
-        this.selectedDate);
+    },
+
+    attached: function() {
+      this.datePicker = new Pikaday({
+        field: this.$.datePicker.inputElement,
+        onSelect: entityHistoryActions.changeCurrentDate,
+      });
+    },
+
+    detached: function() {
+      this.datePicker.destroy();
     },
 
     computeContentClasses: function(narrow) {

homeassistant/components/frontend/www_static/polymer/layouts/partial-logbook.html

@@ -8,6 +8,8 @@
 <link rel="import" href="../components/ha-logbook.html">
 <link rel="import" href="../components/loading-box.html">
 
+<link rel="import" href="../resources/pikaday-js.html">
+
 <dom-module id="partial-logbook">
   <style>
   .selected-date-container {
@@ -27,8 +29,8 @@
 
       <div>
         <div class='selected-date-container'>
-          <paper-input label='Showing entries for' on-click='handleShowDatePicker'
+          <paper-input label='Showing entries for' id='datePicker'
-            value='[[selectedDate]]'></paper-input>
+            value='[[selectedDate]]' on-focus='datepickerFocus'></paper-input>
 
           <loading-box hidden$='[[!isLoading]]'>Loading logbook entries</loading-box>
         </div>
@@ -79,6 +81,10 @@
           function(entries) { return entries.toArray(); },
         ],
       },
+
+      datePicker: {
+        type: Object,
+      },
     },
 
     isStaleChanged: function(newVal) {
@@ -90,15 +96,25 @@
       }
     },
 
-    handleShowDatePicker: function() {
-      uiActions.showDatePicker(
-        logbookActions.changeCurrentDate,
-        this.selectedDate);
-    },
-
     handleRefresh: function() {
       logbookActions.fetchDate(this.selectedDate);
     },
+
+    datepickerFocus: function() {
+      this.datePicker.adjustPosition();
+      this.datePicker.gotoDate(moment('2015-06-30').toDate());
+    },
+
+    attached: function() {
+      this.datePicker = new Pikaday({
+        field: this.$.datePicker.inputElement,
+        onSelect: logbookActions.changeCurrentDate,
+      });
+    },
+
+    detached: function() {
+      this.datePicker.destroy();
+    },
   });
 })();
 </script>

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

@@ -1,56 +0,0 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../bower_components/paper-date-picker/paper-date-picker-dialog.html">
-
-<link rel="import" href="../dialogs/more-info-dialog.html">
-
-<dom-module id="modal-manager">
-  <template>
-    <more-info-dialog id="moreInfoDialog"></more-info-dialog>
-    <paper-date-picker-dialog id="datePicker"
-      on-value-changed='datePickerValueChanged'></paper-date-picker-dialog>
-  </template>
-</dom-module>
-
-<script>
-(function() {
-  var moreInfoGetters = window.hass.moreInfoGetters;
-  var uiActions = window.hass.uiActions;
-
-  Polymer({
-    is: 'modal-manager',
-
-    behaviors: [nuclearObserver],
-
-    properties: {
-      moreInfoEntityId: {
-        type: String,
-        observer: 'moreInfoEntityIdChanged',
-        bindNuclear: moreInfoGetters.currentEntityId,
-      },
-      datePickerCallback: {
-        type: Function,
-        value: null,
-      },
-    },
-
-    moreInfoEntityIdChanged: function(newVal) {
-      if (newVal) {
-        this.$.moreInfoDialog.show(newVal);
-      }
-    },
-
-    ready: function() {
-      uiActions.showDatePicker = function(dateSelectedCallback, startDate) {
-        this.datePickerCallback = dateSelectedCallback;
-        this.$.date = startDate;
-        this.$.datePicker.toggle();
-      }.bind(this);
-    },
-
-    datePickerValueChanged: function(ev) {
-      this.datePickerCallback(ev.target.value);
-    },
-  });
-})();
-</script>

homeassistant/components/frontend/www_static/polymer/resources/moment-js.html

@@ -2,7 +2,7 @@
   Wrapping JS in an HTML file will prevent it from being loaded twice.
 -->
 
-<script src="../bower_components/moment/moment.js"></script>
+<script src="../bower_components/moment/min/moment.min.js"></script>
 
 <script>
 window.hass.uiUtil.formatTime = function(dateObj) {

homeassistant/components/frontend/www_static/polymer/resources/pikaday-js.html

@@ -0,0 +1,2 @@
+<script src="../bower_components/pikaday/pikaday.js"></script>
+<link href="../bower_components/pikaday/css/pikaday.css" media="all" rel="stylesheet" />