Skip to content

Commit

Permalink
Tweaking the loading screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@pietervdvn
pietervdvn committed Feb 6, 2022
1 parent dd63ed7 commit b8b63dc
Show file tree
Hide file tree
Showing 6 changed files with 60 additions and 92 deletions.
100 changes: 30 additions & 70 deletions Logic/SimpleMetaTagger.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
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
)
}
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()
}
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);



})
)
Expand Down
22 changes: 11 additions & 11 deletions index.manifest
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
4 changes: 3 additions & 1 deletion langs/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions langs/nl.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
19 changes: 10 additions & 9 deletions scripts/generateLayouts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
})
Expand Down Expand Up @@ -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 = "";
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion theme.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down

0 comments on commit b8b63dc

Please sign in to comment.