|
@ -1,5 +1,8 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div> |
|
|
<div> |
|
|
|
|
|
<transition name="loading" mode> |
|
|
|
|
|
<loading v-if="loading" :text="loadingText" :progress="loadingProgress"></loading> |
|
|
|
|
|
<div v-else> |
|
|
<b-navbar type="light" variant="default" class="nav-horizontal"> |
|
|
<b-navbar type="light" variant="default" class="nav-horizontal"> |
|
|
<div> |
|
|
<div> |
|
|
<b-navbar-brand to="/dashboard"> |
|
|
<b-navbar-brand to="/dashboard"> |
|
@ -86,22 +89,33 @@ |
|
|
</b-col> |
|
|
</b-col> |
|
|
</b-row> |
|
|
</b-row> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</transition> |
|
|
|
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import { mapState } from "vuex"; |
|
|
|
|
|
import Loading from "@/components/Loading"; |
|
|
import AuthenticatedVerticalNavbar from "@/components/AuthenticatedVerticalNavbar"; |
|
|
import AuthenticatedVerticalNavbar from "@/components/AuthenticatedVerticalNavbar"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return {}; |
|
|
return { |
|
|
|
|
|
loading: false, |
|
|
|
|
|
loadingText: "Loading...", |
|
|
|
|
|
loadingProgress: 0, |
|
|
|
|
|
pollInProgress: false |
|
|
|
|
|
}; |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
chain() { |
|
|
...mapState({ |
|
|
return this.$store.state.bitcoin.chain; |
|
|
isApiOperational: state => state.system.api.operational, |
|
|
}, |
|
|
isBitcoinOperational: state => state.bitcoin.operational, |
|
|
isDarkMode() { |
|
|
isBitcoinCalibrating: state => state.bitcoin.calibrating, |
|
|
return this.$store.getters.isDarkMode; |
|
|
isLndOperational: state => state.lightning.operational, |
|
|
}, |
|
|
isLndUnlocked: state => state.lightning.unlocked, |
|
|
|
|
|
chain: state => state.bitcoin.chain |
|
|
|
|
|
}), |
|
|
isMobileMenuOpen() { |
|
|
isMobileMenuOpen() { |
|
|
return this.$store.getters.isMobileMenuOpen; |
|
|
return this.$store.getters.isMobileMenuOpen; |
|
|
} |
|
|
} |
|
@ -118,7 +132,73 @@ export default { |
|
|
toggleMobileMenu() { |
|
|
toggleMobileMenu() { |
|
|
this.$store.commit("toggleMobileMenu"); |
|
|
this.$store.commit("toggleMobileMenu"); |
|
|
}, |
|
|
}, |
|
|
fetchData() { |
|
|
async fetchData() { |
|
|
|
|
|
//prevent multiple polls if previous poll already in progress |
|
|
|
|
|
// if (this.pollInProgress) { |
|
|
|
|
|
// return; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// this.pollInProgress = true; |
|
|
|
|
|
|
|
|
|
|
|
// //First check if API is active |
|
|
|
|
|
// await this.$store.dispatch("system/getApi"); |
|
|
|
|
|
// if (!this.isApiOperational) { |
|
|
|
|
|
// this.loading = true; |
|
|
|
|
|
// this.loadingText = "Starting API..."; |
|
|
|
|
|
// this.loadingProgress = 20; |
|
|
|
|
|
// this.pollInProgress = false; |
|
|
|
|
|
// return; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// // Then check if bitcoind is operational |
|
|
|
|
|
// if (!this.isBitcoinOperational) { |
|
|
|
|
|
// this.loading = true; |
|
|
|
|
|
// this.loadingText = "Starting Bitcoin Core..."; |
|
|
|
|
|
// this.loadingProgress = 40; |
|
|
|
|
|
// this.pollInProgress = false; |
|
|
|
|
|
// return; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// // Then check if bitcoind is calibrating |
|
|
|
|
|
// if (this.isBitcoinCalibrating) { |
|
|
|
|
|
// this.loading = true; |
|
|
|
|
|
// this.loadingText = "Calibrating Bitcoin Core..."; |
|
|
|
|
|
// this.loadingProgress = 50; |
|
|
|
|
|
// this.pollInProgress = false; |
|
|
|
|
|
// return; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// // Then check if lnd is operational |
|
|
|
|
|
|
|
|
|
|
|
// await this.$store.dispatch("lightning/getStatus"); |
|
|
|
|
|
// if (!this.isLndOperational) { |
|
|
|
|
|
// this.loading = true; |
|
|
|
|
|
// this.loadingText = "Starting LND..."; |
|
|
|
|
|
// this.loadingProgress = 70; |
|
|
|
|
|
// this.pollInProgress = false; |
|
|
|
|
|
// return; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// // Then check if lnd is unlocked |
|
|
|
|
|
// if (!this.isLndUnlocked) { |
|
|
|
|
|
// this.loading = true; |
|
|
|
|
|
// this.loadingText = "Starting LND..."; |
|
|
|
|
|
// this.loadingProgress = 90; |
|
|
|
|
|
// this.pollInProgress = false; |
|
|
|
|
|
// return; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// this.loading = false; |
|
|
|
|
|
// this.loadingProgress = 100; |
|
|
|
|
|
|
|
|
|
|
|
// this.pollInProgress = false; |
|
|
|
|
|
|
|
|
|
|
|
await this.$store.dispatch("bitcoin/getStatus"); |
|
|
|
|
|
await this.$store.dispatch("system/getApi"); |
|
|
|
|
|
await this.$store.dispatch("lightning/getStatus"); |
|
|
|
|
|
|
|
|
|
|
|
//fetch data |
|
|
|
|
|
this.$store.dispatch("system/fetchUnit"); |
|
|
this.$store.dispatch("bitcoin/getSync"); |
|
|
this.$store.dispatch("bitcoin/getSync"); |
|
|
this.$store.dispatch("bitcoin/getBalance"); |
|
|
this.$store.dispatch("bitcoin/getBalance"); |
|
|
this.$store.dispatch("bitcoin/getTransactions"); |
|
|
this.$store.dispatch("bitcoin/getTransactions"); |
|
@ -128,8 +208,9 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
//fetch user's peferences |
|
|
//trigger loading watcher |
|
|
this.$store.dispatch("system/fetchUnit"); |
|
|
// this.loading = true; |
|
|
|
|
|
|
|
|
// start polling data every 20s |
|
|
// start polling data every 20s |
|
|
this.fetchData(); |
|
|
this.fetchData(); |
|
|
this.interval = window.setInterval(this.fetchData, 20000); |
|
|
this.interval = window.setInterval(this.fetchData, 20000); |
|
@ -137,8 +218,21 @@ export default { |
|
|
beforeDestroy() { |
|
|
beforeDestroy() { |
|
|
window.clearInterval(this.interval); |
|
|
window.clearInterval(this.interval); |
|
|
}, |
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
loading: function(nowLoading) { |
|
|
|
|
|
window.clearInterval(this.interval); |
|
|
|
|
|
//if loading, check every second |
|
|
|
|
|
if (nowLoading) { |
|
|
|
|
|
this.interval = window.setInterval(this.fetchData, 1000); |
|
|
|
|
|
} else { |
|
|
|
|
|
//else check every 10s |
|
|
|
|
|
this.interval = window.setInterval(this.fetchData, 20000); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
components: { |
|
|
components: { |
|
|
AuthenticatedVerticalNavbar |
|
|
AuthenticatedVerticalNavbar, |
|
|
|
|
|
Loading |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
@ -299,4 +393,27 @@ export default { |
|
|
transform: translate3d(40px, 0, 0); |
|
|
transform: translate3d(40px, 0, 0); |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Loading transitions |
|
|
|
|
|
|
|
|
|
|
|
.loading-enter-active, |
|
|
|
|
|
.loading-leave-active { |
|
|
|
|
|
transition: opacity 0.4s ease; |
|
|
|
|
|
} |
|
|
|
|
|
.loading-enter { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
// filter: blur(70px); |
|
|
|
|
|
} |
|
|
|
|
|
.loading-enter-to { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
// filter: blur(0); |
|
|
|
|
|
} |
|
|
|
|
|
.loading-leave { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
// filter: blur(0); |
|
|
|
|
|
} |
|
|
|
|
|
.loading-leave-to { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
// filter: blur(70px); |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|