ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Merge develop

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-10-11 04:34:57 +02:00
commit 08ffe4b7c0
146 changed files with 4380 additions and 1435 deletions
Download patch file Download diff file Expand all files Collapse all files

128
src/UI/SpecialVisualizations.ts
View file

@ -28,7 +28,6 @@ import Wikidata, { WikidataResponse } from "../Logic/Web/Wikidata"
import { Translation } from "./i18n/Translation"
import Translations from "./i18n/Translations"
import OpeningHoursVisualization from "./OpeningHours/OpeningHoursVisualization"
import LiveQueryHandler from "../Logic/Web/LiveQueryHandler"
import { SubtleButton } from "./Base/SubtleButton"
import Svg from "../Svg"
import NoteCommentElement from "./Popup/NoteCommentElement"
@ -41,7 +40,6 @@ import FeatureReviews from "../Logic/Web/MangroveReviews"
import Maproulette from "../Logic/Maproulette"
import SvelteUIElement from "./Base/SvelteUIElement"
import { BBoxFeatureSourceForLayer } from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
import QuestionViz from "./Popup/QuestionViz"
import { Feature, Point } from "geojson"
import { GeoOperations } from "../Logic/GeoOperations"
import CreateNewNote from "./Popup/CreateNewNote.svelte"
@ -68,9 +66,15 @@ import SendEmail from "./Popup/SendEmail.svelte"
import NearbyImages from "./Popup/NearbyImages.svelte"
import NearbyImagesCollapsed from "./Popup/NearbyImagesCollapsed.svelte"
import UploadImage from "./Image/UploadImage.svelte"
import { Imgur } from "../Logic/ImageProviders/Imgur"
import Constants from "../Models/Constants"
import { MangroveReviews } from "mangrove-reviews-typescript"
import Wikipedia from "../Logic/Web/Wikipedia"
import NearbyImagesSearch from "../Logic/Web/NearbyImagesSearch"
import AllReviews from "./Reviews/AllReviews.svelte"
import StarsBarIcon from "./Reviews/StarsBarIcon.svelte"
import ReviewForm from "./Reviews/ReviewForm.svelte"
import Questionbox from "./Popup/TagRendering/Questionbox.svelte";
class NearbyImageVis implements SpecialVisualization {
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@ -84,7 +88,7 @@ class NearbyImageVis implements SpecialVisualization {
docs =
"A component showing nearby images loaded from various online services such as Mapillary. In edit mode and when used on a feature, the user can select an image to add to the feature"
funcName = "nearby_images"
needsUrls = NearbyImagesSearch.apiUrls
constr(
state: SpecialVisualizationState,
tags: UIEventSource<Record<string, string>>,
@ -122,6 +126,7 @@ class StealViz implements SpecialVisualization {
required: true,
},
]
needsUrls = []
constr(state: SpecialVisualizationState, featureTags, args) {
const [featureIdKey, layerAndtagRenderingIds] = args
@ -176,6 +181,52 @@ class StealViz implements SpecialVisualization {
}
}
/**
* Thin wrapper around QuestionBox.svelte to include it into the special Visualisations
*/
export class QuestionViz implements SpecialVisualization {
funcName = "questions"
needsUrls = []
docs =
"The special element which shows the questions which are unkown. Added by default if not yet there"
args = [
{
name: "labels",
doc: "One or more ';'-separated labels. If these are given, only questions with these labels will be given. Use `unlabeled` for all questions that don't have an explicit label. If none given, all questions will be shown",
},
{
name: "blacklisted-labels",
doc: "One or more ';'-separated labels of questions which should _not_ be included",
},
]
constr(
state: SpecialVisualizationState,
tags: UIEventSource<Record<string, string>>,
args: string[],
feature: Feature,
layer: LayerConfig
): BaseUIElement {
const labels = args[0]
?.split(";")
?.map((s) => s.trim())
?.filter((s) => s !== "")
const blacklist = args[1]
?.split(";")
?.map((s) => s.trim())
?.filter((s) => s !== "")
return new SvelteUIElement(Questionbox, {
layer,
tags,
selectedElement: feature,
state,
onlyForLabels: labels,
notForLabels: blacklist,
})
}
}
export default class SpecialVisualizations {
public static specialVisualizations: SpecialVisualization[] = SpecialVisualizations.initList()
@ -382,6 +433,7 @@ export default class SpecialVisualizations {
funcName: "add_new_point",
docs: "An element which allows to add a new point on the 'last_click'-location. Only makes sense in the layer `last_click`",
args: [],
needsUrls: [],
constr(state: SpecialVisualizationState, _, __, feature): BaseUIElement {
let [lon, lat] = GeoOperations.centerpointCoordinates(feature)
return new SvelteUIElement(AddNewPoint, {
@ -393,6 +445,7 @@ export default class SpecialVisualizations {
{
funcName: "user_profile",
args: [],
needsUrls: [],
docs: "A component showing information about the currently logged in user (username, profile description, profile picture + link to edit them). Mostly meant to be used in the 'user-settings'",
constr(state: SpecialVisualizationState): BaseUIElement {
return new SvelteUIElement(UserProfile, {
@ -403,6 +456,7 @@ export default class SpecialVisualizations {
{
funcName: "language_picker",
args: [],
needsUrls: [],
docs: "A component to set the language of the user interface",
constr(state: SpecialVisualizationState): BaseUIElement {
return new LanguagePicker(
@ -414,6 +468,7 @@ export default class SpecialVisualizations {
{
funcName: "logout",
args: [],
needsUrls: [Constants.osmAuthConfig.url],
docs: "Shows a button where the user can log out",
constr(state: SpecialVisualizationState): BaseUIElement {
return new SubtleButton(Svg.logout_svg(), Translations.t.general.logout, {
@ -430,6 +485,7 @@ export default class SpecialVisualizations {
funcName: "split_button",
docs: "Adds a button which allows to split a way",
args: [],
needsUrls: [],
constr(
state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>
@ -450,6 +506,7 @@ export default class SpecialVisualizations {
funcName: "move_button",
docs: "Adds a button which allows to move the object to another location. The config will be read from the layer config",
args: [],
needsUrls: [],
constr(
state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>,
@ -473,6 +530,7 @@ export default class SpecialVisualizations {
funcName: "delete_button",
docs: "Adds a button which allows to delete the object at this location. The config will be read from the layer config",
args: [],
needsUrls: [],
constr(
state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>,
@ -497,6 +555,7 @@ export default class SpecialVisualizations {
{
funcName: "open_note",
args: [],
needsUrls: [Constants.osmAuthConfig.url],
docs: "Creates a new map note on the given location. This options is placed in the 'last_click'-popup automatically if the 'notes'-layer is enabled",
constr(
state: SpecialVisualizationState,
@ -529,6 +588,7 @@ export default class SpecialVisualizations {
defaultValue: "wikidata;wikipedia",
},
],
needsUrls: [...Wikidata.neededUrls, ...Wikipedia.neededUrls],
example:
"`{wikipedia()}` is a basic example, `{wikipedia(name:etymology:wikidata)}` to show the wikipedia page of whom the feature was named after. Also remember that these can be styled, e.g. `{wikipedia():max-height: 10rem}` to limit the height",
constr: (_, tagsSource, args) => {
@ -552,6 +612,7 @@ export default class SpecialVisualizations {
defaultValue: "wikidata",
},
],
needsUrls: Wikidata.neededUrls,
example:
"`{wikidata_label()}` is a basic example, `{wikipedia(name:etymology:wikidata)}` to show the label itself",
constr: (_, tagsSource, args) =>
@ -581,6 +642,7 @@ export default class SpecialVisualizations {
funcName: "all_tags",
docs: "Prints all key-value pairs of the object - used for debugging",
args: [],
needsUrls: [],
constr: (state, tags: UIEventSource<any>) =>
new SvelteUIElement(AllTagsPanel, { tags, state }),
},
@ -594,6 +656,7 @@ export default class SpecialVisualizations {
doc: "The keys given to the images, e.g. if <span class='literal-code'>image</span> is given, the first picture URL will be added as <span class='literal-code'>image</span>, the second as <span class='literal-code'>image:0</span>, the third as <span class='literal-code'>image:1</span>, etc... Multiple values are allowed if ';'-separated ",
},
],
needsUrls: AllImageProviders.apiUrls,
constr: (state, tags, args) => {
let imagePrefixes: string[] = undefined
if (args.length > 0) {
@ -609,6 +672,7 @@ export default class SpecialVisualizations {
{
funcName: "image_upload",
docs: "Creates a button where a user can upload an image to IMGUR",
needsUrls: [Imgur.apiUrl],
args: [
{
name: "image-key",
@ -633,6 +697,7 @@ export default class SpecialVisualizations {
{
funcName: "rating",
docs: "Shows stars which represent the avarage rating on mangrove.reviews",
needsUrls: [MangroveReviews.ORIGINAL_API],
args: [
{
name: "subjectKey",
@ -658,11 +723,6 @@ export default class SpecialVisualizations {
)
return new SvelteUIElement(StarsBarIcon, {
score: reviews.average,
reviews,
state,
tags,
feature,
layer,
})
},
},
@ -670,6 +730,7 @@ export default class SpecialVisualizations {
{
funcName: "create_review",
docs: "Invites the contributor to leave a review. Somewhat small UI-element until interacted",
needsUrls: [MangroveReviews.ORIGINAL_API],
args: [
{
name: "subjectKey",
@ -699,6 +760,7 @@ export default class SpecialVisualizations {
{
funcName: "list_reviews",
docs: "Adds an overview of the mangrove-reviews of this object. Mangrove.Reviews needs - in order to identify the reviewed object - a coordinate and a name. By default, the name of the object is given, but this can be overwritten",
needsUrls: [MangroveReviews.ORIGINAL_API],
example:
"`{reviews()}` for a vanilla review, `{reviews(name, play_forest)}` to review a play forest. If a name is known, the name will be used as identifier, otherwise 'play_forest' is used",
args: [
@ -747,6 +809,7 @@ export default class SpecialVisualizations {
doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__",
},
],
needsUrls: [],
example:
"A normal opening hours table can be invoked with `{opening_hours_table()}`. A table for e.g. conditional access with opening hours can be `{opening_hours_table(access:conditional, no @ &LPARENS, &RPARENS)}`",
constr: (state, tagSource: UIEventSource<any>, args) => {
@ -759,38 +822,9 @@ export default class SpecialVisualizations {
)
},
},
{
funcName: "live",
docs: "Downloads a JSON from the given URL, e.g. '{live(example.org/data.json, shorthand:x.y.z, other:a.b.c, shorthand)}' will download the given file, will create an object {shorthand: json[x][y][z], other: json[a][b][c] out of it and will return 'other' or 'json[a][b][c]. This is made to use in combination with tags, e.g. {live({url}, {url:format}, needed_value)}",
example:
"{live({url},{url:format},hour)} {live(https://data.mobility.brussels/bike/api/counts/?request=live&featureID=CB2105,hour:data.hour_cnt;day:data.day_cnt;year:data.year_cnt,hour)}",
args: [
{
name: "Url",
doc: "The URL to load",
required: true,
},
{
name: "Shorthands",
doc: "A list of shorthands, of the format 'shorthandname:path.path.path'. separated by ;",
},
{
name: "path",
doc: "The path (or shorthand) that should be returned",
},
],
constr: (_, tagSource: UIEventSource<any>, args) => {
const url = args[0]
const shorthands = args[1]
const neededValue = args[2]
const source = LiveQueryHandler.FetchLiveData(url, shorthands.split(";"))
return new VariableUiElement(
source.map((data) => data[neededValue] ?? "Loading...")
)
},
},
{
funcName: "canonical",
needsUrls: [],
docs: "Converts a short, canonical value into the long, translated text including the unit. This only works if a `unit` is defined for the corresponding value. The unit specification will be included in the text. ",
example:
"If the object has `length=42`, then `{canonical(length)}` will be shown as **42 meter** (in english), **42 metre** (in french), ...",
@ -828,6 +862,7 @@ export default class SpecialVisualizations {
funcName: "export_as_geojson",
docs: "Exports the selected feature as GeoJson-file",
args: [],
needsUrls: [],
constr: (state, tagSource, tagsSource, feature, layer) => {
const t = Translations.t.general.download
@ -857,6 +892,7 @@ export default class SpecialVisualizations {
funcName: "open_in_iD",
docs: "Opens the current view in the iD-editor",
args: [],
needsUrls: [],
constr: (state, feature) => {
return new SvelteUIElement(OpenIdEditor, {
mapProperties: state.mapProperties,
@ -868,6 +904,8 @@ export default class SpecialVisualizations {
funcName: "open_in_josm",
docs: "Opens the current view in the JOSM-editor",
args: [],
needsUrls: OpenJosm.needsUrls,
constr: (state) => {
return new OpenJosm(state.osmConnection, state.mapProperties.bounds)
},
@ -876,6 +914,7 @@ export default class SpecialVisualizations {
funcName: "clear_location_history",
docs: "A button to remove the travelled track information from the device",
args: [],
needsUrls: [],
constr: (state) => {
return new SubtleButton(
Svg.delete_icon_svg().SetStyle("height: 1.5rem"),
@ -901,6 +940,7 @@ export default class SpecialVisualizations {
defaultValue: "0",
},
],
needsUrls: [Constants.osmAuthConfig.url],
constr: (state, tags, args) =>
new VariableUiElement(
tags
@ -929,6 +969,7 @@ export default class SpecialVisualizations {
defaultValue: "id",
},
],
needsUrls: [Imgur.apiUrl],
constr: (state, tags, args) => {
const id = tags.data[args[0] ?? "id"]
tags = state.featureProperties.getStore(id)
@ -939,6 +980,7 @@ export default class SpecialVisualizations {
{
funcName: "title",
args: [],
needsUrls: [],
docs: "Shows the title of the popup. Useful for some cases, e.g. 'What is phone number of {title()}?'",
example:
"`What is the phone number of {title()}`, which might automatically become `What is the phone number of XYZ`.",
@ -959,6 +1001,7 @@ export default class SpecialVisualizations {
{
funcName: "maproulette_task",
args: [],
needsUrls: [Maproulette.defaultEndpoint],
constr(state, tagSource) {
let parentId = tagSource.data.mr_challengeId
if (parentId === undefined) {
@ -967,7 +1010,7 @@ export default class SpecialVisualizations {
}
let challenge = Stores.FromPromise(
Utils.downloadJsonCached(
`https://maproulette.org/api/v2/challenge/${parentId}`,
`${Maproulette.defaultEndpoint}/challenge/${parentId}`,
24 * 60 * 60 * 1000
)
)
@ -1002,6 +1045,7 @@ export default class SpecialVisualizations {
{
funcName: "maproulette_set_status",
docs: "Change the status of the given MapRoulette task",
needsUrls: [Maproulette.defaultEndpoint],
example:
" The following example sets the status to '2' (false positive)\n" +
"\n" +
@ -1125,6 +1169,7 @@ export default class SpecialVisualizations {
funcName: "statistics",
docs: "Show general statistics about the elements currently in view. Intended to use on the `current_view`-layer",
args: [],
needsUrls: [],
constr: (state) => {
return new Combine(
state.layout.layers
@ -1167,6 +1212,8 @@ export default class SpecialVisualizations {
required: true,
},
],
needsUrls: [],
constr(__, tags, args) {
return new SvelteUIElement(SendEmail, { args, tags })
},
@ -1194,6 +1241,7 @@ export default class SpecialVisualizations {
doc: "If set, this link will act as a download-button. The contents of `href` will be offered for download; this parameter will act as the proposed filename",
},
],
needsUrls: [],
constr(
state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>,
@ -1215,6 +1263,7 @@ export default class SpecialVisualizations {
{
funcName: "multi",
docs: "Given an embedded tagRendering (read only) and a key, will read the keyname as a JSON-list. Every element of this list will be considered as tags and rendered with the tagRendering",
needsUrls: [],
example:
"```json\n" +
JSON.stringify(
@ -1305,6 +1354,7 @@ export default class SpecialVisualizations {
required: true,
},
],
needsUrls: [],
constr(
state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>,