diff --git a/src/css/index.less b/src/css/index.less index 640d461..c673ecf 100644 --- 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 index d97d112..79694c5 100644 --- a/src/index.html +++ b/src/index.html @@ -306,10 +306,10 @@
...
-
+
...
-
+
...
diff --git a/src/js/helpers/disco.js b/src/js/helpers/disco.js new file mode 100644 index 0000000..99b3a0c --- /dev/null +++ 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) +} \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index 4ed04f0..c21616a 100644 --- 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 index 1ceca9a..8001444 100644 --- 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 index b5da40e..e72cabf 100644 --- 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 index 601cf82..fffa29a 100644 --- 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