Add logbook to frontend

homeassistant/components/frontend/version.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "a063d1482fd49e9297d64e1329324f1c"
+VERSION = "b06d3667e9e461173029ded9c0c9b815"

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

@@ -0,0 +1,25 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../resources/moment-js.html">
+
+<polymer-element name="display-time" attributes="dateObj">
+  <template>
+    {{ time }}
+  </template>
+  <script>
+  (function() {
+    var timeFormatOptions = {hour: 'numeric', minute: '2-digit'};
+    Polymer({
+      time: "",
+
+      dateObjChanged: function(oldVal, newVal) {
+        if (!newVal) {
+          this.time = "";
+        }
+
+        this.time = newVal.toLocaleTimeString([], timeFormatOptions);
+      },
+    });
+  })();
+  </script>
+</polymer-element>

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

@@ -0,0 +1,17 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../components/logbook-entry.html">
+
+<polymer-element name="ha-logbook" attributes="entries" noscript>
+<template>
+  <style>
+    .logbook {
+    }
+  </style>
+  <div class='logbook'>
+    <template repeat="{{entries as entry}}">
+      <logbook-entry entryObj="{{entry}}"></logbook-entry>
+    </template>
+  </div>
+</template>
+</polymer>

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

@@ -0,0 +1,60 @@
+<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">
+<template>
+  <core-style ref='ha-main'></core-style>
+  <style>
+    .logbook-entry {
+      line-height: 2em;
+    }
+
+    .time {
+      width: 55px;
+      font-size: .8em;
+    }
+
+    .icon {
+      margin: 0 8px 0 16px;
+    }
+
+    .name {
+      text-transform: capitalize;
+    }
+
+    .message {
+
+    }
+  </style>
+
+  <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({
+      entityClicked: function() {
+        uiActions.showMoreInfoDialog(this.entryObj.entityId);
+      }
+    });
+
+  })();
+</script>
+</polymer-element>

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

@@ -1 +1 @@
-Subproject commit e048bf6ece91983b9f03aafeb414ae5c535288a2
+Subproject commit 282004e3e27134a3de1b9c0e6c264ce811f3e510

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

@@ -10,6 +10,7 @@
 
 <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-dev-fire-event.html">
 <link rel="import" href="../layouts/partial-dev-call-service.html">
 <link rel="import" href="../layouts/partial-dev-set-state.html">
@@ -96,6 +97,13 @@
           </paper-item>
         </template>
 
+        <template if="{{hasLogbookComponent}}">
+          <paper-item data-panel="logbook">
+            <core-icon icon="list"></core-icon>
+            Logbook
+          </paper-item>
+        </template>
+
         <div flex></div>
 
         <paper-item on-click="{{handleLogOutClick}}">
@@ -136,6 +144,9 @@
     <template if="{{selected == 'history'}}">
       <partial-history main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-history>
     </template>
+    <template if="{{selected == 'logbook'}}">
+      <partial-logbook main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-logbook>
+    </template>
     <template if="{{selected == 'fire-event'}}">
       <partial-dev-fire-event main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-dev-fire-event>
     </template>
@@ -161,6 +172,7 @@ Polymer(Polymer.mixin({
   narrow: false,
   activeFilters: [],
   hasHistoryComponent: false,
+  hasLogbookComponent: false,
 
   isStreaming: false,
   hasStreamError: false,
@@ -185,7 +197,7 @@ Polymer(Polymer.mixin({
 
   componentStoreChanged: function(componentStore) {
     this.hasHistoryComponent = componentStore.isLoaded('history');
-    this.hasScriptComponent = componentStore.isLoaded('script');
+    this.hasLogbookComponent = componentStore.isLoaded('logbook');
   },
 
   streamStoreChanged: function(streamStore) {

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

@@ -0,0 +1,56 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="./partial-base.html">
+
+<link rel="import" href="../components/ha-logbook.html">
+
+<polymer-element name="partial-logbook" attributes="narrow togglePanel">
+<template>
+  <style>
+    .content {
+      background-color: white;
+      padding: 8px;
+    }
+  </style>
+  <partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
+    <span header-title>Logbook</span>
+
+    <span header-buttons>
+      <paper-icon-button icon="refresh"
+        on-click="{{handleRefreshClick}}"></paper-icon-button>
+    </span>
+
+    <div flex class="{{ {content: true, narrow: narrow, wide: !narrow} | tokenList }}">
+      <ha-logbook entries="{{entries}}"></ha-logbook>
+    </div>
+  </partial-base>
+</template>
+<script>
+  var storeListenerMixIn = window.hass.storeListenerMixIn;
+  var logbookActions = window.hass.logbookActions;
+
+  Polymer(Polymer.mixin({
+    entries: null,
+
+    attached: function() {
+      this.listenToStores(true);
+    },
+
+    detached: function() {
+      this.stopListeningToStores();
+    },
+
+    logbookStoreChanged: function(logbookStore) {
+      if (logbookStore.isStale()) {
+        logbookActions.fetch();
+      }
+
+      this.entries = logbookStore.all.toArray();
+    },
+
+    handleRefreshClick: function() {
+      logbookActions.fetch();
+    },
+  }, storeListenerMixIn));
+</script>
+</polymer>

homeassistant/components/frontend/www_static/polymer/resources/home-assistant-icons.html

@@ -51,7 +51,7 @@ window.hass.uiUtil.domainIcon = function(domain, state) {
     case "media_player":
       var icon = "hardware:cast";
 
-      if (state !== "idle") {
+      if (state && state !== "idle") {
         icon += "-connected";
       }
 

homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html

@@ -1,5 +1,30 @@
 <link rel="import" href="../bower_components/core-style/core-style.html">
 
+<core-style id='ha-main'>
+/* Palette generated by Material Palette - materialpalette.com/light-blue/orange */
+
+.dark-primary-color    { background: #0288D1; }
+.default-primary-color { background: #03A9F4; }
+.light-primary-color   { background: #B3E5FC; }
+.text-primary-color    { color: #FFFFFF; }
+.accent-color          { background: #FF9800; }
+.primary-text-color    { color: #212121; }
+.secondary-text-color  { color: #727272; }
+.divider-color         { border-color: #B6B6B6; }
+
+/* extra */
+.accent-text-colo      { color: #FF9800; }
+
+body {
+  color: #212121;
+}
+
+a {
+  color: #FF9800;
+  text-decoration: none;
+}
+</core-style>
+
 <core-style id='ha-animations'>
   @-webkit-keyframes ha-spin {
     0% {