jeans/core
jeans/core
1
0
Fork 0
mirror of https://github.com/home-assistant/core.git synced 2025-07-24 21:57:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #132 from balloob/polymer-9

Browse Source 
Upgrade to Polymer 1.0
This commit is contained in:
Paulus Schoutsen 2015-05-29 21:16:48 -07:00
commit 5ccb7a5856
62 changed files with 29193 additions and 2331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
homeassistant/components/frontend/index.html.template
View File

@ -9,11 +9,11 @@
<meta name='apple-mobile-web-app-capable' content='yes'> <meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='mobile-web-app-capable' content='yes'> <meta name='mobile-web-app-capable' content='yes'>
<meta name='viewport' content='width=device-width, <meta name='viewport' content='width=device-width,
user-scalable=no' /> user-scalable=no' />
<link rel='shortcut icon' href='/static/favicon.ico' /> <link rel='shortcut icon' href='/static/favicon.ico' />
<link rel='icon' type='image/png' <link rel='icon' type='image/png'
href='/static/favicon-192x192.png' sizes='192x192'> href='/static/favicon-192x192.png' sizes='192x192'>
<link rel='apple-touch-icon' sizes='192x192' <link rel='apple-touch-icon' sizes='192x192'
href='/static/favicon-192x192.png'> href='/static/favicon-192x192.png'>
@ -21,7 +21,7 @@
</head> </head>
<body fullbleed> <body fullbleed>
<h3 id='init' align='center'>Initializing Home Assistant</h3> <h3 id='init' align='center'>Initializing Home Assistant</h3>
<script src='/static/webcomponents.min.js'></script> <script src='/static/webcomponents-lite.min.js'></script>
<link rel='import' href='/static/{{ app_url }}' /> <link rel='import' href='/static/{{ app_url }}' />
<home-assistant auth='{{ auth }}'></home-assistant> <home-assistant auth='{{ auth }}'></home-assistant>
</body> </body>

2
homeassistant/components/frontend/version.py
View File

@ -1,2 +1,2 @@
""" DO NOT MODIFY. Auto-generated by build_frontend script """ """ DO NOT MODIFY. Auto-generated by build_frontend script """
VERSION = "28c0680cf6ebd969dc5710c22d9c4075" VERSION = "c164af7349b4750365f03b190e11cc8d"

26371
homeassistant/components/frontend/www_static/frontend.html
View File

File diff suppressed because one or more lines are too long

60
homeassistant/components/frontend/www_static/polymer/bower.json
View File

@ -10,38 +10,36 @@
"ignore": [ "ignore": [
"bower_components" "bower_components"
], ],
"dependencies": { "devDependencies": {
"webcomponentsjs": "Polymer/webcomponentsjs#~0.6", "polymer": "Polymer/polymer#^1.0.0",
"font-roboto": "Polymer/font-roboto#~0.5.5", "webcomponentsjs": "Polymer/webcomponentsjs#^0.7",
"core-header-panel": "polymer/core-header-panel#~0.5.5", "paper-header-panel": "PolymerElements/paper-header-panel#^1.0.0",
"core-toolbar": "polymer/core-toolbar#~0.5.5", "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"core-tooltip": "Polymer/core-tooltip#~0.5.5", "paper-menu": "PolymerElements/paper-menu#^1.0.0",
"core-menu": "polymer/core-menu#~0.5.5", "iron-input": "PolymerElements/iron-input#^1.0.0",
"core-item": "Polymer/core-item#~0.5.5", "iron-icons": "PolymerElements/iron-icons#^1.0.0",
"core-input": "Polymer/core-input#~0.5.5", "iron-image": "PolymerElements/iron-image#^1.0.0",
"core-icons": "polymer/core-icons#~0.5.5", "paper-toast": "PolymerElements/paper-toast#^1.0.0",
"core-image": "polymer/core-image#~0.5.5", "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
"core-style": "polymer/core-style#~0.5.5", "paper-dialog-scrollable": "polymerelements/paper-dialog-scrollable#^1.0.0",
"core-label": "polymer/core-label#~0.5.5", "paper-spinner": "PolymerElements/paper-spinner#^1.0.0",
"paper-toast": "Polymer/paper-toast#~0.5.5", "paper-button": "PolymerElements/paper-button#^1.0.0",
"paper-dialog": "Polymer/paper-dialog#~0.5.5", "paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-spinner": "Polymer/paper-spinner#~0.5.5", "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
"paper-button": "Polymer/paper-button#~0.5.5", "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"paper-input": "Polymer/paper-input#~0.5.5", "paper-item": "PolymerElements/paper-item#^1.0.0",
"paper-toggle-button": "polymer/paper-toggle-button#~0.5.5", "paper-slider": "PolymerElements/paper-slider#^1.0.0",
"paper-icon-button": "polymer/paper-icon-button#~0.5.5", "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
"paper-menu-button": "polymer/paper-menu-button#~0.5.5", "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0",
"paper-dropdown": "polymer/paper-dropdown#~0.5.5", "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#~1.0",
"paper-item": "polymer/paper-item#~0.5.5", "google-apis": "GoogleWebComponents/google-apis#0.8-preview",
"paper-slider": "polymer/paper-slider#~0.5.5", "moment": "^2.10.3",
"paper-checkbox": "polymer/paper-checkbox#~0.5.5", "layout": "Polymer/layout",
"color-picker-element": "~0.0.2", "color-picker-element": "~0.0.3",
"google-apis": "GoogleWebComponents/google-apis#~0.4.4", "paper-styles": "polymerelements/paper-styles#~1.0"
"core-drawer-panel": "polymer/core-drawer-panel#~0.5.5",
"core-scroll-header-panel": "polymer/core-scroll-header-panel#~0.5.5",
"moment": "~2.10.2"
}, },
"resolutions": { "resolutions": {
"webcomponentsjs": "~0.6" "polymer": "^1.0.0",
"webcomponentsjs": "^0.7.0"
} }
} }

30
homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html
View File

@ -1,15 +1,29 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel="import" href="./state-card-display.html"> <link rel='import' href='./state-card-display.html'>
<link rel="import" href="../components/state-info.html"> <link rel='import' href='../components/state-info.html'>
<polymer-element name="state-card-configurator" attributes="stateObj" noscript> <dom-module id='state-card-configurator'>
<template> <template>
<state-card-display stateObj="{{stateObj}}"></state-card-display> <state-card-display state-obj='[[stateObj]]'></state-card-display>
<!-- pre load the image so the dialog is rendered the proper size --> <!-- pre load the image so the dialog is rendered the proper size -->
<template if="{{stateObj.attributes.description_image}}"> <template is='dom-if' if='[[stateObj.attributes.description_image]]'>
<img hidden src="{{stateObj.attributes.description_image}}" /> <img hidden src='[[stateObj.attributes.description_image]]' />
</template> </template>
</template> </template>
</polymer-element> </dom-module>
<script>
(function() {
Polymer({
is: 'state-card-configurator',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script>

59
homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
View File

@ -6,43 +6,52 @@
<link rel="import" href="state-card-configurator.html"> <link rel="import" href="state-card-configurator.html">
<link rel="import" href="state-card-scene.html"> <link rel="import" href="state-card-scene.html">
<polymer-element name="state-card-content" attributes="stateObj"> <dom-module id="state-card-content">
<template>
<style> <style>
:host { :host {
display: block; display: block;
} }
</style> </style>
</dom-module>
<div id='cardContainer'></div>
</template>
<script> <script>
Polymer({ (function() {
stateObjChanged: function(oldVal, newVal) { var uiUtil = window.hass.uiUtil;
var cardContainer = this.$.cardContainer;
if (!newVal) { Polymer({
if (cardContainer.lastChild) { is: 'state-card-content',
cardContainer.removeChild(cardContainer.lastChild);
properties: {
stateObj: {
type: Object,
observer: 'stateObjChanged',
} }
return; },
}
if (!oldVal || oldVal.cardType != newVal.cardType) { stateObjChanged: function(newVal, oldVal) {
if (cardContainer.lastChild) { var root = Polymer.dom(this);
cardContainer.removeChild(cardContainer.lastChild);
if (!newVal) {
if (root.lastChild) {
root.removeChild(root.lastChild);
}
return;
} }
var stateCard = document.createElement("state-card-" + newVal.cardType); var newCardType = uiUtil.stateCardType(newVal);
stateCard.stateObj = newVal;
cardContainer.appendChild(stateCard);
} else { if (!oldVal || uiUtil.stateCardType(oldVal) != newCardType) {
if (root.lastChild) {
root.removeChild(root.lastChild);
}
cardContainer.lastChild.stateObj = newVal; var stateCard = document.createElement("state-card-" + newCardType);
stateCard.stateObj = newVal;
} root.appendChild(stateCard);
}, } else {
}); root.lastChild.stateObj = newVal;
}
},
});
})();
</script> </script>
</polymer-element>

44
homeassistant/components/frontend/www_static/polymer/cards/state-card-display.html
View File

@ -2,21 +2,35 @@
<link rel="import" href="../components/state-info.html"> <link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-display" attributes="stateObj" noscript> <dom-module id="state-card-display">
<template> <style>
<style> .state {
.state { margin-left: 16px;
margin-left: 16px; text-transform: capitalize;
text-transform: capitalize; font-weight: 300;
font-weight: 300; font-size: 1.3rem;
font-size: 1.3rem; text-align: right;
text-align: right; }
} </style>
</style>
<div horizontal justified layout> <template>
<state-info stateObj="{{stateObj}}"></state-info> <div class='horizontal justified layout'>
<div class='state'>{{stateObj.stateDisplay}}</div> <state-info state-obj="[[stateObj]]"></state-info>
<div class='state'>[[stateObj.stateDisplay]]</div>
</div> </div>
</template> </template>
</polymer-element> </dom-module>
<script>
(function() {
Polymer({
is: 'state-card-display',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script>

36
homeassistant/components/frontend/www_static/polymer/cards/state-card-scene.html
View File

@ -3,25 +3,37 @@
<link rel="import" href="./state-card-display.html"> <link rel="import" href="./state-card-display.html">
<link rel="import" href="./state-card-toggle.html"> <link rel="import" href="./state-card-toggle.html">
<polymer-element name="state-card-scene" attributes="stateObj"> <dom-module id="state-card-scene">
<template> <template>
<template if={{allowToggle}}> <template is='dom-if' if=[[allowToggle]]>
<state-card-toggle stateObj="{{stateObj}}"></state-card-toggle> <state-card-toggle state-obj="[[stateObj]]"></state-card-toggle>
</template> </template>
<template if={{!allowToggle}}> <template is='dom-if' if=[[!allowToggle]]>
<state-card-display stateObj="{{stateObj}}"></state-card-display> <state-card-display state-obj="[[stateObj]]"></state-card-display>
</template> </template>
</template> </template>
<script> </dom-module>
<script>
(function() { (function() {
Polymer({ Polymer({
allowToggle: false, is: 'state-card-scene',
stateObjChanged: function(oldVal, newVal) { properties: {
this.allowToggle = newVal.state === 'off' || stateObj: {
newVal.attributes.active_requested; type: Object,
},
allowToggle: {
type: Boolean,
value: false,
computed: 'computeAllowToggle(stateObj)',
},
},
computeAllowToggle: function(stateObj) {
return stateObj.state === 'off' || stateObj.attributes.active_requested;
}, },
}); });
})(); })();
</script> </script>
</polymer-element>

46
homeassistant/components/frontend/www_static/polymer/cards/state-card-thermostat.html
View File

@ -2,9 +2,12 @@
<link rel="import" href="../components/state-info.html"> <link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-thermostat" attributes="stateObj api"> <dom-module id="state-card-thermostat">
<template>
<style> <style>
:host {
line-height: normal;
}
.state { .state {
margin-left: 16px; margin-left: 16px;
text-align: right; text-align: right;
@ -19,23 +22,36 @@
.current { .current {
color: darkgrey; color: darkgrey;
margin-top: -2px; margin-top: -2px;
font-size: 1rem;
} }
</style> </style>
<template>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<div class='state'>
<div class='target'>[[stateObj.stateDisplay]]</div>
<div horizontal justified layout> <div class='current'>
<state-info stateObj="{{stateObj}}"></state-info> <span>Currently: </span>
<div class='state'> <span>[[stateObj.attributes.current_temperature]]</span>
<div class='target'> <span> </span>
{{stateObj.stateDisplay}} <span>[[stateObj.attributes.unit_of_measurement]]</span>
</div> </div>
<div class='current'>
Currently: {{stateObj.attributes.current_temperature}} {{stateObj.attributes.unit_of_measurement}}
</div> </div>
</div> </div>
</div> </template>
</template> </dom-module>
<script> <script>
Polymer({}); (function() {
Polymer({
is: 'state-card-thermostat',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script> </script>
</polymer-element>

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

@ -1,40 +1,50 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html"> <link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../bower_components/core-style/core-style.html">
<link rel="import" href="../components/state-info.html"> <link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-toggle" attributes="stateObj"> <dom-module id="state-card-toggle">
<style>
paper-toggle-button {
margin-left: 16px;
}
</style>
<template> <template>
<core-style ref='ha-paper-toggle'></core-style> <div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<div horizontal justified layout> <paper-toggle-button class='self-center'
<state-info flex stateObj="{{stateObj}}"></state-info> checked="[[toggleChecked]]"
on-change="toggleChanged"
<paper-toggle-button self-center on-click="toggleClicked">
checked="{{toggleChecked}}"
on-change="{{toggleChanged}}"
on-click="{{toggleClicked}}">
</paper-toggle-button> </paper-toggle-button>
</div> </div>
</template> </template>
<script> </dom-module>
<script>
(function() {
var serviceActions = window.hass.serviceActions; var serviceActions = window.hass.serviceActions;
Polymer({ Polymer({
toggleChecked: false, is: 'state-card-toggle',
observe: { properties: {
'stateObj.state': 'stateChanged' stateObj: {
type: Object,
observer: 'stateObjChanged',
},
toggleChecked: {
type: Boolean,
value: false,
},
}, },
ready: function() { ready: function() {
this.forceStateChange = this.forceStateChange.bind(this); this.forceStateChange = this.forceStateChange.bind(this);
}, this.forceStateChange();
toggleClicked: function(ev) {
ev.stopPropagation();
}, },
toggleChanged: function(ev) { toggleChanged: function(ev) {
@ -47,22 +57,22 @@
} }
}, },
stateObjChanged: function(oldVal, newVal) { stateObjChanged: function(newVal) {
if (newVal) { if (newVal) {
this.stateChanged(null, newVal.state); this.updateToggle(newVal);
} }
}, },
stateChanged: function(oldVal, newVal) { updateToggle: function(stateObj) {
this.toggleChecked = newVal === "on"; this.toggleChecked = stateObj && stateObj.state === "on";
}, },
forceStateChange: function() { forceStateChange: function() {
this.stateChanged(null, this.stateObj.state); this.updateToggle(this.stateObj);
}, },
turn_on: function() { turn_on: function() {
// We call stateChanged after a successful call to re-sync the toggle // We call updateToggle after a successful call to re-sync the toggle
// with the state. It will be out of sync if our service call did not // with the state. It will be out of sync if our service call did not
// result in the entity to be turned on. Since the state is not changing, // result in the entity to be turned on. Since the state is not changing,
// the resync is not called automatic. // the resync is not called automatic.
@ -70,12 +80,12 @@
}, },
turn_off: function() { turn_off: function() {
// We call stateChanged after a successful call to re-sync the toggle // We call updateToggle after a successful call to re-sync the toggle
// with the state. It will be out of sync if our service call did not // with the state. It will be out of sync if our service call did not
// result in the entity to be turned on. Since the state is not changing, // result in the entity to be turned on. Since the state is not changing,
// the resync is not called automatic. // the resync is not called automatic.
serviceActions.callTurnOff(this.stateObj.entityId).then(this.forceStateChange); serviceActions.callTurnOff(this.stateObj.entityId).then(this.forceStateChange);
}, },
}); });
</script> })();
</polymer-element> </script>

39
homeassistant/components/frontend/www_static/polymer/cards/state-card.html
View File

@ -2,8 +2,7 @@
<link rel="import" href="state-card-content.html"> <link rel="import" href="state-card-content.html">
<polymer-element name="state-card" attributes="stateObj" on-click="cardClicked"> <dom-module id="state-card">
<template>
<style> <style>
:host { :host {
border-radius: 2px; border-radius: 2px;
@ -19,15 +18,31 @@
} }
</style> </style>
<state-card-content stateObj={{stateObj}}></state-card-content> <template>
</template> <state-card-content state-obj="[[stateObj]]"></state-card-content>
<script> </template>
var uiActions = window.hass.uiActions; </dom-module>
Polymer({ <script>
cardClicked: function() { (function(){
uiActions.showMoreInfoDialog(this.stateObj.entityId); var uiActions = window.hass.uiActions;
},
}); Polymer({
is: 'state-card',
properties: {
stateObj: {
type: Object,
},
},
listeners: {
'click': 'cardClicked',
},
cardClicked: function() {
uiActions.showMoreInfoDialog(this.stateObj.entityId);
},
});
})();
</script> </script>
</polymer-element>

39
homeassistant/components/frontend/www_static/polymer/components/display-time.html
View File

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

39
homeassistant/components/frontend/www_static/polymer/components/domain-icon.html
View File

@ -1,24 +1,37 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../resources/home-assistant-icons.html"> <link rel="import" href="../resources/home-assistant-icons.html">
<polymer-element name="domain-icon" <dom-module id="domain-icon">
attributes="domain state" constructor="DomainIcon">
<template> <template>
<core-icon icon="{{icon}}"></core-icon> <iron-icon icon="[[computeIcon(domain, state)]]"></iron-icon>
</template> </template>
<script> </dom-module>
Polymer({
icon: '',
observe: { <script>
'domain': 'updateIcon', (function() {
'state' : 'updateIcon', var uiUtil = window.hass.uiUtil;
Polymer({
is: 'domain-icon',
properties: {
domain: {
type: String,
value: '',
},
state: {
type: String,
value: '',
},
}, },
updateIcon: function() { computeIcon: function(domain, state) {
this.icon = window.hass.uiUtil.domainIcon(this.domain, this.state); return uiUtil.domainIcon(domain, state);
}, },
}); });
</script> })();
</polymer-element> </script>

85
homeassistant/components/frontend/www_static/polymer/components/entity-list.html
View File

@ -1,60 +1,53 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="entity-list" attributes="cbEntityClicked"> <dom-module id="entity-list">
<style>
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
line-height: 2em;
}
a {
color: var(--accent-color);
}
</style>
<template> <template>
<style> <ul>
:host { <template is='dom-repeat' items='[[entities]]' as='entity'>
display: block; <li><a href='#' on-click='entitySelected'>[[entity]]</a></li>
}
.entityContainer {
font-size: 1rem;
}
</style>
<template if={{cbEntityClicked}}>
<style>
a {
text-decoration: underline;
cursor: pointer;
}
</style>
</template>
<div>
<template repeat="{{entityID in entityIDs}}">
<div class='eventContainer'>
<a on-click={{handleClick}}>{{entityID}}</a>
</div>
</template> </template>
</ul>
</div>
</template> </template>
<script> </dom-module>
var storeListenerMixIn = window.hass.storeListenerMixIn;
Polymer(Polymer.mixin({ <script>
cbEventClicked: null, (function() {
entityIDs: [], Polymer({
is: 'entity-list',
attached: function() { behaviors: [StoreListenerBehavior],
this.listenToStores(true);
},
detached: function() { properties: {
this.stopListeningToStores(); entities: {
type: Array,
value: [],
},
}, },
stateStoreChanged: function(stateStore) { stateStoreChanged: function(stateStore) {
this.entityIDs = stateStore.entityIDs.toArray(); this.entities = stateStore.entityIDs.toArray();
}, },
handleClick: function(ev) { entitySelected: function(ev) {
if(this.cbEntityClicked) { ev.preventDefault();
this.cbEntityClicked(ev.path[0].innerHTML); this.fire('entity-selected', {entityId: ev.model.entity});
}
}, },
});
}, storeListenerMixIn)); })();
</script> </script>
</polymer-element>

88
homeassistant/components/frontend/www_static/polymer/components/events-list.html
View File

@ -1,62 +1,56 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="events-list" attributes="cbEventClicked"> <dom-module id="events-list">
<style>
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
line-height: 2em;
}
a {
color: var(--accent-color);
}
</style>
<template> <template>
<style> <ul>
:host { <template is='dom-repeat' items='[[events]]' as='event'>
display: block; <li>
} <a href='#' on-click='eventSelected'>{{event.event}}</a>
<span> (</span><span>{{event.listener_count}}</span><span> listeners)</span>
.eventContainer { </li>
font-size: 1rem;
}
</style>
<template if={{cbEventClicked}}>
<style>
a {
text-decoration: underline;
cursor: pointer;
}
</style>
</template>
<div>
<template repeat="{{event in events}}">
<div class='eventContainer'>
<a on-click={{handleClick}}>{{event.event}}</a>
({{event.listener_count}} listeners)
</div>
</template> </template>
</ul>
</div>
</template> </template>
<script> </dom-module>
var storeListenerMixIn = window.hass.storeListenerMixIn;
Polymer(Polymer.mixin({ <script>
cbEventClicked: null, (function() {
events: [], Polymer({
is: 'events-list',
attached: function() { behaviors: [StoreListenerBehavior],
this.listenToStores(true);
},
detached: function() { properties: {
this.stopListeningToStores(); events: {
type: Array,
value: [],
},
}, },
eventStoreChanged: function(eventStore) { eventStoreChanged: function(eventStore) {
this.events = eventStore.all.toArray(); this.events = eventStore.all.toArray();
}, },
handleClick: function(ev) { eventSelected: function(ev) {
if(this.cbEventClicked) { ev.preventDefault();
this.cbEventClicked(ev.path[0].innerHTML); this.fire('event-selected', {eventType: ev.model.event.event});
}
}, },
});
}, storeListenerMixIn)); })();
</script> </script>
</polymer-element>

33
homeassistant/components/frontend/www_static/polymer/components/ha-logbook.html
View File

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

37
homeassistant/components/frontend/www_static/polymer/components/ha-notifications.html
View File

@ -1,37 +0,0 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<polymer-element name="ha-notifications">
<template>
<paper-toast id="toast" role="alert" text=""></paper-toast>
</template>
<script>
var storeListenerMixIn = window.hass.storeListenerMixIn;
Polymer(Polymer.mixin({
lastId: null,
attached: function() {
this.listenToStores(true);
},
detached: function() {
this.stopListeningToStores();
},
notificationStoreChanged: function(notificationStore) {
if (notificationStore.hasNewNotifications(this.lastId)) {
var toast = this.$.toast;
var notification = notificationStore.lastNotification;
if (notification) {
this.lastId = notification.id;
toast.text = notification.message;
toast.show();
}
}
},
}, storeListenerMixIn));
</script>
</polymer-element>

30
homeassistant/components/frontend/www_static/polymer/components/loading-box.html
View File

@ -1,25 +1,27 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html"> <link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<polymer-element name="loading-box" attributes="text"> <dom-module id="loading-box">
<style>
.text {
display: inline-block;
line-height: 28px;
vertical-align: top;
margin-left: 8px;
}
</style>
<template> <template>
<style>
.text {
display: inline-block;
line-height: 28px;
vertical-align: top;
margin-left: 8px;
}
</style>
<div layout='horizontal'> <div layout='horizontal'>
<paper-spinner active="true"></paper-spinner> <paper-spinner active="true"></paper-spinner>
<div class='text'>{{text}}…</div> <div class='text'><content></content>…</div>
</div> </div>
</template> </template>
</dom-module>
<script> <script>
(function() {
Polymer({ Polymer({
text: "Loading" is: 'loading-box',
}); });
</script> })();
</polymer-element> </script>

52
homeassistant/components/frontend/www_static/polymer/components/logbook-entry.html
View File

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

50
homeassistant/components/frontend/www_static/polymer/components/recent-states.html
View File

@ -1,50 +0,0 @@
<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">
<link rel="import" href="relative-ha-datetime.html">
<polymer-element name="recent-states" attributes="stateObj">
<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'>
<relative-ha-datetime datetime="{{stateObj.last_changed}}">
</relative-ha-datetime>
</div>
</div>
</template>
<template if="{{recentStates.length == 0}}">
There are no recent states.
</template>
</div>
</template>
</template>
<script>
Polymer({
recentStates: null,
stateObjChanged: function() {
this.recentStates = null;
window.hass.callApi(
'GET', 'history/entity/' + this.stateObj.entityId + '/recent_states').then(
function(states) {
this.recentStates = states.slice(1);
}.bind(this));
},
});
</script>
</polymer-element>

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

@ -2,49 +2,73 @@
<link rel="import" href="../resources/moment-js.html"> <link rel="import" href="../resources/moment-js.html">
<polymer-element name="relative-ha-datetime" attributes="datetime datetimeObj"> <dom-module id="relative-ha-datetime">
<template> <template>
{{ relativeTime }} <span>[[relativeTime]]</span>
</template> </template>
<script> </dom-module>
(function() {
var UPDATE_INTERVAL = 60000; // 60 seconds
var parseDateTime = window.hass.util.parseDateTime; <script>
(function() {
var UPDATE_INTERVAL = 60000; // 60 seconds
Polymer({ var parseDateTime = window.hass.util.parseDateTime;
relativeTime: "",
parsedDateTime: null,
created: function() { Polymer({
this.updateRelative = this.updateRelative.bind(this); is: 'relative-ha-datetime',
properties: {
datetime: {
type: String,
observer: 'datetimeChanged',
}, },
attached: function() { datetimeObj: {
this._interval = setInterval(this.updateRelative, UPDATE_INTERVAL); type: Object,
observer: 'datetimeObjChanged',
}, },
detached: function() { parsedDateTime: {
clearInterval(this._interval); type: Object,
}, },
datetimeChanged: function(oldVal, newVal) { relativeTime: {
this.parsedDateTime = newVal ? parseDateTime(newVal) : null; type: String,
value: 'not set',
this.updateRelative();
}, },
},
datetimeObjChanged: function(oldVal, newVal) { relativeTime: "",
this.parsedDateTime = newVal; parsedDateTime: null,
this.updateRelative(); created: function() {
}, this.updateRelative = this.updateRelative.bind(this);
},
updateRelative: function() { attached: function() {
this.relativeTime = this.parsedDateTime ? this._interval = setInterval(this.updateRelative, UPDATE_INTERVAL);
moment(this.parsedDateTime).fromNow() : ""; },
},
}); detached: function() {
})(); clearInterval(this._interval);
</script> },
</polymer-element>
datetimeChanged: function(newVal) {
this.parsedDateTime = newVal ? parseDateTime(newVal) : null;
this.updateRelative();
},
datetimeObjChanged: function(newVal) {
this.parsedDateTime = newVal;
this.updateRelative();
},
updateRelative: function() {
this.relativeTime = this.parsedDateTime ?
moment(this.parsedDateTime).fromNow() : "";
},
});
})();
</script>

111
homeassistant/components/frontend/www_static/polymer/components/services-list.html
View File

@ -1,72 +1,58 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-menu/core-submenu.html"> <link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="domain-icon.html"> <link rel="import" href="domain-icon.html">
<polymer-element name="services-list" attributes="cbServiceClicked"> <dom-module id="services-list">
<template> <style>
<style> ul {
:host { margin: 0;
display: block; padding: 0;
} }
core-menu { li {
margin-top: 0; list-style: none;
font-size: 1rem; line-height: 2em;
} }
a { a {
display: block; color: var(--accent-color);
} }
</style> </style>
<template if={{cbServiceClicked}}> <template>
<style> <ul>
a, core-submenu { <template is='dom-repeat' items="[[domains]]" as="domain">
text-decoration: underline; <template is='dom-repeat' items="[[computeServices(domain)]]" as="service">
cursor: pointer; <li><a href='#' on-click='serviceClicked'>
} <span>[[domain]]</span>/<span>[[service]]</span>
</style> </a></li>
</template> </template>
</template>
<div> </ul>
<core-menu selected="0">
<template repeat="{{domain in domains}}">
<core-submenu icon="{{domain | getIcon}}" label="{{domain}}">
<template repeat="{{service in domain | getServices}}">
<a on-click={{serviceClicked}} data-domain={{domain}}>{{service}}</a>
</template>
</core-submenu>
</template>
</core-menu>
</div>
</template> </template>
<script> </dom-module>
var storeListenerMixIn = window.hass.storeListenerMixIn;
Polymer(Polymer.mixin({ <script>
domains: [], (function() {
services: null, Polymer({
cbServiceClicked: null, is: 'services-list',
attached: function() { behaviors: [StoreListenerBehavior],
this.listenToStores(true);
properties: {
domains: {
type: Array,
value: [],
},
services: {
type: Object,
},
}, },
detached: function() { computeServices: function(domain) {
this.stopListeningToStores();
},
getIcon: function(domain) {
return hass.uiUtil.domainIcon(domain);
},
getServices: function(domain) {
return this.services.get(domain).toArray(); return this.services.get(domain).toArray();
}, },
@ -76,15 +62,10 @@
}, },
serviceClicked: function(ev) { serviceClicked: function(ev) {
if(this.cbServiceClicked) { ev.preventDefault();
var target = ev.path[0]; this.fire(
var domain = target.getAttributeNode("data-domain").value; 'service-selected', {domain: ev.model.domain, service: ev.model.service});
var service = target.innerHTML; },
});
this.cbServiceClicked(domain, service); })();
} </script>
}
}, storeListenerMixIn));
</script>
</polymer-element>

186
homeassistant/components/frontend/www_static/polymer/components/state-badge.html
View File

@ -1,105 +1,105 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel="import" href="../bower_components/core-image/core-image.html"> <link rel='import' href='../bower_components/iron-image/iron-image.html'>
<link rel="import" href="domain-icon.html"> <link rel='import' href='domain-icon.html'>
<dom-module id='state-badge'>
<style>
:host {
position: relative;
display: inline-block;
width: 45px;
background-color: #4fc3f7;
color: white;
border-radius: 50%;
}
div {
height: 45px;
text-align: center;
}
iron-image {
border-radius: 50%;
}
domain-icon {
margin: 0 auto;
transition: color .3s ease-in-out;
}
/* Color the icon if light or sun is on */
domain-icon[data-domain=light][data-state=on],
domain-icon[data-domain=switch][data-state=on],
domain-icon[data-domain=sun][data-state=above_horizon] {
color: #fff176;
}
</style>
<polymer-element name="state-badge" attributes="stateObj">
<template> <template>
<style> <div class='layout horizontal center'>
:host { <domain-icon id='icon'
position: relative; domain='[[stateObj.domain]]' data-domain$='[[stateObj.domain]]'
display: inline-block; state='[[stateObj.state]]' data-state$='[[stateObj.state]]'>
width: 45px;
background-color: #4fc3f7;
color: white;
border-radius: 50%;
transition: all .3s ease-in-out;
}
div {
height: 45px;
text-align: center;
}
core-image {
border-radius: 50%;
}
domain-icon {
margin: 0 auto;
}
/* Color the icon if light or sun is on */
domain-icon[data-domain=light][data-state=on],
domain-icon[data-domain=switch][data-state=on],
domain-icon[data-domain=sun][data-state=above_horizon] {
color: #fff176;
}
</style>
<div horizontal layout center>
<domain-icon id="icon"
domain="{{stateObj.domain}}" data-domain="{{stateObj.domain}}"
state="{{stateObj.state}}" data-state="{{stateObj.state}}">
</domain-icon> </domain-icon>
<template if="{{stateObj.attributes.entity_picture}}"> <template is='dom-if' if='[[stateObj.attributes.entity_picture]]'>
<core-image <iron-image
sizing="cover" fit sizing='cover' class='fit'
src="{{stateObj.attributes.entity_picture}}"></core-image> src$="[[stateObj.attributes.entity_picture]]"></iron-image>
</template> </template>
</div> </div>
</template> </template>
<script> </dom-module>
Polymer({
observe: { <script>
'stateObj.state': 'updateIconColor', Polymer({
'stateObj.attributes.brightness': 'updateIconColor', is: 'state-badge',
'stateObj.attributes.xy_color[0]': 'updateIconColor',
'stateObj.attributes.xy_color[1]': 'updateIconColor' properties: {
stateObj: {
type: Object,
observer: 'updateIconColor',
}, },
},
/** /**
* Called when an attribute changes that influences the color of the icon. * Called when an attribute changes that influences the color of the icon.
*/ */
updateIconColor: function(oldVal, newVal) { updateIconColor: function(newVal) {
var state = this.stateObj; // for domain light, set color of icon to light color if available
if(newVal.domain == "light" && newVal.state == "on" &&
newVal.attributes.brightness && newVal.attributes.xy_color) {
// for domain light, set color of icon to light color if available var rgb = this.xyBriToRgb(newVal.attributes.xy_color[0],
if(state.domain == "light" && state.state == "on" && newVal.attributes.xy_color[1],
state.attributes.brightness && state.attributes.xy_color) { newVal.attributes.brightness);
this.$.icon.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
var rgb = this.xyBriToRgb(state.attributes.xy_color[0], } else {
state.attributes.xy_color[1], this.$.icon.style.color = null;
state.attributes.brightness);
this.$.icon.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
} else {
this.$.icon.style.color = null;
}
},
// from http://stackoverflow.com/questions/22894498/philips-hue-convert-xy-from-api-to-hex-or-rgb
xyBriToRgb: function (x, y, bri) {
z = 1.0 - x - y;
Y = bri / 255.0; // Brightness of lamp
X = (Y / y) * x;
Z = (Y / y) * z;
r = X * 1.612 - Y * 0.203 - Z * 0.302;
g = -X * 0.509 + Y * 1.412 + Z * 0.066;
b = X * 0.026 - Y * 0.072 + Z * 0.962;
r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
maxValue = Math.max(r,g,b);
r /= maxValue;
g /= maxValue;
b /= maxValue;
r = r * 255; if (r < 0) { r = 255 };
g = g * 255; if (g < 0) { g = 255 };
b = b * 255; if (b < 0) { b = 255 };
return [r, g, b]
} }
},
}); // from http://stackoverflow.com/questions/22894498/philips-hue-convert-xy-from-api-to-hex-or-rgb
</script> xyBriToRgb: function (x, y, bri) {
</polymer-element> z = 1.0 - x - y;
Y = bri / 255.0; // Brightness of lamp
X = (Y / y) * x;
Z = (Y / y) * z;
r = X * 1.612 - Y * 0.203 - Z * 0.302;
g = -X * 0.509 + Y * 1.412 + Z * 0.066;
b = X * 0.026 - Y * 0.072 + Z * 0.962;
r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
maxValue = Math.max(r,g,b);
r /= maxValue;
g /= maxValue;
b /= maxValue;
r = r * 255; if (r < 0) { r = 255; }
g = g * 255; if (g < 0) { g = 255; }
b = b * 255; if (b < 0) { b = 255; }
return [r, g, b];
}
});
</script>

100
homeassistant/components/frontend/www_static/polymer/components/state-cards.html
View File

@ -2,50 +2,49 @@
<link rel="import" href="../cards/state-card.html"> <link rel="import" href="../cards/state-card.html">
<polymer-element name="state-cards" attributes="states" noscript> <dom-module id="state-cards">
<style>
:host {
display: block;
}
@media all and (min-width: 1020px) {
.state-card {
width: calc(50% - 44px);
margin: 8px 0 0 8px;
}
}
@media all and (min-width: 1356px) {
.state-card {
width: calc(33% - 38px);
}
}
@media all and (min-width: 1706px) {
.state-card {
width: calc(25% - 42px);
}
}
.no-states-content {
max-width: 500px;
background-color: #fff;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
padding: 16px;
margin: 16px auto;
}
</style>
<template> <template>
<style> <div class='horizontal layout wrap'>
:host {
display: block;
width: 100%;
}
@media all and (min-width: 1020px) { <template is='dom-repeat' items="{{states}}">
.state-card { <state-card class="state-card" state-obj="[[item]]"></state-card>
width: calc(50% - 44px);
margin: 8px 0 0 8px;
}
}
@media all and (min-width: 1356px) {
.state-card {
width: calc(33% - 38px);
}
}
@media all and (min-width: 1706px) {
.state-card {
width: calc(25% - 42px);
}
}
.no-states-content {
max-width: 500px;
background-color: #fff;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
padding: 16px;
margin: 16px auto;
}
</style>
<div horizontal layout wrap>
<template repeat="{{states as state}}">
<state-card class="state-card" stateObj={{state}}></state-card>
</template> </template>
<template if="{{states.length == 0}}"> <template if="[[computeEmptyStates(states)]]">
<div class='no-states-content'> <div class='no-states-content'>
<content></content> <content></content>
</div> </div>
@ -53,4 +52,23 @@
</div> </div>
</template> </template>
</polymer-element> </dom-module>
<script>
(function() {
Polymer({
is: 'state-cards',
properties: {
states: {
type: Array,
value: [],
},
},
computeEmptyStates: function(states) {
return states.length === 0;
},
});
})();
</script>

196
homeassistant/components/frontend/www_static/polymer/components/state-history-chart-line.html Normal file
View File

@ -0,0 +1,196 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
(function() {
Polymer({
is: 'state-history-chart-line',
properties: {
data: {
type: Object,
observer: 'dataChanged',
},
unit: {
type: String,
},
isSingleDevice: {
type: Boolean,
value: false,
},
isAttached: {
type: Boolean,
value: false,
observer: 'dataChanged',
},
},
created: function() {
this.style.display = 'block';
},
attached: function() {
this.isAttached = true;
},
dataChanged: function() {
this.drawChart();
},
/**************************************************
The following code gererates line line graphs for devices with continuous
values(which are devices that have a unit_of_measurement values defined).
On each graph the devices are grouped by their unit of measurement, eg. all
sensors measuring MB will be a separate line on single graph. The google
chart API takes data as a 2 dimensional array in the format:
DateTime, device1, device2, device3
2015-04-01, 1, 2, 0
2015-04-01, 0, 1, 0
2015-04-01, 2, 1, 1
NOTE: the first column is a javascript date objects.
The first thing we do is build up the data with rows for each time of a state
change and initialise the values to 0. THen we loop through each device and
fill in its data.
**************************************************/
drawChart: function() {
if (!this.isAttached) {
return;
}
var root = Polymer.dom(this);
var unit = this.unit;
var deviceStates = this.data;
while (root.lastChild) {
root.removeChild(root.lastChild);
}
if (deviceStates.length === 0) {
return;
}
var chart = new google.visualization.LineChart(this);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'datetime', id: 'Time' });
var options = {
legend: { position: 'top' },
titlePosition: 'none',
vAxes: {
// Adds units to the left hand side of the graph
0: {title: unit}
},
hAxis: {
format: 'H:mm'
},
lineWidth: 1,
chartArea:{left:'60',width:"95%"},
explorer: {
actions: ['dragToZoom', 'rightClickToReset', 'dragToPan'],
keepInBounds: true,
axis: 'horizontal',
maxZoomIn: 0.1
}
};
if(this.isSingleDevice) {
options.legend.position = 'none';
options.vAxes[0].title = null;
options.chartArea.left = 40;
options.chartArea.height = '80%';
options.chartArea.top = 5;
options.enableInteractivity = false;
}
// Get a unique list of times of state changes for all the device
// for a particular unit of measureent.
var times = _.pluck(_.flatten(deviceStates), "lastChangedAsDate");
times = _.uniq(times, function(e) {
return e.getTime();
});
times = _.sortBy(times, function(o) { return o; });
var data = [];
var empty = new Array(deviceStates.length);
for(var i = 0; i < empty.length; i++) {
empty[i] = 0;
}
var timeIndex = 1;
var endDate = new Date();
var prevDate = times[0];
for(i = 0; i < times.length; i++) {
var currentDate = new Date(prevDate);
// because we only have state changes we add an extra point at the same time
// that holds the previous state which makes the line display correctly
var beforePoint = new Date(times[i]);
data.push([beforePoint].concat(empty));
data.push([times[i]].concat(empty));
prevDate = times[i];
timeIndex++;
}
data.push([endDate].concat(empty));
var deviceCount = 0;
deviceStates.forEach(function(device) {
var attributes = device[device.length - 1].attributes;
dataTable.addColumn('number', attributes.friendly_name);
var currentState = 0;
var previousState = 0;
var lastIndex = 0;
var count = 0;
var prevTime = data[0][0];
device.forEach(function(state) {
currentState = state.state;
var start = state.lastChangedAsDate;
if(state.state == 'None') {
currentState = previousState;
}
for(var i = lastIndex; i < data.length; i++) {
data[i][1 + deviceCount] = parseFloat(previousState);
// this is where data gets filled in for each time for the particular device
// because for each time two entries were create we fill the first one with the
// previous value and the second one with the new value
if(prevTime.getTime() == data[i][0].getTime() && data[i][0].getTime() == start.getTime()) {
data[i][1 + deviceCount] = parseFloat(currentState);
lastIndex = i;
prevTime = data[i][0];
break;
}
prevTime = data[i][0];
}
previousState = currentState;
count++;
}.bind(this));
//fill in the rest of the Array
for(var i = lastIndex; i < data.length; i++) {
data[i][1 + deviceCount] = parseFloat(previousState);
}
deviceCount++;
}.bind(this));
dataTable.addRows(data);
chart.draw(dataTable, options);
},
});
})();
</script>

115
homeassistant/components/frontend/www_static/polymer/components/state-history-chart-timeline.html Normal file
View File

@ -0,0 +1,115 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
(function() {
Polymer({
is: 'state-history-chart-timeline',
properties: {
data: {
type: Object,
observer: 'dataChanged',
},
isAttached: {
type: Boolean,
value: false,
observer: 'dataChanged',
},
},
created: function() {
this.style.display = 'block';
},
attached: function() {
this.isAttached = true;
},
dataChanged: function() {
this.drawChart();
},
drawChart: function() {
if (!this.isAttached) {
return;
}
var root = Polymer.dom(this);
var stateHistory = this.data;
while (root.lastChild) {
root.removeChild(root.lastChild);
}
if (!stateHistory || stateHistory.length === 0) {
return;
}
// debugger;
var chart = new google.visualization.Timeline(this);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Entity' });
dataTable.addColumn({ type: 'string', id: 'State' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
var addRow = function(entityDisplay, stateStr, start, end) {
stateStr = stateStr.replace(/_/g, ' ');
dataTable.addRow([entityDisplay, stateStr, start, end]);
};
// people can pass in history of 1 entityId or a collection.
// var stateHistory;
// if (_.isArray(data[0])) {
// stateHistory = data;
// } else {
// stateHistory = [data];
// isSingleDevice = true;
// }
var numTimelines = 0;
// stateHistory is a list of lists of sorted state objects
stateHistory.forEach(function(stateInfo) {
if(stateInfo.length === 0) return;
var entityDisplay = stateInfo[0].entityDisplay;
var newLastChanged, prevState = null, prevLastChanged = null;
stateInfo.forEach(function(state) {
if (prevState !== null && state.state !== prevState) {
newLastChanged = state.lastChangedAsDate;
addRow(entityDisplay, prevState, prevLastChanged, newLastChanged);
prevState = state.state;
prevLastChanged = newLastChanged;
} else if (prevState === null) {
prevState = state.state;
prevLastChanged = state.lastChangedAsDate;
}
});
addRow(entityDisplay, prevState, prevLastChanged, new Date());
numTimelines++;
}.bind(this));
chart.draw(dataTable, {
height: 55 + numTimelines * 42,
// interactive properties require CSS, the JS api puts it on the document
// instead of inside our Shadow DOM.
enableInteractivity: false,
timeline: {
showRowLabels: stateHistory.length > 1
},
hAxis: {
format: 'H:mm'
},
});
},
});
})();
</script>

145
homeassistant/components/frontend/www_static/polymer/components/state-history-charts.html Normal file
View File

@ -0,0 +1,145 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-apis/google-legacy-loader.html">
<link rel="import" href="./loading-box.html">
<link rel="import" href="./state-history-chart-timeline.html">
<link rel="import" href="./state-history-chart-line.html">
<dom-module id="state-history-charts">
<style>
:host {
display: block;
}
.loading-container {
text-align: center;
padding: 8px;
}
</style>
<template>
<google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>
<div hidden$="{{!isLoading}}" class='loading-container'>
<loading-box>Loading history data</loading-box>
</div>
<template is='dom-if' if='[[!isLoading]]'>
<template is='dom-if' if='[[groupedStateHistory.timeline]]'>
<state-history-chart-timeline data='[[groupedStateHistory.timeline]]'
is-single-device='[[isSingleDevice]]'>
</state-history-chart-timeline>
</template>
<template is='dom-if' if='[[groupedStateHistory.line]]'>
<template is='dom-repeat' items='[[groupedStateHistory.line]]'>
<state-history-chart-line unit='[[extractUnit(item)]]'
data='[[extractData(item)]]' is-single-device='[[isSingleDevice]]'>
</state-history-chart-line>
</template>
</template>
</template>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'state-history-charts',
properties: {
stateHistory: {
type: Object,
},
isLoadingData: {
type: Boolean,
value: false,
},
apiLoaded: {
type: Boolean,
value: false,
},
isLoading: {
type: Boolean,
computed: 'computeIsLoading(isLoadingData, apiLoaded)',
},
groupedStateHistory: {
type: Object,
computed: 'computeGroupedStateHistory(stateHistory)',
},
isSingleDevice: {
type: Boolean,
computed: 'computeIsSingleDevice(stateHistory)',
},
},
computeIsSingleDevice: function(stateHistory) {
return stateHistory && stateHistory.length == 1;
},
computeGroupedStateHistory: function(stateHistory) {
var lineChartDevices = {};
var timelineDevices = [];
if (!stateHistory) {
return {line: unitStates, timeline: timelineDevices};
}
stateHistory.forEach(function(stateInfo) {
if (!stateInfo || stateInfo.length === 0) {
return;
}
var unit;
for (var i = 0; i < stateInfo.length && !unit; i++) {
unit = stateInfo[i].attributes.unit_of_measurement;
}
if (unit) {
if (!(unit in lineChartDevices)) {
lineChartDevices[unit] = [stateInfo];
} else {
lineChartDevices[unit].push(stateInfo);
}
} else {
timelineDevices.push(stateInfo);
}
});
timelineDevices = timelineDevices.length > 0 && timelineDevices;
var unitStates = Object.keys(lineChartDevices).map(function(unit) {
return [unit, lineChartDevices[unit]]; });
return {line: unitStates, timeline: timelineDevices};
},
googleApiLoaded: function() {
google.load("visualization", "1", {
packages: ["timeline", "corechart"],
callback: function() {
this.apiLoaded = true;
}.bind(this)
});
},
computeIsLoading: function(isLoadingData, apiLoaded) {
return isLoadingData || !apiLoaded;
},
extractUnit: function(arr) {
return arr[0];
},
extractData: function(arr) {
return arr[1];
},
});
})();
</script>

87
homeassistant/components/frontend/www_static/polymer/components/state-info.html
View File

@ -1,48 +1,69 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-tooltip/core-tooltip.html"> <!-- <link rel="import" href="../bower_components/core-tooltip/core-tooltip.html"> -->
<link rel="import" href="../bower_components/core-style/core-style.html">
<link rel="import" href="state-badge.html"> <link rel="import" href="state-badge.html">
<link rel="import" href="relative-ha-datetime.html"> <link rel="import" href="relative-ha-datetime.html">
<polymer-element name="state-info" attributes="stateObj" noscript> <dom-module id="state-info">
<style>
:host {
line-height: normal;
}
state-badge {
float: left;
}
.name {
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
}
.info {
margin-left: 60px;
}
.time-ago {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
}
</style>
<template> <template>
<style>
state-badge {
float: left;
}
.name {
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
}
.info {
margin-left: 60px;
}
.time-ago {
color: darkgrey;
margin-top: -2px;
}
</style>
<div> <div>
<state-badge stateObj="{{stateObj}}"></state-badge> <state-badge state-obj='[[stateObj]]'></state-badge>
<div class='info'> <div class='info'>
<div class='name'> <div class='name'>[[stateObj.entityDisplay]]</div>
{{stateObj.entityDisplay}}
</div>
<div class="time-ago"> <div class='time-ago'>
<core-tooltip label="{{stateObj.lastChangedAsDate | formatDateTime}}" position="bottom"> <!-- <core-tooltip label="[[computeTooltipLabel(stateObj)]]" position="bottom"> -->
<relative-ha-datetime datetimeObj="{{stateObj.lastChangedAsDate}}"></relative-ha-datetime> <relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
</core-tooltip> <!-- </core-tooltip> -->
</div> </div>
</div> </div>
</div> </div>
</template> </template>
</polymer-element> </dom-module>
<script>
(function() {
Polymer({
is: 'state-info',
properties: {
stateObj: {
type: Object,
},
},
computeTooltipLabel: function(stateObj) {
// stateObj.lastChangedAsDate | formatDateTime
return 'Label TODO';
},
});
})();
</script>

321
homeassistant/components/frontend/www_static/polymer/components/state-timeline.html
View File

@ -1,321 +0,0 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-apis/google-jsapi.html">
<polymer-element name="state-timeline" attributes="stateHistory isLoadingData">
<template>
<style>
:host {
display: block;
}
#loadingbox {
text-align: center;
}
.loadingmessage {
margin-top: 10px;
}
.singlelinechart {
min-height:140px;
}
</style>
<div style='width: 100%; height: auto;' hidden?="{{!isLoading}}" >
<div layout horizontal center id="splash">
<div layout vertical center flex>
<div id="loadingbox">
<paper-spinner active="true"></paper-spinner><br />
<div class="loadingmessage">{{spinnerMessage}}</div>
</div>
</div>
</div>
</div>
<google-jsapi on-api-load="{{googleApiLoaded}}"></google-jsapi>
<div id="timeline" style='width: 100%; height: auto;' class="{{ {singlelinechart: isSingleDevice && hasLineChart } | tokenList}}" hidden?="{{isLoadingData}}"></div>
<div id="line_graphs" style='width: 100%; height: auto;' hidden?="{{isLoadingData}}"></div>
</template>
<script>
Polymer({
apiLoaded: false,
stateHistory: null,
isLoading: true,
isLoadingData: false,
spinnerMessage: "Loading history data...",
isSingleDevice: false,
hasLineChart: false,
googleApiLoaded: function() {
google.load("visualization", "1", {
packages: ["timeline", "corechart"],
callback: function() {
this.apiLoaded = true;
this.drawChart();
}.bind(this)
});
},
stateHistoryChanged: function() {
this.drawChart();
},
isLoadingDataChanged: function() {
if(this.isLoadingData) {
isLoading = true;
}
},
drawChart: function() {
if (!this.apiLoaded || !this.stateHistory) {
return;
}
this.isLoading = true;
var container = this.$.timeline;
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Entity' });
dataTable.addColumn({ type: 'string', id: 'State' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
var addRow = function(entityDisplay, stateStr, start, end) {
stateStr = stateStr.replace(/_/g, ' ');
dataTable.addRow([entityDisplay, stateStr, start, end]);
};
if (this.stateHistory.length === 0) {
return;
}
this.hasLineChart = false;
this.isSingleDevice = false;
// people can pass in history of 1 entityId or a collection.
var stateHistory;
if (_.isArray(this.stateHistory[0])) {
stateHistory = this.stateHistory;
} else {
stateHistory = [this.stateHistory];
this.isSingleDevice = true;
}
var lineChartDevices = {};
var numTimelines = 0;
// stateHistory is a list of lists of sorted state objects
stateHistory.forEach(function(stateInfo) {
if(stateInfo.length === 0) return;
var entityDisplay = stateInfo[0].entityDisplay;
var newLastChanged, prevState = null, prevLastChanged = null;
//get the latest update to get the graph type from the component attributes
var attributes = stateInfo[stateInfo.length - 1].attributes;
//if the device has a unit of meaurment it will be added as a line graph further down
if(attributes.unit_of_measurement) {
if(!lineChartDevices[attributes.unit_of_measurement]){
lineChartDevices[attributes.unit_of_measurement] = [];
}
lineChartDevices[attributes.unit_of_measurement].push(stateInfo);
this.hasLineChart = true;
return;
}
stateInfo.forEach(function(state) {
if (prevState !== null && state.state !== prevState) {
newLastChanged = state.lastChangedAsDate;
addRow(entityDisplay, prevState, prevLastChanged, newLastChanged);
prevState = state.state;
prevLastChanged = newLastChanged;
} else if (prevState === null) {
prevState = state.state;
prevLastChanged = state.lastChangedAsDate;
}
});
addRow(entityDisplay, prevState, prevLastChanged, new Date());
numTimelines++;
}.bind(this));
chart.draw(dataTable, {
height: 55 + numTimelines * 42,
// interactive properties require CSS, the JS api puts it on the document
// instead of inside our Shadow DOM.
enableInteractivity: false,
timeline: {
showRowLabels: stateHistory.length > 1
},
hAxis: {
format: 'H:mm'
},
});
/**************************************************
The following code gererates line line graphs for devices with continuous
values(which are devices that have a unit_of_measurment values defined).
On each graph the devices are grouped by their unit of measurement, eg. all
sensors measuring MB will be a separate line on single graph. The google
chart API takes data as a 2 dimensional array in the format:
DateTime, device1, device2, device3
2015-04-01, 1, 2, 0
2015-04-01, 0, 1, 0
2015-04-01, 2, 1, 1
NOTE: the first column is a javascript date objects.
The first thing we do is build up the data with rows for each time of a state
change and initialise the values to 0. THen we loop through each device and
fill in its data.
**************************************************/
while (this.$.line_graphs.firstChild) {
this.$.line_graphs.removeChild(this.$.line_graphs.firstChild);
}
for (var key in lineChartDevices) {
var deviceStates = lineChartDevices[key];
if(this.isSingleDevice) {
container = this.$.timeline;
}
else {
container = document.createElement("DIV");
this.$.line_graphs.appendChild(container);
}
var chart = new google.visualization.LineChart(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'datetime', id: 'Time' });
var options = {
legend: { position: 'top' },
titlePosition: 'none',
vAxes: {
// Adds units to the left hand side of the graph
0: {title: key}
},
hAxis: {
format: 'H:mm'
},
lineWidth: 1,
chartArea:{left:'60',width:"95%"},
explorer: {
actions: ['dragToZoom', 'rightClickToReset', 'dragToPan'],
keepInBounds: true,
axis: 'horizontal',
maxZoomIn: 0.1
}
};
if(this.isSingleDevice) {
options.legend.position = 'none';
options.vAxes[0].title = null;
options.chartArea.left = 40;
options.chartArea.height = '80%';
options.chartArea.top = 5;
options.enableInteractivity = false;
}
// Get a unique list of times of state changes for all the device
// for a particular unit of measureent.
var times = _.pluck(_.flatten(deviceStates), "lastChangedAsDate");
times = _.uniq(times, function(e) {
return e.getTime();
});
times = _.sortBy(times, function(o) { return o; });
var data = [];
var empty = new Array(deviceStates.length);
for(var i = 0; i < empty.length; i++) {
empty[i] = 0;
}
var timeIndex = 1;
var endDate = new Date();
var prevDate = times[0];
for(var i = 0; i < times.length; i++) {
var currentDate = new Date(prevDate);
// because we only have state changes we add an extra point at the same time
// that holds the previous state which makes the line display correctly
var beforePoint = new Date(times[i]);
data.push([beforePoint].concat(empty));
data.push([times[i]].concat(empty));
prevDate = times[i];
timeIndex++;
}
data.push([endDate].concat(empty));
var deviceCount = 0;
deviceStates.forEach(function(device) {
var attributes = device[device.length - 1].attributes;
dataTable.addColumn('number', attributes.friendly_name);
var currentState = 0;
var previousState = 0;
var lastIndex = 0;
var count = 0;
var prevTime = data[0][0];
device.forEach(function(state) {
currentState = state.state;
var start = state.lastChangedAsDate;
if(state.state == 'None') {
currentState = previousState;
}
for(var i = lastIndex; i < data.length; i++) {
data[i][1 + deviceCount] = parseFloat(previousState);
// this is where data gets filled in for each time for the particular device
// because for each time two entires were create we fill the first one with the
// previous value and the second one with the new value
if(prevTime.getTime() == data[i][0].getTime() && data[i][0].getTime() == start.getTime()) {
data[i][1 + deviceCount] = parseFloat(currentState);
lastIndex = i;
prevTime = data[i][0];
break;
}
prevTime = data[i][0];
}
previousState = currentState;
count++;
}.bind(this));
//fill in the rest of the Array
for(var i = lastIndex; i < data.length; i++) {
data[i][1 + deviceCount] = parseFloat(previousState);
}
deviceCount++;
}.bind(this));
dataTable.addRows(data);
chart.draw(dataTable, options);
}
this.isLoading = (!this.isLoadingData) ? false : true;
},
});
</script>
</polymer-element>

45
homeassistant/components/frontend/www_static/polymer/components/stream-status.html
View File

@ -1,11 +1,11 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/core-style/core-style.html">
<link rel="import" href="../bower_components/core-icons/notification-icons.html"> <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
<polymer-element name="stream-status"> <link rel="import" href="../bower_components/iron-icons/notification-icons.html">
<template>
<dom-module id="stream-status">
<style> <style>
:host { :host {
display: inline-block; display: inline-block;
@ -16,29 +16,31 @@
vertical-align: middle; vertical-align: middle;
} }
</style> </style>
<core-style ref='ha-paper-toggle'></core-style> <template>
<iron-icon icon="warning" hidden$="{{!hasError}}"></iron-icon>
<paper-toggle-button id="toggle" on-change='toggleChanged' hidden$="{{hasError}}"></paper-toggle-button>
</template>
</dom-module>
<core-icon icon="warning" hidden?="{{!hasError}}"></core-icon>
<paper-toggle-button id="toggle" on-change={{toggleChanged}} hidden?="{{hasError}}"></paper-toggle-button>
</template>
<script> <script>
var streamActions = window.hass.streamActions; var streamActions = window.hass.streamActions;
var authStore = window.hass.authStore; var authStore = window.hass.authStore;
var storeListenerMixIn = window.hass.storeListenerMixIn;
Polymer(Polymer.mixin({ Polymer({
isStreaming: false, is: 'stream-status',
hasError: false,
icon: "swap-vert-circle", behaviors: [StoreListenerBehavior],
color: 'red',
attached: function() { properties: {
this.listenToStores(true); isStreaming: {
}, type: Boolean,
value: false,
},
detached: function() { hasError: {
this.stopListeningToStores(); type: Boolean,
value: false,
},
}, },
streamStoreChanged: function(streamStore) { streamStoreChanged: function(streamStore) {
@ -53,6 +55,5 @@
streamActions.start(authStore.authToken); streamActions.start(authStore.authToken);
} }
}, },
}, storeListenerMixIn)); });
</script> </script>
</polymer-element>

18
homeassistant/components/frontend/www_static/polymer/dialogs/ha-dialog.html
View File

@ -1,18 +0,0 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-style/core-style.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog-transition.html">
<polymer-element name="ha-dialog" extends="paper-dialog">
<template>
<core-style ref='ha-dialog'></core-style>
<shadow></shadow>
</template>
<script>
Polymer({
layered: true,
backdrop: true,
transition: 'core-transition-bottom',
});
</script>
</polymer-element>

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

@ -1,120 +1,152 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="ha-dialog.html"> <link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<!-- <link rel="import" href="../bower_components/neon-animation/animations/slide-up-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-down-animation.html">
-->
<link rel="import" href="../cards/state-card-content.html"> <link rel="import" href="../cards/state-card-content.html">
<link rel="import" href="../components/state-timeline.html"> <link rel="import" href="../components/state-history-charts.html">
<link rel="import" href="../more-infos/more-info-content.html"> <link rel="import" href="../more-infos/more-info-content.html">
<polymer-element name="more-info-dialog"> <dom-module id="more-info-dialog">
<template> <style>
<ha-dialog id="dialog" on-core-overlay-open="{{dialogOpenChanged}}"> state-card-content {
<div> margin-bottom: 24px;
<state-card-content stateObj="{{stateObj}}" style='margin-bottom: 24px;'> }
</state-card-content>
<template if="{{hasHistoryComponent}}"> @media all and (max-width: 450px) {
<state-timeline stateHistory="{{stateHistory}}" isLoadingData="{{isLoadingHistoryData}}"></state-timeline> paper-dialog {
</template> margin: 0;
<more-info-content width: 100%;
stateObj="{{stateObj}}" max-height: calc(100% - 64px);
dialogOpen="{{dialogOpen}}"></more-info-content>
</div> position: fixed !important;
</ha-dialog> bottom: 0px;
</template> left: 0px;
right: 0px;
overflow: scroll;
}
}
</style>
<template>
<!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
<paper-dialog id="dialog" with-backdrop>
<h2><state-card-content state-obj="[[stateObj]]"></state-card-content></h2>
<div>
<template is='dom-if' if="[[hasHistoryComponent]]">
<state-history-charts state-history="[[stateHistory]]"
is-loading-data="[[isLoadingHistoryData]]"></state-history-charts>
</template>
<paper-dialog-scrollable>
<more-info-content state-obj="[[stateObj]]"
dialog-open="[[dialogOpen]]"></more-info-content>
</paper-dialog-scrollable>
</div>
</paper-dialog>
</template>
</dom-module>
<script> <script>
var storeListenerMixIn = window.hass.storeListenerMixIn; (function() {
var stateStore = window.hass.stateStore; var stateStore = window.hass.stateStore;
var stateHistoryStore = window.hass.stateHistoryStore; var stateHistoryStore = window.hass.stateHistoryStore;
var stateHistoryActions = window.hass.stateHistoryActions; var stateHistoryActions = window.hass.stateHistoryActions;
Polymer(Polymer.mixin({ Polymer({
entityId: false, is: 'more-info-dialog',
stateObj: null,
stateHistory: null,
hasHistoryComponent: false,
dialogOpen: false,
isLoadingHistoryData: false,
observe: { behaviors: [StoreListenerBehavior],
'stateObj.attributes': 'reposition'
},
created: function() { properties: {
this.dialogOpenChanged = this.dialogOpenChanged.bind(this); entityId: {
}, type: String,
},
attached: function() { stateObj: {
this.listenToStores(true); type: Object,
}, },
detached: function() { stateHistory: {
this.stopListeningToStores(); type: Object,
}, },
componentStoreChanged: function(componentStore) { isLoadingHistoryData: {
this.hasHistoryComponent = componentStore.isLoaded('history'); type: Boolean,
}, value: false,
},
stateStoreChanged: function() { hasHistoryComponent: {
var newState = this.entityId ? stateStore.get(this.entityId) : null; type: Boolean,
value: false,
},
if (newState !== this.stateObj) { dialogOpen: {
this.stateObj = newState; type: Boolean,
} value: false,
}, },
},
stateHistoryStoreChanged: function() { listeners: {
var newHistory; 'iron-overlay-opened': 'onIronOverlayOpened',
'iron-overlay-closed': 'onIronOverlayClosed'
},
if (this.hasHistoryComponent && this.entityId) { componentStoreChanged: function(componentStore) {
newHistory = stateHistoryStore.get(this.entityId); this.hasHistoryComponent = componentStore.isLoaded('history');
} else { },
newHistory = null;
}
this.isLoadingHistoryData = false;
if (newHistory !== this.stateHistory) {
this.stateHistory = newHistory;
}
},
dialogOpenChanged: function(ev) { stateStoreChanged: function() {
// we get CustomEvent, undefined and true/false from polymer… var newState = this.entityId ? stateStore.get(this.entityId) : null;
if (typeof ev === 'object') {
this.dialogOpen = ev.detail;
}
},
changeEntityId: function(entityId) { if (newState !== this.stateObj) {
this.entityId = entityId; this.stateObj = newState;
}
},
this.stateStoreChanged(); stateHistoryStoreChanged: function() {
this.stateHistoryStoreChanged(); var newHistory;
if (this.hasHistoryComponent && stateHistoryStore.isStale(entityId)) { if (this.hasHistoryComponent && this.entityId) {
this.isLoadingHistoryData = true; newHistory = [stateHistoryStore.get(this.entityId)];
stateHistoryActions.fetch(entityId); } else {
} newHistory = null;
}, }
/** this.isLoadingHistoryData = false;
* Whenever the attributes change, the more info component can
* hide or show elements. We will reposition the dialog.
*/
reposition: function(oldVal, newVal) {
// Only resize if already open
if(this.$.dialog.opened) {
this.job('resizeAfterLayoutChange', function() {
this.$.dialog.resizeHandler();
}.bind(this), 1000);
}
},
show: function(entityId) { if (newHistory !== this.stateHistory) {
this.changeEntityId(entityId); this.stateHistory = newHistory;
}
},
this.job('showDialogAfterRender', function() { onIronOverlayOpened: function() {
this.$.dialog.toggle(); this.dialogOpen = true;
}.bind(this)); },
},
}, storeListenerMixIn)); onIronOverlayClosed: function() {
this.dialogOpen = false;
},
changeEntityId: function(entityId) {
this.entityId = entityId;
this.stateStoreChanged();
this.stateHistoryStoreChanged();
if (this.hasHistoryComponent && stateHistoryStore.isStale(entityId)) {
this.isLoadingHistoryData = true;
stateHistoryActions.fetch(entityId);
}
},
show: function(entityId) {
this.changeEntityId(entityId);
this.debounce('showDialogAfterRender', function() {
this.$.dialog.toggle();
}.bind(this));
},
});
})();
</script> </script>
</polymer-element>

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

@ -1 +1 @@
Subproject commit 69ee1c49af12caf00655c66d56474b5c1bcac1c1 Subproject commit 015edf9c28a63122aa8f6bc153f0c0ddfaad1caa

86
homeassistant/components/frontend/www_static/polymer/home-assistant.html
View File

@ -1,41 +1,62 @@
<link rel="import" href="bower_components/polymer/polymer.html"> <link rel='import' href='bower_components/polymer/polymer.html'>
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="resources/home-assistant-style.html"> <link rel='import' href='bower_components/paper-styles/typography.html'>
<link rel="import" href="resources/home-assistant-js.html">
<link rel="import" href="layouts/login-form.html"> <link rel='import' href='resources/home-assistant-js.html'>
<link rel="import" href="layouts/home-assistant-main.html"> <link rel='import' href='resources/home-assistant-icons.html'>
<link rel='import' href='resources/store-listener-behavior.html'>
<link rel='import' href='layouts/login-form.html'>
<link rel='import' href='layouts/home-assistant-main.html'>
<link rel='import' href='resources/home-assistant-style.html'>
<dom-module id='home-assistant'>
<style>
:host {
font-family: 'Roboto', 'Noto', sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
</style>
<home-assistant-icons></home-assistant-icons>
<polymer-element name="home-assistant" attributes="auth">
<template> <template>
<style> <template is='dom-if' if='[[!loaded]]'>
:host {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
font-weight: 300;
}
</style>
<home-assistant-api auth="{{auth}}"></home-assistant-api>
<template if="{{!loaded}}">
<login-form></login-form> <login-form></login-form>
</template> </template>
<template if="{{loaded}}"> <template is='dom-if' if='[[loaded]]'>
<home-assistant-main></home-assistant-main> <home-assistant-main></home-assistant-main>
</template> </template>
</template> </template>
<script> </dom-module>
<script>
(function() {
var storeListenerMixIn = window.hass.storeListenerMixIn, var storeListenerMixIn = window.hass.storeListenerMixIn,
uiActions = window.hass.uiActions, uiActions = window.hass.uiActions,
preferenceStore = window.hass.preferenceStore; preferenceStore = window.hass.preferenceStore;
Polymer(Polymer.mixin({ Polymer({
loaded: false, is: 'home-assistant',
hostAttributes: {
auth: null,
},
behaviors: [StoreListenerBehavior],
properties: {
loaded: {
type: Boolean,
value: false,
},
},
ready: function() { ready: function() {
// remove the HTML init message // remove the HTML init message
@ -43,23 +64,16 @@
// if auth was given, tell the backend // if auth was given, tell the backend
if(this.auth) { if(this.auth) {
uiActions.validateAuth(this.auth, false); uiActions.validateAuth(this.auth, false);
} else if (preferenceStore.hasAuthToken) { } else if (preferenceStore.hasAuthToken) {
uiActions.validateAuth(preferenceStore.authToken, false); uiActions.validateAuth(preferenceStore.authToken, false);
} }
}, },
attached: function() {
this.listenToStores(true);
},
detached: function() {
this.stopListeningToStores();
},
syncStoreChanged: function(syncStore) { syncStoreChanged: function(syncStore) {
this.loaded = syncStore.initialLoadDone; this.loaded = syncStore.initialLoadDone;
}, },
}, storeListenerMixIn)); });
</script>
</polymer-element> })();
</script>

11
homeassistant/components/frontend/www_static/polymer/html-minifier.conf Normal file
View File

@ -0,0 +1,11 @@
{
"removeComments": true,
"removeCommentsFromCDATA": true,
"removeCDATASectionsFromCDATA": true,
"collapseWhitespace": true,
"collapseBooleanAttributes": true,
"removeScriptTypeAttributes": true,
"removeStyleLinkTypeAttributes": true,
"minifyJS": true,
"minifyCSS": true
}

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

@ -1,64 +1,50 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel='import' href='../bower_components/layout/layout.html'>
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html"> <link rel='import' href='../bower_components/paper-drawer-panel/paper-drawer-panel.html'>
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html"> <link rel='import' href='../bower_components/paper-header-panel/paper-header-panel.html'>
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html"> <link rel='import' href='../bower_components/paper-toolbar/paper-toolbar.html'>
<link rel="import" href="../bower_components/core-menu/core-menu.html"> <link rel='import' href='../bower_components/paper-menu/paper-menu.html'>
<link rel="import" href="../bower_components/core-style/core-style.html"> <link rel='import' href='../bower_components/iron-icon/iron-icon.html'>
<link rel="import" href="../bower_components/core-icon/core-icon.html"> <link rel='import' href='../bower_components/paper-item/paper-item.html'>
<link rel="import" href="../bower_components/paper-item/paper-item.html"> <link rel='import' href='../bower_components/paper-item/paper-icon-item.html'>
<link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel="import" href="../layouts/partial-states.html"> <link rel='import' href='../layouts/partial-states.html'>
<link rel="import" href="../layouts/partial-history.html"> <link rel='import' href='../layouts/partial-logbook.html'>
<link rel="import" href="../layouts/partial-logbook.html"> <link rel='import' href='../layouts/partial-history.html'>
<link rel="import" href="../layouts/partial-dev-fire-event.html"> <link rel='import' href='../layouts/partial-dev-call-service.html'>
<link rel="import" href="../layouts/partial-dev-call-service.html"> <link rel='import' href='../layouts/partial-dev-fire-event.html'>
<link rel="import" href="../layouts/partial-dev-set-state.html"> <link rel='import' href='../layouts/partial-dev-set-state.html'>
<link rel="import" href="../components/ha-notifications.html"> <link rel='import' href='../managers/notification-manager.html'>
<link rel="import" href="../components/ha-modals.html"> <link rel='import' href='../managers/modal-manager.html'>
<link rel="import" href="../components/stream-status.html">
<polymer-element name="home-assistant-main"> <link rel='import' href='../components/stream-status.html'>
<template>
<core-style ref="ha-headers"></core-style>
<dom-module id='home-assistant-main'>
<style> <style>
.sidenav { .sidenav {
background: #fafafa; background: #fafafa;
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
color: #757575;
overflow: hidden; overflow: hidden;
} }
core-toolbar { .sidenav paper-menu {
font-weight: normal; --paper-menu-color: var(--secondary-text-color);
padding-left: 24px; --paper-menu-background-color: #fafafa;
} }
.sidenav-menu { paper-icon-item {
overflow: auto; cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
} }
.sidenav-menu core-icon { .divider {
margin-right: 24px; border-top: 1px solid #e0e0e0;
}
.sidenav-menu > paper-item {
min-height: 53px;
} }
.text { .text {
padding: 16px; padding: 16px;
border-top: 1px solid #e0e0e0;
}
.label {
font-size: 14px; font-size: 14px;
} }
@ -67,192 +53,288 @@
} }
</style> </style>
<ha-notifications></ha-notifications> <template>
<ha-modals></ha-modals> <notification-manager></notification-manager>
<modal-manager></modal-manager>
<core-drawer-panel id="drawer" on-core-responsive-change="{{responsiveChanged}}"> <paper-drawer-panel id='drawer' narrow='{{narrow}}'>
<core-header-panel mode="scroll" drawer class='sidenav'> <paper-header-panel mode='scroll' drawer class='sidenav fit'>
<core-toolbar> <paper-toolbar>
Home Assistant <!-- forces paper toolbar to style title appropriate -->
</core-toolbar> <paper-icon-button hidden></paper-icon-button>
<core-menu id="menu" class="sidenav-menu" <div title>Home Assistant</div>
selected="0" excludedLocalNames="div" on-core-select="{{menuSelect}}" </paper-toolbar>
layout vertical>
<paper-item data-panel="states">
<core-icon icon="apps"></core-icon>
States
</paper-item>
<template repeat="{{activeFilters as filter}}"> <paper-menu id='menu' class='layout vertical fit'
<paper-item data-panel="states_{{filter}}"> selectable='[data-panel]' attr-for-selected='data-panel'
<core-icon icon="{{filter | filterIcon}}"></core-icon> on-iron-select='menuSelect' selected='[[selected]]'>
{{filter | filterName}} <paper-icon-item data-panel='states'>
<iron-icon item-icon icon='apps'></iron-icon> States
</paper-icon-item>
<template is='dom-repeat' items='{{activeFilters}}'>
<paper-icon-item data-panel$='[[filterType(item)]]'>
<iron-icon item-icon icon='[[filterIcon(item)]]'></iron-icon>
<span>[[filterName(item)]]</span>
</paper-icon-item>
</template>
<template is='dom-if' if='[[hasHistoryComponent]]'>
<paper-icon-item data-panel='history'>
<iron-icon item-icon icon='assessment'></iron-icon>
History
</paper-icon-item>
</template>
<template is='dom-if' if='[[hasLogbookComponent]]'>
<paper-icon-item data-panel='logbook'>
<iron-icon item-icon icon='list'></iron-icon>
Logbook
</paper-icon-item>
</template>
<div class='flex'></div>
<paper-icon-item data-panel='logout'>
<iron-icon item-icon icon='exit-to-app'></iron-icon>
Log Out
</paper-icon-item>
<paper-item class='divider horizontal layout justified'>
<div>Streaming updates</div>
<stream-status></stream-status>
</paper-item> </paper-item>
</template>
<template if="{{hasHistoryComponent}}"> <div class='text label divider'>Developer Tools</div>
<paper-item data-panel="history"> <div class='dev-tools layout horizontal justified'>
<core-icon icon="assessment"></core-icon> <paper-icon-button
History icon='settings-remote' data-panel$='[[selectedDevService]]'
</paper-item> on-click='handleDevClick'></paper-icon-button>
</template> <paper-icon-button
icon='settings-ethernet' data-panel$='[[selectedDevState]]'
on-click='handleDevClick'></paper-icon-button>
<paper-icon-button
icon='settings-input-antenna' data-panel$='[[selectedDevEvent]]'
on-click='handleDevClick'></paper-icon-button>
</div>
</paper-menu>
</paper-header-panel>
<template if="{{hasLogbookComponent}}"> <template is='dom-if' if='[[!hideStates]]'>
<paper-item data-panel="logbook"> <partial-states
<core-icon icon="list"></core-icon> main narrow='[[narrow]]'
Logbook filter='[[stateFilter]]'>
</paper-item> </partial-states>
</template> </template>
<div flex></div> <template is='dom-if' if='[[isSelectedLogbook]]'>
<partial-logbook main narrow='[[narrow]]'></partial-logbook>
</template>
<template is='dom-if' if='[[isSelectedHistory]]'>
<partial-history main narrow='[[narrow]]'></partial-history>
</template>
<template is='dom-if' if='[[isSelectedDevService]]'>
<partial-dev-call-service main narrow='[[narrow]]'></partial-dev-call-service>
</template>
<template is='dom-if' if='[[isSelectedDevEvent]]'>
<partial-dev-fire-event main narrow='[[narrow]]'></partial-dev-fire-event>
</template>
<template is='dom-if' if='[[isSelectedDevState]]'>
<partial-dev-set-state main narrow='[[narrow]]'></partial-dev-set-state>
</template>
</paper-drawer-panel>
<paper-item on-click="{{handleLogOutClick}}"> </template>
<core-icon icon="exit-to-app"></core-icon> </dom-module>
Log Out
</paper-item>
<div class='text' horizontal layout center>
<div flex>Streaming updates</div>
<stream-status></stream-status>
</div>
<div class='text label'>Developer Tools</div>
<div class='dev-tools' layout horizontal justified>
<paper-icon-button
icon="settings-remote" data-panel='call-service'
on-click="{{handleDevClick}}"></paper-icon-button>
<paper-icon-button
icon="settings-ethernet" data-panel='set-state'
on-click="{{handleDevClick}}"></paper-icon-button>
<paper-icon-button
icon="settings-input-antenna" data-panel='fire-event'
on-click="{{handleDevClick}}"></paper-icon-button>
</div>
</core-menu>
</core-header-panel>
<!--
This is the main partial, never remove it from the DOM but hide it
to speed up when people click on states.
-->
<partial-states hidden?="{{hideStates}}"
main narrow="{{narrow}}"
togglePanel="{{togglePanel}}"
filter="{{stateFilter}}">
</partial-states>
<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>
<template if="{{selected == 'set-state'}}">
<partial-dev-set-state main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-dev-set-state>
</template>
<template if="{{selected == 'call-service'}}">
<partial-dev-call-service main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-dev-call-service>
</template>
</core-drawer-panel>
</template>
<script> <script>
(function() { (function() {
var storeListenerMixIn = window.hass.storeListenerMixIn; var authActions = window.hass.authActions;
var authActions = window.hass.authActions;
var uiUtil = window.hass.uiUtil;
var uiConstants = window.hass.uiConstants;
Polymer(Polymer.mixin({ var uiUtil = window.hass.uiUtil;
selected: "states", var uiConstants = window.hass.uiConstants;
stateFilter: null,
narrow: false,
activeFilters: [],
hasHistoryComponent: false,
hasLogbookComponent: false,
isStreaming: false, Polymer({
hasStreamError: false, is: 'home-assistant-main',
hideStates: false, behaviors: [StoreListenerBehavior],
attached: function() { properties: {
this.togglePanel = this.togglePanel.bind(this); selected: {
type: String,
value: 'states',
},
this.listenToStores(true); stateFilter: {
}, type: String,
value: null,
},
detached: function() { narrow: {
this.stopListeningToStores(); type: Boolean,
}, },
stateStoreChanged: function(stateStore) { activeFilters: {
this.activeFilters = stateStore.domains.filter(function(domain) { type: Array,
return domain in uiConstants.STATE_FILTERS; value: [],
}).toArray(); },
},
componentStoreChanged: function(componentStore) { hasHistoryComponent: {
this.hasHistoryComponent = componentStore.isLoaded('history'); type: Boolean,
this.hasLogbookComponent = componentStore.isLoaded('logbook'); value: false,
}, },
streamStoreChanged: function(streamStore) { hasLogbookComponent: {
this.isStreaming = streamStore.isStreaming; type: Boolean,
this.hasStreamError = streamStore.hasError; value: false,
}, },
menuSelect: function(ev, detail, sender) { isStreaming: {
if (detail.isSelected) { type: Boolean,
this.selectPanel(detail.item); value: false,
} },
},
handleDevClick: function(ev, detail, sender) { hasStreamError: {
this.$.menu.selected = -1; type: Boolean,
this.selectPanel(ev.target); value: false,
}, },
selectPanel: function(element) { hideStates: {
var newChoice = element.dataset.panel; type: Boolean,
value: false,
},
if(newChoice !== this.selected) { selectedHistory: {
this.togglePanel(); type: String,
value: 'history',
readOnly: true,
},
isSelectedHistory: {
type: Boolean,
computed: 'computeIsSelected(selected, selectedHistory)',
},
selectedLogbook: {
type: String,
value: 'logbook',
readOnly: true,
},
isSelectedLogbook: {
type: Boolean,
computed: 'computeIsSelected(selected, selectedLogbook)',
},
selectedDevEvent: {
type: String,
value: 'devEvent',
readOnly: true,
},
isSelectedDevEvent: {
type: Boolean,
computed: 'computeIsSelected(selected, selectedDevEvent)',
},
selectedDevState: {
type: String,
value: 'devState',
readOnly: true,
},
isSelectedDevState: {
type: Boolean,
computed: 'computeIsSelected(selected, selectedDevState)',
},
selectedDevService: {
type: String,
value: 'devService',
readOnly: true,
},
isSelectedDevService: {
type: Boolean,
computed: 'computeIsSelected(selected, selectedDevService)',
},
},
listeners: {
'menu.core-select': 'menuSelect',
'open-menu': 'openDrawer',
},
stateStoreChanged: function(stateStore) {
this.activeFilters = stateStore.domains.filter(function(domain) {
return domain in uiConstants.STATE_FILTERS;
}).toArray();
},
componentStoreChanged: function(componentStore) {
this.hasHistoryComponent = componentStore.isLoaded('history');
this.hasLogbookComponent = componentStore.isLoaded('logbook');
},
menuSelect: function(ev, detail, sender) {
this.selectPanel(this.$.menu.selected);
},
handleDevClick: function(ev, detail, sender) {
// prevent it from highlighting first menu item
document.activeElement.blur();
this.selectPanel(ev.target.parentElement.dataset.panel);
},
selectPanel: function(newChoice) {
if (newChoice == 'logout') {
this.handleLogOut();
return;
} else if(newChoice == this.selected) {
return;
}
this.closeDrawer();
this.selected = newChoice; this.selected = newChoice;
if (newChoice.substr(0, 7) === 'states_') {
this.hideStates = false;
this.stateFilter = newChoice.substr(7);
} else {
this.hideStates = newChoice !== 'states';
this.stateFilter = null;
}
},
openDrawer: function() {
this.$.drawer.openDrawer();
},
closeDrawer: function() {
this.$.drawer.closeDrawer();
},
handleLogOut: function() {
authActions.logOut();
},
computeIsSelected: function(selected, selectedType) {
return selected === selectedType;
},
filterIcon: function(filter) {
return uiUtil.domainIcon(filter);
},
filterName: function(filter) {
return uiConstants.STATE_FILTERS[filter];
},
filterType: function(filter) {
return 'states_' + filter;
} }
});
if (this.selected.substr(0, 7) === 'states_') {
this.hideStates = false;
this.stateFilter = this.selected.substr(7);
} else {
this.hideStates = this.selected !== 'states';
this.stateFilter = null;
}
},
responsiveChanged: function(ev, detail, sender) {
this.narrow = detail.narrow;
},
togglePanel: function() {
this.$.drawer.togglePanel();
},
handleLogOutClick: function() {
authActions.logOut();
},
filterIcon: function(filter) {
return uiUtil.domainIcon(filter);
},
filterName: function(filter) {
return uiConstants.STATE_FILTERS[filter];
},
}, storeListenerMixIn));
})(); })();
</script> </script>
</polymer-element>

184
homeassistant/components/frontend/www_static/polymer/layouts/login-form.html
View File

@ -1,79 +1,79 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/layout/layout.html">
<link rel="import" href="../bower_components/core-label/core-label.html"> <!-- WIP <link rel="import" href="../bower_components/core-label/core-label.html"> -->
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html"> <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html"> <link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html"> <link rel="import" href="../bower_components/paper-input/paper-input-container.html">
<link rel="import" href="../bower_components/core-input/core-input.html"> <link rel="import" href="../bower_components/paper-input/paper-input-error.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html"> <link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<polymer-element name="login-form"> <link rel="import" href="../resources/store-listener-behavior.html">
<dom-module id="login-form">
<style>
#passwordDecorator {
display: block;
height: 57px;
}
paper-checkbox {
margin-right: 8px;
}
paper-checkbox::shadow #checkbox.checked {
background-color: #03a9f4;
border-color: #03a9f4;
}
paper-checkbox::shadow #ink[checked] {
color: #03a9f4;
}
paper-button {
margin-left: 72px;
}
.interact {
height: 125px;
}
#validatebox {
text-align: center;
}
.validatemessage {
margin-top: 10px;
}
</style>
<template> <template>
<style> <div class="layout horizontal center fit login" id="splash">
#passwordDecorator { <div class="layout vertical center flex">
display: block;
height: 57px;
}
paper-checkbox {
margin-right: 8px;
}
paper-checkbox::shadow #checkbox.checked {
background-color: #03a9f4;
border-color: #03a9f4;
}
paper-checkbox::shadow #ink[checked] {
color: #03a9f4;
}
paper-button {
margin-left: 72px;
}
.interact {
height: 125px;
}
#validatebox {
text-align: center;
}
.validatemessage {
margin-top: 10px;
}
</style>
<div layout horizontal center fit class='login' id="splash">
<div layout vertical center flex>
<img src="/static/favicon-192x192.png" /> <img src="/static/favicon-192x192.png" />
<h1>Home Assistant</h1> <h1>Home Assistant</h1>
<a href="#" id="hideKeyboardOnFocus"></a> <a href="#" id="hideKeyboardOnFocus"></a>
<div class='interact' layout vertical> <div class='interact'>
<div id='loginform' hidden$="[[isValidating]]">
<paper-input-container id="passwordDecorator" invalid="[[isInvalid]]">
<label>Password</label>
<input is="iron-input" type="password" id="passwordInput" />
<paper-input-error invalid="[[isInvalid]]">[[errorMessage]]</paper-input-error>
</paper-input-container>
<div id='loginform' hidden?="{{isValidating || isLoggedIn}}"> <div class="layout horizontal center">
<paper-input-decorator label="Password" id="passwordDecorator"> <paper-checkbox for id='rememberLogin'>Remember</paper-checkbox>
<input is="core-input" type="password" id="passwordInput" <paper-button id='loginButton'>Log In</paper-button>
value="{{authToken}}" on-keyup="{{passwordKeyup}}">
</paper-input-decorator>
<div horizontal center layout>
<core-label horizontal layout>
<paper-checkbox for checked={{rememberLogin}}></paper-checkbox>
Remember
</core-label>
<paper-button on-click={{validatePassword}}>Log In</paper-button>
</div> </div>
</div> </div>
<div id="validatebox" hidden?="{{!(isValidating || isLoggedIn)}}"> <div id="validatebox" hidden$="[[!isValidating]]">
<paper-spinner active="true"></paper-spinner><br /> <paper-spinner active="true"></paper-spinner><br />
<div class="validatemessage">{{spinnerMessage}}</div> <div class="validatemessage">Loading data…</div>
</div> </div>
</div> </div>
</div> </div>
@ -81,43 +81,53 @@
</template> </template>
<script> </dom-module>
var storeListenerMixIn = window.hass.storeListenerMixIn;
<script>
(function() {
var uiActions = window.hass.uiActions; var uiActions = window.hass.uiActions;
Polymer(Polymer.mixin({ Polymer({
MSG_VALIDATING: "Validating password…", is: 'login-form',
MSG_LOADING_DATA: "Loading data…",
authToken: "", behaviors: [StoreListenerBehavior],
rememberLogin: false,
isValidating: false, properties: {
isLoggedIn: false, isValidating: {
type: Boolean,
value: false,
},
spinnerMessage: "", isInvalid: {
type: Boolean,
value: false,
},
errorMessage: {
type: String,
value: '',
}
},
listeners: {
'passwordInput.keydown': 'passwordKeyDown',
'loginButton.click': 'validatePassword',
},
attached: function() { attached: function() {
this.focusPassword(); this.focusPassword();
this.listenToStores(true);
},
detached: function() {
this.stopListeningToStores();
}, },
authStoreChanged: function(authStore) { authStoreChanged: function(authStore) {
this.isValidating = authStore.isValidating; this.isValidating = authStore.isValidating;
this.isLoggedIn = authStore.isLoggedIn;
this.spinnerMessage = this.isValidating ? this.MSG_VALIDATING : this.MSG_LOADING_DATA;
if (authStore.lastAttemptInvalid) { if (authStore.lastAttemptInvalid) {
this.$.passwordDecorator.error = authStore.lastAttemptMessage; this.errorMessage = authStore.lastAttemptMessage;
this.$.passwordDecorator.isInvalid = true; this.isInvalid = true;
} }
if (!(this.isValidating && this.isLoggedIn)) { if (!this.isValidating) {
this.job('focusPasswordBox', this.focusPassword.bind(this)); setTimeout(this.focusPassword.bind(this), 0);
} }
}, },
@ -125,23 +135,25 @@
this.$.passwordInput.focus(); this.$.passwordInput.focus();
}, },
passwordKeyup: function(ev) { passwordKeyDown: function(ev) {
// validate on enter // validate on enter
if(ev.keyCode === 13) { if(ev.keyCode === 13) {
this.validatePassword(); this.validatePassword();
ev.preventDefault();
// clear error after we start typing again // clear error after we start typing again
} else if(this.$.passwordDecorator.isInvalid) { } else if(this.isInvalid) {
this.$.passwordDecorator.isInvalid = false; this.isInvalid = false;
} }
}, },
validatePassword: function() { validatePassword: function() {
this.$.hideKeyboardOnFocus.focus(); this.$.hideKeyboardOnFocus.focus();
uiActions.validateAuth(this.authToken, this.rememberLogin); uiActions.validateAuth(this.$.passwordInput.value, this.$.rememberLogin.checked);
}, },
}, storeListenerMixIn)); });
</script> })();
</polymer-element> </script>

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

@ -1,28 +1,41 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel="import" href="../bower_components/core-scroll-header-panel/core-scroll-header-panel.html"> <link rel='import' href='../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html'>
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/core-style/core-style.html"> <link rel='import' href='../bower_components/paper-toolbar/paper-toolbar.html'>
<link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
<polymer-element name="partial-base" attributes="narrow togglePanel" noscript> <dom-module id='partial-base'>
<template> <template>
<core-style ref="ha-headers"></core-style> <paper-scroll-header-panel class='fit'>
<paper-toolbar>
<paper-icon-button icon='menu' hidden$='[[!narrow]]' on-click='toggleMenu'></paper-icon-button>
<div title>
<content select='[header-title]'></content>
</div>
<content select='[header-buttons]'></content>
</paper-toolbar>
<core-scroll-header-panel fit fixed="{{!narrow}}"> <content></content>
<core-toolbar> </paper-scroll-header-panel>
<paper-icon-button </template>
id="navicon" icon="menu" hidden?="{{!narrow}}" </dom-module>
on-click="{{togglePanel}}"></paper-icon-button>
<div flex>
<content select="[header-title]"></content>
</div>
<content select="[header-buttons]"></content>
</core-toolbar>
<content></content> <script>
(function() {
Polymer({
is: 'partial-base',
</core-scroll-header-panel> properties: {
</template> narrow: {
</polymer> type: Boolean,
value: false,
},
},
toggleMenu: function() {
this.fire('open-menu');
},
});
})();
</script>

141
homeassistant/components/frontend/www_static/polymer/layouts/partial-dev-call-service.html
View File

@ -2,87 +2,100 @@
<link rel="import" href="../bower_components/paper-button/paper-button.html"> <link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html"> <link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html"> <link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="./partial-base.html"> <link rel="import" href="./partial-base.html">
<link rel="import" href="../components/services-list.html"> <link rel="import" href="../components/services-list.html">
<polymer-element name="partial-dev-call-service" attributes="narrow togglePanel"> <dom-module id="partial-dev-call-service">
<template>
<style> <style>
.form { .form {
padding: 24px; padding: 24px;
background-color: white; background-color: white;
} }
.ha-form {
margin-right: 16px;
}
</style> </style>
<template>
<partial-base narrow="[[narrow]]">
<span header-title>Call Service</span>
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}"> <div class='form fit'>
<span header-title>Call Service</span> <p>
Call a service from a component.
</p>
<div class='form' fit> <div class$='[[computeFormClasses(narrow)]]'>
<p> <div class='ha-form flex'>
Call a service from a component. <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
</p> <paper-input label="Service" value='{{service}}'></paper-input>
<paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
<paper-button on-click='callService' raised>Call Service</paper-button>
</div>
<div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}"> <div>
<div class='ha-form' flex?="{{!narrow}}"> <h4>Available services:</h4>
<paper-input id="inputDomain" label="Domain" floatingLabel="true" autofocus required></paper-input> <services-list on-service-selected='serviceSelected'></services-list>
<paper-input id="inputService" label="Service" floatingLabel="true" required></paper-input> </div>
<paper-input-decorator
label="Service Data (JSON, optional)"
floatingLabel="true">
<paper-autogrow-textarea id="inputDataWrapper">
<textarea id="inputData"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button on-click={{clickCallService}}>Call Service</paper-button>
</div>
<div class='sidebar'>
<b>Available services:</b>
<services-list cbServiceClicked={{serviceSelected}}></services-list>
</div> </div>
</div> </div>
</div> </partial-base>
</template>
</dom-module>
</partial-base>
</template>
<script> <script>
var serviceActions = window.hass.serviceActions; (function() {
var serviceActions = window.hass.serviceActions;
Polymer({ Polymer({
ready: function() { is: 'partial-dev-call-service',
// to ensure callback methods work..
this.serviceSelected = this.serviceSelected.bind(this);
},
setService: function(domain, service) { properties: {
this.$.inputDomain.value = domain; narrow: {
this.$.inputService.value = service; type: Boolean,
}, value: false,
},
serviceSelected: function(domain, service) { domain: {
this.setService(domain, service); type: String,
}, value: '',
},
clickCallService: function() { service: {
try { type: String,
serviceActions.callService( value: '',
this.$.inputDomain.value, },
this.$.inputService.value,
this.$.inputData.value ? JSON.parse(this.$.inputData.value) : {});
} catch (err) {
alert("Error parsing JSON: " + err);
}
}
}); serviceData: {
type: String,
value: '',
},
},
serviceSelected: function(ev) {
this.domain = ev.detail.domain;
this.service = ev.detail.service;
},
callService: function() {
var serviceData;
try {
serviceData = this.serviceData ? JSON.parse(this.serviceData): {};
} catch (err) {
alert("Error parsing JSON: " + err);
return;
}
serviceActions.callService(this.domain, this.service, serviceData);
},
computeFormClasses: function(narrow) {
return 'layout ' + (narrow ? 'vertical' : 'horizontal');
},
});
})();
</script> </script>
</polymer-element>

125
homeassistant/components/frontend/www_static/polymer/layouts/partial-dev-fire-event.html
View File

@ -2,79 +2,90 @@
<link rel="import" href="../bower_components/paper-button/paper-button.html"> <link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html"> <link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html"> <link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="./partial-base.html"> <link rel="import" href="./partial-base.html">
<link rel="import" href="../components/events-list.html"> <link rel="import" href="../components/events-list.html">
<polymer-element name="partial-dev-fire-event" attributes="narrow togglePanel"> <dom-module id="partial-dev-fire-event">
<template>
<style> <style>
.form { .form {
padding: 24px; padding: 24px;
background-color: white; background-color: white;
} }
.ha-form {
margin-right: 16px;
}
</style> </style>
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}"> <template>
<span header-title>Fire Event</span> <partial-base narrow="{{narrow}}">
<span header-title>Fire Event</span>
<div class='form' fit> <div class='form fit'>
<p> <p>
Fire an event on the event bus. Fire an event on the event bus.
</p> </p>
<div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}"> <div class$='[[computeFormClasses(narrow)]]'>
<div class='ha-form' flex?="{{!narrow}}"> <div class='ha-form flex'>
<paper-input <paper-input label="Event Type" autofocus required value='{{eventType}}'></paper-input>
id="inputType" label="Event Type" floatingLabel="true" <paper-textarea label="Event Data (JSON, optional)" value='{{eventData}}'></paper-textarea>
autofocus required></paper-input> <paper-button on-click='fireEvent' raised>Fire Event</paper-button>
<paper-input-decorator </div>
label="Event Data (JSON, optional)"
floatingLabel="true">
<paper-autogrow-textarea id="inputDataWrapper"> <div>
<textarea id="inputData"></textarea> <h4>Available events:</h4>
</paper-autogrow-textarea> <events-list on-event-selected='eventSelected'></event-list>
</paper-input-decorator> </div>
<paper-button on-click={{clickFireEvent}}>Fire Event</paper-button>
</div>
<div class='sidebar'>
<b>Available events:</b>
<events-list cbEventClicked={{eventSelected}}></event-list>
</div> </div>
</div> </div>
</div> </partial-base>
</partial-base>
</template>
</dom-module>
</template>
<script> <script>
var eventActions = window.hass.eventActions; (function() {
var eventActions = window.hass.eventActions;
Polymer({ Polymer({
ready: function() { is: 'partial-dev-fire-event',
// to ensure callback methods work..
this.eventSelected = this.eventSelected.bind(this);
},
eventSelected: function(eventType) { properties: {
this.$.inputType.value = eventType; eventType: {
}, type: String,
value: '',
},
clickFireEvent: function() { eventData: {
try { type: String,
eventActions.fire( value: '',
this.$.inputType.value, },
this.$.inputData.value ? JSON.parse(this.$.inputData.value) : {}); },
} catch (err) {
alert("Error parsing JSON: " + err); eventSelected: function(ev) {
} this.eventType = ev.detail.eventType;
} },
});
fireEvent: function() {
var eventData;
try {
eventData = this.eventData ? JSON.parse(this.eventData) : {};
} catch (err) {
alert("Error parsing JSON: " + err);
return;
}
eventActions.fire(this.eventType, eventData);
},
computeFormClasses: function(narrow) {
return 'layout ' + (narrow ? 'vertical' : 'horizontal');
},
});
})();
</script> </script>
</polymer-element>

158
homeassistant/components/frontend/www_static/polymer/layouts/partial-dev-set-state.html
View File

@ -2,105 +2,109 @@
<link rel="import" href="../bower_components/paper-button/paper-button.html"> <link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html"> <link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html"> <link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="./partial-base.html"> <link rel="import" href="./partial-base.html">
<link rel="import" href="../components/entity-list.html"> <link rel="import" href="../components/entity-list.html">
<polymer-element name="partial-dev-set-state" attributes="narrow togglePanel"> <dom-module id="partial-dev-set-state">
<template>
<style> <style>
.form { .form {
padding: 24px; padding: 24px;
background-color: white; background-color: white;
} }
.ha-form {
margin-right: 16px;
}
</style> </style>
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}"> <template>
<span header-title>Set State</span> <partial-base narrow="[[narrow]]">
<span header-title>Set State</span>
<div class='form' fit> <div class='form fit'>
<div> <div>
Set the representation of a device within Home Assistant.<br /> Set the representation of a device within Home Assistant.<br />
This will not communicate with the actual device. This will not communicate with the actual device.
</div>
<div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}">
<div class='ha-form' flex?="{{!narrow}}">
<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">
<paper-autogrow-textarea id="inputDataWrapper">
<textarea id="inputData"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button on-click={{clickSetState}}>Set State</paper-button>
</div> </div>
<div class='sidebar'> <div class$='[[computeFormClasses(narrow)]]'>
<b>Current entities:</b> <div class='ha-form flex'>
<entity-list cbEntityClicked={{entitySelected}}></entity-list> <paper-input label="Entity ID" autofocus required value='{{entityId}}'></paper-input>
<paper-input label="State" required value='{{state}}'></paper-input>
<paper-textarea label="State attributes (JSON, optional)" value='{{stateAttributes}}'></paper-textarea>
<paper-button on-click='handleSetState' raised>Set State</paper-button>
</div>
<div class='sidebar'>
<h4>Current entities:</h4>
<entity-list on-entity-selected='entitySelected'></entity-list>
</div>
</div> </div>
</div> </div>
</partial-base>
</template>
</dom-module>
</div>
</partial-base>
</template>
<script> <script>
var stateStore = window.hass.stateStore; (function() {
var stateActions = window.hass.stateActions; var stateStore = window.hass.stateStore;
var stateActions = window.hass.stateActions;
Polymer({ Polymer({
ready: function() { is: 'partial-dev-set-state',
// to ensure callback methods work..
this.entitySelected = this.entitySelected.bind(this);
},
setEntityId: function(entityId) { properties: {
this.$.inputEntityID.value = entityId; entityId: {
}, type: String,
value: '',
},
setState: function(state) { state: {
this.$.inputState.value = state; type: String,
}, value: '',
},
setStateData: function(stateData) { stateAttributes: {
var value = stateData ? JSON.stringify(stateData, null, ' ') : ""; type: String,
value: '',
},
},
this.$.inputData.value = value; setStateData: function(stateData) {
var value = stateData ? JSON.stringify(stateData, null, ' ') : "";
// not according to the spec but it works... this.$.inputData.value = value;
this.$.inputDataWrapper.update(this.$.inputData);
},
entitySelected: function(entityId) { // not according to the spec but it works...
this.setEntityId(entityId); this.$.inputDataWrapper.update(this.$.inputData);
},
var state = stateStore.get(entityId); entitySelected: function(ev) {
this.setState(state.state); var state = stateStore.get(ev.detail.entityId);
this.setStateData(state.attributes);
},
clickSetState: function(ev) { this.entityId = state.entityId;
try { this.state = state.state;
stateActions.set( this.stateAttributes = JSON.stringify(state.attributes, null, ' ');
this.$.inputEntityID.value, },
this.$.inputState.value,
this.$.inputData.value ? JSON.parse(this.$.inputData.value) : {} handleSetState: function() {
); var attr;
} catch (err) { try {
alert("Error parsing JSON: " + err); attr = this.stateAttributes ? JSON.parse(this.stateAttributes) : {};
} } catch (err) {
} alert("Error parsing JSON: " + err);
}); return;
}
stateActions.set(this.entityId, this.state, attr);
},
computeFormClasses: function(narrow) {
return 'layout ' + (narrow ? 'vertical' : 'horizontal');
},
});
})();
</script> </script>
</polymer-element>

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

@ -1,13 +1,11 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-style/core-style.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="./partial-base.html"> <link rel="import" href="./partial-base.html">
<link rel="import" href="../components/state-timeline.html"> <link rel="import" href="../components/state-history-charts.html">
<polymer-element name="partial-history" attributes="narrow togglePanel"> <dom-module id="partial-history">
<template>
<style> <style>
.content { .content {
background-color: white; background-color: white;
@ -17,33 +15,42 @@
padding: 8px; padding: 8px;
} }
</style> </style>
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}"> <template>
<span header-title>History</span> <partial-base narrow="[[narrow]]">
<span header-title>History</span>
<span header-buttons> <paper-icon-button icon="refresh" header-buttons
<paper-icon-button icon="refresh" on-click="handleRefreshClick"></paper-icon-button>
on-click="{{handleRefreshClick}}"></paper-icon-button>
</span>
<div flex class="{{ {content: true, narrow: narrow, wide: !narrow} | tokenList }}"> <div class$="[[computeContentClasses(narrow)]]">
<state-timeline stateHistory="{{stateHistory}}" isLoadingData="{{isLoadingData}}"></state-timeline> <state-history-charts state-history="[[stateHistory]]"
</div> is-loading-data="[[isLoadingData]]"></state-history-charts>
</partial-base> </div>
</template> </partial-base>
</template>
</dom-module>
<script> <script>
var storeListenerMixIn = window.hass.storeListenerMixIn; (function() {
var stateHistoryActions = window.hass.stateHistoryActions; var stateHistoryActions = window.hass.stateHistoryActions;
Polymer(Polymer.mixin({ Polymer({
stateHistory: null, is: 'partial-history',
isLoadingData: false,
attached: function() { behaviors: [StoreListenerBehavior],
this.listenToStores(true);
},
detached: function() { properties: {
this.stopListeningToStores(); narrow: {
type: Boolean,
},
stateHistory: {
type: Object,
},
isLoadingData: {
type: Boolean,
value: false,
},
}, },
stateHistoryStoreChanged: function(stateHistoryStore) { stateHistoryStoreChanged: function(stateHistoryStore) {
@ -62,6 +69,10 @@
this.isLoadingData = true; this.isLoadingData = true;
stateHistoryActions.fetchAll(); stateHistoryActions.fetchAll();
}, },
}, storeListenerMixIn));
</script> computeContentClasses: function(narrow) {
</polymer> return 'flex content ' + (narrow ? 'narrow' : 'wide');
},
});
})();
</script>

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

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

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

@ -1,18 +1,21 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icon/core-icon.html"> <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/core-style/core-style.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="./partial-base.html"> <link rel="import" href="./partial-base.html">
<link rel="import" href="../components/state-cards.html"> <link rel="import" href="../components/state-cards.html">
<polymer-element name="partial-states" attributes="narrow togglePanel filter"> <dom-module id="partial-states">
<template>
<core-style ref="ha-animations"></core-style>
<style> <style>
.listening { .content-wrapper {
position: relative;
height: 100%;
background-color: #E5E5E5;
}
.content-wrapper ::content .listening {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -36,65 +39,124 @@
} }
</style> </style>
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}"> <template>
<span header-title>{{headerTitle}}</span> <partial-base narrow="[[narrow]]">
<span header-title>{{headerTitle}}</span>
<span header-buttons> <span header-buttons>
<paper-icon-button icon="refresh" class="{{isFetching && 'ha-spin'}}" <paper-icon-button icon="refresh" class$="[[computeRefreshButtonClass(isFetching)]]"
on-click="{{handleRefreshClick}}" hidden?="{{isStreaming}}"></paper-icon-button> on-click="handleRefresh" hidden$="[[isStreaming]]"></paper-icon-button>
<paper-icon-button icon="{{isListening ? 'av:mic-off' : 'av:mic' }}" hidden?={{!canListen}} <paper-icon-button icon="[[listenButtonIcon]]" hidden$={{!canListen}}
on-click="{{handleListenClick}}"></paper-icon-button> on-click="handleListenClick"></paper-icon-button>
</span> </span>
<div class='listening' hidden?="{{!isListening && !isTransmitting}}" on-click={{handleListenClick}}> <div class='content-wrapper'>
<core-icon icon="av:hearing"></core-icon> {{finalTranscript}} <div class='listening' hidden$="[[!showListenInterface]]"
<span class='interimTranscript'>{{interimTranscript}}</span> on-click="handleListenClick">
<paper-spinner active?="{{isTransmitting}}"></paper-spinner> <iron-icon icon="av:hearing"></iron-icon> <span>{{finalTranscript}}</span>
</div> <span class='interimTranscript'>[[interimTranscript]]</span>
<paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
</div>
<state-cards states="[[states]]">
<h3>Hi there!</h3>
<p>
It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.
</p>
<p>
Please see the <a href='https://home-assistant.io/getting-started/' target='_blank'>Getting Started</a> section on how to setup your devices.
</p>
</state-cards>
</div>
</partial-base>
</template>
</dom-module>
<state-cards states="{{states}}">
<h3>Hi there!</h3>
<p>
It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.
</p>
<p>
Please see the <a href='https://home-assistant.io/getting-started/' target='_blank'>Getting Started</a> section on how to setup your devices.
</p>
</state-cards>
</partial-base>
</template>
<script> <script>
(function(){ (function(){
var storeListenerMixIn = window.hass.storeListenerMixIn;
var syncActions = window.hass.syncActions; var syncActions = window.hass.syncActions;
var voiceActions = window.hass.voiceActions; var voiceActions = window.hass.voiceActions;
var stateStore = window.hass.stateStore; var stateStore = window.hass.stateStore;
var uiConstants = window.hass.uiConstants; var uiConstants = window.hass.uiConstants;
Polymer(Polymer.mixin({ Polymer({
headerTitle: "States", is: 'partial-states',
states: [],
isFetching: false,
isStreaming: false,
canListen: false, behaviors: [StoreListenerBehavior],
voiceSupported: false,
hasConversationComponent: false,
isListening: false,
isTransmittingVoice: false,
interimTranscript: '',
finalTranscript: '',
ready: function() { properties: {
this.voiceSupported = voiceActions.isSupported(); /**
}, * Title to show in the header
*/
headerTitle: {
type: String,
value: 'States',
},
attached: function() { /**
this.listenToStores(true); * If header is to be shown in narrow mode.
}, */
narrow: {
type: Boolean,
value: false,
},
detached: function() { filter: {
this.stopListeningToStores(); type: String,
value: null,
observer: 'filterChanged',
},
voiceSupported: {
type: Boolean,
value: voiceActions.isSupported(),
},
isFetching: {
type: Boolean,
value: false,
},
isStreaming: {
type: Boolean,
value: false,
},
canListen: {
type: Boolean,
value: false,
},
isListening: {
type: Boolean,
value: false,
},
isTransmitting: {
type: Boolean,
value: false,
},
interimTranscript: {
type: String,
value: '',
},
finalTranscript: {
type: String,
value: '',
},
listenButtonIcon: {
type: String,
computed: 'computeListenButtonIcon(isListening)'
},
showListenInterface: {
type: Boolean,
computed: 'computeShowListenInterface(isListening,isTransmitting)'
}
}, },
componentStoreChanged: function(componentStore) { componentStoreChanged: function(componentStore) {
@ -143,12 +205,12 @@
return !(state.domain in uiConstants.STATE_FILTERS); return !(state.domain in uiConstants.STATE_FILTERS);
}); });
} }
this.states = states.toArray().filter( this.states = states.toArray().filter(
function (el) {return !el.attributes.hidden}); function (el) {return !el.attributes.hidden;});
}, },
handleRefreshClick: function() { handleRefresh: function() {
syncActions.fetchAll(); syncActions.fetchAll();
}, },
@ -159,7 +221,20 @@
voiceActions.listen(); voiceActions.listen();
} }
}, },
}, storeListenerMixIn));
computeListenButtonIcon: function(isListening) {
return isListening ? 'av:mic-off' : 'av:mic';
},
computeShowListenInterface: function(isListening,isTransmitting) {
return isListening || isTransmitting;
},
computeRefreshButtonClass: function(isFetching) {
if (isFetching) {
return 'ha-spin';
}
},
});
})(); })();
</script> </script>
</polymer>

19
homeassistant/components/frontend/www_static/polymer/components/ha-modals.html → homeassistant/components/frontend/www_static/polymer/managers/modal-manager.html
View File

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

47
homeassistant/components/frontend/www_static/polymer/managers/notification-manager.html Normal file
View File

@ -0,0 +1,47 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<dom-module id="notification-manager">
<style>
paper-toast {
z-index: 1;
}
</style>
<template>
<paper-toast id="toast" text='{{text}}'></paper-toast>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'notification-manager',
behaviors: [StoreListenerBehavior],
properties: {
text: {
type: String,
value: '',
},
lastId: {
type: Number,
},
},
notificationStoreChanged: function(notificationStore) {
if (notificationStore.hasNewNotifications(this.lastId)) {
var notification = notificationStore.lastNotification;
this.lastId = notification.id;
this.text = notification.message;
this.$.toast.show();
}
},
});
})();
</script>

120
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-configurator.html
View File

@ -1,9 +1,9 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel="import" href="../bower_components/paper-button/paper-button.html"> <link rel='import' href='../bower_components/paper-button/paper-button.html'>
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<polymer-element name="more-info-configurator" attributes="stateObj"> <link rel='import' href='../components/loading-box.html'>
<template>
<dom-module id='more-info-configurator'>
<style> <style>
p { p {
margin: 8px 0; margin: 8px 0;
@ -25,62 +25,78 @@
text-align: center; text-align: center;
height: 41px; height: 41px;
} }
p.submit paper-spinner {
margin-right: 16px;
}
p.submit span {
display: inline-block;
vertical-align: top;
margin-top: 6px;
}
</style> </style>
<template>
<div class='layout vertical'>
<template is='dom-if' if='[[isConfigurable]]'>
<div layout vertical> <p hidden$='[[!stateObj.attributes.description]]'>[[stateObj.attributes.description]]</p>
<template if="{{stateObj.state == 'configure'}}">
<p hidden?="{{!stateObj.attributes.description}}"> <p class='error' hidden$='[[!stateObj.attributes.errors]]'>[[stateObj.attributes.errors]]</p>
{{stateObj.attributes.description}}
</p>
<p class='error' hidden?="{{!stateObj.attributes.errors}}"> <p class='center' hidden$='[[!stateObj.attributes.description_image]]'>
{{stateObj.attributes.errors}} <img src='[[stateObj.attributes.description_image]]' />
</p> </p>
<p class='center' hidden?="{{!stateObj.attributes.description_image}}"> <p class='submit'>
<img src='{{stateObj.attributes.description_image}}' /> <paper-button raised on-click='submitClicked'
</p> hidden$='[[isConfiguring]]'>[[submitCaption]]</paper-button>
<p class='submit'> <loading-box hidden$='[[!isConfiguring]]'>Configuring</loading-box>
<paper-button raised on-click="{{submitClicked}}" </p>
hidden?="{{action !== 'display'}}">
{{stateObj.attributes.submit_caption || "Set configuration"}}
</paper-button>
<span hidden?="{{action !== 'configuring'}}"> </template>
<paper-spinner active="true"></paper-spinner><span>Configuring…</span> </div>
</span> </template>
</p> </dom-module>
</template>
</div>
</template>
<script> <script>
var storeListenerMixIn = window.hass.storeListenerMixIn; (function() {
var syncActions = window.hass.syncActions; var syncActions = window.hass.syncActions;
var serviceActions = window.hass.serviceActions; var serviceActions = window.hass.serviceActions;
Polymer(Polymer.mixin({ Polymer({
action: "display", is: 'more-info-configurator',
isStreaming: false,
attached: function() { behaviors: [StoreListenerBehavior],
this.listenToStores(true);
properties: {
stateObj: {
type: Object,
},
action: {
type: String,
value: 'display',
},
isStreaming: {
type: Boolean,
value: false,
},
isConfigurable: {
type: Boolean,
computed: 'computeIsConfigurable(stateObj)',
},
isConfiguring: {
type: Boolean,
value: false,
},
submitCaption: {
type: String,
computed: 'computeSubmitCaption(stateObj)',
},
}, },
detached: function() { computeIsConfigurable: function(stateObj) {
this.stopListeningToStores(); return stateObj.state == 'configure';
},
computeSubmitCaption: function(stateObj) {
return stateObj.attributes.submit_caption || 'Set configuration';
}, },
streamStoreChanged: function(streamStore) { streamStoreChanged: function(streamStore) {
@ -88,15 +104,15 @@
}, },
submitClicked: function() { submitClicked: function() {
this.action = "configuring"; this.isConfiguring = true;
var data = { var data = {
configure_id: this.stateObj.attributes.configure_id configure_id: this.stateObj.attributes.configure_id
}; };
serviceActions.callService('configurator', 'configure', data).then( serviceActions.callService('configurator', 'configure', data).then(
function() { function() {
this.action = 'display'; this.isConfiguring = false;
if (!this.isStreaming) { if (!this.isStreaming) {
syncActions.fetchAll(); syncActions.fetchAll();
@ -104,9 +120,9 @@
}.bind(this), }.bind(this),
function() { function() {
this.action = 'display'; this.isConfiguring = false;
}.bind(this)); }.bind(this));
}, },
}, storeListenerMixIn)); });
})();
</script> </script>
</polymer-element>

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

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

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

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

62
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-group.html
View File

@ -2,8 +2,7 @@
<link rel="import" href="../cards/state-card-content.html"> <link rel="import" href="../cards/state-card-content.html">
<polymer-element name="more-info-group" attributes="stateObj"> <dom-module id="more-info-group">
<template>
<style> <style>
.child-card { .child-card {
margin-bottom: 8px; margin-bottom: 8px;
@ -13,37 +12,44 @@
margin-bottom: 0; margin-bottom: 0;
} }
</style> </style>
<template>
<template repeat="{{states as state}}"> <template is='dom-repeat' items="[[states]]" as='state'>
<state-card-content stateObj="{{state}}" class='child-card'> <div class='child-card'>
</state-card-content> <state-card-content state-obj="[[state]]"></state-card-content>
</div>
</template>
</template> </template>
</template> </dom-module>
<script> <script>
var storeListenerMixIn = window.hass.storeListenerMixIn; (function() {
var stateStore = window.hass.stateStore; var stateStore = window.hass.stateStore;
Polymer(Polymer.mixin({ Polymer({
attached: function() { is: 'more-info-group',
this.listenToStores(true);
},
detached: function() { behaviors: [StoreListenerBehavior],
this.stopListeningToStores();
},
stateStoreChanged: function() { properties: {
this.updateStates(); stateObj: {
}, type: Object,
observer: 'updateStates',
},
stateObjChanged: function() { states: {
this.updateStates(); type: Array,
}, value: [],
},
},
updateStates: function() { stateStoreChanged: function() {
this.states = this.stateObj && this.stateObj.attributes.entity_id ? this.updateStates();
stateStore.gets(this.stateObj.attributes.entity_id).toArray() : []; },
},
}, storeListenerMixIn)); updateStates: function() {
this.states = this.stateObj && this.stateObj.attributes.entity_id ?
stateStore.gets(this.stateObj.attributes.entity_id).toArray() : [];
},
});
})();
</script> </script>
</polymer-element>

120
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html
View File

@ -1,10 +1,9 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel="import" href="../bower_components/paper-slider/paper-slider.html"> <link rel='import' href='../bower_components/paper-slider/paper-slider.html'>
<link rel="import" href="../bower_components/color-picker-element/dist/color-picker.html"> <link rel='import' href='../bower_components/color-picker-element/dist/color-picker.html'>
<polymer-element name="more-info-light" attributes="stateObj"> <dom-module id='more-info-light'>
<template>
<style> <style>
.brightness { .brightness {
margin-bottom: 8px; margin-bottom: 8px;
@ -26,81 +25,92 @@
max-height: 0px; max-height: 0px;
overflow: hidden; overflow: hidden;
transition: max-height .5s ease-in .3s; transition: max-height .5s ease-in;
} }
:host-context(.has-brightness) .brightness { .has-brightness .brightness {
max-height: 500px; max-height: 500px;
} }
:host-context(.has-xy_color) color-picker { .has-xy_color color-picker {
max-height: 500px; max-height: 500px;
} }
</style> </style>
<div> <template>
<div class='brightness'> <div class$='[[computeClassNames(stateObj)]]'>
<div center horizontal layout> <div class='brightness center horizontal layout'>
<div>Brightness</div> <div>Brightness</div>
<paper-slider <paper-slider
max="255" flex id='brightness' value='{{brightnessSliderValue}}' max='255' id='brightness' value='{{brightnessSliderValue}}'
on-change="{{brightnessSliderChanged}}"> on-change='brightnessSliderChanged' class='flex'>
</paper-slider> </paper-slider>
</div> </div>
<color-picker on-colorselected='colorPicked' width='350' height='200'>
</color-picker>
</div> </div>
</template>
</dom-module>
<color-picker id="colorpicker" width="350" height="200">
</color-picker>
</div>
</template>
<script> <script>
var serviceActions = window.hass.serviceActions; (function() {
var serviceActions = window.hass.serviceActions;
var uiUtil = window.hass.uiUtil;
var ATTRIBUTE_CLASSES = ['brightness', 'xy_color'];
Polymer({ Polymer({
brightnessSliderValue: 0, is: 'more-info-light',
observe: { properties: {
'stateObj.attributes.brightness': 'stateObjBrightnessChanged', stateObj: {
}, type: Object,
observer: 'stateObjChanged',
},
stateObjChanged: function(oldVal, newVal) { brightnessSliderValue: {
if (newVal && newVal.state === 'on') { type: Number,
this.brightnessSliderValue = newVal.attributes.brightness; value: 0,
} }
}, },
stateObjBrightnessChanged: function(oldVal, newVal) { stateObjChanged: function(newVal, oldVal) {
this.brightnessSliderValue = newVal; if (newVal && newVal.state === 'on') {
}, this.brightnessSliderValue = newVal.attributes.brightness;
}
domReady: function() { this.debounce('more-info-light-animation-finish', function() {
this.$.colorpicker.addEventListener('colorselected', this.colorPicked.bind(this)); this.fire('iron-resize');
}, }.bind(this), 500);
},
brightnessSliderChanged: function(ev, details, target) { computeClassNames: function(stateObj) {
var bri = parseInt(target.value); return uiUtil.attributeClassNames(stateObj, ATTRIBUTE_CLASSES);
},
if(isNaN(bri)) return; brightnessSliderChanged: function(ev) {
var bri = parseInt(ev.target.value);
if(bri === 0) { if(isNaN(bri)) return;
serviceActions.callTurnOff(this.stateObj.entityId);
} else { if(bri === 0) {
serviceActions.callService("light", "turn_on", { serviceActions.callTurnOff(this.stateObj.entityId);
} else {
serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId,
brightness: bri
});
}
},
colorPicked: function(ev) {
var color = ev.detail.rgb;
serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId, entity_id: this.stateObj.entityId,
brightness: bri rgb_color: [color.r, color.g, color.b]
}); });
} }
},
colorPicked: function(ev) { });
var color = ev.detail.rgb; })();
serviceActions.callService("light", "turn_on", {
entity_id: this.stateObj.entityId,
rgb_color: [color.r, color.g, color.b]
});
}
});
</script> </script>
</polymer-element>

42
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-script.html
View File

@ -1,22 +1,26 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <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-script" attributes="stateObj" noscript> <dom-module id='more-info-script'>
<template> <template>
<core-style ref='ha-key-value-table'></core-style> <div class='layout vertical'>
<style> <div class='data-entry layout justified horizontal'>
.data-entry .value { <div class='key'>Last Action</div>
max-width: 200px; <div class='value'>[[stateObj.attributes.last_action]]</div>
}
</style>
<div layout vertical>
<div layout justified horizontal class='data-entry'>
<div class='key'>Last Action</div>
<div class='value'>
{{stateObj.attributes.last_action}}
</div> </div>
</div> </div>
</div> </template>
</template> </dom-module>
</polymer-element>
<script>
(function() {
Polymer({
is: 'more-info-script',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script>

84
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html
View File

@ -1,53 +1,71 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <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/relative-ha-datetime.html"> <link rel="import" href="../components/relative-ha-datetime.html">
<polymer-element name="more-info-sun" attributes="stateObj"> <dom-module id="more-info-sun">
<template> <template>
<core-style ref='ha-key-value-table'></core-style> <div class='data-entry layout justified horizontal' id='rising'>
<div layout vertical id='sunData'>
<div layout justified horizontal class='data-entry' id='rising'>
<div class='key'> <div class='key'>
Rising <relative-ha-datetime datetimeObj="{{rising}}"></relative-ha-datetime> Rising <relative-ha-datetime datetime-obj="[[risingDate]]"></relative-ha-datetime>
</div>
<div class='value'>
{{rising | formatTime}}
</div> </div>
<div class='value'>[[risingTime]]</div>
</div> </div>
<div layout justified horizontal class='data-entry' id='setting'> <div class='data-entry layout justified horizontal' id='setting'>
<div class='key'> <div class='key'>
Setting <relative-ha-datetime datetimeObj="{{setting}}"></relative-ha-datetime> Setting <relative-ha-datetime datetime-obj="[[settingDate]]"></relative-ha-datetime>
</div>
<div class='value'>
{{setting | formatTime}}
</div> </div>
<div class='value'>[[settingTime]]</div>
</div> </div>
</template>
</dom-module>
</div>
</template>
<script> <script>
(function() { (function() {
var parseDateTime = window.hass.util.parseDateTime; var parseDateTime = window.hass.util.parseDateTime;
var formatTime = window.hass.uiUtil.formatTime;
Polymer({ Polymer({
rising: null, is: 'more-info-sun',
setting: null,
stateObjChanged: function() { properties: {
this.rising = parseDateTime(this.stateObj.attributes.next_rising); stateObj: {
this.setting = parseDateTime(this.stateObj.attributes.next_setting); type: Object,
observer: 'stateObjChanged',
},
if(self.rising > self.setting) { risingDate: {
this.$.sunData.appendChild(this.$.rising); type: Object,
} else { },
this.$.sunData.appendChild(this.$.setting);
settingDate: {
type: Object,
},
risingTime: {
type: String,
},
settingTime: {
type: String,
},
},
stateObjChanged: function() {
this.risingDate = parseDateTime(this.stateObj.attributes.next_rising);
this.risingTime = formatTime(this.risingDate);
this.settingDate = parseDateTime(this.stateObj.attributes.next_setting);
this.settingTime = formatTime(this.settingDate);
var root = Polymer.dom(this);
if(self.risingDate > self.settingDate) {
root.appendChild(this.$.rising);
} else {
root.appendChild(this.$.setting);
}
} }
} });
});
})(); })();
</script> </script>
</polymer-element>

178
homeassistant/components/frontend/www_static/polymer/more-infos/more-info-thermostat.html
View File

@ -1,114 +1,128 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel="import" href="../bower_components/paper-slider/paper-slider.html"> <link rel='import' href='../bower_components/paper-slider/paper-slider.html'>
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html"> <link rel='import' href='../bower_components/paper-toggle-button/paper-toggle-button.html'>
<polymer-element name="more-info-thermostat" attributes="stateObj"> <dom-module id='more-info-thermostat'>
<template>
<style> <style>
paper-slider { paper-slider {
width: 100%; width: 100%;
} }
paper-slider::shadow #sliderKnobInner,
paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #039be5;
}
.away-mode-toggle { .away-mode-toggle {
display: none; display: none;
margin-top: 16px; margin-top: 16px;
} }
:host-context(.has-away_mode) .away-mode-toggle { .has-away_mode .away-mode-toggle {
display: block; display: block;
} }
</style> </style>
<template>
<div class$='[[computeClassNames(stateObj)]]'>
<div>
<div>Target Temperature</div>
<paper-slider
min='[[tempMin]]' max='[[tempMax]]'
value='[[targetTemperatureSliderValue]]' pin
on-change='targetTemperatureSliderChanged'>
</paper-slider>
</div>
<div> <div class='away-mode-toggle'>
<div> <div class='center horizontal layout'>
<div>Target Temperature</div> <div class='flex'>Away Mode</div>
<paper-slider <paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
min="{{tempMin}}" max="{{tempMax}}" </paper-toggle-button>
value='{{targetTemperatureSliderValue}}' pin </div>
on-change="{{targetTemperatureSliderChanged}}">
</paper-slider>
</div>
<div class='away-mode-toggle'>
<div center horizontal layout>
<div flex>Away Mode</div>
<paper-toggle-button
checked="{{awayToggleChecked}}"
on-change="{{toggleChanged}}">
</paper-toggle-button>
</div> </div>
</div> </div>
</div> </template>
</template> </dom-module>
<script> <script>
var constants = window.hass.constants; (function() {
var constants = window.hass.constants;
var serviceActions = window.hass.serviceActions;
var uiUtil = window.hass.uiUtil;
var ATTRIBUTE_CLASSES = ['away_mode'];
Polymer({ Polymer({
tempMin: 10, is: 'more-info-thermostat',
tempMax: 40,
targetTemperatureSliderValue: 0,
awayToggleChecked: false, properties: {
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
observe: { tempMin: {
'stateObj.attributes.away_mode': 'awayChanged' type: Number,
}, },
stateObjChanged: function(oldVal, newVal) { tempMax: {
this.targetTemperatureSliderValue = this.stateObj.state; type: Number,
},
if (this.stateObj.attributes.unit_of_measurement === constants.UNIT_TEMP_F) { targetTemperatureSliderValue: {
this.tempMin = 45; type: Number,
this.tempMax = 95; },
} else {
this.tempMin = 7;
this.tempMax = 35;
}
},
targetTemperatureSliderChanged: function(ev, details, target) { awayToggleChecked: {
var temp = parseInt(target.value); type: Boolean,
},
},
if(isNaN(temp)) return; stateObjChanged: function(newVal, oldVal) {
this.targetTemperatureSliderValue = this.stateObj.state;
this.awayToggleChecked = this.stateObj.attributes.away_mode == 'on';
serviceActions.callService("thermostat", "set_temperature", { if (this.stateObj.attributes.unit_of_measurement === constants.UNIT_TEMP_F) {
entity_id: this.stateObj.entityId, this.tempMin = 45;
temperature: temp this.tempMax = 95;
}); } else {
}, this.tempMin = 7;
this.tempMax = 35;
}
},
toggleChanged: function(ev) { computeClassNames: function(stateObj) {
var newVal = ev.target.checked; return uiUtil.attributeClassNames(stateObj, ATTRIBUTE_CLASSES);
},
if(newVal && this.stateObj.attributes.away_mode === 'off') { targetTemperatureSliderChanged: function(ev) {
this.service_set_away(true); var temp = parseInt(ev.target.value);
} else if(!newVal && this.stateObj.attributes.away_mode === 'on') {
this.service_set_away(false);
}
},
awayChanged: function(oldVal, newVal) { if(isNaN(temp)) return;
this.awayToggleChecked = newVal == 'on';
},
service_set_away: function(away_mode) { serviceActions.callService('thermostat', 'set_temperature', {
// We call stateChanged after a successful call to re-sync the toggle entity_id: this.stateObj.entityId,
// with the state. It will be out of sync if our service call did not temperature: temp
// result in the entity to be turned on. Since the state is not changing, });
// the resync is not called automatic. },
serviceActions.callService(
'thermostat', 'set_away_mode',
{entity_id: this.stateObj.entityId, away_mode: away_mode})
.then(function() { toggleChanged: function(ev) {
this.awayChanged(null, this.stateObj.attributes.away_mode); var newVal = ev.target.checked;
}.bind(this));
}, if(newVal && this.stateObj.attributes.away_mode === 'off') {
}); this.service_set_away(true);
} else if(!newVal && this.stateObj.attributes.away_mode === 'on') {
this.service_set_away(false);
}
},
service_set_away: function(away_mode) {
// We call stateChanged after a successful call to re-sync the toggle
// with the state. It will be out of sync if our service call did not
// result in the entity to be turned on. Since the state is not changing,
// the resync is not called automatic.
serviceActions.callService(
'thermostat', 'set_away_mode',
{entity_id: this.stateObj.entityId, away_mode: away_mode})
.then(function() {
this.stateObjChanged(this.stateObj);
}.bind(this));
},
});
})();
</script> </script>
</polymer-element>

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

@ -1,24 +1,22 @@
<link rel="import" href="../bower_components/core-icon/core-icon.html"> <link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="../bower_components/core-iconset-svg/core-iconset-svg.html">
<link rel="import" href="../bower_components/core-icon/core-icon.html"> <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/core-icons/social-icons.html"> <link rel="import" href="../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../bower_components/core-icons/image-icons.html"> <link rel="import" href="../bower_components/iron-icons/image-icons.html">
<link rel="import" href="../bower_components/core-icons/hardware-icons.html"> <link rel="import" href="../bower_components/iron-icons/hardware-icons.html">
<link rel="import" href="../bower_components/core-icons/av-icons.html"> <link rel="import" href="../bower_components/iron-icons/av-icons.html">
<core-iconset-svg id="homeassistant-100" iconSize="100"> <iron-iconset-svg name="homeassistant-100" size="100">
<svg><defs> <svg><defs>
<g id="thermostat">
<!-- <!--
Thermostat icon created by Scott Lewis from the Noun Project Thermostat icon created by Scott Lewis from the Noun Project
Licensed under CC BY 3.0 - http://creativecommons.org/licenses/by/3.0/us/ Licensed under CC BY 3.0 - http://creativecommons.org/licenses/by/3.0/us/
--> -->
<path d="M66.861,60.105V17.453c0-9.06-7.347-16.405-16.408-16.405c-9.06,0-16.404,7.345-16.404,16.405v42.711 c-4.04,4.14-6.533,9.795-6.533,16.035c0,12.684,10.283,22.967,22.967,22.967c12.682,0,22.964-10.283,22.964-22.967 C73.447,69.933,70.933,64.254,66.861,60.105z M60.331,20.38h-13.21v6.536h6.63v6.539h-6.63v6.713h6.63v6.538h-6.63v6.5h6.63v6.536 h-6.63v7.218c-3.775,1.373-6.471,4.993-6.471,9.24h-6.626c0-5.396,2.598-10.182,6.61-13.185V17.446c0-0.038,0.004-0.075,0.004-0.111 l-0.004-0.007c0-5.437,4.411-9.846,9.849-9.846c5.438,0,9.848,4.409,9.848,9.846V20.38z"/></g> <g id="thermostat"><path d="M66.861,60.105V17.453c0-9.06-7.347-16.405-16.408-16.405c-9.06,0-16.404,7.345-16.404,16.405v42.711 c-4.04,4.14-6.533,9.795-6.533,16.035c0,12.684,10.283,22.967,22.967,22.967c12.682,0,22.964-10.283,22.964-22.967 C73.447,69.933,70.933,64.254,66.861,60.105z M60.331,20.38h-13.21v6.536h6.63v6.539h-6.63v6.713h6.63v6.538h-6.63v6.5h6.63v6.536 h-6.63v7.218c-3.775,1.373-6.471,4.993-6.471,9.24h-6.626c0-5.396,2.598-10.182,6.61-13.185V17.446c0-0.038,0.004-0.075,0.004-0.111 l-0.004-0.007c0-5.437,4.411-9.846,9.849-9.846c5.438,0,9.848,4.409,9.848,9.846V20.38z"/></g>
</defs></svg> </defs></svg>
</core-iconset-svg> </iron-iconset-svg>
<core-iconset-svg id="homeassistant-24" iconSize="24"> <iron-iconset-svg name="homeassistant-24" size="24">
<svg><defs> <svg><defs>
<!-- <!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved. Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
@ -29,9 +27,8 @@
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> -->
<g id="group"><path d="M9 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5-3c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-7c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></g> <g id="group"><path d="M9 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5-3c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-7c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></g>
</defs></svg> </defs></svg>
</core-iconset-svg> </iron-iconset-svg>
<script> <script>
window.hass.uiUtil.domainIcon = function(domain, state) { window.hass.uiUtil.domainIcon = function(domain, state) {
@ -88,7 +85,7 @@ window.hass.uiUtil.domainIcon = function(domain, state) {
return 'social:pages'; return 'social:pages';
default: default:
return "bookmark-outline"; return "bookmark";
} }
} };
</script> </script>

50
homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
View File

@ -6,30 +6,25 @@
var DOMAINS_WITH_MORE_INFO = [ var DOMAINS_WITH_MORE_INFO = [
'light', 'group', 'sun', 'configurator', 'thermostat', 'script' 'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
]; ];
var DOMAINS_HIDE_MORE_INFO = [
'sensor',
];
// Add some frontend specific helpers to the models // Add some frontend specific helpers to the models
Object.defineProperties(window.hass.stateModel.prototype, { Object.defineProperties(window.hass.stateModel.prototype, {
// how to render the card for this state // how to render the card for this state
cardType: { cardType: {
get: function() { get: function() {
if(DOMAINS_WITH_CARD.indexOf(this.domain) !== -1) { console.warn('Deprecated method. Please use hass.uiUtil.stateCardType');
return this.domain; return window.hass.uiUtil.stateCardType(this);
} else if(this.canToggle) {
return "toggle";
} else {
return "display";
}
} }
}, },
// how to render the more info of this state // how to render the more info of this state
moreInfoType: { moreInfoType: {
get: function() { get: function() {
if(DOMAINS_WITH_MORE_INFO.indexOf(this.domain) !== -1) { console.warn('Deprecated method. Please use hass.uiUtil.stateMoreInfoType');
return this.domain; return window.hass.uiUtil.stateMoreInfoType(this);
} else {
return 'default';
}
} }
}, },
}); });
@ -52,7 +47,7 @@
window.hass.uiActions = { window.hass.uiActions = {
showMoreInfoDialog: function(entityId) { showMoreInfoDialog: function(entityId) {
dispatcher.dispatch({ dispatcher.dispatch({
actionType: this.ACTION_SHOW_DIALOG_MORE_INFO, actionType: window.hass.uiConstants.ACTION_SHOW_DIALOG_MORE_INFO,
entityId: entityId, entityId: entityId,
}); });
}, },
@ -66,7 +61,34 @@
}; };
// UI specific util methods // UI specific util methods
window.hass.uiUtil = {}; window.hass.uiUtil = {
stateCardType: function(state) {
if(DOMAINS_WITH_CARD.indexOf(state.domain) !== -1) {
return state.domain;
} else if(state.canToggle) {
return "toggle";
} else {
return "display";
}
},
stateMoreInfoType: function(state) {
if(DOMAINS_HIDE_MORE_INFO.indexOf(state.domain) !== -1) {
return false;
} else if(DOMAINS_WITH_MORE_INFO.indexOf(state.domain) !== -1) {
return state.domain;
} else {
return 'default';
}
},
attributeClassNames: function(stateObj, attributes) {
if (!stateObj) return '';
return attributes.map(function(attribute) {
return attribute in stateObj.attributes ? 'has-' + attribute : '';
}).join(' ');
},
};
})(); })();
</script> </script>

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

@ -1,31 +1,23 @@
<link rel="import" href="../bower_components/core-style/core-style.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<core-style id='ha-main'> <style is="custom-style">
/* Palette generated by Material Palette - materialpalette.com/light-blue/orange */ :root {
--dark-primary-color: #0288D1;
--default-primary-color: #03A9F4;
--light-primary-color: #B3E5FC;
--text-primary-color: #ffffff;
--accent-color: #FF9800;
--primary-background-color: #ffffff;
--primary-text-color: #212121;
--secondary-text-color: #727272;
--disabled-text-color: #bdbdbd;
--divider-color: #B6B6B6;
.dark-primary-color { background: #0288D1; } --paper-toggle-button-checked-ink-color: #039be5;
.default-primary-color { background: #03A9F4; } --paper-toggle-button-checked-button-color: #039be5;
.light-primary-color { background: #B3E5FC; } --paper-toggle-button-checked-bar-color: #039be5;
.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-color { color: #FF9800; }
body {
color: #212121;
}
a {
color: #FF9800;
text-decoration: none;
}
</core-style>
<core-style id='ha-animations'>
@-webkit-keyframes ha-spin { @-webkit-keyframes ha-spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -47,106 +39,8 @@ a {
} }
} }
.ha-spin { body /deep/ .ha-spin {
-webkit-animation: ha-spin 2s infinite linear; -webkit-animation: ha-spin 2s infinite linear;
animation: ha-spin 2s infinite linear; animation: ha-spin 2s infinite linear;
} }
</core-style> </style>
<core-style id="ha-headers">
core-scroll-header-panel, core-header-panel {
background-color: #E5E5E5;
}
core-toolbar {
background: #03a9f4;
color: white;
font-weight: normal;
}
</core-style>
<core-style id="ha-dialog">
:host {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
min-width: 350px;
max-width: 700px;
/* First two are from core-transition-bottom */
transition:
transform 0.2s ease-in-out,
opacity 0.2s ease-in,
top .3s,
left .3s !important;
}
:host .sidebar {
margin-left: 30px;
}
@media all and (max-width: 620px) {
:host.two-column {
margin: 0;
width: 100%;
max-height: calc(100% - 64px);
bottom: 0px;
left: 0px;
right: 0px;
}
:host .sidebar {
display: none;
}
}
@media all and (max-width: 464px) {
:host {
margin: 0;
width: 100%;
max-height: calc(100% - 64px);
bottom: 0px;
left: 0px;
right: 0px;
}
}
html /deep/ .ha-form paper-input {
display: block;
}
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>
<core-style id='ha-paper-toggle'>
paper-toggle-button::shadow .toggle-ink {
color: #039be5;
}
paper-toggle-button::shadow [checked] .toggle-bar {
background-color: #039be5;
}
paper-toggle-button::shadow [checked] .toggle-button {
background-color: #039be5;
}
</core-style>

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

@ -17,8 +17,4 @@ window.hass.uiUtil.formatDate = function(dateObj) {
return moment(dateObj).format('ll'); return moment(dateObj).format('ll');
}; };
PolymerExpressions.prototype.formatTime = window.hass.uiUtil.formatTime;
PolymerExpressions.prototype.formatDateTime = window.hass.uiUtil.formatDateTime;
PolymerExpressions.prototype.formatDate = window.hass.uiUtil.formatDate;
</script> </script>

21
homeassistant/components/frontend/www_static/polymer/resources/store-listener-behavior.html Normal file
View File

@ -0,0 +1,21 @@
<script>
(function() {
var StoreListenerMixIn = window.hass.storeListenerMixIn;
window.StoreListenerBehavior = {
attached: function() {
StoreListenerMixIn.listenToStores(true, this);
},
detached: function() {
StoreListenerMixIn.stopListeningToStores(this);
},
};
})();
</script>

12
homeassistant/components/frontend/www_static/webcomponents-lite.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

16
homeassistant/components/frontend/www_static/webcomponents.min.js vendored
View File

File diff suppressed because one or more lines are too long

16
scripts/build_frontend
View File

@ -8,23 +8,19 @@ fi
scripts/build_js $1 scripts/build_js $1
# To build the frontend, you need node, bower and vulcanize # To build the frontend, you need node, bower, vulcanize and html-minifier
# npm install -g bower vulcanize # npm install -g bower vulcanize html-minifier
# Install dependencies # Install dependencies
cd homeassistant/components/frontend/www_static/polymer cd homeassistant/components/frontend/www_static/polymer
bower install bower install
cd .. cd ..
cp polymer/bower_components/webcomponentsjs/webcomponents.min.js . cp polymer/bower_components/webcomponentsjs/webcomponents-lite.min.js .
# Let Polymer refer to the minified JS version before we compile vulcanize --inline-css --inline-scripts --strip-comments polymer/home-assistant.html > frontend.html
sed -i.bak 's/polymer\.js/polymer\.min\.js/' polymer/bower_components/polymer/polymer.html
vulcanize -o frontend.html --inline --strip polymer/home-assistant.html # html-minifier crashes on frontend, minimize kills the CSS
# html-minifier --config-file polymer/html-minifier.conf -o frontend.html frontend.html
# Revert back the change to the Polymer component
rm polymer/bower_components/polymer/polymer.html
mv polymer/bower_components/polymer/polymer.html.bak polymer/bower_components/polymer/polymer.html
# Generate the MD5 hash of the new frontend # Generate the MD5 hash of the new frontend
cd .. cd ..