Add a 'more quests'-screen
This commit is contained in:
Pieter Vander Vennet
parent
19f69b31a4
commit
f9e0735378
6 changed files with 113 additions and 56 deletions
|
|
@ -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[];
|
||||
|
|
|
|||
|
|
@ -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<UIElement>) {
|
||||
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: `<img src='${layoutToUse.icon}'>`, content: welcome},
|
||||
{header: `<img src='${'./assets/osm-logo.svg'}'>`, content: Translations.t.general.openStreetMapIntro},
|
||||
{header: `<img src='${'./assets/share.svg'}'>`, content: new ShareScreen(layoutToUse, bm.Location)}
|
||||
{header: `<img src='${'./assets/share.svg'}'>`, content: new ShareScreen(layoutToUse, bm.Location)},
|
||||
{header: `<img src='${'./assets/add.svg'}'>`, content: new MoreScreen(bm.Location)}
|
||||
])
|
||||
|
||||
return fullOptions;
|
||||
|
||||
}
|
||||
|
||||
|
||||
static InitWelcomeMessage(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap,
|
||||
fullScreenMessage: UIEventSource<UIElement>) {
|
||||
|
||||
const fullOptions = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
|
||||
|
||||
const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg' alt='help'></div>`);
|
||||
const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg' alt='close'></div>`);
|
||||
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: `<img src='${layoutToUse.icon}'>`, content: welcome2},
|
||||
{header: `<img src='${'./assets/osm-logo.svg'}'>`, content: Translations.t.general.openStreetMapIntro},
|
||||
{header: `<img src='${'./assets/share.svg'}'>`, content: new ShareScreen(layoutToUse, bm.Location)}
|
||||
])
|
||||
|
||||
|
||||
const fullOptions2 = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
|
||||
fullScreenMessage.setData(fullOptions2)
|
||||
new FixedUiElement(`<div class='collapse-button-img' class="shadow"><img src='assets/help.svg' alt='help'></div>`).onClick(() => {
|
||||
fullScreenMessage.setData(fullOptions2)
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
`
|
||||
<span class="switch-layout">
|
||||
<a href="${linkText}" target="_blank">
|
||||
<img src='${layout.icon}'>
|
||||
<div><b>${Utils.Upper(layout.name)}</b><br/>
|
||||
${Translations.W(layout.description).Render()}</div>
|
||||
</a>
|
||||
</span>
|
||||
`
|
||||
);
|
||||
|
||||
els.push(link)
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
return new VerticalCombine([
|
||||
tr.intro,
|
||||
new VerticalCombine(els),
|
||||
tr.streetcomplete
|
||||
]).Render();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -668,19 +668,19 @@ export default class Translations {
|
|||
|
||||
},
|
||||
openStreetMapIntro: new T({
|
||||
en: "<h2>An Open Map</h2>" +
|
||||
en: "<h3>An Open Map</h3>" +
|
||||
"<p></p>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.</p>" +
|
||||
"<p><b><a href='https://OpenStreetMap.org' target='_blank'>OpenStreetMap</a></b> is this map. The map data can be used for free (with <a href='https://osm.org/copyright' target='_blank'>attribution and publication of changes to that data</a>)." +
|
||||
" 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.</p>" +
|
||||
"<p>A ton of people and application already use OpenStreetMap: <a href='https://maps.me/' traget='_blank'>Maps.me</a>, <a href='https://osmAnd.net' traget='_blank'>OsmAnd</a>, 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!</p>",
|
||||
nl: "<h2>Een open kaart</h2>" +
|
||||
nl: "<h3>Een open kaart</h3>" +
|
||||
"<p>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</p>" +
|
||||
"<p><b><a href='https://OpenStreetMap.org' target='_blank'>OpenStreetMap</a></b> is deze open kaart. Je mag de kaartdata gratis gebruiken (mits <a href='https://osm.org/copyright' target='_blank'>bronvermelding en herpublicatie van aanpassingen</a>). 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</p>" +
|
||||
"<p>Tenslotte zijn er reeds vele gebruikers van OpenStreetMap. Denk maar <a href='https://maps.me/' traget='_blank'>Maps.me</a>, <a href='https://osmAnd.net' traget='_blank'>OsmAnd</a>, verschillende gespecialiseerde routeplanners, de achtergrondkaarten op Facebook, Instagram, ... Zelfs Apple Maps en Bing-Maps gebruiken OpenStreetMap in hun kaarten!</p>" +
|
||||
"<p>Tenslotte zijn er reeds vele gebruikers van OpenStreetMap. Denk maar <a href='https://maps.me/' traget='_blank'>Maps.me</a>, <a href='https://osmAnd.net' traget='_blank'>OsmAnd</a>, verschillende gespecialiseerde routeplanners, de achtergrondkaarten op Facebook, Instagram,...<br/> Zelfs Apple Maps en Bing-Maps gebruiken OpenStreetMap in hun kaarten!</p>" +
|
||||
"<p></p>Kortom, als je hier een antwoord geeft of een fout aanpast, zal dat na een tijdje ook in al dié applicaties te zien zijn.</p>"
|
||||
}),
|
||||
|
||||
|
|
@ -691,6 +691,14 @@ export default class Translations {
|
|||
embedIntro: new T({
|
||||
en: "<h3>Embed on your website</h3>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:"<h3>More quests</h3>Do you enjoy collecting geodata? <br/>There are more layers available.",
|
||||
}),
|
||||
streetcomplete: new T({
|
||||
en: "Another, similar application is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
25
index.css
25
index.css
|
|
@ -1183,4 +1183,27 @@ form {
|
|||
padding: 1em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
/** 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;
|
||||
}
|
||||
|
|
|
|||
39
test.ts
39
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")
|
||||
Loading…
Reference in a new issue