forked from MapComplete/MapComplete
UX: move some items behind login-toggles, add a 'login to add pictures' button again (fix #1698)
This commit is contained in:
Pieter Vander Vennet
parent
5168b42c8f
commit
4e1384c2df
4 changed files with 182 additions and 174 deletions
|
|
@ -1,50 +1,53 @@
|
|||
<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, 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 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 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)
|
||||
}
|
||||
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}>
|
||||
<Tr slot="not-logged-in" t={t.pleaseLogin} />
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -1,95 +1,95 @@
|
|||
<script lang="ts">
|
||||
import LoginToggle from "../../Base/LoginToggle.svelte"
|
||||
import type { SpecialVisualizationState } from "../../SpecialVisualization"
|
||||
import Translations from "../../i18n/Translations"
|
||||
import Tr from "../../Base/Tr.svelte"
|
||||
import { TrashIcon } from "@babeard/svelte-heroicons/mini"
|
||||
import type { OsmId, OsmTags } from "../../../Models/OsmFeature"
|
||||
import DeleteConfig from "../../../Models/ThemeConfig/DeleteConfig"
|
||||
import TagRenderingQuestion from "../TagRendering/TagRenderingQuestion.svelte"
|
||||
import type { Feature } from "geojson"
|
||||
import { UIEventSource } from "../../../Logic/UIEventSource"
|
||||
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
||||
import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
|
||||
import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { TagUtils } from "../../../Logic/Tags/TagUtils"
|
||||
import OsmChangeAction from "../../../Logic/Osm/Actions/OsmChangeAction"
|
||||
import DeleteAction from "../../../Logic/Osm/Actions/DeleteAction"
|
||||
import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
|
||||
import Loading from "../../Base/Loading.svelte"
|
||||
import { DeleteFlowState } from "./DeleteFlowState"
|
||||
import { twJoin } from "tailwind-merge"
|
||||
import LoginToggle from "../../Base/LoginToggle.svelte"
|
||||
import type { SpecialVisualizationState } from "../../SpecialVisualization"
|
||||
import Translations from "../../i18n/Translations"
|
||||
import Tr from "../../Base/Tr.svelte"
|
||||
import { TrashIcon } from "@babeard/svelte-heroicons/mini"
|
||||
import type { OsmId, OsmTags } from "../../../Models/OsmFeature"
|
||||
import DeleteConfig from "../../../Models/ThemeConfig/DeleteConfig"
|
||||
import TagRenderingQuestion from "../TagRendering/TagRenderingQuestion.svelte"
|
||||
import type { Feature } from "geojson"
|
||||
import { UIEventSource } from "../../../Logic/UIEventSource"
|
||||
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
||||
import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
|
||||
import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { TagUtils } from "../../../Logic/Tags/TagUtils"
|
||||
import OsmChangeAction from "../../../Logic/Osm/Actions/OsmChangeAction"
|
||||
import DeleteAction from "../../../Logic/Osm/Actions/DeleteAction"
|
||||
import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
|
||||
import Loading from "../../Base/Loading.svelte"
|
||||
import { DeleteFlowState } from "./DeleteFlowState"
|
||||
import { twJoin } from "tailwind-merge"
|
||||
|
||||
export let state: SpecialVisualizationState
|
||||
export let deleteConfig: DeleteConfig
|
||||
export let state: SpecialVisualizationState
|
||||
export let deleteConfig: DeleteConfig
|
||||
|
||||
export let tags: UIEventSource<OsmTags>
|
||||
export let tags: UIEventSource<OsmTags>
|
||||
|
||||
let featureId: OsmId = <OsmId>tags.data.id
|
||||
let featureId: OsmId = <OsmId>tags.data.id
|
||||
|
||||
export let feature: Feature
|
||||
export let layer: LayerConfig
|
||||
export let feature: Feature
|
||||
export let layer: LayerConfig
|
||||
|
||||
const deleteAbility = new DeleteFlowState(featureId, state, deleteConfig.neededChangesets)
|
||||
const deleteAbility = new DeleteFlowState(featureId, state, deleteConfig.neededChangesets)
|
||||
|
||||
const canBeDeleted: UIEventSource<boolean | undefined> = deleteAbility.canBeDeleted
|
||||
const canBeDeletedReason = deleteAbility.canBeDeletedReason
|
||||
const canBeDeleted: UIEventSource<boolean | undefined> = deleteAbility.canBeDeleted
|
||||
const canBeDeletedReason = deleteAbility.canBeDeletedReason
|
||||
|
||||
const hasSoftDeletion = deleteConfig.softDeletionTags !== undefined
|
||||
let currentState: "start" | "confirm" | "applying" | "deleted" = "start"
|
||||
$: {
|
||||
deleteAbility.CheckDeleteability(true)
|
||||
}
|
||||
|
||||
const t = Translations.t.delete
|
||||
|
||||
let selectedTags: TagsFilter
|
||||
let changedProperties = undefined
|
||||
$: changedProperties = TagUtils.changeAsProperties(selectedTags?.asChange(tags?.data ?? {}) ?? [])
|
||||
let isHardDelete = undefined
|
||||
$: isHardDelete = changedProperties[DeleteConfig.deleteReasonKey] !== undefined
|
||||
|
||||
async function onDelete() {
|
||||
if (selectedTags === undefined) {
|
||||
return
|
||||
}
|
||||
currentState = "applying"
|
||||
let actionToTake: OsmChangeAction
|
||||
const changedProperties = TagUtils.changeAsProperties(selectedTags.asChange(tags?.data ?? {}))
|
||||
const deleteReason = changedProperties[DeleteConfig.deleteReasonKey]
|
||||
if (deleteReason) {
|
||||
// This is a proper, hard deletion
|
||||
actionToTake = new DeleteAction(
|
||||
featureId,
|
||||
deleteConfig.softDeletionTags,
|
||||
{
|
||||
theme: state?.layout?.id ?? "unknown",
|
||||
specialMotivation: deleteReason,
|
||||
},
|
||||
canBeDeleted.data
|
||||
)
|
||||
} else {
|
||||
// no _delete_reason is given, which implies that this is _not_ a deletion but merely a retagging via a nonDeleteMapping
|
||||
actionToTake = new ChangeTagAction(featureId, selectedTags, tags.data, {
|
||||
theme: state?.layout?.id ?? "unkown",
|
||||
changeType: "special-delete",
|
||||
})
|
||||
const hasSoftDeletion = deleteConfig.softDeletionTags !== undefined
|
||||
let currentState: "start" | "confirm" | "applying" | "deleted" = "start"
|
||||
$: {
|
||||
deleteAbility.CheckDeleteability(true)
|
||||
}
|
||||
|
||||
await state.changes?.applyAction(actionToTake)
|
||||
tags.data["_deleted"] = "yes"
|
||||
tags.ping()
|
||||
currentState = "deleted"
|
||||
}
|
||||
const t = Translations.t.delete
|
||||
|
||||
let selectedTags: TagsFilter
|
||||
let changedProperties = undefined
|
||||
$: changedProperties = TagUtils.changeAsProperties(selectedTags?.asChange(tags?.data ?? {}) ?? [])
|
||||
let isHardDelete = undefined
|
||||
$: isHardDelete = changedProperties[DeleteConfig.deleteReasonKey] !== undefined
|
||||
|
||||
async function onDelete() {
|
||||
if (selectedTags === undefined) {
|
||||
return
|
||||
}
|
||||
currentState = "applying"
|
||||
let actionToTake: OsmChangeAction
|
||||
const changedProperties = TagUtils.changeAsProperties(selectedTags.asChange(tags?.data ?? {}))
|
||||
const deleteReason = changedProperties[DeleteConfig.deleteReasonKey]
|
||||
if (deleteReason) {
|
||||
// This is a proper, hard deletion
|
||||
actionToTake = new DeleteAction(
|
||||
featureId,
|
||||
deleteConfig.softDeletionTags,
|
||||
{
|
||||
theme: state?.layout?.id ?? "unknown",
|
||||
specialMotivation: deleteReason,
|
||||
},
|
||||
canBeDeleted.data,
|
||||
)
|
||||
} else {
|
||||
// no _delete_reason is given, which implies that this is _not_ a deletion but merely a retagging via a nonDeleteMapping
|
||||
actionToTake = new ChangeTagAction(featureId, selectedTags, tags.data, {
|
||||
theme: state?.layout?.id ?? "unkown",
|
||||
changeType: "special-delete",
|
||||
})
|
||||
}
|
||||
|
||||
await state.changes?.applyAction(actionToTake)
|
||||
tags.data["_deleted"] = "yes"
|
||||
tags.ping()
|
||||
currentState = "deleted"
|
||||
}
|
||||
</script>
|
||||
<LoginToggle ignoreLoading={true} {state}>
|
||||
|
||||
{#if $canBeDeleted === false && !hasSoftDeletion}
|
||||
<div class="low-interaction flex flex-col">
|
||||
<Tr t={$canBeDeletedReason} />
|
||||
<Tr cls="subtle" t={t.useSomethingElse} />
|
||||
</div>
|
||||
{:else}
|
||||
<LoginToggle ignoreLoading={true} {state}>
|
||||
{#if $canBeDeleted === false && !hasSoftDeletion}
|
||||
<div class="low-interaction flex flex-col">
|
||||
<Tr t={$canBeDeletedReason} />
|
||||
<Tr cls="subtle" t={t.useSomethingElse} />
|
||||
</div>
|
||||
{:else}
|
||||
{#if currentState === "start"}
|
||||
<button
|
||||
class="flex items-center"
|
||||
|
|
@ -158,5 +158,5 @@
|
|||
<Tr t={t.isDeleted} />
|
||||
</div>
|
||||
{/if}
|
||||
</LoginToggle>
|
||||
{/if}
|
||||
{/if}
|
||||
</LoginToggle>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,63 @@
|
|||
<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"
|
||||
/**
|
||||
* 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>
|
||||
|
||||
<div class="interactive border-interactive rounded-2xl p-2">
|
||||
<div class="flex justify-between">
|
||||
<h4>
|
||||
<Tr t={Translations.t.image.nearby.title} />
|
||||
</h4>
|
||||
<slot name="corner" />
|
||||
</div>
|
||||
{#if !$allDone}
|
||||
<Loading />
|
||||
{:else if $images.length === 0}
|
||||
<Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert"/>
|
||||
{:else}
|
||||
<div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
|
||||
{#each $images as image (image.pictureUrl)}
|
||||
<LoginToggle {state}>
|
||||
<div class="interactive border-interactive rounded-2xl p-2">
|
||||
<div class="flex justify-between">
|
||||
<h4>
|
||||
<Tr t={Translations.t.image.nearby.title} />
|
||||
</h4>
|
||||
<slot name="corner" />
|
||||
</div>
|
||||
{#if !$allDone}
|
||||
<Loading />
|
||||
{:else if $images.length === 0}
|
||||
<Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
|
||||
{: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>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</LoginToggle>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
|
||||
import exp from "constants"
|
||||
import Camera_plus from "../../assets/svg/Camera_plus.svelte"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
|
||||
export let tags: Store<OsmTags>
|
||||
export let state: SpecialVisualizationState
|
||||
|
|
@ -25,7 +26,8 @@
|
|||
|
||||
let expanded = false
|
||||
</script>
|
||||
|
||||
<LoginToggle {state}>
|
||||
|
||||
{#if expanded}
|
||||
<NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
|
||||
<XCircleIcon
|
||||
|
|
@ -47,3 +49,4 @@
|
|||
<Tr t={t.seeNearby} />
|
||||
</button>
|
||||
{/if}
|
||||
</LoginToggle>
|
||||
|
|
|
|||
Loading…
Reference in a new issue