forked from MapComplete/MapComplete
84 lines
2.6 KiB
Svelte
84 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* Shows an 'upload'-button which will start the upload for this feature
|
|
*/
|
|
|
|
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
|
import { ImmutableStore, Store } from "../../Logic/UIEventSource"
|
|
import type { OsmTags } from "../../Models/OsmFeature"
|
|
import LoginToggle from "../Base/LoginToggle.svelte"
|
|
import Translations from "../i18n/Translations"
|
|
import Tr from "../Base/Tr.svelte"
|
|
import UploadingImageCounter from "./UploadingImageCounter.svelte"
|
|
import FileSelector from "../Base/FileSelector.svelte"
|
|
import Camera_plus from "../../assets/svg/Camera_plus.svelte"
|
|
import LoginButton from "../Base/LoginButton.svelte"
|
|
|
|
export let state: SpecialVisualizationState
|
|
|
|
export let tags: Store<OsmTags>
|
|
export let targetKey: string = undefined
|
|
/**
|
|
* Image to show in the button
|
|
* NOT the image to upload!
|
|
*/
|
|
export let image: string = undefined
|
|
if (image === "") {
|
|
image = undefined
|
|
}
|
|
export let labelText: string = undefined
|
|
const t = Translations.t.image
|
|
|
|
let licenseStore = state?.userRelatedState?.imageLicense ?? new ImmutableStore("CC0")
|
|
|
|
function handleFiles(files: FileList) {
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files.item(i)
|
|
console.log("Got file", file.name)
|
|
try {
|
|
state?.imageUploadManager.uploadImageAndApply(file, tags, targetKey)
|
|
} catch (e) {
|
|
alert(e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<LoginToggle {state}>
|
|
<LoginButton slot="not-logged-in" clss="small w-full">
|
|
<Tr t={Translations.t.image.pleaseLogin} />
|
|
</LoginButton>
|
|
<div class="flex flex-col">
|
|
<UploadingImageCounter {state} {tags} />
|
|
<FileSelector
|
|
accept="image/*"
|
|
cls="button border-2 text-2xl"
|
|
multiple={true}
|
|
on:submit={(e) => handleFiles(e.detail)}
|
|
>
|
|
<div class="flex items-center" >
|
|
{#if image !== undefined}
|
|
<img src={image} aria-hidden="true" />
|
|
{:else}
|
|
<Camera_plus class="block h-12 w-12 p-1 text-4xl" />
|
|
{/if}
|
|
{#if labelText}
|
|
{labelText}
|
|
{:else}
|
|
<Tr t={t.addPicture} />
|
|
{/if}
|
|
</div>
|
|
</FileSelector>
|
|
<div class="text-sm">
|
|
<button
|
|
class="link small "
|
|
on:click={() => {
|
|
state.guistate.openUsersettings("picture-license")
|
|
}}
|
|
>
|
|
<Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
|
|
</button>
|
|
<Tr t={t.respectPrivacy} />
|
|
</div>
|
|
</div>
|
|
</LoginToggle>
|