Documentation

This commit is contained in:
Pieter Vander Vennet 2020-07-15 13:15:36 +02:00
parent 58bcdbe17a
commit 9e43be6a07
5 changed files with 79 additions and 51 deletions

View file

@ -27,11 +27,7 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
constructor(options: { constructor(options: {
/**
* What is the priority of the question.
* By default, in the popup of a feature, only one question is shown at the same time. If multiple questions are unanswered, the question with the highest priority is asked first
*/
priority?: number
/** /**
* This is the string that is shown in the popup if this tag is missing. * This is the string that is shown in the popup if this tag is missing.
@ -42,17 +38,12 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
question?: string, question?: string,
/** /**
* Optional: * What is the priority of the question.
* if defined, this a common piece of tag that is shown in front of every mapping (except freeform) * By default, in the popup of a feature, only one question is shown at the same time. If multiple questions are unanswered, the question with the highest priority is asked first
*/ */
primer?: string, priority?: number,
tagsPreprocessor?: ((tags: any) => any),
freeform?: {
key: string, template: string,
renderTemplate: string
placeholder?: string,
extraTags?: TagsFilter,
},
/** /**
* Mappings convert a well-known tag combination into a user friendly text. * Mappings convert a well-known tag combination into a user friendly text.
* It converts e.g. 'access=yes' into 'this area can be accessed' * It converts e.g. 'access=yes' into 'this area can be accessed'
@ -65,7 +56,33 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
* *
* *
*/ */
mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[] mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[],
/**
* If one wants to render a freeform tag (thus no predefined key/values) or if there are a few well-known tags with a freeform object,
* use this.
* In the question, it'll offer a textfield
*/
freeform?: {
key: string, template: string,
renderTemplate: string
placeholder?: string,
extraTags?: TagsFilter,
},
/**
* Optional:
* if defined, this a common piece of tag that is shown in front of every mapping (except freeform)
*/
primer?: string,
/**
* In some very rare cases, tags have to be rewritten before displaying
* This function adds this
*/
tagsPreprocessor?: ((tags: any) => any)
}) { }) {
this.options = options; this.options = options;
} }

View file

@ -63,6 +63,10 @@ export class SimpleAddUI extends UIElement {
protected InnerRender(): string { protected InnerRender(): string {
const header = "<h2>Geen selectie</h2>" + const header = "<h2>Geen selectie</h2>" +
"Je klikte ergens waar er nog geen gezochte data is.<br/>"; "Je klikte ergens waar er nog geen gezochte data is.<br/>";
if (!this._userDetails.data.loggedIn) {
return header + "<a class='activate-osm-authentication'>Gelieve je aan te melden om een nieuw punt toe te voegen</a>"
}
if (this._zoomlevel.data.zoom < 19) { if (this._zoomlevel.data.zoom < 19) {
return header + "Zoom verder in om een element toe te voegen."; return header + "Zoom verder in om een element toe te voegen.";
} }
@ -71,10 +75,6 @@ export class SimpleAddUI extends UIElement {
return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen"; return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen";
} }
if (!this._userDetails.data.loggedIn) {
return header + "<a class='activate-osm-authentication'>Gelieve je aan te melden om een nieuw punt toe te voegen</a>"
}
var html = ""; var html = "";
for (const button of this._addButtons) { for (const button of this._addButtons) {
html += button.Render(); html += button.Render();

View file

@ -23,10 +23,10 @@
</div> </div>
<div id="topleft-tools"> <div id="topleft-tools">
<div id="userbadge-and-search">
<div id="userbadge">
Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is
blocking it. blocking it.
<div id="userbadge-and-search">
<div id="userbadge">
</div> </div>
<br/> <br/>
<div id="searchbox"></div> <div id="searchbox"></div>

View file

@ -50,43 +50,47 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
// ----------------- SELECT THE RIGHT QUESTSET ----------------- // ----------------- SELECT THE RIGHT QUESTSET -----------------
let defaultQuest = "buurtnatuur" let defaultLayout = "buurtnatuur"
// Run over all questsets. If a part of the URL matches a searched-for part in the layout, it'll take that as the default
for (const k in AllKnownLayouts.allSets) { for (const k in AllKnownLayouts.allSets) {
const layout = AllKnownLayouts.allSets[k]; const layout = AllKnownLayouts.allSets[k];
const possibleParts = layout.locationContains ?? []; const possibleParts = layout.locationContains ?? [];
console.log(layout.locationContains)
for (const locationMatch of possibleParts) { for (const locationMatch of possibleParts) {
if (locationMatch === "") { if (locationMatch === "") {
continue continue
} }
console.log(layout.name," -> ", locationMatch, window.location.href.indexOf(locationMatch))
if (window.location.href.toLowerCase().indexOf(locationMatch.toLowerCase()) >= 0) { if (window.location.href.toLowerCase().indexOf(locationMatch.toLowerCase()) >= 0) {
defaultQuest = layout.name; defaultLayout = layout.name;
console.log("Detected a default by URL: ", layout.name, "matches", locationMatch)
} }
} }
} }
// Read the query string to grap settings
let paramDict: any = {};
if (window.location.search) { if (window.location.search) {
const params = window.location.search.substr(1).split("&"); const params = window.location.search.substr(1).split("&");
const paramDict: any = {};
for (const param of params) { for (const param of params) {
var kv = param.split("="); var kv = param.split("=");
paramDict[kv[0]] = kv[1]; paramDict[kv[0]] = kv[1];
} }
if (paramDict.quests) {
defaultQuest = paramDict.quests
} }
if (paramDict.layout) {
defaultLayout = paramDict.quests
}
if (paramDict.test) { if (paramDict.test) {
dryRun = true; dryRun = true;
} }
}
const questSetToRender = AllKnownLayouts.allSets[defaultQuest]; const layoutToUse = AllKnownLayouts.allSets[defaultLayout];
console.log("Using quests: ", questSetToRender.name); console.log("Using layout: ", layoutToUse.name);
document.title = questSetToRender.title; document.title = layoutToUse.title;
// ----------------- Setup a few event sources ------------- // ----------------- Setup a few event sources -------------
@ -104,9 +108,9 @@ const selectedElement = new UIEventSource<any>(undefined);
const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({ const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
zoom: questSetToRender.startzoom, zoom: layoutToUse.startzoom,
lat: questSetToRender.startLat, lat: layoutToUse.startLat,
lon: questSetToRender.startLon lon: layoutToUse.startLon
}); });
@ -116,7 +120,7 @@ const saveTimeout = 30000; // After this many milliseconds without changes, save
const allElements = new ElementStorage(); const allElements = new ElementStorage();
const osmConnection = new OsmConnection(dryRun); const osmConnection = new OsmConnection(dryRun);
const changes = new Changes( const changes = new Changes(
"Beantwoorden van vragen met #MapComplete voor vragenset #" + questSetToRender.name, "Beantwoorden van vragen met #MapComplete voor vragenset #" + layoutToUse.name,
osmConnection, allElements); osmConnection, allElements);
const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement( const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
locationControl.map((location) => { locationControl.map((location) => {
@ -150,7 +154,7 @@ const flayers: FilteredLayer[] = []
let minZoom = 0; let minZoom = 0;
for (const layer of questSetToRender.layers) { for (const layer of layoutToUse.layers) {
const generateInfo = (tagsES) => { const generateInfo = (tagsES) => {
@ -165,8 +169,7 @@ for (const layer of questSetToRender.layers) {
minZoom = Math.max(minZoom, layer.minzoom); minZoom = Math.max(minZoom, layer.minzoom);
const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement, const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
generateInfo);
const addButton = { const addButton = {
name: layer.name, name: layer.name,
@ -200,7 +203,7 @@ new StrayClickHandler(bm, selectedElement, leftMessage, () => {
*/ */
selectedElement.addCallback((data) => { selectedElement.addCallback((data) => {
// Which is the applicable set? // Which is the applicable set?
for (const layer of questSetToRender.layers) { for (const layer of layoutToUse.layers) {
const applicable = layer.overpassFilter.matches(TagUtils.proprtiesToKV(data)); const applicable = layer.overpassFilter.matches(TagUtils.proprtiesToKV(data));
if (applicable) { if (applicable) {
@ -234,12 +237,12 @@ new CollapseButton("messagesbox")
var welcomeMessage = () => { var welcomeMessage = () => {
return new VariableUiElement( return new VariableUiElement(
osmConnection.userDetails.map((userdetails) => { osmConnection.userDetails.map((userdetails) => {
var login = questSetToRender.gettingStartedPlzLogin; var login = layoutToUse.gettingStartedPlzLogin;
if (userdetails.loggedIn) { if (userdetails.loggedIn) {
login = questSetToRender.welcomeBackMessage; login = layoutToUse.welcomeBackMessage;
} }
return "<div id='welcomeMessage'>" + return "<div id='welcomeMessage'>" +
questSetToRender.welcomeMessage + login + questSetToRender.welcomeTail+ layoutToUse.welcomeMessage + login + layoutToUse.welcomeTail +
"</div>"; "</div>";
}), }),
function () { function () {

View file

@ -6,4 +6,12 @@ import {WikipediaLink} from "./Customizations/Questions/WikipediaLink";
import {OsmLink} from "./Customizations/Questions/OsmLink"; import {OsmLink} from "./Customizations/Questions/OsmLink";
import {ConfirmDialog} from "./UI/ConfirmDialog"; import {ConfirmDialog} from "./UI/ConfirmDialog";
import {Imgur} from "./Logic/Imgur"; import {Imgur} from "./Logic/Imgur";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
const html = new UIEventSource<string>("Some text");
const uielement = new VariableUiElement(html);
uielement.AttachTo("maindiv")
window.setTimeout(() => {html.setData("Different text")}, 1000)