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

Add 'add new note' functionality, fix bug where 'test'-theme comes up when deleting images

Browse source
This commit is contained in:
pietervdvn 2022-01-14 01:41:19 +01:00
parent e562975f6b
commit 6ae8ec8036
16 changed files with 212 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
Docs/TagInfo/mapcomplete_notes.json Normal file
View file

@ -0,0 +1,23 @@
{
"data_format": 1,
"project": {
"name": "MapComplete Notes on OpenStreetMap",
"description": "A note is a pin on the map with some text to indicate something wrong",
"project_url": "https://mapcomplete.osm.be/notes",
"doc_url": "https://github.com/pietervdvn/MapComplete/tree/master/assets/themes/",
"icon_url": "https://mapcomplete.osm.be/assets/svg/resolved.svg",
"contact_name": "Pieter Vander Vennet, MapComplete",
"contact_email": "pietervdvn@posteo.net"
},
"tags": [
{
"key": "id",
"description": "The MapComplete theme Notes on OpenStreetMap has a layer OpenStreetMap notes showing features with this tag"
},
{
"key": "id",
"description": "The MapComplete theme Notes on OpenStreetMap has a layer Your track showing features with this tag",
"value": "location_track"
}
]
}

30
Logic/Actors/StrayClickHandler.ts
View file

@ -1,9 +1,9 @@
import * as L from "leaflet";
import {UIEventSource} from "../UIEventSource";
import ScrollableFullScreen from "../../UI/Base/ScrollableFullScreen";
import AddNewMarker from "../../UI/BigComponents/AddNewMarker";
import FilteredLayer from "../../Models/FilteredLayer";
import Constants from "../../Models/Constants";
import BaseUIElement from "../../UI/BaseUIElement";
/**
* The stray-click-hanlders adds a marker to the map if no feature was clicked.
@ -13,37 +13,41 @@ export default class StrayClickHandler {
private _lastMarker;
constructor(
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
selectedElement: UIEventSource<string>,
filteredLayers: UIEventSource<FilteredLayer[]>,
leafletMap: UIEventSource<L.Map>,
uiToShow: ScrollableFullScreen) {
state: {
LastClickLocation: UIEventSource<{ lat: number, lon: number }>,
selectedElement: UIEventSource<string>,
filteredLayers: UIEventSource<FilteredLayer[]>,
leafletMap: UIEventSource<L.Map>
},
uiToShow: ScrollableFullScreen,
iconToShow: BaseUIElement) {
const self = this;
filteredLayers.data.forEach((filteredLayer) => {
const leafletMap = state.leafletMap
state.filteredLayers.data.forEach((filteredLayer) => {
filteredLayer.isDisplayed.addCallback(isEnabled => {
if (isEnabled && self._lastMarker && leafletMap.data !== undefined) {
// When a layer is activated, we remove the 'last click location' in order to force the user to reclick
// This reclick might be at a location where a feature now appeared...
leafletMap.data.removeLayer(self._lastMarker);
state.leafletMap.data.removeLayer(self._lastMarker);
}
})
})
lastClickLocation.addCallback(function (lastClick) {
state.LastClickLocation.addCallback(function (lastClick) {
if (self._lastMarker !== undefined) {
leafletMap.data?.removeLayer(self._lastMarker);
state.leafletMap.data?.removeLayer(self._lastMarker);
}
if (lastClick === undefined) {
return;
}
selectedElement.setData(undefined);
state.selectedElement.setData(undefined);
const clickCoor: [number, number] = [lastClick.lat, lastClick.lon]
self._lastMarker = L.marker(clickCoor, {
icon: L.divIcon({
html: new AddNewMarker(filteredLayers).ConstructElement(),
html: iconToShow.ConstructElement(),
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -45]
@ -71,7 +75,7 @@ export default class StrayClickHandler {
});
});
selectedElement.addCallback(() => {
state.selectedElement.addCallback(() => {
if (self._lastMarker !== undefined) {
leafletMap.data.removeLayer(self._lastMarker);
this._lastMarker = undefined;

44
Logic/Osm/OsmConnection.ts
View file

@ -223,7 +223,7 @@ export class OsmConnection {
if ((text ?? "") !== "") {
textSuffix = "?text=" + encodeURIComponent(text)
}
if(this._dryRun){
if (this._dryRun) {
console.warn("Dryrun enabled - not actually closing note ", id, " with text ", text)
return new Promise((ok, error) => {
ok()
@ -232,7 +232,7 @@ export class OsmConnection {
return new Promise((ok, error) => {
this.auth.xhr({
method: 'POST',
path: `/api/0.6/notes/${id}/close${textSuffix}`
path: `/api/0.6/notes/${id}/close${textSuffix}`,
}, function (err, response) {
if (err !== null) {
error(err)
@ -246,7 +246,7 @@ export class OsmConnection {
}
public reopenNote(id: number | string, text?: string): Promise<any> {
if(this._dryRun){
if (this._dryRun) {
console.warn("Dryrun enabled - not actually reopening note ", id, " with text ", text)
return new Promise((ok, error) => {
ok()
@ -272,9 +272,40 @@ export class OsmConnection {
}
public openNote(lat: number, lon: number, text: string): Promise<{ id: number }> {
if (this._dryRun) {
console.warn("Dryrun enabled - not actually opening note with text ", text)
return new Promise((ok, error) => {
ok()
});
}
const auth = this.auth;
const content = {lat, lon, text}
return new Promise((ok, error) => {
auth.xhr({
method: 'POST',
path: `/api/0.6/notes.json`,
options: {header:
{'Content-Type': 'application/json'}},
content: JSON.stringify(content)
}, function (err, response) {
if (err !== null) {
error(err)
} else {
const id = Number(response.children[0].children[0].children.item("id").innerHTML)
console.log("OPENED NOTE", id)
ok({id})
}
})
})
}
public addCommentToNode(id: number | string, text: string): Promise<any> {
if(this._dryRun){
console.warn("Dryrun enabled - not actually adding comment ",text, "to note ", id)
if (this._dryRun) {
console.warn("Dryrun enabled - not actually adding comment ", text, "to note ", id)
return new Promise((ok, error) => {
ok()
});
@ -286,7 +317,8 @@ export class OsmConnection {
return new Promise((ok, error) => {
this.auth.xhr({
method: 'POST',
path: `/api/0.6/notes/${id}/comment?text=${encodeURIComponent(text)}`
path: `/api/0.6/notes.json/${id}/comment?text=${encodeURIComponent(text)}`
}, function (err, response) {
if (err !== null) {
error(err)

2
Models/Constants.ts
View file

@ -2,7 +2,7 @@ import {Utils} from "../Utils";
export default class Constants {
public static vNumber = "0.14.0-alpha-2";
public static vNumber = "0.14.0-alpha-3";
public static ImgurApiKey = '7070e7167f0a25a'
public static readonly mapillary_client_token_v4 = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"

3
UI/BigComponents/AddNewMarker.ts
View file

@ -27,6 +27,9 @@ export default class AddNewMarker extends Combine {
}
}
}
if(icons.length === 0){
return undefined
}
if (icons.length === 1) {
return icons[0]
}

3
UI/BigComponents/SimpleAddUI.ts
View file

@ -138,9 +138,6 @@ export default class SimpleAddUI extends Toggle {
loginButton,
state.osmConnection.isLoggedIn
)
this.SetStyle("font-size:large");
}

65
UI/DefaultGUI.ts
View file

@ -23,6 +23,9 @@ import Lazy from "./Base/Lazy";
import {DefaultGuiState} from "./DefaultGuiState";
import LayerConfig from "../Models/ThemeConfig/LayerConfig";
import * as home_location_json from "../assets/layers/home_location/home_location.json";
import NewNoteUi from "./Popup/NewNoteUi";
import Combine from "./Base/Combine";
import AddNewMarker from "./BigComponents/AddNewMarker";
/**
@ -54,45 +57,63 @@ export default class DefaultGUI {
public setupClickDialogOnMap(filterViewIsOpened: UIEventSource<boolean>, state: FeaturePipelineState) {
const hasPresets = state.layoutToUse.layers.some(layer => layer.presets.length > 0);
const noteLayer= state.filteredLayers.data.filter(l => l.layerDef.id === "note")[0]
let addNewNoteDialog : () => BaseUIElement = undefined;
if(noteLayer !== undefined){
addNewNoteDialog = () => new NewNoteUi(state.LastClickLocation, state)
}
function setup() {
let presetCount = 0;
for (const layer of state.layoutToUse.layers) {
for (const preset of layer.presets) {
presetCount++;
}
}
if (presetCount == 0) {
return;
}
console.warn("Settuping ")
if(!hasPresets && addNewNoteDialog === undefined){
return; // nothing to do
}
const newPointDialogIsShown = new UIEventSource<boolean>(false);
const addNewPoint = new ScrollableFullScreen(
() => Translations.t.general.add.title.Clone(),
() => new SimpleAddUI(newPointDialogIsShown, filterViewIsOpened, state),
() => hasPresets ? Translations.t.general.add.title : Translations.t.notes.createNoteTitle,
() => {
let addNew = undefined;
if(hasPresets){
addNew = new SimpleAddUI(newPointDialogIsShown, filterViewIsOpened, state);
}
let addNote = undefined;
if(noteLayer !== undefined){
addNote = addNewNoteDialog()
}
return new Combine([addNew, addNote]).SetClass("flex flex-col font-lg text-lg")
},
"new",
newPointDialogIsShown
);
addNewPoint.isShown.addCallback((isShown) => {
if (!isShown) {
// Clear the 'last-click'-location when the dialog is closed - this causes the popup and the marker to be removed
state.LastClickLocation.setData(undefined);
}
});
new StrayClickHandler(
state.LastClickLocation,
state.selectedElement,
state.filteredLayers,
state.leafletMap,
addNewPoint
state,
addNewPoint,
hasPresets ? new AddNewMarker(state.filteredLayers) : new Combine([Svg.note_svg().SetStyle("height: 40px"), Svg.addSmall_svg().SetClass("absolute bottom-0 right-0 w-6 animate-pulse")]).SetClass("block relative")
);
}
state.featureSwitchAddNew.addCallbackAndRunD(addNewAllowed => {
if (addNewAllowed) {
setup()
return true;
}
})
if(noteLayer !== undefined){
setup()
}else{
state.featureSwitchAddNew.addCallbackAndRunD(addNewAllowed => {
if (addNewAllowed) {
setup()
return true;
}
})
}
}

7
UI/Image/DeleteImage.ts
View file

@ -7,18 +7,19 @@ 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: UIEventSource<any>, state: {changes?: Changes, osmConnection?: OsmConnection}) {
constructor(key: string, tags: UIEventSource<any>, state: {layoutToUse: LayoutConfig, changes?: Changes, osmConnection?: OsmConnection}) {
const oldValue = tags.data[key]
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: "answer",
theme: "test"
changeType: "delete-image",
theme: state.layoutToUse.id
}))
});

5
UI/Image/ImageCarousel.ts
View file

@ -8,12 +8,13 @@ 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: UIEventSource<{ key: string, url: string, provider: ImageProvider }[]>,
constructor(images: UIEventSource<{ key: string, url: string, provider: ImageProvider}[]>,
tags: UIEventSource<any>,
state: {osmConnection?: OsmConnection, changes?: Changes}) {
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) {

57
UI/Popup/NewNoteUi.ts Normal file
View file

@ -0,0 +1,57 @@
import Combine from "../Base/Combine";
import {UIEventSource} from "../../Logic/UIEventSource";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import Translations from "../i18n/Translations";
import Title from "../Base/Title";
import ValidatedTextField from "../Input/ValidatedTextField";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import {LocalStorageSource} from "../../Logic/Web/LocalStorageSource";
import Toggle from "../Input/Toggle";
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline";
export default class NewNoteUi extends Toggle {
constructor(lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
state: { osmConnection: OsmConnection, layoutToUse: LayoutConfig, featurePipeline: FeaturePipeline }) {
const t = Translations.t.notes;
const isCreated = new UIEventSource(false);
const text = ValidatedTextField.InputForType("text", {
value: LocalStorageSource.Get("note-text")
})
text.SetClass("border rounded-sm border-grey-500")
const postNote = new SubtleButton(Svg.addSmall_svg().SetClass("max-h-7"), t.createNote)
postNote.onClick(async () => {
let txt = text.GetValue().data
if (txt === undefined || txt === "") {
return;
}
txt += "\n\n #MapComplete #" + state?.layoutToUse?.id
const loc = lastClickLocation.data;
state?.osmConnection?.openNote(loc.lat, loc.lon, txt)
text.GetValue().setData("")
isCreated.setData(true)
})
const createNoteDialog = new Combine([
new Title(t.createNoteTitle),
t.createNoteIntro,
text,
new Combine([new Toggle(undefined, t.warnAnonymous, state?.osmConnection?.isLoggedIn).SetClass("alert"), postNote]).SetClass("flex justify-end items-center")
]).SetClass("flex flex-col border-2 border-black rounded-xl p-4");
super(
new Toggle(t.isCreated.SetClass("thanks"),
createNoteDialog,
isCreated
),
undefined,
new UIEventSource<boolean>(true)
)
}
}

6
all_themes_index.ts
View file

@ -7,7 +7,11 @@ const layout = QueryParameters.GetQueryParameter("layout", undefined).data ?? ""
const customLayout = QueryParameters.GetQueryParameter("userlayout", undefined).data ?? ""
const l = window.location;
if( layout !== ""){
window.location.replace(l.protocol + "//" + window.location.host+"/"+layout+".html"+ l.search + l.hash);
if(window.location.host.startsWith("127.0.0.1")){
window.location.replace(l.protocol + "//" + window.location.host+"/theme.html"+ l.search + "&layout="+layout + l.hash);
}else{
window.location.replace(l.protocol + "//" + window.location.host+"/"+layout+".html"+ l.search + l.hash);
}
}else if (customLayout !== ""){
window.location.replace(l.protocol + "//" + window.location.host+"/theme.html"+ l.search + l.hash);
}

2
assets/layers/note/note.json
View file

@ -3,7 +3,7 @@
"name": {
"en": "OpenStreetMap notes"
},
"description": "This layer shows notes on OpenStreetMap.",
"description": "This layer shows notes on OpenStreetMap. Having this layer in your theme will trigger the 'add new note' functionality in the 'addNewPoint'-popup (or if your theme has no presets, it'll enable adding notes)",
"source": {
"osmTags": "id~*",
"geoJson": "https://api.openstreetmap.org/api/0.6/notes.json?closed=7&bbox={x_min},{y_min},{x_max},{y_max}",

11
assets/layers/note_import/note_import.json
View file

@ -28,10 +28,12 @@
],
"isShown": {
"render": "yes",
"mappings": [{
"if": "_trigger_index=",
"then": "no"
}]
"mappings": [
{
"if": "_trigger_index=",
"then": "no"
}
]
},
"titleIcons": [
{
@ -59,7 +61,6 @@
"id": "close_note_mapped",
"render": "{close_note(Already mapped, ./assets/svg/checkmark.svg, id, Already mapped)}"
},
{
"id": "comment",
"render": "{add_note_comment()}"

9
langs/en.json
View file

@ -441,6 +441,13 @@
"anonymous": "Anonymous user",
"loginToAddComment": "Login to add a comment",
"loginToAddPicture": "Login to add a picture",
"loginToClose": "Login to close this note"
"loginToClose": "Login to close this note",
"createNoteTitle": "Create a new note here",
"createNote": "Create a new note",
"noteIsPublic": "This will be visible to everyone",
"createNoteIntro": "Is something wrong or missing on the map? Create a note here. These will be checked by volunteers",
"warnAnonymous": "You are not logged in. We won't be able to contact you to resolve your issue.",
"notesLayerMustBeEnabled": "The 'notes'-layer is disabled. Enable it to add a note",
"isCreated": "Your note has been created!"
}
}

1
langs/layers/en.json
View file

@ -3375,6 +3375,7 @@
}
},
"note_import": {
"name": "Possible bookcases",
"title": {
"render": "Possible feature"
}

3
test.ts
View file

@ -1 +1,2 @@
console.log("Hello world")
import NewNoteUi from "./UI/Popup/NewNoteUi";
import {UIEventSource} from "./Logic/UIEventSource";