Add overview of all themes if none are defined
This commit is contained in:
pietervdvn
parent
7a2b99a566
commit
092c12a449
12 changed files with 94 additions and 53 deletions
|
|
@ -22,7 +22,8 @@ export default class AllTranslationAssets {
|
|||
ready: new Translation( {"en":"Done!","ca":"Fet.","es":"Hecho.","nl":"Klaar!","fr":"Finis!","gl":"Feito!","de":"Erledigt!"} ),
|
||||
retrying: new Translation( {"en":"Loading data failed. Trying again... ({count})","ca":"La càrrega de dades ha fallat.Tornant-ho a intentar... ({count})","es":"La carga de datos ha fallado.Volviéndolo a probar... ({count})","gl":"A carga dos datos fallou. Tentándoo de novo... ({count})","fr":"Le chargement a échoué. Essayer à nouveau... ({count})","de":"Laden von Daten fehlgeschlagen. Erneuter Versuch... ({count})"} ),
|
||||
},
|
||||
general: { loginWithOpenStreetMap: new Translation( {"en":"Login with OpenStreetMap","ca":"Entra a OpenStreetMap","es":"Entra en OpenStreetMap","nl":"Aanmelden met OpenStreetMap","fr":"Se connecter avec OpenStreeMap","gl":"Inicia a sesión no OpenStreetMap","de":"Anmeldung mit OpenStreetMap"} ),
|
||||
general: { index: new Translation( {"#":"This text is shown above the theme buttons when no theme is loaded","en":"<h3>Welcome to MapComplete</h3> MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.<br/><br/>Pick a theme below to get started.","nl":"<h3>Welkom bij MapComplete</h3> MapComplete is een OpenStreetMap applicatie waar informatie over een specifiek thema bekeken en aangepast kan worden.<br/><br/>Kies hieronder een thema om te beginnen."} ),
|
||||
loginWithOpenStreetMap: new Translation( {"en":"Login with OpenStreetMap","ca":"Entra a OpenStreetMap","es":"Entra en OpenStreetMap","nl":"Aanmelden met OpenStreetMap","fr":"Se connecter avec OpenStreeMap","gl":"Inicia a sesión no OpenStreetMap","de":"Anmeldung mit OpenStreetMap"} ),
|
||||
welcomeBack: new Translation( {"en":"You are logged in, welcome back!","ca":"Has entrat, benvingut.","es":"Has entrado, bienvenido.","nl":"Je bent aangemeld. Welkom terug!","fr":"Vous êtes connecté. Bienvenue!","gl":"Iniciaches a sesión, benvido.","de":"Sie sind eingeloggt, willkommen zurück!"} ),
|
||||
loginToStart: new Translation( {"en":"Login to answer this question","ca":"Entra per contestar aquesta pregunta","es":"Entra para contestar esta pregunta","nl":"Meld je aan om deze vraag te beantwoorden","fr":"Connectez-vous pour répondre à cette question","gl":"Inicia a sesión para responder esta pregunta","de":"Anmelden, um diese Frage zu beantworten"} ),
|
||||
search: { search: new Translation( {"en":"Search a location","ca":"Cerca una ubicació","es":"Busca una ubicación","nl":"Zoek naar een locatie","fr":"Chercher un lieu","gl":"Procurar unha localización","de":"Einen Ort suchen"} ),
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { Utils } from "../Utils";
|
|||
|
||||
export default class Constants {
|
||||
|
||||
public static vNumber = "0.4.7";
|
||||
public static vNumber = "0.4.8";
|
||||
|
||||
// The user journey states thresholds when a new feature gets unlocked
|
||||
public static userJourney = {
|
||||
|
|
|
|||
8
State.ts
8
State.ts
|
|
@ -125,11 +125,11 @@ export default class State {
|
|||
this.layoutToUse.setData(layoutToUse);
|
||||
|
||||
const zoom = State.asFloat(
|
||||
QueryParameters.GetQueryParameter("z", "" + layoutToUse.startZoom, "The initial/current zoom level")
|
||||
QueryParameters.GetQueryParameter("z", "" + layoutToUse?.startZoom, "The initial/current zoom level")
|
||||
.syncWith(LocalStorageSource.Get("zoom")));
|
||||
const lat = State.asFloat(QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat, "The initial/current latitude")
|
||||
const lat = State.asFloat(QueryParameters.GetQueryParameter("lat", "" + layoutToUse?.startLat, "The initial/current latitude")
|
||||
.syncWith(LocalStorageSource.Get("lat")));
|
||||
const lon = State.asFloat(QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon, "The initial/current longitude of the app")
|
||||
const lon = State.asFloat(QueryParameters.GetQueryParameter("lon", "" + layoutToUse?.startLon, "The initial/current longitude of the app")
|
||||
.syncWith(LocalStorageSource.Get("lon")));
|
||||
|
||||
|
||||
|
|
@ -192,7 +192,7 @@ export default class State {
|
|||
testParam === "true",
|
||||
QueryParameters.GetQueryParameter("oauth_token", undefined,
|
||||
"Used to complete the login"),
|
||||
layoutToUse.id,
|
||||
layoutToUse?.id,
|
||||
true
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,6 @@ export default class FullWelcomePaneWithTabs extends UIElement {
|
|||
]).SetClass("only-on-mobile")
|
||||
.onClick(() => State.state.fullScreenMessage.setData(undefined));
|
||||
|
||||
tabbedPart.SetStyle("overflow-y: auto; max-height: calc( 100vh - 4em);display:block;")
|
||||
this._component = new Combine([tabbedPart, backButton]).SetStyle("width:100%;");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,17 @@ import {SubtleButton} from "../Base/SubtleButton";
|
|||
import Translations from "../i18n/Translations";
|
||||
import * as personal from "../../assets/themes/personalLayout/personalLayout.json"
|
||||
import Constants from "../../Models/Constants";
|
||||
import LanguagePicker from "../LanguagePicker";
|
||||
|
||||
export default class MoreScreen extends UIElement {
|
||||
private readonly _onMainScreen: boolean;
|
||||
|
||||
private _component: UIElement;
|
||||
|
||||
|
||||
constructor() {
|
||||
constructor(onMainScreen: boolean = false) {
|
||||
super(State.state.locationControl);
|
||||
this._onMainScreen = onMainScreen;
|
||||
this.ListenTo(State.state.osmConnection.userDetails);
|
||||
this.ListenTo(State.state.installedThemes);
|
||||
}
|
||||
|
|
@ -35,7 +40,7 @@ export default class MoreScreen extends UIElement {
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
if (layout.id === State.state.layoutToUse.data.id) {
|
||||
if (layout.id === State.state.layoutToUse.data?.id) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
|
|
@ -115,12 +120,23 @@ export default class MoreScreen extends UIElement {
|
|||
}
|
||||
}
|
||||
|
||||
let intro : UIElement= tr.intro;
|
||||
if(this._onMainScreen){
|
||||
intro = new Combine([
|
||||
|
||||
return new VerticalCombine([
|
||||
tr.intro,
|
||||
LanguagePicker.CreateLanguagePicker(Translations.t.general.index.SupportedLanguages())
|
||||
.SetStyle("position: absolute; right: 1.5em; top: 1.5em;"),
|
||||
Translations.t.general.index.SetStyle("margin-top: 2em;display:block; margin-bottom: 1em;")
|
||||
])
|
||||
}
|
||||
|
||||
|
||||
this._component = new VerticalCombine([
|
||||
intro,
|
||||
new VerticalCombine(els),
|
||||
tr.streetcomplete
|
||||
]).Render();
|
||||
]);
|
||||
return this._component.Render();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@ export default class SharePanel extends UIElement {
|
|||
"Copy the json configuration from the 'save-tab', paste it between the 'nowiki'-tags in the Wiki",
|
||||
"Click 'save' to save the wiki page",
|
||||
"Share the link with the url parameter <span class='literal-code'>userlayout=wiki:YOURWIKIPAGE</span>, e.g. " +
|
||||
`<a href='./index.html?userlayout=${proposedNameEnc}' target='_blank'>https://${window.location.host}?userlayout=${proposedNameEnc}</a>`
|
||||
`<a href='./custom?userlayout=${proposedNameEnc}' target='_blank'>https://${window.location.host}?userlayout=${proposedNameEnc}</a>`
|
||||
].map(li => `<li>${li}</li>`),
|
||||
|
||||
"</ol>",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,35 @@ export class Translation extends UIElement {
|
|||
}
|
||||
}
|
||||
|
||||
get txt(): string {
|
||||
if (this.translations["*"]) {
|
||||
return this.translations["*"];
|
||||
}
|
||||
const txt = this.translations[Translation.forcedLanguage ?? Locale.language.data];
|
||||
if (txt !== undefined) {
|
||||
return txt;
|
||||
}
|
||||
const en = this.translations["en"];
|
||||
if (en !== undefined) {
|
||||
return en;
|
||||
}
|
||||
for (const i in this.translations) {
|
||||
return this.translations[i]; // Return a random language
|
||||
}
|
||||
console.error("Missing language ", Locale.language.data, "for", this.translations)
|
||||
return "";
|
||||
}
|
||||
|
||||
public SupportedLanguages(): string[] {
|
||||
const langs = []
|
||||
for (const translationsKey in this.translations) {
|
||||
if(translationsKey === "#"){
|
||||
continue;
|
||||
}
|
||||
langs.push(translationsKey)
|
||||
}
|
||||
return langs;
|
||||
}
|
||||
|
||||
public Subs(text: any): Translation {
|
||||
const newTranslations = {};
|
||||
|
|
@ -57,27 +86,6 @@ export class Translation extends UIElement {
|
|||
|
||||
}
|
||||
|
||||
|
||||
get txt(): string {
|
||||
if (this.translations["*"]) {
|
||||
return this.translations["*"];
|
||||
}
|
||||
const txt = this.translations[Translation.forcedLanguage ?? Locale.language.data];
|
||||
if (txt !== undefined) {
|
||||
return txt;
|
||||
}
|
||||
const en = this.translations["en"];
|
||||
if (en !== undefined) {
|
||||
return en;
|
||||
}
|
||||
for (const i in this.translations) {
|
||||
return this.translations[i]; // Return a random language
|
||||
}
|
||||
console.error("Missing language ", Locale.language.data, "for", this.translations)
|
||||
return "";
|
||||
}
|
||||
|
||||
|
||||
InnerRender(): string {
|
||||
return this.txt
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@
|
|||
"maintainer": "MapComplete",
|
||||
"icon": "./assets/themes/cyclofix/logo.svg",
|
||||
"version": "0",
|
||||
"startLat": 50.8465573,
|
||||
"startLat": 0,
|
||||
"defaultBackgroundId": "CartoDB.Voyager",
|
||||
"startLon": 4.3516970,
|
||||
"startZoom": 16,
|
||||
"startLon": 0,
|
||||
"startZoom": 1,
|
||||
"widenFactor": 0.05,
|
||||
"socialImage": "./assets/themes/cyclofix/logo.svg",
|
||||
"layers": [
|
||||
|
|
|
|||
|
|
@ -162,6 +162,13 @@
|
|||
}
|
||||
},
|
||||
"general": {
|
||||
"index": {
|
||||
"#": "This text is shown above the theme buttons when no theme is loaded",
|
||||
"en": "<h3>Welcome to MapComplete</h3> MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.<br/><br/>Pick a theme below to get started.",
|
||||
"nl": "<h3>Welkom bij MapComplete</h3> MapComplete is een OpenStreetMap applicatie waar informatie over een specifiek thema bekeken en aangepast kan worden.<br/><br/>Kies hieronder een thema om te beginnen."
|
||||
},
|
||||
|
||||
|
||||
"loginWithOpenStreetMap": {
|
||||
"en": "Login with OpenStreetMap",
|
||||
"ca": "Entra a OpenStreetMap",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@
|
|||
<link rel="stylesheet" href="vendor/MarkerCluster.css"/>
|
||||
<link rel="stylesheet" href="vendor/MarkerCluster.Default.css"/>
|
||||
<!-- $$$CUSTOM-CSS -->
|
||||
<!-- $$$MANIFEST -->
|
||||
<link rel="manifest" href="./manifest.manifest">
|
||||
|
||||
<link rel="icon" href="assets/svg/add.svg" sizes="any" type="image/svg+xml">
|
||||
|
||||
<meta property="og:type" content="website">
|
||||
|
|
@ -35,7 +37,7 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div style="position: absolute; left: 1em; bottom: 1em; width:35vh; height:35vh;"
|
||||
<div style="position: fixed; left: 1em; bottom: 1em; width:35vh; height:35vh;"
|
||||
id="decoration-desktop">
|
||||
<!-- A nice decoration while loading or on errors -->
|
||||
<!-- DECORATION 0 START -->
|
||||
|
|
@ -63,7 +65,6 @@
|
|||
</div>
|
||||
|
||||
<div id="centermessage">Loading MapComplete, hang on...</div>
|
||||
<div id="top-right"></div>
|
||||
|
||||
<span id="geolocate-button"></span>
|
||||
<div id="leafletDiv"></div>
|
||||
|
|
|
|||
17
index.ts
17
index.ts
|
|
@ -6,8 +6,10 @@ import {UIEventSource} from "./Logic/UIEventSource";
|
|||
import * as $ from "jquery";
|
||||
import LayoutConfig from "./Customizations/JSON/LayoutConfig";
|
||||
import {Utils} from "./Utils";
|
||||
import MoreScreen from "./UI/BigComponents/MoreScreen";
|
||||
import State from "./State";
|
||||
|
||||
let defaultLayout = "bookcases"
|
||||
let defaultLayout = ""
|
||||
// --------------------- Special actions based on the parameters -----------------
|
||||
// @ts-ignore
|
||||
if (location.href.startsWith("http://buurtnatuur.be")) {
|
||||
|
|
@ -42,7 +44,6 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
|
|||
// ----------------- SELECT THE RIGHT QUESTSET -----------------
|
||||
|
||||
|
||||
|
||||
const path = window.location.pathname.split("/").slice(-1)[0];
|
||||
if (path !== "index.html" && path !== "") {
|
||||
defaultLayout = path;
|
||||
|
|
@ -52,7 +53,7 @@ if (path !== "index.html" && path !== "") {
|
|||
console.log("Using layout", defaultLayout);
|
||||
}
|
||||
defaultLayout = QueryParameters.GetQueryParameter("layout", defaultLayout, "The layout to load into MapComplete").data;
|
||||
let layoutToUse: LayoutConfig = AllKnownLayouts.allSets[defaultLayout.toLowerCase()] ?? AllKnownLayouts["all"];
|
||||
let layoutToUse: LayoutConfig = AllKnownLayouts.allSets[defaultLayout.toLowerCase()];
|
||||
|
||||
|
||||
const userLayoutParam = QueryParameters.GetQueryParameter("userlayout", "false");
|
||||
|
|
@ -100,8 +101,16 @@ if (layoutFromBase64.startsWith("wiki:")) {
|
|||
} else if (layoutFromBase64 !== "false") {
|
||||
layoutToUse = InitUiElements.LoadLayoutFromHash(userLayoutParam);
|
||||
InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout, location.hash.substr(1));
|
||||
} else {
|
||||
} else if (layoutToUse !== undefined) {
|
||||
// This is the default case: a builtin theme
|
||||
InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout);
|
||||
} else {
|
||||
State.state = new State(undefined);
|
||||
document.getElementById("messagesboxmobile").remove();
|
||||
new MoreScreen(true)
|
||||
.SetStyle("background: var(--background-color); display: block; margin-left: 5vw; margin-right: 5vw; pointer-events: all;")
|
||||
.AttachTo("topleft-tools");
|
||||
|
||||
}
|
||||
window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ function createLandingPage(layout: LayoutConfig) {
|
|||
}
|
||||
|
||||
let output = template
|
||||
.replace(`./manifest.manifest`, `./${enc(layout.id)}.webmanifest`)
|
||||
.replace("./manifest.manifest",`${enc(layout.id)}.webmanifest`)
|
||||
.replace("<!-- $$$OG-META -->", og)
|
||||
.replace(/<title>.+?<\/title>/, `<title>${ogTitle}</title>`)
|
||||
.replace("Loading MapComplete, hang on...", `Loading MapComplete theme <i>${ogTitle}</i>...`)
|
||||
|
|
@ -251,7 +251,7 @@ if (! existsSync(generatedDir)) {
|
|||
mkdirSync(generatedDir)
|
||||
}
|
||||
|
||||
const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap"]
|
||||
const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap","custom"]
|
||||
const all = AllKnownLayouts.allSets;
|
||||
|
||||
let wikiPage = "{|class=\"wikitable sortable\"\n" +
|
||||
|
|
@ -278,12 +278,12 @@ for (const layoutName in all) {
|
|||
const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest";
|
||||
writeFile(manifestLocation, manif, err);
|
||||
|
||||
// Create a landing page for the given theme
|
||||
const landing = createLandingPage(layout);
|
||||
writeFile(enc(layout.id) + ".html", landing, err)
|
||||
|
||||
wikiPage += "\n"+generateWikiEntry(layout);
|
||||
}
|
||||
|
||||
wikiPage += "\n|}"
|
||||
|
||||
writeFile(generatedDir + "/wikiIndex", wikiPage, (err) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue