Themes: various fixes to velopark, see #1783

src/UI/MapRoulette/MaprouletteSetStatus.svelte

@@ -1,63 +1,82 @@
 <script lang="ts">
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
-  import Loading from "../../assets/svg/Loading.svelte"
-  import Tr from "../Base/Tr.svelte"
-  import Translations from "../i18n/Translations"
-  import Icon from "../Map/Icon.svelte"
-  import Maproulette from "../../Logic/Maproulette"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import { Store, UIEventSource } from "../../Logic/UIEventSource"
+    import Loading from "../../assets/svg/Loading.svelte"
+    import Tr from "../Base/Tr.svelte"
+    import Translations from "../i18n/Translations"
+    import Icon from "../Map/Icon.svelte"
+    import Maproulette from "../../Logic/Maproulette"
+    import LoginToggle from "../Base/LoginToggle.svelte"
 
-  /**
-   * A UI-element to change the status of a maproulette-task
-   */
-  export let state: SpecialVisualizationState
-  export let tags: UIEventSource<Record<string, string>>
-  export let message: string
-  export let image: string
-  export let message_closed: string
-  export let statusToSet: string
-  export let maproulette_id_key: string
+    /**
+     * A UI-element to change the status of a maproulette-task
+     */
+    export let state: SpecialVisualizationState
+    export let tags: UIEventSource<Record<string, string>>
+    export let message: string
+    export let image: string
+    export let message_closed: string
+    export let statusToSet: string
+    export let maproulette_id_key: string
 
-  let applying = false
-  let failed = false
+    export let askFeedback: string = ""
 
-  /** Current status of the task*/
-  let status: Store<number> = tags
-    .map((tgs) => {
-      if (tgs["status"]) {
-        return tgs["status"]
-      }
-      return Maproulette.codeToIndex(tgs["mr_taskStatus"])
-    })
-    .map(Number)
+    let applying = false
+    let failed = false
+    let feedback: string = ""
 
-  async function apply() {
-    const maproulette_id = tags.data[maproulette_id_key] ?? tags.data.mr_taskId ?? tags.data.id
-    try {
-      await Maproulette.singleton.closeTask(Number(maproulette_id), Number(statusToSet), {
-        tags: `MapComplete MapComplete:${state.layout.id}`,
-      })
-      tags.data["mr_taskStatus"] = Maproulette.STATUS_MEANING[Number(statusToSet)]
-      tags.data.status = statusToSet
-      tags.ping()
-    } catch (e) {
-      console.error(e)
-      failed = true
+    /** Current status of the task*/
+    let status: Store<number> = tags
+        .map((tgs) => {
+            if (tgs["status"]) {
+                return tgs["status"]
+            }
+            return Maproulette.codeToIndex(tgs["mr_taskStatus"])
+        })
+        .map(Number)
+
+    async function apply() {
+        const maproulette_id = tags.data[maproulette_id_key] ?? tags.data.mr_taskId ?? tags.data.id
+        try {
+            await Maproulette.singleton.closeTask(Number(maproulette_id), Number(statusToSet), {
+                tags: `MapComplete MapComplete:${state.layout.id}`,
+                comment: feedback
+            })
+            tags.data["mr_taskStatus"] = Maproulette.STATUS_MEANING[Number(statusToSet)]
+            tags.data.status = statusToSet
+            tags.ping()
+        } catch (e) {
+            console.error(e)
+            failed = true
+        }
     }
-  }
 </script>
 
-{#if failed}
-  <div class="alert">ERROR - could not close the MapRoulette task</div>
-{:else if applying}
-  <Loading>
-    <Tr t={Translations.t.general.loading} />
-  </Loading>
-{:else if $status === Maproulette.STATUS_OPEN}
-  <button class="no-image-background w-full p-4 m-0" on:click={() => apply()}>
-    <Icon clss="w-8 h-8 mr-2 shrink-0" icon={image} />
-    {message}
-  </button>
-{:else}
-  {message_closed}
-{/if}
+<LoginToggle ignoreLoading={true} {state}>
+  {#if failed}
+    <div class="alert">ERROR - could not close the MapRoulette task</div>
+  {:else if applying}
+    <Loading>
+      <Tr t={Translations.t.general.loading} />
+    </Loading>
+  {:else if $status === Maproulette.STATUS_OPEN}
+    {#if askFeedback !== "" && askFeedback !== undefined}
+      <div class="flex flex-col p-1 gap-y-1 interactive border border-gray-500 border-dashed">
+        <h3>{askFeedback}</h3>
+        <textarea bind:value={feedback}></textarea>
+        <button class="no-image-background w-full p-4 m-0" class:disabled={feedback===""} on:click={() => apply()}>
+          <Icon clss="w-8 h-8 mr-2 shrink-0" icon={image} />
+          {message}
+        </button>
+        {feedback}
+      </div>
+    {:else}
+      <button class="no-image-background w-full p-4 m-0" on:click={() => apply()}>
+        <Icon clss="w-8 h-8 mr-2 shrink-0" icon={image} />
+        {message}
+      </button>
+    {/if}
+  {:else}
+    {message_closed}
+  {/if}
+</LoginToggle>