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