<script lang="ts"> /** * UIcomponent to create a new note at the given location */ import type { SpecialVisualizationState } from "../SpecialVisualization"; import { UIEventSource } from "../../Logic/UIEventSource"; import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"; import ValidatedInput from "../InputElement/ValidatedInput.svelte"; import SubtleButton from "../Base/SubtleButton.svelte"; import Tr from "../Base/Tr.svelte"; import Translations from "../i18n/Translations.js"; import type { Feature, Point } from "geojson"; import LoginToggle from "../Base/LoginToggle.svelte"; import FilteredLayer from "../../Models/FilteredLayer"; export let coordinate: { lon: number, lat: number }; export let state: SpecialVisualizationState; let comment: UIEventSource<string> = LocalStorageSource.Get("note-text"); let created = false; let notelayer: FilteredLayer = state.layerState.filteredLayers.get("note"); let hasFilter = notelayer?.hasFilter; let isDisplayed = notelayer?.isDisplayed; function enableNoteLayer() { state.guistate.closeAll(); isDisplayed.setData(true); } async function uploadNote() { let txt = comment.data; if (txt === undefined || txt === "") { return; } const loc = coordinate; txt += "\n\n #MapComplete #" + state?.layout?.id; const id = await state?.osmConnection?.openNote(loc.lat, loc.lon, txt); console.log("Created a note, got id",id) const feature = <Feature<Point>>{ type: "Feature", geometry: { type: "Point", coordinates: [loc.lon, loc.lat] }, properties: { id: "" + id.id, date_created: new Date().toISOString(), _first_comment: txt, comments: JSON.stringify([ { text: txt, html: txt, user: state.osmConnection?.userDetails?.data?.name, uid: state.osmConnection?.userDetails?.data?.uid } ]) } }; // Normally, the 'Changes' will generate the new element. The 'notes' are an exception to this state.newFeatures.features.data.push(feature); state.newFeatures.features.ping(); state.selectedElement?.setData(feature); comment.setData(""); created = true; } </script> {#if notelayer === undefined} <div class="alert"> This theme does not include the layer 'note'. As a result, no nodes can be created </div> {:else if created} <div class="thanks"> <Tr t={Translations.t.notes.isCreated} /> </div> {:else} <h3> <Tr t={Translations.t.notes.createNoteTitle}></Tr> </h3> {#if $isDisplayed} <!-- The layer is displayed, so we can add a note without worrying for duplicates --> {#if $hasFilter} <div class="flex flex-col"> <!-- ...but a filter is set ...--> <div class="alert"> <Tr t={ Translations.t.notes.noteLayerHasFilters}></Tr> </div> <SubtleButton on:click={() => notelayer.disableAllFilters()}> <img slot="image" src="./assets/svg/filter.svg" class="w-8 h-8 mr-4"> <Tr slot="message" t={Translations.t.notes.disableAllNoteFilters}></Tr> </SubtleButton> </div> {:else} <div> <Tr t={Translations.t.notes.createNoteIntro}></Tr> <div class="border rounded-sm border-grey-500"> <div class="w-full p-1"> <ValidatedInput type="text" value={comment}></ValidatedInput> </div> <LoginToggle {state}> <span slot="loading"><!--empty: don't show a loading message--></span> <div slot="not-logged-in" class="alert"> <Tr t={Translations.t.notes.warnAnonymous} /> </div> </LoginToggle> {#if $comment.length >= 3} <SubtleButton on:click={uploadNote}> <img slot="image" src="./assets/svg/addSmall.svg" class="w-8 h-8 mr-4"> <Tr slot="message" t={ Translations.t.notes.createNote}></Tr> </SubtleButton> {:else} <div class="alert"> <Tr t={ Translations.t.notes.textNeeded}></Tr> </div> {/if} </div> </div> {/if} {:else} <div class="flex flex-col"> <div class="alert"> <Tr t={Translations.t.notes.noteLayerNotEnabled}></Tr> </div> <SubtleButton on:click={enableNoteLayer}> <img slot="image" src="./assets/svg/layers.svg" class="w-8 h-8 mr-4"> <Tr slot="message" t={Translations.t.notes.noteLayerDoEnable}></Tr> </SubtleButton> </div> {/if} {/if}