Commit e6897dd8 authored by Adam Procter's avatar Adam Procter

Merge branch 'mond25th'

parents 61a2eefe cf8dc83a
Pipeline #251 failed with stages
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"
}
};
module.exports = {
singleQuote: true,
semi: false
};
......@@ -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 -->
......
......@@ -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 -->
......
......@@ -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 -->
......
<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 -->
......
......@@ -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 -->
......
......@@ -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 -->
......
<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 -->
......
......@@ -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 -->
......
<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 -->
......
......@@ -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;
}
}
});
......@@ -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
......@@ -18,83 +18,28 @@
</template>
<script>
//import pouchdb from 'pouchdb'
//var localdb = new pouchdb('knowledge');
// 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() {
// this.syncData();
}
},
methods: {
addKnowledgeObject() {
this.$store.dispatch("addKnowledgeObject", this);
// var uniqueid = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
// localdb.put({
// _id:uniqueid,
// type:this.type,
// author:localStorage.getItem("token"),
// // need to change owner in DB
// title:this.title,
// connections:this.connections,
// metadata:this.metadata,
// })
// this.syncData()
// },
// syncData(){
// if (db) {
// localdb.sync(db)
// }
//alert ("did thing")
this.$store.dispatch('addKnowledgeObject', this)
}
// checkData(){
// db.info().then(function (info) {
// // console.log(info);
// })
// // db.get('one').then(function (doc) {
// // console.log(doc);
// // });
// db.allDocs({
// include_docs: true,
// attachments: true
// }).then(function (result) {
// // handle result
// this.$router.push("/editor");
// console.log(result)
// // console.log(result)
// }).catch(function (err) {
// // console.log(err);
// });
//}
}
};
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
......
......@@ -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,10 +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>
......@@ -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: {