diff --git a/CHANGELOG.md b/CHANGELOG.md index a9f57c5ff8ba4bbea51bcd6c1cc79f99d7143eef..a72ee8e3a6cff3c674bde364eb814f30c047e520 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +# 0.1.39 + +_8th December 2020_ + +### Changed + +- edits to the new computed filter to use watch / unwatch over a timer for initial load should mean doesn't matter on hardware or network all nodes will load when ready + # 0.1.38 _7th December 2020_ diff --git a/app/package.json b/app/package.json index 3e86fb645c9bc54c7d4a7d056a16b9dec1b304ea..84516345016c1571431c78319fefc86b4dbb8478 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "nodenogg.in", - "version": "0.1.38", + "version": "0.1.39", "private": true, "scripts": { "serve": "vue-cli-service serve", diff --git a/app/src/components/CardsLayer.vue b/app/src/components/CardsLayer.vue index a14b48848de180934e06ff1d4e46d99f56ef443b..79d6782439ab5982ccedc0488a298db30f88067f 100644 --- a/app/src/components/CardsLayer.vue +++ b/app/src/components/CardsLayer.vue @@ -89,27 +89,26 @@ export default { // this is to stop sync chasing bug - created() { + mounted() { //access the custom option using $options - setTimeout(this.loadData, 500) - this.$options.myArray = this.nodes_filtered - }, + const unwatch = this.$watch('nodes_filtered', (value) => { + this.$options.myArray = this.nodes_filtered + + this.$forceUpdate() + // ignore falsy values + if (!value) return + + // stop watching when nodes_filtered[] is not empty + if (value && value.length) unwatch() - updated() { - // setTimeout(this.loadData, 300) + // process value here + }) }, watch: { added: { deep: true, - handler() { - setTimeout(this.loadData, 200) - }, - }, - update: { - deep: true, - handler() { setTimeout(this.loadData, 200) }, diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue index 6202ddbabb52094d27209c567d2275619236bbf5..d102f796283a6a53837b02447da24f6477a3ec44 100644 --- a/app/src/components/ListLayer.vue +++ b/app/src/components/ListLayer.vue @@ -92,12 +92,19 @@ export default { }, mounted() { - setTimeout(this.loadData, 500) - this.$options.myArray = this.nodes_filtered - }, + // setTimeout(this.loadData, 500) + + const unwatch = this.$watch('nodes_filtered', (value) => { + this.$options.myArray = this.nodes_filtered + this.$forceUpdate() + // ignore falsy values + if (!value) return + + // stop watching when nodes_filtered[] is not empty + if (value && value.length) unwatch() - updated() { - // setTimeout(this.loadData, 300) + // process value here + }) }, watch: { @@ -108,13 +115,13 @@ export default { setTimeout(this.loadData, 200) }, }, - update: { - deep: true, + // update: { + // deep: true, - handler() { - setTimeout(this.loadData, 200) - }, - }, + // handler() { + // setTimeout(this.loadData, 200) + // }, + // }, }, methods: { diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue index 5e9992263d5bb90d086332ff84040b68f4d13540..f41608d71bf46af129c098f9654a494d84999492 100644 --- a/app/src/components/NodesLayer.vue +++ b/app/src/components/NodesLayer.vue @@ -221,16 +221,37 @@ export default { }, // this is to stop sync chasing bug - created() { - //access the custom option using $options - setTimeout(this.loadData, 2000) - this.$options.myArray = this.nodes_filtered - this.$options.positionsArray = this.positions_filtered + mounted() { + const unwatch = this.$watch('nodes_filtered', (value) => { + this.$options.myArray = this.nodes_filtered + // this.$options.positionsArray = this.positions_filtered + this.$forceUpdate() + // ignore falsy values + if (!value) return + + // stop watching when nodes_filtered[] is not empty + if (value && value.length) unwatch() + + // process value here + }) + + const unwatchtwo = this.$watch('positions_filtered', (value) => { + // this.$options.myArray = this.nodes_filtered + this.$options.positionsArray = this.positions_filtered + this.$forceUpdate() + // ignore falsy values + if (!value) return + + // stop watching when nodes_filtered[] is not empty + if (value && value.length) unwatchtwo() + + // process value here + }) }, updated() { this.$options.positionsArray = this.positions_filtered - + if (this.toolmode == 'addNode') { setTimeout(this.loadData, 300) // this.$options.myArray = this.nodes_filtered diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue index 6fb64f63159dc2718f28d8b89fe2f996b6cf7dff..91e8f8b882638357221623762dc4f90212f96f4d 100644 --- a/app/src/components/OtherNodeslayer.vue +++ b/app/src/components/OtherNodeslayer.vue @@ -240,7 +240,6 @@ export default { search: '', pickupz: 1, nodeid: String, - positionsArray: null, } }, @@ -274,11 +273,34 @@ export default { }, }, - // NOTE: ok as created here but NOT if this is the first view to load - created() { + mounted() { //access the custom option using $options - setTimeout(this.loadData, 1000) - this.$options.positionsArray = this.positions_filtered + + const unwatch = this.$watch('othernodes_filtered', (value) => { + this.$options.myArray = this.othernodes_filtered + // this.$options.positionsArray = this.positions_filtered + this.$forceUpdate() + // ignore falsy values + if (!value) return + + // stop watching when nodes_filtered[] is not empty + if (value && value.length) unwatch() + + // process value here + }) + + const unwatchtwo = this.$watch('positions_filtered', (value) => { + // this.$options.myArray = this.nodes_filtered + this.$options.positionsArray = this.positions_filtered + this.$forceUpdate() + // ignore falsy values + if (!value) return + + // stop watching when nodes_filtered[] is not empty + if (value && value.length) unwatchtwo() + + // process value here + }) }, updated() { @@ -286,10 +308,10 @@ export default { }, methods: { - loadData() { - this.$options.positionsArray = this.positions_filtered - this.$forceUpdate() - }, + // loadData() { + // this.$options.positionsArray = this.positions_filtered + // this.$forceUpdate() + // }, onActivated(e) { this.nodeid = e var i