From 7ae4b501674e812b77b7cf80e8fc3abf2b112523 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 31 Jul 2016 19:05:44 -0700
Subject: [PATCH] Remove moment in favor of fecha

---
 bower.json                                    |  6 +--
 panels/logbook/ha-logbook.html                | 12 +++---
 src/components/display-time.html              | 19 ----------
 src/components/entity/state-info.html         |  4 +-
 ...ha-datetime.html => ha-relative-time.html} |  4 +-
 src/home-assistant.html                       |  2 -
 src/more-infos/more-info-sun.html             |  4 +-
 src/util/hass-util.html                       | 37 +++++++++++++++++--
 8 files changed, 50 insertions(+), 38 deletions(-)
 delete mode 100644 src/components/display-time.html
 rename src/components/{relative-ha-datetime.html => ha-relative-time.html} (91%)

diff --git a/bower.json b/bower.json
index 73309d5069..ef5b61a721 100644
--- a/bower.json
+++ b/bower.json
@@ -11,14 +11,14 @@
     "polymer": "Polymer/polymer#~1.6",
     "pikaday": "1.4",
     "leaflet-map": "1.2.0",
-    "moment": "^2.14.1",
     "iron-elements": "PolymerElements/iron-elements#~1.0.10",
     "paper-elements": "PolymerElements/paper-elements#~1.0.7",
     "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",
-    "app-layout": "^0.10.1"
+    "app-layout": "^0.10.1",
+    "fecha": "^2.2.0"
   },
-  "_comment": "added to get min version for iron-flex-layout, paper-scroll-header-panel"
+  "_comment": "specify iron-flex-layout for higher version than iron elements"
 }
diff --git a/panels/logbook/ha-logbook.html b/panels/logbook/ha-logbook.html
index f39478de1e..27f0ae11c8 100644
--- a/panels/logbook/ha-logbook.html
+++ b/panels/logbook/ha-logbook.html
@@ -1,8 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../src/components/domain-icon.html">
-<link rel="import" href="../../src/components/display-time.html">
-<link rel="import" href="../../src/components/relative-ha-datetime.html">
 
 
 <dom-module id="ha-logbook">
@@ -21,8 +19,8 @@
         line-height: 2em;
       }
 
-      display-time {
-        width: 55px;
+      .time {
+        width: 23px;
         font-size: .8em;
         color: var(--secondary-text-color);
       }
@@ -51,7 +49,7 @@
 
     <template is='dom-repeat' items="[[entries]]">
       <div class='horizontal layout entry'>
-        <display-time date-obj="[[item.when]]"></display-time>
+        <div class='time'>[[formatTime(item.when)]]</div>
         <domain-icon domain="[[item.domain]]" class='icon'></domain-icon>
         <div class='message' flex>
           <template is='dom-if' if="[[!item.entityId]]">
@@ -83,6 +81,10 @@ Polymer({
     },
   },
 
+  formatTime: function (dateObj) {
+    return window.hassUtil.formatTime(dateObj);
+  },
+
   entityClicked: function (ev) {
     ev.preventDefault();
     this.hass.moreInfoActions.selectEntity(ev.model.item.entityId);
diff --git a/src/components/display-time.html b/src/components/display-time.html
deleted file mode 100644
index 099ba2c9a5..0000000000
--- a/src/components/display-time.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<script>
-Polymer({
-  is: 'display-time',
-
-  properties: {
-    dateObj: {
-      type: Object,
-      observer: 'timeChanged',
-    },
-  },
-
-  timeChanged: function (dateObj) {
-    var root = Polymer.dom(this);
-    root.innerHTML = window.moment(dateObj).format('LT');
-  },
-});
-</script>
diff --git a/src/components/entity/state-info.html b/src/components/entity/state-info.html
index bdf296b05f..adf15b5af8 100644
--- a/src/components/entity/state-info.html
+++ b/src/components/entity/state-info.html
@@ -1,7 +1,7 @@
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="./state-badge.html">
-<link rel="import" href="../relative-ha-datetime.html">
+<link rel="import" href="../ha-relative-time.html">
 
 <dom-module id="state-info">
   <template>
@@ -44,7 +44,7 @@
 
         <template is='dom-if' if='[[inDialog]]'>
           <div class='time-ago'>
-            <relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
+            <ha-relative-time datetime-obj='[[stateObj.lastChangedAsDate]]'></ha-relative-time>
           </div>
         </template>
 
diff --git a/src/components/relative-ha-datetime.html b/src/components/ha-relative-time.html
similarity index 91%
rename from src/components/relative-ha-datetime.html
rename to src/components/ha-relative-time.html
index c3edab50d3..b8f487fd4a 100644
--- a/src/components/relative-ha-datetime.html
+++ b/src/components/ha-relative-time.html
@@ -2,7 +2,7 @@
 
 <script>
 Polymer({
-  is: 'relative-ha-datetime',
+  is: 'ha-relative-time',
 
   properties: {
     datetime: {
@@ -48,7 +48,7 @@ Polymer({
   updateRelative: function () {
     var root = Polymer.dom(this);
     root.innerHTML = this.parsedDateTime ?
-      window.moment(this.parsedDateTime).fromNow() : '';
+      window.hassUtil.relativeTime(this.parsedDateTime) : '';
   },
 });
 </script>
diff --git a/src/home-assistant.html b/src/home-assistant.html
index a98e157a80..3f8267c4e2 100644
--- a/src/home-assistant.html
+++ b/src/home-assistant.html
@@ -1,5 +1,3 @@
-<script src='../bower_components/moment/min/moment.min.js'></script>
-
 <link rel='import' href='../bower_components/polymer/polymer.html'>
 <link rel='import' href='../bower_components/paper-spinner/paper-spinner.html'>
 <link rel='import' href='./util/roboto.html'>
diff --git a/src/more-infos/more-info-sun.html b/src/more-infos/more-info-sun.html
index 5eaaa4105e..ce266df5f5 100644
--- a/src/more-infos/more-info-sun.html
+++ b/src/more-infos/more-info-sun.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
-<link rel="import" href="../components/relative-ha-datetime.html">
+<link rel="import" href="../components/ha-relative-time.html">
 
 <dom-module id="more-info-sun">
   <template>
@@ -10,7 +10,7 @@
       <div class='data-entry layout justified horizontal'>
         <div class='key'>
           <span>[[itemCaption(item)]]</span>
-          <relative-ha-datetime datetime-obj="[[itemDate(item)]]"></relative-ha-datetime>
+          <ha-relative-time datetime-obj="[[itemDate(item)]]"></ha-relative-time>
         </div>
         <div class='value'>[[itemValue(item)]]</div>
       </div>
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
index cffcb55e9d..81ea1148cd 100644
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -1,3 +1,5 @@
+<script src='../../bower_components/fecha/fecha.min.js'></script>
+
 <!--
 collection of utility functions.
 -->
@@ -68,18 +70,47 @@ window.hassUtil.dynamicContentUpdater = function (root, newElementTag, attribute
   }
 };
 
+window.fecha.masks.haDateTime = (window.fecha.masks.shortTime + ' ' +
+                                 window.fecha.masks.mediumDate);
+
 window.hassUtil.formatDateTime = function (dateObj) {
-  return window.moment(dateObj).format('lll');
+  return window.fecha.format(dateObj, 'haDateTime');
 };
 
 window.hassUtil.formatDate = function (dateObj) {
-  return window.moment(dateObj).format('ll');
+  return window.fecha.format(dateObj, 'mediumDate');
 };
 
 window.hassUtil.formatTime = function (dateObj) {
-  return window.moment(dateObj).format('LT');
+  return window.fecha.format(dateObj, 'shortTime');
 };
 
+window.hassUtil.relativeTime = function (dateObj) {
+  var delta = (new Date() - dateObj) / 1000;
+  var tests = window.hassUtil.relativeTime.tests;
+  var i;
+
+  for (i = 0; i < tests.length; i += 2) {
+    if (delta < tests[i]) {
+      delta = Math.floor(delta);
+      return delta === 1 ? '1 ' + tests[i + 1] : delta + ' ' + tests[i + 1] + 's';
+    }
+
+    delta /= tests[i];
+  }
+
+  delta = Math.floor(delta);
+  return delta === 1 ? '1 week' : delta + ' weeks';
+};
+
+window.hassUtil.relativeTime.tests = [
+  60, 'second',
+  60, 'minute',
+  24, 'hour',
+  7, 'day',
+];
+
+
 window.hassUtil.stateCardType = function (hass, state) {
   if (state.state === 'unavailable') {
     return 'display';