minor improves

olton · Oct 14, 2021 · eda004a · eda004a
1 parent d0bfb93
commit eda004a
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 6 deletions.
diff --git a/src/css/index.less b/src/css/index.less
@@ -284,6 +284,11 @@ body {
 .rx-count {
     top: 70px;
 }
+
+.tx-chart, .rx-chart {
+    min-height: 65px;
+}
+
 .response-count {
     top: 80px;
 }
@@ -403,6 +408,15 @@ body {
     display: block;
 }
 
+.not-connected {
+    border: 1px solid red!important;
+    background-color: #efefef;
+
+    & > * {
+        opacity: .3!important;
+    }
+}
+
 .CATCHUP .catchup-process-right,
 .CATCHUP .catchup-process-left {
     display: flex;

diff --git a/src/index.html b/src/index.html
@@ -306,10 +306,10 @@
                                 <div class="os-info text-small text-center text-bold">...</div>
                             </div>
                             <div class="cell-6 h-100">
-                                <div class="server-time text-small text-center"></div>
+                                <div class="server-time text-small text-center">...</div>
                             </div>
                             <div class="cell-6 h-100 border-left bd-system">
-                                <div class="server-uptime text-small text-center"></div>
+                                <div class="server-uptime text-small text-center">...</div>
                             </div>
                         </div>
                     </div>

diff --git a/src/js/helpers/disco.js b/src/js/helpers/disco.js
@@ -0,0 +1,5 @@
+export const disco = (el, cls= "in-update", dur = 2000) => {
+    const _el = $(el)
+    _el.addClass(cls)
+    setTimeout(() => _el.removeClass("in-update"), 2000)
+}
diff --git a/src/js/index.js b/src/js/index.js
@@ -97,6 +97,7 @@ fetch(configFile).then(r => {
         template.content.querySelector(".panel").setAttribute("data-title-caption", node.name.toUpperCase())
         clone = document.importNode(template.content, true)
         elNodePanel[0].appendChild(clone)
+        elNodePanel.children(".panel").addClass("not-connected")
 
         const connect = () => {
             const ws = new WebSocket(`${node.https ? 'wss' : 'ws'}://${node.host}`)
@@ -145,6 +146,7 @@ fetch(configFile).then(r => {
             }
 
             ws.onclose = event => {
+                $(`#node-${i+1} > .panel`).addClass("not-connected")
                 $(`#node-${i+1} .node-load-status`)
                     .removeClass("label-success")
                     .addClass("label-alert")
@@ -153,9 +155,11 @@ fetch(configFile).then(r => {
             }
 
             ws.onopen = event => {
+                $(`#node-${i+1} > .panel`).removeClass("not-connected")
                 $(`#node-${i+1} .node-load-status`)
                     .removeClass("label-alert")
                     .addClass("label-success")
+                console.log(datetime().format("DD-MM-YYYY HH:mm ") + 'Connected to ', node.name);
             }
 
             globalThis.wsc.push(ws)

diff --git a/src/js/modules/blockchain.js b/src/js/modules/blockchain.js
@@ -1,5 +1,6 @@
 import {isset} from "../helpers/utils";
 import {EPOCH_DURATION, GENESIS_START, SLOT_DURATION} from "../helpers/consts";
+import {disco} from "../helpers/disco";
 
 export const processBlockchain = (i, node, data) => {
     if (!data) return
@@ -20,6 +21,10 @@ export const updateBlockchain = ({resetCountdown = false}) => {
     if (!state.blockchain) return
 
     const elEpochCountdown = $("#epoch-countdown")
+    const elSlotNumber = $("#slot-number")
+    const elSlotsTotalNumber = $("#slot-since-genesis")
+    const elBlockHeight = $("#block-height")
+    const elBlockchainUpdated = $("#blockchain-updated")
 
     const {
         blockHeight,
@@ -29,10 +34,10 @@ export const updateBlockchain = ({resetCountdown = false}) => {
         timestamp
     } = state.blockchain
 
-    $("#slot-number").text(Number(slot).format(0, null, " ", "."))
-    $("#slot-since-genesis").text(Number(slotSinceGenesis).format(0, null, " ", "."))
-    $("#block-height").text(Number(blockHeight).format(0, null, " ", "."))
-    $("#blockchain-updated").html(timestamp.format("DD-MM-YYYY HH:mm"))
+    elSlotNumber.text(Number(slot).format(0, null, " ", "."))
+    elSlotsTotalNumber.text(Number(slotSinceGenesis).format(0, null, " ", "."))
+    elBlockHeight.text(Number(blockHeight).format(0, null, " ", "."))
+    elBlockchainUpdated.html(timestamp.format("DD-MM-YYYY HH:mm"))
 
     const epochDurationProgress = (+slot * SLOT_DURATION * 100) / EPOCH_DURATION
     const progress = Metro.getPlugin('#epoch-number', 'donut')

diff --git a/src/js/modules/price.js b/src/js/modules/price.js
@@ -1,4 +1,5 @@
 import {isset} from "../helpers/utils";
+import {disco} from "../helpers/disco";
 
 export const processMinaPrice = (i, node, data) => {
     if (!data || !isset(data[0], false)) return

diff --git a/src/js/modules/uptime.js b/src/js/modules/uptime.js
@@ -1,5 +1,6 @@
 import {shortAddress} from "../helpers/utils";
 import {MINA_EXPLORER, STAKETAB_EXPLORER} from "../helpers/consts";
+import {disco} from "../helpers/disco";
 
 export const processUptime = (i, node, data) => {
     if (!data) return