mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 01:36:49 +00:00
Show seconds in the UI (#4765)
This commit is contained in:
parent
2e47aa1905
commit
c977f22047
31
src/common/datetime/check_options_support.ts
Normal file
31
src/common/datetime/check_options_support.ts
Normal 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();
|
@ -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");
|
||||
|
@ -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}`
|
||||
);
|
||||
|
@ -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");
|
||||
|
@ -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 = (
|
||||
|
@ -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 */
|
||||
|
||||
|
@ -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 = {
|
||||
|
@ -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];
|
||||
|
@ -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")
|
||||
|
@ -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
|
||||
)
|
||||
|
@ -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";
|
||||
|
||||
/*
|
||||
|
@ -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 />
|
||||
|
@ -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
|
||||
)}:
|
||||
|
@ -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")
|
||||
|
@ -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">
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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"];
|
||||
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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";
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user