mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Migrate panels to app elements
This commit is contained in:
Paulus Schoutsen
parent
697f9397de
commit
057adee010
@ -17,7 +17,9 @@
|
||||
"google-apis": "GoogleWebComponents/google-apis#~1.1.6",
|
||||
"font-roboto-local": "^1.0.1",
|
||||
"iron-flex-layout": "^1.3.1",
|
||||
"paper-scroll-header-panel": "1.0.16"
|
||||
"paper-scroll-header-panel": "1.0.16",
|
||||
"app-elements": "^0.9.0",
|
||||
"app-layout": "^0.10.1"
|
||||
},
|
||||
"_comment": "added to get min version for iron-flex-layout, paper-scroll-header-panel"
|
||||
}
|
||||
|
||||
@ -5,23 +5,29 @@
|
||||
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
|
||||
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
|
||||
|
||||
<link rel="import" href="../../src/layouts/partial-base.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/resources/home-assistant-style.html">
|
||||
|
||||
<link rel="import" href="./events-list.html">
|
||||
|
||||
<dom-module id="ha-panel-dev-event">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
:host {
|
||||
background-color: white;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ha-form {
|
||||
margin-right: 16px;
|
||||
@ -32,8 +38,13 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="{{narrow}}" show-menu='[[showMenu]]'>
|
||||
<span header-title>Events</span>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>Events</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='flex'>
|
||||
@ -53,7 +64,7 @@
|
||||
<events-list on-event-selected='eventSelected' hass='[[hass]]'></event-list>
|
||||
</div>
|
||||
</div>
|
||||
</partial-base>
|
||||
</events-list>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
@ -2,22 +2,28 @@
|
||||
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
|
||||
<link rel="import" href="../../src/layouts/partial-base.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/util/hass-behavior.html">
|
||||
<link rel="import" href="../../src/resources/home-assistant-style.html">
|
||||
|
||||
<dom-module id="ha-panel-dev-info">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-positioning"></style>
|
||||
<style>
|
||||
.content {
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
<style include="iron-positioning ha-style">
|
||||
:host {
|
||||
background-color: white;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.about {
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
@ -52,8 +58,13 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>About</span>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>About</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class='content fit'>
|
||||
<div class='about'>
|
||||
@ -88,7 +99,7 @@
|
||||
</p>
|
||||
<div class='error-log'>[[errorLog]]</div>
|
||||
</div>
|
||||
</partial-base>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -5,24 +5,29 @@
|
||||
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
|
||||
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
|
||||
|
||||
<link rel="import" href="../../src/layouts/partial-base.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/resources/home-assistant-style.html">
|
||||
|
||||
<link rel="import" href="./services-list.html">
|
||||
|
||||
<dom-module id="ha-panel-dev-service">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
<style include="iron-flex iron-positioning ha-style">
|
||||
:host {
|
||||
background-color: white;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ha-form {
|
||||
margin-right: 16px;
|
||||
}
|
||||
@ -37,8 +42,13 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>Services</span>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>Services</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='flex'>
|
||||
@ -60,7 +70,7 @@
|
||||
<services-list on-service-selected='serviceSelected' hass='[[hass]]'></services-list>
|
||||
</div>
|
||||
</div>
|
||||
</partial-base>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../../src/util/hass-behavior.html">
|
||||
|
||||
<dom-module id="entity-list">
|
||||
<template>
|
||||
<style>
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--dark-primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul>
|
||||
<template is='dom-repeat' items='[[entities]]' as='entity'>
|
||||
<li><a href='#' on-click='entitySelected'>[[entity.entityId]]</a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'entity-list',
|
||||
|
||||
behaviors: [window.hassBehavior],
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
entities: {
|
||||
type: Array,
|
||||
bindNuclear: function (hass) {
|
||||
return [
|
||||
hass.entityGetters.entityMap,
|
||||
function (map) {
|
||||
return map.valueSeq().sortBy(function (entity) { return entity.entityId; }).toArray();
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
entitySelected: function (ev) {
|
||||
ev.preventDefault();
|
||||
this.fire('entity-selected', { entityId: ev.model.entity.entityId });
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -4,58 +4,85 @@
|
||||
<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-textarea.html">
|
||||
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
|
||||
|
||||
<link rel="import" href="../../src/layouts/partial-base.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="./entity-list.html">
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/util/hass-behavior.html">
|
||||
<link rel="import" href="../../src/resources/home-assistant-style.html">
|
||||
|
||||
<dom-module id="ha-panel-dev-state">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
<style include="ha-style">
|
||||
:host {
|
||||
background-color: white;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
|
||||
.ha-form {
|
||||
margin-right: 16px;
|
||||
.content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply(--paper-font-title);
|
||||
.entities th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.entities td:nth-child(3) {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.entities a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>States</span>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>States</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='flex'>
|
||||
<p>
|
||||
<div class='content'>
|
||||
<div>
|
||||
Set the representation of a device within Home Assistant.<br />
|
||||
This will not communicate with the actual device.
|
||||
</p>
|
||||
|
||||
<div class='ha-form'>
|
||||
<paper-input label="Entity ID" autofocus required value='{{entityId}}'></paper-input>
|
||||
<paper-input label="State" required value='{{state}}'></paper-input>
|
||||
<paper-textarea label="State attributes (JSON, optional)" value='{{stateAttributes}}'></paper-textarea>
|
||||
<paper-input label="Entity ID" autofocus required value='{{_entityId}}'></paper-input>
|
||||
<paper-input label="State" required value='{{_state}}'></paper-input>
|
||||
<paper-textarea label="State attributes (JSON, optional)" value='{{_stateAttributes}}'></paper-textarea>
|
||||
<paper-button on-tap='handleSetState' raised>Set State</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class='header'>Current entities</div>
|
||||
<entity-list on-entity-selected='entitySelected' hass='[[hass]]'></entity-list>
|
||||
<h1>Current entities</h1>
|
||||
<table class='entities'>
|
||||
<tr>
|
||||
<th>Entity</th>
|
||||
<th>State</th>
|
||||
<th hidden$='[[narrow]]'>
|
||||
Attributes
|
||||
<paper-checkbox checked='{{_showAttributes}}'></paper-checkbox>
|
||||
</th>
|
||||
</tr>
|
||||
<template is='dom-repeat' items='[[_entities]]' as='entity'>
|
||||
<tr>
|
||||
<td><a href='#' on-tap='entitySelected'>[[entity.entityId]]</a></td>
|
||||
<td>[[entity.state]]</td>
|
||||
<template is='dom-if' if='[[computeShowAttributes(narrow, _showAttributes)]]'>
|
||||
<td>[[attributeString(entity)]]</td>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</partial-base>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
@ -63,6 +90,8 @@
|
||||
Polymer({
|
||||
is: 'ha-panel-dev-state',
|
||||
|
||||
behaviors: [window.hassBehavior],
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
@ -78,43 +107,51 @@ Polymer({
|
||||
value: false,
|
||||
},
|
||||
|
||||
entityId: {
|
||||
_entityId: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
|
||||
state: {
|
||||
_state: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
|
||||
stateAttributes: {
|
||||
_stateAttributes: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
|
||||
_showAttributes: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
|
||||
setStateData: function (stateData) {
|
||||
var value = stateData ? JSON.stringify(stateData, null, ' ') : '';
|
||||
|
||||
this.$.inputData.value = value;
|
||||
|
||||
// not according to the spec but it works...
|
||||
this.$.inputDataWrapper.update(this.$.inputData);
|
||||
_entities: {
|
||||
type: Array,
|
||||
bindNuclear: function (hass) {
|
||||
return [
|
||||
hass.entityGetters.entityMap,
|
||||
function (map) {
|
||||
return map.valueSeq().sortBy(function (entity) { return entity.entityId; }).toArray();
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
entitySelected: function (ev) {
|
||||
var state = this.hass.reactor.evaluate(this.hass.entityGetters.byId(ev.detail.entityId));
|
||||
|
||||
this.entityId = state.entityId;
|
||||
this.state = state.state;
|
||||
this.stateAttributes = JSON.stringify(state.attributes, null, ' ');
|
||||
var state = ev.model.entity;
|
||||
this._entityId = state.entityId;
|
||||
this._state = state.state;
|
||||
this._stateAttributes = JSON.stringify(state.attributes, null, ' ');
|
||||
ev.preventDefault();
|
||||
},
|
||||
|
||||
handleSetState: function () {
|
||||
var attr;
|
||||
try {
|
||||
attr = this.stateAttributes ? JSON.parse(this.stateAttributes) : {};
|
||||
attr = this.stateAttributes ? JSON.parse(this._stateAttributes) : {};
|
||||
} catch (err) {
|
||||
/* eslint-disable no-alert */
|
||||
alert('Error parsing JSON: ' + err);
|
||||
@ -123,15 +160,28 @@ Polymer({
|
||||
}
|
||||
|
||||
this.hass.entityActions.save({
|
||||
entityId: this.entityId,
|
||||
state: this.state,
|
||||
entityId: this._entityId,
|
||||
state: this._state,
|
||||
attributes: attr,
|
||||
});
|
||||
},
|
||||
|
||||
computeFormClasses: function (narrow) {
|
||||
return narrow ?
|
||||
'content fit' : 'content fit layout horizontal';
|
||||
computeShowAttributes: function (narrow, _showAttributes) {
|
||||
return !narrow && _showAttributes;
|
||||
},
|
||||
|
||||
attributeString: function (entity) {
|
||||
var output = '';
|
||||
var i;
|
||||
var keys;
|
||||
var key;
|
||||
|
||||
for (i = 0, keys = Object.keys(entity.attributes); i < keys.length; i++) {
|
||||
key = keys[i];
|
||||
output += key + ': ' + entity.attributes[key] + '\n';
|
||||
}
|
||||
|
||||
return output;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -4,23 +4,29 @@
|
||||
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
|
||||
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
||||
|
||||
<link rel="import" href="../../src/layouts/partial-base.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/util/hass-behavior.html">
|
||||
<link rel="import" href="../../src/resources/home-assistant-style.html">
|
||||
|
||||
<dom-module id="ha-panel-dev-template">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
margin-top: 64px;
|
||||
padding: 16px;
|
||||
:host {
|
||||
background-color: white;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.edit-pane {
|
||||
margin-right: 16px;
|
||||
}
|
||||
@ -55,8 +61,13 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>Template Editor</span>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>Templates</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='edit-pane'>
|
||||
@ -75,7 +86,7 @@
|
||||
<pre class$='[[computeRenderedClasses(error)]]'>[[processed]]</pre>
|
||||
</div>
|
||||
</div>
|
||||
</partial-base>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -2,15 +2,19 @@
|
||||
<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="../../src/layouts/partial-base.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../src/components/state-history-charts.html">
|
||||
<link rel="import" href="../../src/resources/pikaday-js.html">
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/util/hass-behavior.html">
|
||||
<link rel="import" href="../../src/resources/home-assistant-style.html">
|
||||
|
||||
<dom-module id="ha-panel-history">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
<style>
|
||||
<style include="iron-flex ha-style">
|
||||
.content {
|
||||
background-color: white;
|
||||
}
|
||||
@ -28,11 +32,17 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>History</span>
|
||||
|
||||
<paper-icon-button icon="mdi:refresh" header-buttons
|
||||
on-tap="handleRefreshClick"></paper-icon-button>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>History</div>
|
||||
<paper-icon-button
|
||||
icon="mdi:refresh"
|
||||
on-tap="handleRefreshClick"
|
||||
></paper-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class$="[[computeContentClasses(narrow)]]">
|
||||
<paper-input
|
||||
@ -45,7 +55,7 @@
|
||||
<state-history-charts state-history="[[stateHistory]]"
|
||||
is-loading-data="[[isLoadingData]]"></state-history-charts>
|
||||
</div>
|
||||
</partial-base>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -1,19 +1,23 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../../src/layouts/partial-base.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/resources/home-assistant-style.html">
|
||||
|
||||
<dom-module id='ha-panel-iframe'>
|
||||
<template>
|
||||
<style>
|
||||
<style include='ha-style'>
|
||||
iframe {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>[[panel.title]]</span>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>[[panel.title]]</div>
|
||||
</app-toolbar>
|
||||
|
||||
<iframe
|
||||
src='[[panel.config.url]]'
|
||||
|
||||
@ -3,16 +3,21 @@
|
||||
<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="../../src/layouts/partial-base.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/components/loading-box.html">
|
||||
<link rel="import" href="../../src/resources/pikaday-js.html">
|
||||
<link rel="import" href="../../src/util/hass-behavior.html">
|
||||
<link rel="import" href="../../src/resources/home-assistant-style.html">
|
||||
|
||||
<link rel="import" href="./ha-logbook.html">
|
||||
|
||||
<dom-module id="ha-panel-logbook">
|
||||
<template>
|
||||
<style>
|
||||
<style include="ha-style">
|
||||
.selected-date-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
@ -26,11 +31,17 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>Logbook</span>
|
||||
|
||||
<paper-icon-button icon="mdi:refresh" header-buttons
|
||||
on-tap="handleRefresh"></paper-icon-button>
|
||||
<app-header-layout has-scrolling-region>
|
||||
<app-header fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>Logbook</div>
|
||||
<paper-icon-button
|
||||
icon="mdi:refresh"
|
||||
on-tap="handleRefresh"
|
||||
></paper-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div>
|
||||
<div class='selected-date-container'>
|
||||
@ -45,7 +56,7 @@
|
||||
</div>
|
||||
<ha-logbook hass='[[hass]]' entries="[[entries]]" hidden$='[[isLoading]]'></ha-logbook>
|
||||
</div>
|
||||
</partial-base>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -4,11 +4,14 @@
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
||||
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../bower_components/leaflet-map/leaflet-map.html">
|
||||
|
||||
<!-- temp work around -->
|
||||
<link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/util/hass-behavior.html">
|
||||
|
||||
<link rel="import" href="./ha-entity-marker.html">
|
||||
@ -22,25 +25,19 @@
|
||||
|
||||
<dom-module id="ha-panel-map">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.map {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 24px;
|
||||
<style include="ha-style">
|
||||
leaflet-map {
|
||||
height: calc(100% - 64px);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='layout vertical fit'>
|
||||
<paper-toolbar>
|
||||
<paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
|
||||
<div class='title'>Map</div>
|
||||
</paper-toolbar>
|
||||
<app-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div main-title>Map</div>
|
||||
</app-toolbar>
|
||||
|
||||
<div class="flex map">
|
||||
<leaflet-map class="fit" fit-to-markers id="map" max-zoom="17">
|
||||
<leaflet-map fit-to-markers id="map" max-zoom="17">
|
||||
<leaflet-tilelayer max-zoom="18"
|
||||
url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png">
|
||||
© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://cartodb.com/attributions">CartoDB</a>
|
||||
@ -82,8 +79,6 @@
|
||||
</template>
|
||||
</template>
|
||||
</leaflet-map>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -12,8 +12,7 @@
|
||||
<link rel='import' href='./layouts/login-form.html'>
|
||||
<link rel='import' href='./layouts/home-assistant-main.html'>
|
||||
<link rel='import' href='./resources/home-assistant-style.html'>
|
||||
<!-- to support panels -->
|
||||
<link rel="import" href="./layouts/partial-base.html">
|
||||
<link rel="import" href="./resources/panel-imports.html">
|
||||
|
||||
<dom-module id='home-assistant'>
|
||||
<template>
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
||||
|
||||
<link rel='import' href='../../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html'>
|
||||
|
||||
<link rel='import' href='../../bower_components/paper-toolbar/paper-toolbar.html'>
|
||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||
|
||||
<link rel='import' href='../components/ha-menu-button.html'>
|
||||
|
||||
<dom-module id='partial-base'>
|
||||
<template>
|
||||
<style is="custom-style" include="iron-positioning"></style>
|
||||
<style>
|
||||
:host {
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 24px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<paper-scroll-header-panel class='fit'>
|
||||
<paper-toolbar>
|
||||
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
||||
<div class="title">
|
||||
<content select='[header-title]'></content>
|
||||
</div>
|
||||
<content select='[header-buttons]'></content>
|
||||
</paper-toolbar>
|
||||
|
||||
<content></content>
|
||||
</paper-scroll-header-panel>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'partial-base',
|
||||
|
||||
properties: {
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -49,3 +49,27 @@
|
||||
animation: ha-spin 2s infinite linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
<dom-module id='ha-style'>
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--paper-font-body1);
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
background-color: var(--primary-color);
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
}
|
||||
|
||||
app-toolbar ha-menu-button + [main-title] {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply(--paper-font-title);
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
3
src/resources/panel-imports.html
Normal file
3
src/resources/panel-imports.html
Normal file
@ -0,0 +1,3 @@
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
Loading…
x
Reference in New Issue
Block a user