Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Reformat all files with prettier

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-09-08 21:40:48 +02:00
parent e22d189376
commit b541d3eab4
382 changed files with 50893 additions and 35566 deletions
Download patch file Download diff file Expand all files Collapse all files

46
UI/Image/AttributedImage.ts
View file

@ -1,37 +1,29 @@
import Combine from "../Base/Combine";
import Attribution from "./Attribution";
import Img from "../Base/Img";
import ImageProvider from "../../Logic/ImageProviders/ImageProvider";
import BaseUIElement from "../BaseUIElement";
import {Mapillary} from "../../Logic/ImageProviders/Mapillary";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine"
import Attribution from "./Attribution"
import Img from "../Base/Img"
import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
import BaseUIElement from "../BaseUIElement"
import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
import { UIEventSource } from "../../Logic/UIEventSource"
export class AttributedImage extends Combine {
constructor(imageInfo: {
url: string,
provider?: ImageProvider,
date?: Date
}
) {
let img: BaseUIElement;
constructor(imageInfo: { url: string; provider?: ImageProvider; date?: Date }) {
let img: BaseUIElement
img = new Img(imageInfo.url, false, {
fallbackImage: imageInfo.provider === Mapillary.singleton ? "./assets/svg/blocked.svg" : undefined
});
fallbackImage:
imageInfo.provider === Mapillary.singleton ? "./assets/svg/blocked.svg" : undefined,
})
let attr: BaseUIElement = undefined
if(imageInfo.provider !== undefined){
attr = new Attribution(UIEventSource.FromPromise( imageInfo.provider?.DownloadAttribution(imageInfo.url)),
if (imageInfo.provider !== undefined) {
attr = new Attribution(
UIEventSource.FromPromise(imageInfo.provider?.DownloadAttribution(imageInfo.url)),
imageInfo.provider?.SourceIcon(),
imageInfo.date
)
}
super([img, attr]);
this.SetClass('block relative h-full');
super([img, attr])
this.SetClass("block relative h-full")
}
}
}

40
UI/Image/Attribution.ts
View file

@ -1,17 +1,16 @@
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import BaseUIElement from "../BaseUIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import {Store} from "../../Logic/UIEventSource";
import {LicenseInfo} from "../../Logic/ImageProviders/LicenseInfo";
import {FixedUiElement} from "../Base/FixedUiElement";
import Link from "../Base/Link";
import Combine from "../Base/Combine"
import Translations from "../i18n/Translations"
import BaseUIElement from "../BaseUIElement"
import { VariableUiElement } from "../Base/VariableUIElement"
import { Store } from "../../Logic/UIEventSource"
import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
import { FixedUiElement } from "../Base/FixedUiElement"
import Link from "../Base/Link"
/**
* Small box in the bottom left of an image, e.g. the image in a popup
*/
export default class Attribution extends VariableUiElement {
constructor(license: Store<LicenseInfo>, icon: BaseUIElement, date?: Date) {
if (license === undefined) {
throw "No license source given in the attribution element"
@ -22,7 +21,7 @@ export default class Attribution extends VariableUiElement {
return undefined
}
let title = undefined;
let title = undefined
if (license?.title) {
title = Translations.W(license?.title).SetClass("block")
if (license.informationLocation) {
@ -30,17 +29,22 @@ export default class Attribution extends VariableUiElement {
}
}
return new Combine([
icon?.SetClass("block left").SetStyle("height: 2em; width: 2em; padding-right: 0.5em;"),
icon
?.SetClass("block left")
.SetStyle("height: 2em; width: 2em; padding-right: 0.5em;"),
new Combine([
title,
Translations.W(license?.artist ?? "").SetClass("block font-bold"),
Translations.W(license?.license ?? license?.licenseShortName),
date === undefined ? undefined : new FixedUiElement(date.toLocaleDateString())
]).SetClass("flex flex-col")
]).SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg no-images")
}));
date === undefined
? undefined
: new FixedUiElement(date.toLocaleDateString()),
]).SetClass("flex flex-col"),
]).SetClass(
"flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg no-images"
)
})
)
}
}
}

68
UI/Image/DeleteImage.ts
View file

@ -1,47 +1,56 @@
import {Store} from "../../Logic/UIEventSource";
import Translations from "../i18n/Translations";
import Toggle, {ClickableToggle} from "../Input/Toggle";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
import {Tag} from "../../Logic/Tags/Tag";
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction";
import {Changes} from "../../Logic/Osm/Changes";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
import { Store } from "../../Logic/UIEventSource"
import Translations from "../i18n/Translations"
import Toggle, { ClickableToggle } from "../Input/Toggle"
import Combine from "../Base/Combine"
import Svg from "../../Svg"
import { Tag } from "../../Logic/Tags/Tag"
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
import { Changes } from "../../Logic/Osm/Changes"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
export default class DeleteImage extends Toggle {
constructor(key: string, tags: Store<any>, state: { layoutToUse: LayoutConfig, changes?: Changes, osmConnection?: OsmConnection }) {
constructor(
key: string,
tags: Store<any>,
state: { layoutToUse: LayoutConfig; changes?: Changes; osmConnection?: OsmConnection }
) {
const oldValue = tags.data[key]
const isDeletedBadge = Translations.t.image.isDeleted.Clone()
const isDeletedBadge = Translations.t.image.isDeleted
.Clone()
.SetClass("rounded-full p-1")
.SetStyle("color:white;background:#ff8c8c")
.onClick(async () => {
await state?.changes?.applyAction(new ChangeTagAction(tags.data.id, new Tag(key, oldValue), tags.data, {
changeType: "delete-image",
theme: state.layoutToUse.id
}))
});
await state?.changes?.applyAction(
new ChangeTagAction(tags.data.id, new Tag(key, oldValue), tags.data, {
changeType: "delete-image",
theme: state.layoutToUse.id,
})
)
})
const deleteButton = Translations.t.image.doDelete.Clone()
const deleteButton = Translations.t.image.doDelete
.Clone()
.SetClass("block w-full pl-4 pr-4")
.SetStyle("color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;")
.SetStyle(
"color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;"
)
.onClick(async () => {
await state?.changes?.applyAction(
new ChangeTagAction(tags.data.id, new Tag(key, ""), tags.data, {
changeType: "answer",
theme: state.layoutToUse.id
theme: state.layoutToUse.id,
})
)
});
})
const cancelButton = Translations.t.general.cancel.Clone().SetClass("bg-white pl-4 pr-4").SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
const cancelButton = Translations.t.general.cancel
.Clone()
.SetClass("bg-white pl-4 pr-4")
.SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;")
const openDelete = Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
const deleteDialog = new ClickableToggle(
new Combine([
deleteButton,
cancelButton
]).SetClass("flex flex-col background-black"),
new Combine([deleteButton, cancelButton]).SetClass("flex flex-col background-black"),
openDelete
)
@ -52,12 +61,11 @@ export default class DeleteImage extends Toggle {
new Toggle(
deleteDialog,
isDeletedBadge,
tags.map(tags => (tags[key] ?? "") !== "")
tags.map((tags) => (tags[key] ?? "") !== "")
),
undefined /*Login (and thus editing) is disabled*/,
state?.osmConnection?.isLoggedIn
)
this.SetClass("cursor-pointer")
}
}
}

79
UI/Image/ImageCarousel.ts
View file

@ -1,50 +1,53 @@
import {SlideShow} from "./SlideShow";
import {Store} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
import DeleteImage from "./DeleteImage";
import {AttributedImage} from "./AttributedImage";
import BaseUIElement from "../BaseUIElement";
import Toggle from "../Input/Toggle";
import ImageProvider from "../../Logic/ImageProviders/ImageProvider";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import {Changes} from "../../Logic/Osm/Changes";
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
import { SlideShow } from "./SlideShow"
import { Store } from "../../Logic/UIEventSource"
import Combine from "../Base/Combine"
import DeleteImage from "./DeleteImage"
import { AttributedImage } from "./AttributedImage"
import BaseUIElement from "../BaseUIElement"
import Toggle from "../Input/Toggle"
import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import { Changes } from "../../Logic/Osm/Changes"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
export class ImageCarousel extends Toggle {
constructor(
images: Store<{ key: string; url: string; provider: ImageProvider }[]>,
tags: Store<any>,
state: { osmConnection?: OsmConnection; changes?: Changes; layoutToUse: LayoutConfig }
) {
const uiElements = images.map(
(imageURLS: { key: string; url: string; provider: ImageProvider }[]) => {
const uiElements: BaseUIElement[] = []
for (const url of imageURLS) {
try {
let image = new AttributedImage(url)
constructor(images: Store<{ key: string, url: string, provider: ImageProvider }[]>,
tags: Store<any>,
state: { osmConnection?: OsmConnection, changes?: Changes, layoutToUse: LayoutConfig }) {
const uiElements = images.map((imageURLS: { key: string, url: string, provider: ImageProvider }[]) => {
const uiElements: BaseUIElement[] = [];
for (const url of imageURLS) {
try {
let image = new AttributedImage(url)
if (url.key !== undefined) {
image = new Combine([
image,
new DeleteImage(url.key, tags, state).SetClass("delete-image-marker absolute top-0 left-0 pl-3")
]).SetClass("relative");
if (url.key !== undefined) {
image = new Combine([
image,
new DeleteImage(url.key, tags, state).SetClass(
"delete-image-marker absolute top-0 left-0 pl-3"
),
]).SetClass("relative")
}
image
.SetClass("w-full block")
.SetStyle("min-width: 50px; background: grey;")
uiElements.push(image)
} catch (e) {
console.error("Could not generate image element for", url.url, "due to", e)
}
image
.SetClass("w-full block")
.SetStyle("min-width: 50px; background: grey;")
uiElements.push(image);
} catch (e) {
console.error("Could not generate image element for", url.url, "due to", e)
}
return uiElements
}
return uiElements;
});
)
super(
new SlideShow(uiElements).SetClass("w-full"),
undefined,
uiElements.map(els => els.length > 0)
uiElements.map((els) => els.length > 0)
)
this.SetClass("block w-full");
this.SetClass("block w-full")
}
}
}

216
UI/Image/ImageUploadFlow.ts
View file

@ -1,168 +1,189 @@
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import Svg from "../../Svg";
import {Tag} from "../../Logic/Tags/Tag";
import BaseUIElement from "../BaseUIElement";
import LicensePicker from "../BigComponents/LicensePicker";
import Toggle from "../Input/Toggle";
import FileSelectorButton from "../Input/FileSelectorButton";
import ImgurUploader from "../../Logic/ImageProviders/ImgurUploader";
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {FixedUiElement} from "../Base/FixedUiElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import {Changes} from "../../Logic/Osm/Changes";
import Loading from "../Base/Loading";
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Combine from "../Base/Combine"
import Translations from "../i18n/Translations"
import Svg from "../../Svg"
import { Tag } from "../../Logic/Tags/Tag"
import BaseUIElement from "../BaseUIElement"
import LicensePicker from "../BigComponents/LicensePicker"
import Toggle from "../Input/Toggle"
import FileSelectorButton from "../Input/FileSelectorButton"
import ImgurUploader from "../../Logic/ImageProviders/ImgurUploader"
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import { FixedUiElement } from "../Base/FixedUiElement"
import { VariableUiElement } from "../Base/VariableUIElement"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import { Changes } from "../../Logic/Osm/Changes"
import Loading from "../Base/Loading"
export class ImageUploadFlow extends Toggle {
private static readonly uploadCountsPerId = new Map<string, UIEventSource<number>>()
constructor(tagsSource: Store<any>,
state: {
osmConnection: OsmConnection;
layoutToUse: LayoutConfig;
changes: Changes,
featureSwitchUserbadge: Store<boolean>;
},
imagePrefix: string = "image", text: string = undefined) {
constructor(
tagsSource: Store<any>,
state: {
osmConnection: OsmConnection
layoutToUse: LayoutConfig
changes: Changes
featureSwitchUserbadge: Store<boolean>
},
imagePrefix: string = "image",
text: string = undefined
) {
const perId = ImageUploadFlow.uploadCountsPerId
const id = tagsSource.data.id
if (!perId.has(id)) {
perId.set(id, new UIEventSource<number>(0))
}
const uploadedCount = perId.get(id)
const uploader = new ImgurUploader(async url => {
const uploader = new ImgurUploader(async (url) => {
// A file was uploaded - we add it to the tags of the object
const tags = tagsSource.data
let key = imagePrefix
if (tags[imagePrefix] !== undefined) {
let freeIndex = 0;
let freeIndex = 0
while (tags[imagePrefix + ":" + freeIndex] !== undefined) {
freeIndex++;
freeIndex++
}
key = imagePrefix + ":" + freeIndex;
key = imagePrefix + ":" + freeIndex
}
await state.changes
.applyAction(new ChangeTagAction(
tags.id, new Tag(key, url), tagsSource.data,
{
changeType: "add-image",
theme: state.layoutToUse.id
}
))
console.log("Adding image:" + key, url);
await state.changes.applyAction(
new ChangeTagAction(tags.id, new Tag(key, url), tagsSource.data, {
changeType: "add-image",
theme: state.layoutToUse.id,
})
)
console.log("Adding image:" + key, url)
uploadedCount.data++
uploadedCount.ping()
})
const licensePicker = new LicensePicker(state)
const explanations = LicensePicker.LicenseExplanations()
const chosenLicense = new VariableUiElement(licensePicker.GetValue().map(license => explanations.get(license)))
const chosenLicense = new VariableUiElement(
licensePicker.GetValue().map((license) => explanations.get(license))
)
const t = Translations.t.image;
const t = Translations.t.image
let labelContent: BaseUIElement
if (text === undefined) {
labelContent = Translations.t.image.addPicture.Clone().SetClass("block align-middle mt-1 ml-3 text-4xl ")
labelContent = Translations.t.image.addPicture
.Clone()
.SetClass("block align-middle mt-1 ml-3 text-4xl ")
} else {
labelContent = new FixedUiElement(text).SetClass("block align-middle mt-1 ml-3 text-2xl ")
labelContent = new FixedUiElement(text).SetClass(
"block align-middle mt-1 ml-3 text-2xl "
)
}
const label = new Combine([
Svg.camera_plus_ui().SetClass("block w-12 h-12 p-1 text-4xl "),
labelContent
]).SetClass("p-2 border-4 border-detail rounded-full font-bold h-full align-middle w-full flex justify-center")
labelContent,
]).SetClass(
"p-2 border-4 border-detail rounded-full font-bold h-full align-middle w-full flex justify-center"
)
const fileSelector = new FileSelectorButton(label)
fileSelector.GetValue().addCallback(filelist => {
fileSelector.GetValue().addCallback((filelist) => {
if (filelist === undefined || filelist.length === 0) {
return;
return
}
for (var i = 0; i < filelist.length; i++) {
const sizeInBytes = filelist[i].size
console.log(filelist[i].name + " has a size of " + sizeInBytes + " Bytes");
console.log(filelist[i].name + " has a size of " + sizeInBytes + " Bytes")
if (sizeInBytes > uploader.maxFileSizeInMegabytes * 1000000) {
alert(Translations.t.image.toBig.Subs({
actual_size: (Math.floor(sizeInBytes / 1000000)) + "MB",
max_size: uploader.maxFileSizeInMegabytes + "MB"
}).txt)
return;
alert(
Translations.t.image.toBig.Subs({
actual_size: Math.floor(sizeInBytes / 1000000) + "MB",
max_size: uploader.maxFileSizeInMegabytes + "MB",
}).txt
)
return
}
}
console.log("Received images from the user, starting upload")
const license = licensePicker.GetValue()?.data ?? "CC0"
const tags = tagsSource.data;
const tags = tagsSource.data
const layout = state?.layoutToUse
let matchingLayer: LayerConfig = undefined
for (const layer of layout?.layers ?? []) {
if (layer.source.osmTags.matchesProperties(tags)) {
matchingLayer = layer;
break;
matchingLayer = layer
break
}
}
const title = matchingLayer?.title?.GetRenderValue(tags)?.Subs(tags)?.ConstructElement()?.textContent ?? tags.name ?? "https//osm.org/"+tags.id;
const title =
matchingLayer?.title?.GetRenderValue(tags)?.Subs(tags)?.ConstructElement()
?.textContent ??
tags.name ??
"https//osm.org/" + tags.id
const description = [
"author:" + state.osmConnection.userDetails.data.name,
"license:" + license,
"osmid:" + tags.id,
].join("\n");
].join("\n")
uploader.uploadMany(title, description, filelist)
})
const uploadFlow: BaseUIElement = new Combine([
new VariableUiElement(uploader.queue.map(q => q.length).map(l => {
if (l == 0) {
return undefined;
}
if (l == 1) {
return new Loading( t.uploadingPicture).SetClass("alert")
} else {
return new Loading(t.uploadingMultiple.Subs({count: "" + l})).SetClass("alert")
}
})),
new VariableUiElement(uploader.failed.map(q => q.length).map(l => {
if (l == 0) {
return undefined
}
console.log(l)
return t.uploadFailed.SetClass("block alert");
})),
new VariableUiElement(uploadedCount.map(l => {
if (l == 0) {
return undefined;
}
if (l == 1) {
return t.uploadDone.Clone().SetClass("thanks block");
}
return t.uploadMultipleDone.Subs({count: l}).SetClass("thanks block")
})),
new VariableUiElement(
uploader.queue
.map((q) => q.length)
.map((l) => {
if (l == 0) {
return undefined
}
if (l == 1) {
return new Loading(t.uploadingPicture).SetClass("alert")
} else {
return new Loading(
t.uploadingMultiple.Subs({ count: "" + l })
).SetClass("alert")
}
})
),
new VariableUiElement(
uploader.failed
.map((q) => q.length)
.map((l) => {
if (l == 0) {
return undefined
}
console.log(l)
return t.uploadFailed.SetClass("block alert")
})
),
new VariableUiElement(
uploadedCount.map((l) => {
if (l == 0) {
return undefined
}
if (l == 1) {
return t.uploadDone.Clone().SetClass("thanks block")
}
return t.uploadMultipleDone.Subs({ count: l }).SetClass("thanks block")
})
),
fileSelector,
Translations.t.image.respectPrivacy.Clone().SetStyle("font-size:small;"),
licensePicker,
chosenLicense.SetClass("subtle text-sm")
chosenLicense.SetClass("subtle text-sm"),
]).SetClass("flex flex-col image-upload-flow mt-4 mb-8 text-center")
const pleaseLoginButton = t.pleaseLogin.Clone()
const pleaseLoginButton = t.pleaseLogin
.Clone()
.onClick(() => state.osmConnection.AttemptLogin())
.SetClass("login-button-friendly");
.SetClass("login-button-friendly")
super(
new Toggle(
/*We can show the actual upload button!*/
@ -173,8 +194,5 @@ export class ImageUploadFlow extends Toggle {
undefined /* Nothing as the user badge is disabled*/,
state?.featureSwitchUserbadge
)
}
}
}

33
UI/Image/SlideShow.ts
View file

@ -1,16 +1,14 @@
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import {Utils} from "../../Utils";
import Combine from "../Base/Combine";
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import BaseUIElement from "../BaseUIElement"
import { Utils } from "../../Utils"
import Combine from "../Base/Combine"
export class SlideShow extends BaseUIElement {
private readonly embeddedElements: Store<BaseUIElement[]>;
private readonly embeddedElements: Store<BaseUIElement[]>
constructor(embeddedElements: Store<BaseUIElement[]>) {
super()
this.embeddedElements = embeddedElements;
this.embeddedElements = embeddedElements
this.SetStyle("scroll-snap-type: x mandatory; overflow-x: auto")
}
@ -19,8 +17,7 @@ export class SlideShow extends BaseUIElement {
el.style.minWidth = "min-content"
el.style.display = "flex"
el.style.justifyContent = "center"
this.embeddedElements.addCallbackAndRun(elements => {
this.embeddedElements.addCallbackAndRun((elements) => {
if (elements.length > 1) {
el.style.justifyContent = "unset"
}
@ -29,21 +26,23 @@ export class SlideShow extends BaseUIElement {
el.removeChild(el.lastChild)
}
elements = Utils.NoNull(elements).map(el => new Combine([el])
.SetClass("block relative ml-1 bg-gray-200 m-1 rounded slideshow-item")
.SetStyle("min-width: 150px; width: max-content; height: var(--image-carousel-height);max-height: var(--image-carousel-height);scroll-snap-align: start;")
elements = Utils.NoNull(elements).map((el) =>
new Combine([el])
.SetClass("block relative ml-1 bg-gray-200 m-1 rounded slideshow-item")
.SetStyle(
"min-width: 150px; width: max-content; height: var(--image-carousel-height);max-height: var(--image-carousel-height);scroll-snap-align: start;"
)
)
for (const element of elements ?? []) {
el.appendChild(element.ConstructElement())
}
});
})
const wrapper = document.createElement("div")
wrapper.style.maxWidth = "100%"
wrapper.style.overflowX = "auto"
wrapper.appendChild(el)
return wrapper;
return wrapper
}
}
}