Add overview of all themes if none are defined

AllTranslationAssets.ts

@@ -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"} ),

Models/Constants.ts

@@ -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 = {

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
         );
 

UI/BigComponents/FullWelcomePaneWithTabs.ts

@@ -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%;");
     }
 

UI/BigComponents/MoreScreen.ts

@@ -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([
+           LanguagePicker.CreateLanguagePicker(Translations.t.general.index.SupportedLanguages())
-            tr.intro,
+               .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();
     }
 
 }

UI/CustomGenerator/SharePanel.ts

@@ -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>",

UI/i18n/Translation.ts

@@ -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
     }

assets/themes/cyclofix/cyclofix.json

@@ -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,
+  "startLon": 0,
-  "startZoom": 16,
+  "startZoom": 1,
   "widenFactor": 0.05,
   "socialImage": "./assets/themes/cyclofix/logo.svg",
   "layers": [

assets/translations.json

@@ -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",

index.html

@@ -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>

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();

scripts/createLayouts.ts

@@ -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) => {