midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactoring: port MapRoulette-set-status to svelte

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-09 16:52:15 +01:00
parent 2147661601
commit 389cd7ddc0
4 changed files with 156 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/layers/maproulette/maproulette.json
View file

@ -238,7 +238,7 @@
"cs": "Označit jako příliš těžké"
},
"status": "6",
"image": "not_found"
"image": "./assets/svg/not_found.svg"
}
}
}

135
src/UI/Map/Icon.svelte
View file

@ -24,6 +24,9 @@
import Gps_arrow from "../../assets/svg/Gps_arrow.svelte";
import { HeartIcon } from "@babeard/svelte-heroicons/solid";
import { HeartIcon as HeartOutlineIcon } from "@babeard/svelte-heroicons/outline";
import Confirm from "../../assets/svg/Confirm.svelte";
import Not_found from "../../assets/svg/Not_found.svelte";
import { twMerge } from "tailwind-merge";
/**
* Renders a single icon.
@ -32,71 +35,75 @@
*/
export let icon: string | undefined;
export let color: string | undefined = undefined
export let clss: string | undefined = undefined
export let color: string | undefined = undefined;
export let clss: string | undefined = undefined;
</script>
{#if icon}
{#if icon === "pin"}
<Pin {color} class={clss}/>
{:else if icon === "square"}
<Square {color} class={clss}/>
{:else if icon === "circle"}
<Circle {color} class={clss}/>
{:else if icon === "checkmark"}
<Checkmark {color} class={clss}/>
{:else if icon === "clock"}
<Clock {color} class={clss}/>
{:else if icon === "close"}
<Close {color} class={clss}/>
{:else if icon === "crosshair"}
<Crosshair {color} class={clss}/>
{:else if icon === "help"}
<Help {color} class={clss}/>
{:else if icon === "home"}
<Home {color} class={clss}/>
{:else if icon === "invalid"}
<Invalid {color} class={clss}/>
{:else if icon === "location"}
<Location {color} class={clss}/>
{:else if icon === "location_empty"}
<Location_empty {color} class={clss}/>
{:else if icon === "location_locked"}
<Location_locked {color} class={clss}/>
{:else if icon === "note"}
<Note {color} class={clss}/>
{:else if icon === "resolved"}
<Resolved {color} class={clss}/>
{:else if icon === "ring"}
<Ring {color} class={clss}/>
{:else if icon === "scissors"}
<Scissors {color} class={clss}/>
{:else if icon === "teardrop"}
<Teardrop {color} class={clss}/>
{:else if icon === "teardrop_with_hole_green"}
<Teardrop_with_hole_green {color} class={clss}/>
{:else if icon === "triangle"}
<Triangle {color} class={clss}/>
{:else if icon === "brick_wall_square"}
<Brick_wall_square {color} class={clss}/>
{:else if icon === "brick_wall_round"}
<Brick_wall_round {color} class={clss}/>
{:else if icon === "gps_arrow"}
<Gps_arrow {color} class={clss}/>
{:else if icon === "checkmark"}
<Checkmark {color} class={clss}/>
{:else if icon === "help"}
<Help {color} class={clss}/>
{:else if icon === "close"}
<Close {color} class={clss}/>
{:else if icon === "invalid"}
<Invalid {color} class={clss}/>
{:else if icon === "heart"}
<HeartIcon class={clss}/>
{:else if icon === "heart_outline"}
<HeartOutlineIcon class={clss}/>
{:else}
<img class={clss ?? "h-full w-full"} src={icon} aria-hidden="true"
alt="" />
{/if}
{#if icon === "pin"}
<Pin {color} class={clss} />
{:else if icon === "square"}
<Square {color} class={clss} />
{:else if icon === "circle"}
<Circle {color} class={clss} />
{:else if icon === "checkmark"}
<Checkmark {color} class={clss} />
{:else if icon === "clock"}
<Clock {color} class={clss} />
{:else if icon === "close"}
<Close {color} class={clss} />
{:else if icon === "crosshair"}
<Crosshair {color} class={clss} />
{:else if icon === "help"}
<Help {color} class={clss} />
{:else if icon === "home"}
<Home {color} class={clss} />
{:else if icon === "invalid"}
<Invalid {color} class={clss} />
{:else if icon === "location"}
<Location {color} class={clss} />
{:else if icon === "location_empty"}
<Location_empty {color} class={clss} />
{:else if icon === "location_locked"}
<Location_locked {color} class={clss} />
{:else if icon === "note"}
<Note {color} class={clss} />
{:else if icon === "resolved"}
<Resolved {color} class={clss} />
{:else if icon === "ring"}
<Ring {color} class={clss} />
{:else if icon === "scissors"}
<Scissors {color} class={clss} />
{:else if icon === "teardrop"}
<Teardrop {color} class={clss} />
{:else if icon === "teardrop_with_hole_green"}
<Teardrop_with_hole_green {color} class={clss} />
{:else if icon === "triangle"}
<Triangle {color} class={clss} />
{:else if icon === "brick_wall_square"}
<Brick_wall_square {color} class={clss} />
{:else if icon === "brick_wall_round"}
<Brick_wall_round {color} class={clss} />
{:else if icon === "gps_arrow"}
<Gps_arrow {color} class={clss} />
{:else if icon === "checkmark"}
<Checkmark {color} class={clss} />
{:else if icon === "help"}
<Help {color} class={clss} />
{:else if icon === "close"}
<Close {color} class={clss} />
{:else if icon === "invalid"}
<Invalid {color} class={clss} />
{:else if icon === "heart"}
<HeartIcon class={clss} />
{:else if icon === "heart_outline"}
<HeartOutlineIcon class={clss} />
{:else if icon === "confirm"}
<Confirm class={clss} {color} />
{:else if icon === "not_found"}
<Not_found class={twMerge(clss, "no-image-background")} {color} />
{:else}
<img class={clss ?? "h-full w-full"} src={icon} aria-hidden="true"
alt="" />
{/if}
{/if}

73
src/UI/MapRoulette/MaprouletteSetStatus.svelte Normal file
View file

@ -0,0 +1,73 @@
<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";
/**
* 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;
/** 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}`
}
);
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="w-full p-4 no-image-background" on:click={() => apply()}>
<Icon clss="w-8 h-8 mr-2" icon={image} />
{message}
</button>
{:else}
{message_closed}
{/if}

72
src/UI/SpecialVisualizations.ts
View file

@ -83,6 +83,7 @@ import NearbyImages from "./Image/NearbyImages.svelte"
import NearbyImagesCollapsed from "./Image/NearbyImagesCollapsed.svelte"
import { svelte } from "@sveltejs/vite-plugin-svelte"
import MoveWizard from "./Popup/MoveWizard.svelte"
import MaprouletteSetStatus from "./MapRoulette/MaprouletteSetStatus.svelte"
class NearbyImageVis implements SpecialVisualization {
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@ -1141,73 +1142,22 @@ export default class SpecialVisualizations {
},
],
constr: (state, tagsSource, args) => {
let [message, image, message_closed, status, maproulette_id_key] = args
let [message, image, message_closed, statusToSet, maproulette_id_key] = args
if (image === "") {
image = "confirm"
}
if (maproulette_id_key === "" || maproulette_id_key === undefined) {
maproulette_id_key = "mr_taskId"
}
const failed = new UIEventSource(false)
const closeButton = new SubtleButton(image, message).OnClickWithLoading(
Translations.t.general.loading,
async () => {
const maproulette_id =
tagsSource.data[maproulette_id_key] ??
tagsSource.data.mr_taskId ??
tagsSource.data.id
try {
await Maproulette.singleton.closeTask(
Number(maproulette_id),
Number(status),
{
tags: `MapComplete MapComplete:${state.layout.id}`,
}
)
tagsSource.data["mr_taskStatus"] =
Maproulette.STATUS_MEANING[Number(status)]
tagsSource.data.status = status
tagsSource.ping()
} catch (e) {
console.error(e)
failed.setData(true)
}
}
)
let message_closed_element = undefined
if (message_closed !== undefined && message_closed !== "") {
message_closed_element = new FixedUiElement(message_closed)
}
return new VariableUiElement(
tagsSource
.map((tgs) => {
if (tgs["status"]) {
return tgs["status"]
}
const code = tgs["mr_taskStatus"]
console.log("Code is", code, Maproulette.codeToIndex(code))
return Maproulette.codeToIndex(code)
})
.map(Number)
.map(
(status) => {
console.log("Close MR button: status is", status)
if (failed.data) {
return new FixedUiElement(
"ERROR - could not close the MapRoulette task"
).SetClass("block alert")
}
if (status === Maproulette.STATUS_OPEN) {
return closeButton
}
return message_closed_element ?? "Closed!"
},
[failed]
)
)
return new SvelteUIElement(MaprouletteSetStatus, {
state,
tags: tagsSource,
message,
image,
message_closed,
statusToSet,
maproulette_id_key,
})
},
},
{