Merge branch 'sharedlocations'

src/App.vue

@@ -3,14 +3,13 @@
  
  <nav>
    <ul>
-      <li> <router-link to="/home" v-if="isLoggedIn">Home</router-link><router-link to="/selectscreen" v-else>Start</router-link></li>
-     
-      <li> <router-link to="/stats" v-if="isLoggedIn">Your Stats</router-link></li>
-      <li> <router-link to="/selectscreen" v-if="isLoggedIn" @click.native="logout()">Sign Out</router-link></li>
-       <li> <router-link to="/about">About</router-link></li>
+        <li><router-link to="/home" v-if="isLoggedIn">Home</router-link><router-link to="/selectscreen" v-else>Start</router-link></li>
+        <li><router-link to="/stats" v-if="isLoggedIn">Your Stats</router-link></li>
+        <li><router-link to="/selectscreen" v-if="isLoggedIn" @click.native="logout()">Sign Out</router-link></li>
+        <li><router-link to="/about">About</router-link></li>
     </ul>
   </nav>       
-    <router-view />
+  <router-view />
   </main>
 </template>
 

src/components/user-interface.vue

@@ -17,6 +17,9 @@ import { mapGetters } from 'vuex';
 
 import styledviewer from "@/components/styled-viewer.vue";
 
+var knowledgeObj
+var knowledgeObjid
+
 export default {
     name: 'user-interface',
     components: {
@@ -34,19 +37,21 @@ export default {
         ])
     },
     props: {
-        object: Object
+        //object: Object
     },
     mounted: function() {
         
         // SVG UI next
         var draw = SVG('user-interface').size(600, 300)
         var data = []; 
-    
+        
         let objects = this.allObjects()
+        //console.log(objects)
         objects.forEach((element) => {
             data.push(element.__ob__.value.doc)
         })
-    
+        //console.log(data)
+
         var links = draw.group()
         var markers = draw.group()
         var nodes = draw.group()
@@ -63,7 +68,7 @@ export default {
         data.forEach(element => {
           //index = index + 20
     
-            var knowledgeObj = nodes.group().translate(element.xpos, element.ypos).draggy({minX: 0,
+            knowledgeObj = nodes.group().draggy({minX: 0,
             minY: 0,
             maxX: 600,
             maxY: 300})
@@ -79,13 +84,17 @@ export default {
                   fill: colours[Math.floor(Math.random() * colours.length)]
                 })
             }
-        
             var type = knowledgeObj.text(element.type)
             var title = knowledgeObj.text(element.title)
-             
-            //console.log(knowledgeObj)
+            var uniqueid = knowledgeObj.text(element._id)
+             // assign node id to the unique id in database
+            knowledgeObj.node.id = element._id
+            
+            console.log(knowledgeObj.node.id)
+
             title.move(0,40)
-         
+            uniqueid.move(0,80)
+                        
           //  rect_1.connectable({
           //    container: links,
           //    markers: markers
@@ -101,14 +110,38 @@ export default {
         // FIXME: determine unique ID of the node that has been moved
         // FIXME: associate each node with a knowledge object in the db
         // so we have a mapping to record these movements
-        nodes.mouseup(node => {
-            //console.log(node)
-            console.log("x: "+node.clientX)
-            console.log("y: "+node.clientY)
+        //nodes.mouseup(node => {
+            // this logs out the final id in the array it doesnt know which one I moved... 
+            // node.clientX and Y is fine different thing
+           // console.log(currentTarget)
+           // just gets the last id in the list not the one dragged
+           // console.log(knowledgeObj.native().id)
+
+            //this.fill({ color: '#f06' })
+            //knowledgeObj.fill({ color: '#f06' })
+          //  console.log("x: "+node.clientX)
+         //   console.log("y: "+node.clientY)
+            //node.first().remove()
+      //  })
+
+        nodes.mouseup((event) => {
+            // mouse coordinates
+            console.log(event.clientX, event.clientY)
+         
+            // the node which was clicked
+            console.log(event.target)
+      
+            // the svgjs object
+            //console.log(SVG.adopt(event.target))
+
+            // the id
+            //console.log(SVG.adopt(event.target).id())
         })
+
+    
     
         nodes.dblclick(node => {
-             //isShowing = true
+            // isShowing = true
             // component styled-viewer
          if(this.isShowing == false){
             this.isShowing = true

src/store.js

@@ -2,10 +2,15 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import pouchdb from 'pouchdb'
 
+// server admin has to create DB first and CORS allows specific domains.
+//https://nn.adamprocter.co.uk/accounts etc
+
 const accounts_db = new pouchdb('accounts');
 const knowledge_db = new pouchdb('knowledge');
+const positions_db = new pouchdb('positions');
 
-// server admin has to create DB first and CORS allows specific domains.
+
+//these vars may no longer needed as far as I know we use pouchdb.sync inline now see FIXME line below
 //var remote_accounts_db = new pouchdb('https://nn.adamprocter.co.uk/accounts');
 //var remote_knowledge_db = new pouchdb('https://nn.adamprocter.co.uk/knowledge');
 
@@ -57,7 +62,7 @@ export default new Vuex.Store({
             token:payload.token,
             verified:payload.verified
             })
-            // FIXME this does sync but doesnt pass through STORE
+            // FIXME this does sync but does it pass the changes we want to capture via VUEX STORE
       pouchdb.sync('accounts','https://nn.adamprocter.co.uk/accounts' )
 
   },
@@ -66,34 +71,12 @@ export default new Vuex.Store({
       var ids = []
       var knowledge = []
      
-      //console.log(payload)
-
       state.allobjects.forEach(payload => {ids.push(payload.id)})
-      //console.log("looping?")
       if (!ids.includes(payload.id)){
         state.allobjects.push(payload);
-         //console.log(state.allobjects)
-      }
 
-    //  knowledge = knowledge_db.allDocs({
-    //     include_docs: true,
-    //      attachments: true
-    //     })
+      }
 
-       // console.log(knowledge_db)
-    //   knowledge = state.allobjects
-  
-    //  state.allobjects.forEach(item => {ids.push(item.id)})
-    //   if (!ids.includes(knowledge.id)){
-    //     state.allobjects.push(knowledge);
-    //  
-      //accounts_db.allDocs({
-        //     include_docs: true,
-        //     attachments: true
-        //   }).then(result => {
-        //       Array.from(result.rows.values()).forEach((element) => {
-        //         this.$store.dispatch('showKnowledgeObjects', element)
-        //       })
     },
 
     ADD_KNOWLEDGE_OBJECT(data, payload){
@@ -108,6 +91,7 @@ export default new Vuex.Store({
              connections:payload.connections,
              metadata:payload.metadata,
             })
+            // FIXME this does sync but does it pass the changes we want to capture via VUEX STORE
       pouchdb.sync('knowledge','https://nn.adamprocter.co.uk/knowledge' )
 
     }
@@ -120,8 +104,7 @@ export default new Vuex.Store({
     },
 
     registerAccount({ commit }, payload) {
-      //console.log(payload.name)
-   commit('REGISTER_ACCOUNT', payload)
+    commit('REGISTER_ACCOUNT', payload)
   },
    
     showKnowledgeObjects({ commit }) {