jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Entity Registry UI (#921)

Browse Source 
* Entity Registry UI

* Tweak style in fullscreen

* Fix UI comments

* Fix imports

* Change title margin

* Fix graph rendering

* More style fixes

* Remove unused parameter
This commit is contained in:
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; @apply --paper-font-common-nowrap;
} }
paper-card[dialog] .header { paper-card[dialog] .header {
padding-top: 0; display: none;
padding-left: 0;
} }
</style> </style>
<ha-state-history-data <ha-state-history-data

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

@ -144,7 +144,7 @@
yPadding: '0' yPadding: '0'
}); });
if (!this._chart) { if (!this._chart) {
this.onPropsChange(); requestAnimationFrame(() => requestAnimationFrame(() => this.onPropsChange()));
} }
this._resizeListener = () => { this._resizeListener = () => {
this._debouncer = Polymer.Debouncer.debounce( 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="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../components/state-history-charts.html"> <link rel="import" href="../components/state-history-charts.html">
<link rel="import" href="../data/ha-state-history-data.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='../util/hass-mixins.html'>
<link rel='import' href='../resources/ha-style.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"> <dom-module id="more-info-dialog">
<template> <template>
<style include="ha-style-dialog"> <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] { paper-dialog[data-domain=camera] {
width: auto; width: auto;
} }
@ -28,51 +46,32 @@
paper-dialog[data-domain=history_graph] { paper-dialog[data-domain=history_graph] {
width: 90%; 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> </style>
<!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' --> <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}' data-domain$='[[computeDomain(stateObj)]]'> <paper-dialog
<h2> id="dialog"
<state-card-content with-backdrop
state-obj="[[stateObj]]" opened='{{_dialogOpen}}'
hass='[[hass]]' in-dialog></state-card-content> data-domain$='[[_computeDomain(stateObj)]]'
</h2> >
<template is='dom-if' if="[[showHistoryComponent]]" restamp> <template is='dom-if' if='[[!_page]]'>
<div> <more-info-controls
<ha-state-history-data class='no-padding'
hass='[[hass]]' hass='[[hass]]'
filter-type='recent-entity' state-obj='[[stateObj]]'
entity-id='[[stateObj.entity_id]]' dialog-element='[[_dialogElement]]'
data='{{stateHistory}}' can-configure='[[_registryInfo]]'
is-loading='{{stateHistoryLoading}}' ></more-info-controls>
cache-config='[[cacheConfig]]' </template>
></ha-state-history-data> <template is='dom-if' if='[[_equals(_page, "settings")]]'>
<state-history-charts <more-info-settings
history-data="[[stateHistory]]" class='no-padding'
is-loading-data="[[isLoadingHistoryData]]" hass='[[hass]]'
up-to-now> state-obj='[[stateObj]]'
</state-history-charts> registry-info='{{_registryInfo}}'
</div> ></more-info-settings>
</template> </template>
<paper-dialog-scrollable id='scrollable'>
<more-info-content
state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
</paper-dialog-scrollable>
</paper-dialog> </paper-dialog>
</template> </template>
</dom-module> </dom-module>
@ -86,111 +85,72 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
stateObj: { stateObj: {
type: Object, type: Object,
computed: 'computeStateObj(hass)', computed: '_computeStateObj(hass)',
observer: 'stateObjChanged', observer: '_stateObjChanged',
}, },
stateHistory: Object, _dialogOpen: {
stateHistoryLoading: Boolean,
isLoadingHistoryData: {
type: Boolean,
computed: 'computeIsLoadingHistoryData(delayedDialogOpen, stateHistoryLoading)',
},
hasHistoryComponent: {
type: Boolean,
computed: 'computeHasHistoryComponent(hass)',
},
showHistoryComponent: {
type: Boolean, type: Boolean,
value: false, value: false,
computed: 'computeShowHistoryComponent(hasHistoryComponent, stateObj)', observer: '_dialogOpenChanged',
}, },
dialogOpen: { _dialogElement: Object,
type: Boolean, _registryInfo: Object,
value: false,
observer: 'dialogOpenChanged',
},
delayedDialogOpen: { _page: {
type: Boolean, type: String,
value: false, value: null,
},
cacheConfig: {
type: Object,
value: {
refresh: 60,
cacheKey: null,
hoursToShow: 24,
},
}, },
}; };
} }
connectedCallback() { ready() {
super.connectedCallback(); super.ready();
this.$.scrollable.dialogElement = this.$.dialog; 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) : ''; return stateObj ? window.hassUtil.computeDomain(stateObj) : '';
} }
computeStateObj(hass) { _computeStateObj(hass) {
return hass.states[hass.moreInfoEntityId] || null; return hass.states[hass.moreInfoEntityId] || null;
} }
/** _stateObjChanged(newVal, oldVal) {
* 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) {
if (!newVal) { if (!newVal) {
this.dialogOpen = false; this._dialogOpen = false;
this._page = null;
this._registryInfo = null;
return; return;
} }
window.setTimeout(() => { if (window.hassUtil.isComponentLoaded(this.hass, 'config.entity_registry') &&
// allow dialog to render content before showing it so it is (!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. // positioned correctly.
this.dialogOpen = true; this._dialogOpen = true;
}, 10); }));
if (this.cacheConfig.cacheKey !== `more_info.${newVal.entity_id}`) { }
this.cacheConfig = Object.assign(
{}, this.cacheConfig, _dialogOpenChanged(newVal) {
{ cacheKey: `more_info.${newVal.entity_id}` } if (!newVal && this.stateObj) {
); this.fire('hass-more-info', { entityId: null });
} }
} }
dialogOpenChanged(newVal) { _equals(a, b) {
if (newVal) { return a === b;
window.setTimeout(() => { this.delayedDialogOpen = true; }, 100);
} else if (!newVal && this.stateObj) {
this.fire('hass-more-info', { entityId: null });
this.delayedDialogOpen = false;
}
} }
} }
customElements.define(MoreInfoDialog.is, MoreInfoDialog); 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='../../../../src/util/hass-mixins.html'>
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<dom-module id='more-info-alarm_control_panel'> <dom-module id='more-info-alarm_control_panel'>
<template> <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"> <dom-module id="more-info-automation">
<template> <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'> <dom-module id='more-info-camera'>
<template> <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/polymer-element.html'>
<link rel="import" href="../../bower_components/polymer/lib/utils/debounce.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-slider/paper-slider.html'>
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.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-item/paper-item.html'>
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.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-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'> <dom-module id='more-info-climate'>
<template> <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/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-input/iron-input.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-spinner/paper-spinner.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-input/paper-input.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'> <dom-module id='more-info-configurator'>
<template> <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-alarm_control_panel.html'>
<link rel='import' href='more-info-automation.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/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-icon-button/paper-icon-button.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='../util/cover-model.html'> <link rel='import' href='../../../util/cover-model.html'>
<dom-module id='more-info-cover'> <dom-module id='more-info-cover'>
<template> <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"> <dom-module id="more-info-default">
<template> <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/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-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.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-item/paper-item.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'>
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-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'> <dom-module id='more-info-fan'>
<template> <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"> <dom-module id="more-info-group">
<template> <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"> <dom-module id="more-info-history_graph">
<template> <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/polymer/polymer.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">
<link rel="import" href="../../bower_components/vaadin-date-picker/vaadin-date-picker.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/paper-time-input/paper-time-input.html">
<dom-module id="more-info-input_datetime"> <dom-module id="more-info-input_datetime">
<template> <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/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-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.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-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-labeled-slider.html'>
<link rel='import' href='../components/ha-color-picker.html'> <link rel='import' href='../../../components/ha-color-picker.html'>
<link rel='import' href='../components/ha-attributes.html'> <link rel='import' href='../../../components/ha-attributes.html'>
<dom-module id='more-info-light'> <dom-module id='more-info-light'>
<template> <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-button/paper-button.html'>
<link rel='import' href='../../bower_components/paper-input/paper-input.html'> <link rel='import' href='../../../../bower_components/paper-input/paper-input.html'>
<link rel='import' href='../components/ha-attributes.html'> <link rel='import' href='../../../components/ha-attributes.html'>
<dom-module id='more-info-lock'> <dom-module id='more-info-lock'>
<template> <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-icon-button/paper-icon-button.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-dropdown-menu/paper-dropdown-menu.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-listbox/paper-listbox.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.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'> <dom-module id='more-info-media_player'>
<template> <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'> <dom-module id='more-info-script'>
<template> <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"> <dom-module id="more-info-sun">
<template> <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"> <dom-module id="more-info-updater">
<template> <template>
@ -9,7 +9,7 @@
</style> </style>
<div> <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> </div>
</template> </template>
</dom-module> </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-icon-button/paper-icon-button.html'>
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.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-item/paper-item.html'>
<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.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'> <dom-module id='more-info-vacuum'>
<template> <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>