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

Entity Registry UI (#921) 

* Entity Registry UI

* Tweak style in fullscreen

* Fix UI comments

* Fix imports

* Change title margin

* Fix graph rendering

* More style fixes

* Remove unused parameter
pull/954/head
Paulus Schoutsen 2018-02-27 19:04:58 -08:00 committed by GitHub
parent 24bafceb71
commit 5296dcfe85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 449 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/cards/ha-history_graph-card.html
View File

@ -22,8 +22,7 @@
@apply --paper-font-common-nowrap;
}
paper-card[dialog] .header {
padding-top: 0;
padding-left: 0;
display: none;
}
</style>
<ha-state-history-data

2
src/components/entity/ha-chart-base.html
View File

@ -144,7 +144,7 @@
yPadding: '0'
});
if (!this._chart) {
this.onPropsChange();
requestAnimationFrame(() => requestAnimationFrame(() => this.onPropsChange()));
}
this._resizeListener = () => {
this._debouncer = Polymer.Debouncer.debounce(

202
src/dialogs/more-info-dialog.html
View File

@ -4,11 +4,12 @@
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../components/state-history-charts.html">
<link rel="import" href="../data/ha-state-history-data.html">
<link rel="import" href="../more-infos/more-info-content.html">
<link rel="import" href="../state-summary/state-card-content.html">
<link rel='import' href='../util/hass-mixins.html'>
<link rel='import' href='../resources/ha-style.html'>
<link rel='import' href='./more-info/more-info-controls.html'>
<link rel='import' href='./more-info/more-info-settings.html'>
<dom-module id="more-info-dialog">
<template>
<style include="ha-style-dialog">
@ -21,6 +22,23 @@
}
}
more-info-controls, more-info-settings {
--more-info-header-background: var(--secondary-background-color);
--more-info-header-color: var(--primary-text-color);
}
/* overrule the ha-style-dialog max-height on small screens */
@media all and (max-width: 450px), all and (max-height: 500px) {
more-info-controls, more-info-settings {
--more-info-header-background: var(--primary-color);
--more-info-header-color: var(--text-primary-color);
}
paper-dialog {
max-height: 100%;
height: 100%;
}
}
paper-dialog[data-domain=camera] {
width: auto;
}
@ -28,51 +46,32 @@
paper-dialog[data-domain=history_graph] {
width: 90%;
}
paper-dialog[data-domain=history_graph] h2 {
display: none;
}
state-history-charts {
position: relative;
z-index: 1;
max-width: 365px;
}
state-card-content {
margin-bottom: 24px;
font-size: 14px;
}
</style>
<!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}' data-domain$='[[computeDomain(stateObj)]]'>
<h2>
<state-card-content
state-obj="[[stateObj]]"
hass='[[hass]]' in-dialog></state-card-content>
</h2>
<template is='dom-if' if="[[showHistoryComponent]]" restamp>
<div>
<ha-state-history-data
hass='[[hass]]'
filter-type='recent-entity'
entity-id='[[stateObj.entity_id]]'
data='{{stateHistory}}'
is-loading='{{stateHistoryLoading}}'
cache-config='[[cacheConfig]]'
></ha-state-history-data>
<state-history-charts
history-data="[[stateHistory]]"
is-loading-data="[[isLoadingHistoryData]]"
up-to-now>
</state-history-charts>
</div>
<paper-dialog
id="dialog"
with-backdrop
opened='{{_dialogOpen}}'
data-domain$='[[_computeDomain(stateObj)]]'
>
<template is='dom-if' if='[[!_page]]'>
<more-info-controls
class='no-padding'
hass='[[hass]]'
state-obj='[[stateObj]]'
dialog-element='[[_dialogElement]]'
can-configure='[[_registryInfo]]'
></more-info-controls>
</template>
<template is='dom-if' if='[[_equals(_page, "settings")]]'>
<more-info-settings
class='no-padding'
hass='[[hass]]'
state-obj='[[stateObj]]'
registry-info='{{_registryInfo}}'
></more-info-settings>
</template>
<paper-dialog-scrollable id='scrollable'>
<more-info-content
state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
</paper-dialog-scrollable>
</paper-dialog>
</template>
</dom-module>
@ -86,111 +85,72 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
stateObj: {
type: Object,
computed: 'computeStateObj(hass)',
observer: 'stateObjChanged',
computed: '_computeStateObj(hass)',
observer: '_stateObjChanged',
},
stateHistory: Object,
stateHistoryLoading: Boolean,
isLoadingHistoryData: {
type: Boolean,
computed: 'computeIsLoadingHistoryData(delayedDialogOpen, stateHistoryLoading)',
},
hasHistoryComponent: {
type: Boolean,
computed: 'computeHasHistoryComponent(hass)',
},
showHistoryComponent: {
_dialogOpen: {
type: Boolean,
value: false,
computed: 'computeShowHistoryComponent(hasHistoryComponent, stateObj)',
observer: '_dialogOpenChanged',
},
dialogOpen: {
type: Boolean,
value: false,
observer: 'dialogOpenChanged',
},
_dialogElement: Object,
_registryInfo: Object,
delayedDialogOpen: {
type: Boolean,
value: false,
},
cacheConfig: {
type: Object,
value: {
refresh: 60,
cacheKey: null,
hoursToShow: 24,
},
_page: {
type: String,
value: null,
},
};
}
connectedCallback() {
super.connectedCallback();
this.$.scrollable.dialogElement = this.$.dialog;
ready() {
super.ready();
this._dialogElement = this.$.dialog;
this.addEventListener('more-info-page', (ev) => { this._page = ev.detail.page; });
}
computeDomain(stateObj) {
_computeDomain(stateObj) {
return stateObj ? window.hassUtil.computeDomain(stateObj) : '';
}
computeStateObj(hass) {
_computeStateObj(hass) {
return hass.states[hass.moreInfoEntityId] || null;
}
/**
* We depend on a delayed dialogOpen value to tell the chart component
* that the data is there. Otherwise the chart component will render
* before the dialog is attached to the screen and is unable to determine
* graph size resulting in scroll bars.
*/
computeIsLoadingHistoryData(delayedDialogOpen, stateHistoryLoading) {
return !delayedDialogOpen || stateHistoryLoading;
}
computeHasHistoryComponent(hass) {
return window.hassUtil.isComponentLoaded(hass, 'history');
}
computeShowHistoryComponent(hasHistoryComponent, stateObj) {
return this.hasHistoryComponent && stateObj &&
window.hassUtil.DOMAINS_WITH_NO_HISTORY
.indexOf(window.hassUtil.computeDomain(stateObj)) === -1;
}
stateObjChanged(newVal) {
_stateObjChanged(newVal, oldVal) {
if (!newVal) {
this.dialogOpen = false;
this._dialogOpen = false;
this._page = null;
this._registryInfo = null;
return;
}
window.setTimeout(() => {
// allow dialog to render content before showing it so it is
if (window.hassUtil.isComponentLoaded(this.hass, 'config.entity_registry') &&
(!oldVal || oldVal.entity_id !== newVal.entity_id)) {
this.hass.callApi('get', `config/entity_registry/${newVal.entity_id}`)
.then(
(info) => { this._registryInfo = info; },
() => { this._registryInfo = false; }
);
}
requestAnimationFrame(() => requestAnimationFrame(() => {
// allow dialog to render content before showing it so it will be
// positioned correctly.
this.dialogOpen = true;
}, 10);
if (this.cacheConfig.cacheKey !== `more_info.${newVal.entity_id}`) {
this.cacheConfig = Object.assign(
{}, this.cacheConfig,
{ cacheKey: `more_info.${newVal.entity_id}` }
);
this._dialogOpen = true;
}));
}
_dialogOpenChanged(newVal) {
if (!newVal && this.stateObj) {
this.fire('hass-more-info', { entityId: null });
}
}
dialogOpenChanged(newVal) {
if (newVal) {
window.setTimeout(() => { this.delayedDialogOpen = true; }, 100);
} else if (!newVal && this.stateObj) {
this.fire('hass-more-info', { entityId: null });
this.delayedDialogOpen = false;
}
_equals(a, b) {
return a === b;
}
}
customElements.define(MoreInfoDialog.is, MoreInfoDialog);

11
src/more-infos/more-info-alarm_control_panel.html → src/dialogs/more-info/controls/more-info-alarm_control_panel.html
View File

@ -1,11 +1,10 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.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-button/paper-button.html'>
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='../../../../src/util/hass-mixins.html'>
<dom-module id='more-info-alarm_control_panel'>
<template>

8
src/more-infos/more-info-automation.html → src/dialogs/more-info/controls/more-info-automation.html
View File

@ -1,10 +1,10 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.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="../components/ha-relative-time.html">
<link rel="import" href="../../../components/ha-relative-time.html">
<dom-module id="more-info-automation">
<template>

4
src/more-infos/more-info-camera.html → src/dialogs/more-info/controls/more-info-camera.html
View File

@ -1,6 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='../../../../src/util/hass-mixins.html'>
<dom-module id='more-info-camera'>
<template>

20
src/more-infos/more-info-climate.html → src/dialogs/more-info/controls/more-info-climate.html
View File

@ -1,17 +1,17 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/polymer/lib/utils/debounce.html">
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../../../bower_components/polymer/lib/utils/debounce.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../../../bower_components/paper-toggle-button/paper-toggle-button.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='../../../../src/util/hass-mixins.html'>
<link rel="import" href='../components/ha-climate-control.html'>
<link rel="import" href='../../../components/ha-climate-control.html'>
<dom-module id='more-info-climate'>
<template>

14
src/more-infos/more-info-configurator.html → src/dialogs/more-info/controls/more-info-configurator.html
View File

@ -1,11 +1,11 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.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-button/paper-button.html'>
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.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-button/paper-button.html'>
<link rel='import' href='../../../../bower_components/paper-input/paper-input.html'>
<link rel='import' href='../components/ha-markdown.html'>
<link rel='import' href='../../../components/ha-markdown.html'>
<dom-module id='more-info-configurator'>
<template>

2
src/more-infos/more-info-content.html → src/dialogs/more-info/controls/more-info-content.html
View File

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='more-info-alarm_control_panel.html'>
<link rel='import' href='more-info-automation.html'>

10
src/more-infos/more-info-cover.html → src/dialogs/more-info/controls/more-info-cover.html
View File

@ -1,10 +1,10 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
<link rel='import' href='../util/cover-model.html'>
<link rel='import' href='../../../util/cover-model.html'>
<dom-module id='more-info-cover'>
<template>

4
src/more-infos/more-info-default.html → src/dialogs/more-info/controls/more-info-default.html
View File

@ -1,6 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../components/ha-attributes.html">
<link rel="import" href="../../../components/ha-attributes.html">
<dom-module id="more-info-default">
<template>

18
src/more-infos/more-info-fan.html → src/dialogs/more-info/controls/more-info-fan.html
View File

@ -1,15 +1,15 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../../../bower_components/paper-toggle-button/paper-toggle-button.html'>
<link rel='import' href='../../../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='../../../../src/util/hass-mixins.html'>
<link rel="import" href="../components/ha-attributes.html">
<link rel="import" href="../../../components/ha-attributes.html">
<dom-module id='more-info-fan'>
<template>

4
src/more-infos/more-info-group.html → src/dialogs/more-info/controls/more-info-group.html
View File

@ -1,6 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../state-summary/state-card-content.html">
<link rel="import" href="../../../state-summary/state-card-content.html">
<dom-module id="more-info-group">
<template>

6
src/more-infos/more-info-history_graph.html → src/dialogs/more-info/controls/more-info-history_graph.html
View File

@ -1,8 +1,8 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../cards/ha-history_graph-card.html">
<link rel="import" href="../../../cards/ha-history_graph-card.html">
<link rel="import" href="../components/ha-attributes.html">
<link rel="import" href="../../../components/ha-attributes.html">
<dom-module id="more-info-history_graph">
<template>

10
src/more-infos/more-info-input_datetime.html → src/dialogs/more-info/controls/more-info-input_datetime.html
View File

@ -1,8 +1,8 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../components/ha-relative-time.html">
<link rel="import" href="../../bower_components/vaadin-date-picker/vaadin-date-picker.html">
<link rel="import" href="../../bower_components/paper-time-input/paper-time-input.html">
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../components/ha-relative-time.html">
<link rel="import" href="../../../../bower_components/vaadin-date-picker/vaadin-date-picker.html">
<link rel="import" href="../../../../bower_components/paper-time-input/paper-time-input.html">
<dom-module id="more-info-input_datetime">
<template>

18
src/more-infos/more-info-light.html → src/dialogs/more-info/controls/more-info-light.html
View File

@ -1,15 +1,15 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='../../../../src/util/hass-mixins.html'>
<link rel='import' href='../components/ha-labeled-slider.html'>
<link rel='import' href='../components/ha-color-picker.html'>
<link rel='import' href='../components/ha-attributes.html'>
<link rel='import' href='../../../components/ha-labeled-slider.html'>
<link rel='import' href='../../../components/ha-color-picker.html'>
<link rel='import' href='../../../components/ha-attributes.html'>
<dom-module id='more-info-light'>
<template>

8
src/more-infos/more-info-lock.html → src/dialogs/more-info/controls/more-info-lock.html
View File

@ -1,8 +1,8 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.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='../components/ha-attributes.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='../../../components/ha-attributes.html'>
<dom-module id='more-info-lock'>
<template>

18
src/more-infos/more-info-media_player.html → src/dialogs/more-info/controls/more-info-media_player.html
View File

@ -1,16 +1,16 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
<link rel='import' href='../../../../bower_components/iron-icon/iron-icon.html'>
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='../../../../src/util/hass-mixins.html'>
<dom-module id='more-info-media_player'>
<template>

4
src/more-infos/more-info-script.html → src/dialogs/more-info/controls/more-info-script.html
View File

@ -1,6 +1,6 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id='more-info-script'>
<template>

6
src/more-infos/more-info-sun.html → src/dialogs/more-info/controls/more-info-sun.html
View File

@ -1,8 +1,8 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../components/ha-relative-time.html">
<link rel="import" href="../../../components/ha-relative-time.html">
<dom-module id="more-info-sun">
<template>

4
src/more-infos/more-info-updater.html → src/dialogs/more-info/controls/more-info-updater.html
View File

@ -1,4 +1,4 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<dom-module id="more-info-updater">
<template>
@ -9,7 +9,7 @@
</style>
<div>
<a class='link' href='https://home-assistant.io/getting-started/updating/' target='_blank'>Update Instructions</a>
<a class='link' href='../../https://home-assistant.io/getting-started/updating/' target='_blank'>Update Instructions</a>
</div>
</template>
</dom-module>

16
src/more-infos/more-info-vacuum.html → src/dialogs/more-info/controls/more-info-vacuum.html
View File

@ -1,15 +1,15 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
<link rel='import' href='../../../../bower_components/iron-icon/iron-icon.html'>
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel="import" href="../components/ha-attributes.html">
<link rel="import" href="../../../components/ha-attributes.html">
<dom-module id='more-info-vacuum'>
<template>

165
src/dialogs/more-info/more-info-controls.html Normal file
View File

@ -0,0 +1,165 @@
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../../state-summary/state-card-content.html">
<link rel='import' href='../../util/hass-mixins.html'>
<link rel='import' href='../../resources/ha-style.html'>
<link rel="import" href="./controls/more-info-content.html">
<dom-module id="more-info-controls">
<template>
<style>
app-toolbar {
color: var(--more-info-header-color);
background-color: var(--more-info-header-background);
}
app-toolbar [main-title] {
/* Design guideline states 24px, changed to 16 to align with state info */
margin-left: 16px;
}
state-card-content {
display: block;
padding: 16px;
}
state-history-charts {
position: relative;
z-index: 1;
max-width: 365px;
margin-bottom: 16px;
}
paper-dialog-scrollable {
margin-bottom: 16px;
}
:host([domain=camera]) paper-dialog-scrollable {
margin: 0 -24px -5px;
}
</style>
<app-toolbar>
<paper-icon-button
icon='mdi:close'
dialog-dismiss
></paper-icon-button>
<div main-title>[[_computeStateName(stateObj)]]</div>
<template is='dom-if' if='[[canConfigure]]'>
<paper-icon-button
icon='mdi:settings'
on-click='_gotoSettings'
></paper-icon-button>
</template>
</app-toolbar>
<template is='dom-if' if="[[_computeShowStateInfo(stateObj)]]" restamp>
<state-card-content
state-obj="[[stateObj]]"
hass='[[hass]]' in-dialog></state-card-content>
</template>
<template is='dom-if' if="[[_computeShowHistoryComponent(hass, stateObj)]]" restamp>
<div>
<ha-state-history-data
hass='[[hass]]'
filter-type='recent-entity'
entity-id='[[stateObj.entity_id]]'
data='{{_stateHistory}}'
is-loading='{{_stateHistoryLoading}}'
cache-config='[[_cacheConfig]]'
></ha-state-history-data>
<state-history-charts
history-data="[[_stateHistory]]"
is-loading-data="[[_stateHistoryLoading]]"
up-to-now
></state-history-charts>
</div>
</template>
<paper-dialog-scrollable dialog-element='[[dialogElement]]'>
<more-info-content
state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
</paper-dialog-scrollable>
</template>
</dom-module>
<script>
{
const DOMAINS_NO_INFO = [
'camera',
'configurator',
'history_graph',
];
class MoreInfoControls extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'more-info-controls'; }
static get properties() {
return {
hass: Object,
stateObj: {
type: Object,
observer: '_stateObjChanged',
},
dialogElement: Object,
canConfigure: Boolean,
domain: {
type: String,
reflectToAttribute: true,
computed: '_computeDomain(stateObj)',
},
_stateHistory: Object,
_stateHistoryLoading: Boolean,
_cacheConfig: {
type: Object,
value: {
refresh: 60,
cacheKey: null,
hoursToShow: 24,
},
},
};
}
_computeShowStateInfo(stateObj) {
return !stateObj || !DOMAINS_NO_INFO.includes(window.hassUtil.computeDomain(stateObj));
}
_computeShowHistoryComponent(hass, stateObj) {
return hass && stateObj &&
window.hassUtil.isComponentLoaded(hass, 'history') &&
!window.hassUtil.DOMAINS_WITH_NO_HISTORY.includes(window.hassUtil.computeDomain(stateObj));
}
_computeDomain(stateObj) {
return stateObj ? window.hassUtil.computeDomain(stateObj) : '';
}
_computeStateName(stateObj) {
return stateObj ? window.hassUtil.computeStateName(stateObj) : '';
}
_stateObjChanged(newVal) {
if (!newVal) {
return;
}
if (this._cacheConfig.cacheKey !== `more_info.${newVal.entity_id}`) {
this._cacheConfig = Object.assign(
{}, this._cacheConfig,
{ cacheKey: `more_info.${newVal.entity_id}` }
);
}
}
_gotoSettings() {
this.fire('more-info-page', { page: 'settings' });
}
}
customElements.define(MoreInfoControls.is, MoreInfoControls);
}
</script>

109
src/dialogs/more-info/more-info-settings.html Normal file
View File

@ -0,0 +1,109 @@
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel='import' href='../../util/hass-mixins.html'>
<dom-module id="more-info-settings">
<template>
<style>
app-toolbar {
color: var(--more-info-header-color);
background-color: var(--more-info-header-background);
/* to fit save button */
padding-right: 0;
}
app-toolbar [main-title] {
/* Design guideline states 24px, changed to 16 to align with more-info-controls */
margin-left: 16px;
}
app-toolbar paper-button {
font-size: .8em;
margin: 0;
}
.form {
padding: 0 24px 24px;
}
</style>
<app-toolbar>
<paper-icon-button
icon='mdi:arrow-left'
on-click='_backTapped'
></paper-icon-button>
<div main-title>[[_computeStateName(stateObj)]]</div>
<paper-button on-click='_save'>Save</paper-button>
</app-toolbar>
<div class='form'>
<paper-input
value='{{_name}}'
label='Name'
></paper-input>
</div>
</template>
</dom-module>
<script>
class MoreInfoSettings extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'more-info-settings'; }
static get properties() {
return {
hass: Object,
stateObj: Object,
_componentLoaded: {
type: Boolean,
computed: '_computeComponentLoaded(hass)'
},
registryInfo: {
type: Object,
observer: '_registryInfoChanged',
notify: true,
},
_name: String,
};
}
_computeStateName(stateObj) {
if (!stateObj) return '';
return window.hassUtil.computeStateName(stateObj);
}
_computeComponentLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.entity_registry');
}
_registryInfoChanged(newVal) {
if (newVal) {
this._name = newVal.name;
} else {
this._name = '';
}
}
_backTapped() {
this.fire('more-info-page', { page: null });
}
_save() {
const data = {
name: this._name,
};
this.hass.callApi('post', `config/entity_registry/${this.stateObj.entity_id}`, data)
.then(
(info) => { this.registryInfo = info; },
() => { alert('save failed!'); }
);
}
}
customElements.define(MoreInfoSettings.is, MoreInfoSettings);
</script>