forked from MapComplete/MapComplete
Chore: formatting
This commit is contained in:
parent
8ef9b48e2b
commit
8a3f7a012d
97 changed files with 3350 additions and 2136 deletions
|
|
@ -1,76 +1,79 @@
|
|||
<script lang="ts">
|
||||
import Translations from "../i18n/Translations";
|
||||
import Tr from "../Base/Tr.svelte";
|
||||
import PlantNetSpeciesList from "./PlantNetSpeciesList.svelte";
|
||||
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource";
|
||||
import type { PlantNetSpeciesMatch } from "../../Logic/Web/PlantNet";
|
||||
import PlantNet from "../../Logic/Web/PlantNet";
|
||||
import { XCircleIcon } from "@babeard/svelte-heroicons/solid";
|
||||
import BackButton from "../Base/BackButton.svelte";
|
||||
import NextButton from "../Base/NextButton.svelte";
|
||||
import WikipediaPanel from "../Wikipedia/WikipediaPanel.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import ToSvelte from "../Base/ToSvelte.svelte";
|
||||
import Svg from "../../Svg";
|
||||
import Translations from "../i18n/Translations"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import PlantNetSpeciesList from "./PlantNetSpeciesList.svelte"
|
||||
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import type { PlantNetSpeciesMatch } from "../../Logic/Web/PlantNet"
|
||||
import PlantNet from "../../Logic/Web/PlantNet"
|
||||
import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
|
||||
import BackButton from "../Base/BackButton.svelte"
|
||||
import NextButton from "../Base/NextButton.svelte"
|
||||
import WikipediaPanel from "../Wikipedia/WikipediaPanel.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import Svg from "../../Svg"
|
||||
|
||||
/**
|
||||
* The main entry point for the plantnet wizard
|
||||
*/
|
||||
const t = Translations.t.plantDetection;
|
||||
|
||||
const t = Translations.t.plantDetection
|
||||
|
||||
/**
|
||||
* All the URLs pointing to images of the selected feature.
|
||||
* We need to feed them into Plantnet when applicable
|
||||
*/
|
||||
export let imageUrls: Store<string[]>;
|
||||
export let onConfirm: (wikidataId: string) => void;
|
||||
const dispatch = createEventDispatcher<{ selected: string }>();
|
||||
let collapsedMode = true;
|
||||
let options: UIEventSource<PlantNetSpeciesMatch[]> = new UIEventSource<PlantNetSpeciesMatch[]>(undefined);
|
||||
export let imageUrls: Store<string[]>
|
||||
export let onConfirm: (wikidataId: string) => void
|
||||
const dispatch = createEventDispatcher<{ selected: string }>()
|
||||
let collapsedMode = true
|
||||
let options: UIEventSource<PlantNetSpeciesMatch[]> = new UIEventSource<PlantNetSpeciesMatch[]>(
|
||||
undefined
|
||||
)
|
||||
|
||||
let error: string = undefined;
|
||||
let error: string = undefined
|
||||
|
||||
/**
|
||||
* The Wikidata-id of the species to apply
|
||||
*/
|
||||
let selectedOption: string;
|
||||
let selectedOption: string
|
||||
|
||||
let done = false;
|
||||
let done = false
|
||||
|
||||
function speciesSelected(species: PlantNetSpeciesMatch) {
|
||||
console.log("Selected:", species);
|
||||
selectedOption = species;
|
||||
console.log("Selected:", species)
|
||||
selectedOption = species
|
||||
}
|
||||
|
||||
async function detectSpecies() {
|
||||
collapsedMode = false;
|
||||
collapsedMode = false
|
||||
|
||||
try {
|
||||
|
||||
const result = await PlantNet.query(imageUrls.data.slice(0, 5));
|
||||
options.set(result.results.filter(r => r.score > 0.005).slice(0, 8));
|
||||
const result = await PlantNet.query(imageUrls.data.slice(0, 5))
|
||||
options.set(result.results.filter((r) => r.score > 0.005).slice(0, 8))
|
||||
} catch (e) {
|
||||
error = e;
|
||||
error = e
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col">
|
||||
|
||||
{#if collapsedMode}
|
||||
<button class="w-full" on:click={detectSpecies}>
|
||||
<Tr t={t.button} />
|
||||
</button>
|
||||
{:else if $error !== undefined}
|
||||
<Tr cls="alert" t={t.error.Subs({error})} />
|
||||
<Tr cls="alert" t={t.error.Subs({ error })} />
|
||||
{:else if $imageUrls.length === 0}
|
||||
<!-- No urls are available, show the explanation instead-->
|
||||
<div class=" border-region p-2 mb-1 relative">
|
||||
<XCircleIcon class="absolute top-0 right-0 w-8 h-8 m-4 cursor-pointer"
|
||||
on:click={() => {collapsedMode = true}}></XCircleIcon>
|
||||
<div class=" border-region relative mb-1 p-2">
|
||||
<XCircleIcon
|
||||
class="absolute top-0 right-0 m-4 h-8 w-8 cursor-pointer"
|
||||
on:click={() => {
|
||||
collapsedMode = true
|
||||
}}
|
||||
/>
|
||||
<Tr t={t.takeImages} />
|
||||
<Tr t={ t.howTo.intro} />
|
||||
<Tr t={t.howTo.intro} />
|
||||
<ul>
|
||||
<li>
|
||||
<Tr t={t.howTo.li0} />
|
||||
|
|
@ -87,23 +90,39 @@
|
|||
</ul>
|
||||
</div>
|
||||
{:else if selectedOption === undefined}
|
||||
<PlantNetSpeciesList {options} numberOfImages={$imageUrls.length}
|
||||
on:selected={(species) => speciesSelected(species.detail)}>
|
||||
<XCircleIcon slot="upper-right" class="w-8 h-8 m-4 cursor-pointer"
|
||||
on:click={() => {collapsedMode = true}}></XCircleIcon>
|
||||
|
||||
<PlantNetSpeciesList
|
||||
{options}
|
||||
numberOfImages={$imageUrls.length}
|
||||
on:selected={(species) => speciesSelected(species.detail)}
|
||||
>
|
||||
<XCircleIcon
|
||||
slot="upper-right"
|
||||
class="m-4 h-8 w-8 cursor-pointer"
|
||||
on:click={() => {
|
||||
collapsedMode = true
|
||||
}}
|
||||
/>
|
||||
</PlantNetSpeciesList>
|
||||
{:else if !done}
|
||||
<div class="flex flex-col border-interactive">
|
||||
<div class="border-interactive flex flex-col">
|
||||
<div class="m-2">
|
||||
|
||||
<WikipediaPanel wikiIds={new ImmutableStore([selectedOption])} />
|
||||
</div>
|
||||
<div class="flex flex-col items-stretch">
|
||||
<BackButton on:click={() => {selectedOption = undefined}}>
|
||||
<BackButton
|
||||
on:click={() => {
|
||||
selectedOption = undefined
|
||||
}}
|
||||
>
|
||||
<Tr t={t.back} />
|
||||
</BackButton>
|
||||
<NextButton clss="primary" on:click={() => { done = true; onConfirm(selectedOption); }} >
|
||||
<NextButton
|
||||
clss="primary"
|
||||
on:click={() => {
|
||||
done = true
|
||||
onConfirm(selectedOption)
|
||||
}}
|
||||
>
|
||||
<Tr t={t.confirm} />
|
||||
</NextButton>
|
||||
</div>
|
||||
|
|
@ -111,13 +130,21 @@
|
|||
{:else}
|
||||
<!-- done ! -->
|
||||
<Tr t={t.done} cls="thanks w-full" />
|
||||
<BackButton imageClass="w-6 h-6 shrink-0" clss="p-1 m-0" on:click={() => {done = false; selectedOption = undefined}}>
|
||||
<BackButton
|
||||
imageClass="w-6 h-6 shrink-0"
|
||||
clss="p-1 m-0"
|
||||
on:click={() => {
|
||||
done = false
|
||||
selectedOption = undefined
|
||||
}}
|
||||
>
|
||||
<Tr t={t.tryAgain} />
|
||||
</BackButton>
|
||||
{/if}
|
||||
<div class="flex p-2 low-interaction rounded-xl self-end">
|
||||
<ToSvelte construct={Svg.plantnet_logo_svg().SetClass("w-8 h-8 p-1 mr-1 bg-white rounded-full")} />
|
||||
<div class="low-interaction flex self-end rounded-xl p-2">
|
||||
<ToSvelte
|
||||
construct={Svg.plantnet_logo_svg().SetClass("w-8 h-8 p-1 mr-1 bg-white rounded-full")}
|
||||
/>
|
||||
<Tr t={t.poweredByPlantnet} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,28 @@
|
|||
<script lang="ts">/**
|
||||
* Show the list of options to choose from
|
||||
*/
|
||||
import type { PlantNetSpeciesMatch } from "../../Logic/Web/PlantNet";
|
||||
import { Store } from "../../Logic/UIEventSource";
|
||||
import Translations from "../i18n/Translations";
|
||||
import Tr from "../Base/Tr.svelte";
|
||||
import Loading from "../Base/Loading.svelte";
|
||||
import SpeciesButton from "./SpeciesButton.svelte";
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Show the list of options to choose from
|
||||
*/
|
||||
import type { PlantNetSpeciesMatch } from "../../Logic/Web/PlantNet"
|
||||
import { Store } from "../../Logic/UIEventSource"
|
||||
import Translations from "../i18n/Translations"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import Loading from "../Base/Loading.svelte"
|
||||
import SpeciesButton from "./SpeciesButton.svelte"
|
||||
|
||||
const t = Translations.t.plantDetection;
|
||||
|
||||
export let options: Store<PlantNetSpeciesMatch[]>;
|
||||
export let numberOfImages: number;
|
||||
const t = Translations.t.plantDetection
|
||||
|
||||
export let options: Store<PlantNetSpeciesMatch[]>
|
||||
export let numberOfImages: number
|
||||
</script>
|
||||
|
||||
{#if $options === undefined}
|
||||
<Loading>
|
||||
<Tr t={t.querying.Subs({length: numberOfImages})} />
|
||||
<Tr t={t.querying.Subs({ length: numberOfImages })} />
|
||||
</Loading>
|
||||
{:else}
|
||||
<div class="low-interaction border-interactive flex p-2 flex-col relative">
|
||||
<div class="absolute top-0 right-0" >
|
||||
|
||||
<slot name="upper-right"/>
|
||||
<div class="low-interaction border-interactive relative flex flex-col p-2">
|
||||
<div class="absolute top-0 right-0">
|
||||
<slot name="upper-right" />
|
||||
</div>
|
||||
<h3>
|
||||
<Tr t={t.overviewTitle} />
|
||||
|
|
@ -31,7 +30,7 @@ export let numberOfImages: number;
|
|||
<Tr t={t.overviewIntro} />
|
||||
<Tr cls="font-bold" t={t.overviewVerify} />
|
||||
{#each $options as species}
|
||||
<SpeciesButton {species} on:selected/>
|
||||
{/each}
|
||||
<SpeciesButton {species} on:selected />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,61 @@
|
|||
<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";
|
||||
<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 + "\""]
|
||||
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;
|
||||
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);
|
||||
/**
|
||||
* 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={() => dispatch("selected", $wikidataId)}>
|
||||
{#if $wikidata === undefined}
|
||||
<Loading>
|
||||
<Tr t={ t.loadingWikidata.Subs({
|
||||
species: species.species.scientificNameWithoutAuthor,
|
||||
})} />
|
||||
<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>
|
||||
<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")}
|
||||
/>
|
||||
{/if}
|
||||
</NextButton>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue