Merge branch 'mond25th'

.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

@@ -2,49 +2,56 @@
   <div id="human-interface">
     <!-- the SVG.js stuff appears here -->
     <transition name="fade">
-    <styledviewer v-show="isShowing"></styledviewer>
+      <styledviewer v-show="isShowing" :object="this.object"></styledviewer>
     </transition>
   </div>
 </template>
 
 <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 } from "vuex";
-import { mapState } 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
   },
 
-  computed: mapState(["accounts_db", "knowledge_db", "positions_db"]),
+  //  computed: mapState(["accounts_db", "knowledge_db", "positions_db"]),
   data: function() {
     return {
       id: null,
+      object: null,
       xpos: null,
       ypos: null,
       isShowing: false
-    };
+    }
   },
 
   methods: {
-    ...mapGetters(["allObjects"]),
-    ...mapGetters(["allPositions"])
+    ...mapGetters(['allObjects', 'allPositions']),
+    ...mapGetters(['accounts_db', 'knowledge_db', 'positions_db']),
+    ...mapActions([
+      'showKnowledgeObjects',
+      'getKnowledgeObjects',
+      'getKnowledgePositions'
+    ]),
+    ...mapActions(['addKnowledgeObject', 'updateKnowledgePosition'])
   },
 
   props: {
@@ -52,80 +59,83 @@ export default {
   },
   mounted: function() {
     // SVG UI next
-    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.$store.state.knowledge_db.allDocs());
-//    this.$store.state.knowledge_db.allDocs().forEach(element => {
+    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
+    //Instance colour
+    var colour = '#F9B821'
+    var colourtwo = 'red'
+    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;
-      var pos = positions.filter(position => position.id == knowledgeObj.node.id); 
-      var x = pos[0].xpos || 0;
-      var y = pos[0].ypos || 0;
+      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
 
-      if (object.type == "projecttxt") {
-        knowledgeObj.rect(60, 40).attr({
-          fill: colours[Math.floor(Math.random() * colours.length)],
+      if (object.type == 'projecttxt') {
+        knowledgeObj.rect(40, 40).attr({
+          fill: colour,
           x: x,
-          y: y,
+          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") {
-        knowledgeObj.circle(30, 30).attr({
-          fill: colours[Math.floor(Math.random() * colours.length)],
+        })
+      } else if (object.type == 'slidedeck') {
+        knowledgeObj.rect(30, 30).attr({
+          fill: colour,
           cx: x,
-          cy: y,
-        });
+          cy: y
+        })
       } else {
-        knowledgeObj.ellipse(20, 50).attr({
-          fill: colours[Math.floor(Math.random() * colours.length)],
-          cx: x,
-          cy: y,
-        });
+        knowledgeObj.polygon('0,0 50,15 15,50').attr({
+          fill: colour,
+          x: x,
+          y: 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
@@ -145,8 +155,12 @@ console.log(this.$store.state.knowledge_db.allDocs());
     // mousedown is capturing a single mouse press
     // possibly useful for drawing connections between objects
     nodes.mousedown(node => {
-      console.log("start connect");
-    });
+      console.log('mouse down')
+      // change to expand select FACF6C
+      this.id = SVG.adopt(node.target.parentNode).id()
+      var element = SVG.get(this.id)
+      element.attr({ stroke: '#FACF6C', 'stroke-width': 5 })
+    })
 
     nodes.mouseup(event => {
       // FIX ME : we know the id and the locations to
@@ -154,27 +168,35 @@ console.log(this.$store.state.knowledge_db.allDocs());
       //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 pos = new Object();
-      pos['id'] = this.id;
-      pos['xpos'] = event.clientX + xOffset;
-      pos['ypos'] = event.clientY + yOffset;
+      this.id = SVG.adopt(event.target.parentNode).id()
+      var obj
+      this.allObjects().forEach(obj => {
+        if (obj.id == this.id) {
+          this.object = obj
+        }
+      })
+      // console.log('this object')
+      // console.log(this.object)
+      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()
       // 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<span>noggin</span>
+    <h1>
+      node
+      <span>noggin</span>
       <!-- <img src="../assets/img/icon.png" alt="Logo for project codename nodenoggin"> -->
     </h1>
   </div>
@@ -8,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 class="instanceone" href="/home">instance one
+        <div class="in1"></div>
       </a>
       
-                <a class="instancetwo" href="/home">
-                instance two
-                </a>
-                <a href="#">
-                Create instance
-                </a>
+      <a class="instancetwo" href="/home">instance two</a>
+      <a href="#">Create instance</a>
     </div>
   </section>
 </template>
 
 <script>
-
 export default {
-  name: "select-instances",
+  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

 <template>
   <div class="viewer">
-    <h2>STYLISH</h2>
-    <p>This is some dummy text, no real data yet. </p>
+    <h2>{{object.id}}</h2>
+    <p>{{object.doc.title}}</p>
   </div>
 </template>
 
 <script>
 export default {
-  name: "styled-viewer",
-  props: {}
-};
+  name: 'styled-viewer',
+  //  methods: {
+  //    getobjecttitle: function(object_id) {
+  //      console.log("object id: " + this.object_id);
+  //    }
+  //  },
+  props: ['object']
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/store.js

@@ -12,7 +12,7 @@ export default new Vuex.Store({
   state: {
     // should this be here now
     allobjects: [],
-    allpositions:[],
+    allpositions: [],
     accounts_db: null,
     knowledge_db: null,
     positions_db: null,
@@ -70,7 +70,6 @@ export default new Vuex.Store({
       if (!ids.includes(payload.id)) {
         state.allobjects.push(payload);
       }
-
     },
 
     GET_KNOWLEDGE_OBJECTS(state, payload) {
@@ -159,7 +158,6 @@ export default new Vuex.Store({
             commit("SHOW_KNOWLEDGE_OBJECTS", element);
           });
         });
-       
     },
 
     getKnowledgeObjects({ commit }) {
@@ -223,6 +221,15 @@ export default new Vuex.Store({
     },
     allPositions: state => {
       return state.allpositions;
+    },
+    knowledge_db: state => {
+      return state.knowledge_db;
+    },
+    accounts_db: state => {
+      return state.accounts_db;
+    },
+    positions_db: state => {
+      return state.positions_db;
     }
   }