forked from MapComplete/MapComplete
81 lines
2.3 KiB
Svelte
81 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* Shows an 'upload'-button which will start the upload for this feature
|
|
*/
|
|
|
|
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
|
import { 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 ToSvelte from "../Base/ToSvelte.svelte"
|
|
import Svg from "../../Svg"
|
|
|
|
export let state: SpecialVisualizationState
|
|
|
|
export let tags: Store<OsmTags>
|
|
/**
|
|
* 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
|
|
|
|
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)
|
|
} catch (e) {
|
|
alert(e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<LoginToggle {state}>
|
|
<Tr slot="not-logged-in" t={t.pleaseLogin} />
|
|
<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} />
|
|
{:else}
|
|
<ToSvelte construct={Svg.camera_plus_svg().SetClass("block w-12 h-12 p-1 text-4xl ")} />
|
|
{/if}
|
|
{#if labelText}
|
|
{labelText}
|
|
{:else}
|
|
<Tr t={t.addPicture} />
|
|
{/if}
|
|
</div>
|
|
</FileSelector>
|
|
<div class="text-sm">
|
|
<Tr t={t.respectPrivacy} />
|
|
<a
|
|
class="cursor-pointer"
|
|
on:click={() => {
|
|
state.guistate.openUsersettings("picture-license")
|
|
}}
|
|
>
|
|
<Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</LoginToggle>
|