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",
"google-apis": "GoogleWebComponents/google-apis#0.8-preview",
"moment": "^2.10.3",
"layout": "Polymer/layout"
"layout": "Polymer/layout",
"color-picker-element": "~0.0.3"
},
"stillUpgrading": {
"core-tooltip": "Polymer/core-tooltip#~0.9",
"core-item": "Polymer/core-item#~0.9",
"core-style": "polymer/core-style#~0.9",
"paper-dropdown": "PolymerElements/paper-dropdown#~0.9",
"color-picker-element": "~0.0.2",
"google-apis": "GoogleWebComponents/google-apis#~0.4.4",
"core-scroll-header-panel": "polymer/core-scroll-header-panel#~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="../components/state-info.html">
<link rel='import' href='./state-card-display.html'>
<link rel='import' href='../components/state-info.html'>
<dom-module id="state-card-configurator">
<dom-module id='state-card-configurator'>
<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 -->
<template if="[[stateObj.attributes.description_image]]">
<img hidden src="[[stateObj.attributes.description_image]]" />
<template is='dom-if' if='[[stateObj.attributes.description_image]]'>
<img hidden src='[[stateObj.attributes.description_image]]' />
</template>
</template>
</dom-module>

2
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/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-icons.html'>

110
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/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel='import' href='../bower_components/paper-button/paper-button.html'>
<polymer-element name="more-info-configurator" attributes="stateObj">
<template>
<link rel='import' href='../components/loading-box.html'>
<dom-module id='more-info-configurator'>
<style>
p {
margin: 8px 0;
@ -25,62 +25,78 @@
text-align: center;
height: 41px;
}
p.submit paper-spinner {
margin-right: 16px;
}
p.submit span {
display: inline-block;
vertical-align: top;
margin-top: 6px;
}
</style>
<template>
<div class='layout vertical'>
<template is='dom-if' if='[[isConfigurable]]'>
<div layout vertical>
<template if="{{stateObj.state == 'configure'}}">
<p hidden$='[[!stateObj.attributes.description]]'>[[stateObj.attributes.description]]</p>
<p hidden?="{{!stateObj.attributes.description}}">
{{stateObj.attributes.description}}
</p>
<p class='error' hidden$='[[!stateObj.attributes.errors]]'>[[stateObj.attributes.errors]]</p>
<p class='error' hidden?="{{!stateObj.attributes.errors}}">
{{stateObj.attributes.errors}}
</p>
<p class='center' hidden?="{{!stateObj.attributes.description_image}}">
<img src='{{stateObj.attributes.description_image}}' />
<p class='center' hidden$='[[!stateObj.attributes.description_image]]'>
<img src='[[stateObj.attributes.description_image]]' />
</p>
<p class='submit'>
<paper-button raised on-click="{{submitClicked}}"
hidden?="{{action !== 'display'}}">
{{stateObj.attributes.submit_caption || "Set configuration"}}
</paper-button>
<paper-button raised on-click='submitClicked'
hidden$='[[isConfiguring]]'>[[submitCaption]]</paper-button>
<span hidden?="{{action !== 'configuring'}}">
<paper-spinner active="true"></paper-spinner><span>Configuring…</span>
</span>
<loading-box hidden$='[[!isConfiguring]]'>Configuring</loading-box>
</p>
</template>
</div>
</template>
</dom-module>
<script>
var storeListenerMixIn = window.hass.storeListenerMixIn;
(function() {
var syncActions = window.hass.syncActions;
var serviceActions = window.hass.serviceActions;
Polymer(Polymer.mixin({
action: "display",
isStreaming: false,
Polymer({
is: 'more-info-configurator',
attached: function() {
this.listenToStores(true);
behaviors: [StoreListenerBehavior],
properties: {
stateObj: {
type: Object,
},
detached: function() {
this.stopListeningToStores();
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)',
},
},
computeIsConfigurable: function(stateObj) {
return stateObj.state == 'configure';
},
computeSubmitCaption: function(stateObj) {
return stateObj.attributes.submit_caption || 'Set configuration';
},
streamStoreChanged: function(streamStore) {
@ -88,15 +104,15 @@
},
submitClicked: function() {
this.action = "configuring";
this.isConfiguring = true;
var data = {
configure_id: this.stateObj.attributes.configure_id
};
serviceActions.callService('configurator', 'configure', data).then(
function() {
this.action = 'display';
this.isConfiguring = false;
if (!this.isStreaming) {
syncActions.fetchAll();
@ -104,9 +120,9 @@
}.bind(this),
function() {
this.action = 'display';
this.isConfiguring = false;
}.bind(this));
},
}, storeListenerMixIn));
});
})();
</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-light.html">
<link rel="import" href="more-info-group.html">
<link rel="import" href="more-info-sun.html">
<link rel="import" href="more-info-configurator.html">
<link rel="import" href="more-info-thermostat.html">
<link rel="import" href="more-info-script.html"> -->
<link rel='import' href='more-info-default.html'>
<link rel='import' href='more-info-group.html'>
<link rel='import' href='more-info-sun.html'>
<link rel='import' href='more-info-configurator.html'>
<link rel='import' href='more-info-thermostat.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>
:host {
display: block;
@ -56,23 +56,22 @@
stateObjChanged: function(newVal, oldVal) {
var root = Polymer.dom(this);
var newMoreInfoType;
if (!newVal) {
if (!newVal || !(newMoreInfoType = uiUtil.stateMoreInfoType(newVal))) {
if (root.lastChild) {
root.removeChild(root.lastChild);
}
return;
}
var newMoreInfoType = uiUtil.stateMoreInfoType(newVal);
newMoreInfoType = 'default';
if (!oldVal || uiUtil.stateMoreInfoType(oldVal) != newMoreInfoType) {
if (root.lastChild) {
root.removeChild(root.lastChild);
}
var moreInfo = document.createElement("more-info-" + newMoreInfoType);
var moreInfo = document.createElement('more-info-' + newMoreInfoType);
moreInfo.stateObj = newVal;
moreInfo.dialogOpen = this.dialogOpen;
root.appendChild(moreInfo);
@ -85,7 +84,7 @@
}
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;
}
</style>
<!-- <core-style ref='ha-key-value-table'></core-style> -->
<template>
<div class='layout vertical'>
<template is='dom-repeat' items="[[getAttributes(stateObj)]]" as="attribute">

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

58
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/paper-slider/paper-slider.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/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">
<template>
<dom-module id='more-info-light'>
<style>
.brightness {
margin-bottom: 8px;
@ -29,63 +28,66 @@
transition: max-height .5s ease-in .3s;
}
:host-context(.has-brightness) .brightness {
/*:host-context(.has-brightness)*/ .brightness {
max-height: 500px;
}
:host-context(.has-xy_color) color-picker {
/*:host-context(.has-xy_color)*/ color-picker {
max-height: 500px;
}
</style>
<template>
<div>
<div class='brightness'>
<div center horizontal layout>
<div>Brightness</div>
<paper-slider
max="255" flex id='brightness' value='{{brightnessSliderValue}}'
on-change="{{brightnessSliderChanged}}">
max='255' flex id='brightness' value='{{brightnessSliderValue}}'
on-change='brightnessSliderChanged'>
</paper-slider>
</div>
</div>
<color-picker id="colorpicker" width="350" height="200">
<color-picker on-colorselected='colorPicked' width='350' height='200'>
</color-picker>
</div>
</template>
</dom-module>
<script>
(function() {
var serviceActions = window.hass.serviceActions;
Polymer({
brightnessSliderValue: 0,
is: 'more-info-light',
observe: {
'stateObj.attributes.brightness': 'stateObjBrightnessChanged',
properties: {
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
stateObjChanged: function(oldVal, newVal) {
brightnessSliderValue: {
type: Number,
value: 0,
}
},
stateObjChanged: function(newVal, oldVal) {
if (newVal && newVal.state === 'on') {
this.brightnessSliderValue = newVal.attributes.brightness;
}
},
stateObjBrightnessChanged: function(oldVal, newVal) {
this.brightnessSliderValue = newVal;
},
domReady: function() {
this.$.colorpicker.addEventListener('colorselected', this.colorPicked.bind(this));
},
brightnessSliderChanged: function(ev, details, target) {
var bri = parseInt(target.value);
brightnessSliderChanged: function(ev) {
var bri = parseInt(ev.target.value);
if(isNaN(bri)) return;
if(bri === 0) {
serviceActions.callTurnOff(this.stateObj.entityId);
} else {
serviceActions.callService("light", "turn_on", {
serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId,
brightness: bri
});
@ -95,12 +97,12 @@ Polymer({
colorPicked: function(ev) {
var color = ev.detail.rgb;
serviceActions.callService("light", "turn_on", {
serviceActions.callService('light', 'turn_on', {
entity_id: this.stateObj.entityId,
rgb_color: [color.r, color.g, color.b]
});
}
});
})();
</script>
</polymer-element>

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

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

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

@ -1,66 +1,76 @@
<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-toggle-button/paper-toggle-button.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-toggle-button/paper-toggle-button.html'>
<polymer-element name="more-info-thermostat" attributes="stateObj">
<template>
<dom-module id='more-info-thermostat'>
<style>
paper-slider {
width: 100%;
}
paper-slider::shadow #sliderKnobInner,
paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #039be5;
}
.away-mode-toggle {
display: none;
margin-top: 16px;
}
:host-context(.has-away_mode) .away-mode-toggle {
/*:host-context(.has-away_mode)*/ .away-mode-toggle {
display: block;
}
</style>
<div>
<template>
<div>
<div>Target Temperature</div>
<paper-slider
min="{{tempMin}}" max="{{tempMax}}"
value='{{targetTemperatureSliderValue}}' pin
on-change="{{targetTemperatureSliderChanged}}">
min='[[tempMin]]' max='[[tempMax]]'
value='[[targetTemperatureSliderValue]]' pin
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 checked='[[awayToggleChecked]]' on-change='toggleChanged'>
</paper-toggle-button>
</div>
</div>
</div>
</template>
</dom-module>
<script>
(function() {
var constants = window.hass.constants;
var serviceActions = window.hass.serviceActions;
Polymer({
tempMin: 10,
tempMax: 40,
targetTemperatureSliderValue: 0,
is: 'more-info-thermostat',
awayToggleChecked: false,
observe: {
'stateObj.attributes.away_mode': 'awayChanged'
properties: {
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
stateObjChanged: function(oldVal, newVal) {
tempMin: {
type: Number,
},
tempMax: {
type: Number,
},
targetTemperatureSliderValue: {
type: Number,
},
awayToggleChecked: {
type: Boolean,
},
},
stateObjChanged: function(newVal, oldVal) {
this.targetTemperatureSliderValue = this.stateObj.state;
this.awayToggleChecked = this.stateObj.attributes.away_mode == 'on';
if (this.stateObj.attributes.unit_of_measurement === constants.UNIT_TEMP_F) {
this.tempMin = 45;
@ -71,12 +81,12 @@ Polymer({
}
},
targetTemperatureSliderChanged: function(ev, details, target) {
var temp = parseInt(target.value);
targetTemperatureSliderChanged: function(ev) {
var temp = parseInt(ev.target.value);
if(isNaN(temp)) return;
serviceActions.callService("thermostat", "set_temperature", {
serviceActions.callService('thermostat', 'set_temperature', {
entity_id: this.stateObj.entityId,
temperature: temp
});
@ -92,10 +102,6 @@ Polymer({
}
},
awayChanged: function(oldVal, newVal) {
this.awayToggleChecked = newVal == 'on';
},
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
@ -106,9 +112,9 @@ Polymer({
{entity_id: this.stateObj.entityId, away_mode: away_mode})
.then(function() {
this.awayChanged(null, this.stateObj.attributes.away_mode);
this.stateObjChanged(this.stateObj);
}.bind(this));
},
});
})();
</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 = [
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
];
var DOMAINS_HIDE_MORE_INFO = [
'sensor',
];
// Add some frontend specific helpers to the models
Object.defineProperties(window.hass.stateModel.prototype, {
@ -70,7 +73,9 @@
},
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;
} else {
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">
<style is="custom-style">
* {
:root {
--dark-primary-color: #0288D1;
--default-primary-color: #03A9F4;
--light-primary-color: #B3E5FC;