Polymer .9: convert logbook

homeassistant/components/frontend/www_static/polymer/components/display-time.html

@@ -1,26 +1,25 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
-<link rel="import" href="../resources/moment-js.html">
+<dom-module is="display-time">
+  <template>[[computeTime(dateObj)]]</template>
+</dom-module>
 
-<polymer-element name="display-time" attributes="dateObj">
-  <template>
-    {{ time }}
-  </template>
 <script>
 (function() {
   var uiUtil = window.hass.uiUtil;
 
   Polymer({
-      time: "",
+    is: 'display-time',
 
-      dateObjChanged: function(oldVal, newVal) {
+    properties: {
-        if (newVal) {
+      dateObj: {
-          this.time = uiUtil.formatTime(newVal);
+        type: Object,
-        } else {
+      },
-          this.time = "";
+    },
-        }
+
+    computeTime: function(dateObj) {
+      return dateObj ? uiUtil.formatTime(dateObj) : '';
     },
   });
 })();
 </script>
-</polymer-element>

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

@@ -2,16 +2,31 @@
 
 <link rel="import" href="../components/logbook-entry.html">
 
-<polymer-element name="ha-logbook" attributes="entries" noscript>
+<dom-module is="ha-logbook">
-<template>
   <style>
-    .logbook {
+    :host {
+      display: block;
+      padding: 16px;
     }
   </style>
-  <div class='logbook'>
+  <template>
-    <template repeat="{{entries as entry}}">
+    <template is='dom-repeat' items="[[entries]]">
-      <logbook-entry entryObj="{{entry}}"></logbook-entry>
+      <logbook-entry entry-obj="[[item]]"></logbook-entry>
     </template>
-  </div>
   </template>
-</polymer>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'ha-logbook',
+
+    properties: {
+      entries: {
+        type: Object,
+        value: [],
+      },
+    },
+  });
+})();
+</script>

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

@@ -1,25 +1,25 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/core-style/core-style.html">
 
 <link rel="import" href="domain-icon.html">
 <link rel="import" href="display-time.html">
 <link rel="import" href="relative-ha-datetime.html">
 
-<polymer-element name="logbook-entry" attributes="entryObj">
+<dom-module is="logbook-entry">
-<template>
-  <core-style ref='ha-main'></core-style>
   <style>
-    .logbook-entry {
+    :host {
+      display: block;
       line-height: 2em;
     }
 
-    .time {
+    display-time {
       width: 55px;
       font-size: .8em;
+      color: var(--secondary-text-color);
     }
 
-    .icon {
+    domain-icon {
       margin: 0 8px 0 16px;
+      color: var(--primary-text-color);
     }
 
     .name {
@@ -27,29 +27,37 @@
     }
 
     .message {
+      color: var(--primary-text-color);
+    }
 
+    a {
+      color: var(--accent-color);
     }
   </style>
+  <template>
+    <div class='horizontal layout'>
+      <display-time date-obj="[[entryObj.when]]"></display-time>
+      <domain-icon domain="[[entryObj.domain]]" class='icon'></domain-icon>
+      <div class='message' flex>
+        <template is='dom-if' if="[[!entryObj.entityId]]">
+          <span class='name'>[[entryObj.name]]</span>
+        </template>
+        <template is='dom-if' if="[[entryObj.entityId]]">
+          <a href='#' on-click="entityClicked" class='name'>[[entryObj.name]]</a>
+        </template>
+        <span>[[entryObj.message]]</span>
+      </div>
+    </div>
+  </template>
+</dom-module>
 
-  <div horizontal layout class='logbook-entry'>
-    <display-time dateObj="{{entryObj.when}}" class='time secondary-text-color'></display-time>
-    <domain-icon domain="{{entryObj.domain}}" class='icon primary-text-color'></domain-icon>
-    <div class='message primary-text-color' flex>
-      <template if="{{!entryObj.entityId}}">
-        <span class='name'>{{entryObj.name}}</span>
-      </template>
-      <template if="{{entryObj.entityId}}">
-        <a href='#' on-click="{{entityClicked}}" class='name'>{{entryObj.name}}</a>
-      </template>
-      {{entryObj.message}}
-    </div>
-  </div>
-</template>
 <script>
   (function() {
     var uiActions = window.hass.uiActions;
 
     Polymer({
+      is: 'logbook-entry',
+
       entityClicked: function(ev) {
         ev.preventDefault();
         uiActions.showMoreInfoDialog(this.entryObj.entityId);
@@ -58,4 +66,3 @@
 
   })();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/components/relative-ha-datetime.html

@@ -20,12 +20,12 @@
     properties: {
       datetime: {
         type: String,
-        observe: 'datetimeChanged',
+        observer: 'datetimeChanged',
       },
 
       datetimeObj: {
         type: Object,
-        observe: 'datetimeObjChanged',
+        observer: 'datetimeObjChanged',
       },
 
       parsedDateTime: {
@@ -47,27 +47,19 @@
 
     attached: function() {
       this._interval = setInterval(this.updateRelative, UPDATE_INTERVAL);
-
-      if (this.datetimeObj) {
-        this.parsedDateTime = this.datetimeObj;
-      } else if (this.datetime) {
-        this.parsedDateTime = parseDateTime(this.datetime);
-      }
-
-      this.updateRelative();
     },
 
     detached: function() {
       clearInterval(this._interval);
     },
 
-    datetimeChanged: function(oldVal, newVal) {
+    datetimeChanged: function(newVal) {
       this.parsedDateTime = newVal ? parseDateTime(newVal) : null;
 
       this.updateRelative();
     },
 
-    datetimeObjChanged: function(oldVal, newVal) {
+    datetimeObjChanged: function(newVal) {
       this.parsedDateTime = newVal;
 
       this.updateRelative();

homeassistant/components/frontend/www_static/polymer/components/state-badge.html

@@ -58,23 +58,21 @@ Polymer({
   properties: {
     stateObj: {
       type: Object,
-      observe: 'updateIconColor',
+      observer: 'updateIconColor',
     },
   },
 
   /**
    * Called when an attribute changes that influences the color of the icon.
    */
-  updateIconColor: function(oldVal, newVal) {
+  updateIconColor: function(newVal) {
-    var state = this.stateObj;
-
     // for domain light, set color of icon to light color if available
-    if(state.domain == "light" && state.state == "on" &&
+    if(newVal.domain == "light" && newVal.state == "on" &&
-       state.attributes.brightness && state.attributes.xy_color) {
+       newVal.attributes.brightness && newVal.attributes.xy_color) {
 
-      var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
+      var rgb = this.xyBriToRgb(newVal.attributes.xy_color[0],
-                                state.attributes.xy_color[1],
+                                newVal.attributes.xy_color[1],
-                                state.attributes.brightness);
+                                newVal.attributes.brightness);
       this.$.icon.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
     } else {
       this.$.icon.style.color = null;

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

@@ -45,7 +45,7 @@
         <state-card class="state-card" state-obj="[[item]]"></state-card>
       </template>
 
-      <template if="{{emptyStates}}">
+      <template if="[[computeEmptyStates(states)]]">
         <div class='no-states-content'>
           <content></content>
         </div>
@@ -65,15 +65,10 @@
         type: Array,
         value: [],
       },
-
-      emptyStates: {
-        type: Boolean,
-        computed: 'computeEmptyStates(states)',
-      },
     },
 
     computeEmptyStates: function(states) {
-      return states.length == 0;
+      return states.length === 0;
     },
   });
 })();

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

@@ -10,8 +10,8 @@
 <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-history.html">
 <link rel="import" href="../layouts/partial-logbook.html">
+<!-- <link rel="import" href="../layouts/partial-history.html">
 <link rel="import" href="../layouts/partial-dev-fire-event.html">
 <link rel="import" href="../layouts/partial-dev-call-service.html">
 <link rel="import" href="../layouts/partial-dev-set-state.html"> -->
@@ -28,6 +28,10 @@
       overflow: hidden;
     }
 
+    .sidenav paper-toolbar {
+      padding-left: 16px;
+    }
+
     .sidenav paper-menu {
       --paper-menu-color: #757575;
     }
@@ -132,13 +136,13 @@
           <div class='text label divider'>Developer Tools</div>
           <div class='dev-tools layout horizontal justified'>
             <paper-icon-button
-              icon="settings-remote" data-panel='call-service'
+              icon="settings-remote" data-panel='[[selectedDevService]]'
               on-click="handleDevClick"></paper-icon-button>
             <paper-icon-button
-              icon="settings-ethernet" data-panel='set-state'
+              icon="settings-ethernet" data-panel='[[selectedSetState]]'
               on-click="handleDevClick"></paper-icon-button>
             <paper-icon-button
-              icon="settings-input-antenna" data-panel='fire-event'
+              icon="settings-input-antenna" data-panel='[[selectedDevEvent]]'
               on-click="handleDevClick"></paper-icon-button>
           </div>
         </paper-menu>
@@ -148,26 +152,26 @@
           This is the main partial, never remove it from the DOM but hide it
           to speed up when people click on states.
       -->
-      <partial-states hidden?="{{hideStates}}"
+      <partial-states hidden$="{{hideStates}}"
         main narrow="{{narrow}}"
-        togglePanel="{{togglePanel}}"
         filter="{{stateFilter}}">
       </partial-states>
+
+      <template is='dom-if' if="{{isSelectedLogbook}}">
+        <partial-logbook main narrow="{{narrow}}"></partial-logbook>
+      </template>
       <!--
       <template is='dom-if' if="{{selected == 'history'}}">
-        <partial-history main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-history>
+        <partial-history main narrow="{{narrow}}"></partial-history>
-      </template>
-      <template is='dom-if' if="{{selected == 'logbook'}}">
-        <partial-logbook main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-logbook>
       </template>
       <template is='dom-if' if="{{selected == 'fire-event'}}">
-        <partial-dev-fire-event main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-dev-fire-event>
+        <partial-dev-fire-event main narrow="{{narrow}}"></partial-dev-fire-event>
       </template>
       <template is='dom-if' if="{{selected == 'set-state'}}">
-        <partial-dev-set-state main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-dev-set-state>
+        <partial-dev-set-state main narrow="{{narrow}}"></partial-dev-set-state>
       </template>
       <template is='dom-if' if="{{selected == 'call-service'}}">
-        <partial-dev-call-service main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-dev-call-service>
+        <partial-dev-call-service main narrow="{{narrow}}"></partial-dev-call-service>
       </template>-->
     </paper-drawer-panel>
 
@@ -231,16 +235,69 @@
         type: Boolean,
         value: false,
       },
+
+      selectedHistory: {
+        type: String,
+        value: 'history',
+        readOnly: true,
+      },
+
+      isSelectedHistory: {
+        type: Boolean,
+        computed: 'computeIsSelected(selected, selectedHistory)',
+      },
+
+      selectedLogbook: {
+        type: String,
+        value: 'logbook',
+        readOnly: true,
+      },
+
+      isSelectedLogbook: {
+        type: Boolean,
+        computed: 'computeIsSelected(selected, selectedLogbook)',
+      },
+
+      selectedDevEvent: {
+        type: String,
+        value: 'devEvent',
+        readOnly: true,
+      },
+
+      isSelectedDevEvent: {
+        type: Boolean,
+        computed: 'computeIsSelected(selected, selectedDevEvent)',
+      },
+
+      selectedDevState: {
+        type: String,
+        value: 'devState',
+        readOnly: true,
+      },
+
+      isSelectedDevState: {
+        type: Boolean,
+        computed: 'computeIsSelected(selected, selectedDevState)',
+      },
+
+      selectedDevService: {
+        type: String,
+        value: 'devService',
+        readOnly: true,
+      },
+
+      isSelectedDevService: {
+        type: Boolean,
+        computed: 'computeIsSelected(selected, selectedDevService)',
+      },
+
+
     },
 
     listeners: {
       'menu.core-select': 'menuSelect',
     },
 
-    attached: function() {
-      this.togglePanel = this.togglePanel.bind(this);
-    },
-
     stateStoreChanged: function(stateStore) {
       this.activeFilters = stateStore.domains.filter(function(domain) {
         return domain in uiConstants.STATE_FILTERS;
@@ -270,7 +327,7 @@
         return;
       }
 
-      this.togglePanel();
+      this.closeDrawer();
       this.selected = newChoice;
 
       if (newChoice.substr(0, 7) === 'states_') {
@@ -286,8 +343,8 @@
       this.narrow = detail.narrow;
     },
 
-    togglePanel: function() {
+    closeDrawer: function() {
-      this.$.drawer.togglePanel();
+      this.$.drawer.closeDrawer();
     },
 
     handleLogOut: function() {
@@ -309,6 +366,10 @@
 
     // /temp work around
 
+    computeIsSelected: function(selected, selectedType) {
+      return selected === selectedType;
+    },
+
     filterIcon: function(filter) {
       return uiUtil.domainIcon(filter);
     },

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

@@ -12,8 +12,7 @@
 <template>
   <paper-header-panel class='fit'>
     <paper-toolbar>
-      <paper-icon-button icon="menu" hidden$="[[!narrow]]"
+      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
-        on-click="togglePanel"></paper-icon-button>
       <div class='flex'>
         <content select="[header-title]"></content>
       </div>
@@ -38,11 +37,6 @@
         type: Boolean,
         value: false,
       },
-
-      togglePanel: {
-        type: Function,
-        value: function() {},
-      },
     },
   });
 

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

@@ -1,43 +1,50 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
+<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+
 <link rel="import" href="./partial-base.html">
 
 <link rel="import" href="../components/ha-logbook.html">
 
-<polymer-element name="partial-logbook" attributes="narrow togglePanel">
+<dom-module is="partial-logbook">
-<template>
   <style>
     .content {
       background-color: white;
       padding: 8px;
     }
   </style>
-  <partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
+  <template>
+    <partial-base narrow="[[narrow]]">
       <span header-title>Logbook</span>
 
-    <span header-buttons>
+      <paper-icon-button icon="refresh" header-buttons
-      <paper-icon-button icon="refresh"
+        on-click="handleRefresh"></paper-icon-button>
-        on-click="{{handleRefreshClick}}"></paper-icon-button>
-    </span>
 
-    <div flex class="{{ {content: true, narrow: narrow, wide: !narrow} | tokenList }}">
+      <ha-logbook entries="[[entries]]"></ha-logbook>
-      <ha-logbook entries="{{entries}}"></ha-logbook>
-    </div>
     </partial-base>
   </template>
+</dom-module>
+
 <script>
+(function() {
   var storeListenerMixIn = window.hass.storeListenerMixIn;
   var logbookActions = window.hass.logbookActions;
 
-  Polymer(Polymer.mixin({
+  Polymer({
-    entries: null,
+    is: 'partial-logbook',
 
-    attached: function() {
+    behaviors: [StoreListenerBehavior],
-      this.listenToStores(true);
+
+    properties: {
+      narrow: {
+        type: Boolean,
+        value: false,
       },
 
-    detached: function() {
+      entries: {
-      this.stopListeningToStores();
+        type: Array,
+        value: [],
+      },
     },
 
     logbookStoreChanged: function(logbookStore) {
@@ -48,9 +55,9 @@
       this.entries = logbookStore.all.toArray();
     },
 
-    handleRefreshClick: function() {
+    handleRefresh: function() {
       logbookActions.fetch();
     },
-  }, storeListenerMixIn));
+  });
+})();
 </script>
-</polymer>

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

@@ -7,7 +7,7 @@
 
 <link rel="import" href="../components/state-cards.html">
 
-<dom-module is="partial-states" attributes="narrow togglePanel filter">
+<dom-module is="partial-states">
   <style>
     .listening {
       position: absolute;
@@ -34,7 +34,7 @@
   </style>
 
   <template>
-    <partial-base narrow="[[narrow]]" togglePanel="[[togglePanel]]">
+    <partial-base narrow="[[narrow]]">
       <span header-title>{{headerTitle}}</span>
 
       <span header-buttons>
@@ -94,14 +94,6 @@
         value: false,
       },
 
-      /**
-       * Function to toggle panel visibility.
-       */
-      togglePanel: {
-        type: Function,
-        value: function() {},
-      },
-
       filter: {
         type: String,
         value: null,