From 549badfc18bbd96e2dfeeeaa710866b589d0c816 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Tue, 8 Dec 2020 23:09:46 +0000
Subject: [PATCH] update to improved watch on mounted code
---
CHANGELOG.md | 8 ++++++
app/package.json | 2 +-
app/src/components/CardsLayer.vue | 25 ++++++++--------
app/src/components/ListLayer.vue | 29 ++++++++++++-------
app/src/components/NodesLayer.vue | 33 +++++++++++++++++----
app/src/components/OtherNodeslayer.vue | 40 ++++++++++++++++++++------
6 files changed, 97 insertions(+), 40 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9f57c5..a72ee8e 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 3e86fb6..8451634 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 a14b488..79d6782 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 6202ddb..d102f79 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 5e99922..f41608d 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 6fb64f6..91e8f8b 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
--
GitLab