-
-
- {{ pageTitle }}
-
-
-
-
+
+
+
+ {{ pageTitle }}
+
+
+
+
+
+
+
+ autoupdate
+
@@ -48,14 +57,22 @@ export default {
computed: {
...mapState({
blocks: state => state.backend.blocks,
- lastBlocks: state => state.backend.lastBlocks
+ lastBlocks: state => state.backend.lastBlocks,
+ autoUpdate: state => state.config.autoUpdateBlocks
}),
...mapGetters({
pending: 'pendingBlocks'
})
},
methods: {
- ...mapActions(['updateBlocks'])
+ ...mapActions([
+ 'updateBlocks',
+ 'setAutoUpdate'
+ ]),
+ handleAutoUpdate (event) {
+ const value = event.target.checked
+ this.setAutoUpdate(value)
+ }
}
}
diff --git a/src/store/modules/backend/actions.js b/src/store/modules/backend/actions.js
index 1f555db6..4488f3fd 100644
--- a/src/store/modules/backend/actions.js
+++ b/src/store/modules/backend/actions.js
@@ -30,10 +30,14 @@ export const socketNewTransactions = ({ state, commit, getters }, result) => {
}
}
// handle newBlocks from blocks channel
-export const socketNewBlocks = ({ state, commit, getters }, result) => {
+export const socketNewBlocks = ({ state, commit, getters, dispatch, rootState }, result) => {
const blocks = result.data || []
const autoUpdate = getters.autoUpdate
commit('LAST_BLOCKS', blocks)
+ if (rootState.autoUpdateBlocks) dispatch('updateBlocks')
+ if (rootState.route.path === '/') {
+ dispatch('fetchRouteData', { action: 'getTransactions', params: undefined, module: 'transactions', key: 'data' })
+ }
if (!state.lastBlocksTime) commit('LAST_BLOCKS_TIME')
if (!state.blocks.length || autoUpdate) {
commit('SET_BLOCKS', blocks.slice())
diff --git a/src/store/modules/backend/getters.js b/src/store/modules/backend/getters.js
index f172f325..da2d3cb9 100644
--- a/src/store/modules/backend/getters.js
+++ b/src/store/modules/backend/getters.js
@@ -10,6 +10,10 @@ export const transactions = state => {
return state.transactions
}
+export const lastTransactions = state => {
+ return state.responses?.data?.data
+}
+
export const pendingBlocks = state => {
return Object.keys(state.pendingBlocks).length
}
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index a5326da7..d69fb693 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -171,56 +171,60 @@ li {
.item {
margin: 0 24px;
}
-
- label {
- display: flex;
- justify-items: center;
- input {
- margin-right: 10px;
- }
- }
- .checkbox-container {
- display: flex;
- align-items: center;
- }
-
- .custom-checkbox {
- opacity: 0;
- position: absolute;
- }
-
- .checkmark {
- height: 20px;
- width: 20px;
- cursor: pointer;
- background-color: transparent;
- border-radius: 5px;
- margin-right: 10px;
- display: inline-block;
- position: relative;
- border: 1px solid #575757;
- }
-
- .custom-checkbox:checked + .checkmark {
- background-color: orange;
- }
-
- .custom-checkbox:checked + .checkmark:after {
- content: "";
- position: absolute;
- display: block;
- left: 5px;
- top: 3px;
- width: 4px;
- height: 8px;
- border: solid black;
- border-width: 0 3px 3px 0;
- transform: rotate(45deg);
- }
}
+}
+.checkbox-container {
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ input {
+ margin-right: 10px;
+ }
+}
+.custom-checkbox {
+ opacity: 0;
+ position: absolute;
}
+.checkmark {
+ height: 20px;
+ width: 20px;
+ cursor: pointer;
+ background-color: transparent;
+ border-radius: 5px;
+ margin-right: 10px;
+ display: inline-block;
+ position: relative;
+ border: 1px solid #575757;
+}
+
+.custom-checkbox:checked + .checkmark {
+ background-color: orange;
+}
+
+.custom-checkbox:checked + .checkmark:after {
+ content: "";
+ position: absolute;
+ display: block;
+ left: 5px;
+ top: 3px;
+ width: 4px;
+ height: 8px;
+ border: solid black;
+ border-width: 0 3px 3px 0;
+ transform: rotate(45deg);
+}
+.auto-update {
+ .checkmark {
+ height: 18px;
+ width: 18px;
+ }
+ .custom-checkbox:checked + .checkmark:after {
+ width: 3px;
+ height: 6px;
+ }
+}
.waiting-result {
display: flex;
flex-direction: column;
diff --git a/src/styles/_home.scss b/src/styles/_home.scss
index 4a6aeaaf..22b10ef6 100644
--- a/src/styles/_home.scss
+++ b/src/styles/_home.scss
@@ -257,9 +257,20 @@
.box-head {
display: flex;
align-items: center;
- padding: 0 24px;
+ justify-content: space-between;
+ padding-left: 24px;
margin-bottom: 10px;
}
+ .box-title {
+ display: flex;
+ align-items: center;
+ }
+ .auto-update {
+ color: $white_400;
+ display: flex;
+ gap: 5px;
+ width: max-content;
+ }
.title {
&::first-letter {
text-transform: uppercase;