Home-Assistant
/
core
mirror of https://github.com/home-assistant/core.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Polymer .9: convert state cards

pull/132/head
Paulus Schoutsen 2015-05-17 23:09:25 -07:00
parent 4576a1d245
commit c3645e463e
7 changed files with 137 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,13 +3,27 @@
<link rel="import" href="./state-card-display.html">
<link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-configurator" attributes="stateObj" noscript>
<dom-module is="state-card-configurator">
<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 -->
<template if="{{stateObj.attributes.description_image}}">
<img hidden src="{{stateObj.attributes.description_image}}" />
<template if="[[stateObj.attributes.description_image]]">
<img hidden src="[[stateObj.attributes.description_image]]" />
</template>
</template>
</polymer-element>
</dom-module>
<script>
(function() {
Polymer({
is: 'state-card-configurator',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script>

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

@ -1,10 +1,10 @@
<link rel="import" href="../bower_components/polymer/polymer.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">
<link rel="import" href="state-card-thermostat.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">
<dom-module is="state-card-content">
<style>
@ -12,50 +12,46 @@
display: block;
}
</style>
<template>
<state-card-display state-obj="[[stateObj]]"></state-card-display>
<!-- <div id='cardContainer'></div> -->
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-content',
(function() {
var uiUtil = window.hass.uiUtil;
properties: {
stateObj: {
type: Object,
value: {},
observe: 'stateObjChanged',
}
},
Polymer({
is: 'state-card-content',
stateObjChanged: function(oldVal, newVal) {
console.log('stateObjChanged');
return;
var cardContainer = this.$.cardContainer;
if (!newVal) {
if (cardContainer.lastChild) {
cardContainer.removeChild(cardContainer.lastChild);
properties: {
stateObj: {
type: Object,
observer: 'stateObjChanged',
}
return;
}
},
if (!oldVal || oldVal.cardType != newVal.cardType) {
if (cardContainer.lastChild) {
cardContainer.removeChild(cardContainer.lastChild);
stateObjChanged: function(newVal, oldVal) {
var root = Polymer.dom(this);
if (!newVal) {
if (root.lastChild) {
root.removeChild(root.lastChild);
}
return;
}
var stateCard = document.createElement("state-card-" + newVal.cardType);
stateCard.stateObj = newVal;
cardContainer.appendChild(stateCard);
var newCardType = uiUtil.stateCardType(newVal);
} 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>

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-toggle.html">
<polymer-element name="state-card-scene" attributes="stateObj">
<dom-module is="state-card-scene">
<template>
<template if={{allowToggle}}>
<state-card-toggle stateObj="{{stateObj}}"></state-card-toggle>
<template is='dom-if' if=[[allowToggle]]>
<state-card-toggle state-obj="[[stateObj]]"></state-card-toggle>
</template>
<template if={{!allowToggle}}>
<state-card-display stateObj="{{stateObj}}"></state-card-display>
<template is='dom-if' if=[[!allowToggle]]>
<state-card-display state-obj="[[stateObj]]"></state-card-display>
</template>
</template>
<script>
</dom-module>
<script>
(function() {
Polymer({
allowToggle: false,
is: 'state-card-scene',
stateObjChanged: function(oldVal, newVal) {
this.allowToggle = newVal.state === 'off' ||
newVal.attributes.active_requested;
properties: {
stateObj: {
type: Object,
},
allowToggle: {
type: Boolean,
value: false,
computed: 'computeAllowToggle(stateObj)',
},
},
computeAllowToggle: function(stateObj) {
return stateObj.state === 'off' || stateObj.attributes.active_requested;
},
});
})();
</script>
</polymer-element>
</script>

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

@ -2,8 +2,7 @@
<link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-thermostat" attributes="stateObj api">
<template>
<dom-module is="state-card-thermostat">
<style>
.state {
margin-left: 16px;
@ -21,21 +20,33 @@
margin-top: -2px;
}
</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>
<state-info stateObj="{{stateObj}}"></state-info>
<div class='state'>
<div class='target'>
{{stateObj.stateDisplay}}
</div>
<div class='current'>
Currently: {{stateObj.attributes.current_temperature}} {{stateObj.attributes.unit_of_measurement}}
<div class='current'>
<span>Currently: </span>
<span>[[stateObj.attributes.current_temperature]]</span>
<span> </span>
<span>[[stateObj.attributes.unit_of_measurement]]</span>
</div>
</div>
</div>
</div>
</template>
</template>
</dom-module>
<script>
Polymer({});
(function() {
Polymer({
is: 'state-card-thermostat',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script>
</polymer-element>

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

@ -1,36 +1,45 @@
<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/core-style/core-style.html">
<link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-toggle" attributes="stateObj">
<dom-module is="state-card-toggle">
<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>
<state-info flex stateObj="{{stateObj}}"></state-info>
<paper-toggle-button self-center
checked="{{toggleChecked}}"
on-change="{{toggleChanged}}"
on-click="{{toggleClicked}}">
<paper-toggle-button class='self-center'
checked="[[toggleChecked]]"
on-change="toggleChanged"
on-click="toggleClicked">
</paper-toggle-button>
</div>
</template>
<script>
</dom-module>
<script>
(function() {
var serviceActions = window.hass.serviceActions;
Polymer({
toggleChecked: false,
is: 'state-card-toggle',
observe: {
'stateObj.state': 'stateChanged'
properties: {
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
toggleChecked: {
type: Boolean,
value: false,
},
},
ready: function() {
this.forceStateChange = this.forceStateChange.bind(this);
this.forceStateChange();
},
toggleClicked: function(ev) {
@ -47,22 +56,22 @@
}
},
stateObjChanged: function(oldVal, newVal) {
stateObjChanged: function(newVal) {
if (newVal) {
this.stateChanged(null, newVal.state);
this.updateToggle(newVal);
}
},
stateChanged: function(oldVal, newVal) {
this.toggleChecked = newVal === "on";
updateToggle: function(stateObj) {
this.toggleChecked = stateObj && stateObj.state === "on";
},
forceStateChange: function() {
this.stateChanged(null, this.stateObj.state);
this.updateToggle(this.stateObj);
},
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
// result in the entity to be turned on. Since the state is not changing,
// the resync is not called automatic.
@ -70,12 +79,12 @@
},
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
// result in the entity to be turned on. Since the state is not changing,
// the resync is not called automatic.
serviceActions.callTurnOff(this.stateObj.entityId).then(this.forceStateChange);
},
});
</script>
</polymer-element>
})();
</script>

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

@ -34,8 +34,6 @@
</style>
<template>
<!-- <core-style ref="ha-animations"></core-style> -->
<partial-base narrow="[[narrow]]" togglePanel="[[togglePanel]]">
<span header-title>{{headerTitle}}</span>
@ -207,7 +205,7 @@
return !(state.domain in uiConstants.STATE_FILTERS);
});
}
this.states = states.toArray().filter(
function (el) {return !el.attributes.hidden;});
},

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

@ -12,7 +12,7 @@
// how to render the card for this state
cardType: {
get: function() {
console.warning('Deprecated method. Please use hass.uiUtil.stateCardType');
console.warn('Deprecated method. Please use hass.uiUtil.stateCardType');
return window.hass.uiUtil.stateCardType(this);
}
},
@ -20,7 +20,7 @@
// how to render the more info of this state
moreInfoType: {
get: function() {
console.warning('Deprecated method. Please use hass.uiUtil.stateMoreInfoType');
console.warn('Deprecated method. Please use hass.uiUtil.stateMoreInfoType');
return window.hass.uiUtil.stateMoreInfoType(this);
}
},