forked from MapComplete/MapComplete
Merge master
This commit is contained in:
commit
f51b51c491
340 changed files with 15515 additions and 11114 deletions
|
|
@ -1,34 +1,36 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* Shows an image with attribution
|
||||
*/
|
||||
import ImageAttribution from "./ImageAttribution.svelte"
|
||||
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||||
import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
/**
|
||||
* Shows an image with attribution
|
||||
*/
|
||||
import ImageAttribution from "./ImageAttribution.svelte"
|
||||
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||||
import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
|
||||
export let image: ProvidedImage
|
||||
let fallbackImage: string = undefined
|
||||
if (image.provider === Mapillary.singleton) {
|
||||
fallbackImage = "./assets/svg/blocked.svg"
|
||||
}
|
||||
export let image: ProvidedImage
|
||||
let fallbackImage: string = undefined
|
||||
if (image.provider === Mapillary.singleton) {
|
||||
fallbackImage = "./assets/svg/blocked.svg"
|
||||
}
|
||||
|
||||
let imgEl: HTMLImageElement
|
||||
export let imgClass: string = undefined
|
||||
export let previewedImage: UIEventSource<string> = undefined
|
||||
let imgEl: HTMLImageElement
|
||||
export let imgClass: string = undefined
|
||||
export let previewedImage: UIEventSource<ProvidedImage> = undefined
|
||||
</script>
|
||||
|
||||
|
||||
<div class="relative">
|
||||
<img bind:this={imgEl} src={image.url} class={imgClass ?? ""}
|
||||
<img bind:this={imgEl}
|
||||
class={imgClass ?? ""}
|
||||
class:cursor-pointer={previewedImage !== undefined}
|
||||
on:click={() => {previewedImage?.setData(image)}}
|
||||
on:error={(event) => {
|
||||
if(fallbackImage){
|
||||
imgEl.src = fallbackImage
|
||||
}
|
||||
}}>
|
||||
}}
|
||||
src={image.url}>
|
||||
|
||||
<div class="absolute bottom-0 left-0">
|
||||
<ImageAttribution {image}/>
|
||||
<ImageAttribution {image} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
<script lang="ts">
|
||||
import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
|
||||
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||||
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
|
||||
/**
|
||||
* A small element showing the attribution of a single image
|
||||
*/
|
||||
export let image: ProvidedImage
|
||||
let license: Store<LicenseInfo> = UIEventSource.FromPromise(image.provider?.DownloadAttribution(image.url))
|
||||
let icon = image.provider?.SourceIcon(image.id)?.SetClass("block h-8 w-8 pr-2")
|
||||
import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
|
||||
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||||
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
|
||||
/**
|
||||
* A small element showing the attribution of a single image
|
||||
*/
|
||||
export let image: ProvidedImage
|
||||
let license: Store<LicenseInfo> = UIEventSource.FromPromise(
|
||||
image.provider?.DownloadAttribution(image.url)
|
||||
)
|
||||
let icon = image.provider?.SourceIcon(image.id)?.SetClass("block h-8 w-8 pr-2")
|
||||
</script>
|
||||
|
||||
|
||||
{#if $license !== undefined}
|
||||
<div class="flex bg-black text-white text-sm p-0.5 pl-5 pr-3 rounded-lg no-images">
|
||||
|
||||
<div class="no-images flex rounded-lg bg-black p-0.5 pl-5 pr-3 text-sm text-white">
|
||||
{#if icon !== undefined}
|
||||
<ToSvelte construct={icon} />
|
||||
{/if}
|
||||
|
||||
|
||||
<div class="flex flex-col">
|
||||
{#if $license.title}
|
||||
{#if $license.informationLocation}
|
||||
|
|
@ -39,7 +37,6 @@
|
|||
{/if}
|
||||
|
||||
<div class="flex justify-between">
|
||||
|
||||
{#if $license.license !== undefined || $license.licenseShortName !== undefined}
|
||||
<div>
|
||||
{$license?.license ?? $license?.licenseShortName}
|
||||
|
|
@ -55,12 +52,10 @@
|
|||
|
||||
{#if $license.views}
|
||||
<div class="flex justify-around self-center">
|
||||
<EyeIcon class="w-4 h-4 pr-1"/>
|
||||
<EyeIcon class="h-4 w-4 pr-1" />
|
||||
{$license.views}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export class ImageCarousel extends Toggle {
|
|||
]).SetClass("relative")
|
||||
}
|
||||
image
|
||||
.SetClass("w-full block")
|
||||
.SetClass("w-full block cursor-zoom-in")
|
||||
.SetStyle("min-width: 50px; background: grey;")
|
||||
uiElements.push(image)
|
||||
} catch (e) {
|
||||
|
|
|
|||
|
|
@ -1,42 +1,45 @@
|
|||
<script lang="ts">/**
|
||||
* The 'imageOperations' previews an image and offers some extra tools (e.g. download)
|
||||
*/
|
||||
<script lang="ts">
|
||||
/**
|
||||
* The 'imageOperations' previews an image and offers some extra tools (e.g. download)
|
||||
*/
|
||||
|
||||
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||||
import ImageAttribution from "./ImageAttribution.svelte"
|
||||
import ImagePreview from "./ImagePreview.svelte"
|
||||
import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { Utils } from "../../Utils"
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||||
import ImageAttribution from "./ImageAttribution.svelte"
|
||||
import ImagePreview from "./ImagePreview.svelte"
|
||||
import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { Utils } from "../../Utils"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export let image: ProvidedImage
|
||||
export let clss: string = undefined
|
||||
async function download() {
|
||||
const response = await fetch(image.url_hd ?? image.url )
|
||||
export let image: ProvidedImage
|
||||
export let clss: string = undefined
|
||||
async function download() {
|
||||
const response = await fetch(image.url_hd ?? image.url)
|
||||
const blob = await response.blob()
|
||||
Utils.offerContentsAsDownloadableFile(blob, new URL(image.url).pathname.split("/").at(-1), {
|
||||
mimetype: "image/jpg",
|
||||
mimetype: "image/jpg",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class={twMerge("w-full h-full relative", clss)}>
|
||||
<div class="absolute top-0 left-0 w-full h-full overflow-hidden panzoom-container focusable">
|
||||
<ImagePreview image={image} />
|
||||
<div class={twMerge("relative h-full w-full", clss)}>
|
||||
<div class="panzoom-container focusable absolute top-0 left-0 h-full w-full overflow-hidden">
|
||||
<ImagePreview {image} />
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 w-full pointer-events-none flex flex-wrap justify-between items-end">
|
||||
<div class="pointer-events-auto w-fit opacity-50 hover:opacity-100 transition-colors duration-200 m-1">
|
||||
<ImageAttribution image={image} />
|
||||
<div
|
||||
class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-auto m-1 w-fit opacity-50 transition-colors duration-200 hover:opacity-100"
|
||||
>
|
||||
<ImageAttribution {image} />
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="no-image-background flex items-center pointer-events-auto bg-black opacity-50 hover:opacity-100 text-white transition-colors duration-200"
|
||||
on:click={() => download()}>
|
||||
<DownloadIcon class="w-6 h-6 px-2 opacity-100" />
|
||||
class="no-image-background pointer-events-auto flex items-center bg-black text-white opacity-50 transition-colors duration-200 hover:opacity-100"
|
||||
on:click={() => download()}
|
||||
>
|
||||
<DownloadIcon class="h-6 w-6 px-2 opacity-100" />
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,27 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* The image preview allows to drag and zoom in to the image
|
||||
*/
|
||||
import panzoom from "panzoom"
|
||||
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||||
|
||||
/**
|
||||
* The image preview allows to drag and zoom in to the image
|
||||
*/
|
||||
import panzoom from "panzoom"
|
||||
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||||
export let image: ProvidedImage
|
||||
let panzoomInstance = undefined
|
||||
let panzoomEl: HTMLElement
|
||||
|
||||
export let image : ProvidedImage
|
||||
let panzoomInstance = undefined
|
||||
let panzoomEl: HTMLElement
|
||||
|
||||
$: {
|
||||
if (panzoomEl) {
|
||||
panzoomInstance = panzoom(panzoomEl, { bounds: true,
|
||||
boundsPadding: 0.49,
|
||||
minZoom: 1,
|
||||
maxZoom: 25,
|
||||
initialZoom: 1.2
|
||||
})
|
||||
} else {
|
||||
panzoomInstance?.dispose()
|
||||
}
|
||||
$: {
|
||||
if (panzoomEl) {
|
||||
panzoomInstance = panzoom(panzoomEl, {
|
||||
bounds: true,
|
||||
boundsPadding: 0.49,
|
||||
minZoom: 1,
|
||||
maxZoom: 25,
|
||||
initialZoom: 1.2,
|
||||
})
|
||||
} else {
|
||||
panzoomInstance?.dispose()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<img bind:this={panzoomEl} src={image.url_hd ?? image.url} class="w-fit h-fit panzoom-image"/>
|
||||
<img bind:this={panzoomEl} src={image.url_hd ?? image.url} class="panzoom-image h-fit w-fit" />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
|
||||
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
|
||||
import { Tag } from "../../Logic/Tags/Tag"
|
||||
import { GeoOperations } from "../../Logic/GeoOperations"
|
||||
import type { Feature } from "geojson"
|
||||
import Translations from "../i18n/Translations"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
|
|
@ -30,13 +29,11 @@
|
|||
const c = [lon, lat]
|
||||
const providedImage: ProvidedImage = {
|
||||
url: image.thumbUrl ?? image.pictureUrl,
|
||||
key: undefined,
|
||||
provider: AllImageProviders.byName(image.provider),
|
||||
date: new Date(image.date),
|
||||
id: Object.values(image.osmTags)[0],
|
||||
}
|
||||
let distance = Math.round(
|
||||
GeoOperations.distanceBetween([image.coordinates.lng, image.coordinates.lat], c),
|
||||
)
|
||||
|
||||
$: {
|
||||
const currentTags = tags.data
|
||||
|
|
@ -64,8 +61,8 @@
|
|||
</script>
|
||||
|
||||
<div class="flex w-fit shrink-0 flex-col">
|
||||
<div on:click={() => state.previewedImage.setData(providedImage)}>
|
||||
<AttributedImage image={providedImage} imgClass="max-h-64 w-auto" />
|
||||
<div class="cursor-zoom-in" on:click={() => state.previewedImage.setData(providedImage)}>
|
||||
<AttributedImage image={providedImage} imgClass="max-h-64 w-auto" previewedImage="{state.previewedImage}"/>
|
||||
</div>
|
||||
{#if linkable}
|
||||
<label>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,44 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* Show nearby images which can be clicked
|
||||
*/
|
||||
import type { OsmTags } from "../../Models/OsmFeature"
|
||||
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
|
||||
import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
|
||||
import LinkableImage from "./LinkableImage.svelte"
|
||||
import type { Feature } from "geojson"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
import Loading from "../Base/Loading.svelte"
|
||||
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import Translations from "../i18n/Translations"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
/**
|
||||
* Show nearby images which can be clicked
|
||||
*/
|
||||
import type { OsmTags } from "../../Models/OsmFeature"
|
||||
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
|
||||
import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
|
||||
import LinkableImage from "./LinkableImage.svelte"
|
||||
import type { Feature } from "geojson"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
import Loading from "../Base/Loading.svelte"
|
||||
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import Translations from "../i18n/Translations"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
|
||||
export let tags: Store<OsmTags>
|
||||
export let state: SpecialVisualizationState
|
||||
export let lon: number
|
||||
export let lat: number
|
||||
export let feature: Feature
|
||||
export let tags: Store<OsmTags>
|
||||
export let state: SpecialVisualizationState
|
||||
export let lon: number
|
||||
export let lat: number
|
||||
export let feature: Feature
|
||||
|
||||
export let linkable: boolean = true
|
||||
export let layer: LayerConfig
|
||||
export let linkable: boolean = true
|
||||
export let layer: LayerConfig
|
||||
|
||||
let imagesProvider = new NearbyImagesSearch(
|
||||
{
|
||||
lon,
|
||||
lat,
|
||||
allowSpherical: new UIEventSource<boolean>(false),
|
||||
blacklist: AllImageProviders.LoadImagesFor(tags),
|
||||
},
|
||||
state.indexedFeatures,
|
||||
)
|
||||
let imagesProvider = new NearbyImagesSearch(
|
||||
{
|
||||
lon,
|
||||
lat,
|
||||
allowSpherical: new UIEventSource<boolean>(false),
|
||||
blacklist: AllImageProviders.LoadImagesFor(tags),
|
||||
},
|
||||
state.indexedFeatures
|
||||
)
|
||||
|
||||
let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
|
||||
let allDone = imagesProvider.allDone
|
||||
let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
|
||||
let allDone = imagesProvider.allDone
|
||||
</script>
|
||||
|
||||
<LoginToggle {state}>
|
||||
<div class="interactive border-interactive rounded-2xl p-2">
|
||||
<div class="flex justify-between">
|
||||
|
|
@ -53,9 +54,9 @@
|
|||
{:else}
|
||||
<div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
|
||||
{#each $images as image (image.pictureUrl)}
|
||||
<span class="w-fit shrink-0" style="scroll-snap-align: start">
|
||||
<LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
|
||||
</span>
|
||||
<span class="w-fit shrink-0" style="scroll-snap-align: start">
|
||||
<LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
<script lang="ts">
|
||||
import { Store } from "../../Logic/UIEventSource";
|
||||
import type { OsmTags } from "../../Models/OsmFeature";
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization";
|
||||
import type { Feature } from "geojson";
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
|
||||
import Translations from "../i18n/Translations";
|
||||
import Tr from "../Base/Tr.svelte";
|
||||
import NearbyImages from "./NearbyImages.svelte";
|
||||
import { XCircleIcon } from "@babeard/svelte-heroicons/solid";
|
||||
import Camera_plus from "../../assets/svg/Camera_plus.svelte";
|
||||
import LoginToggle from "../Base/LoginToggle.svelte";
|
||||
import { Store } from "../../Logic/UIEventSource"
|
||||
import type { OsmTags } from "../../Models/OsmFeature"
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import type { Feature } from "geojson"
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||
import Translations from "../i18n/Translations"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import NearbyImages from "./NearbyImages.svelte"
|
||||
import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
|
||||
import Camera_plus from "../../assets/svg/Camera_plus.svelte"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
import { ariaLabel } from "../../Utils/ariaLabel"
|
||||
|
||||
export let tags: Store<OsmTags>;
|
||||
export let state: SpecialVisualizationState;
|
||||
export let lon: number;
|
||||
export let lat: number;
|
||||
export let feature: Feature;
|
||||
export let tags: Store<OsmTags>
|
||||
export let state: SpecialVisualizationState
|
||||
export let lon: number
|
||||
export let lat: number
|
||||
export let feature: Feature
|
||||
|
||||
export let linkable: boolean = true;
|
||||
export let layer: LayerConfig;
|
||||
const t = Translations.t.image.nearby;
|
||||
export let linkable: boolean = true
|
||||
export let layer: LayerConfig
|
||||
const t = Translations.t.image.nearby
|
||||
|
||||
let expanded = false;
|
||||
let expanded = false
|
||||
</script>
|
||||
<LoginToggle {state}>
|
||||
|
||||
<LoginToggle {state}>
|
||||
{#if expanded}
|
||||
<NearbyImages {tags} {state} {lon} {lat} {feature} {linkable} {layer}>
|
||||
<button slot="corner"
|
||||
class="h-6 w-6 cursor-pointer no-image-background p-0 border-none"
|
||||
use:ariaLabel={t.close}
|
||||
|
||||
|
||||
on:click={() => {
|
||||
expanded = false
|
||||
}}>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,51 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* Shows an 'upload'-button which will start the upload for this feature
|
||||
*/
|
||||
/**
|
||||
* Shows an 'upload'-button which will start the upload for this feature
|
||||
*/
|
||||
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import { ImmutableStore, UIEventSource } 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"
|
||||
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||
import { ImmutableStore, UIEventSource } 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 state: SpecialVisualizationState
|
||||
|
||||
export let tags: UIEventSource<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)
|
||||
}
|
||||
}
|
||||
export let tags: UIEventSource<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" osmConnection={state.osmConnection}>
|
||||
<LoginButton clss="small w-full" osmConnection={state.osmConnection} slot="not-logged-in">
|
||||
<Tr t={Translations.t.image.pleaseLogin} />
|
||||
</LoginButton>
|
||||
<div class="flex flex-col">
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
multiple={true}
|
||||
on:submit={(e) => handleFiles(e.detail)}
|
||||
>
|
||||
<div class="flex items-center" >
|
||||
<div class="flex items-center">
|
||||
{#if image !== undefined}
|
||||
<img src={image} aria-hidden="true" />
|
||||
{:else}
|
||||
|
|
@ -71,14 +71,14 @@
|
|||
</FileSelector>
|
||||
<div class="text-sm">
|
||||
<button
|
||||
class="link small "
|
||||
class="link small"
|
||||
on:click={() => {
|
||||
state.guistate.openUsersettings("picture-license")
|
||||
}}
|
||||
>
|
||||
<Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
|
||||
</button>
|
||||
<Tr t={t.respectPrivacy} />
|
||||
<Tr t={t.respectPrivacy} />
|
||||
</div>
|
||||
</div>
|
||||
</LoginToggle>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
export let state: SpecialVisualizationState
|
||||
export let tags: Store<OsmTags> = undefined
|
||||
export let featureId = tags?.data?.id
|
||||
if(featureId === undefined){
|
||||
if (featureId === undefined) {
|
||||
throw "No tags or featureID given"
|
||||
}
|
||||
export let showThankYou: boolean = true
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue