midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge latest master

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-20 21:52:13 +02:00
parent 00d95c4be1 9d077890bd
commit 63b4fe0ee1
24 changed files with 324 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Customizations/Layers/BikeParkings.ts
View file

@ -10,7 +10,7 @@ import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWi
export default class BikeParkings extends LayerDefinition {
constructor() {
super();
this.name = "bike_parking";
this.name = "bike parking";
this.icon = "./assets/bike/parking.svg";
this.overpassFilter = new Tag("amenity", "bicycle_parking");
this.newElementTags = [
@ -20,10 +20,10 @@ export default class BikeParkings extends LayerDefinition {
this.minzoom = 13;
this.style = this.generateStyleFunction();
this.title = new FixedText("Fietsparking");
this.title = new FixedText("Bicycle parking");
this.elementsToShow = [
new ImageCarouselWithUploadConstructor(),
new OperatorTag(),
// new OperatorTag(),
new ParkingType()
];
@ -36,7 +36,8 @@ export default class BikeParkings extends LayerDefinition {
color: "#00bb00",
icon: L.icon({
iconUrl: self.icon,
iconSize: [50, 50]
iconSize: [50, 50],
iconAnchor: [25,50]
})
};
};

112
Customizations/Layers/BikeShop.ts Normal file
View file

@ -0,0 +1,112 @@
import {TagRenderingOptions} from "../TagRendering";
import {LayerDefinition} from "../LayerDefinition";
import {Tag} from "../../Logic/TagsFilter";
import L from "leaflet";
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
import {NameQuestion} from "../Questions/NameQuestion";
export class BikeShop extends LayerDefinition {
private readonly sellsBikes = new Tag("service:bicycle:retail", "yes");
private readonly repairsBikes = new Tag("service:bicycle:repair", "yes");
constructor() {
super(
{
name: "bike shop or repair",
icon: "assets/bike/repair_shop.svg",
minzoom: 14,
overpassFilter: new Tag("shop", "bicycle"),
newElementTags: [new Tag("shop", "bicycle")]
}
);
this.title = new TagRenderingOptions({
mappings: [
{k: this.sellsBikes, txt: "Bicycle shop"},
{k: new Tag("service:bicycle:retail", "no"), txt: "Bicycle repair"},
{k: new Tag("service:bicycle:retail", ""), txt: "Bicycle repair/shop"},
]
})
this.elementsToShow = [
new ImageCarouselWithUploadConstructor(),
new TagRenderingOptions({
question: "What is the name of this bicycle shop?",
freeform: {
key: "name",
renderTemplate: "The name of this bicycle shop is {name}",
template: "The name of this bicycle shop is $$$"
}
}),
new TagRenderingOptions({
question: "Can one buy a bike here?",
mappings: [
{k: this.sellsBikes, txt: "Bikes are sold here"},
{k: new Tag("service:bicycle:retail", "no"), txt: "No bikes are sold here"},
]
}),
new TagRenderingOptions({
question: "Can one buy a new bike here?",
mappings: [
{k: new Tag("service:bicycle:second_hand", "yes"), txt: "Second-hand bikes are sold here"},
{k: new Tag("service:bicycle:second_hand", "only"), txt: "All bicycles sold here are second-hand"},
{k: new Tag("service:bicycle:second_hand", "no"), txt: "Only brand new bikes are sold here"},
]
}).OnlyShowIf(this.sellsBikes),
new TagRenderingOptions({
question: "Does this shop repair bicycles?",
mappings: [
{k: this.repairsBikes, txt: "Bikes are repaired here, by the shop owner (for a fee)"},
{k: new Tag("service:bicycle:repair", "only_sold"), txt: "Only bikes that were bought here, are repaired"},
{k: new Tag("service:bicycle:repair", "brand"), txt: "Only bikes of a fixed brand are repaired here"},
{k: new Tag("service:bicycle:repair", "no"), txt: "Bikes are not repaired here"},
]
}),
new TagRenderingOptions({
question: "Can one hire a new bike here?",
mappings: [
{k: new Tag("service:bicycle:rental", "yes"), txt: "Bikes can be rented here"},
{k: new Tag("service:bicycle:rental", "no"), txt: "Bikes cannot be rented here"},
]
}).OnlyShowIf(this.sellsBikes),
new TagRenderingOptions({
question: "Are there tools here so that one can repair their own bike?",
mappings: [
{k: new Tag("service:bicycle:diy", "yes"), txt: "Tools for DIY are available here"},
{k: new Tag("service:bicycle:diy", "no"), txt: "No tools for DIY are available here"},
]
}),
]
this.style = (tags) => {
let icon = "assets/bike/repair_shop.svg";
if (this.sellsBikes.matchesProperties(tags)) {
icon = "assets/bike/shop.svg";
}
return {
color: "#ff0000",
icon: L.icon({
iconUrl: icon,
iconSize: [50, 50],
iconAnchor: [25, 50]
})
}
}
}
}

9
Customizations/Layers/BikeStations.ts
View file

@ -73,14 +73,19 @@ export default class BikeStations extends LayerDefinition {
}
}
} else {
iconName = "repair_station.svg"
if (!self.pump.matchesProperties(properties)) {
iconName = "repair_station.svg"
} else {
iconName = "repair_station.svg"
}
}
const iconUrl = `./assets/bike/${iconName}`
return {
color: "#00bb00",
icon: L.icon({
iconUrl: iconUrl,
iconSize: [50, 50]
iconSize: [50, 50],
iconAnchor: [25,50]
})
};
};

7
Customizations/Layers/DrinkingWater.ts
View file

@ -10,8 +10,8 @@ export class DrinkingWater extends LayerDefinition {
constructor() {
super();
this.name = "drinking_water";
this.icon = "./assets/bug.svg";
this.name = "drinking water";
this.icon = "./assets/bike/drinking_water.svg";
this.overpassFilter = new Or([
new And([
@ -52,7 +52,8 @@ export class DrinkingWater extends LayerDefinition {
color: "#00bb00",
icon: new L.icon({
iconUrl: self.icon,
iconSize: [40, 40]
iconSize: [50, 50],
iconAnchor: [25,50]
})
};
};

5
Customizations/Layouts/Cyclofix.ts
View file

@ -2,7 +2,8 @@ import {Layout} from "../Layout";
import BikeParkings from "../Layers/BikeParkings";
import BikeServices from "../Layers/BikeStations";
import {GhostBike} from "../Layers/GhostBike";
import {DrinkingWater, DrinkingWaterLayer} from "../Layers/DrinkingWater";
import {DrinkingWater} from "../Layers/DrinkingWater";
import {BikeShop} from "../Layers/BikeShop";
export default class Cyclofix extends Layout {
@ -10,7 +11,7 @@ export default class Cyclofix extends Layout {
super(
"pomp",
"Cyclofix bicycle infrastructure",
[new GhostBike(), new BikeServices(), new BikeParkings(), new DrinkingWater()],
[new BikeServices(), new BikeShop(), new DrinkingWater(), new BikeParkings()],
16,
50.8465573,
4.3516970,

2
Customizations/Questions/bike/StationOperator.ts
View file

@ -18,7 +18,7 @@ export default class BikeStationOperator extends TagRenderingOptions {
{k: new Tag("operator", "Stad Halle"), txt: "Stad Halle"},
{k: new Tag("operator", "Saint Gilles - Sint Gillis"), txt: "Saint Gilles - Sint Gillis"},
{k: new Tag("operator", "Jette"), txt: "Jette"},
{k: new Tag("operator", "private"), txt: "Beheer door een privépersoon"}
{k: new Tag("operator", "private"), txt: "Operated by a private individual"}
]
});
}

2
Customizations/Questions/bike/StationPumpTools.ts
View file

@ -6,7 +6,7 @@ export default class BikeStationPumpTools extends TagRenderingOptions {
constructor() {
super({
priority: 15,
question: "Which services are available at this bike station?",
question: "Which services are available here?",
mappings: [
{k: new And([new Tag("service:bicycle:tools", "no"), new Tag("service:bicycle:pump", "yes")]), txt: "There is only a pump available."},
{k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "no")]), txt: "There are only tools (screwdrivers, pliers...) available."},

4
Customizations/TagRendering.ts
View file

@ -270,9 +270,9 @@ class TagRendering extends UIElement implements TagDependantUIElement {
const cancelContents = this._editMode.map((isEditing) => {
if (isEditing) {
return "<span class='skip-button'>Annuleren</span>";
return "<span class='skip-button'>Cancel</span>";
} else {
return "<span class='skip-button'>Overslaan (Ik weet het niet zeker...)</span>";
return "<span class='skip-button'>Skip this question</span>";
}
});
// And at last, set up the skip button

5
Logic/StrayClickHandler.ts
View file

@ -32,15 +32,16 @@ export class StrayClickHandler {
self._lastMarker = L.marker([lastClick.lat, lastClick.lon]);
const uiElement = uiToShow();
const popup = L.popup().setContent(uiElement.Render());
uiElement.Activate();
uiElement.Update();
uiElement.Activate();
self._lastMarker.addTo(map);
self._lastMarker.bindPopup(popup).openPopup();
self._lastMarker.on("click", () => {
leftMessage.setData(self._uiToShow);
});
uiElement.Update();
uiElement.Activate();
});
selectElement.addCallback(() => {

19
UI/Base/CheckBox.ts Normal file
View file

@ -0,0 +1,19 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource";
export class CheckBox extends UIElement{
private data: UIEventSource<boolean>;
constructor(data: UIEventSource<boolean>) {
super(data);
this.data = data;
}
protected InnerRender(): string {
return "Current val: "+this.data.data;
}
}

6
UI/CenterMessageBox.ts
View file

@ -40,11 +40,11 @@ export class CenterMessageBox extends UIElement {
return this._centermessage.data;
}
if (this._queryRunning.data) {
return "Data wordt geladen...";
return "Data is loading...";
} else if (this._zoomInMore.data) {
return "Zoom in om de data te zien en te bewerken";
return "Zoom in more to see the data";
}
return "Klaar!";
return "Done!";
}

6
UI/Image/ImageCarousel.ts
View file

@ -23,10 +23,10 @@ export class ImageCarouselConstructor implements TagDependantUIElementConstructo
return 0;
}
construct(tags: UIEventSource<any>, changes: Changes): TagDependantUIElement {
return new ImageCarousel(tags, changes);
construct(dependencies: { tags: UIEventSource<any>, changes: Changes }): TagDependantUIElement {
return new ImageCarousel(dependencies.tags, dependencies.changes);
}
}
export class ImageCarousel extends TagDependantUIElement {

47
UI/ImageUploadFlow.ts
View file

@ -9,7 +9,6 @@ import {VariableUiElement} from "./Base/VariableUIElement";
export class ImageUploadFlow extends UIElement {
private _licensePicker: UIElement;
private _selectedLicence: UIEventSource<string>;
private _licenseExplanation: UIElement;
private _isUploading: UIEventSource<number> = new UIEventSource<number>(0)
private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
private _userdetails: UIEventSource<UserDetails>;
@ -31,12 +30,11 @@ export class ImageUploadFlow extends UIElement {
this._uploadOptions = uploadOptions;
this.ListenTo(this._isUploading);
const licensePicker = new DropDown("Jouw foto wordt gepubliceerd ",
const licensePicker = new DropDown("The picture is published ",
[
{value: "CC0", shown: "in het publiek domein"},
{value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"},
{value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"}
{value: "CC0", shown: "in the public domain"},
{value: "CC-BY-SA 4.0", shown: "with a CC-BY-SA license"},
{value: "CC-BY 4.0", shown: "with a CC-BY license"}
],
preferedLicense
);
@ -44,48 +42,37 @@ export class ImageUploadFlow extends UIElement {
this._selectedLicence = licensePicker.GetValue();
const licenseExplanations = {
"CC-BY-SA 4.0":
"<b>Creative Commonse met naamsvermelding en gelijk delen</b><br/>" +
"Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden én ze afgeleide werken met deze licentie en attributie delen.",
"CC-BY 4.0":
"<b>Creative Commonse met naamsvermelding</b> <br/>" +
"Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden",
"CC0":
"<b>Geen copyright</b><br/> Je foto mag door iedereen voor alles gebruikt worden"
}
this._licenseExplanation = new VariableUiElement(
this._selectedLicence.map((license) => {
return licenseExplanations[license]
})
);
}
InnerRender(): string {
if (!this._userdetails.data.loggedIn) {
return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden</div>";
return "<div class='activate-osm-authentication'>Please log in to add a picture</div>";
}
let uploadingMessage = "";
if (this._isUploading.data == 1) {
return "<b>Bezig met een foto te uploaden...</b>"
uploadingMessage = "<b>Uploading a picture...</b>"
}
if (this._isUploading.data > 0) {
return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>"
uploadingMessage = "<b>Uploading multiple pictures, " + this._isUploading.data + " left...</b>"
}
return "" +
"<div class='imageflow'>" +
"<label for='fileselector-" + this.id + "'>" +
"<div class='imageflow-file-input-wrapper'>" +
"<img src='./assets/camera-plus.svg' alt='upload image'/> " +
"<span class='imageflow-add-picture'>Voeg foto toe</span>" +
"<div class='break'></div>"+
"<span class='imageflow-add-picture'>Add a picture</span>" +
"<div class='break'></div>" +
"</div>" +
this._licensePicker.Render() +
this._licensePicker.Render() + "<br/>" +
uploadingMessage +
"</label>" +
"<input id='fileselector-" + this.id + "' " +

2
UI/MessageBoxHandler.ts
View file

@ -22,7 +22,7 @@ export class MessageBoxHandler {
}
}
new VariableUiElement(new UIEventSource<string>("<h2>Naar de kaart</h2>"),
new VariableUiElement(new UIEventSource<string>("<h2>Return to the map</h2>"),
() => {
document.getElementById("to-the-map").onclick = function () {
uielement.setData(undefined);

2
UI/SaveButton.ts
View file

@ -19,7 +19,7 @@ export class SaveButton extends UIElement {
) {
return "<span class='save-non-active'>Opslaan</span>"
}
return "<span class='save'>Opslaan</span>";
return "<span class='save'>Save</span>";
}
}

8
UI/SearchAndGo.ts
View file

@ -9,7 +9,7 @@ import {VariableUiElement} from "./Base/VariableUIElement";
export class SearchAndGo extends UIElement {
private _placeholder = new UIEventSource("Zoek naar een locatie...")
private _placeholder = new UIEventSource("Search a location...")
private _searchField = new TextField<string>({
placeholder: new VariableUiElement(this._placeholder),
fromString: str => str,
@ -41,7 +41,7 @@ export class SearchAndGo extends UIElement {
private RunSearch() {
const searchString = this._searchField.GetValue().data;
this._searchField.Clear();
this._placeholder.setData("Bezig met zoeken...");
this._placeholder.setData("Searching...");
const self = this;
Geocoding.Search(searchString, this._map, (result) => {
@ -56,10 +56,10 @@ export class SearchAndGo extends UIElement {
[bb[1], bb[3]]
]
self._map.map.fitBounds(bounds);
this._placeholder.setData("Zoek naar een locatie...");
this._placeholder.setData("Search a location...");
},
() => {
this._placeholder.setData("Niets gevonden: er ging iets mis");
this._placeholder.setData("Something went wrong. Try again.");
});
}

12
UI/SimpleAddUI.ts
View file

@ -42,7 +42,7 @@ export class SimpleAddUI extends UIElement {
// <button type='button'> looks SO retarded
// the default type of button is 'submit', which performs a POST and page reload
const button =
new Button(new FixedUiElement("Voeg hier een " + option.name + " toe"),
new Button(new FixedUiElement("Add a " + option.name + " here"),
this.CreatePoint(option));
this._addButtons.push(button);
}
@ -61,18 +61,18 @@ export class SimpleAddUI extends UIElement {
}
InnerRender(): string {
const header = "<h2>Geen selectie</h2>" +
"Je klikte ergens waar er nog geen gezochte data is.<br/>";
const header = "<h2>No data here</h2>" +
"You clicked somewhere where no data is known yet.<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>"
return header + "<a class='activate-osm-authentication'>Please log in to add a new point</a>"
}
if (this._zoomlevel.data.zoom < 19) {
return header + "Zoom verder in om een element toe te voegen.";
return header + "Zoom in further to add a point.";
}
if (this._dataIsLoading.data) {
return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen";
return header + "The data is still loading. Please wait a bit before you add a new point";
}
var html = "";

2
UI/UserBadge.ts
View file

@ -61,7 +61,7 @@ export class UserBadge extends UIElement {
InnerRender(): string {
const user = this._userDetails.data;
if (!user.loggedIn) {
return "<div class='activate-osm-authentication'>Klik hier om aan te melden bij OSM</div>";
return "<div class='activate-osm-authentication'>Login with OpenStreetMap</div>";
}

5
assets/bike/pump_broken.svg → assets/bike/broken_pump.svg
View file

@ -9,9 +9,10 @@
<rect x="34.3118" y="72.5698" width="28" height="5" fill="white"/>
<rect x="65.3118" y="60.5698" width="4" height="8" fill="white"/>
<rect x="68.3118" y="64.5699" width="3" height="4" fill="white"/>
<rect x="66" y="72.2385" width="21.8167" height="3.68967" transform="rotate(-44.3049 66 72.2385)" fill="#F00D0D"/>
<rect x="56" y="42" width="5" height="10" fill="#171615"/>
</g>
<rect x="68.4303" y="56.8712" width="22.1163" height="3.52552" transform="rotate(43.5782 68.4303 56.8712)" fill="#F00D0D"/>
<rect x="72.4167" y="53.8615" width="29.0549" height="7.85787" transform="rotate(43.5782 72.4167 53.8615)" fill="#F00D0D"/>
<path d="M68.2141 73.9097L88.6128 54L94.0003 59.5199L73.6016 79.4295L68.2141 73.9097Z" fill="#F00D0D"/>
<defs>
<filter id="filter0_d" x="-3" y="2" width="102.479" height="102.479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

18
assets/bike/drinking_water.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="98" height="124" viewBox="0 0 98 124" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M55.0445 114.094C53.2614 117.981 47.7386 117.981 45.9555 114.094L15.2124 47.085C13.6928 43.7729 16.1129 40 19.7569 40L81.2431 40C84.8871 40 87.3072 43.7729 85.7876 47.085L55.0445 114.094Z" fill="#6BC4F7"/>
<circle cx="49" cy="49" r="49" fill="#6BC4F7"/>
<g filter="url(#filter0_d)">
<path d="M79 41.8705C79 39.3976 77.4079 35.6726 74.1327 30.4823C71.8064 26.7956 69.5171 23.8005 69.4208 23.6747C69.0964 23.2513 68.5726 23 68.0144 23C67.4562 23 66.9322 23.2514 66.6078 23.6748C66.3787 23.9738 61.828 29.939 59.0942 35.3688C54.8849 28.8794 50.9494 23.7307 50.9067 23.6748C50.5821 23.2513 50.0582 23 49.5 23C48.9418 23 48.4179 23.2513 48.0934 23.6747C48.0468 23.7357 43.367 29.8581 38.753 37.1701C38.2587 37.9536 37.7856 38.7192 37.3295 39.4706C34.9483 35.6504 32.5162 32.4661 32.3922 32.3043C32.0677 31.8809 31.5438 31.6296 30.9856 31.6296C30.4274 31.6296 29.9036 31.8809 29.5791 32.3043C29.4828 32.43 27.1935 35.4252 24.8672 39.1119C21.5921 44.3021 20 48.0271 20 50.5C20 55.6193 24.0504 59.8732 29.3205 60.6234C30.1402 70.3329 38.8775 78 49.5 78C60.6619 78 69.7429 69.5347 69.7429 59.1295C69.7429 57.2539 69.2077 54.9089 68.1449 52.1097C74.1423 52.0443 79 47.4766 79 41.8705V41.8705ZM23.457 50.5C23.457 49.457 24.0257 46.8053 27.8344 40.7656C28.9755 38.9562 30.126 37.2947 30.9856 36.0929C32.1576 37.7318 33.8718 40.2278 35.3741 42.8008C31.9223 48.9002 29.9183 53.7824 29.3954 57.3607C26.0053 56.6784 23.457 53.8613 23.457 50.5V50.5ZM49.5 74.7773C40.2443 74.7773 32.7142 67.7578 32.7142 59.1295C32.7142 56.3792 34.2766 50.6239 41.7201 38.8241C44.7375 34.0407 47.784 29.7745 49.5 27.4354C51.213 29.7702 54.2519 34.0258 57.2673 38.8042C64.7212 50.6167 66.2857 56.3773 66.2857 59.1296C66.2858 67.7578 58.7557 74.7773 49.5 74.7773V74.7773ZM68.0144 48.8887C67.5836 48.8887 67.156 48.8549 66.7362 48.7879C65.3713 45.8533 63.5372 42.506 61.2717 38.8163C62.8077 35.0043 66.1199 30.1147 68.0149 27.4638C68.8707 28.6601 70.0148 30.3125 71.153 32.1162C74.9727 38.1694 75.543 40.8257 75.543 41.8705C75.543 45.7402 72.1656 48.8887 68.0144 48.8887V48.8887Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d" x="16" y="23" width="67" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

83
assets/bike/parking.svg
View file

@ -1,86 +1,11 @@
<svg width="97" height="123" viewBox="0 0 97 123" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M52.1412 111.419C50.4633 115.605 44.5366 115.605 42.8588 111.419L24.7014 66.1099C23.385 62.8252 25.8039 59.25 29.3426 59.25L65.6574 59.25C69.1962 59.25 71.615 62.8252 70.2986 66.11L52.1412 111.419Z" fill="#5675DF"/>
<ellipse cx="48.5" cy="47.5" rx="48.5" ry="47.5" fill="#5675DF"/>
<path d="M52.1412 111.419C50.4633 115.605 44.5366 115.605 42.8588 111.419L24.7014 66.1099C23.385 62.8252 25.8039 59.25 29.3426 59.25L65.6574 59.25C69.1962 59.25 71.615 62.8252 70.2986 66.11L52.1412 111.419Z" fill="#1647F8"/>
<ellipse cx="48.5" cy="47.5" rx="48.5" ry="47.5" fill="#1647F8"/>
<g filter="url(#filter0_d)">
<circle cx="39" cy="66" r="2" stroke="white" stroke-width="2"/>
<path d="M42.2812 53.1875V71H36.2812V25.5H53.0625C58.0417 25.5 61.9375 26.7708 64.75 29.3125C67.5833 31.8542 69 35.2188 69 39.4062C69 43.8229 67.6146 47.2292 64.8438 49.625C62.0938 52 58.1458 53.1875 53 53.1875H42.2812ZM42.2812 48.2812H53.0625C56.2708 48.2812 58.7292 47.5312 60.4375 46.0312C62.1458 44.5104 63 42.3229 63 39.4688C63 36.7604 62.1458 34.5938 60.4375 32.9688C58.7292 31.3438 56.3854 30.5 53.4062 30.4375H42.2812V48.2812Z" fill="white"/>
</g>
<g filter="url(#filter1_d)">
<path d="M37.375 67H25L31.75 51.4H38.5H43.375H48.625M48.625 51.4L46.75 47H49.375H52M48.625 51.4L49.375 53.4L50.875 56.6L55 67M48.625 51.4L45.0625 57.4L42.925 61M41.5 63.4L42.925 61M34.375 55.8L38.125 64.6L30.625 47L32.875 51.8M40.375 65.4L42.925 61" stroke="white" stroke-width="2"/>
</g>
<g filter="url(#filter2_d)">
<circle cx="23" cy="67" r="9" stroke="white" stroke-width="2"/>
</g>
<g filter="url(#filter3_d)">
<circle cx="55" cy="67" r="9" stroke="white" stroke-width="2"/>
</g>
<path d="M61 77V59.0476V55.9524L62.4814 54.4851C64.4301 52.5549 67.5699 52.5549 69.5186 54.4851L71 55.9524V58.4286V77" stroke="white" stroke-width="2"/>
<line x1="66" y1="53" x2="66" y2="16" stroke="white" stroke-width="2"/>
<g filter="url(#filter4_d)">
<circle cx="66" cy="23" r="13" fill="white"/>
</g>
<g filter="url(#filter5_d)">
<circle cx="66" cy="23" r="11" fill="#496DEB"/>
</g>
<g filter="url(#filter6_d)">
<path d="M64.1729 24.9902V30H62.4854V17.2031H67.2051C68.6055 17.2031 69.7012 17.5605 70.4922 18.2754C71.2891 18.9902 71.6875 19.9365 71.6875 21.1143C71.6875 22.3564 71.2979 23.3145 70.5186 23.9883C69.7451 24.6562 68.6348 24.9902 67.1875 24.9902H64.1729ZM64.1729 23.6104H67.2051C68.1074 23.6104 68.7988 23.3994 69.2793 22.9775C69.7598 22.5498 70 21.9346 70 21.1318C70 20.3701 69.7598 19.7607 69.2793 19.3037C68.7988 18.8467 68.1396 18.6094 67.3018 18.5918H64.1729V23.6104Z" fill="white"/>
</g>
<line x1="43" y1="78" x2="72" y2="78" stroke="white" stroke-width="2"/>
<defs>
<filter id="filter0_d" x="32" y="63" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="19.4777" y="46" width="40.4518" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="9" y="57" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="41" y="57" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter4_d" x="49" y="10" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter5_d" x="51" y="12" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter6_d" x="58.4854" y="17.2031" width="17.2021" height="20.7969" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_d" x="32.2812" y="25.5" width="40.7188" height="53.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

93
assets/bike/parking_old.svg Normal file
View file

@ -0,0 +1,93 @@
<svg width="97" height="123" viewBox="0 0 97 123" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M52.1412 111.419C50.4633 115.605 44.5366 115.605 42.8588 111.419L24.7014 66.1099C23.385 62.8252 25.8039 59.25 29.3426 59.25L65.6574 59.25C69.1962 59.25 71.615 62.8252 70.2986 66.11L52.1412 111.419Z" fill="#5675DF"/>
<ellipse cx="48.5" cy="47.5" rx="48.5" ry="47.5" fill="#5675DF"/>
<g filter="url(#filter0_d)">
<circle cx="39" cy="66" r="2" stroke="white" stroke-width="2"/>
</g>
<g filter="url(#filter1_d)">
<path d="M37.375 67H25L31.75 51.4H38.5H43.375H48.625M48.625 51.4L46.75 47H49.375H52M48.625 51.4L49.375 53.4L50.875 56.6L55 67M48.625 51.4L45.0625 57.4L42.925 61M41.5 63.4L42.925 61M34.375 55.8L38.125 64.6L30.625 47L32.875 51.8M40.375 65.4L42.925 61" stroke="white" stroke-width="2"/>
</g>
<g filter="url(#filter2_d)">
<circle cx="23" cy="67" r="9" stroke="white" stroke-width="2"/>
</g>
<g filter="url(#filter3_d)">
<circle cx="55" cy="67" r="9" stroke="white" stroke-width="2"/>
</g>
<path d="M61 77V59.0476V55.9524L62.4814 54.4851C64.4301 52.5549 67.5699 52.5549 69.5186 54.4851L71 55.9524V58.4286V77" stroke="white" stroke-width="2"/>
<line x1="66" y1="53" x2="66" y2="16" stroke="white" stroke-width="2"/>
<g filter="url(#filter4_d)">
<circle cx="66" cy="23" r="13" fill="white"/>
</g>
<g filter="url(#filter5_d)">
<circle cx="66" cy="23" r="11" fill="#496DEB"/>
</g>
<g filter="url(#filter6_d)">
<path d="M64.1729 24.9902V30H62.4854V17.2031H67.2051C68.6055 17.2031 69.7012 17.5605 70.4922 18.2754C71.2891 18.9902 71.6875 19.9365 71.6875 21.1143C71.6875 22.3564 71.2979 23.3145 70.5186 23.9883C69.7451 24.6562 68.6348 24.9902 67.1875 24.9902H64.1729ZM64.1729 23.6104H67.2051C68.1074 23.6104 68.7988 23.3994 69.2793 22.9775C69.7598 22.5498 70 21.9346 70 21.1318C70 20.3701 69.7598 19.7607 69.2793 19.3037C68.7988 18.8467 68.1396 18.6094 67.3018 18.5918H64.1729V23.6104Z" fill="white"/>
</g>
<line x1="43" y1="78" x2="72" y2="78" stroke="white" stroke-width="2"/>
<defs>
<filter id="filter0_d" x="32" y="63" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="19.4777" y="46" width="40.4518" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="9" y="57" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="41" y="57" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter4_d" x="49" y="10" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter5_d" x="51" y="12" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter6_d" x="58.4854" y="17.2031" width="17.2021" height="20.7969" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

12
clean.sh Executable file
View file

@ -0,0 +1,12 @@
#! /bin/bash
rm *.js
rm Logic/*.js
rm Logic/*.js
rm Logic/*/*.js
rm Logic/*/*/*.js
rm UI/*.js
rm UI/*/*.js
rm UI/*/*/*.js
rm Customizations/*.js
rm Customizations/*/*.js
rm Customizations/*/*/*.js

25
test.ts
View file

@ -1,24 +1 @@
import {UIEventSource} from "./UI/UIEventSource";
import {Changes} from "./Logic/Changes";
import {OsmConnection} from "./Logic/OsmConnection";
import {ElementStorage} from "./Logic/ElementStorage";
import {WikipediaLink} from "./Customizations/Questions/WikipediaLink";
import {OsmLink} from "./Customizations/Questions/OsmLink";
import {ConfirmDialog} from "./UI/ConfirmDialog";
import {Imgur} from "./Logic/Imgur";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import {TextField} from "./UI/Input/TextField";
import {FixedInputElement} from "./UI/Input/FixedInputElement";
import {RadioButton} from "./UI/Input/RadioButton";
import {DropDown} from "./UI/Input/DropDown";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
const dropdown = new RadioButton<string>(
[new FixedInputElement("5","5"),
new TextField({
toString: ((str) => str),
fromString: ((str) => str),
})]
).AttachTo("maindiv");
const value = dropdown.GetValue();
value.setData("asldkjvmqlksjdf")
console.log("Hello world")