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

chore(web): migration svelte 5 syntax (#13883)

Browse source
This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 • committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
Download patch file Download diff file Expand all files Collapse all files

48
web/src/lib/components/faces-page/person-side-panel.svelte
View file

@ -28,28 +28,32 @@
import { photoViewer } from '$lib/stores/assets.store';
import { t } from 'svelte-i18n';
export let assetId: string;
export let assetType: AssetTypeEnum;
export let onClose: () => void;
export let onRefresh: () => void;
interface Props {
assetId: string;
assetType: AssetTypeEnum;
onClose: () => void;
onRefresh: () => void;
}
let { assetId, assetType, onClose, onRefresh }: Props = $props();
// keep track of the changes
let peopleToCreate: string[] = [];
let assetFaceGenerated: string[] = [];
// faces
let peopleWithFaces: AssetFaceResponseDto[] = [];
let selectedPersonToReassign: Record<string, PersonResponseDto> = {};
let selectedPersonToCreate: Record<string, string> = {};
let editedFace: AssetFaceResponseDto;
let peopleWithFaces: AssetFaceResponseDto[] = $state([]);
let selectedPersonToReassign: Record<string, PersonResponseDto> = $state({});
let selectedPersonToCreate: Record<string, string> = $state({});
let editedFace: AssetFaceResponseDto | undefined = $state();
// loading spinners
let isShowLoadingDone = false;
let isShowLoadingPeople = false;
let isShowLoadingDone = $state(false);
let isShowLoadingPeople = $state(false);
// search people
let showSelectedFaces = false;
let allPeople: PersonResponseDto[] = [];
let showSelectedFaces = $state(false);
let allPeople: PersonResponseDto[] = $state([]);
// timers
let loaderLoadingDoneTimeout: ReturnType<typeof setTimeout>;
@ -152,14 +156,14 @@
};
const handleCreatePerson = (newFeaturePhoto: string | null) => {
if (newFeaturePhoto) {
if (newFeaturePhoto && editedFace) {
selectedPersonToCreate[editedFace.id] = newFeaturePhoto;
}
showSelectedFaces = false;
};
const handleReassignFace = (person: PersonResponseDto | null) => {
if (person) {
if (person && editedFace) {
selectedPersonToReassign[editedFace.id] = person;
}
showSelectedFaces = false;
@ -177,14 +181,14 @@
>
<div class="flex place-items-center justify-between gap-2">
<div class="flex items-center gap-2">
<CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} on:click={onClose} />
<CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} onclick={onClose} />
<p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">{$t('edit_faces')}</p>
</div>
{#if !isShowLoadingDone}
<button
type="button"
class="justify-self-end rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
on:click={() => handleEditFaces()}
onclick={() => handleEditFaces()}
>
{$t('done')}
</button>
@ -207,9 +211,9 @@
role="button"
tabindex={index}
class="absolute left-0 top-0 h-[90px] w-[90px] cursor-default"
on:focus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
on:mouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
on:mouseleave={() => ($boundingBoxesArray = [])}
onfocus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
onmouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
onmouseleave={() => ($boundingBoxesArray = [])}
>
<div class="relative">
{#if selectedPersonToCreate[face.id]}
@ -291,7 +295,7 @@
size="18"
padding="1"
class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
on:click={() => handleReset(face.id)}
onclick={() => handleReset(face.id)}
/>
{:else}
<CircleIconButton
@ -301,7 +305,7 @@
size="18"
padding="1"
class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
on:click={() => handleFacePicker(face)}
onclick={() => handleFacePicker(face)}
/>
{/if}
</div>
@ -322,7 +326,7 @@
</div>
</section>
{#if showSelectedFaces}
{#if showSelectedFaces && editedFace}
<AssignFaceSidePanel
{allPeople}
{editedFace}