Show seconds in the UI (#4765)

src/common/datetime/check_options_support.ts

@@ -0,0 +1,31 @@
+// Check for support of native locale string options
+function checkToLocaleDateStringSupportsOptions() {
+  try {
+    new Date().toLocaleDateString("i");
+  } catch (e) {
+    return e.name === "RangeError";
+  }
+  return false;
+}
+
+function checkToLocaleTimeStringSupportsOptions() {
+  try {
+    new Date().toLocaleTimeString("i");
+  } catch (e) {
+    return e.name === "RangeError";
+  }
+  return false;
+}
+
+function checkToLocaleStringSupportsOptions() {
+  try {
+    new Date().toLocaleString("i");
+  } catch (e) {
+    return e.name === "RangeError";
+  }
+  return false;
+}
+
+export const toLocaleDateStringSupportsOptions = checkToLocaleDateStringSupportsOptions();
+export const toLocaleTimeStringSupportsOptions = checkToLocaleTimeStringSupportsOptions();
+export const toLocaleStringSupportsOptions = checkToLocaleStringSupportsOptions();

src/common/datetime/format_date.ts

@@ -1,20 +1,11 @@
 import fecha from "fecha";
+import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
-// Check for support of native locale string options
-function toLocaleDateStringSupportsOptions() {
-  try {
-    new Date().toLocaleDateString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-export default toLocaleDateStringSupportsOptions()
+export const formatDate = toLocaleDateStringSupportsOptions
   ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleDateString(locales, {
         year: "numeric",
         month: "long",
         day: "numeric",
       })
-  : (dateObj: Date) => fecha.format(dateObj, "mediumDate");
+  : (dateObj: Date) => fecha.format(dateObj, "longDate");

src/common/datetime/format_date_time.ts

@@ -1,16 +1,7 @@
 import fecha from "fecha";
+import { toLocaleStringSupportsOptions } from "./check_options_support";
 
-// Check for support of native locale string options
-function toLocaleStringSupportsOptions() {
-  try {
-    new Date().toLocaleString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-export default toLocaleStringSupportsOptions()
+export const formatDateTime = toLocaleStringSupportsOptions
   ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleString(locales, {
         year: "numeric",
@@ -19,4 +10,24 @@ export default toLocaleStringSupportsOptions()
         hour: "numeric",
         minute: "2-digit",
       })
-  : (dateObj: Date) => fecha.format(dateObj, "haDateTime");
+  : (dateObj: Date) =>
+      fecha.format(
+        dateObj,
+        `${fecha.masks.longDate}, ${fecha.masks.shortTime}`
+      );
+
+export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleString(locales, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit",
+      })
+  : (dateObj: Date) =>
+      fecha.format(
+        dateObj,
+        `${fecha.masks.longDate}, ${fecha.masks.mediumTime}`
+      );

src/common/datetime/format_time.ts

@@ -1,19 +1,19 @@
 import fecha from "fecha";
+import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
 
-// Check for support of native locale string options
-function toLocaleTimeStringSupportsOptions() {
-  try {
-    new Date().toLocaleTimeString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-export default toLocaleTimeStringSupportsOptions()
+export const formatTime = toLocaleTimeStringSupportsOptions
   ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleTimeString(locales, {
         hour: "numeric",
         minute: "2-digit",
       })
   : (dateObj: Date) => fecha.format(dateObj, "shortTime");
+
+export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleTimeString(locales, {
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit",
+      })
+  : (dateObj: Date) => fecha.format(dateObj, "mediumTime");

src/common/entity/compute_state_display.ts

@@ -1,8 +1,8 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeStateDomain } from "./compute_state_domain";
-import formatDateTime from "../datetime/format_date_time";
-import formatDate from "../datetime/format_date";
-import formatTime from "../datetime/format_time";
+import { formatDateTime } from "../datetime/format_date_time";
+import { formatDate } from "../datetime/format_date";
+import { formatTime } from "../datetime/format_time";
 import { LocalizeFunc } from "../translations/localize";
 
 export const computeStateDisplay = (

src/components/entity/ha-chart-base.js

@@ -6,7 +6,7 @@ import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 
-import formatTime from "../../common/datetime/format_time";
+import { formatTime } from "../../common/datetime/format_time";
 // eslint-disable-next-line no-unused-vars
 /* global Chart moment Color */
 

src/components/state-history-chart-line.js

@@ -5,7 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "./entity/ha-chart-base";
 
 import LocalizeMixin from "../mixins/localize-mixin";
-import formatDateTime from "../common/datetime/format_date_time";
+import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
 
 class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
   static get template() {
@@ -317,7 +317,7 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
       const item = items[0];
       const date = data.datasets[item.datasetIndex].data[item.index].x;
 
-      return formatDateTime(date, this.hass.language);
+      return formatDateTimeWithSeconds(date, this.hass.language);
     };
 
     const chartOptions = {

src/components/state-history-chart-timeline.js

@@ -6,7 +6,7 @@ import LocalizeMixin from "../mixins/localize-mixin";
 
 import "./entity/ha-chart-base";
 
-import formatDateTime from "../common/datetime/format_date_time";
+import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
 import { computeRTL } from "../common/util/compute_rtl";
 
 class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
@@ -165,8 +165,8 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
     const formatTooltipLabel = (item, data) => {
       const values = data.datasets[item.datasetIndex].data[item.index];
 
-      const start = formatDateTime(values[0], this.hass.language);
-      const end = formatDateTime(values[1], this.hass.language);
+      const start = formatDateTimeWithSeconds(values[0], this.hass.language);
+      const end = formatDateTimeWithSeconds(values[1], this.hass.language);
       const state = values[2];
 
       return [state, start, end];

src/dialogs/more-info/controls/more-info-sun.ts

@@ -11,7 +11,7 @@ import { HassEntity } from "home-assistant-js-websocket";
 
 import "../../../components/ha-relative-time";
 
-import formatTime from "../../../common/datetime/format_time";
+import { formatTime } from "../../../common/datetime/format_time";
 import { HomeAssistant } from "../../../types";
 
 @customElement("more-info-sun")

src/panels/config/automation/ha-automation-picker.ts

@@ -28,7 +28,7 @@ import {
   showAutomationEditor,
   AutomationConfig,
 } from "../../../data/automation";
-import format_date_time from "../../../common/datetime/format_date_time";
+import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { showThingtalkDialog } from "./show-dialog-thingtalk";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -102,7 +102,7 @@ class HaAutomationPicker extends LitElement {
                               "ui.card.automation.last_triggered"
                             )}: ${
                     automation.attributes.last_triggered
-                      ? format_date_time(
+                      ? formatDateTime(
                           new Date(automation.attributes.last_triggered),
                           this.hass.language
                         )

src/panels/config/cloud/account/cloud-account.js

@@ -16,7 +16,7 @@ import "./cloud-remote-pref";
 import { EventsMixin } from "../../../../mixins/events-mixin";
 import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
 
-import formatDateTime from "../../../../common/datetime/format_date_time";
+import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
 
 /*

src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts

@@ -16,7 +16,7 @@ import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import { HomeAssistant } from "../../../../types";
 import { haStyle } from "../../../../resources/styles";
 import { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
-import format_date_time from "../../../../common/datetime/format_date_time";
+import { formatDateTime } from "../../../../common/datetime/format_date_time";
 
 @customElement("dialog-cloud-certificate")
 class DialogCloudCertificate extends LitElement {
@@ -50,7 +50,7 @@ class DialogCloudCertificate extends LitElement {
             ${this.hass!.localize(
               "ui.panel.config.cloud.dialog_certificate.certificate_expiration_date"
             )}
-            ${format_date_time(
+            ${formatDateTime(
               new Date(certificateInfo.expire_date),
               this.hass!.language
             )}<br />

src/panels/developer-tools/event/event-subscribe-card.ts

@@ -13,7 +13,7 @@ import { HassEvent } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../../../types";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import "../../../components/ha-card";
-import format_time from "../../../common/datetime/format_time";
+import { formatTime } from "../../../common/datetime/format_time";
 
 @customElement("event-subscribe-card")
 class EventSubscribeCard extends LitElement {
@@ -78,7 +78,7 @@ class EventSubscribeCard extends LitElement {
                   "name",
                   ev.id
                 )}
-                ${format_time(
+                ${formatTime(
                   new Date(ev.event.time_fired),
                   this.hass!.language
                 )}:

src/panels/developer-tools/logs/system-log-card.ts

@@ -16,8 +16,8 @@ import "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
 import { HomeAssistant } from "../../../types";
 import { LoggedError, fetchSystemLog } from "../../../data/system_log";
-import formatDateTime from "../../../common/datetime/format_date_time";
-import formatTime from "../../../common/datetime/format_time";
+import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
+import { formatTimeWithSeconds } from "../../../common/datetime/format_time";
 import { showSystemLogDetailDialog } from "./show-dialog-system-log-detail";
 
 const formatLogTime = (date, language: string) => {
@@ -26,8 +26,8 @@ const formatLogTime = (date, language: string) => {
   const dateTimeDay = new Date(date * 1000).setHours(0, 0, 0, 0);
 
   return dateTimeDay < today
-    ? formatDateTime(dateTime, language)
-    : formatTime(dateTime, language);
+    ? formatDateTimeWithSeconds(dateTime, language)
+    : formatTimeWithSeconds(dateTime, language);
 };
 
 @customElement("system-log-card")

src/panels/developer-tools/mqtt/mqtt-subscribe-card.ts

@@ -11,7 +11,7 @@ import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import { HomeAssistant } from "../../../types";
 import "../../../components/ha-card";
-import format_time from "../../../common/datetime/format_time";
+import { formatTime } from "../../../common/datetime/format_time";
 
 import { subscribeMQTTTopic, MQTTMessage } from "../../../data/mqtt";
 
@@ -85,7 +85,7 @@ class MqttSubscribeCard extends LitElement {
                   "topic",
                   msg.message.topic,
                   "time",
-                  format_time(msg.time, this.hass!.language)
+                  formatTime(msg.time, this.hass!.language)
                 )}
                 <pre>${msg.payload}</pre>
                 <div class="bottom">

src/panels/history/ha-panel-history.js

@@ -16,7 +16,7 @@ import "../../data/ha-state-history-data";
 import "../../resources/ha-date-picker-style";
 import "../../resources/ha-style";
 
-import formatDate from "../../common/datetime/format_date";
+import { formatDate } from "../../common/datetime/format_date";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import { computeRTL } from "../../common/util/compute_rtl";
 

src/panels/logbook/ha-logbook.ts

@@ -1,6 +1,6 @@
 import "../../components/ha-icon";
-import formatTime from "../../common/datetime/format_time";
-import formatDate from "../../common/datetime/format_date";
+import { formatTimeWithSeconds } from "../../common/datetime/format_time";
+import { formatDate } from "../../common/datetime/format_date";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { stateIcon } from "../../common/entity/state_icon";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -80,7 +80,7 @@ class HaLogbook extends LitElement {
 
         <div class="entry">
           <div class="time">
-            ${formatTime(new Date(item.when), this.hass.language)}
+            ${formatTimeWithSeconds(new Date(item.when), this.hass.language)}
           </div>
           <ha-icon
             .icon=${state ? stateIcon(state) : domainIcon(item.domain)}
@@ -131,7 +131,7 @@ class HaLogbook extends LitElement {
       }
 
       .time {
-        width: 55px;
+        width: 65px;
         font-size: 0.8em;
         color: var(--secondary-text-color);
       }

src/panels/logbook/ha-panel-logbook.js

@@ -16,7 +16,7 @@ import "../../resources/ha-style";
 import "./ha-logbook-data";
 import "./ha-logbook";
 
-import formatDate from "../../common/datetime/format_date";
+import { formatDate } from "../../common/datetime/format_date";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import { computeRTL } from "../../common/util/compute_rtl";
 

src/panels/lovelace/components/hui-timestamp-display.ts

@@ -8,15 +8,15 @@ import {
 } from "lit-element";
 
 import { HomeAssistant } from "../../../types";
-import format_date from "../../../common/datetime/format_date";
-import format_date_time from "../../../common/datetime/format_date_time";
-import format_time from "../../../common/datetime/format_time";
+import { formatDate } from "../../../common/datetime/format_date";
+import { formatDateTime } from "../../../common/datetime/format_date_time";
+import { formatTime } from "../../../common/datetime/format_time";
 import relativeTime from "../../../common/datetime/relative_time";
 
 const FORMATS: { [key: string]: (ts: Date, lang: string) => string } = {
-  date: format_date,
-  datetime: format_date_time,
-  time: format_time,
+  date: formatDate,
+  datetime: formatDateTime,
+  time: formatTime,
 };
 const INTERVAL_FORMAT = ["relative", "total"];
 

src/panels/mailbox/ha-panel-mailbox.js

@@ -14,7 +14,7 @@ import "../../components/ha-menu-button";
 import "../../components/ha-card";
 import "../../resources/ha-style";
 
-import formatDateTime from "../../common/datetime/format_date_time";
+import { formatDateTime } from "../../common/datetime/format_date_time";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import { EventsMixin } from "../../mixins/events-mixin";
 

src/panels/profile/ha-long-lived-access-tokens-card.js

@@ -4,7 +4,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import formatDateTime from "../../common/datetime/format_date_time";
+import { formatDateTime } from "../../common/datetime/format_date_time";
 import "../../components/ha-card";
 
 import "../../resources/ha-style";

src/panels/profile/ha-refresh-tokens-card.js

@@ -7,7 +7,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import formatDateTime from "../../common/datetime/format_date_time";
+import { formatDateTime } from "../../common/datetime/format_date_time";
 
 import "./ha-settings-row";
 

test-mocha/common/datetime/format_date.ts

@@ -1,6 +1,6 @@
 import { assert } from "chai";
 
-import formatDate from "../../../src/common/datetime/format_date";
+import { formatDate } from "../../../src/common/datetime/format_date";
 
 describe("formatDate", () => {
   const dateObj = new Date(2017, 10, 18, 11, 12, 13, 1400);

test-mocha/common/datetime/format_date_time.ts

@@ -1,9 +1,12 @@
 import { assert } from "chai";
 
-import formatDateTime from "../../../src/common/datetime/format_date_time";
+import {
+  formatDateTime,
+  formatDateTimeWithSeconds,
+} from "../../../src/common/datetime/format_date_time";
 
 describe("formatDateTime", () => {
-  const dateObj = new Date(2017, 10, 18, 11, 12, 13, 1400);
+  const dateObj = new Date(2017, 10, 18, 11, 12, 13, 400);
 
   it("Formats English date times", () => {
     assert.strictEqual(
@@ -12,3 +15,14 @@ describe("formatDateTime", () => {
     );
   });
 });
+
+describe("formatDateTimeWithSeconds", () => {
+  const dateObj = new Date(2017, 10, 18, 11, 12, 13, 400);
+
+  it("Formats English date times with seconds", () => {
+    assert.strictEqual(
+      formatDateTimeWithSeconds(dateObj, "en"),
+      "November 18, 2017, 11:12:13 AM"
+    );
+  });
+});

test-mocha/common/datetime/format_time.ts

@@ -1,6 +1,9 @@
 import { assert } from "chai";
 
-import formatTime from "../../../src/common/datetime/format_time";
+import {
+  formatTime,
+  formatTimeWithSeconds,
+} from "../../../src/common/datetime/format_time";
 
 describe("formatTime", () => {
   const dateObj = new Date(2017, 10, 18, 11, 12, 13, 1400);
@@ -9,3 +12,11 @@ describe("formatTime", () => {
     assert.strictEqual(formatTime(dateObj, "en"), "11:12 AM");
   });
 });
+
+describe("formatTimeWithSeconds", () => {
+  const dateObj = new Date(2017, 10, 18, 11, 12, 13, 400);
+
+  it("Formats English times with seconds", () => {
+    assert.strictEqual(formatTimeWithSeconds(dateObj, "en"), "11:12:13 AM");
+  });
+});