newstuff

src/components/sign-in.vue

@@ -29,8 +29,10 @@ export default {
   },
   methods: {
     login() {
+      //FIXME check this.input.email against pouch valid accounts
+      //FIXME generate token, save to remote and local session stores
       this.$store.dispatch("login", {
-        email: this.email
+        email: this.input.email
       }).then(() => {
         this.$router.push("/home")
 });

src/components/user-interface.vue

@@ -18,92 +18,94 @@ import { mapGetters } from 'vuex';
 import styledviewer from "@/components/styled-viewer.vue";
 
 export default {
-  name: 'user-interface',
-
-components: {
-    styledviewer: styledviewer
-
-},
-
-data:{
-
-
-},
-
-  methods: {
-    ...mapGetters([
-      'allObjects'
-    ])
-  },
-  props: {
-    object: Object
-  },
-  mounted: function() {
-    // SVG UI next
-    var draw = SVG('user-interface').size(600, 300)
-    var data = []; 
-
-    let objects = this.allObjects()
-    objects.forEach((element) => {
-        data.push(element.__ob__.value.doc)
-    })
-
-    var links = draw.group()
-    var markers = draw.group()
-    var nodes = draw.group()
-        
-    var index = 0
-    var colours = [
-        'red',
-        'green',
-        'blue',
-        'yellow',
-        'cyan',
-    ];
-
-    data.forEach(element => {
-      //index = index + 20
-
-    var knowledgeObj = nodes.group().translate(element.xpos, element.ypos).draggy({minX: 0,
-    minY: 0,
-    maxX: 600,
-    maxY: 300})
+    name: 'user-interface',
+    components: {
+        styledviewer: styledviewer
+    },
+    data:{
+    },
+    methods: {
+        ...mapGetters([
+          'allObjects'
+        ])
+    },
+    props: {
+        object: Object
+    },
+    mounted: function() {
+        // SVG UI next
+        var draw = SVG('user-interface').size(600, 300)
+        var data = []; 
     
-    if (element.type == "projecttxt"){
-   
-      knowledgeObj.rect(60, 40).attr({
-          fill: colours[Math.floor(Math.random() * colours.length)]
-      })
-}else if (element.type == "slidedeck"){
-   knowledgeObj.circle(30, 30).attr({
-          fill: colours[Math.floor(Math.random() * colours.length)]
-      })
-
-
-}
-      var type = knowledgeObj.text(element.type)
-      var owner = knowledgeObj.text(element.owner)
-     
-      owner.move(0,40)
- 
-  //  rect_1.connectable({
-  //    container: links,
-  //    markers: markers
-  //  }, rect_2).setLineColor("#000000");
-    })
-
-    nodes.click(node => {
-              console.log("start connect")
+        let objects = this.allObjects()
+        objects.forEach((element) => {
+            data.push(element.__ob__.value.doc)
+        })
+    
+        var links = draw.group()
+        var markers = draw.group()
+        var nodes = draw.group()
+            
+        var index = 0
+        var colours = [
+            'red',
+            'green',
+            'blue',
+            'yellow',
+            'cyan',
+        ];
+    
+        data.forEach(element => {
+          //index = index + 20
+    
+            var knowledgeObj = nodes.group().translate(element.xpos, element.ypos).draggy({minX: 0,
+            minY: 0,
+            maxX: 600,
+            maxY: 300})
+            
+            if (element.type == "projecttxt"){
+           
+              knowledgeObj.rect(60, 40).attr({
+                  fill: colours[Math.floor(Math.random() * colours.length)]
+              })
+            } else if (element.type == "slidedeck"){
+               knowledgeObj.circle(30, 30).attr({
+                  fill: colours[Math.floor(Math.random() * colours.length)]
+                })
+            }
+        
+            var type = knowledgeObj.text(element.type)
+            var owner = knowledgeObj.text(element.owner)
              
+             console.log(knowledgeObj)
+            owner.move(0,40)
+         
+          //  rect_1.connectable({
+          //    container: links,
+          //    markers: markers
+          //  }, rect_2).setLineColor("#000000");
         })
-
-
-      nodes.dblclick(node => {
-              console.log("open styled viewer component")
-              // component styled-viewer
+    
+        // mousedown is capturing a single mouse press
+        // possibly useful for drawing connections between objects
+        nodes.mousedown(node => {
+            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 => {
+            //console.log(node)
+            console.log("x: "+node.clientX)
+            console.log("y: "+node.clientY)
+        })
+    
+        nodes.dblclick(node => {
+            console.log("open styled viewer component")
+            // component styled-viewer
+        })
+    },
 }
 
 </script>

src/main.js

@@ -27,6 +27,8 @@ new Vue({
   render: h => h(App)
 }).$mount('#app')
 
+//store.dispatch("db_init");
+
 {
 require('@/assets/js/custom')
 }

src/store.js

 import Vue from 'vue'
 import Vuex from 'vuex'
+import pouchdb from 'pouchdb'
+
+const accounts_db = new pouchdb('accounts');
+const knowledge_db = new pouchdb('knowledge');
+// server admin has to create DB first and CORS allows specific domains.
+var remote_accounts_db = new pouchdb('https://nn.adamprocter.co.uk/accounts');
+var remote_knowledge_db = new pouchdb('https://nn.adamprocter.co.uk/knowledge');
 
 Vue.use(Vuex)
 
@@ -10,6 +17,7 @@ const LOGOUT = "LOGOUT";
 export default new Vuex.Store({
   state: {
     allobjects: [],
+    database: null,
     isLoggedIn: !!localStorage.getItem("token"),
   },
   getters: {
@@ -21,6 +29,9 @@ export default new Vuex.Store({
     },
   },
   mutations: {
+    DB_INIT(state, data) {
+      state.database = data.database;
+    },
     ADD_KNOWLEDGE_OBJECT (state, payload) {
       var ids = [];
       state.allobjects.forEach(item => {ids.push(item.id)})
@@ -40,14 +51,29 @@ export default new Vuex.Store({
     }
   },
   actions: {
+    // https://www.nativescript.org/blog/data-management-with-sqlite-and-vuex-in-a-nativescript-vue-app
+    // db initialisation, query, and write need to flow through vuex
+    // db should be stored in store
+    db_init(context) {
+      (new pouchdb('accounts')).then(db => {
+        console.log("Initiated local pouch")
+          db.execSQL("CREATE TABLE IF NOT EXISTS people (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname TEXT, lastname TEXT)").then(id => {
+              context.commit("DB_INIT", { database: db });
+          }, error => {
+              console.log("CREATE TABLE ERROR", error);
+          });
+      }, error => {
+          console.log("OPEN DB ERROR", error);
+      });
+    },
     addKnowledgeObject({ commit }, payload) {
       commit('ADD_KNOWLEDGE_OBJECT', payload)
     },
-    login({ commit }) {
-      commit(LOGIN); 
+    login({ commit }, payload) {
+      commit(LOGIN, payload); 
       return new Promise(resolve => {
         setTimeout(() => {
-          localStorage.setItem("token", "JWT");
+          localStorage.setItem("token", payload.email);
           commit(LOGIN_SUCCESS);
           resolve();
         }, 1000);
@@ -58,4 +84,4 @@ export default new Vuex.Store({
       commit(LOGOUT);
  }
   }
-})
+})
\ No newline at end of file

src/views/editor.vue

@@ -11,7 +11,7 @@
   <option value="plaintxt">Plain Text</option>
   
 </select> 
-		<input v-model="owner" placeholder="Author" />
+		<input v-model="owner" placeholder="Owner" />
 		<textarea v-model="metadata.mdtxt" type="text" placeholder="Enter text here" rows="10"></textarea>
 		<button type="submit"><font-awesome-icon icon="save" size="2x"/></button>
 
@@ -38,6 +38,7 @@ name: 'editor',
   data() {
     return {
      type:'',
+     author:'',
      owner:'',
      connections:[],
      metadata:{},
@@ -57,6 +58,7 @@ name: 'editor',
          localdb.put({
            _id:uniqueid,
            type:this.type,
+           author:localStorage.getItem("token"),
            owner:this.owner,
            connections:this.connections,
            metadata:this.metadata,