Add docs for time / date styling (#5572)

* Add docs for time / date styling

* Convert 12hour time format option to enum

* Change option in web

* Add docs with examples

* Fix errors in docs

* Fix mismatched names
This commit is contained in:
Nicolas Mowen 2023-02-26 08:37:18 -07:00 committed by GitHub
parent 34bdf2fc10
commit 318240c14c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 5 deletions

View File

@ -486,6 +486,29 @@ ui:
timezone: None
# Optional: Use an experimental recordings / camera view UI (default: shown below)
experimental_ui: False
# Optional: Set the time format used.
# Options are browser, 12hour, or 24hour (default: shown below)
time_format: browser
# Optional: Set the date style for a specified length.
# Options are: full, long, medium, sort
# Examples:
# short: 2/11/23
# medium: Feb 11, 2023
# full: Saturday, February 11, 2023
# (default: shown below).
date_style: short
# Optional: Set the time style for a specified length.
# Options are: full, long, medium, sort
# Examples:
# short: 8:14 PM
# medium: 8:15:22 PM
# full: 8:15:22 PM Mountain Standard Time
# (default: shown below).
time_style: medium
# Optional: Ability to manually override the date / time styling to use strftime format
# https://www.gnu.org/software/libc/manual/html_node/Formatting-Calendar-Time.html
# possible values are shown above (default: not set)
strftime_fmt: "%Y/%m/%d %H:%M"
# Optional: Telemetry configuration
telemetry:

View File

@ -66,6 +66,12 @@ class LiveModeEnum(str, Enum):
webrtc = "webrtc"
class TimeFormatEnum(str, Enum):
browser = "browser"
hours12 = "12hour"
hours24 = "24hour"
class DateTimeStyleEnum(str, Enum):
full = "full"
long = "long"
@ -79,7 +85,9 @@ class UIConfig(FrigateBaseModel):
)
timezone: Optional[str] = Field(title="Override UI timezone.")
use_experimental: bool = Field(default=False, title="Experimental UI")
use12hour: Optional[bool] = Field(title="Override UI time format.")
time_format: TimeFormatEnum = Field(
default=TimeFormatEnum.browser, title="Override UI time format."
)
date_style: DateTimeStyleEnum = Field(
default=DateTimeStyleEnum.short, title="Override UI dateStyle."
)

View File

@ -37,19 +37,20 @@ export const getNowYesterdayInLong = (): number => {
*/
interface DateTimeStyle {
timezone: string;
use12hour: boolean | undefined;
time_format: 'browser' | '12hour' | '24hour';
date_style: 'full' | 'long' | 'medium' | 'short';
time_style: 'full' | 'long' | 'medium' | 'short';
strftime_fmt: string;
}
export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: DateTimeStyle): string => {
const { timezone, use12hour, date_style, time_style, strftime_fmt } = config;
const locale = window.navigator?.language || 'en-US';
const { timezone, time_format, date_style, time_style, strftime_fmt } = config;
const locale = window.navigator?.language || 'en-us';
if (isNaN(unixTimestamp)) {
return 'Invalid time';
}
try {
const date = new Date(unixTimestamp * 1000);
@ -64,7 +65,7 @@ export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: Dat
dateStyle: date_style,
timeStyle: time_style,
timeZone: timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
hour12: use12hour !== null ? use12hour : undefined,
hour12: time_format !== 'browser' ? time_format == '12hour' : undefined,
});
return formatter.format(date);
} catch (error) {