|
@@ -4,23 +4,25 @@
|
|
|
NotificationType,
|
|
|
} from '$lib/components/shared-components/notification/notification';
|
|
|
import { handleError } from '$lib/utils/handle-error';
|
|
|
- import { api, SystemConfigMapDto } from '@api';
|
|
|
- import { isEqual } from 'lodash-es';
|
|
|
+ import { api, CitiesFile, SystemConfigDto } from '@api';
|
|
|
+ import { cloneDeep, isEqual } from 'lodash-es';
|
|
|
import { fade } from 'svelte/transition';
|
|
|
+ import SettingAccordion from '../setting-accordion.svelte';
|
|
|
import SettingButtonsRow from '../setting-buttons-row.svelte';
|
|
|
- import SettingSwitch from '../setting-switch.svelte';
|
|
|
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
|
|
|
+ import SettingSwitch from '../setting-switch.svelte';
|
|
|
+ import SettingSelect from '../setting-select.svelte';
|
|
|
|
|
|
- export let mapConfig: SystemConfigMapDto; // this is the config that is being edited
|
|
|
+ export let config: SystemConfigDto; // this is the config that is being edited
|
|
|
export let disabled = false;
|
|
|
|
|
|
- let savedConfig: SystemConfigMapDto;
|
|
|
- let defaultConfig: SystemConfigMapDto;
|
|
|
+ let savedConfig: SystemConfigDto;
|
|
|
+ let defaultConfig: SystemConfigDto;
|
|
|
|
|
|
- async function getConfigs() {
|
|
|
+ async function refreshConfig() {
|
|
|
[savedConfig, defaultConfig] = await Promise.all([
|
|
|
- api.systemConfigApi.getConfig().then((res) => res.data.map),
|
|
|
- api.systemConfigApi.getDefaults().then((res) => res.data.map),
|
|
|
+ api.systemConfigApi.getConfig().then((res) => res.data),
|
|
|
+ api.systemConfigApi.getDefaults().then((res) => res.data),
|
|
|
]);
|
|
|
}
|
|
|
|
|
@@ -28,11 +30,21 @@
|
|
|
try {
|
|
|
const { data: current } = await api.systemConfigApi.getConfig();
|
|
|
const { data: updated } = await api.systemConfigApi.updateConfig({
|
|
|
- systemConfigDto: { ...current, map: mapConfig },
|
|
|
+ systemConfigDto: {
|
|
|
+ ...current,
|
|
|
+ map: {
|
|
|
+ enabled: config.map.enabled,
|
|
|
+ tileUrl: config.map.tileUrl,
|
|
|
+ },
|
|
|
+ reverseGeocoding: {
|
|
|
+ enabled: config.reverseGeocoding.enabled,
|
|
|
+ citiesFileOverride: config.reverseGeocoding.citiesFileOverride,
|
|
|
+ },
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
- mapConfig = { ...updated.map };
|
|
|
- savedConfig = { ...updated.map };
|
|
|
+ config = cloneDeep(updated);
|
|
|
+ savedConfig = cloneDeep(updated);
|
|
|
|
|
|
notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
|
|
|
} catch (error) {
|
|
@@ -43,8 +55,8 @@
|
|
|
async function reset() {
|
|
|
const { data: resetConfig } = await api.systemConfigApi.getConfig();
|
|
|
|
|
|
- mapConfig = { ...resetConfig.map };
|
|
|
- savedConfig = { ...resetConfig.map };
|
|
|
+ config = cloneDeep(resetConfig);
|
|
|
+ savedConfig = cloneDeep(resetConfig);
|
|
|
|
|
|
notificationController.show({
|
|
|
message: 'Reset settings to the recent saved settings',
|
|
@@ -55,8 +67,8 @@
|
|
|
async function resetToDefault() {
|
|
|
const { data: configs } = await api.systemConfigApi.getDefaults();
|
|
|
|
|
|
- mapConfig = { ...configs.map };
|
|
|
- defaultConfig = { ...configs.map };
|
|
|
+ config = cloneDeep(configs);
|
|
|
+ defaultConfig = cloneDeep(configs);
|
|
|
|
|
|
notificationController.show({
|
|
|
message: 'Reset map settings to default',
|
|
@@ -65,30 +77,81 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<div>
|
|
|
- {#await getConfigs() then}
|
|
|
+<div class="mt-2">
|
|
|
+ {#await refreshConfig() then}
|
|
|
<div in:fade={{ duration: 500 }}>
|
|
|
<form autocomplete="off" on:submit|preventDefault>
|
|
|
- <div class="ml-4 mt-4 flex flex-col gap-4">
|
|
|
- <SettingSwitch title="ENABLED" {disabled} subtitle="Enable map features" bind:checked={mapConfig.enabled} />
|
|
|
-
|
|
|
- <hr />
|
|
|
-
|
|
|
- <SettingInputField
|
|
|
- inputType={SettingInputFieldType.TEXT}
|
|
|
- label="Tile URL"
|
|
|
- desc="URL to a leaflet compatible tile server"
|
|
|
- bind:value={mapConfig.tileUrl}
|
|
|
- required={true}
|
|
|
- disabled={disabled || !mapConfig.enabled}
|
|
|
- isEdited={mapConfig.tileUrl !== savedConfig.tileUrl}
|
|
|
- />
|
|
|
+ <div class="flex flex-col gap-4">
|
|
|
+ <SettingAccordion title="Map Settings" subtitle="Manage map settings">
|
|
|
+ <div class="ml-4 mt-4 flex flex-col gap-4">
|
|
|
+ <SettingSwitch
|
|
|
+ title="ENABLED"
|
|
|
+ {disabled}
|
|
|
+ subtitle="Enable map features"
|
|
|
+ bind:checked={config.map.enabled}
|
|
|
+ />
|
|
|
+
|
|
|
+ <hr />
|
|
|
+
|
|
|
+ <SettingInputField
|
|
|
+ inputType={SettingInputFieldType.TEXT}
|
|
|
+ label="Tile URL"
|
|
|
+ desc="URL to a leaflet compatible tile server"
|
|
|
+ bind:value={config.map.tileUrl}
|
|
|
+ required={true}
|
|
|
+ disabled={disabled || !config.map.enabled}
|
|
|
+ isEdited={config.map.tileUrl !== savedConfig.map.tileUrl}
|
|
|
+ />
|
|
|
+ </div></SettingAccordion
|
|
|
+ >
|
|
|
+
|
|
|
+ <SettingAccordion title="Reverse Geocoding Settings">
|
|
|
+ <svelte:fragment slot="subtitle">
|
|
|
+ <p class="text-sm dark:text-immich-dark-fg">
|
|
|
+ Manage <a
|
|
|
+ href="https://immich.app/docs/features/reverse-geocoding"
|
|
|
+ class="underline"
|
|
|
+ target="_blank"
|
|
|
+ rel="noreferrer">Reverse Geocoding</a
|
|
|
+ > settings
|
|
|
+ </p>
|
|
|
+ </svelte:fragment>
|
|
|
+ <div class="ml-4 mt-4 flex flex-col gap-4">
|
|
|
+ <SettingSwitch
|
|
|
+ title="ENABLED"
|
|
|
+ {disabled}
|
|
|
+ subtitle="Enable reverse geocoding"
|
|
|
+ bind:checked={config.reverseGeocoding.enabled}
|
|
|
+ />
|
|
|
+
|
|
|
+ <hr />
|
|
|
+
|
|
|
+ <SettingSelect
|
|
|
+ label="Precision"
|
|
|
+ desc="Set reverse geocoding precision"
|
|
|
+ name="reverse-geocoding-precision"
|
|
|
+ bind:value={config.reverseGeocoding.citiesFileOverride}
|
|
|
+ options={[
|
|
|
+ { value: CitiesFile.Cities500, text: 'Cities with more than 500 people' },
|
|
|
+ { value: CitiesFile.Cities1000, text: 'Cities with more than 1000 people' },
|
|
|
+ { value: CitiesFile.Cities5000, text: 'Cities with more than 5000 people' },
|
|
|
+ { value: CitiesFile.Cities15000, text: 'Cities with more than 15000 people' },
|
|
|
+ ]}
|
|
|
+ disabled={disabled || !config.reverseGeocoding.enabled}
|
|
|
+ isEdited={config.reverseGeocoding.citiesFileOverride !==
|
|
|
+ savedConfig.reverseGeocoding.citiesFileOverride}
|
|
|
+ />
|
|
|
+ </div></SettingAccordion
|
|
|
+ >
|
|
|
|
|
|
<SettingButtonsRow
|
|
|
on:reset={reset}
|
|
|
on:save={saveSetting}
|
|
|
on:reset-to-default={resetToDefault}
|
|
|
- showResetToDefault={!isEqual(savedConfig, defaultConfig)}
|
|
|
+ showResetToDefault={!isEqual(
|
|
|
+ { ...savedConfig.map, ...savedConfig.reverseGeocoding },
|
|
|
+ { ...defaultConfig.map, ...defaultConfig.reverseGeocoding },
|
|
|
+ )}
|
|
|
{disabled}
|
|
|
/>
|
|
|
</div>
|