Add export_as_geojson, open_in_id and open_in_josm special renderings

This commit is contained in:
Pieter Vander Vennet 2021-12-23 21:28:41 +01:00
parent b0f0a57bc7
commit 7f829a3578
8 changed files with 144 additions and 60 deletions

View file

@ -19,9 +19,82 @@ import Loc from "../../Models/Loc";
import Toggle from "../Input/Toggle";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import Constants from "../../Models/Constants";
import PrivacyPolicy from "./PrivacyPolicy";
import ContributorCount from "../../Logic/ContributorCount";
export class OpenIdEditor extends VariableUiElement {
constructor(state : {locationControl: UIEventSource<Loc>}, iconStyle? : string, objectId?: string) {
const t = Translations.t.general.attribution
super(state.locationControl.map(location => {
let elementSelect = "";
if(objectId !== undefined){
const parts = objectId.split("/")
const tp = parts[0]
if(parts.length === 2 && !isNaN(Number(parts[1])) && (tp === "node" || tp === "way" || tp === "relation")){
elementSelect = "&"+ tp+"="+parts[1]
}
}
const idLink = `https://www.openstreetmap.org/edit?editor=id${elementSelect}#map=${location?.zoom ?? 0}/${location?.lat ?? 0}/${location?.lon ?? 0}`
return new SubtleButton(Svg.pencil_ui().SetStyle(iconStyle), t.editId, {url: idLink, newTab: true})
}));
}
}
export class OpenMapillary extends VariableUiElement {
constructor(state : {locationControl: UIEventSource<Loc>}, iconStyle? : string) {
const t = Translations.t.general.attribution
super( state.locationControl.map(location => {
const mapillaryLink = `https://www.mapillary.com/app/?focus=map&lat=${location?.lat ?? 0}&lng=${location?.lon ?? 0}&z=${Math.max((location?.zoom ?? 2) - 1, 1)}`
return new SubtleButton(Svg.mapillary_black_ui().SetStyle(iconStyle), t.openMapillary, {
url: mapillaryLink,
newTab: true
})
}))
}
}
export class OpenJosm extends Combine {
constructor(state : {osmConnection: OsmConnection, currentBounds: UIEventSource<BBox>,}, iconStyle? : string) {
const t = Translations.t.general.attribution
const josmState = new UIEventSource<string>(undefined)
// Reset after 15s
josmState.stabilized(15000).addCallbackD(_ => josmState.setData(undefined))
const stateIndication = new VariableUiElement(josmState.map(state => {
if (state === undefined) {
return undefined
}
state = state.toUpperCase()
if (state === "OK") {
return t.josmOpened.SetClass("thanks")
}
return t.josmNotOpened.SetClass("alert")
}));
const toggle = new Toggle(
new SubtleButton(Svg.josm_logo_ui().SetStyle(iconStyle), t.editJosm).onClick(() => {
const bounds: any = state.currentBounds.data;
if (bounds === undefined) {
return undefined
}
const top = bounds.getNorth();
const bottom = bounds.getSouth();
const right = bounds.getEast();
const left = bounds.getWest();
const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`
Utils.download(josmLink).then(answer => josmState.setData(answer.replace(/\n/g, '').trim())).catch(_ => josmState.setData("ERROR"))
}), undefined, state.osmConnection.userDetails.map(ud => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible))
super([stateIndication, toggle]);
}
}
/**
* The attribution panel shown on mobile
*/
@ -39,10 +112,7 @@ export default class CopyrightPanel extends Combine {
const t = Translations.t.general.attribution
const layoutToUse = state.layoutToUse
const josmState = new UIEventSource<string>(undefined)
// Reset after 15s
josmState.stabilized(15000).addCallbackD(_ => josmState.setData(undefined))
const iconStyle = "height: 1.5rem; width: auto"
const iconStyle = "height: 1.5rem; width: auto"
const actionButtons = [
new SubtleButton(Svg.liberapay_ui().SetStyle(iconStyle), t.donate, {
url: "https://liberapay.com/pietervdvn/",
@ -56,42 +126,9 @@ export default class CopyrightPanel extends Combine {
url: Utils.OsmChaLinkFor(31, state.layoutToUse.id),
newTab: true
}),
new VariableUiElement(state.locationControl.map(location => {
const idLink = `https://www.openstreetmap.org/edit?editor=id#map=${location?.zoom ?? 0}/${location?.lat ?? 0}/${location?.lon ?? 0}`
return new SubtleButton(Svg.pencil_ui().SetStyle(iconStyle), t.editId, {url: idLink, newTab: true})
})),
new VariableUiElement(state.locationControl.map(location => {
const mapillaryLink = `https://www.mapillary.com/app/?focus=map&lat=${location?.lat ?? 0}&lng=${location?.lon ?? 0}&z=${Math.max((location?.zoom ?? 2) - 1, 1)}`
return new SubtleButton(Svg.mapillary_black_ui().SetStyle(iconStyle), t.openMapillary, {
url: mapillaryLink,
newTab: true
})
})),
new VariableUiElement(josmState.map(state => {
if (state === undefined) {
return undefined
}
state = state.toUpperCase()
if (state === "OK") {
return t.josmOpened.SetClass("thanks")
}
return t.josmNotOpened.SetClass("alert")
})),
new Toggle(
new SubtleButton(Svg.josm_logo_ui().SetStyle(iconStyle), t.editJosm).onClick(() => {
const bounds: any = state.currentBounds.data;
if (bounds === undefined) {
return undefined
}
const top = bounds.getNorth();
const bottom = bounds.getSouth();
const right = bounds.getEast();
const left = bounds.getWest();
const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`
Utils.download(josmLink).then(answer => josmState.setData(answer.replace(/\n/g, '').trim())).catch(_ => josmState.setData("ERROR"))
}), undefined, state.osmConnection.userDetails.map(ud => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible)),
new OpenIdEditor(state, iconStyle),
new OpenMapillary(state, iconStyle),
new OpenJosm(state, iconStyle)
]
const iconAttributions = Utils.NoNull(Array.from(layoutToUse.ExtractImages()))