github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): deduplicate storage template examples (#26462)

Browse Source
This commit is contained in:
Snowknight26
2026-03-02 05:52:02 -06:00
committed by GitHub
parent 13a514c189
commit 9dd2633e0c
1 changed files with 20 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
+20 -67
View File
@@ -11,85 +11,38 @@
let { options }: Props = $props(); let { options }: Props = $props();
const getLuxonExample = (format: string) => { const getExampleDate = () => DateTime.fromISO('2022-02-15T20:03:05.250Z', { locale: $locale });
return DateTime.fromISO('2022-02-15T20:03:05.250Z', { locale: $locale }).toFormat(format);
};
</script> </script>
{#snippet example(title: string, options: Array<string>)}
<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> <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"> <Card class="mt-2 text-sm bg-light-50 shadow-none">
<CardHeader> <CardHeader>
<Text class="mb-1">{$t('admin.storage_template_date_time_description')}</Text> <Text class="mb-1">{$t('admin.storage_template_date_time_description')}</Text>
<Text color="primary" <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> </CardHeader>
<CardBody> <CardBody>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4"> <div class="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4">
<div> {@render example($t('year'), options.yearOptions)}
<Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('year')}</Text> {@render example($t('month'), options.monthOptions)}
<ul> {@render example($t('week'), options.weekOptions)}
{#each options.yearOptions as yearFormat, index (index)} {@render example($t('day'), options.dayOptions)}
<li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li> {@render example($t('hour'), options.hourOptions)}
{/each} {@render example($t('minute'), options.minuteOptions)}
</ul> {@render example($t('second'), options.secondOptions)}
</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>
</div> </div>
</CardBody> </CardBody>
</Card> </Card>