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 @@ ...@@ -4,11 +4,11 @@
<script> <script>
export default { export default {
name: "account-settings", name: 'account-settings',
props: { props: {
name: String name: String
} }
}; }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
...@@ -11,18 +11,18 @@ ...@@ -11,18 +11,18 @@
<script> <script>
//import knowledgeobject from './knowledge-object.vue' //import knowledgeobject from './knowledge-object.vue'
import humaninterface from "./human-interface.vue"; import humaninterface from './human-interface.vue'
// helper to access data from vuex // helper to access data from vuex
import { mapState } from "vuex"; import { mapState } from 'vuex'
export default { export default {
name: "current-instance", name: 'current-instance',
components: { components: {
// knowledgeobject, // knowledgeobject,
humaninterface humaninterface
}, },
computed: mapState(["accounts_db", "knowledge_db", "positions_db"]) computed: mapState(['accounts_db', 'knowledge_db', 'positions_db'])
}; }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
...@@ -2,49 +2,56 @@ ...@@ -2,49 +2,56 @@
<div id="human-interface"> <div id="human-interface">
<!-- the SVG.js stuff appears here --> <!-- the SVG.js stuff appears here -->
<transition name="fade"> <transition name="fade">
<styledviewer v-show="isShowing"></styledviewer> <styledviewer v-show="isShowing" :object="this.object"></styledviewer>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
import SVG from "svg.js"; import SVG from 'svg.js'
// next two libraries used within SVG.js // next two libraries used within SVG.js
import draggy from "svg.draggy.js"; import draggy from 'svg.draggy.js'
import connectable from "svg.connectable.js"; import connectable from 'svg.connectable.js'
import { mapGetters } from "vuex"; import { mapGetters, mapActions, mapState } from 'vuex'
import { mapState } from "vuex" import { state } from 'vuex'
import styledviewer from "@/components/styled-viewer.vue"; import styledviewer from '@/components/styled-viewer.vue'
var knowledgeObj; var knowledgeObj
var knowledgeObjid; var knowledgeObjid
var canvasX = 600; var canvasX = 600
var canvasY = 300; var canvasY = 300
var xOffset = 0; var xOffset = 0
var yOffset = -370; var yOffset = -370
export default { export default {
name: "human-interface", name: 'human-interface',
components: { components: {
styledviewer: styledviewer styledviewer: styledviewer
}, },
computed: mapState(["accounts_db", "knowledge_db", "positions_db"]), // computed: mapState(["accounts_db", "knowledge_db", "positions_db"]),
data: function() { data: function() {
return { return {
id: null, id: null,
object: null,
xpos: null, xpos: null,
ypos: null, ypos: null,
isShowing: false isShowing: false
}; }
}, },
methods: { methods: {
...mapGetters(["allObjects"]), ...mapGetters(['allObjects', 'allPositions']),
...mapGetters(["allPositions"]) ...mapGetters(['accounts_db', 'knowledge_db', 'positions_db']),
...mapActions([
'showKnowledgeObjects',
'getKnowledgeObjects',
'getKnowledgePositions'
]),
...mapActions(['addKnowledgeObject', 'updateKnowledgePosition'])
}, },
props: { props: {
...@@ -52,80 +59,83 @@ export default { ...@@ -52,80 +59,83 @@ export default {
}, },
mounted: function() { mounted: function() {
// SVG UI next // SVG UI next
var draw = SVG("human-interface").size(canvasX, canvasY); console.log('inside human-interface mounted()')
var objects = []; console.log(this.knowledge_db())
var positions = []; var draw = SVG('human-interface').size(canvasX, canvasY)
var objects = []
var positions = []
//FIXME Iterate over contents of state.knowlege_db instead //FIXME Iterate over contents of state.knowlege_db instead
console.log('NEXT OUTPUT IS KNOWLEDGE_DB FROM INSIDE human-interface.vue') console.log('NEXT OUTPUT IS KNOWLEDGE_DB FROM INSIDE human-interface.vue')
console.log(this.$store.state.knowledge_db.allDocs()); console.log(this.getKnowledgeObjects())
// this.$store.state.knowledge_db.allDocs().forEach(element => { // this.$store.state.knowledge_db.allDocs().forEach(element => {
this.allObjects().forEach(element => { this.allObjects().forEach(element => {
objects.push(element.__ob__.value.doc); objects.push(element.__ob__.value.doc)
}); })
this.allPositions().forEach(element => { this.allPositions().forEach(element => {
positions.push(element.__ob__.value.doc); positions.push(element.__ob__.value.doc)
}); })
var links = draw.group(); var links = draw.group()
var markers = draw.group(); var markers = draw.group()
var nodes = draw.group(); var nodes = draw.group()
var index = 0; var index = 0
var colours = ["red", "green", "blue", "yellow", "cyan"]; //Instance colour
var objectsProcessed = 0; var colour = '#F9B821'
var colourtwo = 'red'
var objectsProcessed = 0
// when fired loops through applying all the positions if id matches // when fired loops through applying all the positions if id matches
// needs to be running this update in Realtime to update moves // needs to be running this update in Realtime to update moves
// maybe in watch: { } ??? function ??? // maybe in watch: { } ??? function ???
nodes.on("startyourpositions", event => { nodes.on('startyourpositions', event => {
console.log("hit"); console.log('hit')
}); })
// loops through all the objects and renders them // loops through all the objects and renders them
objects.forEach(object => { objects.forEach(object => {
//index = index + 20 //index = index + 20
knowledgeObj = nodes knowledgeObj = nodes.group().draggy()
.group()
.draggy();
//.draggy({ minX: 0, minY: 0, maxX: canvasX, maxY: canvasY }); //.draggy({ minX: 0, minY: 0, maxX: canvasX, maxY: canvasY });
// assigns group <g id="id" of the unique id in database // assigns group <g id="id" of the unique id in database
knowledgeObj.node.id = object._id; knowledgeObj.node.id = object._id
var pos = positions.filter(position => position.id == knowledgeObj.node.id); var pos = positions.filter(
var x = pos[0].xpos || 0; position => position.id == knowledgeObj.node.id
var y = pos[0].ypos || 0; )
var x = pos[0].xpos || 0
var y = pos[0].ypos || 0
if (object.type == "projecttxt") { if (object.type == 'projecttxt') {
knowledgeObj.rect(60, 40).attr({ knowledgeObj.rect(40, 40).attr({
fill: colours[Math.floor(Math.random() * colours.length)], fill: colour,
x: x, 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>') //.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") { } else if (object.type == 'slidedeck') {
knowledgeObj.circle(30, 30).attr({ knowledgeObj.rect(30, 30).attr({
fill: colours[Math.floor(Math.random() * colours.length)], fill: colour,
cx: x, cx: x,
cy: y, cy: y
}); })
} else { } else {
knowledgeObj.ellipse(20, 50).attr({ knowledgeObj.polygon('0,0 50,15 15,50').attr({
fill: colours[Math.floor(Math.random() * colours.length)], fill: colour,
cx: x, x: x,
cy: y, y: y
}); })
} }
objectsProcessed++; objectsProcessed++
if (objectsProcessed === objects.length) { if (objectsProcessed === objects.length) {
nodes.fire('startyourpositions')
nodes.fire("startyourpositions"); console.log('fire...')
console.log("fire...");
} }
}); })
//console.log(knowledgeObj.node.id); //console.log(knowledgeObj.node.id);
// parentNode // parentNode
...@@ -145,8 +155,12 @@ console.log(this.$store.state.knowledge_db.allDocs()); ...@@ -145,8 +155,12 @@ console.log(this.$store.state.knowledge_db.allDocs());
// mousedown is capturing a single mouse press // mousedown is capturing a single mouse press
// possibly useful for drawing connections between objects // possibly useful for drawing connections between objects
nodes.mousedown(node => { 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 => { nodes.mouseup(event => {
// FIX ME : we know the id and the locations to // FIX ME : we know the id and the locations to
...@@ -154,27 +168,35 @@ console.log(this.$store.state.knowledge_db.allDocs()); ...@@ -154,27 +168,35 @@ console.log(this.$store.state.knowledge_db.allDocs());
//console.log(event.clientX, event.clientY); //console.log(event.clientX, event.clientY);
// the id of the g object of the clicked svg object // the id of the g object of the clicked svg object
//console.log(SVG.adopt(event.target.parentNode).id()) //console.log(SVG.adopt(event.target.parentNode).id())
this.id = SVG.adopt(event.target.parentNode).id(); this.id = SVG.adopt(event.target.parentNode).id()
var obj
var pos = new Object(); this.allObjects().forEach(obj => {
pos['id'] = this.id; if (obj.id == this.id) {
pos['xpos'] = event.clientX + xOffset; this.object = obj
pos['ypos'] = event.clientY + yOffset; }
})
// 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 => { nodes.dblclick(node => {
this.id = SVG.adopt(node.target.parentNode).id()
// isShowing = true // isShowing = true
// component styled-viewer // component styled-viewer
if (this.isShowing == false) { if (this.isShowing == false) {
this.isShowing = true; this.isShowing = true
} else { } else {
this.isShowing = false; this.isShowing = false
} }
}); })
} }
}; }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
<template> <template>
<div class="logo"> <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"> --> <!-- <img src="../assets/img/icon.png" alt="Logo for project codename nodenoggin"> -->
</h1> </h1>
</div> </div>
...@@ -8,9 +10,9 @@ ...@@ -8,9 +10,9 @@
<script> <script>
export default { export default {
name: "instance-logo", name: 'instance-logo',
props: {} props: {}
}; }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
<script> <script>
export default { export default {
name: "knowledge-object", name: 'knowledge-object',
props: { props: {
// object: Array // object: Array
} }
}; }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
...@@ -20,15 +20,15 @@ ...@@ -20,15 +20,15 @@
//var db = new pouchdb('https://nn.adamprocter.co.uk/accounts'); //var db = new pouchdb('https://nn.adamprocter.co.uk/accounts');
export default { export default {
name: "register-account", name: 'register-account',
data() { data() {
return { return {
name: "", name: '',
email: "", email: '',
domain: "", domain: '',
permissions: 1, permissions: 1,
verified: false verified: false
}; }
}, },
mounted() { mounted() {
// this.syncData(); // this.syncData();
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
methods: { methods: {
registeraccount() { registeraccount() {
//console.log(this.input) //console.log(this.input)
this.$store.dispatch("registerAccount", this); this.$store.dispatch('registerAccount', this)
} }
} }
// var uniqueid = Math.random().toString(36).substring(2, 15) // var uniqueid = Math.random().toString(36).substring(2, 15)
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
// //}) // //})
// } // }
// } // }
}; }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
<template> <template>
<section class="selector"> <section class="selector">
<h2>instances</h2> <h2>instances</h2>
<div id="instances"> <div id="instances">
<a class="instanceone" href="/home"> <a class="instanceone" href="/home">instance one
instance one <div class="in1"></div>
<div class="in1">
</div>
</a> </a>
<a class="instancetwo" href="/home"> <a class="instancetwo" href="/home">instance two</a>
instance two <a href="#">Create instance</a>
</a>
<a href="#">
Create instance
</a>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
export default { export default {
name: "select-instances", name: 'select-instances',
props: {} props: {}
}; }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
...@@ -12,13 +12,13 @@ ...@@ -12,13 +12,13 @@
<script> <script>
export default { export default {
name: "sign-in", name: 'sign-in',
data() { data() {
return { return {
input: { input: {
email: "" email: ''
}
} }
};
}, },
props: { props: {
instancename: String, instancename: String,
...@@ -29,15 +29,15 @@ export default { ...@@ -29,15 +29,15 @@ export default {
//FIXME check this.input.email against pouch valid accounts //FIXME check this.input.email against pouch valid accounts
//FIXME generate token, save to remote and local session stores //FIXME generate token, save to remote and local session stores
this.$store this.$store
.dispatch("login", { .dispatch('login', {
email: this.input.email email: this.input.email
}) })
.then(() => { .then(() => {
this.$router.push("/home"); this.$router.push('/home')
}); })
} }
} }
}; }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
<template> <template>
<div class="viewer"> <div class="viewer">
<h2>STYLISH</h2> <h2>{{object.id}}</h2>
<p>This is some dummy text, no real data yet. </p> <p>{{object.doc.title}}</p>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "styled-viewer", name: 'styled-viewer',
props: {} // methods: {
}; // getobjecttitle: function(object_id) {
// console.log("object id: " + this.object_id);
// }
// },
props: ['object']
}
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
...@@ -12,7 +12,7 @@ export default new Vuex.Store({ ...@@ -12,7 +12,7 @@ export default new Vuex.Store({
state: { state: {
// should this be here now // should this be here now
allobjects: [], allobjects: [],
allpositions:[], allpositions: [],
accounts_db: null, accounts_db: null,
knowledge_db: null, knowledge_db: null,
positions_db: null, positions_db: null,
...@@ -70,7 +70,6 @@ export default new Vuex.Store({ ...@@ -70,7 +70,6 @@ export default new Vuex.Store({
if (!ids.includes(payload.id)) { if (!ids.includes(payload.id)) {
state.allobjects.push(payload); state.allobjects.push(payload);
} }
}, },
GET_KNOWLEDGE_OBJECTS(state, payload) { GET_KNOWLEDGE_OBJECTS(state, payload) {
...@@ -159,7 +158,6 @@ export default new Vuex.Store({ ...@@ -159,7 +158,6 @@ export default new Vuex.Store({
commit("SHOW_KNOWLEDGE_OBJECTS", element); commit("SHOW_KNOWLEDGE_OBJECTS", element);
}); });
}); });
}, },
getKnowledgeObjects({ commit }) { getKnowledgeObjects({ commit }) {
...@@ -223,6 +221,15 @@ export default new Vuex.Store({ ...@@ -223,6 +221,15 @@ export default new Vuex.Store({
}, },
allPositions: state => { allPositions: state => {
return state.allpositions; return state.allpositions;
},
knowledge_db: state => {
return state.knowledge_db;
},
accounts_db: state => {
return state.accounts_db;
},
positions_db: state => {
return state.positions_db;
} }
} }