diff --git a/Customizations/Layout.ts b/Customizations/Layout.ts index 4c259fb..2062787 100644 --- a/Customizations/Layout.ts +++ b/Customizations/Layout.ts @@ -16,7 +16,7 @@ export class Layout { public name: string; public icon: string = "./assets/logo.svg"; public title: UIElement; - public description: string | UIElement = Translations.t.general.about; + public description: string | UIElement; public socialImage: string = "" public layers: LayerDefinition[]; diff --git a/InitUiElements.ts b/InitUiElements.ts index 4da053d..e878540 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -10,6 +10,7 @@ import {OsmConnection} from "./Logic/OsmConnection"; import {Basemap} from "./Logic/Basemap"; import {UIEventSource} from "./UI/UIEventSource"; import {UIElement} from "./UI/UIElement"; +import {MoreScreen} from "./UI/MoreScreen"; export class InitUiElements { @@ -30,19 +31,27 @@ export class InitUiElements { } - static InitWelcomeMessage(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap, - fullScreenMessage: UIEventSource) { + private static CreateWelcomePane(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap) { - const welcome = new WelcomeMessage(layoutToUse, - Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage), - osmConnection); + const welcome = new WelcomeMessage(layoutToUse, Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage), osmConnection) const fullOptions = new TabbedComponent([ {header: ``, content: welcome}, {header: ``, content: Translations.t.general.openStreetMapIntro}, - {header: ``, content: new ShareScreen(layoutToUse, bm.Location)} + {header: ``, content: new ShareScreen(layoutToUse, bm.Location)}, + {header: ``, content: new MoreScreen(bm.Location)} ]) + return fullOptions; + + } + + + static InitWelcomeMessage(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap, + fullScreenMessage: UIEventSource) { + + const fullOptions = this.CreateWelcomePane(layoutToUse, osmConnection, bm); + const help = new FixedUiElement(`
help
`); const close = new FixedUiElement(`
close
`); new CheckBox( @@ -55,15 +64,7 @@ export class InitUiElements { ).AttachTo("messagesbox"); - const welcome2 = new WelcomeMessage(layoutToUse, Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage), osmConnection) - - const fullOptions2 = new TabbedComponent([ - {header: ``, content: welcome2}, - {header: ``, content: Translations.t.general.openStreetMapIntro}, - {header: ``, content: new ShareScreen(layoutToUse, bm.Location)} - ]) - - + const fullOptions2 = this.CreateWelcomePane(layoutToUse, osmConnection, bm); fullScreenMessage.setData(fullOptions2) new FixedUiElement(`
help
`).onClick(() => { fullScreenMessage.setData(fullOptions2) diff --git a/UI/MoreScreen.ts b/UI/MoreScreen.ts index e69de29..fab85f8 100644 --- a/UI/MoreScreen.ts +++ b/UI/MoreScreen.ts @@ -0,0 +1,58 @@ +import {UIElement} from "./UIElement"; +import {VerticalCombine} from "./Base/VerticalCombine"; +import Translations from "./i18n/Translations"; +import {AllKnownLayouts} from "../Customizations/AllKnownLayouts"; +import {FixedUiElement} from "./Base/FixedUiElement"; +import {Utils} from "../Utils"; +import {link} from "fs"; +import {UIEventSource} from "./UIEventSource"; +import {VariableUiElement} from "./Base/VariableUIElement"; + + +export class MoreScreen extends UIElement { + private currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>; + + constructor(currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>) { + super(currentLocation); + this.currentLocation = currentLocation; + } + + InnerRender(): string { + const tr = Translations.t.general.morescreen; + + const els: UIElement[] = [] + for (const k in AllKnownLayouts.allSets) { + if (k === "all") { + continue; + } + const layout = AllKnownLayouts.allSets[k] + + const linkText = + `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon} + ` + const link = new FixedUiElement( + ` + + + +
${Utils.Upper(layout.name)}
+ ${Translations.W(layout.description).Render()}
+ + +` + ); + + els.push(link) + + + } + + + return new VerticalCombine([ + tr.intro, + new VerticalCombine(els), + tr.streetcomplete + ]).Render(); + } + +} \ No newline at end of file diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index 90d1ed4..bdfdf83 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -668,19 +668,19 @@ export default class Translations { }, openStreetMapIntro: new T({ - en: "

An Open Map

" + + en: "

An Open Map

" + "

Wouldn't it be cool if there was a single map, which everyone could freely use and edit?" + "A single place to store all geo-information? Then, all those websites with different, small and incompatible maps (which are always outdated) wouldn't be needed anymore.

" + "

OpenStreetMap is this map. The map data can be used for free (with attribution and publication of changes to that data)." + " On top of that, everyone can freely add new data and fix errors. This website uses OpenStreetMap as well. All the data is from there, and your answers and corrections are added there as well.

" + "

A ton of people and application already use OpenStreetMap: Maps.me, OsmAnd, but also the maps at Facebook, Intsagram, Apple-maps and Bing-maps are (partly) powered by OpenStreetMap." + "If you change something here, it'll be reflected in those applications too - after their next update!

", - nl: "

Een open kaart

" + + nl: "

Een open kaart

" + "

Zou het niet fantastisch zijn als er een open kaart zou zijn, die door iedereen aangepast én gebruikt kon worden? Waar iedereen zijn interesses aan zou kunnen toevoegen?" + "Dan zouden er geen duizend-en-één verschillende kleine kaartjes, websites, ... meer nodig zijn

" + "

OpenStreetMap is deze open kaart. Je mag de kaartdata gratis gebruiken (mits bronvermelding en herpublicatie van aanpassingen). Daarenboven mag je de kaart ook gratis aanpassen als je een account maakt." + "Ook deze website is gebaseerd op OpenStreetMap. Als je hier een vraag beantwoord, gaat het antwoord daar ook naartoe

" + - "

Tenslotte zijn er reeds vele gebruikers van OpenStreetMap. Denk maar Maps.me, OsmAnd, verschillende gespecialiseerde routeplanners, de achtergrondkaarten op Facebook, Instagram, ... Zelfs Apple Maps en Bing-Maps gebruiken OpenStreetMap in hun kaarten!

" + + "

Tenslotte zijn er reeds vele gebruikers van OpenStreetMap. Denk maar Maps.me, OsmAnd, verschillende gespecialiseerde routeplanners, de achtergrondkaarten op Facebook, Instagram,...
Zelfs Apple Maps en Bing-Maps gebruiken OpenStreetMap in hun kaarten!

" + "

Kortom, als je hier een antwoord geeft of een fout aanpast, zal dat na een tijdje ook in al dié applicaties te zien zijn.

" }), @@ -691,6 +691,14 @@ export default class Translations { embedIntro: new T({ en: "

Embed on your website

Please, embed this map into your website. We encourage you to do it - you don't even have to ask permission. It is free, and always will be. The more people using this, the more valuable it becomes." }) + }, + morescreen: { + intro:new T({ + en:"

More quests

Do you enjoy collecting geodata?
There are more layers available.", + }), + streetcomplete: new T({ + en: "Another, similar application is StreetComplete" + }) } } } diff --git a/index.css b/index.css index 611a2c1..fdf8c08 100644 --- a/index.css +++ b/index.css @@ -1183,4 +1183,27 @@ form { padding: 1em; width: 2em; height: 2em; -} \ No newline at end of file +} + +/** Switch layout **/ + +.switch-layout a{ + display: flex; + flex-wrap: nowrap; + flex-direction: row; + font-size: large; + margin: 0.5em; + background-color: #e5f5ff; + border-radius: 1em; + align-items: center; + text-decoration: none; + color: black; + +} + +.switch-layout a img{ + width: 3em; + max-height: 3em; + margin-right: 0.5em; + padding: 0.5em; +} diff --git a/test.ts b/test.ts index 8463906..0d68023 100644 --- a/test.ts +++ b/test.ts @@ -1,37 +1,4 @@ +import {MoreScreen} from "./UI/MoreScreen"; +import {UIEventSource} from "./UI/UIEventSource"; -import { And, Tag, Or } from "./Logic/TagsFilter"; -import { Overpass } from "./Logic/Overpass"; - - -function anyValueExcept(key: string, exceptValue: string) { - return new And([ - new Tag(key, "*"), - new Tag(key, exceptValue, true) - ]) -} - -const sellsBikes = new Tag("service:bicycle:retail", "yes") -const repairsBikes = anyValueExcept("service:bicycle:repair", "no") -const rentsBikes = new Tag("service:bicycle:rental", "yes") -const hasPump = new Tag("service:bicycle:pump", "yes") -const hasDiy = new Tag("service:bicycle:diy", "yes") -const sellsSecondHand = anyValueExcept("service:bicycle:repair", "no") -const hasBikeServices = new Or([ - sellsBikes, - repairsBikes, - rentsBikes, - hasPump, - hasDiy, - sellsSecondHand -]) - -const overpassFilter = new And([ - new Tag("shop", "bicycle", true), - hasBikeServices -]) - -const overpass = new Overpass(overpassFilter) - -// console.log(overpass.buildQuery('bbox:51.12246976163816,3.1045767593383795,51.289518504257174,3.2848313522338866')) - -console.log(overpassFilter.asOverpass()) +new MoreScreen(new UIEventSource<{zoom: number, lat: number, lon: number}>({zoom: 16, lat: 51.3, lon: 3.2})).AttachTo("maindiv") \ No newline at end of file