From 28ef3e2fe1cb1c23bad7daac022aad76c21ceaa6 Mon Sep 17 00:00:00 2001 From: lza_menace Date: Fri, 24 May 2024 02:10:31 -0700 Subject: [PATCH] map page load improvements --- xmrnodes/routes/meta.py | 40 ++++++++++--- xmrnodes/templates/map.html | 109 +++++++++++++----------------------- 2 files changed, 71 insertions(+), 78 deletions(-) diff --git a/xmrnodes/routes/meta.py b/xmrnodes/routes/meta.py index b3e0f8f..64fb674 100644 --- a/xmrnodes/routes/meta.py +++ b/xmrnodes/routes/meta.py @@ -1,6 +1,8 @@ import re from random import shuffle +from math import ceil +import arrow from flask import request, redirect, Blueprint from flask import render_template, flash, Response from urllib.parse import urlparse @@ -63,16 +65,36 @@ def index(): @bp.route("/map") def map(): - try: - peers = Peer.select() - nodes = Node.select().where(Node.datetime_checked) - except: - flash("Couldn't load the map. Try again later.") - return redirect("/") + fetch = request.args.get("fetch") + if fetch: + _peers = {} + next = None + limit = 100 + rgb = "238,111,45" + offset = request.args.get("offset", 0) + offset = int(offset) + peers = Peer.select().order_by(Peer.datetime.asc()) + paginated_peers = peers.paginate(offset, limit) + total = ceil(peers.count() / limit) + if offset < total: + next = offset + 1 + for peer in paginated_peers: + opacity = 1 - (peer.hours_elapsed() / 100) + _peers[peer.url] = { + "rgba": f"rgba({rgb},{opacity})", + "lat": peer.lat, + "lon": peer.lon, + "last_seen": arrow.get(peer.datetime).humanize() + } + return { + "offset": offset, + "next": next, + "total": total, + "peers": _peers + } return render_template( - "map.html", - peers=peers, - nodes=nodes, + "map.html", + recent_peers=Peer.select().count(), source_node=config.NODE_HOST ) diff --git a/xmrnodes/templates/map.html b/xmrnodes/templates/map.html index 001e40f..5f1c5e5 100644 --- a/xmrnodes/templates/map.html +++ b/xmrnodes/templates/map.html @@ -56,7 +56,7 @@ {% endwith %}
-

Recent Peers: {{ peers | length }}

+

Recent Peers: {{ recent_peers }}

Source Node: {{ source_node }}

This is not a full representation of the entire Monero network, @@ -89,7 +89,8 @@ target: 'map', layers: [ new ol.layer.Tile({ - source: new ol.source.OSM() + source: new ol.source.OSM(), + preload: 4 }), markerLayer ], @@ -99,73 +100,43 @@ }) }); - {% for peer in nodes %} - {% if peer.datetime_checked | hours_elapsed > 24 %} - {% set fill_color = 'rgba(1,1,45,.2)' %} - {% elif peer.datetime_checked | hours_elapsed > 16 %} - {% set fill_color = 'rgba(1,1,45,.4)' %} - {% elif peer.datetime_checked | hours_elapsed > 8 %} - {% set fill_color = 'rgba(1,1,45,.6)' %} - {% elif peer.datetime_checked | hours_elapsed > 4 %} - {% set fill_color = 'rgba(1,1,45,.8)' %} - {% else %} - {% set fill_color = 'rgba(1,1,45,1)' %} - {% endif %} - var feature = new ol.Feature( - new ol.geom.Point(ol.proj.transform(['{{ peer.lon }}', '{{ peer.lat }}'], 'EPSG:4326', 'EPSG:3857')) - ); - feature.description = [ - 'Node {{ peer.url }}', - 'Last seen {{ peer.datetime_checked | humanize }}' - ]; - feature.setStyle(new ol.style.Style({ - image: new ol.style.Circle({ - radius: 6, - fill: new ol.style.Fill({ - color: '{{ fill_color }}', - }), - stroke: new ol.style.Stroke({ - color: '#fff', - width: 1 - }) - }) - })); - markerLayer.getSource().addFeature(feature); - {% endfor %} - - {% for peer in peers %} - {% if peer.datetime | hours_elapsed > 24 %} - {% set fill_color = 'rgba(238,111,45,.2)' %} - {% elif peer.datetime | hours_elapsed > 16 %} - {% set fill_color = 'rgba(238,111,45,.4)' %} - {% elif peer.datetime | hours_elapsed > 8 %} - {% set fill_color = 'rgba(238,111,45,.6)' %} - {% elif peer.datetime | hours_elapsed > 4 %} - {% set fill_color = 'rgba(238,111,45,.8)' %} - {% else %} - {% set fill_color = 'rgba(238,111,45,1)' %} - {% endif %} - var feature = new ol.Feature( - new ol.geom.Point(ol.proj.transform(['{{ peer.lon }}', '{{ peer.lat }}'], 'EPSG:4326', 'EPSG:3857')) - ); - feature.description = [ - 'Peer {{ peer.url }}', - 'Last seen {{ peer.datetime | humanize }}' - ]; - feature.setStyle(new ol.style.Style({ - image: new ol.style.Circle({ - radius: 6, - fill: new ol.style.Fill({ - color: '{{ fill_color }}', - }), - stroke: new ol.style.Stroke({ - color: '#fff', - width: 1 - }) + + fetch('?fetch=1') + .then((response) => response.json()) + .then((data) => { + let total = data.total; + for(i=0;i res.json()) + .then((d) => { + setTimeout(function() { + for (var url in d.peers) { + let peer = d.peers[url]; + var feature = new ol.Feature( + new ol.geom.Point(ol.proj.transform([peer.lon, peer.lat], 'EPSG:4326', 'EPSG:3857')) + ); + feature.description = [ + `Node ${url}`, + `Last Seen ${peer.last_seen}` + ]; + feature.setStyle(new ol.style.Style({ + image: new ol.style.Circle({ + radius: 6, + fill: new ol.style.Fill({ + color: peer.rgba, + }), + stroke: new ol.style.Stroke({ + color: '#fff', + width: 1 + }) + }) + })); + markerLayer.getSource().addFeature(feature); + } + }, 400) + }) + } }) - })); - markerLayer.getSource().addFeature(feature); - {% endfor %} // Setup popup var popup = new ol.Overlay({ @@ -199,7 +170,7 @@ // Wait for full load addEventListener("DOMContentLoaded", (event) => { - setTimeout(loadMap, 1000); + setTimeout(loadMap, 1500); });