mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor: map (#18143)
This commit is contained in:
Daniel Dietzler
GitHub
parent
09ced9a171
commit
a169fb6a79
7 changed files with 220 additions and 222 deletions
|
|
@ -130,6 +130,7 @@
|
|||
clickable={false}
|
||||
bind:mapMarkers
|
||||
onSelect={onViewAssets}
|
||||
showSettings={false}
|
||||
/>
|
||||
{/await}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -494,6 +494,7 @@
|
|||
},
|
||||
]}
|
||||
center={latlng}
|
||||
showSettings={false}
|
||||
zoom={12.5}
|
||||
simplified
|
||||
useLocationPin
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
<script lang="ts">
|
||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
||||
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
|
||||
import type { MapSettings } from '$lib/stores/preferences.store';
|
||||
import { Button, Field, Stack, Switch } from '@immich/ui';
|
||||
import { Duration } from 'luxon';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { fly } from 'svelte/transition';
|
||||
import DateInput from '../elements/date-input.svelte';
|
||||
|
||||
interface Props {
|
||||
settings: MapSettings;
|
||||
onClose: () => void;
|
||||
onSave: (settings: MapSettings) => void;
|
||||
}
|
||||
|
||||
let { settings: initialValues, onClose, onSave }: Props = $props();
|
||||
let settings = $state(initialValues);
|
||||
|
||||
let customDateRange = $state(!!settings.dateAfter || !!settings.dateBefore);
|
||||
|
||||
const onsubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
onSave(settings);
|
||||
};
|
||||
</script>
|
||||
|
||||
<form {onsubmit}>
|
||||
<FullScreenModal title={$t('map_settings')} {onClose}>
|
||||
<Stack gap={4}>
|
||||
<Field label={$t('allow_dark_mode')}>
|
||||
<Switch bind:checked={settings.allowDarkMode} />
|
||||
</Field>
|
||||
<Field label={$t('only_favorites')}>
|
||||
<Switch bind:checked={settings.onlyFavorites} />
|
||||
</Field>
|
||||
<Field label={$t('include_archived')}>
|
||||
<Switch bind:checked={settings.includeArchived} />
|
||||
</Field>
|
||||
<Field label={$t('include_shared_partner_assets')}>
|
||||
<Switch bind:checked={settings.withPartners} />
|
||||
</Field>
|
||||
<Field label={$t('include_shared_albums')}>
|
||||
<Switch bind:checked={settings.withSharedAlbums} />
|
||||
</Field>
|
||||
|
||||
{#if customDateRange}
|
||||
<div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between gap-8">
|
||||
<label class="immich-form-label shrink-0 text-sm" for="date-after">{$t('date_after')}</label>
|
||||
<DateInput
|
||||
class="immich-form-input w-40"
|
||||
type="date"
|
||||
id="date-after"
|
||||
max={settings.dateBefore}
|
||||
bind:value={settings.dateAfter}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-8">
|
||||
<label class="immich-form-label shrink-0 text-sm" for="date-before">{$t('date_before')}</label>
|
||||
<DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
|
||||
</div>
|
||||
<div class="flex justify-center text-xs">
|
||||
<Button
|
||||
color="primary"
|
||||
size="small"
|
||||
variant="ghost"
|
||||
onclick={() => {
|
||||
customDateRange = false;
|
||||
settings.dateAfter = '';
|
||||
settings.dateBefore = '';
|
||||
}}
|
||||
>
|
||||
{$t('remove_custom_date_range')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
|
||||
<SettingSelect
|
||||
label={$t('date_range')}
|
||||
name="date-range"
|
||||
bind:value={settings.relativeDate}
|
||||
options={[
|
||||
{
|
||||
value: '',
|
||||
text: $t('all'),
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ hours: 24 }).toISO() || '',
|
||||
text: $t('past_durations.hours', { values: { hours: 24 } }),
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ days: 7 }).toISO() || '',
|
||||
text: $t('past_durations.days', { values: { days: 7 } }),
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ days: 30 }).toISO() || '',
|
||||
text: $t('past_durations.days', { values: { days: 30 } }),
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ years: 1 }).toISO() || '',
|
||||
text: $t('past_durations.years', { values: { years: 1 } }),
|
||||
},
|
||||
{
|
||||
value: Duration.fromObject({ years: 3 }).toISO() || '',
|
||||
text: $t('past_durations.years', { values: { years: 3 } }),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div class="text-xs">
|
||||
<Button
|
||||
color="primary"
|
||||
size="small"
|
||||
variant="ghost"
|
||||
onclick={() => {
|
||||
customDateRange = true;
|
||||
settings.relativeDate = '';
|
||||
}}
|
||||
>
|
||||
{$t('use_custom_date_range')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Stack>
|
||||
|
||||
{#snippet stickyBottom()}
|
||||
<Button color="secondary" shape="round" fullWidth onclick={onClose}>{$t('cancel')}</Button>
|
||||
<Button type="submit" shape="round" fullWidth>{$t('save')}</Button>
|
||||
{/snippet}
|
||||
</FullScreenModal>
|
||||
</form>
|
||||
|
|
@ -190,6 +190,7 @@
|
|||
simplified={true}
|
||||
clickable={true}
|
||||
onClickPoint={(selected) => (point = selected)}
|
||||
showSettings={false}
|
||||
/>
|
||||
{/await}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,20 @@
|
|||
<script lang="ts">
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { Theme } from '$lib/constants';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import { themeManager } from '$lib/managers/theme-manager.svelte';
|
||||
import MapSettingsModal from '$lib/modals/MapSettingsModal.svelte';
|
||||
import { mapSettings } from '$lib/stores/preferences.store';
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
|
||||
import { type MapMarkerResponseDto } from '@immich/sdk';
|
||||
import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
|
||||
import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
|
||||
import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
|
||||
import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
|
||||
import { isEqual, omit } from 'lodash-es';
|
||||
import { DateTime, Duration } from 'luxon';
|
||||
import maplibregl, { GlobeControl, type GeoJSONSource, type LngLatLike } from 'maplibre-gl';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import {
|
||||
AttributionControl,
|
||||
|
|
@ -36,8 +41,8 @@
|
|||
} from 'svelte-maplibre';
|
||||
|
||||
interface Props {
|
||||
mapMarkers: MapMarkerResponseDto[];
|
||||
showSettingsModal?: boolean | undefined;
|
||||
mapMarkers?: MapMarkerResponseDto[];
|
||||
showSettings?: boolean;
|
||||
zoom?: number | undefined;
|
||||
center?: LngLatLike | undefined;
|
||||
hash?: boolean;
|
||||
|
|
@ -51,8 +56,8 @@
|
|||
}
|
||||
|
||||
let {
|
||||
mapMarkers = $bindable(),
|
||||
showSettingsModal = $bindable(undefined),
|
||||
mapMarkers = $bindable([]),
|
||||
showSettings = true,
|
||||
zoom = undefined,
|
||||
center = $bindable(undefined),
|
||||
hash = false,
|
||||
|
|
@ -67,6 +72,7 @@
|
|||
|
||||
let map: maplibregl.Map | undefined = $state();
|
||||
let marker: maplibregl.Marker | null = null;
|
||||
let abortController: AbortController;
|
||||
|
||||
const theme = $derived($mapSettings.allowDarkMode ? themeManager.value : Theme.LIGHT);
|
||||
const styleUrl = $derived(theme === Theme.DARK ? $serverConfig.mapDarkStyleUrl : $serverConfig.mapLightStyleUrl);
|
||||
|
|
@ -143,6 +149,72 @@
|
|||
};
|
||||
};
|
||||
|
||||
function getFileCreatedDates() {
|
||||
const { relativeDate, dateAfter, dateBefore } = $mapSettings;
|
||||
|
||||
if (relativeDate) {
|
||||
const duration = Duration.fromISO(relativeDate);
|
||||
return {
|
||||
fileCreatedAfter: duration.isValid ? DateTime.now().minus(duration).toISO() : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
return {
|
||||
fileCreatedAfter: dateAfter ? new Date(dateAfter).toISOString() : undefined,
|
||||
fileCreatedBefore: dateBefore ? new Date(dateBefore).toISOString() : undefined,
|
||||
};
|
||||
} catch {
|
||||
$mapSettings.dateAfter = '';
|
||||
$mapSettings.dateBefore = '';
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMapMarkers() {
|
||||
if (abortController) {
|
||||
abortController.abort();
|
||||
}
|
||||
abortController = new AbortController();
|
||||
|
||||
const { includeArchived, onlyFavorites, withPartners, withSharedAlbums } = $mapSettings;
|
||||
const { fileCreatedAfter, fileCreatedBefore } = getFileCreatedDates();
|
||||
|
||||
return await getMapMarkers(
|
||||
{
|
||||
isArchived: includeArchived && undefined,
|
||||
isFavorite: onlyFavorites || undefined,
|
||||
fileCreatedAfter: fileCreatedAfter || undefined,
|
||||
fileCreatedBefore,
|
||||
withPartners: withPartners || undefined,
|
||||
withSharedAlbums: withSharedAlbums || undefined,
|
||||
},
|
||||
{
|
||||
signal: abortController.signal,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const handleSettingsClick = async () => {
|
||||
const settings = await modalManager.open(MapSettingsModal, { settings: { ...$mapSettings } });
|
||||
if (settings) {
|
||||
const shouldUpdate = !isEqual(omit(settings, 'allowDarkMode'), omit($mapSettings, 'allowDarkMode'));
|
||||
$mapSettings = settings;
|
||||
|
||||
if (shouldUpdate) {
|
||||
mapMarkers = await loadMapMarkers();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
mapMarkers = await loadMapMarkers();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
abortController.abort();
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
map?.setStyle(styleUrl, {
|
||||
transformStyle: (previousStyle, nextStyle) => {
|
||||
|
|
@ -199,10 +271,10 @@
|
|||
<AttributionControl compact={false} />
|
||||
{/if}
|
||||
|
||||
{#if showSettingsModal !== undefined}
|
||||
{#if showSettings}
|
||||
<Control>
|
||||
<ControlGroup>
|
||||
<ControlButton onclick={() => (showSettingsModal = true)}><Icon path={mdiCog} size="100%" /></ControlButton>
|
||||
<ControlButton onclick={handleSettingsClick}><Icon path={mdiCog} size="100%" /></ControlButton>
|
||||
</ControlGroup>
|
||||
</Control>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue