lukechilds
/
umbrel-dashboard
mirror of https://github.com/lukechilds/umbrel-dashboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

polling bug

readme
Mayank 5 years ago
parent
81147bc881
commit
ba46b18c6f
No known key found for this signature in database GPG Key ID: D037D60476CE748C
1 changed files with 95 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 235
      src/components/Blockchain.vue

235
src/components/Blockchain.vue
View File

@ -3,7 +3,7 @@
<div class="blockchain-container">
<div v-if="blocks.length">
<!-- transitions for blocks -->
<transition-group name="blockchain" mode="out-in" tag="ul">
<transition-group name="blockchain" mode="out-in" tag="ul" :duration="5000">
<li
href="#"
class="flex-column align-items-start px-3 px-lg-4 blockchain-block"
@ -13,45 +13,25 @@
<div class="d-flex w-100 justify-content-between">
<div class="d-flex">
<div class="blockchain-block-icon">
<!-- <svg
width="28"
height="30"
viewBox="0 0 28 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.3472 8.84298C24.6806 8.07317 24.6806 6.14865 23.3472 5.37886L15.0304 0.577324C14.4116 0.220073 13.6493 0.220077 13.0305 0.577333L4.71387 5.37887C3.38053 6.14866 3.38052 8.07316 4.71384 8.84297L13.0304 13.6447C13.6493 14.0019 14.4117 14.0019 15.0305 13.6447L23.3472 8.84298Z"
fill="#5351FB"
/>
<path
d="M14.9243 26.5359C14.9243 28.0755 16.591 29.0378 17.9243 28.268L26.2443 23.4644C26.8631 23.1072 27.2443 22.4469 27.2443 21.7324V12.1218C27.2443 10.5822 25.5777 9.61992 24.2444 10.3897L15.9243 15.1931C15.3055 15.5504 14.9243 16.2106 14.9243 16.9252V26.5359Z"
fill="#5351FB"
/>
<path
d="M3.8164 10.3897C2.48306 9.61995 0.816406 10.5822 0.816406 12.1218V21.7324C0.816406 22.4469 1.1976 23.1072 1.81639 23.4644L10.1362 28.268C11.4695 29.0378 13.1362 28.0755 13.1362 26.5359V16.9252C13.1362 16.2106 12.755 15.5504 12.1362 15.1931L3.8164 10.3897Z"
fill="#5351FB"
/>
</svg>-->
<div class="cube spin">
<div class="edge top">
<div class="inside"></div>
</div>
<div class="edge right">
<div class="inside"></div>
</div>
<div class="edge bottom">
<div class="inside"></div>
</div>
<div class="edge left">
<div class="inside"></div>
</div>
<div class="edge front">
<div class="inside"></div>
</div>
<div class="edge back">
<div class="inside"></div>
</div>
<div class="blockchain-block-icon-cube">
<span class="edge top">
<span class="inside"></span>
</span>
<span class="edge right">
<span class="inside"></span>
</span>
<span class="edge bottom">
<span class="inside"></span>
</span>
<span class="edge left">
<span class="inside"></span>
</span>
<span class="edge front">
<span class="inside"></span>
</span>
<span class="edge back">
<span class="inside"></span>
</span>
</div>
<div class="blockchain-block-icon-chainlink"></div>
@ -63,11 +43,9 @@
class="text-muted"
v-if="block.numTransactions"
>{{ block.numTransactions.toLocaleString() }} transactions</small>
<!-- <small class="text-muted" v-if="block.txs"> -->
<!-- <status variant="muted" blink>Validating</status> -->
<!-- <status variant="success">Valid</status> -->
<!-- <span>&bull; {{ Math.round(block.size / 1000) }} KB</span> -->
<!-- </small> -->
<!-- <small class="text-muted" v-if="block.size">
<span>&bull; {{ Math.round(block.size / 1000) }} KB</span>
</small>-->
</div>
</div>
<status variant="success" v-if="false">Valid</status>
@ -166,12 +144,12 @@ export default {
},
poller(syncPercent) {
window.clearInterval(this.polling);
//if syncing or first load, fetch blocks every second
if (Number(syncPercent) !== 100 || this.blocks.length === 0) {
//if syncing, fetch blocks every second
if (Number(syncPercent) !== 100) {
this.polling = window.setInterval(this.fetchBlocks, 1000);
} else {
//else, slow down and fetch blocks every minute
this.polling = window.setInterval(this.fetchBlocks, 1000);
this.polling = window.setInterval(this.fetchBlocks, 60 * 1000);
}
},
blockTime(timestamp) {
@ -272,14 +250,6 @@ export default {
height: 4rem;
width: 4rem;
svg {
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blockchain-block-icon-chainlink {
position: absolute;
height: 4rem;
@ -314,64 +284,12 @@ export default {
transition: all 0.6s ease-in-out;
}
.blockchain-block-icon {
svg {
transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0.1s;
}
.blockchain-block-icon-bg {
transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
}
.blockchain-enter {
opacity: 0;
transform: translateY(2rem);
.blockchain-block-icon {
svg {
transform: translate(-50%, -50%) scale(0);
}
.blockchain-block-icon-bg {
transform: scale(0);
background: #5351fb;
}
}
}
.blockchain-enter-to {
opacity: 1;
.blockchain-block-icon {
svg {
transform: translate(-50%, -50%) scale(1);
}
.blockchain-block-icon-bg {
transform: scale(1);
background: #eeeeff;
}
}
}
.blockchain-leave {
opacity: 1;
}
.blockchain-leave-to {
opacity: 0;
transform: translateY(2rem);
}
.blockchain-leave-active {
// position: absolute;
}
* {
margin: 0px;
padding: 0px;
}
html,
body {
width: 100%;
height: 100%;
}
.cube {
.blockchain-block-icon-cube {
$cube-size: 22px;
transform-style: preserve-3d;
@ -386,19 +304,13 @@ body {
transform: rotateX(-40deg) rotateY(45deg) rotateZ(0deg);
&.spin {
animation: spin 5s forwards ease;
}
.edge {
width: $cube-size;
height: $cube-size;
line-height: $cube-size;
text-align: center;
box-shadow: inset 0px 0px 0px 1px #eeeeff;
// box-shadow: inset 0px 0px 0px 1px #fff;
background: #eeeeff;
// background: #fff;
display: block;
position: absolute;
.inside {
@ -408,7 +320,6 @@ body {
width: $cube-size * 0.8;
height: $cube-size * 0.8;
background: #5351fb;
// background: #d3d5dc;
border-radius: $cube-size * 0.2;
}
&.top {
@ -436,42 +347,86 @@ body {
}
}
@keyframes spin {
0% {
transform: rotateX(-40deg) rotateY(45deg) rotateZ(0deg);
}
100% {
transform: rotateX(-40deg) rotateY(945deg) rotateZ(540deg);
}
}
.blockchain-block-timestamp {
position: relative;
&:before,
&:after {
position: absolute;
top: 0;
right: 0;
content: "Validating...";
color: #b1b5b9;
background: #fff;
width: 100%;
height: 100%;
transform: translateY(0);
animation: slide-up 0.4s forwards ease;
animation-delay: 3s;
background: #fff;
opacity: 0;
}
&:before {
position: absolute;
top: 0;
right: 0;
content: "● Validated";
color: #00cd98;
background: #fff;
width: 100%;
height: 100%;
transform: translateY(0);
animation: slide-up 0.4s forwards ease;
animation-delay: 4.6s;
}
&:after {
content: "Validating...";
color: #b1b5b9;
}
}
//animations
.blockchain-enter {
opacity: 0;
transform: translateY(2rem);
.blockchain-block-icon {
.blockchain-block-icon-bg {
transform: scale(0);
background: #5351fb;
}
}
}
.blockchain-enter-active {
.blockchain-block-icon-cube {
animation: spin-cube 5s forwards ease;
}
.blockchain-block-timestamp {
&:after {
opacity: 1;
animation: slide-up 0.4s forwards ease;
animation-delay: 3s;
}
&:before {
opacity: 1;
animation: slide-up 0.4s forwards ease;
animation-delay: 4.6s;
}
}
}
.blockchain-enter-to {
opacity: 1;
.blockchain-block-icon {
.blockchain-block-icon-bg {
transform: scale(1);
background: #eeeeff;
}
}
}
.blockchain-leave {
opacity: 1;
}
.blockchain-leave-to {
opacity: 0;
transform: translateY(2rem);
}
.blockchain-leave-active {
// position: absolute;
}
@keyframes spin-cube {
0% {
transform: rotateX(-40deg) rotateY(45deg) rotateZ(0deg);
}
100% {
transform: rotateX(-40deg) rotateY(945deg) rotateZ(540deg);
}
}

Write Preview
Loading…
Cancel
Save