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

Add various bug fixes and improvements

Browse source
This commit is contained in:
pietervdvn 2021-01-21 23:39:31 +01:00
parent 15a9441b1d
commit 6c4b15e33d
18 changed files with 99 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
InitUiElements.ts
View file

@ -147,6 +147,8 @@ export class InitUiElements {
continue; continue;
} }
console.log("Creating the featureInfobox");
let start = new Date()
// This layer is the layer that gives the questions // This layer is the layer that gives the questions
const featureBox = new FeatureInfoBox( const featureBox = new FeatureInfoBox(
State.state.allElements.getEventSourceById(data.id), State.state.allElements.getEventSourceById(data.id),
@ -158,6 +160,8 @@ export class InitUiElements {
hashText: feature.properties.id.replace("/", "_"), hashText: feature.properties.id.replace("/", "_"),
titleText: featureBox.title titleText: featureBox.title
}); });
let end = new Date();
console.log("Creating featureInfoBox took", (end.getTime() - start.getTime()) , "ms")
break; break;
} }
} }
@ -290,14 +294,15 @@ export class InitUiElements {
const fullOptions2 = new FullWelcomePaneWithTabs(); const fullOptions2 = new FullWelcomePaneWithTabs();
if (Hash.hash.data === undefined) { if (Hash.Current() === "") {
State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"}) State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"})
} }
// ?-Button on Mobile, opens full screen layer with close-button at the bottom // ?-Button on Mobile, opens full screen layer with close-button at the bottom
Svg.help_svg() Svg.help_svg()
.SetClass("open-welcome-button block rounded-3xl overflow-hidden shadow ml-3" ) .SetClass("open-welcome-button block rounded-3xl overflow-hidden shadow ml-3")
.onClick(() => { .onClick(() => {
State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"}) State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"})
}).AttachTo("help-button-mobile"); }).AttachTo("help-button-mobile");
@ -407,12 +412,17 @@ export class InitUiElements {
source.features.addCallbackAndRun((featuresFreshness: { feature: any, freshness: Date }[]) => { source.features.addCallbackAndRun((featuresFreshness: { feature: any, freshness: Date }[]) => {
if(featuresFreshness === undefined){ if (featuresFreshness === undefined) {
return; return;
} }
let features = featuresFreshness.map(ff => ff.feature); let features = featuresFreshness.map(ff => ff.feature);
features.forEach(feature => { features.forEach(feature => {
State.state.allElements.addElement(feature); State.state.allElements.addElement(feature);
if(Hash.hash.data === feature.properties.id.replace("/","_")){
State.state.selectedElement.setData(feature);
}
}) })
MetaTagging.addMetatags(features); MetaTagging.addMetatags(features);
}) })

3
State.ts
View file

@ -81,6 +81,7 @@ export default class State {
The latest element that was selected - used to generate the right UI at the right place The latest element that was selected - used to generate the right UI at the right place
*/ */
public readonly selectedElement = new UIEventSource<any>(undefined) public readonly selectedElement = new UIEventSource<any>(undefined)
publ
public readonly featureSwitchUserbadge: UIEventSource<boolean>; public readonly featureSwitchUserbadge: UIEventSource<boolean>;
public readonly featureSwitchSearch: UIEventSource<boolean>; public readonly featureSwitchSearch: UIEventSource<boolean>;
@ -209,7 +210,7 @@ export default class State {
if (selected === undefined) { if (selected === undefined) {
h.setData(""); h.setData("");
} else { } else {
h.setData(selected.id) h.setData(selected.id.replace("/","_"))
} }
} }
) )

6
UI/Base/Combine.ts
View file

@ -25,7 +25,11 @@ export default class Combine extends UIElement {
console.error("Not a UI-element", ui); console.error("Not a UI-element", ui);
return ""; return "";
} }
return ui.Render(); let rendered = ui.Render();
if(ui.IsEmpty()){
return "";
}
return rendered;
}).join(""); }).join("");
} }

2
UI/Base/Img.ts
View file

@ -12,7 +12,7 @@ export default class Img {
return `data:image/svg+xml;base64,${(btoa(source))}`; return `data:image/svg+xml;base64,${(btoa(source))}`;
} }
static AsImageElement(source: string, css_class: string): string{ static AsImageElement(source: string, css_class: string = ""): string{
return `<img class="${css_class}" alt="" src="${Img.AsData(source)}">`; return `<img class="${css_class}" alt="" src="${Img.AsData(source)}">`;
} }
} }

18
UI/Base/ScrollableFullScreen.ts
View file

@ -8,25 +8,27 @@ import Ornament from "./Ornament";
* Wraps some contents into a panel that scrolls the content _under_ the title * Wraps some contents into a panel that scrolls the content _under_ the title
*/ */
export default class ScrollableFullScreen extends UIElement { export default class ScrollableFullScreen extends UIElement {
private _component: Combine; private _component: UIElement;
constructor(title: UIElement, content: UIElement) { constructor(title: UIElement, content: UIElement) {
super(); super();
const returnToTheMap = Svg.back_svg().onClick(() => { const returnToTheMap = Svg.back_ui().onClick(() => {
State.state.fullScreenMessage.setData(undefined); State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined); State.state.selectedElement.setData(undefined);
}).SetClass("featureinfobox-back-to-the-map only-on-mobile mb-2") }).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
title.SetClass("block w-full") title.SetClass("block w-full")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("sm:hidden")
this._component = new Combine([ this._component = new Combine([
new Combine([returnToTheMap, title]).SetClass("border-b-2 border-black shadow sm:shadow-none fixed sm:relative top-0 left-0 right-0 z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-hidden"), new Combine([returnToTheMap, title])
.AddClass("border-b-2 border-black shadow sm:shadow-none z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
new Combine(["<span>", content, "</span>", ornament]) new Combine(["<span>", content, "</span>", ornament])
.SetClass("block relative pt-16 sm:pt-4 w-full max-h-screen sm:max-h-65vh landscape:max-h-screen overflow-y-auto overflow-x-hidden"), .SetClass("block p-2 sm:pt-4 w-full max-h-screen landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]) ]).SetClass("block flex flex-col fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
this.SetClass("block flex flex-col");
} }

2
UI/BigComponents/SearchAndGo.ts
View file

@ -22,7 +22,7 @@ export default class SearchAndGo extends UIElement {
); );
private _foundEntries = new UIEventSource([]); private _foundEntries = new UIEventSource([]);
private _goButton = Svg.search_ui().SetClass('search-go'); private _goButton = Svg.search_ui().AddClass('w-8 h-8 full-rounded border-black float-right');
constructor() { constructor() {
super(undefined); super(undefined);

2
UI/BigComponents/UserBadge.ts
View file

@ -50,7 +50,7 @@ export default class UserBadge extends UIElement {
this._homeButton = new VariableUiElement( this._homeButton = new VariableUiElement(
this._userDetails.map((userinfo) => { this._userDetails.map((userinfo) => {
if (userinfo.home) { if (userinfo.home) {
return Svg.home; return Svg.home_svg().Render();
} }
return ""; return "";
}) })

3
UI/FullScreenMessageBoxHandler.ts
View file

@ -20,7 +20,8 @@ export default class FullScreenMessageBox extends UIElement {
return ""; return "";
} }
this._content = State.state.fullScreenMessage.data.content; this._content = State.state.fullScreenMessage.data.content;
return new Combine([this._content]).SetClass("block max-h-screen h-screen overflow-x-hidden overflow-y-auto bg-white p-2").Render(); return new Combine([this._content])
.SetClass("block max-h-screen h-screen overflow-x-hidden overflow-y-auto bg-white p-0").Render();
} }
protected InnerUpdate(htmlElement: HTMLElement) { protected InnerUpdate(htmlElement: HTMLElement) {

7
UI/Popup/FeatureInfoBox.ts
View file

@ -25,11 +25,12 @@ export default class FeatureInfoBox extends UIElement {
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined)) const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
.SetClass("text-2xl break-words font-bold p-2"); .AddClass("text-2xl break-words font-bold p-2");
this.title = title; this.title = title;
const titleIcons = new Combine( const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon))) layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)
.SetClass("h-8 w-8 pt-2 box-content"); .AddClass("block w-8 h-8 align-baseline box-content p-0.5")))
.AddClass("flex flex-row flex-wrap pt-1 items-center mr-2");
let questionBox: UIElement = undefined; let questionBox: UIElement = undefined;
if (State.state.featureSwitchUserbadge.data) { if (State.state.featureSwitchUserbadge.data) {

14
UI/Popup/TagRenderingAnswer.ts
View file

@ -21,6 +21,7 @@ export default class TagRenderingAnswer extends UIElement {
if (configuration === undefined) { if (configuration === undefined) {
throw "Trying to generate a tagRenderingAnswer without configuration..." throw "Trying to generate a tagRenderingAnswer without configuration..."
} }
this.AddClass("flex items-center flex-row text-lg")
} }
InnerRender(): string { InnerRender(): string {
@ -34,11 +35,6 @@ export default class TagRenderingAnswer extends UIElement {
if (tags === undefined) { if (tags === undefined) {
return ""; return "";
} }
const tr = this._configuration.GetRenderValue(tags);
if (tr !== undefined) {
this._content = new SubstitutedTranslation(tr, this._tags);
return this._content.Render();
}
// The render value doesn't work well with multi-answers (checkboxes), so we have to check for them manually // The render value doesn't work well with multi-answers (checkboxes), so we have to check for them manually
if (this._configuration.multiAnswer) { if (this._configuration.multiAnswer) {
@ -65,6 +61,14 @@ export default class TagRenderingAnswer extends UIElement {
return this._content.Render(); return this._content.Render();
} }
} }
const tr = this._configuration.GetRenderValue(tags);
if (tr !== undefined) {
this._content = new SubstitutedTranslation(tr, this._tags);
return this._content.Render();
}
return ""; return "";
} }

5
UI/ShowDataLayer.ts
View file

@ -69,7 +69,7 @@ export default class ShowDataLayer {
action(); action();
} }
}); });
Hash.hash.addCallback(id => { Hash.hash.addCallbackAndRun(id => {
// This is a bit of an edge case: if the hash becomes an id to search, we have to show the corresponding popup // This is a bit of an edge case: if the hash becomes an id to search, we have to show the corresponding popup
if(State.state.selectedElement !== undefined){ if(State.state.selectedElement !== undefined){
return; // Something is already selected, we don't have to apply this fix return; // Something is already selected, we don't have to apply this fix
@ -130,6 +130,9 @@ export default class ShowDataLayer {
"<div style='height: 90vh'>Rendering</div>"); "<div style='height: 90vh'>Rendering</div>");
popup.setContent(uiElement.Render()); popup.setContent(uiElement.Render());
popup.on('remove', () => { popup.on('remove', () => {
if(!popup.isOpen()){
return;
}
State.state.selectedElement.setData(undefined); State.state.selectedElement.setData(undefined);
}); });
leafletLayer.bindPopup(popup); leafletLayer.bindPopup(popup);

2
UI/UIElement.ts
View file

@ -109,7 +109,7 @@ export abstract class UIElement extends UIEventSource<string> {
} }
HideOnEmpty(hide: boolean) { HideOnEmpty(hide: boolean): UIElement {
this._hideIfEmpty = hide; this._hideIfEmpty = hide;
this.Update(); this.Update();
return this; return this;

64
assets/layers/bike_parking/bike_parking.json
View file

@ -73,68 +73,68 @@
{ {
"if": "bicycle_parking=stands", "if": "bicycle_parking=stands",
"then": { "then": {
"en": "Staple racks <img width='150px' src='./assets/layers/bike_parking/staple.svg'>", "en": "Staple racks <img style='width: 25%' src='./assets/layers/bike_parking/staple.svg'>",
"nl": "Nietjes <img width='150px' src='./assets/layers/bike_parking/staple.svg'>", "nl": "Nietjes <img style='width: 25%'' src='./assets/layers/bike_parking/staple.svg'>",
"fr": "Arceaux <img width='150px' src='./assets/layers/bike_parking/staple.svg'>", "fr": "Arceaux <img style='width: 25%'' src='./assets/layers/bike_parking/staple.svg'>",
"gl": "De roda (Stands) <img width='150px' src='./assets/layers/bike_parking/staple.svg'>", "gl": "De roda (Stands) <img style='width: 25%'' src='./assets/layers/bike_parking/staple.svg'>",
"de": "Fahrradbügel <img width='150px' src='./assets/layers/bike_parking/staple.svg'>" "de": "Fahrradbügel <img style='width: 25%'' src='./assets/layers/bike_parking/staple.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=wall_loops", "if": "bicycle_parking=wall_loops",
"then": { "then": {
"en": "Wheel rack/loops <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>", "en": "Wheel rack/loops <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>",
"nl": "Wielrek/lussen <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>", "nl": "Wielrek/lussen <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>",
"fr": "Pinces-roues <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>", "fr": "Pinces-roues <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>",
"gl": "Aros <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>", "gl": "Aros <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>",
"de": "Metallgestänge <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>" "de": "Metallgestänge <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=handlebar_holder", "if": "bicycle_parking=handlebar_holder",
"then": { "then": {
"en": "Handlebar holder <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>", "en": "Handlebar holder <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"nl": "Stuurhouder <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>", "nl": "Stuurhouder <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"fr": "Support guidon <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>", "fr": "Support guidon <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"gl": "Cadeado para guiador <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>", "gl": "Cadeado para guiador <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"de": "Halter für Fahrradlenker <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>" "de": "Halter für Fahrradlenker <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=rack", "if": "bicycle_parking=rack",
"then": { "then": {
"en": "Rack <img width='150px' src='./assets/layers/bike_parking/rack.svg'>", "en": "Rack <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"nl": "Rek <img width='150px' src='./assets/layers/bike_parking/rack.svg'>", "nl": "Rek <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"fr": "Râtelier <img width='150px' src='./assets/layers/bike_parking/rack.svg'>", "fr": "Râtelier <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"gl": "Cremalleira <img width='150px' src='./assets/layers/bike_parking/rack.svg'>", "gl": "Cremalleira <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"de": "Gestell <img width='150px' src='./assets/layers/bike_parking/rack.svg'>" "de": "Gestell <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=two_tier", "if": "bicycle_parking=two_tier",
"then": { "then": {
"en": "Two-tiered <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>", "en": "Two-tiered <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>",
"nl": "Dubbel (twee verdiepingen) <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>", "nl": "Dubbel (twee verdiepingen) <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>",
"fr": "Superposé <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>", "fr": "Superposé <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>",
"gl": "Dobre cremalleira <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>", "gl": "Dobre cremalleira <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>",
"de": "Zweistufig <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>" "de": "Zweistufig <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=shed", "if": "bicycle_parking=shed",
"then": { "then": {
"en": "Shed <img width='150px' src='./assets/layers/bike_parking/shed.svg'>", "en": "Shed <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"nl": "Schuur <img width='150px' src='./assets/layers/bike_parking/shed.svg'>", "nl": "Schuur <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"fr": "Abri <img width='150px' src='./assets/layers/bike_parking/shed.svg'>", "fr": "Abri <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"gl": "Abeiro <img width='150px' src='./assets/layers/bike_parking/shed.svg'>", "gl": "Abeiro <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"de": "Schuppen <img width='150px' src='./assets/layers/bike_parking/shed.svg'>" "de": "Schuppen <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=bollard", "if": "bicycle_parking=bollard",
"then": { "then": {
"en": "Bollard <img width='150px' src='./assets/layers/bike_parking/bollard.svg'>", "en": "Bollard <img style='width: 25%'' src='./assets/layers/bike_parking/bollard.svg'>",
"nl": "Paal met ring <img width='150px' src='./assets/layers/bike_parking/bollard.svg'>" "nl": "Paal met ring <img style='width: 25%'' src='./assets/layers/bike_parking/bollard.svg'>"
} }
}, },
{ {

1
assets/themes/surveillance_cameras/surveillance_cameras.json
View file

@ -24,7 +24,6 @@
"startZoom": 1, "startZoom": 1,
"widenFactor": 0.05, "widenFactor": 0.05,
"socialImage": "", "socialImage": "",
"customCss": "./assets/themes/surveillance_cameras/custom_theme.css",
"defaultBackgroundId": "Stadia.AlidadeSmoothDark", "defaultBackgroundId": "Stadia.AlidadeSmoothDark",
"layers": [ "layers": [
"direction", "direction",

18
css/tagrendering.css
View file

@ -1,24 +1,6 @@
.featureinfobox-back-to-the-map {
padding: 0.5em;
border-radius: 999em;
margin-right: 0.4em;
width: min-content;
height: min-content;
background: var(--subtle-detail-color);
flex-shrink: 0;
}
.featureinfobox-back-to-the-map svg {
width: 1.75em;
height: 1.75em;
margin-left: 0.15em;
margin-top: 0.15em
}
.featureinfobox-back-to-the-map svg path{
stroke: var(--subtle-detail-color-contrast) !important;
}
@media only screen and (max-height: 600px) and (min-width: 600px) { @media only screen and (max-height: 600px) and (min-width: 600px) {
/* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/ /* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/

2
css/userbadge.css
View file

@ -7,6 +7,7 @@
width: 100%; width: 100%;
min-width: 20em; min-width: 20em;
pointer-events: all; pointer-events: all;
border-radius: 999em;
} }
#userbadge a { #userbadge a {
@ -60,6 +61,7 @@
margin: 0; margin: 0;
opacity: 0; opacity: 0;
transition: opacity 500ms linear; transition: opacity 500ms linear;
border-radius: 999em;
} }
.usertext { .usertext {

53
index.css
View file

@ -7,6 +7,10 @@
.max-h-65vh { .max-h-65vh {
max-height: 65vh; max-height: 65vh;
} }
.max-h-20vh {
max-height: 20vh;
}
} }
} }
@ -40,12 +44,18 @@ html, body {
svg, img { svg, img {
box-sizing: content-box; box-sizing: content-box;
width: 100%;
height: 100%;
} }
a { a {
color: var(--foreground-color) color: var(--foreground-color)
} }
#topleft-tools svg { #topleft-tools svg {
fill: var(--foreground-color) !important; fill: var(--foreground-color) !important;
stroke: var(--foreground-color) !important; stroke: var(--foreground-color) !important;
@ -280,16 +290,6 @@ a {
color: var(--foreground-color); color: var(--foreground-color);
} }
.search-go img {
position: relative;
float: right;
height: 1.2em;
border: 2px solid black;
padding: 0.4em;
margin-left: 0.5em;
margin-right: 0;
}
.add-popup-all-buttons { .add-popup-all-buttons {
max-height: 50vh; max-height: 50vh;
@ -481,39 +481,6 @@ a {
} }
.share-button {
background-color: var(--subtle-detail-color);
border: none;
color: var(--subtle-detail-color-contrast);
text-decoration: none;
display: inline-block;
border-radius: 3em;
height: 2.5em;
width: 2.5em;
box-sizing: border-box;
padding: 0;
}
.share-button svg {
height: 1.5em;
width: 1.5em;
padding: 0.5em;
padding-left: 0.4em;
fill: var(--subtle-detail-color-contrast) !important;
stroke: var(--subtle-detail-color-contrast) !important;
}
.share-button svg path {
fill: var(--subtle-detail-color-contrast) !important;
stroke: var(--subtle-detail-color-contrast) !important;
}
.share-button svg circle {
fill: var(--subtle-detail-color-contrast) !important;
stroke: var(--subtle-detail-color-contrast) !important;
}
.ornament { .ornament {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;