added particles and some code for recent block listing

src/httpapi/security/client.py

@@ -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

src/httpapi/sse/private/__init__.py

@@ -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)

static-data/www/private/index.html

@@ -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>

static-data/www/private/main.css

@@ -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;
+      
+  }

static-data/www/shared/main/particles.json

@@ -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
+  }

static-data/www/shared/main/recent.js

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

static-data/www/shared/main/stats.js

@@ -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');
+  });

static-data/www/shared/main/torstats.js

@@ -1,27 +1,41 @@
-var torSource = new EventSourcePolyfill('/torcircuits', {
+fetch('/config/get/transports.tor', {
     headers: {
         "token": webpass
-    }
+    }})
-  })
+    .then((resp) => resp.text()) // Transform the data into text
-var displays = document.getElementsByClassName('torInfo')
+    .then(function(resp) {
-
+        var displays = document.getElementsByClassName('torInfo')
-for (x = 0; x < displays.length; x++){
+        if (resp == true){
-    displays[x].style.whiteSpace = 'pre'
+            var torSource = new EventSourcePolyfill('/torcircuits', {
-}
+                headers: {
-
+                    "token": webpass
-torSource.onmessage = function(e){
+                }
-    let data = JSON.parse(e.data)
+              })
-    let i = 0
+            displays = document.getElementsByClassName('torInfo')
-    let displaying = true
+            
-    for (x = 0; x < displays.length; x++){
+            for (x = 0; x < displays.length; x++){
-       let circuitCount = Object.keys(data).length
+                displays[x].style.whiteSpace = 'pre'
-       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']
+            torSource.onmessage = function(e){
-       }
+                let data = JSON.parse(e.data)
-       else{
+                let i = 0
-           displays[x].innerText = "Using 0 Tor circuits."
+                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"
+        }
+})