added particles and some code for recent block listing

This commit is contained in:
Kevin 2020-06-20 05:31:51 -05:00
parent c9a6769be7
commit c81df9093d
9 changed files with 1789 additions and 30 deletions

View File

@ -66,5 +66,5 @@ class ClientAPISecurity:
if request.endpoint in ('siteapi.site', 'siteapi.siteFile'):
resp.headers['Content-Security-Policy'] = "default-src 'none'; style-src 'self' data: 'unsafe-inline'; img-src 'self' data:; media-src 'self' data:"
else:
resp.headers['Content-Security-Policy'] = "default-src 'none'; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self'"
resp.headers['Content-Security-Policy'] = "default-src 'none'; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self'; frame-src 'none'; font-src 'self'; connect-src 'self'"
return resp

View File

@ -2,10 +2,17 @@
SSE API for node client access
"""
from pathlib import Path
from flask import g, Blueprint
from gevent import sleep
import gevent
import ujson
from onionrblocks.onionrblockapi import Block
from coredb.dbfiles import block_meta_db
from coredb.blockmetadb import get_block_list
from onionrutils.epoch import get_epoch
from onionrstatistics.transports.tor import TorStats
from .. import wrapper
"""
@ -45,3 +52,22 @@ def stream_tor_circuits():
yield "data: " + tor_stats.get_json() + "\n\n"
sleep(10)
return SSEWrapper.handle_sse_request(circuit_stat_stream)
@private_sse_blueprint.route('/recentblocks')
def stream_recent_blocks():
def _compile_json(b_list):
js = {}
for block in b_list:
js[block] = Block(block).btype
return ujson.dumps(js, reject_bytes=True)
def _stream_recent():
last_time = Path(block_meta_db).stat().st_ctime
while True:
if Path(block_meta_db).stat().st_ctime != last_time:
last_time = Path(block_meta_db).stat().st_ctime
yield "data: " + _compile_json(get_block_list(get_epoch() - 5)) + "\n\n"
else:
yield "data: none" + "\n\n"
sleep(5)
return SSEWrapper.handle_sse_request(_stream_recent)

View File

@ -15,10 +15,12 @@
<script defer src="/shared/node_modules/pnotify/dist/iife/PNotify.js"></script>
<script defer src="/shared/node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
<script defer src="/shared/eventsource.js"></script>
<script defer src="/shared/main/particles.js"></script>
<script defer src="/shared/loadabout.js"></script>
<script defer src="/shared/misc.js"></script>
<script defer src="/shared/getos.js"></script>
<script defer src="/shared/main/stats.js"></script>
<script defer src="/shared/main/recent.js"></script>
<script defer src="/shared/main/torstats.js"></script>
<script defer src="/shared/panel.js"></script>
<script defer src="/shared/configeditor.js"></script>
@ -118,8 +120,9 @@
<br>
<!--Start of content-->
<div class="container">
<div class="container mainCont">
<div class="columns">
<div class="column">
<!--Onionr Card-->
@ -262,6 +265,18 @@
Blocks to download: <span id="blockQueue"></span>
</div>
</div>
<div class="columns">
<div class="column">
<p class="buttons">
<button class="button is-small">
<span class="icon is-small">
<i class="fas fa-stream"></i>
</span>
<span>Recent blocks</span>
</button>
</p>
</div>
</div>
<h4>Process</h4>
<div class="columns">
<div class="column">
@ -300,6 +315,8 @@
</div>
</div>
</div>
</div>
<div id="particles-js"></div>
<br>
<div class="modal aboutModal">
<div class="modal-background"></div>
@ -311,7 +328,18 @@
Loading... <i class="fas fa-spinner fa-spin"></i>
</section>
</div>
</div>
</div>
<div class="modal recentModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<button class="closeRecentModal delete" aria-label="close"></button>
</header>
<section class="modal-card-body recentBody">
Loading... <i class="fas fa-spinner fa-spin"></i>
</section>
</div>
</div>
</body>
</html>

View File

@ -32,4 +32,28 @@
.torStats{
color: red;
}
}
/* ---- reset ---- */
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position:absolute;
width:100%;
height:100%;
top:0;
z-index:-1;
}
.mainCont{
z-index: 2;
position: fixed;
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 10,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 10,
"random": true,
"anim": {
"enable": false,
"speed": 80,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 300,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 800,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 800,
"size": 80,
"duration": 2,
"opacity": 0.8,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

View File

@ -0,0 +1,10 @@
var recentSource = new EventSourcePolyfill('/recentblocks', {
headers: {
"token": webpass
}
})
recentSource.onmessage = function(e){
console.debug(e)
}

View File

@ -143,4 +143,10 @@ document.addEventListener("visibilitychange", function() {
})
getStats()
setInterval(function(){getStats()}, 1000)
setInterval(function(){getStats()}, 1000)
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', '/shared/main/particles.json', function() {
console.log('callback - particles.js config loaded');
});

View File

@ -1,27 +1,41 @@
var torSource = new EventSourcePolyfill('/torcircuits', {
fetch('/config/get/transports.tor', {
headers: {
"token": webpass
}
})
var displays = document.getElementsByClassName('torInfo')
for (x = 0; x < displays.length; x++){
displays[x].style.whiteSpace = 'pre'
}
torSource.onmessage = function(e){
let data = JSON.parse(e.data)
let i = 0
let displaying = true
for (x = 0; x < displays.length; x++){
let circuitCount = Object.keys(data).length
let node = Object.keys(data)[0]
if (circuitCount > 0){
displays[x].innerText = "Using " + circuitCount + " Tor circuits with " + data[node]['nodes'][0]['finger'] + " as guard.\nGuard nick: " + data[node]['nodes'][0]['nick']
}
else{
displays[x].innerText = "Using 0 Tor circuits."
}
}
}
}})
.then((resp) => resp.text()) // Transform the data into text
.then(function(resp) {
var displays = document.getElementsByClassName('torInfo')
if (resp == true){
var torSource = new EventSourcePolyfill('/torcircuits', {
headers: {
"token": webpass
}
})
displays = document.getElementsByClassName('torInfo')
for (x = 0; x < displays.length; x++){
displays[x].style.whiteSpace = 'pre'
}
torSource.onmessage = function(e){
let data = JSON.parse(e.data)
let i = 0
let displaying = true
for (x = 0; x < displays.length; x++){
let circuitCount = Object.keys(data).length
let node = Object.keys(data)[0]
if (circuitCount > 0){
displays[x].innerText = "Using " + circuitCount + " Tor circuits with " + data[node]['nodes'][0]['finger'] + " as guard.\nGuard nick: " + data[node]['nodes'][0]['nick']
}
else{
displays[x].innerText = "Using 0 Tor circuits."
}
}
}
}
else{
console.debug("No tor enabled, not getting tor stats")
displays[0].innerHTML = "<i class=\"fas fa-plug\"></i> Tor is disabled"
}
})