clean up

using more ES6 good practice and added suggested lint / prettier config as per vue mastery guides

.esclintrc.js

+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    "plugin:vue/essential",
+    "plugin:prettier/recommended",
+    "@vue/prettier"
+  ],
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+  },
+  parserOptions: {
+    parser: "babel-eslint"
+  }
+};

.prettierrc.js

+module.exports = {
+  singleQuote: true,
+  semi: false
+};

package.json

@@ -11,8 +11,11 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/vue-fontawesome": "^0.1.1",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.14.1",
+    "eslint-plugin-vue": "^5.2.2",
     "pouchdb": "^7.0.0",
-    "prettier": "^1.15.3",
     "svg.connectable.js": "^2.0.1",
     "svg.draggy.js": "^1.1.1",
     "svg.js": "^2.6.5",

src/components/account-settings.vue

@@ -4,11 +4,11 @@
 
 <script>
 export default {
-  name: "account-settings",
+  name: 'account-settings',
   props: {
     name: String
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/current-instance.vue

@@ -11,18 +11,18 @@
 
 <script>
 //import knowledgeobject from './knowledge-object.vue'
-import humaninterface from "./human-interface.vue";
+import humaninterface from './human-interface.vue'
 // helper to access data from vuex
-import { mapState } from "vuex";
+import { mapState } from 'vuex'
 
 export default {
-  name: "current-instance",
+  name: 'current-instance',
   components: {
     // knowledgeobject,
     humaninterface
   },
-  computed: mapState(["accounts_db", "knowledge_db", "positions_db"])
-};
+  computed: mapState(['accounts_db', 'knowledge_db', 'positions_db'])
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/human-interface.vue

@@ -9,25 +9,25 @@
 
 <script>
 /* eslint-disable */
-import SVG from "svg.js";
+import SVG from 'svg.js'
 // next two libraries used within SVG.js
-import draggy from "svg.draggy.js";
-import connectable from "svg.connectable.js";
-import { mapGetters, mapActions, mapState } from "vuex";
-import { state } from "vuex";
+import draggy from 'svg.draggy.js'
+import connectable from 'svg.connectable.js'
+import { mapGetters, mapActions, mapState } from 'vuex'
+import { state } from 'vuex'
 
-import styledviewer from "@/components/styled-viewer.vue";
+import styledviewer from '@/components/styled-viewer.vue'
 
-var knowledgeObj;
-var knowledgeObjid;
+var knowledgeObj
+var knowledgeObjid
 
-var canvasX = 600;
-var canvasY = 300;
-var xOffset = 0;
-var yOffset = -370;
+var canvasX = 600
+var canvasY = 300
+var xOffset = 0
+var yOffset = -370
 
 export default {
-  name: "human-interface",
+  name: 'human-interface',
   components: {
     styledviewer: styledviewer
   },
@@ -40,18 +40,18 @@ export default {
       xpos: null,
       ypos: null,
       isShowing: false
-    };
+    }
   },
 
   methods: {
-    ...mapGetters(["allObjects", "allPositions"]),
-    ...mapGetters(["accounts_db", "knowledge_db", "positions_db"]),
+    ...mapGetters(['allObjects', 'allPositions']),
+    ...mapGetters(['accounts_db', 'knowledge_db', 'positions_db']),
     ...mapActions([
-      "showKnowledgeObjects",
-      "getKnowledgeObjects",
-      "getKnowledgePositions"
+      'showKnowledgeObjects',
+      'getKnowledgeObjects',
+      'getKnowledgePositions'
     ]),
-    ...mapActions(["addKnowledgeObject", "updateKnowledgePosition"])
+    ...mapActions(['addKnowledgeObject', 'updateKnowledgePosition'])
   },
 
   props: {
@@ -59,81 +59,81 @@ export default {
   },
   mounted: function() {
     // SVG UI next
-    console.log("inside human-interface mounted()");
-    console.log(this.knowledge_db());
-    var draw = SVG("human-interface").size(canvasX, canvasY);
-    var objects = [];
-    var positions = [];
+    console.log('inside human-interface mounted()')
+    console.log(this.knowledge_db())
+    var draw = SVG('human-interface').size(canvasX, canvasY)
+    var objects = []
+    var positions = []
 
     //FIXME Iterate over contents of state.knowlege_db instead
-    console.log("NEXT OUTPUT IS KNOWLEDGE_DB FROM INSIDE human-interface.vue");
-    console.log(this.getKnowledgeObjects());
+    console.log('NEXT OUTPUT IS KNOWLEDGE_DB FROM INSIDE human-interface.vue')
+    console.log(this.getKnowledgeObjects())
     //    this.$store.state.knowledge_db.allDocs().forEach(element => {
     this.allObjects().forEach(element => {
-      objects.push(element.__ob__.value.doc);
-    });
+      objects.push(element.__ob__.value.doc)
+    })
 
     this.allPositions().forEach(element => {
-      positions.push(element.__ob__.value.doc);
-    });
+      positions.push(element.__ob__.value.doc)
+    })
 
-    var links = draw.group();
-    var markers = draw.group();
-    var nodes = draw.group();
+    var links = draw.group()
+    var markers = draw.group()
+    var nodes = draw.group()
 
-    var index = 0;
-    var colours = ["red", "green", "blue", "yellow", "cyan"];
-    var objectsProcessed = 0;
+    var index = 0
+    var colours = ['red', 'green', 'blue', 'yellow', 'cyan']
+    var objectsProcessed = 0
 
     // when fired loops through applying all the positions if id matches
     // needs to be running this update in Realtime to update moves
     // maybe in watch: { } ??? function ???
-    nodes.on("startyourpositions", event => {
-      console.log("hit");
-    });
+    nodes.on('startyourpositions', event => {
+      console.log('hit')
+    })
 
     // loops through all the objects and renders them
     objects.forEach(object => {
       //index = index + 20
 
-      knowledgeObj = nodes.group().draggy();
+      knowledgeObj = nodes.group().draggy()
       //.draggy({ minX: 0, minY: 0, maxX: canvasX, maxY: canvasY });
       // assigns group <g id="id" of the unique id in database
 
-      knowledgeObj.node.id = object._id;
+      knowledgeObj.node.id = object._id
       var pos = positions.filter(
         position => position.id == knowledgeObj.node.id
-      );
-      var x = pos[0].xpos || 0;
-      var y = pos[0].ypos || 0;
+      )
+      var x = pos[0].xpos || 0
+      var y = pos[0].ypos || 0
 
-      if (object.type == "projecttxt") {
+      if (object.type == 'projecttxt') {
         knowledgeObj.rect(60, 40).attr({
           fill: colours[Math.floor(Math.random() * colours.length)],
           x: x,
           y: y
           //.svg('<g id="doc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect id="Rectangle-2" fill="#000000" x="3" y="0" width="115" height="171"></rect><rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="113" height="164"></rect><path d="M23.5,40.5 L95,40.5" id="Line-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,54.25 L96,54.25" id="Line-3-Copy" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,69.25 L96,69.25" id="Line-3-Copy-2" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,86.25 L70,86.25" id="Line-3-Copy-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path></g>')
-        });
-      } else if (object.type == "slidedeck") {
+        })
+      } else if (object.type == 'slidedeck') {
         knowledgeObj.circle(30, 30).attr({
           fill: colours[Math.floor(Math.random() * colours.length)],
           cx: x,
           cy: y
-        });
+        })
       } else {
         knowledgeObj.ellipse(20, 50).attr({
           fill: colours[Math.floor(Math.random() * colours.length)],
           cx: x,
           cy: y
-        });
+        })
       }
 
-      objectsProcessed++;
+      objectsProcessed++
       if (objectsProcessed === objects.length) {
-        nodes.fire("startyourpositions");
-        console.log("fire...");
+        nodes.fire('startyourpositions')
+        console.log('fire...')
       }
-    });
+    })
 
     //console.log(knowledgeObj.node.id);
     //  parentNode
@@ -153,8 +153,8 @@ export default {
     // mousedown is capturing a single mouse press
     // possibly useful for drawing connections between objects
     nodes.mousedown(node => {
-      console.log("start connect");
-    });
+      console.log('start connect')
+    })
 
     nodes.mouseup(event => {
       // FIX ME : we know the id and the locations to
@@ -162,36 +162,36 @@ export default {
       //console.log(event.clientX, event.clientY);
       // the id of the g object of the clicked svg object
       //console.log(SVG.adopt(event.target.parentNode).id())
-      this.id = SVG.adopt(event.target.parentNode).id();
-      var obj;
+      this.id = SVG.adopt(event.target.parentNode).id()
+      var obj
       this.allObjects().forEach(obj => {
         if (obj.id == this.id) {
-          this.object = obj;
+          this.object = obj
         }
-      });
-      console.log("ths object");
-      console.log(this.object);
+      })
+      console.log('ths object')
+      console.log(this.object)
 
-      var pos = new Object();
-      pos["id"] = this.id;
-      pos["xpos"] = event.clientX + xOffset;
-      pos["ypos"] = event.clientY + yOffset;
+      var pos = new Object()
+      pos['id'] = this.id
+      pos['xpos'] = event.clientX + xOffset
+      pos['ypos'] = event.clientY + yOffset
 
-      this.$store.dispatch("updateKnowledgePosition", pos);
-    });
+      this.$store.dispatch('updateKnowledgePosition', pos)
+    })
 
     nodes.dblclick(node => {
-      this.id = SVG.adopt(node.target.parentNode).id();
+      this.id = SVG.adopt(node.target.parentNode).id()
       // isShowing = true
       // component styled-viewer
       if (this.isShowing == false) {
-        this.isShowing = true;
+        this.isShowing = true
       } else {
-        this.isShowing = false;
+        this.isShowing = false
       }
-    });
+    })
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/instance-logo.vue

 <template>
   <div class="logo">
-    <h1>node
+    <h1>
+      node
       <span>noggin</span>
       <!-- <img src="../assets/img/icon.png" alt="Logo for project codename nodenoggin"> -->
     </h1>
@@ -9,9 +10,9 @@
 
 <script>
 export default {
-  name: "instance-logo",
+  name: 'instance-logo',
   props: {}
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/knowledge-object.vue

@@ -10,11 +10,11 @@
 
 <script>
 export default {
-  name: "knowledge-object",
+  name: 'knowledge-object',
   props: {
     //    object: Array
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/register-account.vue

@@ -20,15 +20,15 @@
 //var db = new pouchdb('https://nn.adamprocter.co.uk/accounts');
 
 export default {
-  name: "register-account",
+  name: 'register-account',
   data() {
     return {
-      name: "",
-      email: "",
-      domain: "",
+      name: '',
+      email: '',
+      domain: '',
       permissions: 1,
       verified: false
-    };
+    }
   },
   mounted() {
     // this.syncData();
@@ -36,7 +36,7 @@ export default {
   methods: {
     registeraccount() {
       //console.log(this.input)
-      this.$store.dispatch("registerAccount", this);
+      this.$store.dispatch('registerAccount', this)
     }
   }
   //     var uniqueid = Math.random().toString(36).substring(2, 15)
@@ -75,7 +75,7 @@ export default {
   //     //})
   //   }
   // }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/select-instances.vue

 <template>
-    <section class="selector">
-
-        <h2>instances</h2>
-            <div id="instances">
-                <a class="instanceone" href="/home">
-                instance one
-                <div class="in1">
-                    </div>
-                </a>
-
-                <a class="instancetwo" href="/home">
-                instance two
-                </a>
-                <a href="#">
-                Create instance
-                </a>
-            </div>
-    </section>
+  <section class="selector">
+    <h2>instances</h2>
+    <div id="instances">
+      <a class="instanceone" href="/home">instance one
+        <div class="in1"></div>
+      </a>
+      
+      <a class="instancetwo" href="/home">instance two</a>
+      <a href="#">Create instance</a>
+    </div>
+  </section>
 </template>
 
 <script>
-
 export default {
-  name: "select-instances",
- props: {}
-};
+  name: 'select-instances',
+  props: {}
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/sign-in.vue

@@ -12,13 +12,13 @@
 
 <script>
 export default {
-  name: "sign-in",
+  name: 'sign-in',
   data() {
     return {
       input: {
-        email: ""
+        email: ''
       }
-    };
+    }
   },
   props: {
     instancename: String,
@@ -29,15 +29,15 @@ export default {
       //FIXME check this.input.email against pouch valid accounts
       //FIXME generate token, save to remote and local session stores
       this.$store
-        .dispatch("login", {
+        .dispatch('login', {
           email: this.input.email
         })
         .then(() => {
-          this.$router.push("/home");
-        });
+          this.$router.push('/home')
+        })
     }
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/styled-viewer.vue

@@ -7,14 +7,14 @@
 
 <script>
 export default {
-  name: "styled-viewer",
+  name: 'styled-viewer',
   //  methods: {
   //    getobjecttitle: function(object_id) {
   //      console.log("object id: " + this.object_id);
   //    }
   //  },
-  props: ["object"]
-};
+  props: ['object']
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/about.vue

@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import logo from "@/components/instance-logo.vue";
+import logo from '@/components/instance-logo.vue'
 
 export default {
-  name: "about",
+  name: 'about',
   components: {
-    logo: logo
+    logo
   }
-};
+}
 </script>
\ No newline at end of file

src/views/editor.vue

@@ -24,21 +24,21 @@
 // server admin has to create DB first and CORS allows specific domains.
 //var db = new pouchdb('https://nn.adamprocter.co.uk/knowledge');
 
-import logo from "@/components/instance-logo.vue";
+import logo from '@/components/instance-logo.vue'
 
 export default {
-  name: "editor",
+  name: 'editor',
   components: {
-    logo: logo
+    logo
   },
   data() {
     return {
-      type: "",
-      author: "",
-      title: "",
+      type: '',
+      author: '',
+      title: '',
       connections: [],
       metadata: {}
-    };
+    }
   },
 
   mounted() {
@@ -47,7 +47,7 @@ export default {
 
   methods: {
     addKnowledgeObject() {
-      this.$store.dispatch("addKnowledgeObject", this);
+      this.$store.dispatch('addKnowledgeObject', this)
 
       // var uniqueid = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
 
@@ -94,7 +94,7 @@ export default {
 
     //}
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/views/home.vue

@@ -8,14 +8,14 @@
 <script>
 // @ is an alias to /src
 
-import logo from "@/components/instance-logo.vue";
-import instance from "@/components/current-instance.vue";
+import logo from '@/components/instance-logo.vue'
+import instance from '@/components/current-instance.vue'
 
 export default {
-  name: "home",
+  name: 'home',
   components: {
-    instance: instance,
-    logo: logo
+    instance,
+    logo
   },
 
   props: {
@@ -23,11 +23,11 @@ export default {
   },
 
   created() {
-    this.$store.dispatch("showKnowledgeObjects");
-    this.$store.dispatch("getKnowledgePositions");
+    this.$store.dispatch('showKnowledgeObjects')
+    this.$store.dispatch('getKnowledgePositions')
 
     //this.$store.getters.allObjects
     //return this.$store.getters.allObjects
   }
-};
+}
 </script>

src/views/start.vue

@@ -12,20 +12,20 @@
 </template>
 
 <script>
-import logo from "@/components/instance-logo.vue";
-import signin from "@/components/sign-in.vue";
-import register from "@/components/register-account.vue";
-import selectinstances from "@/components/select-instances.vue";
+import logo from '@/components/instance-logo.vue'
+import signin from '@/components/sign-in.vue'
+import register from '@/components/register-account.vue'
+import selectinstances from '@/components/select-instances.vue'
 
 export default {
-  name: "app",
+  name: 'app',
   components: {
-    signin: signin,
-    register: register,
-    logo: logo,
-    selectinstances: selectinstances
+    signin,
+    register,
+    logo,
+    selectinstances
   }
-};
+}
 </script>
 
 <style scoped>

src/views/stats.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import logo from "@/components/instance-logo.vue";
+import logo from '@/components/instance-logo.vue'
 
 export default {
-  name: "stats",
+  name: 'stats',
   components: {
-    logo: logo
+    logo
   }
-};
+}
 </script>
\ No newline at end of file