forked from MapComplete/MapComplete
112 lines
3.3 KiB
Svelte
112 lines
3.3 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import type { SpecialVisualizationState } from "../../SpecialVisualization"
|
||
|
|
import { Store, UIEventSource } from "../../../Logic/UIEventSource"
|
||
|
|
import { placeholder } from "../../../Utils/placeholder"
|
||
|
|
import Translations from "../../i18n/Translations"
|
||
|
|
import Speech_bubble from "../../../assets/svg/Speech_bubble.svelte"
|
||
|
|
import Tr from "../../Base/Tr.svelte"
|
||
|
|
import NoteCommentElement from "./NoteCommentElement"
|
||
|
|
import Resolved from "../../../assets/svg/Resolved.svelte"
|
||
|
|
import Note from "../../../assets/svg/Note.svelte"
|
||
|
|
import LoginToggle from "../../Base/LoginToggle.svelte"
|
||
|
|
|
||
|
|
export let state: SpecialVisualizationState
|
||
|
|
export let tags: UIEventSource<Record<string, string>>
|
||
|
|
let id = tags.data.id
|
||
|
|
$: {
|
||
|
|
id = $tags.id
|
||
|
|
}
|
||
|
|
|
||
|
|
let txt = new UIEventSource(undefined)
|
||
|
|
let _txt: string = undefined
|
||
|
|
txt.addCallbackD(t => {
|
||
|
|
_txt = t
|
||
|
|
})
|
||
|
|
$: {
|
||
|
|
txt.setData(_txt)
|
||
|
|
}
|
||
|
|
const t = Translations.t.notes
|
||
|
|
|
||
|
|
let isClosed: Store<boolean> = tags.map((tags) => (tags?.["closed_at"] ?? "") !== "")
|
||
|
|
|
||
|
|
async function addComment() {
|
||
|
|
if ((txt.data ?? "") == "") {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isClosed.data) {
|
||
|
|
await state.osmConnection.reopenNote(id, txt.data)
|
||
|
|
await state.osmConnection.closeNote(id)
|
||
|
|
} else {
|
||
|
|
await state.osmConnection.addCommentToNote(id, txt.data)
|
||
|
|
}
|
||
|
|
NoteCommentElement.addCommentTo(txt.data, tags, state)
|
||
|
|
txt.setData("")
|
||
|
|
}
|
||
|
|
|
||
|
|
async function closeNote() {
|
||
|
|
await state.osmConnection.closeNote(id, txt.data)
|
||
|
|
tags.data["closed_at"] = new Date().toISOString()
|
||
|
|
tags.ping()
|
||
|
|
}
|
||
|
|
|
||
|
|
async function reopenNote() {
|
||
|
|
await state.osmConnection.reopenNote(id, txt.data)
|
||
|
|
tags.data["closed_at"] = undefined
|
||
|
|
tags.ping()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<LoginToggle ignoreLoading={true} {state}>
|
||
|
|
<Tr slot="not-logged-in" t={t.loginToAddComment} />
|
||
|
|
|
||
|
|
<form class="m-0 px-2 py-1 flex flex-col border-2 border-black rounded-xl interactive border-interactive" on:submit|preventDefault={() => addComment()}>
|
||
|
|
<label class="neutral-label font-bold">
|
||
|
|
<Tr t={t.addAComment} />
|
||
|
|
<textarea bind:value={_txt} class="w-full h-24 rounded-l border border-grey" rows="3"
|
||
|
|
use:placeholder={t.addCommentPlaceholder} />
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div class="flex flex-col">
|
||
|
|
|
||
|
|
{#if $txt?.length > 0}
|
||
|
|
<button class="primary flex" on:click={() => addComment()}>
|
||
|
|
<!-- Add a comment -->
|
||
|
|
<Speech_bubble class="h-7 w-7 pr-2" />
|
||
|
|
<Tr t={t.addCommentPlaceholder} />
|
||
|
|
</button>
|
||
|
|
{:else}
|
||
|
|
<div class="alert w-full">
|
||
|
|
<Tr t={t.typeText} />
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
|
||
|
|
{#if !$isClosed}
|
||
|
|
<button class="flex items-center" on:click={() => closeNote()}>
|
||
|
|
<Resolved class="h-8 w-8 pr-2" />
|
||
|
|
<!-- Close note -->
|
||
|
|
{#if $txt === undefined || $txt === ""}
|
||
|
|
<Tr t={t.closeNote} />
|
||
|
|
{:else}
|
||
|
|
<Tr t={t.addCommentAndClose} />
|
||
|
|
{/if}
|
||
|
|
</button>
|
||
|
|
{:else}
|
||
|
|
<button class="flex items-center" on:click={() => reopenNote()}>
|
||
|
|
<!-- Reopen -->
|
||
|
|
<Note class="h-7 w-7 pr-2" />
|
||
|
|
{#if $txt === undefined || $txt === ""}
|
||
|
|
<Tr t={t.reopenNote} />
|
||
|
|
{:else}
|
||
|
|
<Tr t={t.reopenNoteAndComment} />
|
||
|
|
{/if}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</LoginToggle>
|