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 more info contents

pull/132/head
Paulus Schoutsen 2015-05-27 00:44:47 -07:00
parent e5f0e57980
commit a8aa5b1447
13 changed files with 350 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,14 +33,14 @@
"paper-drawer-panel": "PolymerElements/paper-drawer-panel#^0.9", "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^0.9",
"google-apis": "GoogleWebComponents/google-apis#0.8-preview", "google-apis": "GoogleWebComponents/google-apis#0.8-preview",
"moment": "^2.10.3", "moment": "^2.10.3",
"layout": "Polymer/layout" "layout": "Polymer/layout",
"color-picker-element": "~0.0.3"
}, },
"stillUpgrading": { "stillUpgrading": {
"core-tooltip": "Polymer/core-tooltip#~0.9", "core-tooltip": "Polymer/core-tooltip#~0.9",
"core-item": "Polymer/core-item#~0.9", "core-item": "Polymer/core-item#~0.9",
"core-style": "polymer/core-style#~0.9", "core-style": "polymer/core-style#~0.9",
"paper-dropdown": "PolymerElements/paper-dropdown#~0.9", "paper-dropdown": "PolymerElements/paper-dropdown#~0.9",
"color-picker-element": "~0.0.2",
"google-apis": "GoogleWebComponents/google-apis#~0.4.4", "google-apis": "GoogleWebComponents/google-apis#~0.4.4",
"core-scroll-header-panel": "polymer/core-scroll-header-panel#~0.9", "core-scroll-header-panel": "polymer/core-scroll-header-panel#~0.9",
"paper-menu-button": "PolymerElements/paper-menu-button#~0.9" "paper-menu-button": "PolymerElements/paper-menu-button#~0.9"

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

@ -1,15 +1,15 @@
<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'>
<dom-module id="state-card-configurator"> <dom-module id='state-card-configurator'>
<template> <template>
<state-card-display state-obj="[[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>
</dom-module> </dom-module>

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

@ -1,5 +1,5 @@
<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='bower_components/font-roboto/roboto.html'>
<link rel='import' href='resources/home-assistant-js.html'> <link rel='import' href='resources/home-assistant-js.html'>
<link rel='import' href='resources/home-assistant-icons.html'> <link rel='import' href='resources/home-assistant-icons.html'>
@ -29,7 +29,7 @@
<home-assistant-main></home-assistant-main> <home-assistant-main></home-assistant-main>
</template> </template>
</template> </template>
</dom-module> </dom-module>
<script> <script>
@ -59,11 +59,11 @@
// remove the HTML init message // remove the HTML init message
document.getElementById('init').remove(); document.getElementById('init').remove();
// 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);
} }
}, },
@ -73,4 +73,4 @@
}); });
})(); })();
</script> </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>

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

@ -1,14 +1,14 @@
<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'>
<dom-module id="more-info-content"> <dom-module id='more-info-content'>
<style> <style>
:host { :host {
display: block; display: block;
@ -56,23 +56,22 @@
stateObjChanged: function(newVal, oldVal) { stateObjChanged: function(newVal, oldVal) {
var root = Polymer.dom(this); var root = Polymer.dom(this);
var newMoreInfoType;
if (!newVal) { if (!newVal || !(newMoreInfoType = uiUtil.stateMoreInfoType(newVal))) {
if (root.lastChild) { if (root.lastChild) {
root.removeChild(root.lastChild); root.removeChild(root.lastChild);
} }
return; return;
} }
var newMoreInfoType = uiUtil.stateMoreInfoType(newVal);
newMoreInfoType = 'default';
if (!oldVal || uiUtil.stateMoreInfoType(oldVal) != newMoreInfoType) { if (!oldVal || uiUtil.stateMoreInfoType(oldVal) != newMoreInfoType) {
if (root.lastChild) { if (root.lastChild) {
root.removeChild(root.lastChild); root.removeChild(root.lastChild);
} }
var moreInfo = document.createElement("more-info-" + newMoreInfoType); var moreInfo = document.createElement('more-info-' + newMoreInfoType);
moreInfo.stateObj = newVal; moreInfo.stateObj = newVal;
moreInfo.dialogOpen = this.dialogOpen; moreInfo.dialogOpen = this.dialogOpen;
root.appendChild(moreInfo); root.appendChild(moreInfo);
@ -85,7 +84,7 @@
} }
this.classNames = Object.keys(newVal.attributes).map( this.classNames = Object.keys(newVal.attributes).map(
function(key) { return "has-" + key; }).join(' '); function(key) { return 'has-' + key; }).join(' ');
}, },
}); });
})(); })();

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

@ -6,7 +6,6 @@
max-width: 200px; max-width: 200px;
} }
</style> </style>
<!-- <core-style ref='ha-key-value-table'></core-style> -->
<template> <template>
<div class='layout vertical'> <div class='layout vertical'>
<template is='dom-repeat' items="[[getAttributes(stateObj)]]" as="attribute"> <template is='dom-repeat' items="[[getAttributes(stateObj)]]" as="attribute">

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>

116
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;
@ -29,78 +28,81 @@
transition: max-height .5s ease-in .3s; transition: max-height .5s ease-in .3s;
} }
:host-context(.has-brightness) .brightness { /*:host-context(.has-brightness)*/ .brightness {
max-height: 500px; max-height: 500px;
} }
:host-context(.has-xy_color) color-picker { /*:host-context(.has-xy_color)*/ color-picker {
max-height: 500px; max-height: 500px;
} }
</style> </style>
<div> <template>
<div class='brightness'> <div>
<div center horizontal layout> <div class='brightness'>
<div>Brightness</div> <div center horizontal layout>
<paper-slider <div>Brightness</div>
max="255" flex id='brightness' value='{{brightnessSliderValue}}' <paper-slider
on-change="{{brightnessSliderChanged}}"> max='255' flex id='brightness' value='{{brightnessSliderValue}}'
</paper-slider> on-change='brightnessSliderChanged'>
</paper-slider>
</div>
</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;
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() { brightnessSliderChanged: function(ev) {
this.$.colorpicker.addEventListener('colorselected', this.colorPicked.bind(this)); var bri = parseInt(ev.target.value);
},
brightnessSliderChanged: function(ev, details, target) { if(isNaN(bri)) return;
var bri = parseInt(target.value);
if(isNaN(bri)) return; if(bri === 0) {
serviceActions.callTurnOff(this.stateObj.entityId);
} else {
serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId,
brightness: bri
});
}
},
if(bri === 0) { colorPicked: function(ev) {
serviceActions.callTurnOff(this.stateObj.entityId); var color = ev.detail.rgb;
} else {
serviceActions.callService("light", "turn_on", { 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>

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

@ -1,114 +1,120 @@
<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 { /*:host-context(.has-away_mode)*/ .away-mode-toggle {
display: block; display: block;
} }
</style> </style>
<template>
<div>
<div> <div>
<div>Target Temperature</div> <div>Target Temperature</div>
<paper-slider <paper-slider
min="{{tempMin}}" max="{{tempMax}}" min='[[tempMin]]' max='[[tempMax]]'
value='{{targetTemperatureSliderValue}}' pin value='[[targetTemperatureSliderValue]]' pin
on-change="{{targetTemperatureSliderChanged}}"> on-change='targetTemperatureSliderChanged'>
</paper-slider> </paper-slider>
</div> </div>
<div class='away-mode-toggle'> <div class='away-mode-toggle'>
<div center horizontal layout> <div center horizontal layout>
<div flex>Away Mode</div> <div flex>Away Mode</div>
<paper-toggle-button <paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
checked="{{awayToggleChecked}}"
on-change="{{toggleChanged}}">
</paper-toggle-button> </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;
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) { targetTemperatureSliderChanged: function(ev) {
var newVal = ev.target.checked; var temp = parseInt(ev.target.value);
if(newVal && this.stateObj.attributes.away_mode === 'off') { if(isNaN(temp)) return;
this.service_set_away(true);
} else if(!newVal && this.stateObj.attributes.away_mode === 'on') {
this.service_set_away(false);
}
},
awayChanged: function(oldVal, newVal) { serviceActions.callService('thermostat', 'set_temperature', {
this.awayToggleChecked = newVal == 'on'; entity_id: this.stateObj.entityId,
}, temperature: temp
});
},
service_set_away: function(away_mode) { toggleChanged: function(ev) {
// We call stateChanged after a successful call to re-sync the toggle var newVal = ev.target.checked;
// 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() { if(newVal && this.stateObj.attributes.away_mode === 'off') {
this.awayChanged(null, this.stateObj.attributes.away_mode); this.service_set_away(true);
}.bind(this)); } 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>

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

@ -6,6 +6,9 @@
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, {
@ -70,7 +73,9 @@
}, },
stateMoreInfoType: function(state) { stateMoreInfoType: function(state) {
if(DOMAINS_WITH_MORE_INFO.indexOf(state.domain) !== -1) { if(DOMAINS_HIDE_MORE_INFO.indexOf(state.domain) !== -1) {
return false;
} else if(DOMAINS_WITH_MORE_INFO.indexOf(state.domain) !== -1) {
return state.domain; return state.domain;
} else { } else {
return 'default'; return 'default';

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

@ -1,7 +1,7 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<style is="custom-style"> <style is="custom-style">
* { :root {
--dark-primary-color: #0288D1; --dark-primary-color: #0288D1;
--default-primary-color: #03A9F4; --default-primary-color: #03A9F4;
--light-primary-color: #B3E5FC; --light-primary-color: #B3E5FC;