Commit fbb6a6dc authored by Adam Procter's avatar Adam Procter
Browse files

trying to add the cards view

this will show other nodes as well... maybe jumping the gun as the issues with adding are not resolved yet
parent 197a2347
<template> <template>
<div id="nav"> <div id="nav">
<router-link to="/">Start</router-link> | <router-link to="/">Start</router-link> |
<router-link to="/credits">Credits</router-link> <router-link to="/credits">Credits</router-link> |
<router-link to="/collect">Collect</router-link> |
<router-link to="/cards">Cards</router-link>
</div> </div>
<router-view /> <router-view />
</template> </template>
......
<template> <template>
<div v-for="(nodes, index) in myArray" :key="index"> <div v-for="(nodes, index) in myArray" :key="index">
{{ index }}
<form class="nodes"> <form class="nodes">
<template v-if="nodes.node_readmode == false"> <!-- <template v-if="nodes.node_readmode == false"> -->
<textarea <textarea
v-model="nodes.node_text" v-model="nodes.node_text"
@input="editNode" @input="editNode"
:id="nodes.node_id" :id="nodes.node_id"
ref="textentry" ref="textentry"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)" placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
rows="5" rows="5"
></textarea> ></textarea>
<p class="info">*markdown supported &amp; autosaves</p> <p class="info">*markdown supported &amp; autosaves</p>
<button>Colour</button> <button>Colour</button>
<button>Read</button> <button>Read</button>
<button>Discard</button> <button>Discard</button>
</template> <!-- </template>
<template v-else> <template v-else>
<p <p
class="readmode" class="readmode"
:id="nodes.node_id" :id="nodes.node_id"
:inner-html.prop="nodes.node_text" :inner-html.prop="nodes.node_text"
></p> ></p>
</template> </template> -->
</form> </form>
</div> </div>
</template> </template>
...@@ -78,6 +79,7 @@ export default { ...@@ -78,6 +79,7 @@ export default {
) )
this.$store.dispatch('getMynodes') this.$store.dispatch('getMynodes')
this.myArray = nodesFiltered.reverse() this.myArray = nodesFiltered.reverse()
console.log(this.myArray.length)
}, },
editNode(e) { editNode(e) {
......
<template>
<div v-for="(nodes, index) in otherArray" :key="index">
<p
class="readmode"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text"
></p>
</div>
</template>
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
// import marked from 'marked'
export default {
name: 'OtherNodes',
data() {
return {
otherArray: [],
}
},
computed: {
...mapState({
otherNodes: (state) => state.otherNodes,
}),
},
// watch: {
// added: function () {
// this.loadData()
// },
// },
mounted() {
//console.log('mounted')
setTimeout(this.loadData, 500)
// if (localStorage.nogg_microcosm) {
// // var devicename = localStorage.nogg_name
// var microcosm = localStorage.nogg_microcosm
// this.$store.dispatch('setMicrocosm', { microcosm })
// } else {
// console.log('no')
// // go home
// }
},
methods: {
loadData() {
var othersFiltered = this.otherNodes.otherNodes.filter(
(nodes) => nodes.node_deleted == false
)
this.$store.dispatch('getOthernodes')
this.otherArray = othersFiltered
},
},
}
</script>
<style scoped></style>
...@@ -23,7 +23,17 @@ const routes = [ ...@@ -23,7 +23,17 @@ const routes = [
// this generates a separate chunk (credits.[hash].js) for this route // this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => component: () =>
import(/* webpackChunkName: "credits" */ '../views/Collect.vue'), import(/* webpackChunkName: "collect" */ '../views/Collect.vue'),
},
{
path: '/cards',
name: 'Cards',
// route level code-splitting
// this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "cards" */ '../views/Cards.vue'),
}, },
] ]
......
...@@ -42,6 +42,7 @@ export const mutations = { ...@@ -42,6 +42,7 @@ export const mutations = {
nodeid: state.myNodes[end].node_id, nodeid: state.myNodes[end].node_id,
nodetext: state.myNodes[end].node_text, nodetext: state.myNodes[end].node_text,
} }
// OLD CODE:
// this was to set quick focus on new nodes // this was to set quick focus on new nodes
// i think... need to check old code // i think... need to check old code
state.activeNode = newNode state.activeNode = newNode
...@@ -92,8 +93,6 @@ export const mutations = { ...@@ -92,8 +93,6 @@ export const mutations = {
}) })
}, },
// TODO: Get other nodes from all other devices
EDIT_NODE(state, e) { EDIT_NODE(state, e) {
var i var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) { for (i = 0; i < Object.keys(state.myNodes).length; i++) {
......
var pouchdb
// PRETTY SURE this is wrong
import * as store from '@/store/store.js'
export const state = {
allNodes: [],
otherNodes: [],
}
export const mutations = {
GET_ALL_NODES(state) {
pouchdb
.allDocs({
include_docs: true,
attachments: true,
})
.then(function (doc) {
state.allNodes = doc.rows
// TODO: THIS IS NOT working
store.commit('SET_OTHER_NODES')
})
.catch(function (err) {
console.log(err)
})
},
SET_OTHER_NODES(state) {
state.otherNodes = []
var i
var j
for (i = 0; i < Object.keys(state.allNodes).length; i++) {
for (j = 0; j < Object.keys(state.allNodes[i].doc.nodes).length; j++) {
const newNode = {
id: state.allNodes[i].doc.nodes[j].node_id,
text: state.allNodes[i].doc.nodes[j].node_text,
deleted: state.allNodes[i].doc.nodes[j].node_deleted,
color: state.allNodes[i].doc.nodes[j].node_color,
}
state.otherNodes.push(newNode)
}
}
},
}
export const actions = {
getOthernodes: ({ commit }) => {
commit('GET_ALL_NODES')
},
getMicrocosm(vuexContext) {
pouchdb = vuexContext.rootState.setup.pouchdb
},
}
export const getters = {}
...@@ -2,12 +2,14 @@ import { createStore } from 'vuex' ...@@ -2,12 +2,14 @@ import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js' import * as setup from '@/store/modules/setup.js'
import * as myNodes from '@/store/modules/myNodes.js' import * as myNodes from '@/store/modules/myNodes.js'
import * as otherNodes from '@/store/modules/otherNodes.js'
export const store = createStore({ export const store = createStore({
// //
modules: { modules: {
setup, setup,
myNodes, myNodes,
otherNodes,
}, },
actions: {}, actions: {},
......
<template>
<ToolBar @added-node="addedNode" />
<MyNodes :added="added" />
<OtherNodes />
</template>
<script>
// @ is an alias to /src
import ToolBar from '@/components/ToolBar.vue'
import MyNodes from '@/components/MyNodes.vue'
import OtherNodes from '@/components/OtherNodes.vue'
export default {
mounted() {
this.$store.dispatch('getMicrocosm')
},
name: 'Collect',
components: {
ToolBar,
MyNodes,
OtherNodes,
},
data() {
return {
added: false,
}
},
methods: {
addedNode() {
this.added = !this.added
},
},
}
</script>
<style scoped></style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment