Git-Mirrors/monero.fail
1
0
Fork 0
mirror of https://github.com/lalanza808/monero.fail.git synced 2025-08-13 18:55:28 -04:00
Code Issues Projects Releases Packages Wiki Activity

more improvements to map load performance

Browse source
This commit is contained in:
lza_menace 2024-05-24 16:42:10 -07:00
parent 899ce98c19
commit 5d363417f8
2 changed files with 18 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
xmrnodes/routes/meta.py
View file

@ -69,7 +69,7 @@ def map():
if fetch: if fetch:
_peers = {} _peers = {}
next = None next = None
limit = 400 limit = 500
rgb = "238,111,45" rgb = "238,111,45"
offset = request.args.get("offset", 0) offset = request.args.get("offset", 0)
offset = int(offset) offset = int(offset)

37
xmrnodes/templates/map.html
View file

@ -36,10 +36,10 @@
padding: 2em; padding: 2em;
} }
</style> </style>
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script> <script defer src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
<script src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script> <script defer src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script> <script defer src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script> <script defer src="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<title>XMR Nodes</title> <title>XMR Nodes</title>
</head> </head>
@ -66,22 +66,17 @@
<br> <br>
<a href="/">Go home</a> <a href="/">Go home</a>
</div> </div>
<div id="map" class="map"> <div id="loadingContainer" style="width: 100%; text-align: center;">
<div id="loadingContainer" style="width: 100%; text-align: center;"> <h1>Loading map... <span id="loadProgress"></span></h1>
<img id="loading" src="/static/images/helping.gif" style="width: 30%;" /> <img id="loading" src="/static/images/helping.gif" style="width: 30%;" />
</div>
</div> </div>
<div id="map" class="map"></div>
<div id="popup" class="popup" title="Welcome to OpenLayers"></div> <div id="popup" class="popup" title="Welcome to OpenLayers"></div>
<script> <script>
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function fetchWithDelay(total, delayMs) { async function fetchWithDelay(total, delayMs) {
for(let i=0; i < total + 1; i++) { for(let i=0; i < total + 1; i++) {
console.log(`Fetching page ${i}`) document.getElementById('loadProgress').innerHTML = `%${Math.round(i / total * 100, 2)}`;
try { try {
await fetch(`?fetch=1&offset=${i}`) await fetch(`?fetch=1&offset=${i}`)
.then((res) => res.json()) .then((res) => res.json())
@ -113,8 +108,10 @@
} catch (err) { } catch (err) {
console.error(`Error on request ${i}`); console.error(`Error on request ${i}`);
} }
await delay(delayMs);
} }
// Remove loader and show map
document.getElementById('loadingContainer').remove();
document.getElementById('map').style['opacity'] = 1;
} }
async function loadMap() { async function loadMap() {
@ -147,7 +144,7 @@
const res = await fetch('?fetch=1') const res = await fetch('?fetch=1')
.then((res) => res.json()) .then((res) => res.json())
console.log(`Found ${res.total} pages of peers to fetch`) console.log(`Found ${res.total} pages of peers to fetch`)
fetchWithDelay(res.total, 1500); fetchWithDelay(res.total);
// Setup popup // Setup popup
var popup = new ol.Overlay({ var popup = new ol.Overlay({
@ -174,14 +171,14 @@
$(element).popover('show'); $(element).popover('show');
}); });
}); });
// Remove loader
document.getElementById('loadingContainer').remove();
} }
// Wait for full load // Wait for full load
addEventListener("DOMContentLoaded", (event) => { addEventListener("DOMContentLoaded", (event) => {
setTimeout(loadMap, 2500); document.getElementById('map').style['opacity'] = 0;
setTimeout(function() {
loadMap();
}, 1500);
}); });
</script> </script>