helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): Localize dates and numbers (#1056)

Browse source
This commit is contained in:
Kiel Hurley 2022-12-05 04:35:20 +13:00 • committed by GitHub
parent 426ce77f1c
commit 5f2b75997f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 86 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/album-page/album-card.svelte
View file

@ -53,6 +53,8 @@
onMount(async () => {
imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || NO_THUMBNAIL;
});
const locale = navigator.languages;
</script>
<div
@ -87,7 +89,7 @@
</p>
<span class="text-xs flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
<p>{album.assetCount} items</p>
<p>{album.assetCount.toLocaleString(locale)} {album.assetCount == 1 ? `item` : `items`}</p>
{#if album.shared}
<p>·</p>

19
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -86,19 +86,22 @@
}
}
const getDateRange = () => {
const startDate = new Date(album.assets[0].createdAt);
const endDate = new Date(album.assets[album.assetCount - 1].createdAt);
const timeFormatOption: Intl.DateTimeFormatOptions = {
const locale = navigator.languages;
const albumDateFormat: Intl.DateTimeFormatOptions = {
month: 'short',
day: 'numeric',
year: 'numeric'
};
const startDateString = startDate.toLocaleDateString('us-EN', timeFormatOption);
const endDateString = endDate.toLocaleDateString('us-EN', timeFormatOption);
return `${startDateString} - ${endDateString}`;
const getDateRange = () => {
const startDate = new Date(album.assets[0].createdAt);
const endDate = new Date(album.assets[album.assetCount - 1].createdAt);
const startDateString = startDate.toLocaleDateString(locale, albumDateFormat);
const endDateString = endDate.toLocaleDateString(locale, albumDateFormat);
// If the start and end date are the same, only show one date
return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`;
};
onMount(async () => {