mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
Jason Rasmussen
GitHub
parent
7c2f7d6c51
commit
f55b3add80
242 changed files with 12794 additions and 13426 deletions
|
|
@ -1,36 +1,35 @@
|
|||
<script lang="ts">
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
export let user: UserResponseDto;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const deleteUser = async () => {
|
||||
try {
|
||||
const deletedUser = await api.userApi.deleteUser({ userId: user.id });
|
||||
if (deletedUser.data.deletedAt != null) {
|
||||
dispatch('user-delete-success');
|
||||
} else {
|
||||
dispatch('user-delete-fail');
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to delete user');
|
||||
dispatch('user-delete-fail');
|
||||
}
|
||||
};
|
||||
const deleteUser = async () => {
|
||||
try {
|
||||
const deletedUser = await api.userApi.deleteUser({ userId: user.id });
|
||||
if (deletedUser.data.deletedAt != null) {
|
||||
dispatch('user-delete-success');
|
||||
} else {
|
||||
dispatch('user-delete-fail');
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to delete user');
|
||||
dispatch('user-delete-fail');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<ConfirmDialogue title="Delete User" confirmText="Delete" on:confirm={deleteUser} on:cancel>
|
||||
<svelte:fragment slot="prompt">
|
||||
<div class="flex flex-col gap-4">
|
||||
<p>
|
||||
<b>{user.firstName} {user.lastName}</b>'s account and assets will be permanently deleted
|
||||
after 7 days.
|
||||
</p>
|
||||
<p>Are you sure you want to continue?</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="prompt">
|
||||
<div class="flex flex-col gap-4">
|
||||
<p>
|
||||
<b>{user.firstName} {user.lastName}</b>'s account and assets will be permanently deleted after 7 days.
|
||||
</p>
|
||||
<p>Are you sure you want to continue?</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<script lang="ts" context="module">
|
||||
export type Colors = 'light-gray' | 'gray';
|
||||
export type Colors = 'light-gray' | 'gray';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let color: Colors;
|
||||
export let color: Colors;
|
||||
|
||||
const colorClasses: Record<Colors, string> = {
|
||||
'light-gray': 'bg-gray-300/90 dark:bg-gray-600/90',
|
||||
gray: 'bg-gray-300 dark:bg-gray-600'
|
||||
};
|
||||
const colorClasses: Record<Colors, string> = {
|
||||
'light-gray': 'bg-gray-300/90 dark:bg-gray-600/90',
|
||||
gray: 'bg-gray-300 dark:bg-gray-600',
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
|
||||
color
|
||||
]}"
|
||||
on:click
|
||||
class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
|
||||
color
|
||||
]}"
|
||||
on:click
|
||||
>
|
||||
<slot />
|
||||
<slot />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<script lang="ts" context="module">
|
||||
export type Color = 'success' | 'warning';
|
||||
export type Color = 'success' | 'warning';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let color: Color;
|
||||
export let color: Color;
|
||||
|
||||
const colorClasses: Record<Color, string> = {
|
||||
success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
|
||||
warning: 'bg-orange-400/70 text-gray-900 dark:bg-orange-900 dark:text-gray-100'
|
||||
};
|
||||
const colorClasses: Record<Color, string> = {
|
||||
success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
|
||||
warning: 'bg-orange-400/70 text-gray-900 dark:bg-orange-900 dark:text-gray-100',
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="w-full text-center text-sm p-2 {colorClasses[color]}">
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,149 +1,141 @@
|
|||
<script lang="ts">
|
||||
import type Icon from 'svelte-material-icons/AbTesting.svelte';
|
||||
import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
|
||||
import Play from 'svelte-material-icons/Play.svelte';
|
||||
import Pause from 'svelte-material-icons/Pause.svelte';
|
||||
import FastForward from 'svelte-material-icons/FastForward.svelte';
|
||||
import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { JobCommand, JobCommandDto, JobCountsDto, QueueStatusDto } from '@api';
|
||||
import Badge from '$lib/components/elements/badge.svelte';
|
||||
import JobTileButton from './job-tile-button.svelte';
|
||||
import JobTileStatus from './job-tile-status.svelte';
|
||||
import type Icon from 'svelte-material-icons/AbTesting.svelte';
|
||||
import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
|
||||
import Play from 'svelte-material-icons/Play.svelte';
|
||||
import Pause from 'svelte-material-icons/Pause.svelte';
|
||||
import FastForward from 'svelte-material-icons/FastForward.svelte';
|
||||
import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { JobCommand, JobCommandDto, JobCountsDto, QueueStatusDto } from '@api';
|
||||
import Badge from '$lib/components/elements/badge.svelte';
|
||||
import JobTileButton from './job-tile-button.svelte';
|
||||
import JobTileStatus from './job-tile-status.svelte';
|
||||
|
||||
export let title: string;
|
||||
export let subtitle: string | undefined = undefined;
|
||||
export let jobCounts: JobCountsDto;
|
||||
export let queueStatus: QueueStatusDto;
|
||||
export let allowForceCommand = true;
|
||||
export let icon: typeof Icon;
|
||||
export let title: string;
|
||||
export let subtitle: string | undefined = undefined;
|
||||
export let jobCounts: JobCountsDto;
|
||||
export let queueStatus: QueueStatusDto;
|
||||
export let allowForceCommand = true;
|
||||
export let icon: typeof Icon;
|
||||
|
||||
export let allText: string;
|
||||
export let missingText: string;
|
||||
export let allText: string;
|
||||
export let missingText: string;
|
||||
|
||||
const slots = $$props.$$slots;
|
||||
const slots = $$props.$$slots;
|
||||
|
||||
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
|
||||
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
|
||||
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
|
||||
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
|
||||
|
||||
const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
|
||||
const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
|
||||
|
||||
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
|
||||
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
|
||||
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
|
||||
>
|
||||
<div class="flex flex-col w-full">
|
||||
{#if queueStatus.isPaused}
|
||||
<JobTileStatus color="warning">Paused</JobTileStatus>
|
||||
{:else if queueStatus.isActive}
|
||||
<JobTileStatus color="success">Active</JobTileStatus>
|
||||
{/if}
|
||||
<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
|
||||
<div
|
||||
class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<span class="flex gap-2 items-center">
|
||||
<svelte:component this={icon} size="1.25em" class="shrink-0 hidden sm:block" />
|
||||
{title.toUpperCase()}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
{#if jobCounts.failed > 0}
|
||||
<Badge color="primary">
|
||||
{jobCounts.failed.toLocaleString($locale)} failed
|
||||
</Badge>
|
||||
{/if}
|
||||
{#if jobCounts.delayed > 0}
|
||||
<Badge color="secondary">
|
||||
{jobCounts.delayed.toLocaleString($locale)} delayed
|
||||
</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
{#if queueStatus.isPaused}
|
||||
<JobTileStatus color="warning">Paused</JobTileStatus>
|
||||
{:else if queueStatus.isActive}
|
||||
<JobTileStatus color="success">Active</JobTileStatus>
|
||||
{/if}
|
||||
<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
|
||||
<div class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
|
||||
<span class="flex gap-2 items-center">
|
||||
<svelte:component this={icon} size="1.25em" class="shrink-0 hidden sm:block" />
|
||||
{title.toUpperCase()}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
{#if jobCounts.failed > 0}
|
||||
<Badge color="primary">
|
||||
{jobCounts.failed.toLocaleString($locale)} failed
|
||||
</Badge>
|
||||
{/if}
|
||||
{#if jobCounts.delayed > 0}
|
||||
<Badge color="secondary">
|
||||
{jobCounts.delayed.toLocaleString($locale)} delayed
|
||||
</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if subtitle}
|
||||
<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
|
||||
{/if}
|
||||
{#if subtitle}
|
||||
<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
|
||||
{/if}
|
||||
|
||||
{#if slots?.description}
|
||||
<div class="text-sm dark:text-white">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if slots?.description}
|
||||
<div class="text-sm dark:text-white">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
|
||||
<div
|
||||
class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
|
||||
>
|
||||
<p>Active</p>
|
||||
<p class="text-2xl">
|
||||
{jobCounts.active.toLocaleString($locale)}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
|
||||
<div
|
||||
class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
|
||||
>
|
||||
<p>Active</p>
|
||||
<p class="text-2xl">
|
||||
{jobCounts.active.toLocaleString($locale)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
|
||||
>
|
||||
<p class="text-2xl">
|
||||
{waitingCount.toLocaleString($locale)}
|
||||
</p>
|
||||
<p>Waiting</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
|
||||
{#if !isIdle}
|
||||
{#if waitingCount > 0}
|
||||
<JobTileButton
|
||||
color="gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}
|
||||
>
|
||||
<Close size="24" /> CLEAR
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{#if queueStatus.isPaused}
|
||||
{@const size = waitingCount > 0 ? '24' : '48'}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
|
||||
>
|
||||
<!-- size property is not reactive, so have to use width and height -->
|
||||
<FastForward width={size} height={size} /> RESUME
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
|
||||
>
|
||||
<Pause size="24" /> PAUSE
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{:else if allowForceCommand}
|
||||
<JobTileButton
|
||||
color="gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}
|
||||
>
|
||||
<AllInclusive size="24" />
|
||||
{allText}
|
||||
</JobTileButton>
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<SelectionSearch size="24" />
|
||||
{missingText}
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<Play size="48" /> START
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
|
||||
>
|
||||
<p class="text-2xl">
|
||||
{waitingCount.toLocaleString($locale)}
|
||||
</p>
|
||||
<p>Waiting</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
|
||||
{#if !isIdle}
|
||||
{#if waitingCount > 0}
|
||||
<JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}>
|
||||
<Close size="24" /> CLEAR
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{#if queueStatus.isPaused}
|
||||
{@const size = waitingCount > 0 ? '24' : '48'}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
|
||||
>
|
||||
<!-- size property is not reactive, so have to use width and height -->
|
||||
<FastForward width={size} height={size} /> RESUME
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
|
||||
>
|
||||
<Pause size="24" /> PAUSE
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
{:else if allowForceCommand}
|
||||
<JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}>
|
||||
<AllInclusive size="24" />
|
||||
{allText}
|
||||
</JobTileButton>
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<SelectionSearch size="24" />
|
||||
{missingText}
|
||||
</JobTileButton>
|
||||
{:else}
|
||||
<JobTileButton
|
||||
color="light-gray"
|
||||
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
|
||||
>
|
||||
<Play size="48" /> START
|
||||
</JobTileButton>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,160 +1,159 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
|
||||
import type { ComponentType } from 'svelte';
|
||||
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
|
||||
import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
|
||||
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
|
||||
import FolderMove from 'svelte-material-icons/FolderMove.svelte';
|
||||
import CogIcon from 'svelte-material-icons/Cog.svelte';
|
||||
import Table from 'svelte-material-icons/Table.svelte';
|
||||
import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
|
||||
import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
|
||||
import Video from 'svelte-material-icons/Video.svelte';
|
||||
import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
|
||||
import JobTile from './job-tile.svelte';
|
||||
import StorageMigrationDescription from './storage-migration-description.svelte';
|
||||
import Button from '../../elements/buttons/button.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
|
||||
import type { ComponentType } from 'svelte';
|
||||
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
|
||||
import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
|
||||
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
|
||||
import FolderMove from 'svelte-material-icons/FolderMove.svelte';
|
||||
import CogIcon from 'svelte-material-icons/Cog.svelte';
|
||||
import Table from 'svelte-material-icons/Table.svelte';
|
||||
import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
|
||||
import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
|
||||
import Video from 'svelte-material-icons/Video.svelte';
|
||||
import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
|
||||
import JobTile from './job-tile.svelte';
|
||||
import StorageMigrationDescription from './storage-migration-description.svelte';
|
||||
import Button from '../../elements/buttons/button.svelte';
|
||||
|
||||
export let jobs: AllJobStatusResponseDto;
|
||||
export let jobs: AllJobStatusResponseDto;
|
||||
|
||||
interface JobDetails {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
allText?: string;
|
||||
missingText?: string;
|
||||
icon: typeof Icon;
|
||||
allowForceCommand?: boolean;
|
||||
component?: ComponentType;
|
||||
handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
|
||||
}
|
||||
interface JobDetails {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
allText?: string;
|
||||
missingText?: string;
|
||||
icon: typeof Icon;
|
||||
allowForceCommand?: boolean;
|
||||
component?: ComponentType;
|
||||
handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
|
||||
}
|
||||
|
||||
let faceConfirm = false;
|
||||
let faceConfirm = false;
|
||||
|
||||
const handleFaceCommand = async (jobId: JobName, dto: JobCommandDto) => {
|
||||
if (dto.force) {
|
||||
faceConfirm = true;
|
||||
return;
|
||||
}
|
||||
const handleFaceCommand = async (jobId: JobName, dto: JobCommandDto) => {
|
||||
if (dto.force) {
|
||||
faceConfirm = true;
|
||||
return;
|
||||
}
|
||||
|
||||
await handleCommand(jobId, dto);
|
||||
};
|
||||
await handleCommand(jobId, dto);
|
||||
};
|
||||
|
||||
const onFaceConfirm = () => {
|
||||
faceConfirm = false;
|
||||
handleCommand(JobName.RecognizeFaces, { command: JobCommand.Start, force: true });
|
||||
};
|
||||
const onFaceConfirm = () => {
|
||||
faceConfirm = false;
|
||||
handleCommand(JobName.RecognizeFaces, { command: JobCommand.Start, force: true });
|
||||
};
|
||||
|
||||
const jobDetails: Partial<Record<JobName, JobDetails>> = {
|
||||
[JobName.ThumbnailGeneration]: {
|
||||
icon: FileJpgBox,
|
||||
title: api.getJobName(JobName.ThumbnailGeneration),
|
||||
subtitle: 'Regenerate JPEG and WebP thumbnails'
|
||||
},
|
||||
[JobName.MetadataExtraction]: {
|
||||
icon: Table,
|
||||
title: api.getJobName(JobName.MetadataExtraction),
|
||||
subtitle: 'Extract metadata information i.e. GPS, resolution...etc'
|
||||
},
|
||||
[JobName.Sidecar]: {
|
||||
title: api.getJobName(JobName.Sidecar),
|
||||
icon: FileXmlBox,
|
||||
subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
|
||||
allText: 'SYNC',
|
||||
missingText: 'DISCOVER'
|
||||
},
|
||||
[JobName.ObjectTagging]: {
|
||||
icon: TagMultiple,
|
||||
title: api.getJobName(JobName.ObjectTagging),
|
||||
subtitle:
|
||||
'Run machine learning to tag objects\nNote that some assets may not have any objects detected'
|
||||
},
|
||||
[JobName.ClipEncoding]: {
|
||||
icon: VectorCircle,
|
||||
title: api.getJobName(JobName.ClipEncoding),
|
||||
subtitle: 'Run machine learning to generate clip embeddings'
|
||||
},
|
||||
[JobName.RecognizeFaces]: {
|
||||
icon: FaceRecognition,
|
||||
title: api.getJobName(JobName.RecognizeFaces),
|
||||
subtitle: 'Run machine learning to recognize faces',
|
||||
handleCommand: handleFaceCommand
|
||||
},
|
||||
[JobName.VideoConversion]: {
|
||||
icon: Video,
|
||||
title: api.getJobName(JobName.VideoConversion),
|
||||
subtitle: 'Transcode videos not in the desired format'
|
||||
},
|
||||
[JobName.StorageTemplateMigration]: {
|
||||
icon: FolderMove,
|
||||
title: api.getJobName(JobName.StorageTemplateMigration),
|
||||
allowForceCommand: false,
|
||||
component: StorageMigrationDescription
|
||||
}
|
||||
};
|
||||
const jobDetails: Partial<Record<JobName, JobDetails>> = {
|
||||
[JobName.ThumbnailGeneration]: {
|
||||
icon: FileJpgBox,
|
||||
title: api.getJobName(JobName.ThumbnailGeneration),
|
||||
subtitle: 'Regenerate JPEG and WebP thumbnails',
|
||||
},
|
||||
[JobName.MetadataExtraction]: {
|
||||
icon: Table,
|
||||
title: api.getJobName(JobName.MetadataExtraction),
|
||||
subtitle: 'Extract metadata information i.e. GPS, resolution...etc',
|
||||
},
|
||||
[JobName.Sidecar]: {
|
||||
title: api.getJobName(JobName.Sidecar),
|
||||
icon: FileXmlBox,
|
||||
subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
|
||||
allText: 'SYNC',
|
||||
missingText: 'DISCOVER',
|
||||
},
|
||||
[JobName.ObjectTagging]: {
|
||||
icon: TagMultiple,
|
||||
title: api.getJobName(JobName.ObjectTagging),
|
||||
subtitle: 'Run machine learning to tag objects\nNote that some assets may not have any objects detected',
|
||||
},
|
||||
[JobName.ClipEncoding]: {
|
||||
icon: VectorCircle,
|
||||
title: api.getJobName(JobName.ClipEncoding),
|
||||
subtitle: 'Run machine learning to generate clip embeddings',
|
||||
},
|
||||
[JobName.RecognizeFaces]: {
|
||||
icon: FaceRecognition,
|
||||
title: api.getJobName(JobName.RecognizeFaces),
|
||||
subtitle: 'Run machine learning to recognize faces',
|
||||
handleCommand: handleFaceCommand,
|
||||
},
|
||||
[JobName.VideoConversion]: {
|
||||
icon: Video,
|
||||
title: api.getJobName(JobName.VideoConversion),
|
||||
subtitle: 'Transcode videos not in the desired format',
|
||||
},
|
||||
[JobName.StorageTemplateMigration]: {
|
||||
icon: FolderMove,
|
||||
title: api.getJobName(JobName.StorageTemplateMigration),
|
||||
allowForceCommand: false,
|
||||
component: StorageMigrationDescription,
|
||||
},
|
||||
};
|
||||
|
||||
const jobDetailsArray = Object.entries(jobDetails) as [JobName, JobDetails][];
|
||||
const jobDetailsArray = Object.entries(jobDetails) as [JobName, JobDetails][];
|
||||
|
||||
async function handleCommand(jobId: JobName, jobCommand: JobCommandDto) {
|
||||
const title = jobDetails[jobId]?.title;
|
||||
async function handleCommand(jobId: JobName, jobCommand: JobCommandDto) {
|
||||
const title = jobDetails[jobId]?.title;
|
||||
|
||||
try {
|
||||
const { data } = await api.jobApi.sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
|
||||
jobs[jobId] = data;
|
||||
try {
|
||||
const { data } = await api.jobApi.sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
|
||||
jobs[jobId] = data;
|
||||
|
||||
switch (jobCommand.command) {
|
||||
case JobCommand.Empty:
|
||||
notificationController.show({
|
||||
message: `Cleared jobs for: ${title}`,
|
||||
type: NotificationType.Info
|
||||
});
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, `Command '${jobCommand.command}' failed for job: ${title}`);
|
||||
}
|
||||
}
|
||||
switch (jobCommand.command) {
|
||||
case JobCommand.Empty:
|
||||
notificationController.show({
|
||||
message: `Cleared jobs for: ${title}`,
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, `Command '${jobCommand.command}' failed for job: ${title}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if faceConfirm}
|
||||
<ConfirmDialogue
|
||||
prompt="Are you sure you want to reprocess all faces? This will also clear named people."
|
||||
on:confirm={onFaceConfirm}
|
||||
on:cancel={() => (faceConfirm = false)}
|
||||
/>
|
||||
<ConfirmDialogue
|
||||
prompt="Are you sure you want to reprocess all faces? This will also clear named people."
|
||||
on:confirm={onFaceConfirm}
|
||||
on:cancel={() => (faceConfirm = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-7">
|
||||
<div class="flex justify-end">
|
||||
<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
|
||||
<Button size="sm">
|
||||
<CogIcon size="18" />
|
||||
<span class="pl-2">Manage Concurrency</span>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
{#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
|
||||
{@const { jobCounts, queueStatus } = jobs[jobName]}
|
||||
<JobTile
|
||||
{icon}
|
||||
{title}
|
||||
{subtitle}
|
||||
allText={allText || 'ALL'}
|
||||
missingText={missingText || 'MISSING'}
|
||||
{allowForceCommand}
|
||||
{jobCounts}
|
||||
{queueStatus}
|
||||
on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
|
||||
>
|
||||
{#if component}
|
||||
<svelte:component this={component} slot="description" />
|
||||
{/if}
|
||||
</JobTile>
|
||||
{/each}
|
||||
<div class="flex justify-end">
|
||||
<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
|
||||
<Button size="sm">
|
||||
<CogIcon size="18" />
|
||||
<span class="pl-2">Manage Concurrency</span>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
{#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
|
||||
{@const { jobCounts, queueStatus } = jobs[jobName]}
|
||||
<JobTile
|
||||
{icon}
|
||||
{title}
|
||||
{subtitle}
|
||||
allText={allText || 'ALL'}
|
||||
missingText={missingText || 'MISSING'}
|
||||
{allowForceCommand}
|
||||
{jobCounts}
|
||||
{queueStatus}
|
||||
on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
|
||||
>
|
||||
{#if component}
|
||||
<svelte:component this={component} slot="description" />
|
||||
{/if}
|
||||
</JobTile>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
</script>
|
||||
|
||||
Apply the current
|
||||
<a
|
||||
href={`${AppRoute.ADMIN_SETTINGS}?open=storage-template`}
|
||||
class="text-immich-primary dark:text-immich-dark-primary">Storage template</a
|
||||
<a href={`${AppRoute.ADMIN_SETTINGS}?open=storage-template`} class="text-immich-primary dark:text-immich-dark-primary"
|
||||
>Storage template</a
|
||||
>
|
||||
to previously uploaded assets
|
||||
|
|
|
|||
|
|
@ -1,27 +1,21 @@
|
|||
<script lang="ts">
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
export let user: UserResponseDto;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const restoreUser = async () => {
|
||||
const restoredUser = await api.userApi.restoreUser({ userId: user.id });
|
||||
if (restoredUser.data.deletedAt == null) dispatch('user-restore-success');
|
||||
else dispatch('user-restore-fail');
|
||||
};
|
||||
const restoreUser = async () => {
|
||||
const restoredUser = await api.userApi.restoreUser({ userId: user.id });
|
||||
if (restoredUser.data.deletedAt == null) dispatch('user-restore-success');
|
||||
else dispatch('user-restore-fail');
|
||||
};
|
||||
</script>
|
||||
|
||||
<ConfirmDialogue
|
||||
title="Restore User"
|
||||
confirmText="Continue"
|
||||
confirmColor="green"
|
||||
on:confirm={restoreUser}
|
||||
on:cancel
|
||||
>
|
||||
<svelte:fragment slot="prompt">
|
||||
<p><b>{user.firstName} {user.lastName}</b>'s account will be restored.</p>
|
||||
</svelte:fragment>
|
||||
<ConfirmDialogue title="Restore User" confirmText="Continue" confirmColor="green" on:confirm={restoreUser} on:cancel>
|
||||
<svelte:fragment slot="prompt">
|
||||
<p><b>{user.firstName} {user.lastName}</b>'s account will be restored.</p>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
|
|
|
|||
|
|
@ -1,122 +1,109 @@
|
|||
<script lang="ts">
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import type { ServerStatsResponseDto } from '@api';
|
||||
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
|
||||
import Memory from 'svelte-material-icons/Memory.svelte';
|
||||
import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
|
||||
import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
|
||||
import StatsCard from './stats-card.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import type { ServerStatsResponseDto } from '@api';
|
||||
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
|
||||
import Memory from 'svelte-material-icons/Memory.svelte';
|
||||
import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
|
||||
import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
|
||||
import StatsCard from './stats-card.svelte';
|
||||
|
||||
export let stats: ServerStatsResponseDto = {
|
||||
photos: 0,
|
||||
videos: 0,
|
||||
usage: 0,
|
||||
usageByUser: []
|
||||
};
|
||||
export let stats: ServerStatsResponseDto = {
|
||||
photos: 0,
|
||||
videos: 0,
|
||||
usage: 0,
|
||||
usageByUser: [],
|
||||
};
|
||||
|
||||
$: zeros = (value: number) => {
|
||||
const maxLength = 13;
|
||||
const valueLength = value.toString().length;
|
||||
const zeroLength = maxLength - valueLength;
|
||||
$: zeros = (value: number) => {
|
||||
const maxLength = 13;
|
||||
const valueLength = value.toString().length;
|
||||
const zeroLength = maxLength - valueLength;
|
||||
|
||||
return '0'.repeat(zeroLength);
|
||||
};
|
||||
return '0'.repeat(zeroLength);
|
||||
};
|
||||
|
||||
$: [statsUsage, statsUsageUnit] = getBytesWithUnit(stats.usage, 0);
|
||||
$: [statsUsage, statsUsageUnit] = getBytesWithUnit(stats.usage, 0);
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-5">
|
||||
<div>
|
||||
<p class="text-sm dark:text-immich-dark-fg">TOTAL USAGE</p>
|
||||
<div>
|
||||
<p class="text-sm dark:text-immich-dark-fg">TOTAL USAGE</p>
|
||||
|
||||
<div class="mt-5 justify-between lg:flex hidden">
|
||||
<StatsCard logo={CameraIris} title="PHOTOS" value={stats.photos} />
|
||||
<StatsCard logo={PlayCircle} title="VIDEOS" value={stats.videos} />
|
||||
<StatsCard logo={Memory} title="STORAGE" value={statsUsage} unit={statsUsageUnit} />
|
||||
</div>
|
||||
<div class="mt-5 lg:hidden flex">
|
||||
<div
|
||||
class="bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between"
|
||||
>
|
||||
<div class="flex flex-wrap gap-x-12">
|
||||
<div
|
||||
class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<CameraIris size="25" />
|
||||
<p>PHOTOS</p>
|
||||
</div>
|
||||
<div class="mt-5 justify-between lg:flex hidden">
|
||||
<StatsCard logo={CameraIris} title="PHOTOS" value={stats.photos} />
|
||||
<StatsCard logo={PlayCircle} title="VIDEOS" value={stats.videos} />
|
||||
<StatsCard logo={Memory} title="STORAGE" value={statsUsage} unit={statsUsageUnit} />
|
||||
</div>
|
||||
<div class="mt-5 lg:hidden flex">
|
||||
<div class="bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between">
|
||||
<div class="flex flex-wrap gap-x-12">
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<CameraIris size="25" />
|
||||
<p>PHOTOS</p>
|
||||
</div>
|
||||
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{stats.photos}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-12">
|
||||
<div
|
||||
class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<PlayCircle size="25" />
|
||||
<p>VIDEOS</p>
|
||||
</div>
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{stats.photos}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-12">
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<PlayCircle size="25" />
|
||||
<p>VIDEOS</p>
|
||||
</div>
|
||||
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{stats.videos}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-7">
|
||||
<div
|
||||
class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<Memory size="25" />
|
||||
<p>STORAGE</p>
|
||||
</div>
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{stats.videos}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-7">
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<Memory size="25" />
|
||||
<p>STORAGE</p>
|
||||
</div>
|
||||
|
||||
<div class="relative text-center font-mono font-semibold text-2xl flex">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{statsUsage}</span
|
||||
>
|
||||
<span class="text-center my-auto ml-2 text-base font-light text-gray-400"
|
||||
>{statsUsageUnit}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative text-center font-mono font-semibold text-2xl flex">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{statsUsage}</span
|
||||
>
|
||||
<span class="text-center my-auto ml-2 text-base font-light text-gray-400">{statsUsageUnit}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm dark:text-immich-dark-fg">USER USAGE DETAIL</p>
|
||||
<table class="text-left w-full mt-5">
|
||||
<thead
|
||||
class="border rounded-md mb-4 bg-gray-50 dark:bg-immich-dark-gray dark:border-immich-dark-gray flex text-immich-primary dark:text-immich-dark-primary w-full h-12"
|
||||
>
|
||||
<tr class="flex w-full place-items-center">
|
||||
<th class="text-center w-1/4 font-medium text-sm">User</th>
|
||||
<th class="text-center w-1/4 font-medium text-sm">Photos</th>
|
||||
<th class="text-center w-1/4 font-medium text-sm">Videos</th>
|
||||
<th class="text-center w-1/4 font-medium text-sm">Size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray dark:text-immich-dark-fg"
|
||||
>
|
||||
{#each stats.usageByUser as user (user.userId)}
|
||||
<tr
|
||||
class="text-center flex place-items-center w-full h-[50px] even:bg-immich-bg even:dark:bg-immich-dark-gray/50 odd:bg-immich-gray odd:dark:bg-immich-dark-gray/75"
|
||||
>
|
||||
<td class="text-sm px-2 w-1/4 text-ellipsis"
|
||||
>{user.userFirstName} {user.userLastName}</td
|
||||
>
|
||||
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.photos.toLocaleString($locale)}</td>
|
||||
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.videos.toLocaleString($locale)}</td>
|
||||
<td class="text-sm px-2 w-1/4 text-ellipsis">{asByteUnitString(user.usage, $locale)}</td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm dark:text-immich-dark-fg">USER USAGE DETAIL</p>
|
||||
<table class="text-left w-full mt-5">
|
||||
<thead
|
||||
class="border rounded-md mb-4 bg-gray-50 dark:bg-immich-dark-gray dark:border-immich-dark-gray flex text-immich-primary dark:text-immich-dark-primary w-full h-12"
|
||||
>
|
||||
<tr class="flex w-full place-items-center">
|
||||
<th class="text-center w-1/4 font-medium text-sm">User</th>
|
||||
<th class="text-center w-1/4 font-medium text-sm">Photos</th>
|
||||
<th class="text-center w-1/4 font-medium text-sm">Videos</th>
|
||||
<th class="text-center w-1/4 font-medium text-sm">Size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray dark:text-immich-dark-fg"
|
||||
>
|
||||
{#each stats.usageByUser as user (user.userId)}
|
||||
<tr
|
||||
class="text-center flex place-items-center w-full h-[50px] even:bg-immich-bg even:dark:bg-immich-dark-gray/50 odd:bg-immich-gray odd:dark:bg-immich-dark-gray/75"
|
||||
>
|
||||
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.userFirstName} {user.userLastName}</td>
|
||||
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.photos.toLocaleString($locale)}</td>
|
||||
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.videos.toLocaleString($locale)}</td>
|
||||
<td class="text-sm px-2 w-1/4 text-ellipsis">{asByteUnitString(user.usage, $locale)}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,32 @@
|
|||
<script lang="ts">
|
||||
import type Icon from 'svelte-material-icons/AbTesting.svelte';
|
||||
import type Icon from 'svelte-material-icons/AbTesting.svelte';
|
||||
|
||||
export let logo: typeof Icon;
|
||||
export let title: string;
|
||||
export let value: number;
|
||||
export let unit: string | undefined = undefined;
|
||||
export let logo: typeof Icon;
|
||||
export let title: string;
|
||||
export let value: number;
|
||||
export let unit: string | undefined = undefined;
|
||||
|
||||
$: zeros = () => {
|
||||
const maxLength = 13;
|
||||
const valueLength = value.toString().length;
|
||||
const zeroLength = maxLength - valueLength;
|
||||
$: zeros = () => {
|
||||
const maxLength = 13;
|
||||
const valueLength = value.toString().length;
|
||||
const zeroLength = maxLength - valueLength;
|
||||
|
||||
return '0'.repeat(zeroLength);
|
||||
};
|
||||
return '0'.repeat(zeroLength);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="w-[250px] h-[140px] bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between"
|
||||
>
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<svelte:component this={logo} size="40" />
|
||||
<p>{title}</p>
|
||||
</div>
|
||||
<div class="w-[250px] h-[140px] bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between">
|
||||
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||
<svelte:component this={logo} size="40" />
|
||||
<p>{title}</p>
|
||||
</div>
|
||||
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros()}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{value}</span
|
||||
>
|
||||
{#if unit}
|
||||
<span class="absolute -top-5 right-2 text-base font-light text-gray-400">{unit}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros()}</span><span
|
||||
class="text-immich-primary dark:text-immich-dark-primary">{value}</span
|
||||
>
|
||||
{#if unit}
|
||||
<span class="absolute -top-5 right-2 text-base font-light text-gray-400">{unit}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<script lang="ts">
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
</script>
|
||||
|
||||
<ConfirmDialogue title="Disable Login" on:cancel on:confirm>
|
||||
<svelte:fragment slot="prompt">
|
||||
<div class="flex flex-col gap-4">
|
||||
<p>Are you sure you want to disable all login methods? Login will be completely disabled.</p>
|
||||
<p>
|
||||
To re-enable, use a
|
||||
<a
|
||||
href="https://immich.app/docs/administration/server-commands"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
class="underline"
|
||||
>
|
||||
Server Command</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="prompt">
|
||||
<div class="flex flex-col gap-4">
|
||||
<p>Are you sure you want to disable all login methods? Login will be completely disabled.</p>
|
||||
<p>
|
||||
To re-enable, use a
|
||||
<a
|
||||
href="https://immich.app/docs/administration/server-commands"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
class="underline"
|
||||
>
|
||||
Server Command</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
|
|
|
|||
|
|
@ -1,211 +1,211 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { api, SystemConfigFFmpegDto, SystemConfigFFmpegDtoTranscodeEnum } from '@api';
|
||||
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 { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { api, SystemConfigFFmpegDto, SystemConfigFFmpegDtoTranscodeEnum } from '@api';
|
||||
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 { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
|
||||
export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
|
||||
|
||||
let savedConfig: SystemConfigFFmpegDto;
|
||||
let defaultConfig: SystemConfigFFmpegDto;
|
||||
let savedConfig: SystemConfigFFmpegDto;
|
||||
let defaultConfig: SystemConfigFFmpegDto;
|
||||
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.ffmpeg),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.ffmpeg)
|
||||
]);
|
||||
}
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.ffmpeg),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.ffmpeg),
|
||||
]);
|
||||
}
|
||||
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: configs } = await api.systemConfigApi.getConfig();
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: configs } = await api.systemConfigApi.getConfig();
|
||||
|
||||
const result = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...configs,
|
||||
ffmpeg: ffmpegConfig
|
||||
}
|
||||
});
|
||||
const result = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...configs,
|
||||
ffmpeg: ffmpegConfig,
|
||||
},
|
||||
});
|
||||
|
||||
ffmpegConfig = { ...result.data.ffmpeg };
|
||||
savedConfig = { ...result.data.ffmpeg };
|
||||
ffmpegConfig = { ...result.data.ffmpeg };
|
||||
savedConfig = { ...result.data.ffmpeg };
|
||||
|
||||
notificationController.show({
|
||||
message: 'FFmpeg settings saved',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error [ffmpeg-settings] [saveSetting]', e);
|
||||
notificationController.show({
|
||||
message: 'Unable to save settings',
|
||||
type: NotificationType.Error
|
||||
});
|
||||
}
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'FFmpeg settings saved',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error [ffmpeg-settings] [saveSetting]', e);
|
||||
notificationController.show({
|
||||
message: 'Unable to save settings',
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
|
||||
ffmpegConfig = { ...resetConfig.ffmpeg };
|
||||
savedConfig = { ...resetConfig.ffmpeg };
|
||||
ffmpegConfig = { ...resetConfig.ffmpeg };
|
||||
savedConfig = { ...resetConfig.ffmpeg };
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset FFmpeg settings to the recent saved settings',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset FFmpeg settings to the recent saved settings',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
|
||||
async function resetToDefault() {
|
||||
const { data: configs } = await api.systemConfigApi.getDefaults();
|
||||
async function resetToDefault() {
|
||||
const { data: configs } = await api.systemConfigApi.getDefaults();
|
||||
|
||||
ffmpegConfig = { ...configs.ffmpeg };
|
||||
defaultConfig = { ...configs.ffmpeg };
|
||||
ffmpegConfig = { ...configs.ffmpeg };
|
||||
defaultConfig = { ...configs.ffmpeg };
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset FFmpeg settings to default',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset FFmpeg settings to default',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#await getConfigs() then}
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="flex flex-col gap-4 ml-4 mt-4">
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.NUMBER}
|
||||
label="CONSTANT RATE FACTOR (-crf)"
|
||||
desc="Video quality level. Typical values are 23 for H.264, 28 for HEVC, and 31 for VP9. Lower is better, but takes longer to encode and produces larger files."
|
||||
bind:value={ffmpegConfig.crf}
|
||||
required={true}
|
||||
isEdited={!(ffmpegConfig.crf == savedConfig.crf)}
|
||||
/>
|
||||
{#await getConfigs() then}
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="flex flex-col gap-4 ml-4 mt-4">
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.NUMBER}
|
||||
label="CONSTANT RATE FACTOR (-crf)"
|
||||
desc="Video quality level. Typical values are 23 for H.264, 28 for HEVC, and 31 for VP9. Lower is better, but takes longer to encode and produces larger files."
|
||||
bind:value={ffmpegConfig.crf}
|
||||
required={true}
|
||||
isEdited={!(ffmpegConfig.crf == savedConfig.crf)}
|
||||
/>
|
||||
|
||||
<SettingSelect
|
||||
label="PRESET (-preset)"
|
||||
desc="Compression speed. Slower presets produce smaller files, and increase quality when targeting a certain bitrate. VP9 ignores speeds above `faster`."
|
||||
bind:value={ffmpegConfig.preset}
|
||||
name="preset"
|
||||
options={[
|
||||
{ value: 'ultrafast', text: 'ultrafast' },
|
||||
{ value: 'superfast', text: 'superfast' },
|
||||
{ value: 'veryfast', text: 'veryfast' },
|
||||
{ value: 'faster', text: 'faster' },
|
||||
{ value: 'fast', text: 'fast' },
|
||||
{ value: 'medium', text: 'medium' },
|
||||
{ value: 'slow', text: 'slow' },
|
||||
{ value: 'slower', text: 'slower' },
|
||||
{ value: 'veryslow', text: 'veryslow' }
|
||||
]}
|
||||
isEdited={!(ffmpegConfig.preset == savedConfig.preset)}
|
||||
/>
|
||||
<SettingSelect
|
||||
label="PRESET (-preset)"
|
||||
desc="Compression speed. Slower presets produce smaller files, and increase quality when targeting a certain bitrate. VP9 ignores speeds above `faster`."
|
||||
bind:value={ffmpegConfig.preset}
|
||||
name="preset"
|
||||
options={[
|
||||
{ value: 'ultrafast', text: 'ultrafast' },
|
||||
{ value: 'superfast', text: 'superfast' },
|
||||
{ value: 'veryfast', text: 'veryfast' },
|
||||
{ value: 'faster', text: 'faster' },
|
||||
{ value: 'fast', text: 'fast' },
|
||||
{ value: 'medium', text: 'medium' },
|
||||
{ value: 'slow', text: 'slow' },
|
||||
{ value: 'slower', text: 'slower' },
|
||||
{ value: 'veryslow', text: 'veryslow' },
|
||||
]}
|
||||
isEdited={!(ffmpegConfig.preset == savedConfig.preset)}
|
||||
/>
|
||||
|
||||
<SettingSelect
|
||||
label="AUDIO CODEC"
|
||||
desc="Opus is the highest quality option, but has lower compatibility with old devices or software."
|
||||
bind:value={ffmpegConfig.targetAudioCodec}
|
||||
options={[
|
||||
{ value: 'aac', text: 'aac' },
|
||||
{ value: 'mp3', text: 'mp3' },
|
||||
{ value: 'opus', text: 'opus' }
|
||||
]}
|
||||
name="acodec"
|
||||
isEdited={!(ffmpegConfig.targetAudioCodec == savedConfig.targetAudioCodec)}
|
||||
/>
|
||||
<SettingSelect
|
||||
label="AUDIO CODEC"
|
||||
desc="Opus is the highest quality option, but has lower compatibility with old devices or software."
|
||||
bind:value={ffmpegConfig.targetAudioCodec}
|
||||
options={[
|
||||
{ value: 'aac', text: 'aac' },
|
||||
{ value: 'mp3', text: 'mp3' },
|
||||
{ value: 'opus', text: 'opus' },
|
||||
]}
|
||||
name="acodec"
|
||||
isEdited={!(ffmpegConfig.targetAudioCodec == savedConfig.targetAudioCodec)}
|
||||
/>
|
||||
|
||||
<SettingSelect
|
||||
label="VIDEO CODEC"
|
||||
desc="VP9 has high efficiency and web compatibility, but takes longer to transcode. HEVC performs similarly, but has lower web compatibility. H.264 is widely compatible and quick to transcode, but produces much larger files."
|
||||
bind:value={ffmpegConfig.targetVideoCodec}
|
||||
options={[
|
||||
{ value: 'h264', text: 'h264' },
|
||||
{ value: 'hevc', text: 'hevc' },
|
||||
{ value: 'vp9', text: 'vp9' }
|
||||
]}
|
||||
name="vcodec"
|
||||
isEdited={!(ffmpegConfig.targetVideoCodec == savedConfig.targetVideoCodec)}
|
||||
/>
|
||||
<SettingSelect
|
||||
label="VIDEO CODEC"
|
||||
desc="VP9 has high efficiency and web compatibility, but takes longer to transcode. HEVC performs similarly, but has lower web compatibility. H.264 is widely compatible and quick to transcode, but produces much larger files."
|
||||
bind:value={ffmpegConfig.targetVideoCodec}
|
||||
options={[
|
||||
{ value: 'h264', text: 'h264' },
|
||||
{ value: 'hevc', text: 'hevc' },
|
||||
{ value: 'vp9', text: 'vp9' },
|
||||
]}
|
||||
name="vcodec"
|
||||
isEdited={!(ffmpegConfig.targetVideoCodec == savedConfig.targetVideoCodec)}
|
||||
/>
|
||||
|
||||
<SettingSelect
|
||||
label="TARGET RESOLUTION"
|
||||
desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
|
||||
bind:value={ffmpegConfig.targetResolution}
|
||||
options={[
|
||||
{ value: '2160', text: '4k' },
|
||||
{ value: '1440', text: '1440p' },
|
||||
{ value: '1080', text: '1080p' },
|
||||
{ value: '720', text: '720p' },
|
||||
{ value: '480', text: '480p' },
|
||||
{ value: 'original', text: 'original' }
|
||||
]}
|
||||
name="resolution"
|
||||
isEdited={!(ffmpegConfig.targetResolution == savedConfig.targetResolution)}
|
||||
/>
|
||||
<SettingSelect
|
||||
label="TARGET RESOLUTION"
|
||||
desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
|
||||
bind:value={ffmpegConfig.targetResolution}
|
||||
options={[
|
||||
{ value: '2160', text: '4k' },
|
||||
{ value: '1440', text: '1440p' },
|
||||
{ value: '1080', text: '1080p' },
|
||||
{ value: '720', text: '720p' },
|
||||
{ value: '480', text: '480p' },
|
||||
{ value: 'original', text: 'original' },
|
||||
]}
|
||||
name="resolution"
|
||||
isEdited={!(ffmpegConfig.targetResolution == savedConfig.targetResolution)}
|
||||
/>
|
||||
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="MAX BITRATE"
|
||||
desc="Setting a max bitrate can make file sizes more predictable at a minor cost to quality. At 720p, typical values are 2600k for VP9 or HEVC, or 4500k for H.264. Disabled if set to 0."
|
||||
bind:value={ffmpegConfig.maxBitrate}
|
||||
isEdited={!(ffmpegConfig.maxBitrate == savedConfig.maxBitrate)}
|
||||
/>
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="MAX BITRATE"
|
||||
desc="Setting a max bitrate can make file sizes more predictable at a minor cost to quality. At 720p, typical values are 2600k for VP9 or HEVC, or 4500k for H.264. Disabled if set to 0."
|
||||
bind:value={ffmpegConfig.maxBitrate}
|
||||
isEdited={!(ffmpegConfig.maxBitrate == savedConfig.maxBitrate)}
|
||||
/>
|
||||
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.NUMBER}
|
||||
label="THREADS"
|
||||
desc="Higher values lead to faster encoding, but leave less room for the server to process other tasks while active. This value should not be more than the number of CPU cores. Maximizes utilization if set to 0."
|
||||
bind:value={ffmpegConfig.threads}
|
||||
isEdited={!(ffmpegConfig.threads == savedConfig.threads)}
|
||||
/>
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.NUMBER}
|
||||
label="THREADS"
|
||||
desc="Higher values lead to faster encoding, but leave less room for the server to process other tasks while active. This value should not be more than the number of CPU cores. Maximizes utilization if set to 0."
|
||||
bind:value={ffmpegConfig.threads}
|
||||
isEdited={!(ffmpegConfig.threads == savedConfig.threads)}
|
||||
/>
|
||||
|
||||
<SettingSelect
|
||||
label="TRANSCODE"
|
||||
desc="Policy for when a video should be transcoded."
|
||||
bind:value={ffmpegConfig.transcode}
|
||||
name="transcode"
|
||||
options={[
|
||||
{ value: SystemConfigFFmpegDtoTranscodeEnum.All, text: 'All videos' },
|
||||
{
|
||||
value: SystemConfigFFmpegDtoTranscodeEnum.Optimal,
|
||||
text: 'Videos higher than target resolution or not in the desired format'
|
||||
},
|
||||
{
|
||||
value: SystemConfigFFmpegDtoTranscodeEnum.Required,
|
||||
text: 'Only videos not in the desired format'
|
||||
},
|
||||
{
|
||||
value: SystemConfigFFmpegDtoTranscodeEnum.Disabled,
|
||||
text: "Don't transcode any videos, may break playback on some clients"
|
||||
}
|
||||
]}
|
||||
isEdited={!(ffmpegConfig.transcode == savedConfig.transcode)}
|
||||
/>
|
||||
<SettingSelect
|
||||
label="TRANSCODE"
|
||||
desc="Policy for when a video should be transcoded."
|
||||
bind:value={ffmpegConfig.transcode}
|
||||
name="transcode"
|
||||
options={[
|
||||
{ value: SystemConfigFFmpegDtoTranscodeEnum.All, text: 'All videos' },
|
||||
{
|
||||
value: SystemConfigFFmpegDtoTranscodeEnum.Optimal,
|
||||
text: 'Videos higher than target resolution or not in the desired format',
|
||||
},
|
||||
{
|
||||
value: SystemConfigFFmpegDtoTranscodeEnum.Required,
|
||||
text: 'Only videos not in the desired format',
|
||||
},
|
||||
{
|
||||
value: SystemConfigFFmpegDtoTranscodeEnum.Disabled,
|
||||
text: "Don't transcode any videos, may break playback on some clients",
|
||||
},
|
||||
]}
|
||||
isEdited={!(ffmpegConfig.transcode == savedConfig.transcode)}
|
||||
/>
|
||||
|
||||
<SettingSwitch
|
||||
title="TWO-PASS ENCODING"
|
||||
subtitle="Transcode in two passes to produce better encoded videos. When max bitrate is enabled (required for it to work with H.264 and HEVC), this mode uses a bitrate range based on the max bitrate and ignores CRF. For VP9, CRF can be used if max bitrate is disabled."
|
||||
bind:checked={ffmpegConfig.twoPass}
|
||||
isEdited={!(ffmpegConfig.twoPass === savedConfig.twoPass)}
|
||||
/>
|
||||
</div>
|
||||
<SettingSwitch
|
||||
title="TWO-PASS ENCODING"
|
||||
subtitle="Transcode in two passes to produce better encoded videos. When max bitrate is enabled (required for it to work with H.264 and HEVC), this mode uses a bitrate range based on the max bitrate and ignores CRF. For VP9, CRF can be used if max bitrate is disabled."
|
||||
bind:checked={ffmpegConfig.twoPass}
|
||||
isEdited={!(ffmpegConfig.twoPass === savedConfig.twoPass)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ml-4">
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/await}
|
||||
<div class="ml-4">
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,103 +1,101 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { api, JobName, SystemConfigJobDto } from '@api';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { handleError } from '../../../../utils/handle-error';
|
||||
import SettingButtonsRow from '../setting-buttons-row.svelte';
|
||||
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { api, JobName, SystemConfigJobDto } from '@api';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { handleError } from '../../../../utils/handle-error';
|
||||
import SettingButtonsRow from '../setting-buttons-row.svelte';
|
||||
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
|
||||
|
||||
export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
|
||||
export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
|
||||
|
||||
let savedConfig: SystemConfigJobDto;
|
||||
let defaultConfig: SystemConfigJobDto;
|
||||
let savedConfig: SystemConfigJobDto;
|
||||
let defaultConfig: SystemConfigJobDto;
|
||||
|
||||
const ignoredJobs = [JobName.BackgroundTask, JobName.Search] as JobName[];
|
||||
const jobNames = Object.values(JobName).filter(
|
||||
(jobName) => !ignoredJobs.includes(jobName as JobName)
|
||||
);
|
||||
const ignoredJobs = [JobName.BackgroundTask, JobName.Search] as JobName[];
|
||||
const jobNames = Object.values(JobName).filter((jobName) => !ignoredJobs.includes(jobName as JobName));
|
||||
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.job),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.job)
|
||||
]);
|
||||
}
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.job),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.job),
|
||||
]);
|
||||
}
|
||||
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: configs } = await api.systemConfigApi.getConfig();
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: configs } = await api.systemConfigApi.getConfig();
|
||||
|
||||
const result = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...configs,
|
||||
job: jobConfig
|
||||
}
|
||||
});
|
||||
const result = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...configs,
|
||||
job: jobConfig,
|
||||
},
|
||||
});
|
||||
|
||||
jobConfig = { ...result.data.job };
|
||||
savedConfig = { ...result.data.job };
|
||||
jobConfig = { ...result.data.job };
|
||||
savedConfig = { ...result.data.job };
|
||||
|
||||
notificationController.show({ message: 'Job settings saved', type: NotificationType.Info });
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to save settings');
|
||||
}
|
||||
}
|
||||
notificationController.show({ message: 'Job settings saved', type: NotificationType.Info });
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to save settings');
|
||||
}
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
|
||||
jobConfig = { ...resetConfig.job };
|
||||
savedConfig = { ...resetConfig.job };
|
||||
jobConfig = { ...resetConfig.job };
|
||||
savedConfig = { ...resetConfig.job };
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset Job settings to the recent saved settings',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset Job settings to the recent saved settings',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
|
||||
async function resetToDefault() {
|
||||
const { data: configs } = await api.systemConfigApi.getDefaults();
|
||||
async function resetToDefault() {
|
||||
const { data: configs } = await api.systemConfigApi.getDefaults();
|
||||
|
||||
jobConfig = { ...configs.job };
|
||||
defaultConfig = { ...configs.job };
|
||||
jobConfig = { ...configs.job };
|
||||
defaultConfig = { ...configs.job };
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset Job settings to default',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset Job settings to default',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#await getConfigs() then}
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault>
|
||||
{#each jobNames as jobName}
|
||||
<div class="flex flex-col gap-4 ml-4 mt-4">
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.NUMBER}
|
||||
label="{api.getJobName(jobName)} Concurrency"
|
||||
desc=""
|
||||
bind:value={jobConfig[jobName].concurrency}
|
||||
required={true}
|
||||
isEdited={!(jobConfig[jobName].concurrency == savedConfig[jobName].concurrency)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
{#await getConfigs() then}
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault>
|
||||
{#each jobNames as jobName}
|
||||
<div class="flex flex-col gap-4 ml-4 mt-4">
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.NUMBER}
|
||||
label="{api.getJobName(jobName)} Concurrency"
|
||||
desc=""
|
||||
bind:value={jobConfig[jobName].concurrency}
|
||||
required={true}
|
||||
isEdited={!(jobConfig[jobName].concurrency == savedConfig[jobName].concurrency)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="ml-4">
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/await}
|
||||
<div class="ml-4">
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,212 +1,209 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, SystemConfigOAuthDto } from '@api';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
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 {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, SystemConfigOAuthDto } from '@api';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
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';
|
||||
|
||||
export let oauthConfig: SystemConfigOAuthDto;
|
||||
export let oauthConfig: SystemConfigOAuthDto;
|
||||
|
||||
let savedConfig: SystemConfigOAuthDto;
|
||||
let defaultConfig: SystemConfigOAuthDto;
|
||||
let savedConfig: SystemConfigOAuthDto;
|
||||
let defaultConfig: SystemConfigOAuthDto;
|
||||
|
||||
const handleToggleOverride = () => {
|
||||
// click runs before bind
|
||||
const previouslyEnabled = oauthConfig.mobileOverrideEnabled;
|
||||
if (!previouslyEnabled && !oauthConfig.mobileRedirectUri) {
|
||||
oauthConfig.mobileRedirectUri = window.location.origin + '/api/oauth/mobile-redirect';
|
||||
}
|
||||
};
|
||||
const handleToggleOverride = () => {
|
||||
// click runs before bind
|
||||
const previouslyEnabled = oauthConfig.mobileOverrideEnabled;
|
||||
if (!previouslyEnabled && !oauthConfig.mobileRedirectUri) {
|
||||
oauthConfig.mobileRedirectUri = window.location.origin + '/api/oauth/mobile-redirect';
|
||||
}
|
||||
};
|
||||
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.oauth),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.oauth)
|
||||
]);
|
||||
}
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.oauth),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.oauth),
|
||||
]);
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
|
||||
oauthConfig = { ...resetConfig.oauth };
|
||||
savedConfig = { ...resetConfig.oauth };
|
||||
oauthConfig = { ...resetConfig.oauth };
|
||||
savedConfig = { ...resetConfig.oauth };
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset OAuth settings to the last saved settings',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset OAuth settings to the last saved settings',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
|
||||
let isConfirmOpen = false;
|
||||
let handleConfirm: (value: boolean) => void;
|
||||
let isConfirmOpen = false;
|
||||
let handleConfirm: (value: boolean) => void;
|
||||
|
||||
const openConfirmModal = () => {
|
||||
return new Promise((resolve) => {
|
||||
handleConfirm = (value: boolean) => {
|
||||
isConfirmOpen = false;
|
||||
resolve(value);
|
||||
};
|
||||
isConfirmOpen = true;
|
||||
});
|
||||
};
|
||||
const openConfirmModal = () => {
|
||||
return new Promise((resolve) => {
|
||||
handleConfirm = (value: boolean) => {
|
||||
isConfirmOpen = false;
|
||||
resolve(value);
|
||||
};
|
||||
isConfirmOpen = true;
|
||||
});
|
||||
};
|
||||
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: current } = await api.systemConfigApi.getConfig();
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: current } = await api.systemConfigApi.getConfig();
|
||||
|
||||
if (!current.passwordLogin.enabled && current.oauth.enabled && !oauthConfig.enabled) {
|
||||
const confirmed = await openConfirmModal();
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!current.passwordLogin.enabled && current.oauth.enabled && !oauthConfig.enabled) {
|
||||
const confirmed = await openConfirmModal();
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!oauthConfig.mobileOverrideEnabled) {
|
||||
oauthConfig.mobileRedirectUri = '';
|
||||
}
|
||||
if (!oauthConfig.mobileOverrideEnabled) {
|
||||
oauthConfig.mobileRedirectUri = '';
|
||||
}
|
||||
|
||||
const { data: updated } = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...current,
|
||||
oauth: oauthConfig
|
||||
}
|
||||
});
|
||||
const { data: updated } = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...current,
|
||||
oauth: oauthConfig,
|
||||
},
|
||||
});
|
||||
|
||||
oauthConfig = { ...updated.oauth };
|
||||
savedConfig = { ...updated.oauth };
|
||||
oauthConfig = { ...updated.oauth };
|
||||
savedConfig = { ...updated.oauth };
|
||||
|
||||
notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to save OAuth settings');
|
||||
}
|
||||
}
|
||||
notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to save OAuth settings');
|
||||
}
|
||||
}
|
||||
|
||||
async function resetToDefault() {
|
||||
const { data: defaultConfig } = await api.systemConfigApi.getDefaults();
|
||||
async function resetToDefault() {
|
||||
const { data: defaultConfig } = await api.systemConfigApi.getDefaults();
|
||||
|
||||
oauthConfig = { ...defaultConfig.oauth };
|
||||
oauthConfig = { ...defaultConfig.oauth };
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset OAuth settings to default',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset OAuth settings to default',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isConfirmOpen}
|
||||
<ConfirmDisableLogin
|
||||
on:cancel={() => handleConfirm(false)}
|
||||
on:confirm={() => handleConfirm(true)}
|
||||
/>
|
||||
<ConfirmDisableLogin on:cancel={() => handleConfirm(false)} on:confirm={() => handleConfirm(true)} />
|
||||
{/if}
|
||||
|
||||
<div class="mt-2">
|
||||
{#await getConfigs() then}
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault class="flex flex-col mx-4 gap-4 py-4">
|
||||
<p class="text-sm dark:text-immich-dark-fg">
|
||||
For more details about this feature, refer to the <a
|
||||
href="http://immich.app/docs/administration/oauth#mobile-redirect-uri"
|
||||
class="underline"
|
||||
target="_blank"
|
||||
rel="noreferrer">docs</a
|
||||
>.
|
||||
</p>
|
||||
{#await getConfigs() then}
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault class="flex flex-col mx-4 gap-4 py-4">
|
||||
<p class="text-sm dark:text-immich-dark-fg">
|
||||
For more details about this feature, refer to the <a
|
||||
href="http://immich.app/docs/administration/oauth#mobile-redirect-uri"
|
||||
class="underline"
|
||||
target="_blank"
|
||||
rel="noreferrer">docs</a
|
||||
>.
|
||||
</p>
|
||||
|
||||
<SettingSwitch title="ENABLE" bind:checked={oauthConfig.enabled} />
|
||||
<hr />
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="ISSUER URL"
|
||||
bind:value={oauthConfig.issuerUrl}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.issuerUrl == savedConfig.issuerUrl)}
|
||||
/>
|
||||
<SettingSwitch title="ENABLE" bind:checked={oauthConfig.enabled} />
|
||||
<hr />
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="ISSUER URL"
|
||||
bind:value={oauthConfig.issuerUrl}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.issuerUrl == savedConfig.issuerUrl)}
|
||||
/>
|
||||
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="CLIENT ID"
|
||||
bind:value={oauthConfig.clientId}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.clientId == savedConfig.clientId)}
|
||||
/>
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="CLIENT ID"
|
||||
bind:value={oauthConfig.clientId}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.clientId == savedConfig.clientId)}
|
||||
/>
|
||||
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="CLIENT SECRET"
|
||||
bind:value={oauthConfig.clientSecret}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.clientSecret == savedConfig.clientSecret)}
|
||||
/>
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="CLIENT SECRET"
|
||||
bind:value={oauthConfig.clientSecret}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.clientSecret == savedConfig.clientSecret)}
|
||||
/>
|
||||
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="SCOPE"
|
||||
bind:value={oauthConfig.scope}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.scope == savedConfig.scope)}
|
||||
/>
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="SCOPE"
|
||||
bind:value={oauthConfig.scope}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.scope == savedConfig.scope)}
|
||||
/>
|
||||
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="BUTTON TEXT"
|
||||
bind:value={oauthConfig.buttonText}
|
||||
required={false}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.buttonText == savedConfig.buttonText)}
|
||||
/>
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="BUTTON TEXT"
|
||||
bind:value={oauthConfig.buttonText}
|
||||
required={false}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.buttonText == savedConfig.buttonText)}
|
||||
/>
|
||||
|
||||
<SettingSwitch
|
||||
title="AUTO REGISTER"
|
||||
subtitle="Automatically register new users after signing in with OAuth"
|
||||
bind:checked={oauthConfig.autoRegister}
|
||||
disabled={!oauthConfig.enabled}
|
||||
/>
|
||||
<SettingSwitch
|
||||
title="AUTO REGISTER"
|
||||
subtitle="Automatically register new users after signing in with OAuth"
|
||||
bind:checked={oauthConfig.autoRegister}
|
||||
disabled={!oauthConfig.enabled}
|
||||
/>
|
||||
|
||||
<SettingSwitch
|
||||
title="AUTO LAUNCH"
|
||||
subtitle="Start the OAuth login flow automatically upon navigating to the login page"
|
||||
disabled={!oauthConfig.enabled}
|
||||
bind:checked={oauthConfig.autoLaunch}
|
||||
/>
|
||||
<SettingSwitch
|
||||
title="AUTO LAUNCH"
|
||||
subtitle="Start the OAuth login flow automatically upon navigating to the login page"
|
||||
disabled={!oauthConfig.enabled}
|
||||
bind:checked={oauthConfig.autoLaunch}
|
||||
/>
|
||||
|
||||
<SettingSwitch
|
||||
title="MOBILE REDIRECT URI OVERRIDE"
|
||||
subtitle="Enable when `app.immich:/` is an invalid redirect URI."
|
||||
disabled={!oauthConfig.enabled}
|
||||
on:click={() => handleToggleOverride()}
|
||||
bind:checked={oauthConfig.mobileOverrideEnabled}
|
||||
/>
|
||||
<SettingSwitch
|
||||
title="MOBILE REDIRECT URI OVERRIDE"
|
||||
subtitle="Enable when `app.immich:/` is an invalid redirect URI."
|
||||
disabled={!oauthConfig.enabled}
|
||||
on:click={() => handleToggleOverride()}
|
||||
bind:checked={oauthConfig.mobileOverrideEnabled}
|
||||
/>
|
||||
|
||||
{#if oauthConfig.mobileOverrideEnabled}
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="MOBILE REDIRECT URI"
|
||||
bind:value={oauthConfig.mobileRedirectUri}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.mobileRedirectUri == savedConfig.mobileRedirectUri)}
|
||||
/>
|
||||
{/if}
|
||||
{#if oauthConfig.mobileOverrideEnabled}
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="MOBILE REDIRECT URI"
|
||||
bind:value={oauthConfig.mobileRedirectUri}
|
||||
required={true}
|
||||
disabled={!oauthConfig.enabled}
|
||||
isEdited={!(oauthConfig.mobileRedirectUri == savedConfig.mobileRedirectUri)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
{/await}
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,121 +1,118 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, SystemConfigPasswordLoginDto } from '@api';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
import ConfirmDisableLogin from '../confirm-disable-login.svelte';
|
||||
import SettingButtonsRow from '../setting-buttons-row.svelte';
|
||||
import SettingSwitch from '../setting-switch.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, SystemConfigPasswordLoginDto } from '@api';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { fade } from 'svelte/transition';
|
||||
import ConfirmDisableLogin from '../confirm-disable-login.svelte';
|
||||
import SettingButtonsRow from '../setting-buttons-row.svelte';
|
||||
import SettingSwitch from '../setting-switch.svelte';
|
||||
|
||||
export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
|
||||
export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
|
||||
|
||||
let savedConfig: SystemConfigPasswordLoginDto;
|
||||
let defaultConfig: SystemConfigPasswordLoginDto;
|
||||
let savedConfig: SystemConfigPasswordLoginDto;
|
||||
let defaultConfig: SystemConfigPasswordLoginDto;
|
||||
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.passwordLogin)
|
||||
]);
|
||||
}
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.passwordLogin),
|
||||
]);
|
||||
}
|
||||
|
||||
let isConfirmOpen = false;
|
||||
let handleConfirm: (value: boolean) => void;
|
||||
let isConfirmOpen = false;
|
||||
let handleConfirm: (value: boolean) => void;
|
||||
|
||||
const openConfirmModal = () => {
|
||||
return new Promise((resolve) => {
|
||||
handleConfirm = (value: boolean) => {
|
||||
isConfirmOpen = false;
|
||||
resolve(value);
|
||||
};
|
||||
isConfirmOpen = true;
|
||||
});
|
||||
};
|
||||
const openConfirmModal = () => {
|
||||
return new Promise((resolve) => {
|
||||
handleConfirm = (value: boolean) => {
|
||||
isConfirmOpen = false;
|
||||
resolve(value);
|
||||
};
|
||||
isConfirmOpen = true;
|
||||
});
|
||||
};
|
||||
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: current } = await api.systemConfigApi.getConfig();
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: current } = await api.systemConfigApi.getConfig();
|
||||
|
||||
if (!current.oauth.enabled && current.passwordLogin.enabled && !passwordLoginConfig.enabled) {
|
||||
const confirmed = await openConfirmModal();
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!current.oauth.enabled && current.passwordLogin.enabled && !passwordLoginConfig.enabled) {
|
||||
const confirmed = await openConfirmModal();
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const { data: updated } = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...current,
|
||||
passwordLogin: passwordLoginConfig
|
||||
}
|
||||
});
|
||||
const { data: updated } = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...current,
|
||||
passwordLogin: passwordLoginConfig,
|
||||
},
|
||||
});
|
||||
|
||||
passwordLoginConfig = { ...updated.passwordLogin };
|
||||
savedConfig = { ...updated.passwordLogin };
|
||||
passwordLoginConfig = { ...updated.passwordLogin };
|
||||
savedConfig = { ...updated.passwordLogin };
|
||||
|
||||
notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to save settings');
|
||||
}
|
||||
}
|
||||
notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to save settings');
|
||||
}
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
|
||||
passwordLoginConfig = { ...resetConfig.passwordLogin };
|
||||
savedConfig = { ...resetConfig.passwordLogin };
|
||||
passwordLoginConfig = { ...resetConfig.passwordLogin };
|
||||
savedConfig = { ...resetConfig.passwordLogin };
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset settings to the recent saved settings',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset settings to the recent saved settings',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
|
||||
async function resetToDefault() {
|
||||
const { data: configs } = await api.systemConfigApi.getDefaults();
|
||||
async function resetToDefault() {
|
||||
const { data: configs } = await api.systemConfigApi.getDefaults();
|
||||
|
||||
passwordLoginConfig = { ...configs.passwordLogin };
|
||||
defaultConfig = { ...configs.passwordLogin };
|
||||
passwordLoginConfig = { ...configs.passwordLogin };
|
||||
defaultConfig = { ...configs.passwordLogin };
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset password settings to default',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset password settings to default',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isConfirmOpen}
|
||||
<ConfirmDisableLogin
|
||||
on:cancel={() => handleConfirm(false)}
|
||||
on:confirm={() => handleConfirm(true)}
|
||||
/>
|
||||
<ConfirmDisableLogin on:cancel={() => handleConfirm(false)} on:confirm={() => handleConfirm(true)} />
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
{#await getConfigs() then}
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="flex flex-col gap-4 ml-4 mt-4">
|
||||
<div class="ml-4">
|
||||
<SettingSwitch
|
||||
title="ENABLED"
|
||||
subtitle="Login with email and password"
|
||||
bind:checked={passwordLoginConfig.enabled}
|
||||
/>
|
||||
{#await getConfigs() then}
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="flex flex-col gap-4 ml-4 mt-4">
|
||||
<div class="ml-4">
|
||||
<SettingSwitch
|
||||
title="ENABLED"
|
||||
subtitle="Login with email and password"
|
||||
bind:checked={passwordLoginConfig.enabled}
|
||||
/>
|
||||
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/await}
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,56 @@
|
|||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
export let title: string;
|
||||
export let subtitle = '';
|
||||
import { slide } from 'svelte/transition';
|
||||
export let title: string;
|
||||
export let subtitle = '';
|
||||
|
||||
export let isOpen = false;
|
||||
const toggle = () => (isOpen = !isOpen);
|
||||
export let isOpen = false;
|
||||
const toggle = () => (isOpen = !isOpen);
|
||||
</script>
|
||||
|
||||
<div class="border-b-[1px] border-gray-200 dark:border-gray-700 py-4">
|
||||
<div class="flex justify-between place-items-center">
|
||||
<div>
|
||||
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
{title}
|
||||
</h2>
|
||||
<div class="flex justify-between place-items-center">
|
||||
<div>
|
||||
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
|
||||
</div>
|
||||
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click={toggle}
|
||||
aria-expanded={isOpen}
|
||||
class="immich-circle-icon-button hover:bg-immich-primary/10 dark:text-immich-dark-fg hover:dark:bg-immich-dark-primary/20 rounded-full p-3 flex place-items-center place-content-center transition-all"
|
||||
>
|
||||
<svg
|
||||
style="tran"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
on:click={toggle}
|
||||
aria-expanded={isOpen}
|
||||
class="immich-circle-icon-button hover:bg-immich-primary/10 dark:text-immich-dark-fg hover:dark:bg-immich-dark-primary/20 rounded-full p-3 flex place-items-center place-content-center transition-all"
|
||||
>
|
||||
<svg
|
||||
style="tran"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if isOpen}
|
||||
<ul transition:slide={{ duration: 250 }} class="mb-2 ml-4">
|
||||
<slot />
|
||||
</ul>
|
||||
{/if}
|
||||
{#if isOpen}
|
||||
<ul transition:slide={{ duration: 250 }} class="mb-2 ml-4">
|
||||
<slot />
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
transition: transform 0.2s ease-in;
|
||||
}
|
||||
svg {
|
||||
transition: transform 0.2s ease-in;
|
||||
}
|
||||
|
||||
[aria-expanded='true'] svg {
|
||||
transform: rotate(0.5turn);
|
||||
}
|
||||
[aria-expanded='true'] svg {
|
||||
transform: rotate(0.5turn);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
<script lang="ts">
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let showResetToDefault = true;
|
||||
export let showResetToDefault = true;
|
||||
</script>
|
||||
|
||||
<div class="flex justify-between gap-2 mt-8">
|
||||
<div class="left">
|
||||
{#if showResetToDefault}
|
||||
<button
|
||||
on:click={() => dispatch('reset-to-default')}
|
||||
class="text-sm dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75 text-immich-primary hover:text-immich-primary/75 font-medium bg-none"
|
||||
>
|
||||
Reset to default
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="left">
|
||||
{#if showResetToDefault}
|
||||
<button
|
||||
on:click={() => dispatch('reset-to-default')}
|
||||
class="text-sm dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75 text-immich-primary hover:text-immich-primary/75 font-medium bg-none"
|
||||
>
|
||||
Reset to default
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<Button size="sm" color="gray" on:click={() => dispatch('reset')}>Reset</Button>
|
||||
<Button size="sm" on:click={() => dispatch('save')}>Save</Button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Button size="sm" color="gray" on:click={() => dispatch('reset')}>Reset</Button>
|
||||
<Button size="sm" on:click={() => dispatch('save')}>Save</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,65 @@
|
|||
<script lang="ts" context="module">
|
||||
export enum SettingInputFieldType {
|
||||
EMAIL = 'email',
|
||||
TEXT = 'text',
|
||||
NUMBER = 'number',
|
||||
PASSWORD = 'password'
|
||||
}
|
||||
export enum SettingInputFieldType {
|
||||
EMAIL = 'email',
|
||||
TEXT = 'text',
|
||||
NUMBER = 'number',
|
||||
PASSWORD = 'password',
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let inputType: SettingInputFieldType;
|
||||
export let value: string | number;
|
||||
export let label = '';
|
||||
export let desc = '';
|
||||
export let required = false;
|
||||
export let disabled = false;
|
||||
export let isEdited = false;
|
||||
export let inputType: SettingInputFieldType;
|
||||
export let value: string | number;
|
||||
export let label = '';
|
||||
export let desc = '';
|
||||
export let required = false;
|
||||
export let disabled = false;
|
||||
export let isEdited = false;
|
||||
|
||||
const handleInput = (e: Event) => {
|
||||
value = (e.target as HTMLInputElement).value;
|
||||
if (inputType === SettingInputFieldType.NUMBER) {
|
||||
value = Number(value) || 0;
|
||||
}
|
||||
};
|
||||
const handleInput = (e: Event) => {
|
||||
value = (e.target as HTMLInputElement).value;
|
||||
if (inputType === SettingInputFieldType.NUMBER) {
|
||||
value = Number(value) || 0;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class={`flex place-items-center gap-1 h-[26px]`}>
|
||||
<label class={`immich-form-label text-sm`} for={label}>{label}</label>
|
||||
{#if required}
|
||||
<div class="text-red-400">*</div>
|
||||
{/if}
|
||||
<div class={`flex place-items-center gap-1 h-[26px]`}>
|
||||
<label class={`immich-form-label text-sm`} for={label}>{label}</label>
|
||||
{#if required}
|
||||
<div class="text-red-400">*</div>
|
||||
{/if}
|
||||
|
||||
{#if isEdited}
|
||||
<div
|
||||
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
||||
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
|
||||
>
|
||||
Unsaved change
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isEdited}
|
||||
<div
|
||||
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
||||
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
|
||||
>
|
||||
Unsaved change
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if desc}
|
||||
<p class="immich-form-label text-xs pb-2" id="{label}-desc">
|
||||
{desc}
|
||||
</p>
|
||||
{/if}
|
||||
{#if desc}
|
||||
<p class="immich-form-label text-xs pb-2" id="{label}-desc">
|
||||
{desc}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
class="immich-form-input pb-2 w-full"
|
||||
aria-describedby={desc ? `${label}-desc` : undefined}
|
||||
aria-labelledby="{label}-label"
|
||||
id={label}
|
||||
name={label}
|
||||
type={inputType}
|
||||
{required}
|
||||
{value}
|
||||
on:input={handleInput}
|
||||
{disabled}
|
||||
/>
|
||||
<input
|
||||
class="immich-form-input pb-2 w-full"
|
||||
aria-describedby={desc ? `${label}-desc` : undefined}
|
||||
aria-labelledby="{label}-label"
|
||||
id={label}
|
||||
name={label}
|
||||
type={inputType}
|
||||
{required}
|
||||
{value}
|
||||
on:input={handleInput}
|
||||
{disabled}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,49 @@
|
|||
<script lang="ts">
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let value: string;
|
||||
export let options: { value: string; text: string }[];
|
||||
export let label = '';
|
||||
export let desc = '';
|
||||
export let name = '';
|
||||
export let isEdited = false;
|
||||
export let value: string;
|
||||
export let options: { value: string; text: string }[];
|
||||
export let label = '';
|
||||
export let desc = '';
|
||||
export let name = '';
|
||||
export let isEdited = false;
|
||||
|
||||
const handleChange = (e: Event) => {
|
||||
value = (e.target as HTMLInputElement).value;
|
||||
};
|
||||
const handleChange = (e: Event) => {
|
||||
value = (e.target as HTMLInputElement).value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class={`flex place-items-center gap-1 h-[26px]`}>
|
||||
<label class={`immich-form-label text-sm`} for="{name}-select">{label}</label>
|
||||
<div class={`flex place-items-center gap-1 h-[26px]`}>
|
||||
<label class={`immich-form-label text-sm`} for="{name}-select">{label}</label>
|
||||
|
||||
{#if isEdited}
|
||||
<div
|
||||
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
||||
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
|
||||
>
|
||||
Unsaved change
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isEdited}
|
||||
<div
|
||||
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
||||
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
|
||||
>
|
||||
Unsaved change
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if desc}
|
||||
<p class="immich-form-label text-xs pb-2" id="{name}-desc">
|
||||
{desc}
|
||||
</p>
|
||||
{/if}
|
||||
{#if desc}
|
||||
<p class="immich-form-label text-xs pb-2" id="{name}-desc">
|
||||
{desc}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<select
|
||||
class="immich-form-input pb-2 w-full"
|
||||
aria-describedby={desc ? `${name}-desc` : undefined}
|
||||
{name}
|
||||
id="{name}-select"
|
||||
bind:value
|
||||
on:change={handleChange}
|
||||
>
|
||||
{#each options as option}
|
||||
<option value={option.value}>{option.text}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<select
|
||||
class="immich-form-input pb-2 w-full"
|
||||
aria-describedby={desc ? `${name}-desc` : undefined}
|
||||
{name}
|
||||
id="{name}-select"
|
||||
bind:value
|
||||
on:change={handleChange}
|
||||
>
|
||||
{#each options as option}
|
||||
<option value={option.value}>{option.text}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,96 +1,90 @@
|
|||
<script lang="ts">
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let title: string;
|
||||
export let subtitle = '';
|
||||
export let checked = false;
|
||||
export let disabled = false;
|
||||
export let isEdited = false;
|
||||
export let title: string;
|
||||
export let subtitle = '';
|
||||
export let checked = false;
|
||||
export let disabled = false;
|
||||
export let isEdited = false;
|
||||
</script>
|
||||
|
||||
<div class="flex justify-between place-items-center">
|
||||
<div>
|
||||
<div class="flex place-items-center gap-1 h-[26px]">
|
||||
<label class="immich-form-label text-sm" for={title}>
|
||||
{title}
|
||||
</label>
|
||||
{#if isEdited}
|
||||
<div
|
||||
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
||||
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
|
||||
>
|
||||
Unsaved change
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex place-items-center gap-1 h-[26px]">
|
||||
<label class="immich-form-label text-sm" for={title}>
|
||||
{title}
|
||||
</label>
|
||||
{#if isEdited}
|
||||
<div
|
||||
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
||||
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
|
||||
>
|
||||
Unsaved change
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
|
||||
</div>
|
||||
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
|
||||
</div>
|
||||
|
||||
<label class="relative inline-block flex-none w-[36px] h-[10px]">
|
||||
<input
|
||||
class="opacity-0 w-0 h-0 disabled::cursor-not-allowed"
|
||||
type="checkbox"
|
||||
bind:checked
|
||||
on:click
|
||||
{disabled}
|
||||
/>
|
||||
<label class="relative inline-block flex-none w-[36px] h-[10px]">
|
||||
<input class="opacity-0 w-0 h-0 disabled::cursor-not-allowed" type="checkbox" bind:checked on:click {disabled} />
|
||||
|
||||
{#if disabled}
|
||||
<span class="slider-disable" />
|
||||
{:else}
|
||||
<span class="slider" />
|
||||
{/if}
|
||||
</label>
|
||||
{#if disabled}
|
||||
<span class="slider-disable" />
|
||||
{:else}
|
||||
<span class="slider" />
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.slider,
|
||||
.slider-disable {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
.slider,
|
||||
.slider-disable {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
input:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.slider:before,
|
||||
.slider-disable:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: -4px;
|
||||
background-color: gray;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.slider:before,
|
||||
.slider-disable:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: -4px;
|
||||
background-color: gray;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider-disable {
|
||||
background-color: gray;
|
||||
}
|
||||
input:checked + .slider-disable {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #adcbfa;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: #adcbfa;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(18px);
|
||||
-ms-transform: translateX(18px);
|
||||
transform: translateX(18px);
|
||||
background-color: #4250af;
|
||||
}
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(18px);
|
||||
-ms-transform: translateX(18px);
|
||||
transform: translateX(18px);
|
||||
background-color: #4250af;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,241 +1,224 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
api,
|
||||
SystemConfigStorageTemplateDto,
|
||||
SystemConfigTemplateStorageOptionDto,
|
||||
UserResponseDto
|
||||
} from '@api';
|
||||
import * as luxon from 'luxon';
|
||||
import handlebar from 'handlebars';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import SupportedDatetimePanel from './supported-datetime-panel.svelte';
|
||||
import SupportedVariablesPanel from './supported-variables-panel.svelte';
|
||||
import SettingButtonsRow from '../setting-buttons-row.svelte';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
|
||||
import { api, SystemConfigStorageTemplateDto, SystemConfigTemplateStorageOptionDto, UserResponseDto } from '@api';
|
||||
import * as luxon from 'luxon';
|
||||
import handlebar from 'handlebars';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import SupportedDatetimePanel from './supported-datetime-panel.svelte';
|
||||
import SupportedVariablesPanel from './supported-variables-panel.svelte';
|
||||
import SettingButtonsRow from '../setting-buttons-row.svelte';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
|
||||
|
||||
export let storageConfig: SystemConfigStorageTemplateDto;
|
||||
export let user: UserResponseDto;
|
||||
export let storageConfig: SystemConfigStorageTemplateDto;
|
||||
export let user: UserResponseDto;
|
||||
|
||||
let savedConfig: SystemConfigStorageTemplateDto;
|
||||
let defaultConfig: SystemConfigStorageTemplateDto;
|
||||
let templateOptions: SystemConfigTemplateStorageOptionDto;
|
||||
let selectedPreset = '';
|
||||
let savedConfig: SystemConfigStorageTemplateDto;
|
||||
let defaultConfig: SystemConfigStorageTemplateDto;
|
||||
let templateOptions: SystemConfigTemplateStorageOptionDto;
|
||||
let selectedPreset = '';
|
||||
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig, templateOptions] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.storageTemplate),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.storageTemplate),
|
||||
api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data)
|
||||
]);
|
||||
async function getConfigs() {
|
||||
[savedConfig, defaultConfig, templateOptions] = await Promise.all([
|
||||
api.systemConfigApi.getConfig().then((res) => res.data.storageTemplate),
|
||||
api.systemConfigApi.getDefaults().then((res) => res.data.storageTemplate),
|
||||
api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data),
|
||||
]);
|
||||
|
||||
selectedPreset = savedConfig.template;
|
||||
}
|
||||
selectedPreset = savedConfig.template;
|
||||
}
|
||||
|
||||
const getSupportDateTimeFormat = async () => {
|
||||
const { data } = await api.systemConfigApi.getStorageTemplateOptions();
|
||||
return data;
|
||||
};
|
||||
const getSupportDateTimeFormat = async () => {
|
||||
const { data } = await api.systemConfigApi.getStorageTemplateOptions();
|
||||
return data;
|
||||
};
|
||||
|
||||
$: parsedTemplate = () => {
|
||||
try {
|
||||
return renderTemplate(storageConfig.template);
|
||||
} catch (error) {
|
||||
return 'error';
|
||||
}
|
||||
};
|
||||
$: parsedTemplate = () => {
|
||||
try {
|
||||
return renderTemplate(storageConfig.template);
|
||||
} catch (error) {
|
||||
return 'error';
|
||||
}
|
||||
};
|
||||
|
||||
const renderTemplate = (templateString: string) => {
|
||||
const template = handlebar.compile(templateString, {
|
||||
knownHelpers: undefined
|
||||
});
|
||||
const renderTemplate = (templateString: string) => {
|
||||
const template = handlebar.compile(templateString, {
|
||||
knownHelpers: undefined,
|
||||
});
|
||||
|
||||
const substitutions: Record<string, string> = {
|
||||
filename: 'IMAGE_56437',
|
||||
ext: 'jpg',
|
||||
filetype: 'IMG',
|
||||
filetypefull: 'IMAGE'
|
||||
};
|
||||
const substitutions: Record<string, string> = {
|
||||
filename: 'IMAGE_56437',
|
||||
ext: 'jpg',
|
||||
filetype: 'IMG',
|
||||
filetypefull: 'IMAGE',
|
||||
};
|
||||
|
||||
const dt = luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString());
|
||||
const dt = luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString());
|
||||
|
||||
const dateTokens = [
|
||||
...templateOptions.yearOptions,
|
||||
...templateOptions.monthOptions,
|
||||
...templateOptions.dayOptions,
|
||||
...templateOptions.hourOptions,
|
||||
...templateOptions.minuteOptions,
|
||||
...templateOptions.secondOptions
|
||||
];
|
||||
const dateTokens = [
|
||||
...templateOptions.yearOptions,
|
||||
...templateOptions.monthOptions,
|
||||
...templateOptions.dayOptions,
|
||||
...templateOptions.hourOptions,
|
||||
...templateOptions.minuteOptions,
|
||||
...templateOptions.secondOptions,
|
||||
];
|
||||
|
||||
for (const token of dateTokens) {
|
||||
substitutions[token] = dt.toFormat(token);
|
||||
}
|
||||
for (const token of dateTokens) {
|
||||
substitutions[token] = dt.toFormat(token);
|
||||
}
|
||||
|
||||
return template(substitutions);
|
||||
};
|
||||
return template(substitutions);
|
||||
};
|
||||
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
async function reset() {
|
||||
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
||||
|
||||
storageConfig.template = resetConfig.storageTemplate.template;
|
||||
savedConfig.template = resetConfig.storageTemplate.template;
|
||||
storageConfig.template = resetConfig.storageTemplate.template;
|
||||
savedConfig.template = resetConfig.storageTemplate.template;
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset storage template settings to the recent saved settings',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset storage template settings to the recent saved settings',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: currentConfig } = await api.systemConfigApi.getConfig();
|
||||
async function saveSetting() {
|
||||
try {
|
||||
const { data: currentConfig } = await api.systemConfigApi.getConfig();
|
||||
|
||||
const result = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...currentConfig,
|
||||
storageTemplate: storageConfig
|
||||
}
|
||||
});
|
||||
const result = await api.systemConfigApi.updateConfig({
|
||||
systemConfigDto: {
|
||||
...currentConfig,
|
||||
storageTemplate: storageConfig,
|
||||
},
|
||||
});
|
||||
|
||||
storageConfig.template = result.data.storageTemplate.template;
|
||||
savedConfig.template = result.data.storageTemplate.template;
|
||||
storageConfig.template = result.data.storageTemplate.template;
|
||||
savedConfig.template = result.data.storageTemplate.template;
|
||||
|
||||
notificationController.show({
|
||||
message: 'Storage template saved',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error [storage-template-settings] [saveSetting]', e);
|
||||
notificationController.show({
|
||||
message: 'Unable to save settings',
|
||||
type: NotificationType.Error
|
||||
});
|
||||
}
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Storage template saved',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error [storage-template-settings] [saveSetting]', e);
|
||||
notificationController.show({
|
||||
message: 'Unable to save settings',
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function resetToDefault() {
|
||||
const { data: defaultConfig } = await api.systemConfigApi.getDefaults();
|
||||
async function resetToDefault() {
|
||||
const { data: defaultConfig } = await api.systemConfigApi.getDefaults();
|
||||
|
||||
storageConfig.template = defaultConfig.storageTemplate.template;
|
||||
storageConfig.template = defaultConfig.storageTemplate.template;
|
||||
|
||||
notificationController.show({
|
||||
message: 'Reset storage template to default',
|
||||
type: NotificationType.Info
|
||||
});
|
||||
}
|
||||
notificationController.show({
|
||||
message: 'Reset storage template to default',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
|
||||
const handlePresetSelection = () => {
|
||||
storageConfig.template = selectedPreset;
|
||||
};
|
||||
const handlePresetSelection = () => {
|
||||
storageConfig.template = selectedPreset;
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="dark:text-immich-dark-fg">
|
||||
{#await getConfigs() then}
|
||||
<div id="directory-path-builder" class="m-4">
|
||||
<h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">
|
||||
Variables
|
||||
</h3>
|
||||
{#await getConfigs() then}
|
||||
<div id="directory-path-builder" class="m-4">
|
||||
<h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">Variables</h3>
|
||||
|
||||
<section class="support-date">
|
||||
{#await getSupportDateTimeFormat()}
|
||||
<LoadingSpinner />
|
||||
{:then options}
|
||||
<div transition:fade={{ duration: 200 }}>
|
||||
<SupportedDatetimePanel {options} />
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
<section class="support-date">
|
||||
{#await getSupportDateTimeFormat()}
|
||||
<LoadingSpinner />
|
||||
{:then options}
|
||||
<div transition:fade={{ duration: 200 }}>
|
||||
<SupportedDatetimePanel {options} />
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
<section class="support-date">
|
||||
<SupportedVariablesPanel />
|
||||
</section>
|
||||
<section class="support-date">
|
||||
<SupportedVariablesPanel />
|
||||
</section>
|
||||
|
||||
<div class="mt-4 flex flex-col">
|
||||
<h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">
|
||||
Template
|
||||
</h3>
|
||||
<div class="mt-4 flex flex-col">
|
||||
<h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">Template</h3>
|
||||
|
||||
<div class="text-xs my-2">
|
||||
<h4>PREVIEW</h4>
|
||||
</div>
|
||||
<div class="text-xs my-2">
|
||||
<h4>PREVIEW</h4>
|
||||
</div>
|
||||
|
||||
<p class="text-xs">
|
||||
Approximately path length limit : <span
|
||||
class="font-semibold text-immich-primary dark:text-immich-dark-primary"
|
||||
>{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
|
||||
>/260
|
||||
</p>
|
||||
<p class="text-xs">
|
||||
Approximately path length limit : <span
|
||||
class="font-semibold text-immich-primary dark:text-immich-dark-primary"
|
||||
>{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
|
||||
>/260
|
||||
</p>
|
||||
|
||||
<p class="text-xs">
|
||||
<code>{user.storageLabel || user.id}</code> is the user's Storage Label
|
||||
</p>
|
||||
<p class="text-xs">
|
||||
<code>{user.storageLabel || user.id}</code> is the user's Storage Label
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="text-xs p-4 bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg py-2 rounded-lg mt-2"
|
||||
>
|
||||
<span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
|
||||
>UPLOAD_LOCATION/{user.storageLabel || user.id}</span
|
||||
>/{parsedTemplate()}.jpg
|
||||
</p>
|
||||
<p class="text-xs p-4 bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg py-2 rounded-lg mt-2">
|
||||
<span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
|
||||
>UPLOAD_LOCATION/{user.storageLabel || user.id}</span
|
||||
>/{parsedTemplate()}.jpg
|
||||
</p>
|
||||
|
||||
<form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
|
||||
<div class="flex flex-col my-2">
|
||||
<label class="text-xs" for="presets">PRESET</label>
|
||||
<select
|
||||
class="text-sm bg-slate-200 p-2 rounded-lg mt-2 dark:bg-gray-600 hover:cursor-pointer"
|
||||
name="presets"
|
||||
id="preset-select"
|
||||
bind:value={selectedPreset}
|
||||
on:change={handlePresetSelection}
|
||||
>
|
||||
{#each templateOptions.presetOptions as preset}
|
||||
<option value={preset}>{renderTemplate(preset)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-2 align-bottom">
|
||||
<SettingInputField
|
||||
label="TEMPLATE"
|
||||
required
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
bind:value={storageConfig.template}
|
||||
isEdited={!(storageConfig.template === savedConfig.template)}
|
||||
/>
|
||||
<form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
|
||||
<div class="flex flex-col my-2">
|
||||
<label class="text-xs" for="presets">PRESET</label>
|
||||
<select
|
||||
class="text-sm bg-slate-200 p-2 rounded-lg mt-2 dark:bg-gray-600 hover:cursor-pointer"
|
||||
name="presets"
|
||||
id="preset-select"
|
||||
bind:value={selectedPreset}
|
||||
on:change={handlePresetSelection}
|
||||
>
|
||||
{#each templateOptions.presetOptions as preset}
|
||||
<option value={preset}>{renderTemplate(preset)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-2 align-bottom">
|
||||
<SettingInputField
|
||||
label="TEMPLATE"
|
||||
required
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
bind:value={storageConfig.template}
|
||||
isEdited={!(storageConfig.template === savedConfig.template)}
|
||||
/>
|
||||
|
||||
<div class="flex-0">
|
||||
<SettingInputField
|
||||
label="EXTENSION"
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
value={'.jpg'}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-0">
|
||||
<SettingInputField label="EXTENSION" inputType={SettingInputFieldType.TEXT} value={'.jpg'} disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="migration-info" class="text-sm mt-4">
|
||||
<p>
|
||||
Template changes will only apply to new assets. To retroactively apply the template to
|
||||
previously uploaded assets, run the <a
|
||||
href="/admin/jobs-status"
|
||||
class="text-immich-primary dark:text-immich-dark-primary">Storage Migration Job</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div id="migration-info" class="text-sm mt-4">
|
||||
<p>
|
||||
Template changes will only apply to new assets. To retroactively apply the template to previously uploaded
|
||||
assets, run the <a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
|
||||
>Storage Migration Job</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
<SettingButtonsRow
|
||||
on:reset={reset}
|
||||
on:save={saveSetting}
|
||||
on:reset-to-default={resetToDefault}
|
||||
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,78 +1,76 @@
|
|||
<script lang="ts">
|
||||
import type { SystemConfigTemplateStorageOptionDto } from '@api';
|
||||
import * as luxon from 'luxon';
|
||||
import type { SystemConfigTemplateStorageOptionDto } from '@api';
|
||||
import * as luxon from 'luxon';
|
||||
|
||||
export let options: SystemConfigTemplateStorageOptionDto;
|
||||
export let options: SystemConfigTemplateStorageOptionDto;
|
||||
|
||||
const getLuxonExample = (format: string) => {
|
||||
return luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString()).toFormat(
|
||||
format
|
||||
);
|
||||
};
|
||||
const getLuxonExample = (format: string) => {
|
||||
return luxon.DateTime.fromISO(new Date('2022-09-04T20:03:05.250').toISOString()).toFormat(format);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="text-xs mt-2">
|
||||
<h4>DATE & TIME</h4>
|
||||
<h4>DATE & TIME</h4>
|
||||
</div>
|
||||
|
||||
<div class="text-xs bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg p-4 mt-2 rounded-lg">
|
||||
<div class="mb-2 text-gray-600 dark:text-immich-dark-fg">
|
||||
<p>Asset's creation timestamp is used for the datetime information</p>
|
||||
<p>Sample time 2022-09-04T20:03:05.250</p>
|
||||
</div>
|
||||
<div class="flex gap-[50px]">
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">YEAR</p>
|
||||
<ul>
|
||||
{#each options.yearOptions as yearFormat}
|
||||
<li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-2 text-gray-600 dark:text-immich-dark-fg">
|
||||
<p>Asset's creation timestamp is used for the datetime information</p>
|
||||
<p>Sample time 2022-09-04T20:03:05.250</p>
|
||||
</div>
|
||||
<div class="flex gap-[50px]">
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">YEAR</p>
|
||||
<ul>
|
||||
{#each options.yearOptions as yearFormat}
|
||||
<li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">MONTH</p>
|
||||
<ul>
|
||||
{#each options.monthOptions as monthFormat}
|
||||
<li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">MONTH</p>
|
||||
<ul>
|
||||
{#each options.monthOptions as monthFormat}
|
||||
<li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">DAY</p>
|
||||
<ul>
|
||||
{#each options.dayOptions as dayFormat}
|
||||
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">DAY</p>
|
||||
<ul>
|
||||
{#each options.dayOptions as dayFormat}
|
||||
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">HOUR</p>
|
||||
<ul>
|
||||
{#each options.hourOptions as dayFormat}
|
||||
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">HOUR</p>
|
||||
<ul>
|
||||
{#each options.hourOptions as dayFormat}
|
||||
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">MINUTE</p>
|
||||
<ul>
|
||||
{#each options.minuteOptions as dayFormat}
|
||||
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">MINUTE</p>
|
||||
<ul>
|
||||
{#each options.minuteOptions as dayFormat}
|
||||
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">SECOND</p>
|
||||
<ul>
|
||||
{#each options.secondOptions as dayFormat}
|
||||
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">SECOND</p>
|
||||
<ul>
|
||||
{#each options.secondOptions as dayFormat}
|
||||
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
<div class="text-xs mt-4">
|
||||
<h4>OTHER VARIABLES</h4>
|
||||
<h4>OTHER VARIABLES</h4>
|
||||
</div>
|
||||
|
||||
<div class="text-xs bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg p-4 mt-2 rounded-lg">
|
||||
<div class="flex gap-[50px]">
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE NAME</p>
|
||||
<ul>
|
||||
<li>{`{{filename}}`}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex gap-[50px]">
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE NAME</p>
|
||||
<ul>
|
||||
<li>{`{{filename}}`}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE EXTENSION</p>
|
||||
<ul>
|
||||
<li>{`{{ext}}`}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE EXTENSION</p>
|
||||
<ul>
|
||||
<li>{`{{ext}}`}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE TYPE</p>
|
||||
<ul>
|
||||
<li>{`{{filetype}}`} - VID or IMG</li>
|
||||
<li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE TYPE</p>
|
||||
<ul>
|
||||
<li>{`{{filetype}}`} - VID or IMG</li>
|
||||
<li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue