Merge branch 'develop' into nas_ui_migration

2025-08-25 16:35:07 +03:00 · 2022-12-23 16:16:17 +02:00 · 2022-12-23 16:16:17 +02:00 · 7e3e788842
commit 7e3e788842
parent b55c8d3130 5fb45014f2
7 changed files with 261 additions and 44 deletions
--- a/contrib/ui/mesh-ui/ui/assets/mesh-ui-es5.js
+++ b/contrib/ui/mesh-ui/ui/assets/mesh-ui-es5.js
@ -299,8 +299,6 @@ ui.getConnectedPeers = function () {

 ui.updateConnectedPeersHandler = function (peers) {
  ui.updateStatus(peers);
-  ui.updateSpeed(peers);
-  ui.updateCoordsInfo();
  $("peers").innerText = "";
  if (peers) {
    var regexStrip = /%[^\]]*/gm;
@ -381,7 +379,7 @@ ui.updateSelfInfo = function () {
  return ui.getSelfInfo().then(function (info) {
    $("ipv6").innerText = info.address;
    $("subnet").innerText = info.subnet;
-    $("coordinates").innerText = ''.concat('[',info.coords.join(' '),']');
+    $("coordinates").innerText = ''.concat('[', info.coords.join(' '), ']');
    $("pub_key").innerText = info.key;
    $("priv_key").innerText = info.private_key;
    $("ipv6").innerText = info.address;
@ -391,16 +389,6 @@ ui.updateSelfInfo = function () {
  });
 };

-ui.updateCoordsInfo = function () {
-  return ui.getSelfInfo().then(function (info) {
-    $("coordinates").innerText = ''.concat('[',info.coords.join(' '),']');
-  }).catch(function (error) {
-    $("ipv6").innerText = error.message;
-  });
-};
-
-ui.sse = new EventSource('/api/sse');
-
 function main() {

  window.addEventListener("load", function () {
@ -412,6 +400,8 @@ function main() {

    ui.updateSelfInfo();

+    ui.sse = new EventSource('/api/sse');
+
    ui.sse.addEventListener("ping", function (e) {
      var data = JSON.parse(e.data);
      setPingValue(data.peer, data.value);
@ -420,7 +410,16 @@ function main() {
    ui.sse.addEventListener("peers", function (e) {
      ui.updateConnectedPeersHandler(JSON.parse(e.data));
    });
+
+    ui.sse.addEventListener("rxtx", function (e) {
+      ui.updateSpeed(JSON.parse(e.data));
+    });
+
+    ui.sse.addEventListener("coord", function (e) {
+      var coords = JSON.parse(e.data);
+      $("coordinates").innerText = ''.concat('[', coords.join(' '), ']');
+    });
  });
 }

-main();
+main();
--- a/contrib/ui/mesh-ui/ui/assets/mesh-ui.css
+++ b/contrib/ui/mesh-ui/ui/assets/mesh-ui.css
@ -68,7 +68,7 @@ img {
  display: block;
 }

-body {
+body, #notification_windowx {
  max-width: 690px;
  margin: auto;
 }
@ -94,11 +94,12 @@ footer {
  white-space: nowrap;
 }

-#version {
+#footer-row #version {
  padding-left: 20px;
+  padding-right: 20px;
 }

-#status {
+#footer-row #status {
  padding-right: 20px;
  padding-left: 20px;
 }
--- a/contrib/ui/mesh-ui/ui/assets/mesh-ui.js
+++ b/contrib/ui/mesh-ui/ui/assets/mesh-ui.js
@ -286,8 +286,6 @@ ui.getConnectedPeers = () =>

 ui.updateConnectedPeersHandler = (peers) => {
  ui.updateStatus(peers);
-  ui.updateSpeed(peers);
-  ui.updateCoordsInfo();
  $("peers").innerText = "";
  if(peers) {
    const regexStrip = /%[^\]]*/gm;
@ -368,16 +366,6 @@ ui.updateSelfInfo = () =>
      $("ipv6").innerText = error.message;
    });

-ui.updateCoordsInfo = function () {
-  return ui.getSelfInfo().then(function (info) {
-    $("coordinates").innerText = ''.concat('[',info.coords.join(' '),']');
-  }).catch(function (error) {
-    $("ipv6").innerText = error.message;
-  });
-};
-
-ui.sse = new EventSource('/api/sse');
-
 function main() {

  window.addEventListener("load", () => {
@ -386,7 +374,8 @@ function main() {
    ui.getAllPeers().then(() => ui.updateConnectedPeers());

    ui.updateSelfInfo();
-    //setInterval(ui.updateSelfInfo, 5000);
+
+    ui.sse = new EventSource('/api/sse');

    ui.sse.addEventListener("ping", (e) => {
      let data = JSON.parse(e.data);
@ -397,6 +386,15 @@ function main() {
      ui.updateConnectedPeersHandler(JSON.parse(e.data));
    })
    
+    ui.sse.addEventListener("rxtx", (e) => {
+      ui.updateSpeed(JSON.parse(e.data));
+    })
+    
+    ui.sse.addEventListener("coord", (e) => {
+      let coords = JSON.parse(e.data);
+      $("coordinates").innerText = ''.concat('[',coords.join(' '),']');
+    })
+    
  });
 }

--- a/contrib/ui/mesh-ui/ui/index.html
+++ b/contrib/ui/mesh-ui/ui/index.html
@ -33,7 +33,7 @@
 <body class="hero is-fullheight">
  <div>
    <div class="box is-hidden" id="notification_window">
-      <div style="z-index: 9;" class="notification is-primary">
+      <div id="notification_windowx" style="z-index: 9;" class="notification is-primary">
        <button class="delete" id="info_win_close"></button>
        <p style="padding:3px; max-height: 250px; overflow-y: auto;" id="info_window"></p>
        <div style="padding-left:100px; padding-top:15px;" class="field is-grouped">
--- a/contrib/ui/mesh-ui/webview.go
+++ b/contrib/ui/mesh-ui/webview.go
@ -3,6 +3,7 @@ package main
 import (
 	"log"
 	"os"
+	"strings"

 	"github.com/RiV-chain/RiV-mesh/src/defaults"

@ -46,6 +47,191 @@ func main() {
 	}

 	log.Printf("Opening: %v", confui.IndexHtml)
-	w.Navigate(confui.IndexHtml)
+	w.SetHtml(strings.Replace(splash, "http://localhost:19019", confui.IndexHtml, 1))
 	w.Run()
 }
+
+var splash = `<!DOCTYPE html>
+<html>
+<head>
+<title>Riv mesh</title>
+</head>
+<script>
+let ep = "http://localhost:19019";
+
+function redirect() {
+  fetch(ep + '/api')
+      .then(() => {
+        window.location.replace(ep);
+      }).catch((error) => {
+        document.getElementById("error").innerHTML = "Mesh service connection error<br>Waiting for connection....";
+        setTimeout(redirect, 1000);
+      });
+}
+redirect();
+
+</script>
+<style>
+body {
+  background: #333;
+}
+
+.spinner {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.spinner .blob {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid #fff;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.spinner .blob.top {
+  top: 0;
+  -webkit-animation: blob-top 1s infinite ease-in;
+          animation: blob-top 1s infinite ease-in;
+}
+.spinner .blob.bottom {
+  top: 100%;
+  -webkit-animation: blob-bottom 1s infinite ease-in;
+          animation: blob-bottom 1s infinite ease-in;
+}
+.spinner .blob.left {
+  left: 0;
+  -webkit-animation: blob-left 1s infinite ease-in;
+          animation: blob-left 1s infinite ease-in;
+}
+.spinner .move-blob {
+  background: #fff;
+  top: 0;
+  -webkit-animation: blob-spinner-mover 1s infinite ease-in;
+          animation: blob-spinner-mover 1s infinite ease-in;
+}
+
+@-webkit-keyframes blob-bottom {
+  25%, 50%, 75% {
+    top: 50%;
+    left: 100%;
+  }
+  100% {
+    top: 0;
+    left: 50%;
+  }
+}
+
+@keyframes blob-bottom {
+  25%, 50%, 75% {
+    top: 50%;
+    left: 100%;
+  }
+  100% {
+    top: 0;
+    left: 50%;
+  }
+}
+@-webkit-keyframes blob-left {
+  25% {
+    top: 50%;
+    left: 0;
+  }
+  50%, 100% {
+    top: 100%;
+    left: 50%;
+  }
+}
+@keyframes blob-left {
+  25% {
+    top: 50%;
+    left: 0;
+  }
+  50%, 100% {
+    top: 100%;
+    left: 50%;
+  }
+}
+@-webkit-keyframes blob-top {
+  50% {
+    top: 0;
+    left: 50%;
+  }
+  75%, 100% {
+    top: 50%;
+    left: 0;
+  }
+}
+@keyframes blob-top {
+  50% {
+    top: 0;
+    left: 50%;
+  }
+  75%, 100% {
+    top: 50%;
+    left: 0;
+  }
+}
+@-webkit-keyframes blob-spinner-mover {
+  0%, 100% {
+    top: 0;
+    left: 50%;
+  }
+  25% {
+    top: 50%;
+    left: 100%;
+  }
+  50% {
+    top: 100%;
+    left: 50%;
+  }
+  75% {
+    top: 50%;
+    left: 0;
+  }
+}
+@keyframes blob-spinner-mover {
+  0%, 100% {
+    top: 0;
+    left: 50%;
+  }
+  25% {
+    top: 50%;
+    left: 100%;
+  }
+  50% {
+    top: 100%;
+    left: 50%;
+  }
+  75% {
+    top: 50%;
+    left: 0;
+  }
+}
+
+#error {
+  color: #fff;
+  font-size: 1.5em;
+  text-align: center;
+  margin-top: 2em;
+}
+  
+</style>
+<body>
+<div id="error"></div>
+<div class="spinner">
+  <div class="blob top"></div>
+  <div class="blob bottom"></div>
+  <div class="blob left"></div>
+  
+  <div class="blob move-blob"></div>
+</div>
+
+</body>
+</html>
+`