136 lines
3.5 KiB
HTML
136 lines
3.5 KiB
HTML
<link rel="import" href="../../bower_components/polymer/polymer.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="../../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/data/ha-state-history-data.html">
|
|
<link rel="import" href="../../src/resources/ha-style.html">
|
|
|
|
<dom-module id="ha-panel-history">
|
|
<template>
|
|
<style include="iron-flex ha-style">
|
|
.content {
|
|
padding: 16px;
|
|
}
|
|
|
|
paper-input {
|
|
max-width: 200px;
|
|
}
|
|
</style>
|
|
|
|
<ha-state-history-data
|
|
hass='[[hass]]'
|
|
filter-type='[[_filterType]]'
|
|
filter-value='[[_computeFilterDate(_selectedDate)]]'
|
|
data='{{stateHistory}}'
|
|
isLoading='{{isLoadingData}}'
|
|
></ha-state-history-data>
|
|
|
|
<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>
|
|
</app-toolbar>
|
|
</app-header>
|
|
|
|
<div class="flex content">
|
|
<paper-input
|
|
label='Showing entries for'
|
|
id='datePicker'
|
|
value='[[_computeDateDisplay(_selectedDate)]]'
|
|
on-focus='datepickerFocus'
|
|
></paper-input>
|
|
|
|
<state-history-charts history-data="[[stateHistory]]"
|
|
is-loading-data="[[isLoadingData]]"></state-history-charts>
|
|
</div>
|
|
</app-header-layout>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
Polymer({
|
|
is: 'ha-panel-history',
|
|
|
|
properties: {
|
|
hass: {
|
|
type: Object,
|
|
},
|
|
|
|
narrow: {
|
|
type: Boolean,
|
|
},
|
|
|
|
showMenu: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
stateHistory: {
|
|
type: Object,
|
|
value: null,
|
|
},
|
|
|
|
isLoadingData: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
_selectedDate: {
|
|
type: Date,
|
|
value: function () {
|
|
return new Date();
|
|
},
|
|
},
|
|
|
|
_filterType: {
|
|
type: String,
|
|
value: 'date',
|
|
},
|
|
},
|
|
|
|
datepickerFocus: function () {
|
|
this.datePicker.adjustPosition();
|
|
},
|
|
|
|
attached: function () {
|
|
this.datePicker = new window.Pikaday({
|
|
// Bind field to dummy input to prevent pikaday from overwriting
|
|
// field value with its internal formatting.
|
|
field: document.createElement('input'),
|
|
trigger: this.$.datePicker.inputElement,
|
|
onSelect: function (newDate) {
|
|
newDate.setDate(newDate.getDate() + 1);
|
|
|
|
if (newDate > new Date()) {
|
|
newDate = new Date();
|
|
}
|
|
|
|
this._selectedDate = newDate;
|
|
}.bind(this),
|
|
});
|
|
// Set the initial datePicker date, without triggering onSelect handler.
|
|
this.datePicker.setDate(this._selectedDate, true);
|
|
},
|
|
|
|
detached: function () {
|
|
this.datePicker.destroy();
|
|
},
|
|
|
|
_computeDateDisplay: function (date) {
|
|
return window.hassUtil.formatDate(new Date(date));
|
|
},
|
|
|
|
_computeFilterDate: function (_selectedDate) {
|
|
return _selectedDate.toISOString();
|
|
},
|
|
});
|
|
</script>
|