forked from MapComplete/MapComplete
74 lines
2.6 KiB
Svelte
74 lines
2.6 KiB
Svelte
|
<script lang="ts">
|
||
|
|
|
||
|
|
import { Store } from "../../Logic/UIEventSource";
|
||
|
|
import type { OsmTags } from "../../Models/OsmFeature";
|
||
|
|
import type { SpecialVisualizationState } from "../SpecialVisualization";
|
||
|
|
import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch";
|
||
|
|
import ToSvelte from "../Base/ToSvelte.svelte";
|
||
|
|
import { AttributedImage } from "../Image/AttributedImage";
|
||
|
|
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders";
|
||
|
|
import LinkPicture from "../../Logic/Osm/Actions/LinkPicture";
|
||
|
|
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction";
|
||
|
|
import { Tag } from "../../Logic/Tags/Tag";
|
||
|
|
import { GeoOperations } from "../../Logic/GeoOperations";
|
||
|
|
import type { Feature } from "geojson";
|
||
|
|
import Translations from "../i18n/Translations";
|
||
|
|
import SpecialTranslation from "./TagRendering/SpecialTranslation.svelte";
|
||
|
|
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
|
||
|
|
|
||
|
|
export let tags: Store<OsmTags>;
|
||
|
|
export let lon: number;
|
||
|
|
export let lat: number;
|
||
|
|
export let state: SpecialVisualizationState;
|
||
|
|
export let image: P4CPicture;
|
||
|
|
export let feature: Feature;
|
||
|
|
export let layer: LayerConfig;
|
||
|
|
|
||
|
|
export let linkable = true;
|
||
|
|
let isLinked = false;
|
||
|
|
|
||
|
|
const t = Translations.t.image.nearby;
|
||
|
|
const c = [lon, lat];
|
||
|
|
let attributedImage = new AttributedImage({
|
||
|
|
url: image.thumbUrl ?? image.pictureUrl,
|
||
|
|
provider: AllImageProviders.byName(image.provider),
|
||
|
|
date: new Date(image.date)
|
||
|
|
});
|
||
|
|
let distance = Math.round(GeoOperations.distanceBetween([image.coordinates.lng, image.coordinates.lat], c));
|
||
|
|
$: {
|
||
|
|
const currentTags = tags.data;
|
||
|
|
const key = Object.keys(image.osmTags)[0];
|
||
|
|
const url = image.osmTags[key];
|
||
|
|
if (isLinked) {
|
||
|
|
const action = new LinkPicture(
|
||
|
|
currentTags.id,
|
||
|
|
key,
|
||
|
|
url,
|
||
|
|
currentTags,
|
||
|
|
{
|
||
|
|
theme: state.layout.id,
|
||
|
|
changeType: "link-image"
|
||
|
|
}
|
||
|
|
);
|
||
|
|
state.changes.applyAction(action);
|
||
|
|
} else {
|
||
|
|
for (const k in currentTags) {
|
||
|
|
const v = currentTags[k];
|
||
|
|
if (v === url) {
|
||
|
|
const action = new ChangeTagAction(currentTags.id, new Tag(k, ""), currentTags, { theme: state.layout.id, changeType: "remove-image" });
|
||
|
|
state.changes.applyAction(action);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<div class="flex flex-col w-fit shrink-0">
|
||
|
|
<ToSvelte construct={attributedImage.SetClass("h-48 w-fit")} />
|
||
|
|
{#if linkable}
|
||
|
|
<label>
|
||
|
|
<input bind:checked={isLinked} type="checkbox">
|
||
|
|
<SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
|
||
|
|
</label>
|
||
|
|
{/if}
|
||
|
|
</div>
|