viscous/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-03 02:37:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): deduplicate storage template examples

Browse Source
This commit is contained in:
Snowknight26
2026-02-23 09:40:40 -06:00
parent 430638e129
commit 609092582e
1 changed files with 21 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
View File

@@ -11,85 +11,39 @@
let { options }: Props = $props();
const getLuxonExample = (format: string) => {
return DateTime.fromISO('2022-02-15T20:03:05.250Z', { locale: $locale }).toFormat(format);
};
const getExampleDate = () => DateTime.fromISO('2022-02-15T20:03:05.250Z', { locale: $locale });
</script>
{#snippet example(title: string, options: Array)}
<div>
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{title}</Text>
<ul>
{#each options as format, index (index)}
<li>{`{{${format}}} - ${getExampleDate().toFormat(format)}`}</li>
{/each}
</ul>
</div>
{/snippet}
<Text size="small">{$t('date_and_time')}</Text>
<!-- eslint-disable svelte/no-useless-mustaches -->
<Card class="mt-2 text-sm bg-light-50 shadow-none">
<CardHeader>
<Text class="mb-1">{$t('admin.storage_template_date_time_description')}</Text>
<Text color="primary"
>{$t('admin.storage_template_date_time_sample', { values: { date: '2022-02-15T20:03:05.250+00:00' } })}</Text
>{$t('admin.storage_template_date_time_sample', { values: { date: getExampleDate().toISO() }})}</Text
>
</CardHeader>
<CardBody>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4">
<div>
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('year')}</Text>
<ul>
{#each options.yearOptions as yearFormat, index (index)}
<li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
{/each}
</ul>
</div>
<div>
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('month')}</Text>
<ul>
{#each options.monthOptions as monthFormat, index (index)}
<li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
{/each}
</ul>
</div>
<div>
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('week')}</Text>
<ul>
{#each options.weekOptions as weekFormat, index (index)}
<li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li>
{/each}
</ul>
</div>
<div>
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('day')}</Text>
<ul>
{#each options.dayOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
{/each}
</ul>
</div>
<div>
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('hour')}</Text>
<ul>
{#each options.hourOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
{/each}
</ul>
</div>
<div>
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('minute')}</Text>
<ul>
{#each options.minuteOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
{/each}
</ul>
</div>
<div>
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('second')}</Text>
<ul>
{#each options.secondOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
{/each}
</ul>
</div>
{@render example($t('year'), options.yearOptions)}
{@render example($t('month'), options.monthOptions)}
{@render example($t('week'), options.weekOptions)}
{@render example($t('day'), options.dayOptions)}
{@render example($t('hour'), options.hourOptions)}
{@render example($t('minute'), options.minuteOptions)}
{@render example($t('second'), options.secondOptions)}
</div>
</CardBody>
</Card>