Tweaking the loading screen

2022-02-06 03:45:32 +01:00 · 2022-02-06 03:45:32 +01:00 · b8b63dc34c
commit b8b63dc34c
parent dd63ed7ab0
6 changed files with 59 additions and 91 deletions
--- a/Logic/SimpleMetaTagger.ts
+++ b/Logic/SimpleMetaTagger.ts
@ -294,83 +294,43 @@ export default class SimpleMetaTaggers {
                return true;
            }

+            // _isOpen is calculated dynamically on every call
            Object.defineProperty(feature.properties, "_isOpen", {
                enumerable: false,
                configurable: true,
                get: () => {
-                    if (feature.properties.id === "node/7464543832") {
-                        console.log("Getting _isOpen for ", feature.properties.i)
+                    const tags = feature.properties
+                    if (tags.opening_hours === undefined) {
+                        return;
+                    }
+                    if (tags._country === undefined) {
+                        return;
                    }
-                    delete feature.properties._isOpen
-                    feature.properties._isOpen = undefined
-                    const tagsSource = state.allElements.getEventSourceById(feature.properties.id);
-                    tagsSource.addCallbackAndRunD(tags => {
-                        // Install a listener to the tags...
-                        if (tags.opening_hours === undefined) {
-                            return;
-                        }
-                        if (tags._country === undefined) {
-                            return;
-                        }
-                        try {
-                            const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
-                            const oh = new opening_hours(tags["opening_hours"], {
-                                lat: lat,
-                                lon: lon,
-                                address: {
-                                    country_code: tags._country.toLowerCase()
-                                }
-                            }, {tag_key: "opening_hours"});

-                            // AUtomatically triggered on the next change (and a bit below)
-                            const updateTags = () => {
-                                const oldValueIsOpen = tags["_isOpen"];
-                                const oldNextChange = tags["_isOpen:nextTrigger"] ?? 0;
-
-                                if (oldNextChange > (new Date()).getTime() &&
-                                    tags["_isOpen:oldvalue"] === tags["opening_hours"] // Check that changes have to be made
-                                    && tags["_isOpen"] !== undefined) {
-                                    // Already calculated and should not yet be triggered
-                                    return false;
-                                }
-
-                                // Recalculate!
-                                tags["_isOpen"] = oh.getState() ? "yes" : "no";
-                                const comment = oh.getComment();
-                                if (comment) {
-                                    tags["_isOpen:description"] = comment;
-                                }
-
-                                if (oldValueIsOpen !== tags._isOpen) {
-                                    tagsSource.ping();
-                                }
-
-                                const nextChange = oh.getNextChange();
-                                if (nextChange !== undefined) {
-                                    const timeout = nextChange.getTime() - (new Date()).getTime();
-                                    tags["_isOpen:nextTrigger"] = nextChange.getTime();
-                                    tags["_isOpen:oldvalue"] = tags.opening_hours
-                                    window.setTimeout(
-                                        () => {
-                                            console.log("Updating the _isOpen tag for ", tags.id, ", it's timer expired after", timeout);
-                                            updateTags();
-                                        },
-                                        timeout
-                                    )
-                                }
+                    try {
+                        const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+                        const oh = new opening_hours(tags["opening_hours"], {
+                            lat: lat,
+                            lon: lon,
+                            address: {
+                                country_code: tags._country.toLowerCase()
                            }
-                            updateTags();
-                        } catch (e) {
-                            console.warn("Error while parsing opening hours of ", tags.id, e);
-                            delete tags._isOpen
-                            tags["_isOpen"] = "parse_error";
-                        }
+                        }, {tag_key: "opening_hours"});

-                    })
-                    return undefined
-                }
-            })
-            return true;
+                        // Recalculate!
+                        return oh.getState() ? "yes" : "no";
+
+                    } catch (e) {
+                        console.warn("Error while parsing opening hours of ", tags.id, e);
+                        delete tags._isOpen
+                        tags["_isOpen"] = "parse_error";
+                    }
+                }});
+            
+            
+            const tagsSource = state.allElements.getEventSourceById(feature.properties.id);
+                  
+                    

        })
    )
--- a/index.manifest
+++ b/index.manifest
@ -9,57 +9,57 @@
  "orientation": "portrait-primary, landscape-primary",
  "icons": [
    {
-      "src": "./assets/generated/svg_mapcomplete_logo72.png",
+      "src": "assets/generated/svg_mapcomplete_logo72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo96.png",
+      "src": "assets/generated/svg_mapcomplete_logo96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo120.png",
+      "src": "assets/generated/svg_mapcomplete_logo120.png",
      "sizes": "120x120",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo128.png",
+      "src": "assets/generated/svg_mapcomplete_logo128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo144.png",
+      "src": "assets/generated/svg_mapcomplete_logo144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo152.png",
+      "src": "assets/generated/svg_mapcomplete_logo152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo180.png",
+      "src": "assets/generated/svg_mapcomplete_logo180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo192.png",
+      "src": "assets/generated/svg_mapcomplete_logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo384.png",
+      "src": "assets/generated/svg_mapcomplete_logo384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
-      "src": "./assets/generated/svg_mapcomplete_logo512.png",
+      "src": "assets/generated/svg_mapcomplete_logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
-      "src": "assets/svg/mapcomplete_logo.svg",
+      "src": "./assets/svg/mapcomplete_logo.svg",
      "sizes": "513x513",
      "type": "image/svg"
    }
--- a/langs/en.json
+++ b/langs/en.json
@ -271,7 +271,9 @@
        "apply_button": {
            "isApplied": "The changes are applied",
            "appliedOnAnotherObject": "The object {id} will receive {tags}"
-        }
+        },
+        "loadingTheme": "Loading {theme}...",
+        "poweredByOsm": "Powered by OpenStreetMap"
    },
    "favourite": {
        "panelIntro": "<h3>Your personal theme</h3>Activate your favourite layers from all the official themes",
--- a/langs/nl.json
+++ b/langs/nl.json
@ -35,6 +35,8 @@
        "logIn": "Log in om andere thema's te zien waar je al in bewerkt hebt"
    },
    "general": {
+        "loadingTheme": "{theme} wordt geladen...",
+        "poweredByOsm": "Gebouwd met OpenStreetMap",
        "loginWithOpenStreetMap": "Aanmelden met OpenStreetMap",
        "welcomeBack": "Je bent aangemeld. Welkom terug!",
        "loginToStart": "Meld je aan om deze vraag te beantwoorden",
--- a/scripts/generateLayouts.ts
+++ b/scripts/generateLayouts.ts
@ -98,9 +98,9 @@ async function createManifest(layout: LayoutConfig, alreadyWritten: string[]) {
        const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512];
        for (const size of sizes) {
            const name = await createIcon(path, size, alreadyWritten);
-            createIcon(whiteBackgroundPath, size, alreadyWritten)
+            await createIcon(whiteBackgroundPath, size, alreadyWritten)
            icons.push({
-                src: "./"+name,
+                src: name,
                sizes: size + "x" + size,
                type: "image/png"
            })
@ -140,9 +140,9 @@ async function createManifest(layout: LayoutConfig, alreadyWritten: string[]) {
 async function createLandingPage(layout: LayoutConfig, manifest) {

    Locale.language.setData(layout.language[0]);
-
-    const ogTitle = Translations.WT(layout.title).txt.replace(/"/g, '\\"');
-    const ogDescr = Translations.WT(layout.shortDescription ?? "Easily add and edit geodata with OpenStreetMap").txt.replace(/"/g, '\\"');
+    const targetLanguage = layout.language[0]
+    const ogTitle = Translations.WT(layout.title).textFor(targetLanguage).replace(/"/g, '\\"');
+    const ogDescr = Translations.WT(layout.shortDescription ?? "Easily add and edit geodata with OpenStreetMap").textFor(targetLanguage).replace(/"/g, '\\"');
    const ogImage = layout.socialImage;

    let customCss = "";
@ -191,10 +191,12 @@ async function createLandingPage(layout: LayoutConfig, manifest) {
        ...apple_icons
    ].join("\n")

+    const loadingText = Translations.t.general.loadingTheme.Subs({theme: ogTitle});
    let output = template
-        .replace("Loading MapComplete, hang on...", `Loading MapComplete theme <i>${ogTitle}</i>...`)
+        .replace("Loading MapComplete, hang on...", loadingText.textFor(targetLanguage))
+        .replace("Powered by OpenStreetMap", Translations.t.general.poweredByOsm.textFor(targetLanguage))
        .replace(/<!-- THEME-SPECIFIC -->.*<!-- THEME-SPECIFIC-END-->/s, themeSpecific)
-        .replace(/<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s, layout.shortDescription.textFor("en"))
+        .replace(/<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s, layout.shortDescription.textFor(targetLanguage))
        .replace("<script src=\"./index.ts\"></script>", `<script src='./index_${layout.id}.ts'></script>`);

    try {
@ -227,7 +229,6 @@ async function main(): Promise<void>{
    createDir("./assets/generated")
    createDir("./assets/generated/layers")
    createDir("./assets/generated/themes")
-    createDir("./assets/generated/white_background")

    const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap", "custom", "theme"]
    // @ts-ignore
@ -268,7 +269,7 @@ async function main(): Promise<void>{
    }
    
    await createManifest(new LayoutConfig({
-        icon: "assets/svg/mapcomplete_logo.svg",
+        icon: "./assets/svg/mapcomplete_logo.svg",
        id: "index",
        layers: [],
        maintainer: "Pieter Vander Vennet",
--- a/theme.html
+++ b/theme.html
@ -65,7 +65,10 @@
     id="centermessage" style="z-index: 4000">
    <div style="height: max-content">
    <div style="margin-top: -3rem">
-    <h1 style="font-weight: bold; font-size: xx-large; padding-bottom: 1rem">Loading MapComplete, hang on...</h1>
+        <div class="flex" style="justify-content: center">
+            <img src="./assets/svg/loading.svg" class="animate-spin" style="width: 1.5rem; height: 1.5rem; min-width: 1.5rem;"/>
+            <h1 style="font-weight: bold; font-size: xx-large; margin-bottom: 1rem; padding-left: 1rem">Loading MapComplete, hang on...</h1>
+        </div>
    <p class="subtle" style="padding-bottom: 1rem">Powered by OpenStreetMap</p>
    <div style="background: #ffffffaa; padding-bottom: 1rem; border-radius: 0.25rem">
    <!-- DESCRIPTION START -->