Merge branch 'sharedlocations2'

src/components/user-interface.vue

@@ -23,15 +23,21 @@ export default {
   components: {
     styledviewer: styledviewer
   },
+
   data: function() {
     return {
-      // data: [],
+      id: null,
+      xpos: null,
+      ypos: null,
       isShowing: false
     };
   },
+
   methods: {
-    ...mapGetters(["allObjects"])
+    ...mapGetters(["allObjects"]),
+    ...mapGetters(["allPositions"])
   },
+
   props: {
     //object: Object
   },
@@ -39,13 +45,19 @@ export default {
     // SVG UI next
     var draw = SVG("user-interface").size(600, 300);
     var data = [];
+    var data2 = [];
 
     let objects = this.allObjects();
     //console.log(objects)
     objects.forEach(element => {
       data.push(element.__ob__.value.doc);
     });
-    //console.log(data)
+
+    let positions = this.allPositions();
+    //console.log(positions)
+    positions.forEach(element => {
+      data2.push(element.__ob__.value.doc);
+    });
 
     var links = draw.group();
     var markers = draw.group();
@@ -53,13 +65,44 @@ export default {
 
     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 ???
+    // FIXMEneed to make arrow function
+    nodes.on("startyourpositions", event => {
+      console.log("hit");
+
+     // if (element.id == SVG.get(element.id)){
+      //   SVG.get(element.id).animate().move(element.xpos,element.ypos)
+      // }
+        
+      data2.forEach(function(element) {
+          if (element.id == SVG.get(element.id)){
+              //console.log(element.id);
+              //console.log(element.xpos);
+              //console.log(element.ypos);
+             // console.log(SVG.get(element.id))
+              var bob = SVG.get(element.id).rect(10,10);
+              //console.log(bob);
+              bob.cx(element.xpos).cy(element.ypos-370)
+          }
+      });
+   
+       
+    });
 
+    // loops through all the objects and renders them
     data.forEach(element => {
       //index = index + 20
 
       knowledgeObj = nodes
         .group()
         .draggy({ minX: 0, minY: 0, maxX: 600, maxY: 300 });
+      // assigns group <g id="id" of the unique id in database
+
+      knowledgeObj.node.id = element._id;
 
       if (element.type == "projecttxt") {
         knowledgeObj.rect(60, 40).attr({
@@ -70,59 +113,56 @@ export default {
         knowledgeObj.circle(30, 30).attr({
           fill: colours[Math.floor(Math.random() * colours.length)]
         });
+      } else {
+        knowledgeObj.ellipse(20, 50).attr({
+          fill: colours[Math.floor(Math.random() * colours.length)]
+        });
+     }
+
+      objectsProcessed++;
+      if (objectsProcessed === data.length) {
+        
+        nodes.fire("startyourpositions");
+        console.log("fire...");
       }
-      var type = knowledgeObj.text(element.type);
-      var title = knowledgeObj.text(element.title);
-      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);
+    //console.log(knowledgeObj.node.id);
+    //  parentNode
 
-      title.move(0, 40);
-      uniqueid.move(0, 80);
+    // OLD Visualising whats in the couch
+    //  var type = knowledgeObj.text(element.type);
+    //  var title = knowledgeObj.text(element.title);
+    //  var uniqueid = knowledgeObj.text(element._id);
+    //  title.move(0, 40);
+    //  uniqueid.move(0, 80);
 
-      //  rect_1.connectable({
-      //    container: links,
-      //    markers: markers
-      //  }, rect_2).setLineColor("#000000");
-    });
+    //  rect_1.connectable({
+    //    container: links,
+    //    markers: markers
+    //  }, rect_2).setLineColor("#000000");
 
     // 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");
     });
-    // mouseup is where we capture position of objects after they have been moved
-    // 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 => {
-    // 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);
-
+      // FIX ME : we know the id and the locations to
+      // object coordinates
+      //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();
+      this.xpos = event.clientX;
+      this.ypos = event.clientY;
+      this.$store.dispatch("updateKnowledgePosition", this);
       // the node which was clicked
-      console.log(event.target);
-
+      console.log(event.clientX);
+      console.log(event.clientY);
       // the svgjs object
       //console.log(SVG.adopt(event.target))
-
-      // the id
-      //console.log(SVG.adopt(event.target).id())
     });
 
     nodes.dblclick(node => {

src/store.js

@@ -23,6 +23,7 @@ export default new Vuex.Store({
   state: {
     // should this be here now
     allobjects: [],
+    allpositions:[],
     database: null,
     isLoggedIn: !!localStorage.getItem("token")
   },
@@ -69,7 +70,7 @@ export default new Vuex.Store({
 
     SHOW_KNOWLEDGE_OBJECTS(state, payload) {
       var ids = [];
-      var knowledge = [];
+      //var knowledge = [];
 
       state.allobjects.forEach(payload => {
         ids.push(payload.id);
@@ -77,6 +78,18 @@ export default new Vuex.Store({
       if (!ids.includes(payload.id)) {
         state.allobjects.push(payload);
       }
+
+    },
+
+   GET_KNOWLEDGE_POSITIONS(state, payload) {
+      var ids = [];
+      
+      state.allpositions.forEach(payload => {
+        ids.push(payload.id);
+      });
+      if (!ids.includes(payload.id)) {
+        state.allpositions.push(payload);
+      }
     },
 
     ADD_KNOWLEDGE_OBJECT(data, payload) {
@@ -95,10 +108,36 @@ export default new Vuex.Store({
         connections: payload.connections,
         metadata: payload.metadata
       });
+      //first time created
+      positions_db.put({
+        _id: uniqueid,
+        id: uniqueid,
+        author: localStorage.getItem("token"),
+        mode: "shared",
+        xpos: 0,
+        ypos: 0
+      });
       // 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");
+      pouchdb.sync("positions", "https://nn.adamprocter.co.uk/positions");
+    },
+
+    // FIXME called on mouse up but not always heard..
+    UPDATE_KNOWLEDGE_POSITION(data, payload) {
+      console.log(payload.id);
+      var id = payload.id;
+      id.toString();
+      positions_db.get(id).then(function(updater) {
+        (updater.xpos = payload.xpos),
+          (updater.ypos = payload.ypos),
+          positions_db.put(updater).then(function() {
+            // FIXME this does sync but does it pass the changes we want to capture via VUEX STORE
+            pouchdb.sync("positions", "https://nn.adamprocter.co.uk/positions");
+          });
+      });
     }
   },
+
   actions: {
     db_init({ commit }) {
       commit("DB_INIT");
@@ -119,12 +158,31 @@ export default new Vuex.Store({
             commit("SHOW_KNOWLEDGE_OBJECTS", element);
           });
         });
+       
     },
 
+    getKnowledgePositions({ commit }) {
+    positions_db
+    .allDocs({
+      include_docs: true,
+      attachments: true
+    })
+    .then(result => {
+      Array.from(result.rows.values()).forEach(element => {
+        commit("GET_KNOWLEDGE_POSITIONS", element);
+      });
+    });
+
+  },
+
     addKnowledgeObject({ commit }, payload) {
       commit("ADD_KNOWLEDGE_OBJECT", payload);
     },
 
+    updateKnowledgePosition({ commit }, payload) {
+      commit("UPDATE_KNOWLEDGE_POSITION", payload);
+    },
+
     login({ commit }, payload) {
       commit(LOGIN, payload);
 
@@ -136,6 +194,7 @@ export default new Vuex.Store({
         }, 1000);
       });
     },
+
     logout({ commit }) {
       localStorage.removeItem("token");
       commit(LOGOUT);
@@ -148,6 +207,9 @@ export default new Vuex.Store({
     },
     allObjects: state => {
       return state.allobjects;
+    },
+    allPositions: state => {
+      return state.allpositions;
     }
   }
 });

src/views/home.vue

@@ -31,6 +31,7 @@ export default {
     // FIXME what should the store do here
     // this.$store.state.count
     this.$store.dispatch("showKnowledgeObjects");
+    this.$store.dispatch("getKnowledgePositions");
     //this.$store.getters.allObjects
 
     //return this.$store.getters.allObjects