From e2f51ef557d7131cac82607101dee4679d0aa365 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 31 Jan 2015 20:07:04 -0800
Subject: [PATCH] Default more info will show recent states

---
 homeassistant/components/frontend/version.py  |  2 +-
 .../frontend/www_static/frontend.html         | 39 +++++++++++++++----
 .../polymer/components/loading-box.html       | 25 ++++++++++++
 .../polymer/components/recent-states.html     | 37 +++++++++++++-----
 .../polymer/more-infos/more-info-default.html | 33 ++++++++--------
 .../polymer/more-infos/more-info-sun.html     | 28 +++----------
 .../resources/home-assistant-style.html       | 21 +++++++++-
 7 files changed, 126 insertions(+), 59 deletions(-)
 create mode 100644 homeassistant/components/frontend/www_static/polymer/components/loading-box.html

diff --git a/homeassistant/components/frontend/version.py b/homeassistant/components/frontend/version.py
index 06499698f11..e486e15d4ab 100644
--- a/homeassistant/components/frontend/version.py
+++ b/homeassistant/components/frontend/version.py
@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "83b735c326edc749f0066a79a7eedbd6"
+VERSION = "212470c7842a8715f81fba76a3bd985f"
diff --git a/homeassistant/components/frontend/www_static/frontend.html b/homeassistant/components/frontend/www_static/frontend.html
index 7d4813557ae..b29a87a2dbe 100644
--- a/homeassistant/components/frontend/www_static/frontend.html
+++ b/homeassistant/components/frontend/www_static/frontend.html
@@ -72,17 +72,23 @@ b.events&&Object.keys(a).length>0&&console.log("[%s] addHostListeners:",this.loc
         </div></template></div></template><script>Polymer("events-list",{cbEventClicked:null,events:[],domReady:function(){this.events=this.api.events;this.api.addEventListener("events-updated",this.eventsUpdated.bind(this))},eventsUpdated:function(){this.events=this.api.events},handleClick:function(ev){if(this.cbEventClicked){this.cbEventClicked(ev.path[0].innerHTML)}}});</script></polymer-element><polymer-element name="event-fire-dialog" attributes="api" assetpath="polymer/dialogs/"><template><ha-action-dialog id="dialog" heading="Fire Event" class="two-column" closeselector="[dismissive]"><div layout="" horizontal=""><div class="ha-form"><paper-input id="inputType" label="Event Type" floatinglabel="true" autofocus required></paper-input><paper-input-decorator label="Event Data (JSON, optional)" floatinglabel="true"><textarea id="inputData" rows="5"></textarea></paper-input-decorator></div><div class="sidebar"><b>Available events:</b><events-list api="{{api}}" cbeventclicked="{{eventSelected}}"></events-list></div></div><paper-button dismissive="">Cancel</paper-button><paper-button affirmative="" on-click="{{clickFireEvent}}">Fire Event</paper-button></ha-action-dialog></template><script>Polymer("event-fire-dialog",{ready:function(){this.eventSelected=this.eventSelected.bind(this)},show:function(eventType,eventData){this.setEventType(eventType);this.setEventData(eventData);this.job("showDialogAfterRender",function(){this.$.dialog.toggle()}.bind(this))},setEventType:function(eventType){this.$.inputType.value=eventType},setEventData:function(eventData){this.$.inputData.value=eventData},eventSelected:function(eventType){this.setEventType(eventType)},clickFireEvent:function(){try{this.api.fire_event(this.$.inputType.value,this.$.inputData.value?JSON.parse(this.$.inputData.value):{});this.$.dialog.close()}catch(err){alert("Error parsing JSON: "+err)}}});</script></polymer-element><polymer-element name="core-item" attributes="label icon src" horizontal="" center="" layout="" assetpath="polymer/bower_components/core-item/"><template><style>:host{display:block;position:relative;min-height:40px;white-space:nowrap}:host(.font-scalable){min-height:2.5em}:host(.core-selected){font-weight:700}#icon{margin:0 16px 0 4px}:host(.font-scalable) #icon{margin:0 1em 0 .25em;height:1.5em;width:1.5em}polyfill-next-selector{content:':host > a'}::content>a{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.000001)}</style><template if="{{icon || src}}"><core-icon src="{{src}}" id="icon" icon="{{icon}}" hidden?="{{!src && !icon}}"></core-icon></template><div id="label">{{label}}</div><content></content></template><script>Polymer("core-item",{});</script></polymer-element><style shim-shadowdom="">html /deep/ core-collapse{display:block}html /deep/ .core-collapse-closed{display:none}</style><polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize allowOverflow" assetpath="polymer/bower_components/core-collapse/"><template><content></content></template><script>Polymer("core-collapse",{target:null,horizontal:false,opened:false,duration:.33,fixedSize:false,allowOverflow:false,created:function(){this.transitionEndListener=this.transitionEnd.bind(this)},ready:function(){this.target=this.target||this},domReady:function(){this.async(function(){this.afterInitialUpdate=true})},detached:function(){if(this.target){this.removeListeners(this.target)}},targetChanged:function(old){if(old){this.removeListeners(old)}if(!this.target){return}this.isTargetReady=!!this.target;this.classList.toggle("core-collapse-closed",this.target!==this);this.toggleOpenedStyle(false);this.horizontalChanged();this.addListeners(this.target);this.toggleClosedClass(true);this.update()},addListeners:function(node){node.addEventListener("transitionend",this.transitionEndListener)},removeListeners:function(node){node.removeEventListener("transitionend",this.transitionEndListener)},horizontalChanged:function(){this.dimension=this.horizontal?"width":"height"},openedChanged:function(){this.update();this.fire("core-collapse-open",this.opened)},toggle:function(){this.opened=!this.opened},setTransitionDuration:function(duration){var s=this.target.style;s.transition=duration?this.dimension+" "+duration+"s":null;if(duration===0){this.async("transitionEnd")}},transitionEnd:function(){if(this.opened&&!this.fixedSize){this.updateSize("auto",null)}this.setTransitionDuration(null);this.toggleOpenedStyle(this.opened);this.toggleClosedClass(!this.opened);this.asyncFire("core-resize",null,this.target)},toggleClosedClass:function(closed){this.hasClosedClass=closed;this.target.classList.toggle("core-collapse-closed",closed)},toggleOpenedStyle:function(opened){this.target.style.overflow=this.allowOverflow&&opened?"":"hidden"},updateSize:function(size,duration,forceEnd){this.setTransitionDuration(duration);this.calcSize();var s=this.target.style;var nochange=s[this.dimension]===size;s[this.dimension]=size;if(forceEnd&&nochange){this.transitionEnd()}},update:function(){if(!this.target){return}if(!this.isTargetReady){this.targetChanged()}this.horizontalChanged();this[this.opened?"show":"hide"]()},calcSize:function(){return this.target.getBoundingClientRect()[this.dimension]+"px"},getComputedSize:function(){return getComputedStyle(this.target)[this.dimension]},show:function(){this.toggleClosedClass(false);if(!this.afterInitialUpdate){this.transitionEnd();return}if(!this.fixedSize){this.updateSize("auto",null);var s=this.calcSize();if(s=="0px"){this.transitionEnd();return}this.updateSize(0,null)}this.async(function(){this.updateSize(this.size||s,this.duration,true)})},hide:function(){this.toggleOpenedStyle(false);if(this.hasClosedClass&&!this.fixedSize){return}if(this.fixedSize){this.size=this.getComputedSize()}else{this.updateSize(this.calcSize(),null)}this.async(function(){this.updateSize(0,this.duration)})}});</script></polymer-element><polymer-element name="core-submenu" attributes="selected selectedItem selectedAttribute label icon src valueattr" assetpath="polymer/bower_components/core-menu/"><template><style>:host{display:block;height:auto}:host(.core-selected,[active]){font-weight:initial}core-item{cursor:default}::content>core-item{cursor:default}:host(.font-scalable)>core-item{min-height:2.5em}:host(.font-scalable)>core-item::shadow core-icon{margin:0 1em 0 .25em;height:1.5em;width:1.5em}#submenu{margin:0 0 0 44px}:host(.font-scalable)>#submenu{margin:0 0 0 2.75em}</style><core-item id="submenuItem" src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}"><content select=".item-content"></content></core-item><core-menu id="submenu" selected="{{selected}}" selecteditem="{{selectedItem}}" selectedattribute="{{selectedAttribute}}" valueattr="{{valueattr}}"><content></content></core-menu><core-collapse target="{{$.submenu}}" opened="{{opened}}"></core-collapse></template><script>Polymer("core-submenu",{publish:{active:{value:false,reflect:true}},opened:false,get items(){return this.$.submenu.items},hasItems:function(){return!!this.items.length},unselectAllItems:function(){this.$.submenu.selected=null;this.$.submenu.clearSelection()},activeChanged:function(){if(this.hasItems()){this.opened=this.active}if(!this.active){this.unselectAllItems()}},toggle:function(){this.opened=!this.opened},activate:function(){if(this.hasItems()&&this.active){this.toggle();this.unselectAllItems()}}});</script></polymer-element><polymer-element name="services-list" attributes="api cbServiceClicked" assetpath="polymer/components/"><template><style>:host{display:block}core-menu{margin-top:0;font-size:1rem}a{display:block}</style><template if="{{cbServiceClicked}}"><style>a,core-submenu{text-decoration:underline;cursor:pointer}</style></template><div><core-menu selected="0"><template repeat="{{serv in services}}"><core-submenu icon="{{serv.domain | getIcon}}" label="{{serv.domain}}"><template repeat="{{service in serv.services}}"><a on-click="{{serviceClicked}}" data-domain="{{serv.domain}}">{{service}}</a></template></core-submenu></template></core-menu></div></template><script>Polymer("services-list",{services:[],cbServiceClicked:null,domReady:function(){this.services=this.api.services;this.api.addEventListener("services-updated",this.servicesUpdated.bind(this))},getIcon:function(domain){return(new DomainIcon).icon(domain)},servicesUpdated:function(){this.services=this.api.services},serviceClicked:function(ev){if(this.cbServiceClicked){var target=ev.path[0];var domain=target.getAttributeNode("data-domain").value;var service=target.innerHTML;this.cbServiceClicked(domain,service)}}});</script></polymer-element><polymer-element name="service-call-dialog" attributes="api" assetpath="polymer/dialogs/"><template><ha-action-dialog id="dialog" heading="Call Service" closeselector="[dismissive]"><core-style ref="ha-dialog"></core-style><div layout="" horizontal=""><div class="ha-form"><paper-input id="inputDomain" label="Domain" floatinglabel="true" autofocus required></paper-input><paper-input id="inputService" label="Service" floatinglabel="true" required></paper-input><paper-input-decorator label="Service Data (JSON, optional)" floatinglabel="true"><textarea id="inputData" rows="5"></textarea></paper-input-decorator></div><div class="sidebar"><b>Available services:</b><services-list api="{{api}}" cbserviceclicked="{{serviceSelected}}"></services-list></div></div><paper-button dismissive="">Cancel</paper-button><paper-button affirmative="" on-click="{{clickCallService}}">Call Service</paper-button></ha-action-dialog></template><script>Polymer("service-call-dialog",{ready:function(){this.serviceSelected=this.serviceSelected.bind(this)},show:function(domain,service,serviceData){this.setService(domain,service);this.$.inputData.value=serviceData;this.job("showDialogAfterRender",function(){this.$.dialog.toggle()}.bind(this))},setService:function(domain,service){this.$.inputDomain.value=domain;this.$.inputService.value=service},serviceSelected:function(domain,service){this.setService(domain,service)},clickCallService:function(){try{this.api.call_service(this.$.inputDomain.value,this.$.inputService.value,this.$.inputData.value?JSON.parse(this.$.inputData.value):{});this.$.dialog.close()}catch(err){alert("Error parsing JSON: "+err)}}});</script></polymer-element><polymer-element name="entity-list" attributes="api cbEntityClicked" assetpath="polymer/components/"><template><style>:host{display:block}.entityContainer{font-size:1rem}</style><template if="{{cbEntityClicked}}"><style>a{text-decoration:underline;cursor:pointer}</style></template><div><template repeat="{{state in states}}"><div class="eventContainer"><a on-click="{{handleClick}}">{{state.entity_id}}</a></div></template></div></template><script>Polymer("entity-list",{cbEventClicked:null,states:[],domReady:function(){this.api.addEventListener("states-updated",this.statesUpdated.bind(this));this.statesUpdated()},statesUpdated:function(){this.states=this.api.states},handleClick:function(ev){if(this.cbEntityClicked){this.cbEntityClicked(ev.path[0].innerHTML)}}});</script></polymer-element><polymer-element name="state-set-dialog" attributes="api" assetpath="polymer/dialogs/"><template><ha-action-dialog id="dialog" heading="Set State" closeselector="[dismissive]"><core-style ref="ha-dialog"></core-style><p>
       This dialog will update the representation of the device within Home Assistant.<br>
       This will not communicate with the actual device.
-    </p><div layout="" horizontal=""><div class="ha-form"><paper-input id="inputEntityID" label="Entity ID" floatinglabel="true" autofocus required></paper-input><paper-input id="inputState" label="State" floatinglabel="true" required></paper-input><paper-input-decorator label="State attributes (JSON, optional)" floatinglabel="true"><textarea id="inputData" rows="5"></textarea></paper-input-decorator></div><div class="sidebar"><b>Current entities:</b><entity-list api="{{api}}" cbentityclicked="{{entitySelected}}"></entity-list></div></div><paper-button dismissive="">Cancel</paper-button><paper-button affirmative="" on-click="{{clickSetState}}">Set State</paper-button></ha-action-dialog></template><script>Polymer("state-set-dialog",{ready:function(){this.entitySelected=this.entitySelected.bind(this)},show:function(entityId,state,stateData){this.setEntityId(entityId);this.setState(state);this.setStateData(stateData);this.job("showDialogAfterRender",function(){this.$.dialog.toggle()}.bind(this))},setEntityId:function(entityId){this.$.inputEntityID.value=entityId},setState:function(state){this.$.inputState.value=state},setStateData:function(stateData){var value=stateData?JSON.stringify(stateData,null,"  "):"";this.$.inputData.value=value},entitySelected:function(entityId){this.setEntityId(entityId);var state=this.api.getState(entityId);this.setState(state.state);this.setStateData(state.attributes)},clickSetState:function(ev){try{this.api.set_state(this.$.inputEntityID.value,this.$.inputState.value,this.$.inputData.value?JSON.parse(this.$.inputData.value):{});this.$.dialog.close()}catch(err){alert("Error parsing JSON: "+err)}}});</script></polymer-element><polymer-element name="more-info-default" attributes="stateObj" assetpath="polymer/more-infos/"><template><style>.data-entry{margin-bottom:8px}.data-entry:last-child{margin-bottom:0}.data{padding-left:10px;text-align:right;word-break:break-all;max-width:200px}</style><div layout="" vertical=""><template repeat="{{key in stateObj.attributes | getKeys}}"><div layout="" justified="" horizontal="" class="data-entry"><div>
+    </p><div layout="" horizontal=""><div class="ha-form"><paper-input id="inputEntityID" label="Entity ID" floatinglabel="true" autofocus required></paper-input><paper-input id="inputState" label="State" floatinglabel="true" required></paper-input><paper-input-decorator label="State attributes (JSON, optional)" floatinglabel="true"><textarea id="inputData" rows="5"></textarea></paper-input-decorator></div><div class="sidebar"><b>Current entities:</b><entity-list api="{{api}}" cbentityclicked="{{entitySelected}}"></entity-list></div></div><paper-button dismissive="">Cancel</paper-button><paper-button affirmative="" on-click="{{clickSetState}}">Set State</paper-button></ha-action-dialog></template><script>Polymer("state-set-dialog",{ready:function(){this.entitySelected=this.entitySelected.bind(this)},show:function(entityId,state,stateData){this.setEntityId(entityId);this.setState(state);this.setStateData(stateData);this.job("showDialogAfterRender",function(){this.$.dialog.toggle()}.bind(this))},setEntityId:function(entityId){this.$.inputEntityID.value=entityId},setState:function(state){this.$.inputState.value=state},setStateData:function(stateData){var value=stateData?JSON.stringify(stateData,null,"  "):"";this.$.inputData.value=value},entitySelected:function(entityId){this.setEntityId(entityId);var state=this.api.getState(entityId);this.setState(state.state);this.setStateData(state.attributes)},clickSetState:function(ev){try{this.api.set_state(this.$.inputEntityID.value,this.$.inputState.value,this.$.inputData.value?JSON.parse(this.$.inputData.value):{});this.$.dialog.close()}catch(err){alert("Error parsing JSON: "+err)}}});</script></polymer-element><polymer-element name="loading-box" attributes="text" assetpath="polymer/components/"><template><style>.text{display:inline-block;line-height:28px;vertical-align:top;margin-left:8px}</style><div layout="horizontal"><paper-spinner active="true"></paper-spinner><div class="text">{{text}}…</div></div></template><script>Polymer("loading-box",{text:"Loading"});</script></polymer-element><polymer-element name="recent-states" attributes="api stateObj" assetpath="polymer/components/"><template><core-style ref="ha-data-table"></core-style><template if="{{recentStates === null}}"><loading-box text="Loading recent states"></loading-box></template><template if="{{recentStates !== null}}"><div layout="" vertical=""><template repeat="{{recentStates as state}}"><div layout="" justified="" horizontal="" class="data-entry"><div>
+              {{state.state}}
+            </div><div class="data">
+              {{state.last_changed | relativeHATime}}
+            </div></div></template><template if="{{recentStates.length == 0}}">
+          There are no recent states.
+        </template></div></template></template><script>Polymer("recent-states",{recentStates:null,stateObjChanged:function(){this.recentStates=null;this.api.call_api("GET","history/"+this.stateObj.entity_id+"/recent_states",{},this.newStates.bind(this))},newStates:function(states){this.recentStates=states.slice(1)}});</script></polymer-element><polymer-element name="more-info-default" attributes="stateObj api" assetpath="polymer/more-infos/"><template><core-style ref="ha-key-value-table"></core-style><style>.data-entry .value{max-width:200px}</style><div layout="" vertical=""><template repeat="{{key in stateObj.attributes | getKeys}}"><div layout="" justified="" horizontal="" class="data-entry"><div class="key">
           {{key}}
-        </div><div class="data">
+        </div><div class="value">
           {{stateObj.attributes[key]}}
-        </div></div></template></div></template><script>Polymer("more-info-default",{getKeys:function(obj){return Object.keys(obj||{})}});</script></polymer-element><polymer-element name="core-range" attributes="value min max step ratio" assetpath="polymer/bower_components/core-range/"><script>Polymer("core-range",{value:0,min:0,max:100,step:1,ratio:0,observe:{"value min max step":"update"},calcRatio:function(value){return(this.clampValue(value)-this.min)/(this.max-this.min)},clampValue:function(value){return Math.min(this.max,Math.max(this.min,this.calcStep(value)))},calcStep:function(value){return this.step?Math.round(value/this.step)/(1/this.step):value},validateValue:function(){var v=this.clampValue(this.value);this.value=this.oldValue=isNaN(v)?this.oldValue:v;return this.value!==v},update:function(){this.validateValue();this.ratio=this.calcRatio(this.value)*100}});</script></polymer-element><polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate" assetpath="polymer/bower_components/paper-progress/"><template><style>:host{display:inline-block;width:200px;height:4px}#progressContainer{position:relative;height:100%;background-color:#c8c8c8;overflow:hidden}#activeProgress,#secondaryProgress{-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:scaleX(0);transform:scaleX(0)}#activeProgress{background-color:#0f9d58}#secondaryProgress{background-color:#87ceac}#activeProgress.indeterminate{-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation:indeterminate-bar 1s linear infinite;animation:indeterminate-bar 1s linear infinite}@-webkit-keyframes indeterminate-bar{0%{-webkit-transform:translate(-50%) scaleX(0)}50%{-webkit-transform:translate(0%) scaleX(0.3)}100%{-webkit-transform:translate(50%) scaleX(0)}}@keyframes indeterminate-bar{0%{transform:translate(-50%) scaleX(0)}50%{transform:translate(0%) scaleX(0.3)}100%{transform:translate(50%) scaleX(0)}}</style><div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}"><div id="secondaryProgress" fit=""></div><div id="activeProgress" fit=""></div></div></template><script>Polymer("paper-progress",{secondaryProgress:0,indeterminate:false,step:0,observe:{"value secondaryProgress min max indeterminate":"update"},update:function(){this.super();this.secondaryProgress=this.clampValue(this.secondaryProgress);this.secondaryRatio=this.calcRatio(this.secondaryProgress)*100;this.$.activeProgress.classList.toggle("indeterminate",this.indeterminate)},transformProgress:function(progress,ratio){var transform="scaleX("+ratio/100+")";progress.style.transform=progress.style.webkitTransform=transform},ratioChanged:function(){this.transformProgress(this.$.activeProgress,this.ratio)},secondaryRatioChanged:function(){this.transformProgress(this.$.secondaryProgress,this.secondaryRatio)}});</script></polymer-element><polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" assetpath="polymer/bower_components/paper-slider/"><template><style>:host{display:inline-block;width:200px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host(:focus){outline:0}#sliderContainer{position:relative;width:calc(100% - 32px);height:32px}#sliderContainer.editable{float:left;width:calc(100% - 72px);margin:12px 0}.bar-container{position:absolute;top:0;left:16px;height:100%;width:100%;overflow:hidden}.ring>.bar-container{left:20px;width:calc(100% - 4px);transition:left .18s ease,width .18s ease}.ring.expand:not(.pin)>.bar-container{left:30px;width:calc(100% - 14px)}.ring.expand.dragging>.bar-container{transition:none}#sliderBar{position:absolute;top:15px;left:0;height:2px;width:100%;padding:8px 0;margin:-8px 0}.ring #sliderBar{left:-4px;width:calc(100% + 4px)}.ring.expand:not(.pin) #sliderBar{left:-14px;width:calc(100% + 14px)}.slider-markers{position:absolute;top:15px;left:15px;height:2px;width:calc(100% + 2px);box-sizing:border-box;pointer-events:none}.slider-markers::after,.slider-marker::after{content:"";display:block;width:2px;height:2px;border-radius:50%;background-color:#000}#sliderBar::shadow #activeProgress{background-color:#3f51b5}.transiting #sliderBar::shadow #activeProgress{transition:-webkit-transform .08s ease;transition:transform .08s ease}#sliderKnob{position:absolute;left:0;top:0;width:32px;height:32px}.transiting>#sliderKnob{transition:left .08s ease}#sliderKnob:focus{outline:0}#sliderKnob.dragging{transition:none}.snaps>#sliderKnob.dragging{transition:-webkit-transform .08s ease;transition:transform .08s ease}#sliderKnobInner{width:12px;height:12px;box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;background-color:#3f51b5;transition:height .18s ease,width .18s ease}.expand:not(.pin)>#sliderKnob>#sliderKnobInner{width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.ring>#sliderKnob>#sliderKnobInner{background-color:transparent;border:2px solid #c8c8c8}#sliderKnobInner::before{background-color:#3f51b5}.pin>#sliderKnob>#sliderKnobInner::before{content:"";position:absolute;top:0;left:0;width:26px;height:26px;margin-left:3px;border-radius:50% 50% 50% 0;-webkit-transform:rotate(-45deg) scale(0) translate(0);transform:rotate(-45deg) scale(0) translate(0)}#sliderKnobInner::before,#sliderKnobInner::after{transition:-webkit-transform .2s ease,background-color .18s ease;transition:transform .2s ease,background-color .18s ease}.pin.ring>#sliderKnob>#sliderKnobInner::before{background-color:#c8c8c8}.pin.expand>#sliderKnob>#sliderKnobInner::before{-webkit-transform:rotate(-45deg) scale(1) translate(17px,-17px);transform:rotate(-45deg) scale(1) translate(17px,-17px)}.pin>#sliderKnob>#sliderKnobInner::after{content:attr(value);position:absolute;top:0;left:0;width:32px;height:26px;text-align:center;color:#fff;font-size:10px;-webkit-transform:scale(0) translate(0);transform:scale(0) translate(0)}.pin.expand>#sliderKnob>#sliderKnobInner::after{-webkit-transform:scale(1) translate(0,-17px);transform:scale(1) translate(0,-17px)}.slider-input{width:40px;float:right;overflow:hidden}.slider-input::shadow input{text-align:center}#sliderContainer.disabled{pointer-events:none}.disabled>#sliderKnob>#sliderKnobInner{width:8px;height:8px;background-color:#c8c8c8}.disabled.ring>#sliderKnob>#sliderKnobInner{background-color:transparent}#sliderContainer.disabled #sliderBar::shadow #activeProgress{background-color:#c8c8c8}</style><template if="{{!disabled}}"><core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys><core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys></template><div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}"><div class="bar-container"><paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryprogress="{{secondaryProgress}}" on-down="{{bardown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress></div><template if="{{snaps && !disabled}}"><div class="slider-markers" horizontal="" layout=""><template repeat="{{markers}}"><div flex="" class="slider-marker"></div></template></div></template><div id="sliderKnob" on-down="{{knobdown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}" on-transitionend="{{knobTransitionEnd}}" center-justified="" center="" horizontal="" layout=""><div id="sliderKnobInner" value="{{immediateValue}}"></div></div></div><template if="{{editable}}"><paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input></template></template><script>Polymer("paper-slider",{snaps:false,pin:false,disabled:false,secondaryProgress:0,editable:false,maxMarkers:100,dragging:false,observe:{"step snaps":"update"},ready:function(){this.update()},update:function(){this.positionKnob(this.calcRatio(this.value));this.updateMarkers()},minChanged:function(){this.update();this.setAttribute("aria-valuemin",this.min)},maxChanged:function(){this.update();this.setAttribute("aria-valuemax",this.max)},valueChanged:function(){this.update();this.setAttribute("aria-valuenow",this.value);this.fire("core-change")},disabledChanged:function(){if(this.disabled){this.removeAttribute("tabindex")}else{this.tabIndex=0}},immediateValueChanged:function(){if(!this.dragging){this.value=this.immediateValue}this.fire("immediate-value-change")},expandKnob:function(){this.expand=true},resetKnob:function(){this.expandJob&&this.expandJob.stop();this.expand=false},positionKnob:function(ratio){this.immediateValue=this.calcStep(this.calcKnobPosition(ratio))||0;this._ratio=this.snaps?this.calcRatio(this.immediateValue):ratio;this.$.sliderKnob.style.left=this._ratio*100+"%"},inputChange:function(){this.value=this.$.input.value;this.fire("change")},calcKnobPosition:function(ratio){return(this.max-this.min)*ratio+this.min},trackStart:function(e){this._w=this.$.sliderBar.offsetWidth;this._x=this._ratio*this._w;this._startx=this._x||0;this._minx=-this._startx;this._maxx=this._w-this._startx;this.$.sliderKnob.classList.add("dragging");this.dragging=true;e.preventTap()},trackx:function(e){var x=Math.min(this._maxx,Math.max(this._minx,e.dx));this._x=this._startx+x;this.immediateValue=this.calcStep(this.calcKnobPosition(this._x/this._w))||0;var s=this.$.sliderKnob.style;s.transform=s.webkitTransform="translate3d("+(this.snaps?this.calcRatio(this.immediateValue)*this._w-this._startx:x)+"px, 0, 0)"},trackEnd:function(){var s=this.$.sliderKnob.style;s.transform=s.webkitTransform="";this.$.sliderKnob.classList.remove("dragging");this.dragging=false;this.resetKnob();this.value=this.immediateValue;this.fire("change")},knobdown:function(e){e.preventDefault();this.expandKnob()},bardown:function(e){e.preventDefault();this.transiting=true;this._w=this.$.sliderBar.offsetWidth;var rect=this.$.sliderBar.getBoundingClientRect();var ratio=(e.x-rect.left)/this._w;this.positionKnob(ratio);this.expandJob=this.job(this.expandJob,this.expandKnob,60);this.asyncFire("change")},knobTransitionEnd:function(e){if(e.target===this.$.sliderKnob){this.transiting=false}},updateMarkers:function(){this.markers=[];var l=(this.max-this.min)/this.step;if(!this.snaps&&l>this.maxMarkers){return}for(var i=0;i<l;i++){this.markers.push("")}},increment:function(){this.value=this.clampValue(this.value+this.step)},decrement:function(){this.value=this.clampValue(this.value-this.step)},incrementKey:function(ev,keys){if(keys.key==="end"){this.value=this.max}else{this.increment()}this.fire("change")},decrementKey:function(ev,keys){if(keys.key==="home"){this.value=this.min}else{this.decrement()}this.fire("change")}});</script></polymer-element><script>var colorPickerPrototype=Object.create(HTMLElement.prototype);colorPickerPrototype.onMouseDown=function(e){this.addEventListener("mousemove",this.onMouseMove)};colorPickerPrototype.onMouseUp=function(e){this.removeEventListener("mousemove",this.onMouseMove)};colorPickerPrototype.onMouseMove=function(e){e.preventDefault();if(this.mouseMoveIsThrottled){this.mouseMoveIsThrottled=false;this.onColorSelect(e);setTimeout(function(){this.mouseMoveIsThrottled=true}.bind(this),100)}};colorPickerPrototype.onColorSelect=function(e){if(this.context){var coords=this.relativeMouseCoordinates(e);var data=this.context.getImageData(coords.x,coords.y,1,1).data;this.setColor({r:data[0],g:data[1],b:data[2]})}};colorPickerPrototype.pickerDraw=function(){this.canvas=document.createElement("canvas");this.canvas.setAttribute("width",this.width);this.canvas.setAttribute("height",this.height);this.canvas.setAttribute("style","cursor:crosshair");this.canvas.setAttribute("class","simpleColorPicker");this.context=this.canvas.getContext("2d");var colorGradient=this.context.createLinearGradient(0,0,this.width,0);colorGradient.addColorStop(0,"rgb(255,0,0)");colorGradient.addColorStop(.16,"rgb(255,0,255)");colorGradient.addColorStop(.32,"rgb(0,0,255)");colorGradient.addColorStop(.48,"rgb(0,255,255)");colorGradient.addColorStop(.64,"rgb(0,255,0)");colorGradient.addColorStop(.8,"rgb(255,255,0)");colorGradient.addColorStop(1,"rgb(255,0,0)");this.context.fillStyle=colorGradient;this.context.fillRect(0,0,this.width,this.height);var bwGradient=this.context.createLinearGradient(0,0,0,this.height);bwGradient.addColorStop(0,"rgba(255,255,255,1)");bwGradient.addColorStop(.5,"rgba(255,255,255,0)");bwGradient.addColorStop(.5,"rgba(0,0,0,0)");bwGradient.addColorStop(1,"rgba(0,0,0,1)");this.context.fillStyle=bwGradient;this.context.fillRect(0,0,this.width,this.height)};colorPickerPrototype.setColor=function(rgb){this.color={hex:this.rgbToHex(rgb),rgb:rgb};this.setAttribute("color",this.color.hex);var event=new CustomEvent("colorselected",{detail:{rgb:this.color.rgb,hex:this.color.hex}});this.dispatchEvent(event)};colorPickerPrototype.componentToHex=function(c){var hex=c.toString(16);return hex.length==1?"0"+hex:hex};colorPickerPrototype.rgbToHex=function(color){return"#"+colorPickerPrototype.componentToHex(color.r)+colorPickerPrototype.componentToHex(color.g)+colorPickerPrototype.componentToHex(color.b)};colorPickerPrototype.relativeMouseCoordinates=function(e){var x=0,y=0;if(this.canvas){var rect=this.canvas.getBoundingClientRect();x=e.clientX-rect.left;y=e.clientY-rect.top}return{x:x,y:y}};colorPickerPrototype.createdCallback=function(e){var attrs={width:this.getAttribute("width"),height:this.getAttribute("height")};this.canvas=null;this.context=null;this.color=null;this.mouseMoveIsThrottled=true;this.width=attrs.width||300;this.height=attrs.height||300;this.shadowRoot=this.createShadowRoot();this.pickerDraw();this.shadowRoot.appendChild(this.canvas);this.addEventListener("click",this.onColorSelect);this.addEventListener("mousedown",this.onMouseDown);this.addEventListener("mouseup",this.onMouseUp)};document.registerElement("color-picker",{prototype:colorPickerPrototype});</script><polymer-element name="more-info-light" attributes="stateObj api" assetpath="polymer/more-infos/"><template><style>.brightness{margin-bottom:8px;max-height:0;overflow:hidden;transition:max-height .5s ease-in}.brightness paper-slider::shadow #sliderKnobInner,.brightness paper-slider::shadow #sliderBar::shadow #activeProgress{background-color:#039be5}color-picker{display:block;width:350px;margin:0 auto;max-height:0;overflow:hidden;transition:max-height .5s ease-in .3s}:host-context(.has-brightness) .brightness{max-height:500px}:host-context(.has-xy_color) color-picker{max-height:500px}</style><div><div class="brightness"><div center="" horizontal="" layout=""><div>Brightness</div><paper-slider max="255" flex="" id="brightness" on-core-change="{{brightnessSliderChanged}}"></paper-slider></div></div><color-picker id="colorpicker" width="350" height="200"></color-picker></div></template><script>Polymer("more-info-light",{ignoreNextBrightnessEvent:false,observe:{"stateObj.attributes.brightness":"brightnessChanged","stateObj.attributes.xy_color":"colorChanged"},brightnessChanged:function(oldVal,newVal){this.ignoreNextBrightnessEvent=true;this.$.brightness.value=newVal},domReady:function(){this.$.colorpicker.addEventListener("colorselected",this.colorPicked.bind(this))},brightnessSliderChanged:function(ev,details,target){if(this.ignoreNextBrightnessEvent){this.ignoreNextBrightnessEvent=false;return}var bri=parseInt(target.value);if(isNaN(bri))return;if(bri===0){this.api.turn_off(this.stateObj.entity_id)}else{this.api.call_service("light","turn_on",{entity_id:this.stateObj.entity_id,brightness:bri})}},colorPicked:function(ev){var color=ev.detail.rgb;this.api.call_service("light","turn_on",{entity_id:this.stateObj.entity_id,rgb_color:[color.r,color.g,color.b]})}});</script></polymer-element><polymer-element name="more-info-group" attributes="stateObj api" assetpath="polymer/more-infos/"><template><style>.child-card{margin-bottom:8px}.child-card:last-child{margin-bottom:0}</style><template repeat="{{states as state}}"><state-card-content stateobj="{{state}}" api="{{api}}" class="child-card"></state-card-content></template></template><script>Polymer("more-info-group",{observe:{"stateObj.attributes.entity_id":"updateStates"},updateStates:function(){this.states=this.api.getStates(this.stateObj.attributes.entity_id)}});</script></polymer-element><polymer-element name="more-info-sun" attributes="stateObj api" assetpath="polymer/more-infos/"><template><style>.data-entry{margin-bottom:8px}.data-entry:last-child{margin-bottom:0}.data{text-align:right}.time-ago{color:darkgrey;margin-top:-2px}</style><div layout="" vertical="" id="sunData"><div layout="" justified="" horizontal="" class="data-entry" id="rising"><div>
+        </div></div></template><template if="{{hasHistoryComponent}}"><h4>Recent states</h4><recent-states api="{{api}}" stateobj="{{stateObj}}"></recent-states></template></div></template><script>Polymer("more-info-default",{hasHistoryComponent:false,getKeys:function(obj){return Object.keys(obj||{})},apiChanged:function(oldVal,newVal){this.hasHistoryComponent=this.api&&this.api.hasComponent("history")}});</script></polymer-element><polymer-element name="core-range" attributes="value min max step ratio" assetpath="polymer/bower_components/core-range/"><script>Polymer("core-range",{value:0,min:0,max:100,step:1,ratio:0,observe:{"value min max step":"update"},calcRatio:function(value){return(this.clampValue(value)-this.min)/(this.max-this.min)},clampValue:function(value){return Math.min(this.max,Math.max(this.min,this.calcStep(value)))},calcStep:function(value){return this.step?Math.round(value/this.step)/(1/this.step):value},validateValue:function(){var v=this.clampValue(this.value);this.value=this.oldValue=isNaN(v)?this.oldValue:v;return this.value!==v},update:function(){this.validateValue();this.ratio=this.calcRatio(this.value)*100}});</script></polymer-element><polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate" assetpath="polymer/bower_components/paper-progress/"><template><style>:host{display:inline-block;width:200px;height:4px}#progressContainer{position:relative;height:100%;background-color:#c8c8c8;overflow:hidden}#activeProgress,#secondaryProgress{-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:scaleX(0);transform:scaleX(0)}#activeProgress{background-color:#0f9d58}#secondaryProgress{background-color:#87ceac}#activeProgress.indeterminate{-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation:indeterminate-bar 1s linear infinite;animation:indeterminate-bar 1s linear infinite}@-webkit-keyframes indeterminate-bar{0%{-webkit-transform:translate(-50%) scaleX(0)}50%{-webkit-transform:translate(0%) scaleX(0.3)}100%{-webkit-transform:translate(50%) scaleX(0)}}@keyframes indeterminate-bar{0%{transform:translate(-50%) scaleX(0)}50%{transform:translate(0%) scaleX(0.3)}100%{transform:translate(50%) scaleX(0)}}</style><div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}"><div id="secondaryProgress" fit=""></div><div id="activeProgress" fit=""></div></div></template><script>Polymer("paper-progress",{secondaryProgress:0,indeterminate:false,step:0,observe:{"value secondaryProgress min max indeterminate":"update"},update:function(){this.super();this.secondaryProgress=this.clampValue(this.secondaryProgress);this.secondaryRatio=this.calcRatio(this.secondaryProgress)*100;this.$.activeProgress.classList.toggle("indeterminate",this.indeterminate)},transformProgress:function(progress,ratio){var transform="scaleX("+ratio/100+")";progress.style.transform=progress.style.webkitTransform=transform},ratioChanged:function(){this.transformProgress(this.$.activeProgress,this.ratio)},secondaryRatioChanged:function(){this.transformProgress(this.$.secondaryProgress,this.secondaryRatio)}});</script></polymer-element><polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" assetpath="polymer/bower_components/paper-slider/"><template><style>:host{display:inline-block;width:200px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host(:focus){outline:0}#sliderContainer{position:relative;width:calc(100% - 32px);height:32px}#sliderContainer.editable{float:left;width:calc(100% - 72px);margin:12px 0}.bar-container{position:absolute;top:0;left:16px;height:100%;width:100%;overflow:hidden}.ring>.bar-container{left:20px;width:calc(100% - 4px);transition:left .18s ease,width .18s ease}.ring.expand:not(.pin)>.bar-container{left:30px;width:calc(100% - 14px)}.ring.expand.dragging>.bar-container{transition:none}#sliderBar{position:absolute;top:15px;left:0;height:2px;width:100%;padding:8px 0;margin:-8px 0}.ring #sliderBar{left:-4px;width:calc(100% + 4px)}.ring.expand:not(.pin) #sliderBar{left:-14px;width:calc(100% + 14px)}.slider-markers{position:absolute;top:15px;left:15px;height:2px;width:calc(100% + 2px);box-sizing:border-box;pointer-events:none}.slider-markers::after,.slider-marker::after{content:"";display:block;width:2px;height:2px;border-radius:50%;background-color:#000}#sliderBar::shadow #activeProgress{background-color:#3f51b5}.transiting #sliderBar::shadow #activeProgress{transition:-webkit-transform .08s ease;transition:transform .08s ease}#sliderKnob{position:absolute;left:0;top:0;width:32px;height:32px}.transiting>#sliderKnob{transition:left .08s ease}#sliderKnob:focus{outline:0}#sliderKnob.dragging{transition:none}.snaps>#sliderKnob.dragging{transition:-webkit-transform .08s ease;transition:transform .08s ease}#sliderKnobInner{width:12px;height:12px;box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;background-color:#3f51b5;transition:height .18s ease,width .18s ease}.expand:not(.pin)>#sliderKnob>#sliderKnobInner{width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.ring>#sliderKnob>#sliderKnobInner{background-color:transparent;border:2px solid #c8c8c8}#sliderKnobInner::before{background-color:#3f51b5}.pin>#sliderKnob>#sliderKnobInner::before{content:"";position:absolute;top:0;left:0;width:26px;height:26px;margin-left:3px;border-radius:50% 50% 50% 0;-webkit-transform:rotate(-45deg) scale(0) translate(0);transform:rotate(-45deg) scale(0) translate(0)}#sliderKnobInner::before,#sliderKnobInner::after{transition:-webkit-transform .2s ease,background-color .18s ease;transition:transform .2s ease,background-color .18s ease}.pin.ring>#sliderKnob>#sliderKnobInner::before{background-color:#c8c8c8}.pin.expand>#sliderKnob>#sliderKnobInner::before{-webkit-transform:rotate(-45deg) scale(1) translate(17px,-17px);transform:rotate(-45deg) scale(1) translate(17px,-17px)}.pin>#sliderKnob>#sliderKnobInner::after{content:attr(value);position:absolute;top:0;left:0;width:32px;height:26px;text-align:center;color:#fff;font-size:10px;-webkit-transform:scale(0) translate(0);transform:scale(0) translate(0)}.pin.expand>#sliderKnob>#sliderKnobInner::after{-webkit-transform:scale(1) translate(0,-17px);transform:scale(1) translate(0,-17px)}.slider-input{width:40px;float:right;overflow:hidden}.slider-input::shadow input{text-align:center}#sliderContainer.disabled{pointer-events:none}.disabled>#sliderKnob>#sliderKnobInner{width:8px;height:8px;background-color:#c8c8c8}.disabled.ring>#sliderKnob>#sliderKnobInner{background-color:transparent}#sliderContainer.disabled #sliderBar::shadow #activeProgress{background-color:#c8c8c8}</style><template if="{{!disabled}}"><core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys><core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys></template><div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}"><div class="bar-container"><paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryprogress="{{secondaryProgress}}" on-down="{{bardown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress></div><template if="{{snaps && !disabled}}"><div class="slider-markers" horizontal="" layout=""><template repeat="{{markers}}"><div flex="" class="slider-marker"></div></template></div></template><div id="sliderKnob" on-down="{{knobdown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}" on-transitionend="{{knobTransitionEnd}}" center-justified="" center="" horizontal="" layout=""><div id="sliderKnobInner" value="{{immediateValue}}"></div></div></div><template if="{{editable}}"><paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input></template></template><script>Polymer("paper-slider",{snaps:false,pin:false,disabled:false,secondaryProgress:0,editable:false,maxMarkers:100,dragging:false,observe:{"step snaps":"update"},ready:function(){this.update()},update:function(){this.positionKnob(this.calcRatio(this.value));this.updateMarkers()},minChanged:function(){this.update();this.setAttribute("aria-valuemin",this.min)},maxChanged:function(){this.update();this.setAttribute("aria-valuemax",this.max)},valueChanged:function(){this.update();this.setAttribute("aria-valuenow",this.value);this.fire("core-change")},disabledChanged:function(){if(this.disabled){this.removeAttribute("tabindex")}else{this.tabIndex=0}},immediateValueChanged:function(){if(!this.dragging){this.value=this.immediateValue}this.fire("immediate-value-change")},expandKnob:function(){this.expand=true},resetKnob:function(){this.expandJob&&this.expandJob.stop();this.expand=false},positionKnob:function(ratio){this.immediateValue=this.calcStep(this.calcKnobPosition(ratio))||0;this._ratio=this.snaps?this.calcRatio(this.immediateValue):ratio;this.$.sliderKnob.style.left=this._ratio*100+"%"},inputChange:function(){this.value=this.$.input.value;this.fire("change")},calcKnobPosition:function(ratio){return(this.max-this.min)*ratio+this.min},trackStart:function(e){this._w=this.$.sliderBar.offsetWidth;this._x=this._ratio*this._w;this._startx=this._x||0;this._minx=-this._startx;this._maxx=this._w-this._startx;this.$.sliderKnob.classList.add("dragging");this.dragging=true;e.preventTap()},trackx:function(e){var x=Math.min(this._maxx,Math.max(this._minx,e.dx));this._x=this._startx+x;this.immediateValue=this.calcStep(this.calcKnobPosition(this._x/this._w))||0;var s=this.$.sliderKnob.style;s.transform=s.webkitTransform="translate3d("+(this.snaps?this.calcRatio(this.immediateValue)*this._w-this._startx:x)+"px, 0, 0)"},trackEnd:function(){var s=this.$.sliderKnob.style;s.transform=s.webkitTransform="";this.$.sliderKnob.classList.remove("dragging");this.dragging=false;this.resetKnob();this.value=this.immediateValue;this.fire("change")},knobdown:function(e){e.preventDefault();this.expandKnob()},bardown:function(e){e.preventDefault();this.transiting=true;this._w=this.$.sliderBar.offsetWidth;var rect=this.$.sliderBar.getBoundingClientRect();var ratio=(e.x-rect.left)/this._w;this.positionKnob(ratio);this.expandJob=this.job(this.expandJob,this.expandKnob,60);this.asyncFire("change")},knobTransitionEnd:function(e){if(e.target===this.$.sliderKnob){this.transiting=false}},updateMarkers:function(){this.markers=[];var l=(this.max-this.min)/this.step;if(!this.snaps&&l>this.maxMarkers){return}for(var i=0;i<l;i++){this.markers.push("")}},increment:function(){this.value=this.clampValue(this.value+this.step)},decrement:function(){this.value=this.clampValue(this.value-this.step)},incrementKey:function(ev,keys){if(keys.key==="end"){this.value=this.max}else{this.increment()}this.fire("change")},decrementKey:function(ev,keys){if(keys.key==="home"){this.value=this.min}else{this.decrement()}this.fire("change")}});</script></polymer-element><script>var colorPickerPrototype=Object.create(HTMLElement.prototype);colorPickerPrototype.onMouseDown=function(e){this.addEventListener("mousemove",this.onMouseMove)};colorPickerPrototype.onMouseUp=function(e){this.removeEventListener("mousemove",this.onMouseMove)};colorPickerPrototype.onMouseMove=function(e){e.preventDefault();if(this.mouseMoveIsThrottled){this.mouseMoveIsThrottled=false;this.onColorSelect(e);setTimeout(function(){this.mouseMoveIsThrottled=true}.bind(this),100)}};colorPickerPrototype.onColorSelect=function(e){if(this.context){var coords=this.relativeMouseCoordinates(e);var data=this.context.getImageData(coords.x,coords.y,1,1).data;this.setColor({r:data[0],g:data[1],b:data[2]})}};colorPickerPrototype.pickerDraw=function(){this.canvas=document.createElement("canvas");this.canvas.setAttribute("width",this.width);this.canvas.setAttribute("height",this.height);this.canvas.setAttribute("style","cursor:crosshair");this.canvas.setAttribute("class","simpleColorPicker");this.context=this.canvas.getContext("2d");var colorGradient=this.context.createLinearGradient(0,0,this.width,0);colorGradient.addColorStop(0,"rgb(255,0,0)");colorGradient.addColorStop(.16,"rgb(255,0,255)");colorGradient.addColorStop(.32,"rgb(0,0,255)");colorGradient.addColorStop(.48,"rgb(0,255,255)");colorGradient.addColorStop(.64,"rgb(0,255,0)");colorGradient.addColorStop(.8,"rgb(255,255,0)");colorGradient.addColorStop(1,"rgb(255,0,0)");this.context.fillStyle=colorGradient;this.context.fillRect(0,0,this.width,this.height);var bwGradient=this.context.createLinearGradient(0,0,0,this.height);bwGradient.addColorStop(0,"rgba(255,255,255,1)");bwGradient.addColorStop(.5,"rgba(255,255,255,0)");bwGradient.addColorStop(.5,"rgba(0,0,0,0)");bwGradient.addColorStop(1,"rgba(0,0,0,1)");this.context.fillStyle=bwGradient;this.context.fillRect(0,0,this.width,this.height)};colorPickerPrototype.setColor=function(rgb){this.color={hex:this.rgbToHex(rgb),rgb:rgb};this.setAttribute("color",this.color.hex);var event=new CustomEvent("colorselected",{detail:{rgb:this.color.rgb,hex:this.color.hex}});this.dispatchEvent(event)};colorPickerPrototype.componentToHex=function(c){var hex=c.toString(16);return hex.length==1?"0"+hex:hex};colorPickerPrototype.rgbToHex=function(color){return"#"+colorPickerPrototype.componentToHex(color.r)+colorPickerPrototype.componentToHex(color.g)+colorPickerPrototype.componentToHex(color.b)};colorPickerPrototype.relativeMouseCoordinates=function(e){var x=0,y=0;if(this.canvas){var rect=this.canvas.getBoundingClientRect();x=e.clientX-rect.left;y=e.clientY-rect.top}return{x:x,y:y}};colorPickerPrototype.createdCallback=function(e){var attrs={width:this.getAttribute("width"),height:this.getAttribute("height")};this.canvas=null;this.context=null;this.color=null;this.mouseMoveIsThrottled=true;this.width=attrs.width||300;this.height=attrs.height||300;this.shadowRoot=this.createShadowRoot();this.pickerDraw();this.shadowRoot.appendChild(this.canvas);this.addEventListener("click",this.onColorSelect);this.addEventListener("mousedown",this.onMouseDown);this.addEventListener("mouseup",this.onMouseUp)};document.registerElement("color-picker",{prototype:colorPickerPrototype});</script><polymer-element name="more-info-light" attributes="stateObj api" assetpath="polymer/more-infos/"><template><style>.brightness{margin-bottom:8px;max-height:0;overflow:hidden;transition:max-height .5s ease-in}.brightness paper-slider::shadow #sliderKnobInner,.brightness paper-slider::shadow #sliderBar::shadow #activeProgress{background-color:#039be5}color-picker{display:block;width:350px;margin:0 auto;max-height:0;overflow:hidden;transition:max-height .5s ease-in .3s}:host-context(.has-brightness) .brightness{max-height:500px}:host-context(.has-xy_color) color-picker{max-height:500px}</style><div><div class="brightness"><div center="" horizontal="" layout=""><div>Brightness</div><paper-slider max="255" flex="" id="brightness" on-core-change="{{brightnessSliderChanged}}"></paper-slider></div></div><color-picker id="colorpicker" width="350" height="200"></color-picker></div></template><script>Polymer("more-info-light",{ignoreNextBrightnessEvent:false,observe:{"stateObj.attributes.brightness":"brightnessChanged","stateObj.attributes.xy_color":"colorChanged"},brightnessChanged:function(oldVal,newVal){this.ignoreNextBrightnessEvent=true;this.$.brightness.value=newVal},domReady:function(){this.$.colorpicker.addEventListener("colorselected",this.colorPicked.bind(this))},brightnessSliderChanged:function(ev,details,target){if(this.ignoreNextBrightnessEvent){this.ignoreNextBrightnessEvent=false;return}var bri=parseInt(target.value);if(isNaN(bri))return;if(bri===0){this.api.turn_off(this.stateObj.entity_id)}else{this.api.call_service("light","turn_on",{entity_id:this.stateObj.entity_id,brightness:bri})}},colorPicked:function(ev){var color=ev.detail.rgb;this.api.call_service("light","turn_on",{entity_id:this.stateObj.entity_id,rgb_color:[color.r,color.g,color.b]})}});</script></polymer-element><polymer-element name="more-info-group" attributes="stateObj api" assetpath="polymer/more-infos/"><template><style>.child-card{margin-bottom:8px}.child-card:last-child{margin-bottom:0}</style><template repeat="{{states as state}}"><state-card-content stateobj="{{state}}" api="{{api}}" class="child-card"></state-card-content></template></template><script>Polymer("more-info-group",{observe:{"stateObj.attributes.entity_id":"updateStates"},updateStates:function(){this.states=this.api.getStates(this.stateObj.attributes.entity_id)}});</script></polymer-element><polymer-element name="more-info-sun" attributes="stateObj api" assetpath="polymer/more-infos/"><template><core-style ref="ha-key-value-table"></core-style><div layout="" vertical="" id="sunData"><div layout="" justified="" horizontal="" class="data-entry" id="rising"><div class="key">
         Rising {{stateObj.attributes.next_rising | relativeHATime}}
-      </div><div class="data">
+      </div><div class="value">
         {{stateObj.attributes.next_rising | HATimeStripDate}}
-      </div></div><div layout="" justified="" horizontal="" class="data-entry" id="setting"><div>
+      </div></div><div layout="" justified="" horizontal="" class="data-entry" id="setting"><div class="key">
         Setting {{stateObj.attributes.next_setting | relativeHATime}}
-      </div><div class="data">
+      </div><div class="value">
         {{stateObj.attributes.next_setting | HATimeStripDate}}
       </div></div></div></template><script>Polymer("more-info-sun",{stateObjChanged:function(){var rising=ha.util.parseTime(this.stateObj.attributes.next_rising);var setting=ha.util.parseTime(this.stateObj.attributes.next_setting);if(rising>setting){this.$.sunData.appendChild(this.$.rising)}else{this.$.sunData.appendChild(this.$.setting)}}});</script></polymer-element><polymer-element name="more-info-configurator" attributes="stateObj api" assetpath="polymer/more-infos/"><template><style>p{margin:8px 0}p>img{max-width:100%}p.center{text-align:center}p.error{color:#C62828}p.submit{text-align:center;height:41px}p.submit paper-spinner{margin-right:16px}p.submit span{display:inline-block;vertical-align:top;margin-top:6px}</style><div layout="" vertical=""><template if="{{stateObj.state == 'configure'}}"><p hidden?="{{!stateObj.attributes.description}}">
         {{stateObj.attributes.description}}
@@ -90,7 +96,7 @@ b.events&&Object.keys(a).length>0&&console.log("[%s] addHostListeners:",this.loc
         {{stateObj.attributes.errors}}
       </p><p class="center" hidden?="{{!stateObj.attributes.description_image}}"><img src="{{stateObj.attributes.description_image}}"></p><p class="submit"><paper-button raised="" on-click="{{submitClicked}}" hidden?="{{action !== 'display'}}">
           {{stateObj.attributes.submit_caption || "Set configuration"}}
-        </paper-button><span hidden?="{{action !== 'configuring'}}"><paper-spinner active="true"></paper-spinner><span>Configuring…</span></span></p></template></div></template><script>Polymer("more-info-configurator",{action:"display",submitClicked:function(){this.action="configuring";var data={configure_id:this.stateObj.attributes.configure_id};this.api.call_service("configurator","configure",data,{success:function(){this.action="display";this.api.fetchAll()}.bind(this),error:function(){this.action="display"}.bind(this)})}});</script></polymer-element><polymer-element name="more-info-content" attributes="api stateObj" assetpath="polymer/more-infos/"><template><style>:host{display:block}</style><div id="moreInfo" class="{{classNames}}"></div></template><script>Polymer("more-info-content",{classNames:"",observe:{"stateObj.attributes":"stateAttributesChanged"},stateObjChanged:function(){while(this.$.moreInfo.lastChild){this.$.moreInfo.removeChild(this.$.moreInfo.lastChild)}var moreInfo=document.createElement("more-info-"+this.stateObj.moreInfoType);moreInfo.api=this.api;moreInfo.stateObj=this.stateObj;this.$.moreInfo.appendChild(moreInfo)},stateAttributesChanged:function(oldVal,newVal){this.classNames=Object.keys(newVal).map(function(key){return"has-"+key}).join(" ")}});</script></polymer-element><polymer-element name="more-info-dialog" attributes="api" assetpath="polymer/dialogs/"><template><ha-action-dialog id="dialog"><style>.title-card{margin-bottom:24px}</style><div><state-card-content stateobj="{{stateObj}}" api="{{api}}" class="title-card"></state-card-content><more-info-content stateobj="{{stateObj}}" api="{{api}}"></more-info-content></div><paper-button dismissive="" on-click="{{editClicked}}">Debug</paper-button><paper-button affirmative="">Dismiss</paper-button></ha-action-dialog></template><script>Polymer("more-info-dialog",{stateObj:{},observe:{"stateObj.attributes":"reposition"},reposition:function(oldVal,newVal){if(this.$.dialog.opened){this.job("resizeAfterLayoutChange",function(){this.$.dialog.resizeHandler()}.bind(this),1e3)}},show:function(stateObj){this.stateObj=stateObj;this.job("showDialogAfterRender",function(){this.$.dialog.toggle()}.bind(this))},editClicked:function(ev){this.api.showEditStateDialog(this.stateObj.entity_id)}});</script></polymer-element><script>var ha={};ha.util={};ha.util.parseTime=function(timeString){return moment(timeString,"HH:mm:ss DD-MM-YYYY")};ha.util.relativeTime=function(timeString){return ha.util.parseTime(timeString).fromNow()};PolymerExpressions.prototype.relativeHATime=function(timeString){return ha.util.relativeTime(timeString)};PolymerExpressions.prototype.HATimeStripDate=function(timeString){return(timeString||"").split(" ")[0]};</script><polymer-element name="home-assistant-api" attributes="auth" assetpath="polymer/"><template><paper-toast id="toast" role="alert" text=""></paper-toast><event-fire-dialog id="eventDialog" api="{{api}}"></event-fire-dialog><service-call-dialog id="serviceDialog" api="{{api}}"></service-call-dialog><state-set-dialog id="stateSetDialog" api="{{api}}"></state-set-dialog><more-info-dialog id="moreInfoDialog" api="{{api}}"></more-info-dialog></template><script>var domainsWithCard=["thermostat","configurator"];var domainsWithMoreInfo=["light","group","sun","configurator"];State=function(json,api){this.api=api;this.attributes=json.attributes;this.entity_id=json.entity_id;var parts=json.entity_id.split(".");this.domain=parts[0];this.object_id=parts[1];if(this.attributes.friendly_name){this.entityDisplay=this.attributes.friendly_name}else{this.entityDisplay=this.object_id.replace(/_/g," ")}this.state=json.state;this.last_changed=json.last_changed};Object.defineProperties(State.prototype,{stateDisplay:{get:function(){var state=this.state.replace(/_/g," ");if(this.attributes.unit_of_measurement){return state+" "+this.attributes.unit_of_measurement}else{return state}}},isCustomGroup:{get:function(){return this.domain=="group"&&!this.attributes.auto}},canToggle:{get:function(){return this.domain=="group"&&(this.state=="on"||this.state=="off")||this.api.hasService(this.domain,"turn_on")}},cardType:{get:function(){if(domainsWithCard.indexOf(this.domain)!==-1){return this.domain}else if(this.canToggle){return"toggle"}else{return"display"}}},moreInfoType:{get:function(){if(domainsWithMoreInfo.indexOf(this.domain)!==-1){return this.domain}else{return"default"}}},relativeLastChanged:{get:function(){return ha.util.relativeTime(this.last_changed)}}});Polymer("home-assistant-api",{auth:"not-set",states:[],services:[],events:[],stateUpdateTimeout:null,created:function(){this.api=this;this.turn_on=this.turn_on.bind(this);this.turn_off=this.turn_off.bind(this)},removeState:function(entityId){var state=this.getState(entityId);if(state!==null){this.states.splice(this.states.indexOf(state),1)}},getState:function(entityId){var found=this.states.filter(function(state){return state.entity_id==entityId},this);return found.length>0?found[0]:null},getStates:function(entityIds){var states=[];var state;for(var i=0;i<entityIds.length;i++){state=this.getState(entityIds[i]);if(state!==null){states.push(state)}}return states},getEntityIDs:function(){return this.states.map(function(state){return state.entity_id})},hasService:function(domain,service){var found=this.services.filter(function(serv){return serv.domain==domain&&serv.services.indexOf(service)!==-1},this);return found.length>0},getCustomGroups:function(){return this.states.filter(function(state){return state.isCustomGroup})},_laterFetchStates:function(){if(this.stateUpdateTimeout){clearTimeout(this.stateUpdateTimeout)}this.stateUpdateTimeout=setTimeout(this.fetchStates.bind(this),6e4)},_sortStates:function(){this.states.sort(function(one,two){if(one.entity_id>two.entity_id){return 1}else if(one.entity_id<two.entity_id){return-1}else{return 0}})},_pushNewState:function(new_state){if(this.__pushNewState(new_state)){this._sortStates()}this.fire("states-updated")},__pushNewState:function(new_state){var curState=this.getState(new_state.entity_id);if(curState===null){this.states.push(new State(new_state,this));return true}else{curState.attributes=new_state.attributes;curState.last_changed=new_state.last_changed;curState.state=new_state.state;return false}},_pushNewStates:function(newStates,removeNonPresent){removeNonPresent=!!removeNonPresent;var currentEntityIds=removeNonPresent?this.getEntityIDs():[];var hasNew=newStates.reduce(function(hasNew,newState){var isNewState=this.__pushNewState(newState);if(isNewState){return true}else if(removeNonPresent){currentEntityIds.splice(currentEntityIds.indexOf(newState.entity_id),1)}return hasNew}.bind(this),false);currentEntityIds.forEach(function(entityId){this.removeState(entityId)}.bind(this));if(hasNew){this._sortStates()}this.fire("states-updated")},fetchAll:function(){this.fetchStates();this.fetchServices();this.fetchEvents()},fetchState:function(entityId){var successStateUpdate=function(new_state){this._pushNewState(new_state)};this.call_api("GET","states/"+entityId,null,successStateUpdate.bind(this))},fetchStates:function(onSuccess,onError){var successStatesUpdate=function(newStates){this._pushNewStates(newStates,true);this._laterFetchStates();if(onSuccess){onSuccess(this.states)}};this.call_api("GET","states",null,successStatesUpdate.bind(this),onError)},fetchEvents:function(onSuccess,onError){var successEventsUpdated=function(events){this.events=events;this.fire("events-updated");if(onSuccess){onSuccess(events)}};this.call_api("GET","events",null,successEventsUpdated.bind(this),onError)},fetchServices:function(onSuccess,onError){var successServicesUpdated=function(services){this.services=services;this.fire("services-updated");if(onSuccess){onSuccess(this.services)}};this.call_api("GET","services",null,successServicesUpdated.bind(this),onError)},turn_on:function(entity_id,options){this.call_service("homeassistant","turn_on",{entity_id:entity_id},options)},turn_off:function(entity_id,options){this.call_service("homeassistant","turn_off",{entity_id:entity_id},options)},set_state:function(entity_id,state,attributes){var payload={state:state};if(attributes){payload.attributes=attributes}var successToast=function(new_state){this.showToast("State of "+entity_id+" set to "+state+".");this._pushNewState(new_state)};this.call_api("POST","states/"+entity_id,payload,successToast.bind(this))},call_service:function(domain,service,parameters,options){parameters=parameters||{};options=options||{};var successHandler=function(changed_states){if(service=="turn_on"&&parameters.entity_id){this.showToast("Turned on "+parameters.entity_id+".")}else if(service=="turn_off"&&parameters.entity_id){this.showToast("Turned off "+parameters.entity_id+".")}else{this.showToast("Service "+domain+"/"+service+" called.")}this._pushNewStates(changed_states);if(options.success){options.success()}};var errorHandler=function(error_data){if(options.error){options.error(error_data)}};this.call_api("POST","services/"+domain+"/"+service,parameters,successHandler.bind(this),errorHandler)},fire_event:function(eventType,eventData){eventData=eventData||{};var successToast=function(){this.showToast("Event "+eventType+" fired.")};this.call_api("POST","events/"+eventType,eventData,successToast.bind(this))},call_api:function(method,path,parameters,onSuccess,onError){var url="/api/"+path;if(false){if(path==="states"||path==="services"||path==="events"){url="/demo/"+path+".json"}else{return}}var req=new XMLHttpRequest;req.open(method,url,true);req.setRequestHeader("X-HA-access",this.auth);req.onreadystatechange=function(){if(req.readyState==4){if(req.status>199&&req.status<300){if(onSuccess){onSuccess(JSON.parse(req.responseText))}}else{if(onError){var data=req.responseText?JSON.parse(req.responseText):{};onError(data)}}}}.bind(this);if(parameters){req.send(JSON.stringify(parameters))}else{req.send()}},showmoreInfoDialog:function(entityId){this.$.moreInfoDialog.show(this.getState(entityId))},showEditStateDialog:function(entityId){var state=this.getState(entityId);this.showSetStateDialog(entityId,state.state,state.attributes)},showSetStateDialog:function(entityId,state,stateAttributes){entityId=entityId||"";state=state||"";stateAttributes=stateAttributes||null;this.$.stateSetDialog.show(entityId,state,stateAttributes)},showFireEventDialog:function(eventType,eventData){eventType=eventType||"";eventData=eventData||"";this.$.eventDialog.show(eventType,eventData)},showCallServiceDialog:function(domain,service,serviceData){domain=domain||"";service=service||"";serviceData=serviceData||"";this.$.serviceDialog.show(domain,service,serviceData)},showToast:function(message){this.$.toast.text=message;this.$.toast.show()},logOut:function(){this.auth=""}});</script></polymer-element></div>
+        </paper-button><span hidden?="{{action !== 'configuring'}}"><paper-spinner active="true"></paper-spinner><span>Configuring…</span></span></p></template></div></template><script>Polymer("more-info-configurator",{action:"display",submitClicked:function(){this.action="configuring";var data={configure_id:this.stateObj.attributes.configure_id};this.api.call_service("configurator","configure",data,{success:function(){this.action="display";this.api.fetchAll()}.bind(this),error:function(){this.action="display"}.bind(this)})}});</script></polymer-element><polymer-element name="more-info-content" attributes="api stateObj" assetpath="polymer/more-infos/"><template><style>:host{display:block}</style><div id="moreInfo" class="{{classNames}}"></div></template><script>Polymer("more-info-content",{classNames:"",observe:{"stateObj.attributes":"stateAttributesChanged"},stateObjChanged:function(){while(this.$.moreInfo.lastChild){this.$.moreInfo.removeChild(this.$.moreInfo.lastChild)}var moreInfo=document.createElement("more-info-"+this.stateObj.moreInfoType);moreInfo.api=this.api;moreInfo.stateObj=this.stateObj;this.$.moreInfo.appendChild(moreInfo)},stateAttributesChanged:function(oldVal,newVal){this.classNames=Object.keys(newVal).map(function(key){return"has-"+key}).join(" ")}});</script></polymer-element><polymer-element name="more-info-dialog" attributes="api" assetpath="polymer/dialogs/"><template><ha-action-dialog id="dialog"><style>.title-card{margin-bottom:24px}</style><div><state-card-content stateobj="{{stateObj}}" api="{{api}}" class="title-card"></state-card-content><more-info-content stateobj="{{stateObj}}" api="{{api}}"></more-info-content></div><paper-button dismissive="" on-click="{{editClicked}}">Debug</paper-button><paper-button affirmative="">Dismiss</paper-button></ha-action-dialog></template><script>Polymer("more-info-dialog",{stateObj:{},observe:{"stateObj.attributes":"reposition"},reposition:function(oldVal,newVal){if(this.$.dialog.opened){this.job("resizeAfterLayoutChange",function(){this.$.dialog.resizeHandler()}.bind(this),1e3)}},show:function(stateObj){this.stateObj=stateObj;this.job("showDialogAfterRender",function(){this.$.dialog.toggle()}.bind(this))},editClicked:function(ev){this.api.showEditStateDialog(this.stateObj.entity_id)}});</script></polymer-element><script>var ha={};ha.util={};ha.util.parseTime=function(timeString){return moment(timeString,"HH:mm:ss DD-MM-YYYY")};ha.util.relativeTime=function(timeString){return ha.util.parseTime(timeString).fromNow()};PolymerExpressions.prototype.relativeHATime=function(timeString){return ha.util.relativeTime(timeString)};PolymerExpressions.prototype.HATimeStripDate=function(timeString){return(timeString||"").split(" ")[0]};</script><polymer-element name="home-assistant-api" attributes="auth" assetpath="polymer/"><template><paper-toast id="toast" role="alert" text=""></paper-toast><event-fire-dialog id="eventDialog" api="{{api}}"></event-fire-dialog><service-call-dialog id="serviceDialog" api="{{api}}"></service-call-dialog><state-set-dialog id="stateSetDialog" api="{{api}}"></state-set-dialog><more-info-dialog id="moreInfoDialog" api="{{api}}"></more-info-dialog></template><script>var domainsWithCard=["thermostat","configurator"];var domainsWithMoreInfo=["light","group","sun","configurator"];State=function(json,api){this.api=api;this.attributes=json.attributes;this.entity_id=json.entity_id;var parts=json.entity_id.split(".");this.domain=parts[0];this.object_id=parts[1];if(this.attributes.friendly_name){this.entityDisplay=this.attributes.friendly_name}else{this.entityDisplay=this.object_id.replace(/_/g," ")}this.state=json.state;this.last_changed=json.last_changed};Object.defineProperties(State.prototype,{stateDisplay:{get:function(){var state=this.state.replace(/_/g," ");if(this.attributes.unit_of_measurement){return state+" "+this.attributes.unit_of_measurement}else{return state}}},isCustomGroup:{get:function(){return this.domain=="group"&&!this.attributes.auto}},canToggle:{get:function(){return this.domain=="group"&&(this.state=="on"||this.state=="off")||this.api.hasService(this.domain,"turn_on")}},cardType:{get:function(){if(domainsWithCard.indexOf(this.domain)!==-1){return this.domain}else if(this.canToggle){return"toggle"}else{return"display"}}},moreInfoType:{get:function(){if(domainsWithMoreInfo.indexOf(this.domain)!==-1){return this.domain}else{return"default"}}},relativeLastChanged:{get:function(){return ha.util.relativeTime(this.last_changed)}}});Polymer("home-assistant-api",{auth:"not-set",states:[],services:[],events:[],stateUpdateTimeout:null,created:function(){this.api=this;this.turn_on=this.turn_on.bind(this);this.turn_off=this.turn_off.bind(this)},removeState:function(entityId){var state=this.getState(entityId);if(state!==null){this.states.splice(this.states.indexOf(state),1)}},getState:function(entityId){var found=this.states.filter(function(state){return state.entity_id==entityId},this);return found.length>0?found[0]:null},getStates:function(entityIds){var states=[];var state;for(var i=0;i<entityIds.length;i++){state=this.getState(entityIds[i]);if(state!==null){states.push(state)}}return states},getEntityIDs:function(){return this.states.map(function(state){return state.entity_id})},hasService:function(domain,service){var found=this.services.filter(function(serv){return serv.domain==domain&&serv.services.indexOf(service)!==-1},this);return found.length>0},hasComponent:function(component){return this.components.indexOf(component)!==-1},getCustomGroups:function(){return this.states.filter(function(state){return state.isCustomGroup})},_laterFetchStates:function(){if(this.stateUpdateTimeout){clearTimeout(this.stateUpdateTimeout)}this.stateUpdateTimeout=setTimeout(this.fetchStates.bind(this),6e4)},_sortStates:function(){this.states.sort(function(one,two){if(one.entity_id>two.entity_id){return 1}else if(one.entity_id<two.entity_id){return-1}else{return 0}})},_pushNewState:function(new_state){if(this.__pushNewState(new_state)){this._sortStates()}this.fire("states-updated")},__pushNewState:function(new_state){var curState=this.getState(new_state.entity_id);if(curState===null){this.states.push(new State(new_state,this));return true}else{curState.attributes=new_state.attributes;curState.last_changed=new_state.last_changed;curState.state=new_state.state;return false}},_pushNewStates:function(newStates,removeNonPresent){removeNonPresent=!!removeNonPresent;var currentEntityIds=removeNonPresent?this.getEntityIDs():[];var hasNew=newStates.reduce(function(hasNew,newState){var isNewState=this.__pushNewState(newState);if(isNewState){return true}else if(removeNonPresent){currentEntityIds.splice(currentEntityIds.indexOf(newState.entity_id),1)}return hasNew}.bind(this),false);currentEntityIds.forEach(function(entityId){this.removeState(entityId)}.bind(this));if(hasNew){this._sortStates()}this.fire("states-updated")},fetchAll:function(){this.fetchStates();this.fetchServices();this.fetchEvents();this.fetchComponents()},fetchState:function(entityId){var successStateUpdate=function(new_state){this._pushNewState(new_state)};this.call_api("GET","states/"+entityId,null,successStateUpdate.bind(this))},fetchStates:function(onSuccess,onError){var successStatesUpdate=function(newStates){this._pushNewStates(newStates,true);this._laterFetchStates();if(onSuccess){onSuccess(this.states)}};this.call_api("GET","states",null,successStatesUpdate.bind(this),onError)},fetchEvents:function(onSuccess,onError){var successEventsUpdated=function(events){this.events=events;this.fire("events-updated");if(onSuccess){onSuccess(events)}};this.call_api("GET","events",null,successEventsUpdated.bind(this),onError)},fetchServices:function(onSuccess,onError){var successServicesUpdated=function(services){this.services=services;this.fire("services-updated");if(onSuccess){onSuccess(this.services)}};this.call_api("GET","services",null,successServicesUpdated.bind(this),onError)},fetchComponents:function(onSuccess,onError){var successComponentsUpdated=function(components){this.components=components;this.fire("components-updated");if(onSuccess){onSuccess(this.components)}};this.call_api("GET","components",null,successComponentsUpdated.bind(this),onError)},turn_on:function(entity_id,options){this.call_service("homeassistant","turn_on",{entity_id:entity_id},options)},turn_off:function(entity_id,options){this.call_service("homeassistant","turn_off",{entity_id:entity_id},options)},set_state:function(entity_id,state,attributes){var payload={state:state};if(attributes){payload.attributes=attributes}var successToast=function(new_state){this.showToast("State of "+entity_id+" set to "+state+".");this._pushNewState(new_state)};this.call_api("POST","states/"+entity_id,payload,successToast.bind(this))},call_service:function(domain,service,parameters,options){parameters=parameters||{};options=options||{};var successHandler=function(changed_states){if(service=="turn_on"&&parameters.entity_id){this.showToast("Turned on "+parameters.entity_id+".")}else if(service=="turn_off"&&parameters.entity_id){this.showToast("Turned off "+parameters.entity_id+".")}else{this.showToast("Service "+domain+"/"+service+" called.")}this._pushNewStates(changed_states);if(options.success){options.success()}};var errorHandler=function(error_data){if(options.error){options.error(error_data)}};this.call_api("POST","services/"+domain+"/"+service,parameters,successHandler.bind(this),errorHandler)},fire_event:function(eventType,eventData){eventData=eventData||{};var successToast=function(){this.showToast("Event "+eventType+" fired.")};this.call_api("POST","events/"+eventType,eventData,successToast.bind(this))},call_api:function(method,path,parameters,onSuccess,onError){var url="/api/"+path;if(false){if(path==="states"||path==="services"||path==="events"){url="/demo/"+path+".json"}else{return}}var req=new XMLHttpRequest;req.open(method,url,true);req.setRequestHeader("X-HA-access",this.auth);req.onreadystatechange=function(){if(req.readyState==4){if(req.status>199&&req.status<300){if(onSuccess){onSuccess(JSON.parse(req.responseText))}}else{if(onError){var data=req.responseText?JSON.parse(req.responseText):{};onError(data)}}}}.bind(this);if(parameters){req.send(JSON.stringify(parameters))}else{req.send()}},showmoreInfoDialog:function(entityId){this.$.moreInfoDialog.show(this.getState(entityId))},showEditStateDialog:function(entityId){var state=this.getState(entityId);this.showSetStateDialog(entityId,state.state,state.attributes)},showSetStateDialog:function(entityId,state,stateAttributes){entityId=entityId||"";state=state||"";stateAttributes=stateAttributes||null;this.$.stateSetDialog.show(entityId,state,stateAttributes)},showFireEventDialog:function(eventType,eventData){eventType=eventType||"";eventData=eventData||"";this.$.eventDialog.show(eventType,eventData)},showCallServiceDialog:function(domain,service,serviceData){domain=domain||"";service=service||"";serviceData=serviceData||"";this.$.serviceDialog.show(domain,service,serviceData)},showToast:function(message){this.$.toast.text=message;this.$.toast.show()},logOut:function(){this.auth=""}});</script></polymer-element></div>
 <div hidden><polymer-element name="home-assistant-style" assetpath="polymer/resources/"><template><core-style id="ha-dialog">
       :host {
         font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
@@ -143,6 +149,23 @@ b.events&&Object.keys(a).length>0&&console.log("[%s] addHostListeners:",this.loc
       html /deep/ .ha-form paper-input:first-child {
         padding-top: 0;
       }
+    </core-style><core-style id="ha-key-value-table">
+      .data-entry {
+        margin-bottom: 8px;
+      }
+
+      .data-entry:last-child {
+        margin-bottom: 0;
+      }
+
+      .data-entry .key {
+        margin-right: 8px;
+      }
+
+      .data-entry .value {
+        text-align: right;
+        word-break: break-all;
+      }    
     </core-style></template><script>Polymer("home-assistant-style");</script></polymer-element></div>
 
-<polymer-element name="splash-login" attributes="auth" assetpath="polymer/"><template><style>:host{font-family:RobotoDraft,'Helvetica Neue',Helvetica,Arial}paper-input{display:block}.login paper-button{margin-left:242px}.login .interact{height:125px}#validatebox{text-align:center}#validatemessage{margin-top:10px}</style><home-assistant-style></home-assistant-style><home-assistant-api auth="{{auth}}" id="api"></home-assistant-api><div layout="" horizontal="" center="" fit="" class="login" id="splash"><div layout="" vertical="" center="" flex=""><img src="/static/favicon-192x192.png"><h1>Home Assistant</h1><a href="polymer/#" id="hideKeyboardOnFocus"></a><div class="interact" layout="" vertical=""><div id="loginform"><paper-input-decorator label="Password" id="passwordDecorator"><input is="core-input" type="password" id="passwordInput" value="{{auth}}" on-keyup="{{passwordKeyup}}" autofocus></paper-input-decorator><paper-button on-click="{{validatePassword}}">Log In</paper-button></div><div id="validatebox" hidden><paper-spinner active="true"></paper-spinner><br><div id="validatemessage">Validating password...</div></div></div></div></div><home-assistant-main api="{{api}}" hidden id="main"></home-assistant-main></template><script>Polymer("splash-login",{state:"no_auth",auth:"",ready:function(){this.api=this.$.api},domReady:function(){document.getElementById("init").remove();if(this.auth){this.validatePassword()}},authChanged:function(oldVal,newVal){if(newVal===""&&this.state==="valid_auth"){this.state="no_auth"}},stateChanged:function(oldVal,newVal){if(newVal==="no_auth"){this.$.loginform.removeAttribute("hidden");this.$.validatebox.setAttribute("hidden",null);this.$.validatemessage.innerHTML="Validating password...";this.$.splash.removeAttribute("hidden");this.$.main.setAttribute("hidden",null)}else{this.$.splash.setAttribute("hidden",null);this.$.main.removeAttribute("hidden")}},passwordKeyup:function(ev){if(ev.keyCode===13){this.validatePassword()}else if(this.$.passwordDecorator.isInvalid){this.$.passwordDecorator.isInvalid=false}},validatePassword:function(){this.$.loginform.setAttribute("hidden",null);this.$.validatebox.removeAttribute("hidden");this.$.hideKeyboardOnFocus.focus();var passwordValid=function(result){this.$.validatemessage.innerHTML="Loading data...";this.api.fetchEvents();this.api.fetchStates(function(){this.state="valid_auth"}.bind(this))};var passwordInvalid=function(result){if(result&&result.message){this.$.passwordDecorator.error=result.message}else{this.$.passwordDecorator.error="Unexpected result from API"}this.auth=null;this.$.passwordDecorator.isInvalid=true;this.$.loginform.removeAttribute("hidden");this.$.validatebox.setAttribute("hidden",null);this.$.passwordInput.focus()};this.api.fetchServices(passwordValid.bind(this),passwordInvalid.bind(this))}});</script></polymer-element>
+<polymer-element name="splash-login" attributes="auth" assetpath="polymer/"><template><style>:host{font-family:RobotoDraft,'Helvetica Neue',Helvetica,Arial}paper-input{display:block}.login paper-button{margin-left:242px}.login .interact{height:125px}#validatebox{text-align:center}#validatemessage{margin-top:10px}</style><home-assistant-style></home-assistant-style><home-assistant-api auth="{{auth}}" id="api"></home-assistant-api><div layout="" horizontal="" center="" fit="" class="login" id="splash"><div layout="" vertical="" center="" flex=""><img src="/static/favicon-192x192.png"><h1>Home Assistant</h1><a href="polymer/#" id="hideKeyboardOnFocus"></a><div class="interact" layout="" vertical=""><div id="loginform"><paper-input-decorator label="Password" id="passwordDecorator"><input is="core-input" type="password" id="passwordInput" value="{{auth}}" on-keyup="{{passwordKeyup}}" autofocus></paper-input-decorator><paper-button on-click="{{validatePassword}}">Log In</paper-button></div><div id="validatebox" hidden><paper-spinner active="true"></paper-spinner><br><div id="validatemessage">Validating password...</div></div></div></div></div><home-assistant-main api="{{api}}" hidden id="main"></home-assistant-main></template><script>Polymer("splash-login",{state:"no_auth",auth:"",ready:function(){this.api=this.$.api},domReady:function(){document.getElementById("init").remove();if(this.auth){this.validatePassword()}},authChanged:function(oldVal,newVal){if(newVal===""&&this.state==="valid_auth"){this.state="no_auth"}},stateChanged:function(oldVal,newVal){if(newVal==="no_auth"){this.$.loginform.removeAttribute("hidden");this.$.validatebox.setAttribute("hidden",null);this.$.validatemessage.innerHTML="Validating password...";this.$.splash.removeAttribute("hidden");this.$.main.setAttribute("hidden",null)}else{this.$.splash.setAttribute("hidden",null);this.$.main.removeAttribute("hidden")}},passwordKeyup:function(ev){if(ev.keyCode===13){this.validatePassword()}else if(this.$.passwordDecorator.isInvalid){this.$.passwordDecorator.isInvalid=false}},validatePassword:function(){this.$.loginform.setAttribute("hidden",null);this.$.validatebox.removeAttribute("hidden");this.$.hideKeyboardOnFocus.focus();var passwordValid=function(result){this.$.validatemessage.innerHTML="Loading data…";this.api.fetchEvents();this.api.fetchComponents();this.api.fetchStates(function(){this.state="valid_auth"}.bind(this))};var passwordInvalid=function(result){if(result&&result.message){this.$.passwordDecorator.error=result.message}else{this.$.passwordDecorator.error="Unexpected result from API"}this.auth=null;this.$.passwordDecorator.isInvalid=true;this.$.loginform.removeAttribute("hidden");this.$.validatebox.setAttribute("hidden",null);this.$.passwordInput.focus()};this.api.fetchServices(passwordValid.bind(this),passwordInvalid.bind(this))}});</script></polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/components/loading-box.html b/homeassistant/components/frontend/www_static/polymer/components/loading-box.html
new file mode 100644
index 00000000000..5049ec20054
--- /dev/null
+++ b/homeassistant/components/frontend/www_static/polymer/components/loading-box.html
@@ -0,0 +1,25 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
+
+<polymer-element name="loading-box" attributes="text">
+  <template>
+    <style>
+      .text {
+        display: inline-block;
+        line-height: 28px;
+        vertical-align: top;
+        margin-left: 8px;
+      }
+    </style>
+    <div layout='horizontal'>
+      <paper-spinner active="true"></paper-spinner>
+      <div class='text'>{{text}}…</div>
+    </div>
+  </template>
+
+  <script>
+  Polymer({
+    text: "Loading"
+  });
+  </script>
+</polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/components/recent-states.html b/homeassistant/components/frontend/www_static/polymer/components/recent-states.html
index 60b6757b73b..79689349cc7 100644
--- a/homeassistant/components/frontend/www_static/polymer/components/recent-states.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/recent-states.html
@@ -1,29 +1,46 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/core-style/core-style.html">
+<link rel="import" href="./loading-box.html">
 
 <polymer-element name="recent-states" attributes="api stateObj">
   <template>
-    <style>
+    <core-style ref='ha-data-table'></core-style>
 
-    </style>
-
-    <h3>State history</h3>
-
-    <template repeat="{{recentStates as state}}">
-      <p>{{state.state}} - {{state.last_changed | relativeHATime}}</p>
+    <template if="{{recentStates === null}}">
+      <loading-box text="Loading recent states"></loading-box>
     </template>
 
+    <template if="{{recentStates !== null}}">
+      <div layout vertical>
+        <template repeat="{{recentStates as state}}">
+          <div layout justified horizontal class='data-entry'>
+            <div>
+              {{state.state}}
+            </div>
+            <div class='data'>
+              {{state.last_changed | relativeHATime}}
+            </div>
+          </div>
+        </template>
+
+        <template if="{{recentStates.length == 0}}">
+          There are no recent states.
+        </template>
+      </div>
+    </template>
   </template>
   <script>
   Polymer({
-    recentStates: [],
+    recentStates: null,
 
     stateObjChanged: function() {
-      this.recentStates = [];
+      this.recentStates = null;
 
-      this.api.call_api('GET', 'component/recorder/' + this.stateObj.entity_id + '/last_5_states', {}, this.newStates.bind(this));
+      this.api.call_api('GET', 'history/' + this.stateObj.entity_id + '/recent_states', {}, this.newStates.bind(this));
     },
 
     newStates: function(states) {
+      // cut off the first one (which is the current)
       this.recentStates = states.slice(1);
     }
   });
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html
index abc642a92e8..3f8c1f56ad4 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html
@@ -1,22 +1,13 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/core-style/core-style.html">
 
 <link rel="import" href="../components/recent-states.html">
 
-<polymer-element name="more-info-default" attributes="stateObj">
+<polymer-element name="more-info-default" attributes="stateObj api">
 <template>
+  <core-style ref='ha-key-value-table'></core-style>
   <style>
-    .data-entry {
-      margin-bottom: 8px;
-    }
-
-    .data-entry:last-child {
-      margin-bottom: 0;
-    }
-
-    .data {
-      padding-left: 10px;
-      text-align: right;
-      word-break: break-all;
+    .data-entry .value {
       max-width: 200px;
     }
   </style>
@@ -25,24 +16,32 @@
 
     <template repeat="{{key in stateObj.attributes | getKeys}}">
       <div layout justified horizontal class='data-entry'>
-        <div>
+        <div class='key'>
           {{key}}
         </div>
-        <div class='data'>
+        <div class='value'>
           {{stateObj.attributes[key]}}
         </div>
       </div>
     </template>
 
-    <recent-states api="{{api}}" stateObj="{{stateObj}}"></recent-states>
-
+    <template if="{{hasHistoryComponent}}">
+      <h4>Recent states</h4>
+      <recent-states api="{{api}}" stateObj="{{stateObj}}"></recent-states>
+    </template>
   </div>
 </template>
 <script>
   Polymer({
+    hasHistoryComponent: false,
+
     getKeys: function(obj) {
       return Object.keys(obj || {});
     },
+
+    apiChanged: function(oldVal, newVal) {
+      this.hasHistoryComponent = this.api && this.api.hasComponent('history');
+    }
   });
 </script>
 </polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html
index 20b63b30afa..ef2e1e92bb9 100644
--- a/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html
+++ b/homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html
@@ -1,42 +1,26 @@
 <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-sun" attributes="stateObj api">
 <template>
-  <style>
-    .data-entry {
-      margin-bottom: 8px;
-    }
-
-    .data-entry:last-child {
-      margin-bottom: 0;
-    }
-
-    .data {
-      text-align: right;      
-    }
-
-    .time-ago {
-      color: darkgrey;
-      margin-top: -2px;
-    }
-  </style>
+  <core-style ref='ha-key-value-table'></core-style>
 
   <div layout vertical id='sunData'>
 
     <div layout justified horizontal class='data-entry' id='rising'>
-      <div>
+      <div class='key'>
         Rising {{stateObj.attributes.next_rising | relativeHATime}}
       </div>
-      <div class='data'>
+      <div class='value'>
         {{stateObj.attributes.next_rising | HATimeStripDate}}
       </div>
     </div>
 
     <div layout justified horizontal class='data-entry' id='setting'>
-      <div>
+      <div class='key'>
         Setting {{stateObj.attributes.next_setting | relativeHATime}}
       </div>
-      <div class='data'>
+      <div class='value'>
         {{stateObj.attributes.next_setting | HATimeStripDate}}
       </div>
     </div>
diff --git a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html
index 7925a711b95..208afe126e9 100644
--- a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html
+++ b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html
@@ -55,6 +55,25 @@
       html /deep/ .ha-form paper-input:first-child {
         padding-top: 0;
       }
-    </core-style>  
+    </core-style>
+
+    <core-style id='ha-key-value-table'>
+      .data-entry {
+        margin-bottom: 8px;
+      }
+
+      .data-entry:last-child {
+        margin-bottom: 0;
+      }
+
+      .data-entry .key {
+        margin-right: 8px;
+      }
+
+      .data-entry .value {
+        text-align: right;
+        word-break: break-all;
+      }    
+    </core-style>
   </template>
 </polymer-element>