tbelway/immich-quadlet
1
0
Fork 0
forked from Cutlery/immich
Code Pull Requests Activity

feat(web): add an option to change the date formats (#7174)

Browse Source 
* feat: add an option to change the date formats

* pr feedback

* fix: change title

* fix: show list supported by the browser

* fix: tests

* fix: dates

* fix: check only if locale is set

* fix: better fallback value

* fix: fallback

* fix: fallback

* feat: add default locale option

* refactor: shared components

* refactor: shared components

* prepare for svelte 5

* don't use relative paths

* refactor: fallback value

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* fix: parsing store

* fix: lint

* refactor: locales

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin 2024-02-22 15:36:14 +01:00 committed by GitHub
parent a224bb23d0
commit 01d6707b59
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
45 changed files with 383 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
View File

@ -14,12 +14,14 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingAccordion from '../setting-accordion.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingCheckboxes from '../setting-checkboxes.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSelect from '../setting-select.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingCheckboxes from '$lib/components/shared-components/settings/setting-checkboxes.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

6
web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
View File

@ -5,8 +5,10 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

10
web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
View File

@ -4,10 +4,12 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingAccordion from '../setting-accordion.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

6
web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
View File

@ -4,9 +4,9 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSelect from '../setting-select.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

12
web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
View File

@ -4,11 +4,13 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingAccordion from '../setting-accordion.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSelect from '../setting-select.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

10
web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
View File

@ -4,10 +4,12 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingAccordion from '../setting-accordion.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

4
web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
View File

@ -4,8 +4,8 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

8
web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
View File

@ -5,9 +5,11 @@
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import ConfirmDisableLogin from '../confirm-disable-login.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

4
web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
View File

@ -5,8 +5,8 @@
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import ConfirmDisableLogin from '../confirm-disable-login.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

6
web/src/lib/components/admin-page/settings/server/server-settings.svelte
View File

@ -1,11 +1,13 @@
<script lang="ts">
import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
import type { SystemConfigDto } from '@immich/sdk';
import { isEqual } from 'lodash-es';
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

8
web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
View File

@ -13,11 +13,13 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SupportedDatetimePanel from './supported-datetime-panel.svelte';
import SupportedVariablesPanel from './supported-variables-panel.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

5
web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
View File

@ -1,11 +1,12 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import type { SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
import * as luxon from 'luxon';
import { DateTime } from 'luxon';
export let options: SystemConfigTemplateStorageOptionDto;
const getLuxonExample = (format: string) => {
return luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString()).toFormat(format);
return DateTime.fromISO('2022-09-04T20:03:05.250Z', { locale: $locale }).toFormat(format);
};
</script>

4
web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
View File

@ -4,8 +4,8 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingTextarea from '../setting-textarea.svelte';
import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

11
web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte
View File

@ -1,13 +1,16 @@
<script lang="ts">
import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte';
import { Colorspace, type SystemConfigDto } from '@immich/sdk';
import { isEqual } from 'lodash-es';
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

8
web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
View File

@ -4,9 +4,11 @@
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;

7
web/src/lib/components/album-page/album-options.svelte
View File

@ -3,10 +3,11 @@
import type { AlbumResponseDto, UserResponseDto } from '@immich/sdk';
import { mdiClose, mdiPlus } from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let album: AlbumResponseDto;
export let user: UserResponseDto;

9
web/src/lib/components/asset-viewer/activity-viewer.svelte
View File

@ -24,12 +24,13 @@
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import UserAvatar from '../shared-components/user-avatar.svelte';
import { locale } from '$lib/stores/preferences.store';
const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
const shouldGroup = (currentDate: string, nextDate: string): boolean => {
const currentDateTime = luxon.DateTime.fromISO(currentDate);
const nextDateTime = luxon.DateTime.fromISO(nextDate);
const currentDateTime = luxon.DateTime.fromISO(currentDate, { locale: $locale });
const nextDateTime = luxon.DateTime.fromISO(nextDate, { locale: $locale });
return currentDateTime.hasSame(nextDateTime, 'hour') || currentDateTime.toRelative() === nextDateTime.toRelative();
};
@ -224,7 +225,7 @@
class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
title={new Date(reaction.createdAt).toLocaleDateString(undefined, timeOptions)}
>
{timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
{timeSince(luxon.DateTime.fromISO(reaction.createdAt, { locale: $locale }))}
</div>
{/if}
{:else if reaction.type === 'like'}
@ -269,7 +270,7 @@
class="pt-1 px-2 text-right w-full text-sm text-gray-500 dark:text-gray-300"
title={new Date(reaction.createdAt).toLocaleDateString(navigator.language, timeOptions)}
>
{timeSince(luxon.DateTime.fromISO(reaction.createdAt))}
{timeSince(luxon.DateTime.fromISO(reaction.createdAt, { locale: $locale }))}
</div>
{/if}
</div>

1
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -443,6 +443,7 @@
{@const assetDateTimeOriginal = asset.exifInfo?.dateTimeOriginal
? DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
zone: asset.exifInfo.timeZone ?? undefined,
locale: $locale,
})
: DateTime.now()}
<ChangeDate

4
web/src/lib/components/map-page/map-settings-modal.svelte
View File

@ -4,10 +4,10 @@
import { Duration } from 'luxon';
import { createEventDispatcher } from 'svelte';
import { fly } from 'svelte/transition';
import SettingSelect from '../admin-page/settings/setting-select.svelte';
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
import Button from '../elements/buttons/button.svelte';
import LinkButton from '../elements/buttons/link-button.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let settings: MapSettings;
let customDateRange = !!settings.dateAfter || !!settings.dateBefore;

1
web/src/lib/components/shared-components/change-date.svelte
View File

@ -3,6 +3,7 @@
import { DateTime } from 'luxon';
import ConfirmDialogue from './confirm-dialogue.svelte';
import Combobox from './combobox.svelte';
export let initialDate: DateTime = DateTime.now();
type ZoneOption = {

2
web/src/lib/components/shared-components/combobox.svelte
View File

@ -52,7 +52,7 @@
};
</script>
<div class="relative" use:clickOutside on:outclick={handleOutClick}>
<div class="relative w-full" use:clickOutside on:outclick={handleOutClick}>
<div>
{#if isOpen}
<div class="absolute inset-y-0 left-0 flex items-center pl-3">

6
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View File

@ -1,8 +1,4 @@
<script lang="ts">
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/admin-page/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { serverConfig } from '$lib/stores/server-config.store';
@ -15,6 +11,8 @@
import type { ImmichDropDownOption } from '../dropdown-button.svelte';
import DropdownButton from '../dropdown-button.svelte';
import { NotificationType, notificationController } from '../notification/notification';
import SettingInputField, { SettingInputFieldType } from '../settings/setting-input-field.svelte';
import SettingSwitch from '../settings/setting-switch.svelte';
export let albumId: string | undefined = undefined;
export let assetIds: string[] = [];

0
web/src/lib/components/admin-page/settings/setting-accordion.svelte → web/src/lib/components/shared-components/settings/setting-accordion.svelte
View File

0
web/src/lib/components/admin-page/settings/setting-buttons-row.svelte → web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
View File

0
web/src/lib/components/admin-page/settings/setting-checkboxes.svelte → web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
View File

42
web/src/lib/components/shared-components/settings/setting-combobox.svelte Normal file
View File

@ -0,0 +1,42 @@
<script lang="ts">
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
export let title: string;
export let comboboxPlaceholder: string;
export let subtitle = '';
export let isEdited = false;
export let options: ComboBoxOption[];
export let selectedOption: ComboBoxOption;
export let onSelect: (combobox: ComboBoxOption | undefined) => void;
</script>
<div class="grid grid-cols-2">
<div>
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
{title}
</label>
{#if isEdited}
<div
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
>
Unsaved change
</div>
{/if}
</div>
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
</div>
<div class="flex items-center">
<Combobox
{selectedOption}
{options}
placeholder={comboboxPlaceholder}
on:select={({ detail }) => onSelect(detail)}
/>
<slot />
</div>
</div>

0
web/src/lib/components/admin-page/settings/setting-input-field.svelte → web/src/lib/components/shared-components/settings/setting-input-field.svelte
View File

0
web/src/lib/components/admin-page/settings/setting-select.svelte → web/src/lib/components/shared-components/settings/setting-select.svelte
View File

1
web/src/lib/components/admin-page/settings/setting-switch.svelte → web/src/lib/components/shared-components/settings/setting-switch.svelte
View File

@ -30,6 +30,7 @@
</div>
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
<slot />
</div>
<label class="relative inline-block h-[10px] w-[36px] flex-none">

0
web/src/lib/components/admin-page/settings/setting-textarea.svelte → web/src/lib/components/shared-components/settings/setting-textarea.svelte
View File

3
web/src/lib/components/sharedlinks-page/shared-link-card.svelte
View File

@ -16,6 +16,7 @@
import { createEventDispatcher } from 'svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { locale } from '$lib/stores/preferences.store';
export let link: SharedLinkResponseDto;
@ -43,7 +44,7 @@
return;
}
const expiresAtDate = luxon.DateTime.fromISO(new Date(link.expiresAt).toISOString());
const expiresAtDate = luxon.DateTime.fromISO(new Date(link.expiresAt).toISOString(), { locale: $locale });
const now = luxon.DateTime.now();
expirationCountdown = expiresAtDate.diff(now, ['days', 'hours', 'minutes', 'seconds']).toObject();

81
web/src/lib/components/user-settings-page/appearance-settings.svelte
View File

@ -1,11 +1,62 @@
<script lang="ts">
import type { ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
import SettingCombobox from '$lib/components/shared-components/settings/setting-combobox.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { fallbackLocale, locales } from '$lib/constants';
import { colorTheme, locale } from '$lib/stores/preferences.store';
import { findLocale } from '$lib/utils';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { colorTheme } from '../../stores/preferences.store';
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
export const handleToggle = () => {
let time = new Date();
$: formattedDate = time.toLocaleString(editedLocale, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
$: timePortion = time.toLocaleString(editedLocale, {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
$: selectedDate = `${formattedDate} ${timePortion}`;
$: editedLocale = findLocale($locale).code;
$: selectedOption = {
value: findLocale(editedLocale).code || fallbackLocale.code,
label: findLocale(editedLocale).name || fallbackLocale.name,
};
onMount(() => {
const interval = setInterval(() => {
time = new Date();
}, 1000);
return () => {
clearInterval(interval);
};
});
const getAllLanguages = (): ComboBoxOption[] => {
return locales
.filter(({ code }) => Intl.NumberFormat.supportedLocalesOf(code).length > 0)
.map((locale) => ({
label: locale.name,
value: locale.code,
}));
};
const handleToggleColorTheme = () => {
$colorTheme.system = !$colorTheme.system;
};
const handleToggleLocaleBrowser = () => {
$locale = $locale ? undefined : fallbackLocale.code;
};
const handleLocaleChange = (newLocale: string | undefined) => {
$locale = newLocale;
};
</script>
<section class="my-4">
@ -16,9 +67,31 @@
title="Theme selection"
subtitle="Automatically set the theme to light or dark based on your browser's system preference"
bind:checked={$colorTheme.system}
on:toggle={handleToggle}
on:toggle={handleToggleColorTheme}
/>
</div>
<div class="ml-4">
<SettingSwitch
title="Default Locale"
subtitle="Format dates and numbers based on your browser locale"
checked={$locale == undefined}
on:toggle={handleToggleLocaleBrowser}
>
<p class="mt-2">{selectedDate}</p>
</SettingSwitch>
</div>
{#if $locale !== undefined}
<div class="ml-4">
<SettingCombobox
comboboxPlaceholder="Searching locales..."
{selectedOption}
options={getAllLanguages()}
title="Custom Locale"
subtitle="Format dates and numbers based on the language and the region"
onSelect={(combobox) => handleLocaleChange(combobox?.value)}
/>
</div>
{/if}
</div>
</div>
</section>

7
web/src/lib/components/user-settings-page/change-password-settings.svelte
View File

@ -5,9 +5,12 @@
} from '$lib/components/shared-components/notification/notification';
import { changePassword } from '@immich/sdk';
import { fade } from 'svelte/transition';
import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
import Button from '../elements/buttons/button.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import type { HttpError } from '@sveltejs/kit';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
let password = '';
let newPassword = '';

2
web/src/lib/components/user-settings-page/device-card.svelte
View File

@ -57,7 +57,7 @@
</span>
<div class="text-sm">
<span class="">Last seen</span>
<span>{DateTime.fromISO(device.updatedAt).toRelativeCalendar(options)}</span>
<span>{DateTime.fromISO(device.updatedAt, { locale: $locale }).toRelativeCalendar(options)}</span>
</div>
</div>
{#if !device.current}

3
web/src/lib/components/user-settings-page/memories-settings.svelte
View File

@ -6,8 +6,9 @@
import { updateUser, type UserResponseDto } from '@immich/sdk';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
import Button from '../elements/buttons/button.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
export let user: UserResponseDto;

6
web/src/lib/components/user-settings-page/partner-settings.svelte
View File

@ -10,13 +10,13 @@
import { mdiCheck, mdiClose } from '@mdi/js';
import { onMount } from 'svelte';
import { handleError } from '../../utils/handle-error';
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
import Button from '../elements/buttons/button.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import Icon from '../elements/icon.svelte';
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import PartnerSelectionModal from './partner-selection-modal.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
interface PartnerSharing {
user: UserResponseDto;

2
web/src/lib/components/user-settings-page/quality-settings.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { alwaysLoadOriginalFile } from '../../stores/preferences.store';
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
const handleToggle = () => {
$alwaysLoadOriginalFile = !$alwaysLoadOriginalFile;

2
web/src/lib/components/user-settings-page/sidebar-settings.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { sidebarSettings } from '../../stores/preferences.store';
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
</script>
<section class="my-4">

2
web/src/lib/components/user-settings-page/trash-settings.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
import { showDeleteModal } from '$lib/stores/preferences.store';
import { fade } from 'svelte/transition';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
</script>
<section class="my-4">

4
web/src/lib/components/user-settings-page/user-profile-settings.svelte
View File

@ -5,11 +5,13 @@
} from '$lib/components/shared-components/notification/notification';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
import Button from '../elements/buttons/button.svelte';
import { user } from '$lib/stores/user.store';
import { cloneDeep } from 'lodash-es';
import { updateUser } from '@immich/sdk';
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
let editedUser = cloneDeep($user);

2
web/src/lib/components/user-settings-page/user-settings-list.svelte
View File

@ -6,7 +6,7 @@
import { user } from '$lib/stores/user.store';
import { oauth } from '$lib/utils';
import { type ApiKeyResponseDto, type AuthDeviceResponseDto } from '@immich/sdk';
import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
import SettingAccordion from '../shared-components/settings/setting-accordion.svelte';
import AppearanceSettings from './appearance-settings.svelte';
import ChangePasswordSettings from './change-password-settings.svelte';
import DeviceList from './device-list.svelte';

144
web/src/lib/constants.ts
View File

@ -95,3 +95,147 @@ export enum Theme {
LIGHT = 'light',
DARK = 'dark',
}
export const fallbackLocale = {
code: 'en-US',
name: 'English (US)',
};
export const locales = [
{ code: 'af-ZA', name: 'Afrikaans (South Africa)' },
{ code: 'sq-AL', name: 'Albanian (Albania)' },
{ code: 'ar-DZ', name: 'Arabic (Algeria)' },
{ code: 'ar-BH', name: 'Arabic (Bahrain)' },
{ code: 'ar-EG', name: 'Arabic (Egypt)' },
{ code: 'ar-IQ', name: 'Arabic (Iraq)' },
{ code: 'ar-JO', name: 'Arabic (Jordan)' },
{ code: 'ar-KW', name: 'Arabic (Kuwait)' },
{ code: 'ar-LB', name: 'Arabic (Lebanon)' },
{ code: 'ar-LY', name: 'Arabic (Libya)' },
{ code: 'ar-MA', name: 'Arabic (Morocco)' },
{ code: 'ar-OM', name: 'Arabic (Oman)' },
{ code: 'ar-QA', name: 'Arabic (Qatar)' },
{ code: 'ar-SA', name: 'Arabic (Saudi Arabia)' },
{ code: 'ar-SY', name: 'Arabic (Syria)' },
{ code: 'ar-TN', name: 'Arabic (Tunisia)' },
{ code: 'ar-AE', name: 'Arabic (United Arab Emirates)' },
{ code: 'ar-YE', name: 'Arabic (Yemen)' },
{ code: 'hy-AM', name: 'Armenian (Armenia)' },
{ code: 'az-AZ', name: 'Azerbaijani (Azerbaijan)' },
{ code: 'eu-ES', name: 'Basque (Spain)' },
{ code: 'be-BY', name: 'Belarusian (Belarus)' },
{ code: 'bn-IN', name: 'Bengali (India)' },
{ code: 'bs-BA', name: 'Bosnian (Bosnia and Herzegovina)' },
{ code: 'bg-BG', name: 'Bulgarian (Bulgaria)' },
{ code: 'ca-ES', name: 'Catalan (Spain)' },
{ code: 'zh-CN', name: 'Chinese (China)' },
{ code: 'zh-HK', name: 'Chinese (Hong Kong SAR China)' },
{ code: 'zh-MO', name: 'Chinese (Macao SAR China)' },
{ code: 'zh-SG', name: 'Chinese (Singapore)' },
{ code: 'zh-TW', name: 'Chinese (Taiwan)' },
{ code: 'hr-HR', name: 'Croatian (Croatia)' },
{ code: 'cs-CZ', name: 'Czech (Czech Republic)' },
{ code: 'da-DK', name: 'Danish (Denmark)' },
{ code: 'nl-BE', name: 'Dutch (Belgium)' },
{ code: 'nl-NL', name: 'Dutch (Netherlands)' },
{ code: 'en-AU', name: 'English (Australia)' },
{ code: 'en-BZ', name: 'English (Belize)' },
{ code: 'en-CA', name: 'English (Canada)' },
{ code: 'en-IE', name: 'English (Ireland)' },
{ code: 'en-JM', name: 'English (Jamaica)' },
{ code: 'en-NZ', name: 'English (New Zealand)' },
{ code: 'en-PH', name: 'English (Philippines)' },
{ code: 'en-ZA', name: 'English (South Africa)' },
{ code: 'en-TT', name: 'English (Trinidad and Tobago)' },
{ code: 'en-VI', name: 'English (U.S. Virgin Islands)' },
{ code: 'en-GB', name: 'English (United Kingdom)' },
{ code: 'en-US', name: 'English (United States)' },
{ code: 'en-ZW', name: 'English (Zimbabwe)' },
{ code: 'et-EE', name: 'Estonian (Estonia)' },
{ code: 'fo-FO', name: 'Faroese (Faroe Islands)' },
{ code: 'fi-FI', name: 'Finnish (Finland)' },
{ code: 'fr-BE', name: 'French (Belgium)' },
{ code: 'fr-CA', name: 'French (Canada)' },
{ code: 'fr-FR', name: 'French (France)' },
{ code: 'fr-LU', name: 'French (Luxembourg)' },
{ code: 'fr-MC', name: 'French (Monaco)' },
{ code: 'fr-CH', name: 'French (Switzerland)' },
{ code: 'gl-ES', name: 'Galician (Spain)' },
{ code: 'ka-GE', name: 'Georgian (Georgia)' },
{ code: 'de-AT', name: 'German (Austria)' },
{ code: 'de-DE', name: 'German (Germany)' },
{ code: 'de-LI', name: 'German (Liechtenstein)' },
{ code: 'de-LU', name: 'German (Luxembourg)' },
{ code: 'de-CH', name: 'German (Switzerland)' },
{ code: 'el-GR', name: 'Greek (Greece)' },
{ code: 'gu-IN', name: 'Gujarati (India)' },
{ code: 'he-IL', name: 'Hebrew (Israel)' },
{ code: 'hi-IN', name: 'Hindi (India)' },
{ code: 'hu-HU', name: 'Hungarian (Hungary)' },
{ code: 'is-IS', name: 'Icelandic (Iceland)' },
{ code: 'id-ID', name: 'Indonesian (Indonesia)' },
{ code: 'it-IT', name: 'Italian (Italy)' },
{ code: 'it-CH', name: 'Italian (Switzerland)' },
{ code: 'ja-JP', name: 'Japanese (Japan)' },
{ code: 'kn-IN', name: 'Kannada (India)' },
{ code: 'kk-KZ', name: 'Kazakh (Kazakhstan)' },
{ code: 'kok-IN', name: 'Konkani (India)' },
{ code: 'ko-KR', name: 'Korean (South Korea)' },
{ code: 'lv-LV', name: 'Latvian (Latvia)' },
{ code: 'lt-LT', name: 'Lithuanian (Lithuania)' },
{ code: 'mk-MK', name: 'Macedonian (Macedonia)' },
{ code: 'ms-BN', name: 'Malay (Brunei)' },
{ code: 'ms-MY', name: 'Malay (Malaysia)' },
{ code: 'ml-IN', name: 'Malayalam (India)' },
{ code: 'mt-MT', name: 'Maltese (Malta)' },
{ code: 'mr-IN', name: 'Marathi (India)' },
{ code: 'mn-MN', name: 'Mongolian (Mongolia)' },
{ code: 'se-NO', name: 'Northern Sami (Norway)' },
{ code: 'nb-NO', name: 'Norwegian Bokmål (Norway)' },
{ code: 'nn-NO', name: 'Norwegian Nynorsk (Norway)' },
{ code: 'fa-IR', name: 'Persian (Iran)' },
{ code: 'pl-PL', name: 'Polish (Poland)' },
{ code: 'pt-BR', name: 'Portuguese (Brazil)' },
{ code: 'pt-PT', name: 'Portuguese (Portugal)' },
{ code: 'pa-IN', name: 'Punjabi (India)' },
{ code: 'ro-RO', name: 'Romanian (Romania)' },
{ code: 'ru-RU', name: 'Russian (Russia)' },
{ code: 'sr-BA', name: 'Serbian (Bosnia and Herzegovina)' },
{ code: 'sr-CS', name: 'Serbian (Serbia And Montenegro)' },
{ code: 'sk-SK', name: 'Slovak (Slovakia)' },
{ code: 'sl-SI', name: 'Slovenian (Slovenia)' },
{ code: 'es-AR', name: 'Spanish (Argentina)' },
{ code: 'es-BO', name: 'Spanish (Bolivia)' },
{ code: 'es-CL', name: 'Spanish (Chile)' },
{ code: 'es-CO', name: 'Spanish (Colombia)' },
{ code: 'es-CR', name: 'Spanish (Costa Rica)' },
{ code: 'es-DO', name: 'Spanish (Dominican Republic)' },
{ code: 'es-EC', name: 'Spanish (Ecuador)' },
{ code: 'es-SV', name: 'Spanish (El Salvador)' },
{ code: 'es-GT', name: 'Spanish (Guatemala)' },
{ code: 'es-HN', name: 'Spanish (Honduras)' },
{ code: 'es-MX', name: 'Spanish (Mexico)' },
{ code: 'es-NI', name: 'Spanish (Nicaragua)' },
{ code: 'es-PA', name: 'Spanish (Panama)' },
{ code: 'es-PY', name: 'Spanish (Paraguay)' },
{ code: 'es-PE', name: 'Spanish (Peru)' },
{ code: 'es-PR', name: 'Spanish (Puerto Rico)' },
{ code: 'es-ES', name: 'Spanish (Spain)' },
{ code: 'es-UY', name: 'Spanish (Uruguay)' },
{ code: 'es-VE', name: 'Spanish (Venezuela)' },
{ code: 'sw-KE', name: 'Swahili (Kenya)' },
{ code: 'sv-FI', name: 'Swedish (Finland)' },
{ code: 'sv-SE', name: 'Swedish (Sweden)' },
{ code: 'syr-SY', name: 'Syriac (Syria)' },
{ code: 'ta-IN', name: 'Tamil (India)' },
{ code: 'te-IN', name: 'Telugu (India)' },
{ code: 'th-TH', name: 'Thai (Thailand)' },
{ code: 'tn-ZA', name: 'Tswana (South Africa)' },
{ code: 'tr-TR', name: 'Turkish (Turkey)' },
{ code: 'uk-UA', name: 'Ukrainian (Ukraine)' },
{ code: 'uz-UZ', name: 'Uzbek (Uzbekistan)' },
{ code: 'vi-VN', name: 'Vietnamese (Vietnam)' },
{ code: 'cy-GB', name: 'Welsh (United Kingdom)' },
{ code: 'xh-ZA', name: 'Xhosa (South Africa)' },
{ code: 'zu-ZA', name: 'Zulu (South Africa)' },
];

9
web/src/lib/utils.ts
View File

@ -1,6 +1,7 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
import { locales } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import {
AssetJobName,
@ -185,3 +186,11 @@ export const oauth = {
return unlinkOAuthAccount();
},
};
export const findLocale = (code: string | undefined) => {
const language = locales.find((lang) => lang.code === code);
return {
code: language?.code,
name: language?.name,
};
};

5
web/src/lib/utils/timeline-util.ts
View File

@ -1,8 +1,11 @@
import { locale } from '$lib/stores/preferences.store';
import type { AssetResponseDto } from '@immich/sdk';
import { groupBy, sortBy } from 'lodash-es';
import { DateTime, Interval } from 'luxon';
import { get } from 'svelte/store';
export const fromLocalDateTime = (localDateTime: string) => DateTime.fromISO(localDateTime, { zone: 'UTC' });
export const fromLocalDateTime = (localDateTime: string) =>
DateTime.fromISO(localDateTime, { zone: 'UTC', locale: get(locale) });
export const groupDateFormat: Intl.DateTimeFormatOptions = {
weekday: 'short',

2
web/src/routes/admin/system-settings/+page.svelte
View File

@ -10,7 +10,7 @@
import OAuthSettings from '$lib/components/admin-page/settings/oauth/oauth-settings.svelte';
import PasswordLoginSettings from '$lib/components/admin-page/settings/password-login/password-login-settings.svelte';
import ServerSettings from '$lib/components/admin-page/settings/server/server-settings.svelte';
import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
import ThumbnailSettings from '$lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte';