mirror of
https://github.com/lalanza808/monero.fail.git
synced 2025-08-12 07:40:03 -04:00
map page load improvements
This commit is contained in:
lza_menace
parent
b014ba2e31
commit
28ef3e2fe1
2 changed files with 71 additions and 78 deletions
|
|
@ -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
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
{% endwith %}
|
||||
|
||||
<div class="center info">
|
||||
<p>Recent Peers: {{ peers | length }}</p>
|
||||
<p>Recent Peers: {{ recent_peers }}</p>
|
||||
<p>Source Node: {{ source_node }}</p>
|
||||
<p>
|
||||
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
|
||||
})
|
||||
|
||||
fetch('?fetch=1')
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
let total = data.total;
|
||||
for(i=0;i<total+1;i++) {
|
||||
fetch(`?fetch=1&offset=${i}`)
|
||||
.then((res) => 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 %}
|
||||
|
||||
{% 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
|
||||
})
|
||||
})
|
||||
}));
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue