MapComplete/src/UI/Base/OpenJosm.svelte

49 lines
1.6 KiB
Svelte
Raw Normal View History

<script lang="ts">
import { UIEventSource } from "../../Logic/UIEventSource";
import Translations from "../i18n/Translations";
import Tr from "./Tr.svelte";
import Josm_logo from "../../assets/svg/Josm_logo.svelte";
import Constants from "../../Models/Constants";
import type { SpecialVisualizationState } from "../SpecialVisualization";
export let state : SpecialVisualizationState
const t = Translations.t.general.attribution;
const josmState = new UIEventSource<"OK" | string>(undefined);
// Reset after 15s
josmState.stabilized(15000).addCallbackD(() => josmState.setData(undefined));
const showButton = state.osmConnection.userDetails.map(
(ud) => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible
);
function openJosm() {
const bbox = state.mapProperties. bounds.data;
if (bbox === undefined) {
return;
}
const top = bbox.getNorth();
const bottom = bbox.getSouth();
const right = bbox.getEast();
const left = bbox.getWest();
const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`;
Utils.download(josmLink)
.then((answer) => josmState.setData(answer.replace(/\n/g, "").trim()))
.catch(() => josmState.setData("ERROR"));
}
</script>
{#if $showButton}
{#if $josmState === undefined}
<!-- empty -->
{:else if state === "OK"}
<Tr cls="thanks" t={t.josmOpened} />
{:else}
<Tr cls="alert" t={t.josmNotOpened} />
{/if}
<button class="flex items-center" on:click={openJosm}>
<Josm_logo class="h-12 w-12 p-2 pr-4" />
<Tr t={t.editJosm} />
</button>
{/if}