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

Further work on infobox, styling everything, removing clutter

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-06-27 03:06:51 +02:00
parent 2acd53d150
commit 0b4016b65d
48 changed files with 1283 additions and 454 deletions
Download patch file Download diff file Expand all files Collapse all files

95
index.ts
View file

@ -5,30 +5,34 @@ import {UIEventSource} from "./UI/UIEventSource";
import {UserBadge} from "./UI/UserBadge";
import {Basemap} from "./Logic/Basemap";
import {PendingChanges} from "./UI/PendingChanges";
import {FixedUiElement} from "./UI/FixedUiElement";
import {CenterMessageBox} from "./UI/CenterMessageBox";
import {Helpers} from "./Helpers";
import {KnownSet} from "./Layers/KnownSet";
import {AddButton} from "./UI/AddButton";
import {Tag} from "./Logic/TagsFilter";
import {Tag, TagsFilter, TagUtils} from "./Logic/TagsFilter";
import {FilteredLayer} from "./Logic/FilteredLayer";
import {LayerUpdater} from "./Logic/LayerUpdater";
import {LoginDependendMessage} from "./UI/LoginDependendMessage";
import {VariableUiElement} from "./UI/VariableUIElement";
import {UIElement} from "./UI/UIElement";
import {MessageBoxHandler} from "./UI/MessageBoxHandler";
import {Overpass} from "./Logic/Overpass";
import {FixedUiElement} from "./UI/FixedUiElement";
import {FeatureInfoBox} from "./UI/FeatureInfoBox";
let dryRun = false;
if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
// Set to true if testing and changes should NOT be saved
// dryRun = true;
dryRun = true;
// If you have a testfile somewhere, enable this to spoof overpass
// This should be hosted independantly, e.g. with `cd assets; webfsd -p 8080` + a CORS plugin to disable cors rules
// Overpass.testUrl = "http://127.0.0.1:8080/test.json";
Overpass.testUrl = "http://127.0.0.1:8080/test.json";
}
// ----------------- SELECT THE RIGHT QUESTSET -----------------
let questSetToRender = KnownSet.groen;
if (window.location.search) {
const params = window.location.search.substr(1).split("&");
@ -56,7 +60,12 @@ const centerMessage = new UIEventSource<string>("");
// The countdown: if set to e.g. ten, it'll start counting down. When reaching zero, changes will be saved. NB: this is implemented later, not in the eventSource
const secondsTillChangesAreSaved = new UIEventSource<number>(0);
var locationControl = new UIEventSource({
const leftMessage = new UIEventSource<() => UIElement>(undefined);
const selectedElement = new UIEventSource<any>(undefined);
const locationControl = new UIEventSource({
zoom: questSetToRender.startzoom,
lat: questSetToRender.startLat,
lon: questSetToRender.startLon
@ -65,10 +74,12 @@ var locationControl = new UIEventSource({
// ----------------- Prepare the important objects -----------------
const saveTimeout = 5000; // After this many milliseconds without changes, saves are sent of to OSM
const allElements = new ElementStorage();
const osmConnection = new OsmConnection(dryRun);
const changes = new Changes(osmConnection, allElements, centerMessage);
const changes = new Changes(
"Beantwoorden van vragen met MapComplete voor vragenset #" + questSetToRender.name,
osmConnection, allElements, centerMessage);
const bm = new Basemap("leafletDiv", locationControl);
@ -86,7 +97,7 @@ const flayers: FilteredLayer[] = []
for (const layer of questSetToRender.layers) {
const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails.data);
const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement);
const addButton = {
name: layer.name,
@ -103,23 +114,64 @@ const layerUpdater = new LayerUpdater(bm, questSetToRender.startzoom, flayers);
// ------------------ Setup various UI elements ------------
/*
const addButton = new AddButton(bm, changes, addButtons);
addButton.AttachTo("bottomRight");
addButton.Update();
*/
/**
* Show the questions and information for the selected element on the leftMessage
*/
selectedElement.addCallback((data) => {
console.log("Got selection");
// Which is the applicable set?
for (const layer of questSetToRender.layers) {
const applicable = layer.overpassFilter.matches(TagUtils.proprtiesToKV(data));
if (applicable) {
// This layer is the layer that gives the questions
leftMessage.setData(() =>
new FeatureInfoBox(
allElements.getElement(data.id),
layer.elementsToShow,
layer.questions,
changes,
osmConnection.userDetails
));
break;
}
}
new UserBadge(osmConnection.userDetails)
}
);
const pendingChanges = new PendingChanges(
changes.pendingChangesES, secondsTillChangesAreSaved, changes.isSaving);
new UserBadge(osmConnection.userDetails, pendingChanges)
.AttachTo('userbadge');
new FixedUiElement(questSetToRender.welcomeMessage)
.AttachTo("welcomeMessage");
var welcomeMessage = () => {
return new VariableUiElement(
osmConnection.userDetails.map((userdetails) => {
var login = questSetToRender.gettingStartedPlzLogin;
if (userdetails.loggedIn) {
login = questSetToRender.welcomeBackMessage;
}
return "<div id='welcomeMessage'>" +
questSetToRender.welcomeMessage + login +
"</div>";
}),
function (html) {
osmConnection.registerActivateOsmAUthenticationClass()
});
}
leftMessage.setData(welcomeMessage);
new LoginDependendMessage(osmConnection.userDetails, questSetToRender.gettingStartedPlzLogin, questSetToRender.welcomeBackMessage)
.AttachTo("gettingStartedBox");
new PendingChanges(changes, secondsTillChangesAreSaved)
.AttachTo("pendingchangesbox");
var messageBox = new MessageBoxHandler(leftMessage, () => {selectedElement.setData(undefined)});
new CenterMessageBox(
questSetToRender.startzoom,
@ -130,11 +182,14 @@ new CenterMessageBox(
.AttachTo("centermessage");
Helpers.SetupAutoSave(changes, secondsTillChangesAreSaved);
Helpers.SetupAutoSave(changes, secondsTillChangesAreSaved, saveTimeout);
Helpers.LastEffortSave(changes);
Helpers.registerActivateOsmAUthenticationClass(osmConnection);
osmConnection.registerActivateOsmAUthenticationClass();
// --------------- Send a ping to start various action --------
locationControl.ping();
messageBox.update();