forked from MapComplete/MapComplete
56 lines
1.9 KiB
Svelte
56 lines
1.9 KiB
Svelte
<script lang="ts">/**
|
|
* A button to select a single species
|
|
*/
|
|
import { createEventDispatcher } from "svelte";
|
|
import type { PlantNetSpeciesMatch } from "../../Logic/Web/PlantNet";
|
|
import { UIEventSource } from "../../Logic/UIEventSource";
|
|
import Wikidata from "../../Logic/Web/Wikidata";
|
|
import NextButton from "../Base/NextButton.svelte";
|
|
import Loading from "../Base/Loading.svelte";
|
|
import WikidataPreviewBox from "../Wikipedia/WikidataPreviewBox";
|
|
import Tr from "../Base/Tr.svelte";
|
|
import Translations from "../i18n/Translations";
|
|
import ToSvelte from "../Base/ToSvelte.svelte";
|
|
|
|
export let species: PlantNetSpeciesMatch;
|
|
let wikidata = UIEventSource.FromPromise(
|
|
Wikidata.Sparql<{ species }>(
|
|
["?species", "?speciesLabel"],
|
|
["?species wdt:P846 \"" + species.gbif.id + "\""]
|
|
)
|
|
);
|
|
|
|
const dispatch = createEventDispatcher<{ selected: string /* wikidata-id*/ }>();
|
|
const t = Translations.t.plantDetection;
|
|
|
|
|
|
/**
|
|
* PlantNet give us a GBIF-id, but we want the Wikidata-id instead.
|
|
* We look this up in wikidata
|
|
*/
|
|
const wikidataId: Store<string> = UIEventSource.FromPromise(
|
|
Wikidata.Sparql<{ species }>(
|
|
["?species", "?speciesLabel"],
|
|
["?species wdt:P846 \"" + species.gbif.id + "\""]
|
|
)
|
|
).mapD(wd => wd[0]?.species?.value);
|
|
</script>
|
|
|
|
<NextButton on:click={() =>{
|
|
console.log("Dispatching: ", $wikidataId)
|
|
return dispatch("selected", $wikidataId); }}>
|
|
{#if $wikidata === undefined}
|
|
<Loading>
|
|
<Tr t={ t.loadingWikidata.Subs({
|
|
species: species.species.scientificNameWithoutAuthor,
|
|
})} />
|
|
</Loading>
|
|
{:else}
|
|
<ToSvelte construct={() => new WikidataPreviewBox(wikidataId,
|
|
{ imageStyle: "max-width: 8rem; width: unset; height: 8rem",
|
|
extraItems: [t.matchPercentage
|
|
.Subs({ match: Math.round(species.score * 100) })
|
|
.SetClass("thanks w-fit self-center")]
|
|
}).SetClass("w-full")}></ToSvelte>
|
|
{/if}
|
|
</NextButton>
|