midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Tweaking the loading screen

Browse source
This commit is contained in:
pietervdvn 2022-02-06 03:45:32 +01:00
parent dd63ed7ab0
commit b8b63dc34c
6 changed files with 59 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
Logic/SimpleMetaTagger.ts
View file

@ -294,83 +294,43 @@ export default class SimpleMetaTaggers {
return true; return true;
} }
// _isOpen is calculated dynamically on every call
Object.defineProperty(feature.properties, "_isOpen", { Object.defineProperty(feature.properties, "_isOpen", {
enumerable: false, enumerable: false,
configurable: true, configurable: true,
get: () => { get: () => {
if (feature.properties.id === "node/7464543832") { const tags = feature.properties
console.log("Getting _isOpen for ", feature.properties.i) 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) try {
const updateTags = () => { const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
const oldValueIsOpen = tags["_isOpen"]; const oh = new opening_hours(tags["opening_hours"], {
const oldNextChange = tags["_isOpen:nextTrigger"] ?? 0; lat: lat,
lon: lon,
if (oldNextChange > (new Date()).getTime() && address: {
tags["_isOpen:oldvalue"] === tags["opening_hours"] // Check that changes have to be made country_code: tags._country.toLowerCase()
&& 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
)
}
} }
updateTags(); }, {tag_key: "opening_hours"});
} catch (e) {
console.warn("Error while parsing opening hours of ", tags.id, e);
delete tags._isOpen
tags["_isOpen"] = "parse_error";
}
}) // Recalculate!
return undefined return oh.getState() ? "yes" : "no";
}
}) } catch (e) {
return true; 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);
}) })
) )

22
index.manifest
View file

@ -9,57 +9,57 @@
"orientation": "portrait-primary, landscape-primary", "orientation": "portrait-primary, landscape-primary",
"icons": [ "icons": [
{ {
"src": "./assets/generated/svg_mapcomplete_logo72.png", "src": "assets/generated/svg_mapcomplete_logo72.png",
"sizes": "72x72", "sizes": "72x72",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo96.png", "src": "assets/generated/svg_mapcomplete_logo96.png",
"sizes": "96x96", "sizes": "96x96",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo120.png", "src": "assets/generated/svg_mapcomplete_logo120.png",
"sizes": "120x120", "sizes": "120x120",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo128.png", "src": "assets/generated/svg_mapcomplete_logo128.png",
"sizes": "128x128", "sizes": "128x128",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo144.png", "src": "assets/generated/svg_mapcomplete_logo144.png",
"sizes": "144x144", "sizes": "144x144",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo152.png", "src": "assets/generated/svg_mapcomplete_logo152.png",
"sizes": "152x152", "sizes": "152x152",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo180.png", "src": "assets/generated/svg_mapcomplete_logo180.png",
"sizes": "180x180", "sizes": "180x180",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo192.png", "src": "assets/generated/svg_mapcomplete_logo192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo384.png", "src": "assets/generated/svg_mapcomplete_logo384.png",
"sizes": "384x384", "sizes": "384x384",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "./assets/generated/svg_mapcomplete_logo512.png", "src": "assets/generated/svg_mapcomplete_logo512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "assets/svg/mapcomplete_logo.svg", "src": "./assets/svg/mapcomplete_logo.svg",
"sizes": "513x513", "sizes": "513x513",
"type": "image/svg" "type": "image/svg"
} }

4
langs/en.json
View file

@ -271,7 +271,9 @@
"apply_button": { "apply_button": {
"isApplied": "The changes are applied", "isApplied": "The changes are applied",
"appliedOnAnotherObject": "The object {id} will receive {tags}" "appliedOnAnotherObject": "The object {id} will receive {tags}"
} },
"loadingTheme": "Loading {theme}...",
"poweredByOsm": "Powered by OpenStreetMap"
}, },
"favourite": { "favourite": {
"panelIntro": "<h3>Your personal theme</h3>Activate your favourite layers from all the official themes", "panelIntro": "<h3>Your personal theme</h3>Activate your favourite layers from all the official themes",

2
langs/nl.json
View file

@ -35,6 +35,8 @@
"logIn": "Log in om andere thema's te zien waar je al in bewerkt hebt" "logIn": "Log in om andere thema's te zien waar je al in bewerkt hebt"
}, },
"general": { "general": {
"loadingTheme": "{theme} wordt geladen...",
"poweredByOsm": "Gebouwd met OpenStreetMap",
"loginWithOpenStreetMap": "Aanmelden met OpenStreetMap", "loginWithOpenStreetMap": "Aanmelden met OpenStreetMap",
"welcomeBack": "Je bent aangemeld. Welkom terug!", "welcomeBack": "Je bent aangemeld. Welkom terug!",
"loginToStart": "Meld je aan om deze vraag te beantwoorden", "loginToStart": "Meld je aan om deze vraag te beantwoorden",

19
scripts/generateLayouts.ts
View file

@ -98,9 +98,9 @@ async function createManifest(layout: LayoutConfig, alreadyWritten: string[]) {
const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512]; const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512];
for (const size of sizes) { for (const size of sizes) {
const name = await createIcon(path, size, alreadyWritten); const name = await createIcon(path, size, alreadyWritten);
createIcon(whiteBackgroundPath, size, alreadyWritten) await createIcon(whiteBackgroundPath, size, alreadyWritten)
icons.push({ icons.push({
src: "./"+name, src: name,
sizes: size + "x" + size, sizes: size + "x" + size,
type: "image/png" type: "image/png"
}) })
@ -140,9 +140,9 @@ async function createManifest(layout: LayoutConfig, alreadyWritten: string[]) {
async function createLandingPage(layout: LayoutConfig, manifest) { async function createLandingPage(layout: LayoutConfig, manifest) {
Locale.language.setData(layout.language[0]); Locale.language.setData(layout.language[0]);
const targetLanguage = layout.language[0]
const ogTitle = Translations.WT(layout.title).txt.replace(/"/g, '\\"'); const ogTitle = Translations.WT(layout.title).textFor(targetLanguage).replace(/"/g, '\\"');
const ogDescr = Translations.WT(layout.shortDescription ?? "Easily add and edit geodata with OpenStreetMap").txt.replace(/"/g, '\\"'); const ogDescr = Translations.WT(layout.shortDescription ?? "Easily add and edit geodata with OpenStreetMap").textFor(targetLanguage).replace(/"/g, '\\"');
const ogImage = layout.socialImage; const ogImage = layout.socialImage;
let customCss = ""; let customCss = "";
@ -191,10 +191,12 @@ async function createLandingPage(layout: LayoutConfig, manifest) {
...apple_icons ...apple_icons
].join("\n") ].join("\n")
const loadingText = Translations.t.general.loadingTheme.Subs({theme: ogTitle});
let output = template 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(/<!-- 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>`); .replace("<script src=\"./index.ts\"></script>", `<script src='./index_${layout.id}.ts'></script>`);
try { try {
@ -227,7 +229,6 @@ async function main(): Promise<void>{
createDir("./assets/generated") createDir("./assets/generated")
createDir("./assets/generated/layers") createDir("./assets/generated/layers")
createDir("./assets/generated/themes") createDir("./assets/generated/themes")
createDir("./assets/generated/white_background")
const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap", "custom", "theme"] const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap", "custom", "theme"]
// @ts-ignore // @ts-ignore
@ -268,7 +269,7 @@ async function main(): Promise<void>{
} }
await createManifest(new LayoutConfig({ await createManifest(new LayoutConfig({
icon: "assets/svg/mapcomplete_logo.svg", icon: "./assets/svg/mapcomplete_logo.svg",
id: "index", id: "index",
layers: [], layers: [],
maintainer: "Pieter Vander Vennet", maintainer: "Pieter Vander Vennet",

5
theme.html
View file

@ -65,7 +65,10 @@
id="centermessage" style="z-index: 4000"> id="centermessage" style="z-index: 4000">
<div style="height: max-content"> <div style="height: max-content">
<div style="margin-top: -3rem"> <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> <p class="subtle" style="padding-bottom: 1rem">Powered by OpenStreetMap</p>
<div style="background: #ffffffaa; padding-bottom: 1rem; border-radius: 0.25rem"> <div style="background: #ffffffaa; padding-bottom: 1rem; border-radius: 0.25rem">
<!-- DESCRIPTION START --> <!-- DESCRIPTION START -->