mirror of https://github.com/immich-app/immich.git
feat: Edit metadata (#5066)
* chore: rebase and clean-up
* feat: sync description, add e2e tests
* feat: simplify web code
* chore: unit tests
* fix: linting
* Bug fix with the arrows key
* timezone typeahead filter
timezone typeahead filter
* small stlying
* format fix
* Bug fix in the map selection
Bug fix in the map selection
* Websocket basic
Websocket basic
* Update metadata visualisation through the websocket
* Update timeline
* fix merge
* fix web
* fix web
* maplibre system
* format fix
* format fix
* refactor: clean up
* Fix small bug in the hour/timezone
* Don't diplay modify for readOnly asset
* Add log in case of failure
* Formater + try/catch error
* Remove everything related to websocket
* Revert "Remove everything related to websocket"
This reverts commit 14bcb9e1e4.
* remove notification
* fix test
---------
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
pull/5405/head
YFrendo
GitHub
parent
b396e0eee3
commit
644e52b153
@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
import ChangeDate from '$lib/components/shared-components/change-date.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api } from '@api';
|
||||
import { DateTime } from 'luxon';
|
||||
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
|
||||
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
|
||||
export let menuItem = false;
|
||||
const { clearSelect, getOwnedAssets } = getAssetControlContext();
|
||||
|
||||
let isShowChangeDate = false;
|
||||
|
||||
const handleConfirm = async (dateTimeOriginal: string) => {
|
||||
isShowChangeDate = false;
|
||||
const ids = Array.from(getOwnedAssets())
|
||||
.filter((a) => !a.isExternal)
|
||||
.map((a) => a.id);
|
||||
|
||||
try {
|
||||
await api.assetApi.updateAssets({
|
||||
assetBulkUpdateDto: { ids, dateTimeOriginal },
|
||||
});
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to change date');
|
||||
}
|
||||
clearSelect();
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if menuItem}
|
||||
<MenuOption text="Change date" on:click={() => (isShowChangeDate = true)} />
|
||||
{/if}
|
||||
{#if isShowChangeDate}
|
||||
<ChangeDate
|
||||
initialDate={DateTime.now()}
|
||||
on:confirm={({ detail: date }) => handleConfirm(date)}
|
||||
on:cancel={() => (isShowChangeDate = false)}
|
||||
/>
|
||||
{/if}
|
||||
@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import { api } from '@api';
|
||||
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
|
||||
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
|
||||
import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
|
||||
import { handleError } from '../../../utils/handle-error';
|
||||
|
||||
export let menuItem = false;
|
||||
const { clearSelect, getOwnedAssets } = getAssetControlContext();
|
||||
|
||||
let isShowChangeLocation = false;
|
||||
|
||||
async function handleConfirm(point: { lng: number; lat: number }) {
|
||||
isShowChangeLocation = false;
|
||||
const ids = Array.from(getOwnedAssets())
|
||||
.filter((a) => !a.isExternal)
|
||||
.map((a) => a.id);
|
||||
|
||||
try {
|
||||
await api.assetApi.updateAssets({
|
||||
assetBulkUpdateDto: {
|
||||
ids,
|
||||
latitude: point.lat,
|
||||
longitude: point.lng,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to update location');
|
||||
}
|
||||
clearSelect();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if menuItem}
|
||||
<MenuOption text="Change location" on:click={() => (isShowChangeLocation = true)} />
|
||||
{/if}
|
||||
{#if isShowChangeLocation}
|
||||
<ChangeLocation
|
||||
on:confirm={({ detail: point }) => handleConfirm(point)}
|
||||
on:cancel={() => (isShowChangeLocation = false)}
|
||||
/>
|
||||
{/if}
|
||||
@ -0,0 +1,128 @@
|
||||
<script lang="ts" context="module">
|
||||
// eslint-disable-next-line @typescript-eslint/no-namespace
|
||||
declare namespace Intl {
|
||||
type Key = 'calendar' | 'collation' | 'currency' | 'numberingSystem' | 'timeZone' | 'unit';
|
||||
function supportedValuesOf(input: Key): string[];
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { DateTime } from 'luxon';
|
||||
import ConfirmDialogue from './confirm-dialogue.svelte';
|
||||
import Dropdown from '../elements/dropdown.svelte';
|
||||
export let initialDate: DateTime = DateTime.now();
|
||||
|
||||
interface ZoneOption {
|
||||
zone: string;
|
||||
offset: string;
|
||||
}
|
||||
|
||||
const timezones: ZoneOption[] = Intl.supportedValuesOf('timeZone').map((zone: string) => ({
|
||||
zone,
|
||||
offset: 'UTC' + DateTime.local({ zone }).toFormat('ZZ'),
|
||||
}));
|
||||
|
||||
const initialOption = timezones.find((item) => item.offset === 'UTC' + initialDate.toFormat('ZZ'));
|
||||
|
||||
let selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
|
||||
let selectedTimezone = initialOption?.offset || null;
|
||||
let disabled = false;
|
||||
|
||||
let searchQuery = '';
|
||||
let filteredTimezones: ZoneOption[] = timezones;
|
||||
|
||||
const updateSearchQuery = (event: Event) => {
|
||||
searchQuery = (event.target as HTMLInputElement).value;
|
||||
filterTimezones();
|
||||
};
|
||||
|
||||
const filterTimezones = () => {
|
||||
filteredTimezones = timezones.filter((timezone) => timezone.zone.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
};
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
cancel: void;
|
||||
confirm: string;
|
||||
}>();
|
||||
|
||||
const handleCancel = () => dispatch('cancel');
|
||||
const handleConfirm = () => {
|
||||
let date = DateTime.fromISO(selectedDate);
|
||||
if (selectedTimezone != null) {
|
||||
date = date.setZone(selectedTimezone, { keepLocalTime: true }); // Keep local time if not it's really confusing
|
||||
}
|
||||
|
||||
const value = date.toISO();
|
||||
if (value) {
|
||||
disabled = true;
|
||||
dispatch('confirm', value);
|
||||
}
|
||||
};
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
};
|
||||
let isDropdownOpen = false;
|
||||
|
||||
const openDropdown = () => {
|
||||
isDropdownOpen = true;
|
||||
};
|
||||
|
||||
const closeDropdown = () => {
|
||||
isDropdownOpen = false;
|
||||
};
|
||||
|
||||
const handleSelectTz = (item: ZoneOption) => {
|
||||
selectedTimezone = item.offset;
|
||||
closeDropdown();
|
||||
};
|
||||
</script>
|
||||
|
||||
<div role="presentation" on:keydown={handleKeydown}>
|
||||
<ConfirmDialogue
|
||||
confirmColor="primary"
|
||||
cancelColor="secondary"
|
||||
title="Change Date"
|
||||
prompt="Please select a new date:"
|
||||
{disabled}
|
||||
on:confirm={handleConfirm}
|
||||
on:cancel={handleCancel}
|
||||
>
|
||||
<div class="flex flex-col text-md px-4 py-5 text-center gap-2" slot="prompt">
|
||||
<div class="mt-2" />
|
||||
<div class="flex flex-col">
|
||||
<label for="datetime">Date and Time</label>
|
||||
<input
|
||||
class="immich-form-label text-sm mt-2 w-full text-black"
|
||||
id="datetime"
|
||||
type="datetime-local"
|
||||
bind:value={selectedDate}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<label for="timezone">Timezone</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
class="immich-form-label text-sm mt-2 w-full text-black"
|
||||
id="timezoneSearch"
|
||||
type="text"
|
||||
placeholder="Search timezone..."
|
||||
bind:value={searchQuery}
|
||||
on:input={updateSearchQuery}
|
||||
on:focus={openDropdown}
|
||||
/>
|
||||
<Dropdown
|
||||
selectedOption={initialOption}
|
||||
options={filteredTimezones}
|
||||
render={(item) => (item ? `${item.zone} (${item.offset})` : '(not selected)')}
|
||||
on:select={({ detail: item }) => handleSelectTz(item)}
|
||||
controlable={true}
|
||||
bind:showMenu={isDropdownOpen}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ConfirmDialogue>
|
||||
</div>
|
||||
@ -0,0 +1,60 @@
|
||||
<script lang="ts">
|
||||
import type { AssetResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ConfirmDialogue from './confirm-dialogue.svelte';
|
||||
import Map from './map/map.svelte';
|
||||
export const title = 'Change Location';
|
||||
export let asset: AssetResponseDto | undefined = undefined;
|
||||
|
||||
interface Point {
|
||||
lng: number;
|
||||
lat: number;
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
cancel: void;
|
||||
confirm: Point;
|
||||
}>();
|
||||
|
||||
$: lat = asset?.exifInfo?.latitude || 0;
|
||||
$: lng = asset?.exifInfo?.longitude || 0;
|
||||
$: zoom = lat && lng ? 15 : 1;
|
||||
|
||||
let point: Point | null = null;
|
||||
|
||||
const handleCancel = () => dispatch('cancel');
|
||||
|
||||
const handleSelect = (selected: Point) => {
|
||||
point = selected;
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!point) {
|
||||
dispatch('cancel');
|
||||
} else {
|
||||
dispatch('confirm', point);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<ConfirmDialogue
|
||||
confirmColor="primary"
|
||||
cancelColor="secondary"
|
||||
title="Change Location"
|
||||
on:confirm={handleConfirm}
|
||||
on:cancel={handleCancel}
|
||||
>
|
||||
<div slot="prompt" class="flex flex-col w-full h-full gap-2">
|
||||
<label for="datetime">Pick a location</label>
|
||||
<div class="h-[350px] min-h-[300px] w-full">
|
||||
<Map
|
||||
mapMarkers={lat && lng && asset ? [{ id: asset.id, lat, lon: lng }] : []}
|
||||
{zoom}
|
||||
center={lat && lng ? { lat, lng } : undefined}
|
||||
simplified={true}
|
||||
clickable={true}
|
||||
on:clickedPoint={({ detail: point }) => handleSelect(point)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ConfirmDialogue>
|
||||
@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { websocketStore } from '$lib/stores/websocket';
|
||||
import type { AssetStore } from '$lib/stores/assets.store';
|
||||
|
||||
export let assetStore: AssetStore | null;
|
||||
|
||||
websocketStore.onAssetUpdate.subscribe((asset) => {
|
||||
if (asset && asset.originalFileName && assetStore) {
|
||||
assetStore.updateAsset(asset, true);
|
||||
|
||||
assetStore.removeAsset(asset.id); // Update timeline
|
||||
assetStore.addAsset(asset);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue