forked from MapComplete/MapComplete
93 lines
3.5 KiB
Svelte
93 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* The 'importflow' does some basic setup, e.g. validate that imports are allowed, that the user is logged-in, ...
|
|
* They show some default components
|
|
*/
|
|
import ImportFlow from "./ImportFlow";
|
|
import LoginToggle from "../../Base/LoginToggle.svelte";
|
|
import BackButton from "../../Base/BackButton.svelte";
|
|
import Translations from "../../i18n/Translations";
|
|
import Tr from "../../Base/Tr.svelte";
|
|
import NextButton from "../../Base/NextButton.svelte";
|
|
import {createEventDispatcher} from "svelte";
|
|
import Loading from "../../Base/Loading.svelte";
|
|
import {And} from "../../../Logic/Tags/And";
|
|
import TagHint from "../TagHint.svelte";
|
|
import {TagsFilter} from "../../../Logic/Tags/TagsFilter";
|
|
import {Store} from "../../../Logic/UIEventSource";
|
|
|
|
export let importFlow: ImportFlow
|
|
let state = importFlow.state
|
|
|
|
export let currentFlowStep: "start" | "confirm" | "importing" | "imported" = "start"
|
|
|
|
const isLoading = state.dataIsLoading
|
|
const dispatch = createEventDispatcher<{ confirm }>()
|
|
const canBeImported = importFlow.canBeImported()
|
|
const tags : Store<TagsFilter> = importFlow.tagsToApply.map(tags => new And(tags))
|
|
|
|
const isDisplayed = importFlow.targetLayer.isDisplayed
|
|
const hasFilter = importFlow.targetLayer.appliedFilters
|
|
</script>
|
|
|
|
|
|
<LoginToggle {state}>
|
|
|
|
{#if currentFlowStep === "start"}
|
|
<NextButton clss="primary w-full" on:click={() => currentFlowStep = "confirm"}>
|
|
<slot name="start-flow-text">
|
|
{#if importFlow?.args?.icon}
|
|
<img class="w-8 h-8" src={importFlow.args.icon}/>
|
|
{/if}
|
|
{importFlow.args.text}
|
|
</slot>
|
|
</NextButton>
|
|
{:else if $canBeImported !== true && $canBeImported !== undefined}
|
|
<Tr cls="alert w-full flex justify-center" t={$canBeImported.error}/>
|
|
{#if $canBeImported.extraHelp}
|
|
<Tr t={$canBeImported.extraHelp}/>
|
|
{/if}
|
|
{:else if $isLoading}
|
|
<Loading>
|
|
<Tr t={Translations.t.general.add.stillLoading}/>
|
|
</Loading>
|
|
{:else if currentFlowStep === "confirm"}
|
|
<div class="h-full w-full flex flex-col">
|
|
<div class="w-full h-full">
|
|
<slot name="map"/>
|
|
</div>
|
|
<div class="flex flex-col-reverse md:flex-row">
|
|
<BackButton clss="w-full" on:click={() => currentFlowStep = "start"}>
|
|
<Tr t={Translations.t.general.back}/>
|
|
</BackButton>
|
|
<NextButton clss="primary w-full" on:click={() => {
|
|
currentFlowStep = "imported"
|
|
dispatch("confirm")
|
|
}}>
|
|
<span slot="image">
|
|
|
|
{#if importFlow.args.icon}
|
|
<img src={importFlow.args.icon}>
|
|
{/if}
|
|
</span>
|
|
<slot name="confirm-text">
|
|
{importFlow.args.text}
|
|
</slot>
|
|
</NextButton>
|
|
</div>
|
|
|
|
<div class="subtle">
|
|
<TagHint embedIn={str => Translations.t.general.add.import.importTags.Subs({tags: str})} {state}
|
|
tags={$tags}/>
|
|
</div>
|
|
|
|
</div>
|
|
{:else if currentFlowStep === "importing"}
|
|
<Loading/>
|
|
{:else if currentFlowStep === "imported"}
|
|
<div class="thanks w-full p-4">
|
|
<Tr t={Translations.t.general.add.import.hasBeenImported}/>
|
|
</div>
|
|
{/if}
|
|
|
|
</LoginToggle>
|