From 67b59f1976c206e41b79b58bd366cd1bd48c8624 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 19 Mar 2017 21:55:52 -0700
Subject: [PATCH] Shadow dom fixes (#241)

* Fix color picker

* Fix map panel CSS

* Convert logbook to use vaadin date picker

* Fix logbook clear date

* Migrate history panel to use vaadin date picker

* Remove pikaday

* Lint

* history panel: disable on loading
---
 .eslintrc                            |  3 +-
 bower.json                           |  2 +-
 panels/history/ha-panel-history.html | 83 +++++++++++++------------
 panels/logbook/ha-panel-logbook.html | 90 ++++++++++++++--------------
 panels/map/ha-panel-map.html         |  3 +-
 src/components/ha-color-picker.html  |  4 +-
 src/resources/pikaday-js.html        |  2 -
 7 files changed, 95 insertions(+), 92 deletions(-)
 delete mode 100644 src/resources/pikaday-js.html

diff --git a/.eslintrc b/.eslintrc
index 81aa76e3d2..be2414b93d 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -25,7 +25,8 @@
     "vars-on-top": 0,
     "no-continue": 0,
     "no-param-reassign": 0,
-    "no-multi-assign": 0
+    "no-multi-assign": 0,
+    "radix": 0
   },
   "plugins": [
     "html"
diff --git a/bower.json b/bower.json
index 615eac02b1..9608c2655f 100644
--- a/bower.json
+++ b/bower.json
@@ -17,9 +17,9 @@
     "paper-elements": "PolymerElements/paper-elements#~1.0.7",
     "paper-range-slider": "IftachSadeh/paper-range-slider#~0.2.4",
     "paper-scroll-header-panel": "~1.0.16",
-    "pikaday": "~1.5.1",
     "polymer": "Polymer/polymer#~1.8.0",
     "vaadin-combo-box": "vaadin/vaadin-combo-box#~1.1.5",
+    "vaadin-date-picker": "^1.2.1",
     "paper-slider": "1.0.13",
     "leaflet": "^1.0.2",
     "polymer-sortablejs": "^0.1.3"
diff --git a/panels/history/ha-panel-history.html b/panels/history/ha-panel-history.html
index ce3eaacacf..4da7d494f7 100644
--- a/panels/history/ha-panel-history.html
+++ b/panels/history/ha-panel-history.html
@@ -8,8 +8,9 @@
 <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="../../bower_components/vaadin-date-picker/vaadin-date-picker.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">
@@ -18,13 +19,15 @@
   <template>
     <style include="iron-flex ha-style">
       .content {
-        padding: 16px;
+        padding: 0 16px 16px;
       }
 
-      paper-input {
-        max-width: 200px;
+      vaadin-date-picker {
+        margin-bottom: 24px;
         margin-right: 16px;
+        max-width: 200px;
       }
+
       paper-dropdown-menu {
         max-width: 100px;
       }
@@ -33,7 +36,7 @@
     <ha-state-history-data
       hass='[[hass]]'
       filter-type='[[_filterType]]'
-      filter-value='[[_computeFilterDate(_selectedDate, _periodIndex)]]'
+      filter-value='[[_computeFilterDate(_currentDate, _periodIndex)]]'
       data='{{stateHistoryInput}}'
       is-loading='{{isLoadingData}}'
     ></ha-state-history-data>
@@ -47,13 +50,18 @@
 
       <div class="flex content">
         <div class="flex layout horizontal wrap">
-          <paper-input
-            label='Start date'
-            id='datePicker'
-            value='[[_computeDateDisplay(_selectedDate)]]'
-            on-focus='datepickerFocus'
-          ></paper-input>
-          <paper-dropdown-menu label-float label='Period'>
+          <vaadin-date-picker
+            id='picker'
+            value='{{_currentDate}}'
+            label='Showing entries for'
+            disabled='[[isLoadingData]]'
+          ></vaadin-date-picker>
+
+          <paper-dropdown-menu
+            label-float
+            label='Period'
+            disabled='[[isLoadingData]]'
+          >
             <paper-menu class="dropdown-content" selected="{{_periodIndex}}">
               <paper-item>1 day</paper-item>
               <paper-item>3 days</paper-item>
@@ -107,12 +115,13 @@ Polymer({
       value: false,
     },
 
-    _selectedDate: {
-      type: Date,
+    // ISO8601 formatted date string
+    _currentDate: {
+      type: String,
       value: function () {
-        var begin = new Date();
-        begin.setHours(0, 0, 0, 0);
-        return begin;
+        var value = new Date();
+        value.setHours(0, 0, 0);
+        return value.toISOString().split('T')[0];
       },
     },
 
@@ -127,32 +136,28 @@ Polymer({
   },
 
   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) {
-        this._selectedDate = newDate;
-      }.bind(this),
+    // We are unable to parse date because we use intl api to render date
+    // So we just return last known date.
+    var lastFormatDate = new Date();
+    this.$.picker.set('i18n.parseDate', function () {
+      return lastFormatDate;
+    });
+    this.$.picker.set('i18n.formatDate', function (date) {
+      lastFormatDate = date;
+      return window.hassUtil.formatDate(date);
     });
-    // 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, periodIndex) {
-    var endTime = new Date(selectedDate);
+  _computeFilterDate: function (_currentDate, periodIndex) {
+    if (!_currentDate) return undefined;
+    var parts = _currentDate.split('-');
+    parts[1] = parseInt(parts[1]) - 1;
+    var startTime = new Date(parts[0], parts[1], parts[2]);
+    var endTime = new Date(startTime);
     endTime.setDate(
-      selectedDate.getDate() + this._computeFilterDays(periodIndex));
-    return selectedDate.toISOString() + '?end_time=' + endTime.toISOString();
+      startTime.getDate() + this._computeFilterDays(periodIndex));
+
+    return startTime.toISOString() + '?end_time=' + endTime.toISOString();
   },
 
   _computeFilterDays: function (periodIndex) {
diff --git a/panels/logbook/ha-panel-logbook.html b/panels/logbook/ha-panel-logbook.html
index 314936e1f7..85fbcec5e0 100644
--- a/panels/logbook/ha-panel-logbook.html
+++ b/panels/logbook/ha-panel-logbook.html
@@ -8,8 +8,9 @@
 <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="../../bower_components/vaadin-date-picker/vaadin-date-picker.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">
@@ -19,10 +20,17 @@
   <template>
     <style include="ha-style">
     .content {
-      padding: 16px;
+      padding: 0 16px 16px;
     }
 
-    paper-input {
+    paper-spinner {
+      position: absolute;
+      top: 15px;
+      left: 186px;
+    }
+
+    vaadin-date-picker {
+      margin-bottom: 24px;
       max-width: 200px;
     }
 
@@ -35,7 +43,7 @@
       hass='[[hass]]'
       is-loading='{{isLoading}}'
       entries='{{entries}}'
-      filter-date='[[_computeFilterDate(_selectedDate)]]'
+      filter-date='[[_computeFilterDate(_currentDate)]]'
     ></ha-logbook-data>
 
     <app-header-layout has-scrolling-region>
@@ -46,21 +54,20 @@
         </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>
+      <div class="content">
+        <paper-spinner
+          active='[[isLoading]]'
+          hidden$='[[!isLoading]]'
+          alt='Loading logbook entries'
+        ></paper-spinner>
+
+        <vaadin-date-picker
+          id='picker'
+          value='{{_currentDate}}'
+          label='Showing entries for'
+          disabled='[[isLoading]]'
+        ></vaadin-date-picker>
 
-          <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>
@@ -86,12 +93,13 @@ Polymer({
       value: false,
     },
 
-    _selectedDate: {
+    // ISO8601 formatted date string
+    _currentDate: {
       type: String,
       value: function () {
-        var begin = new Date();
-        begin.setHours(0, 0, 0, 0);
-        return begin;
+        var value = new Date();
+        value.setHours(0, 0, 0);
+        return value.toISOString().split('T')[0];
       },
     },
 
@@ -108,34 +116,24 @@ Polymer({
     },
   },
 
-  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) {
-        this._selectedDate = newDate;
-      }.bind(this),
+    // We are unable to parse date because we use intl api to render date
+    // So we just return last known date.
+    var lastFormatDate = new Date();
+    this.$.picker.set('i18n.parseDate', function () {
+      return lastFormatDate;
+    });
+    this.$.picker.set('i18n.formatDate', function (date) {
+      lastFormatDate = date;
+      return window.hassUtil.formatDate(date);
     });
-    // 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();
+  _computeFilterDate: function (_currentDate) {
+    if (!_currentDate) return undefined;
+    var parts = _currentDate.split('-');
+    parts[1] = parseInt(parts[1]) - 1;
+    return new Date(parts[0], parts[1], parts[2]).toISOString();
   },
 });
 </script>
diff --git a/panels/map/ha-panel-map.html b/panels/map/ha-panel-map.html
index 6bcfbd4c55..6ee824f56c 100644
--- a/panels/map/ha-panel-map.html
+++ b/panels/map/ha-panel-map.html
@@ -5,7 +5,6 @@
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
 <script src="../../bower_components/leaflet/dist/leaflet.js"></script>
-<link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />
 
 <link rel="import" href="../../src/components/ha-menu-button.html">
 
@@ -13,6 +12,8 @@
 
 <dom-module id="ha-panel-map">
   <template>
+    <link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />
+
     <style include="ha-style">
       #map {
         height: calc(100% - 64px);
diff --git a/src/components/ha-color-picker.html b/src/components/ha-color-picker.html
index 347af7f9cd..dc41f34b45 100644
--- a/src/components/ha-color-picker.html
+++ b/src/components/ha-color-picker.html
@@ -8,7 +8,7 @@
       }
     </style>
 
-    <canvas width='[[width]]' height='[[height]]'></canvas>
+    <canvas width='[[width]]' height='[[height]]' id='canvas'></canvas>
   </template>
 </dom-module>
 
@@ -107,7 +107,7 @@ Polymer({
   ready: function () {
     this.setColor = this.setColor.bind(this);
     this.mouseMoveIsThrottled = true;
-    this.canvas = this.children[0];
+    this.canvas = this.$.canvas;
     this.context = this.canvas.getContext('2d');
     this.drawGradient();
   },
diff --git a/src/resources/pikaday-js.html b/src/resources/pikaday-js.html
deleted file mode 100644
index 258ba8631c..0000000000
--- a/src/resources/pikaday-js.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<script src="../../bower_components/pikaday/pikaday.js"></script>
-<link href="../../bower_components/pikaday/css/pikaday.css" media="all" rel="stylesheet" />