Polymer .9: Convert more info contents
Paulus Schoutsen
parent
e5f0e57980
commit
a8aa5b1447
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<home-assistant-main></home-assistant-main>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
|
@ -59,11 +59,11 @@
|
|||
// remove the HTML init message
|
||||
document.getElementById('init').remove();
|
||||
|
||||
// if auth was given, tell the backend
|
||||
// if auth was given, tell the backend
|
||||
if(this.auth) {
|
||||
uiActions.validateAuth(this.auth, false);
|
||||
uiActions.validateAuth(this.auth, false);
|
||||
} else if (preferenceStore.hasAuthToken) {
|
||||
uiActions.validateAuth(preferenceStore.authToken, false);
|
||||
uiActions.validateAuth(preferenceStore.authToken, false);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -73,4 +73,4 @@
|
|||
});
|
||||
|
||||
})();
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<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$='[[isConfiguring]]'>[[submitCaption]]</paper-button>
|
||||
|
||||
<p class='submit'>
|
||||
<paper-button raised on-click="{{submitClicked}}"
|
||||
hidden?="{{action !== 'display'}}">
|
||||
{{stateObj.attributes.submit_caption || "Set configuration"}}
|
||||
</paper-button>
|
||||
<loading-box hidden$='[[!isConfiguring]]'>Configuring</loading-box>
|
||||
</p>
|
||||
|
||||
<span hidden?="{{action !== 'configuring'}}">
|
||||
<paper-spinner active="true"></paper-spinner><span>Configuring…</span>
|
||||
</span>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<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,
|
||||
},
|
||||
|
||||
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() {
|
||||
this.stopListeningToStores();
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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(' ');
|
||||
},
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 repeat="{{states as state}}">
|
||||
<state-card-content stateObj="{{state}}" class='child-card'>
|
||||
</state-card-content>
|
||||
<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>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
var storeListenerMixIn = window.hass.storeListenerMixIn;
|
||||
var stateStore = window.hass.stateStore;
|
||||
(function() {
|
||||
var stateStore = window.hass.stateStore;
|
||||
|
||||
Polymer(Polymer.mixin({
|
||||
attached: function() {
|
||||
this.listenToStores(true);
|
||||
},
|
||||
Polymer({
|
||||
is: 'more-info-group',
|
||||
|
||||
detached: function() {
|
||||
this.stopListeningToStores();
|
||||
},
|
||||
behaviors: [StoreListenerBehavior],
|
||||
|
||||
stateStoreChanged: function() {
|
||||
this.updateStates();
|
||||
},
|
||||
properties: {
|
||||
stateObj: {
|
||||
type: Object,
|
||||
observer: 'updateStates',
|
||||
},
|
||||
|
||||
stateObjChanged: function() {
|
||||
this.updateStates();
|
||||
},
|
||||
states: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
|
||||
updateStates: function() {
|
||||
this.states = this.stateObj && this.stateObj.attributes.entity_id ?
|
||||
stateStore.gets(this.stateObj.attributes.entity_id).toArray() : [];
|
||||
},
|
||||
}, storeListenerMixIn));
|
||||
stateStoreChanged: function() {
|
||||
this.updateStates();
|
||||
},
|
||||
|
||||
updateStates: function() {
|
||||
this.states = this.stateObj && this.stateObj.attributes.entity_id ?
|
||||
stateStore.gets(this.stateObj.attributes.entity_id).toArray() : [];
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
|
|
|||
|
|
@ -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,78 +28,81 @@
|
|||
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>
|
||||
<div>
|
||||
<div class='brightness'>
|
||||
<div center horizontal layout>
|
||||
<div>Brightness</div>
|
||||
<paper-slider
|
||||
max="255" flex id='brightness' value='{{brightnessSliderValue}}'
|
||||
on-change="{{brightnessSliderChanged}}">
|
||||
</paper-slider>
|
||||
<template>
|
||||
<div>
|
||||
<div class='brightness'>
|
||||
<div center horizontal layout>
|
||||
<div>Brightness</div>
|
||||
<paper-slider
|
||||
max='255' flex id='brightness' value='{{brightnessSliderValue}}'
|
||||
on-change='brightnessSliderChanged'>
|
||||
</paper-slider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<color-picker on-colorselected='colorPicked' width='350' height='200'>
|
||||
</color-picker>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<color-picker id="colorpicker" width="350" height="200">
|
||||
</color-picker>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
var serviceActions = window.hass.serviceActions;
|
||||
(function() {
|
||||
var serviceActions = window.hass.serviceActions;
|
||||
|
||||
Polymer({
|
||||
brightnessSliderValue: 0,
|
||||
Polymer({
|
||||
is: 'more-info-light',
|
||||
|
||||
observe: {
|
||||
'stateObj.attributes.brightness': 'stateObjBrightnessChanged',
|
||||
},
|
||||
properties: {
|
||||
stateObj: {
|
||||
type: Object,
|
||||
observer: 'stateObjChanged',
|
||||
},
|
||||
|
||||
stateObjChanged: function(oldVal, newVal) {
|
||||
if (newVal && newVal.state === 'on') {
|
||||
this.brightnessSliderValue = newVal.attributes.brightness;
|
||||
}
|
||||
},
|
||||
brightnessSliderValue: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
|
||||
stateObjBrightnessChanged: function(oldVal, newVal) {
|
||||
this.brightnessSliderValue = newVal;
|
||||
},
|
||||
stateObjChanged: function(newVal, oldVal) {
|
||||
if (newVal && newVal.state === 'on') {
|
||||
this.brightnessSliderValue = newVal.attributes.brightness;
|
||||
}
|
||||
},
|
||||
|
||||
domReady: function() {
|
||||
this.$.colorpicker.addEventListener('colorselected', this.colorPicked.bind(this));
|
||||
},
|
||||
brightnessSliderChanged: function(ev) {
|
||||
var bri = parseInt(ev.target.value);
|
||||
|
||||
brightnessSliderChanged: function(ev, details, target) {
|
||||
var bri = parseInt(target.value);
|
||||
if(isNaN(bri)) return;
|
||||
|
||||
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) {
|
||||
serviceActions.callTurnOff(this.stateObj.entityId);
|
||||
} else {
|
||||
serviceActions.callService("light", "turn_on", {
|
||||
colorPicked: function(ev) {
|
||||
var color = ev.detail.rgb;
|
||||
|
||||
serviceActions.callService('light', 'turn_on', {
|
||||
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>
|
||||
</polymer-element>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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='key'>Last Action</div>
|
||||
<div class='value'>
|
||||
{{stateObj.attributes.last_action}}
|
||||
<dom-module id='more-info-script'>
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</polymer-element>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
Polymer({
|
||||
is: 'more-info-script',
|
||||
|
||||
properties: {
|
||||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<template>
|
||||
<core-style ref='ha-key-value-table'></core-style>
|
||||
|
||||
<div layout vertical id='sunData'>
|
||||
|
||||
<div layout justified horizontal class='data-entry' id='rising'>
|
||||
<dom-module id="more-info-sun">
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
<div class='value'>
|
||||
{{setting | formatTime}}
|
||||
Setting <relative-ha-datetime datetime-obj="[[settingDate]]"></relative-ha-datetime>
|
||||
</div>
|
||||
<div class='value'>[[settingTime]]</div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
(function() {
|
||||
var parseDateTime = window.hass.util.parseDateTime;
|
||||
var parseDateTime = window.hass.util.parseDateTime;
|
||||
var formatTime = window.hass.uiUtil.formatTime;
|
||||
|
||||
Polymer({
|
||||
rising: null,
|
||||
setting: null,
|
||||
Polymer({
|
||||
is: 'more-info-sun',
|
||||
|
||||
stateObjChanged: function() {
|
||||
this.rising = parseDateTime(this.stateObj.attributes.next_rising);
|
||||
this.setting = parseDateTime(this.stateObj.attributes.next_setting);
|
||||
properties: {
|
||||
stateObj: {
|
||||
type: Object,
|
||||
observer: 'stateObjChanged',
|
||||
},
|
||||
|
||||
if(self.rising > self.setting) {
|
||||
this.$.sunData.appendChild(this.$.rising);
|
||||
} else {
|
||||
this.$.sunData.appendChild(this.$.setting);
|
||||
risingDate: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
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>
|
||||
</polymer-element>
|
||||
|
|
|
|||
|
|
@ -1,114 +1,120 @@
|
|||
<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>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
var constants = window.hass.constants;
|
||||
(function() {
|
||||
var constants = window.hass.constants;
|
||||
var serviceActions = window.hass.serviceActions;
|
||||
|
||||
Polymer({
|
||||
tempMin: 10,
|
||||
tempMax: 40,
|
||||
targetTemperatureSliderValue: 0,
|
||||
Polymer({
|
||||
is: 'more-info-thermostat',
|
||||
|
||||
awayToggleChecked: false,
|
||||
properties: {
|
||||
stateObj: {
|
||||
type: Object,
|
||||
observer: 'stateObjChanged',
|
||||
},
|
||||
|
||||
observe: {
|
||||
'stateObj.attributes.away_mode': 'awayChanged'
|
||||
},
|
||||
tempMin: {
|
||||
type: Number,
|
||||
},
|
||||
|
||||
stateObjChanged: function(oldVal, newVal) {
|
||||
this.targetTemperatureSliderValue = this.stateObj.state;
|
||||
tempMax: {
|
||||
type: Number,
|
||||
},
|
||||
|
||||
if (this.stateObj.attributes.unit_of_measurement === constants.UNIT_TEMP_F) {
|
||||
this.tempMin = 45;
|
||||
this.tempMax = 95;
|
||||
} else {
|
||||
this.tempMin = 7;
|
||||
this.tempMax = 35;
|
||||
}
|
||||
},
|
||||
targetTemperatureSliderValue: {
|
||||
type: Number,
|
||||
},
|
||||
|
||||
targetTemperatureSliderChanged: function(ev, details, target) {
|
||||
var temp = parseInt(target.value);
|
||||
awayToggleChecked: {
|
||||
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", {
|
||||
entity_id: this.stateObj.entityId,
|
||||
temperature: temp
|
||||
});
|
||||
},
|
||||
if (this.stateObj.attributes.unit_of_measurement === constants.UNIT_TEMP_F) {
|
||||
this.tempMin = 45;
|
||||
this.tempMax = 95;
|
||||
} else {
|
||||
this.tempMin = 7;
|
||||
this.tempMax = 35;
|
||||
}
|
||||
},
|
||||
|
||||
toggleChanged: function(ev) {
|
||||
var newVal = ev.target.checked;
|
||||
targetTemperatureSliderChanged: function(ev) {
|
||||
var temp = parseInt(ev.target.value);
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
if(isNaN(temp)) return;
|
||||
|
||||
awayChanged: function(oldVal, newVal) {
|
||||
this.awayToggleChecked = newVal == 'on';
|
||||
},
|
||||
serviceActions.callService('thermostat', 'set_temperature', {
|
||||
entity_id: this.stateObj.entityId,
|
||||
temperature: temp
|
||||
});
|
||||
},
|
||||
|
||||
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})
|
||||
toggleChanged: function(ev) {
|
||||
var newVal = ev.target.checked;
|
||||
|
||||
.then(function() {
|
||||
this.awayChanged(null, this.stateObj.attributes.away_mode);
|
||||
}.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>
|
||||
</polymer-element>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue