ha-frontend/panels/logbook/ha-panel-logbook.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-spinner/paper-spinner.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/ha-menu-button.html">
<link rel="import" href="../../src/resources/pikaday-js.html">
<link rel="import" href="../../src/resources/ha-style.html">

<link rel="import" href="./ha-logbook.html">
<link rel="import" href="./ha-logbook-data.html">

<dom-module id="ha-panel-logbook">
  <template>
    <style include="ha-style">
    .content {
      padding: 16px;
    }

    paper-input {
      max-width: 200px;
    }

    [hidden] {
      display: none !important;
    }
    </style>

    <ha-logbook-data
      hass='[[hass]]'
      is-loading='{{isLoading}}'
      entries='{{entries}}'
      filter-date='[[_computeFilterDate(_selectedDate)]]'
    ></ha-logbook-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>Logbook</div>
        </app-toolbar>
      </app-header>

      <div class="flex content">
        <div class='selected-date-container'>
          <paper-input
            label='Showing entries for'
            id='datePicker'
            value='[[_computeDateDisplay(_selectedDate)]]'
            on-focus='datepickerFocus'
          ></paper-input>

          <paper-spinner
            active='[[isLoading]]'
            hidden$='[[!isLoading]]'
            alt='Loading logbook entries'
          ></paper-spinner>
        </div>
        <ha-logbook hass='[[hass]]' entries="[[entries]]" hidden$='[[isLoading]]'></ha-logbook>
      </div>
    </app-header-layout>
  </template>
</dom-module>

<script>
Polymer({
  is: 'ha-panel-logbook',

  properties: {
    hass: {
      type: Object,
    },

    narrow: {
      type: Boolean,
      value: false,
    },

    showMenu: {
      type: Boolean,
      value: false,
    },

    _selectedDate: {
      type: String,
      value: function () {
        return new Date();
      },
    },

    isLoading: {
      type: Boolean,
    },

    entries: {
      type: Array,
    },

    datePicker: {
      type: Object,
    },
  },

  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>