diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts index 3172f6e8..e1d083e9 100644 --- a/assets/auto-imports.d.ts +++ b/assets/auto-imports.d.ts @@ -40,6 +40,7 @@ declare global { const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise'] const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn'] const customRef: typeof import('vue')['customRef'] + const dateLocale: typeof import('./stores/settings')['dateLocale'] const debouncedRef: typeof import('@vueuse/core')['debouncedRef'] const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch'] const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] @@ -393,6 +394,7 @@ declare module 'vue' { readonly createTemplatePromise: UnwrapRef readonly createUnrefFn: UnwrapRef readonly customRef: UnwrapRef + readonly dateLocale: UnwrapRef readonly debouncedRef: UnwrapRef readonly debouncedWatch: UnwrapRef readonly defineAsyncComponent: UnwrapRef @@ -738,6 +740,7 @@ declare module '@vue/runtime-core' { readonly createTemplatePromise: UnwrapRef readonly createUnrefFn: UnwrapRef readonly customRef: UnwrapRef + readonly dateLocale: UnwrapRef readonly debouncedRef: UnwrapRef readonly debouncedWatch: UnwrapRef readonly defineAsyncComponent: UnwrapRef diff --git a/assets/components/common/DateTime.vue b/assets/components/common/DateTime.vue index d82013b2..8f80ef28 100644 --- a/assets/components/common/DateTime.vue +++ b/assets/components/common/DateTime.vue @@ -10,13 +10,21 @@ const props = defineProps<{ date: Date; }>(); -const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" }); -const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false })[hourStyle.value]); -const timeFormatter = $computed( +const dateOverride = computed(() => (dateLocale.value === "auto" ? undefined : dateLocale.value)); +const dateFormatter = computed( + () => new Intl.DateTimeFormat(dateOverride.value, { day: "2-digit", month: "2-digit", year: "numeric" }), +); +const use12Hour = computed(() => ({ auto: undefined, "12": true, "24": false })[hourStyle.value]); +const timeFormatter = computed( () => - new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: use12Hour }), + new Intl.DateTimeFormat(undefined, { + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + hour12: use12Hour.value, + }), ); -const dateStr = $computed(() => dateFormatter.format(props.date)); -const timeStr = $computed(() => timeFormatter.format(props.date)); +const dateStr = computed(() => dateFormatter.value.format(props.date)); +const timeStr = computed(() => timeFormatter.value.format(props.date)); diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue index 164b6cac..ca9285f8 100644 --- a/assets/pages/settings.vue +++ b/assets/pages/settings.vue @@ -31,17 +31,29 @@ @@ -113,6 +125,7 @@ import { ComplexLogEntry, SimpleLogEntry } from "@/models/LogEntry"; import { automaticRedirect, hourStyle, + dateLocale, lightTheme, search, showAllContainers, diff --git a/assets/stores/settings.ts b/assets/stores/settings.ts index 94f9c1bc..3c5831d6 100644 --- a/assets/stores/settings.ts +++ b/assets/stores/settings.ts @@ -10,6 +10,7 @@ export type Settings = { showAllContainers: boolean; lightTheme: "auto" | "dark" | "light"; hourStyle: "auto" | "24" | "12"; + dateLocale: "auto" | "en-US" | "en-GB" | "de-DE" | "en-CA"; softWrap: boolean; collapseNav: boolean; automaticRedirect: boolean; @@ -24,6 +25,7 @@ export const DEFAULT_SETTINGS: Settings = { showAllContainers: false, lightTheme: "auto", hourStyle: "auto", + dateLocale: "auto", softWrap: true, collapseNav: false, automaticRedirect: true, @@ -35,6 +37,7 @@ export const { collapseNav, softWrap, hourStyle, + dateLocale, lightTheme, showAllContainers, showTimestamp, diff --git a/internal/profile/disk.go b/internal/profile/disk.go index cd0b74b0..851fae7b 100644 --- a/internal/profile/disk.go +++ b/internal/profile/disk.go @@ -32,6 +32,7 @@ type Settings struct { Size string `json:"size,omitempty"` LightTheme string `json:"lightTheme,omitempty"` HourStyle string `json:"hourStyle,omitempty"` + DateLocale string `json:"dateLocale,omitempty"` } type Profile struct { diff --git a/locales/en.yml b/locales/en.yml index e7bc0e97..9de87894 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -68,7 +68,7 @@ settings: small-scrollbars: Use smaller scrollbars show-timesamps: Show timestamps soft-wrap: Soft wrap lines - 12-24-format: Time format + datetime-format: Override date and time format font-size: Font size to use for logs color-scheme: Color scheme options: Options