Show seconds in the UI (#4765)

This commit is contained in:
Ruslan Sayfutdinov 2020-02-06 18:38:38 +00:00 committed by GitHub
parent 2e47aa1905
commit c977f22047
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 135 additions and 77 deletions

View File

@ -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();

View File

@ -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");

View File

@ -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}`
);

View File

@ -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");

View File

@ -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 = (

View File

@ -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 */

View File

@ -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 = {

View File

@ -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];

View File

@ -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")

View File

@ -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
)

View File

@ -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";
/*

View File

@ -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 />

View File

@ -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
)}:

View File

@ -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")

View File

@ -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">

View File

@ -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";

View File

@ -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);
}

View File

@ -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";

View File

@ -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"];

View File

@ -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";

View File

@ -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";

View File

@ -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";

View File

@ -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);

View File

@ -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"
);
});
});

View File

@ -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");
});
});