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

Merge branch 'futurenogg' into main

parents e25a27b3 026c457b
<template>
<div id="nav">
<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>
<router-view />
</template>
......
<template>
<div v-for="(nodes, index) in myArray" :key="index">
<form class="nodes">
<template v-if="nodes.node_readmode == false">
<textarea
v-model="nodes.node_text"
@input="editNode"
:id="nodes.node_id"
ref="textentry"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
rows="5"
></textarea>
<p class="info">*markdown supported &amp; autosaves</p>
<button>Colour</button>
<button>Read</button>
<button>Discard</button>
</template>
<!-- <template v-if="nodes.node_readmode == false"> -->
<textarea
v-model="nodes.node_text"
@input="editNode"
:id="nodes.node_id"
ref="textentry"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
rows="5"
></textarea>
<p class="info">*markdown supported &amp; autosaves</p>
<button>Colour</button>
<button>Read</button>
<button>Discard</button>
<!-- </template>
<template v-else>
<p
class="readmode"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text"
></p>
</template>
</template> -->
</form>
</div>
</template>
......@@ -47,14 +47,14 @@ export default {
computed: {
...mapState({
// TODO: Can you filter here instead ?
myNodes: (state) => state.myNodes,
}),
},
nodesFiltered: function () {
return this.myNodes.myNodes.filter((nodes) => {
return nodes.node_deleted == false
})
watch: {
added: function () {
setTimeout(this.loadData, 500)
},
},
......@@ -73,13 +73,21 @@ export default {
},
methods: {
emptyData() {
if (this.myNodes.myNodes == 0) {
/// that
} else {
// this
}
},
loadData() {
// console.log('loading data')
var nodesFiltered = this.myNodes.myNodes.filter(
(nodes) => nodes.node_deleted == false
)
this.$store.dispatch('getMynodes')
this.myArray = nodesFiltered.reverse()
// console.log(this.myArray.length)
},
editNode(e) {
......
<template>
<div
class="nodes"
v-for="(nodes, index) in otherNodes.otherNodes"
:key="index"
>
<p class="readmode" :id="nodes.id">
{{ nodes.text }}
</p>
</div>
</template>
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
// import marked from 'marked'
export default {
name: 'OtherNodes',
computed: {
...mapState({
otherNodes: (state) => state.otherNodes,
}),
},
mounted() {
this.$store.dispatch('getOthernodes')
setTimeout(this.loadData, 500)
setInterval(this.loadData, 5000)
},
methods: {
loadData() {
this.$store.dispatch('setOthernodes')
},
},
}
</script>
<style scoped>
.nodes {
width: 95%;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 0.5em;
}
</style>
......@@ -5,6 +5,7 @@
<button>Make Connections</button>
<UploadMedia />
<button @click="exitMicrocosm()">Exit</button>
<p>{{ microcosm }}</p>
</div>
</template>
......@@ -19,7 +20,13 @@ export default {
UploadMedia,
},
data() {
return {}
return {
microcosm: 'microcosm name',
}
},
mounted() {
this.microcosm = localStorage.getItem('nogg_microcosm')
},
mixins: [
......@@ -39,7 +46,6 @@ export default {
this.$store.dispatch('addNode')
},
exitMicrocosm() {
localStorage.removeItem('nogg_microcosm')
localStorage.removeItem('nogg_name')
......
......@@ -23,7 +23,17 @@ const routes = [
// this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited.
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 = {
nodeid: state.myNodes[end].node_id,
nodetext: state.myNodes[end].node_text,
}
// OLD CODE:
// this was to set quick focus on new nodes
// i think... need to check old code
state.activeNode = newNode
......@@ -53,28 +54,45 @@ export const mutations = {
})
})
.catch(function (err) {
// TODO: Does this situation ever hit 404 ?
console.log(err)
// HITS a 404 on very first node being created
if (err.status == 404) {
var uniqueid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
pouchdb.put({
_id: deviceName,
nodes: [
{
node_id: uniqueid,
node_text: '',
node_owner: deviceName,
node_type: 'sheet',
node_shape: 'square',
node_deleted: false,
node_readmode: false,
node_color: '#9bc2d8',
},
],
})
pouchdb
.put({
_id: deviceName,
nodes: [
{
node_id: uniqueid,
node_text: '',
node_owner: deviceName,
node_type: 'sheet',
node_shape: 'square',
node_deleted: false,
node_readmode: false,
node_color: '#9bc2d8',
},
],
})
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
var end = Object.keys(state.myNodes).length - 1
const newNode = {
nodeid: state.myNodes[end].node_id,
nodetext: state.myNodes[end].node_text,
}
// OLD CODE:
// this was to set quick focus on new nodes
// i think... need to check old code
state.activeNode = newNode
})
})
.catch(function (err) {
console.log(err)
})
}
})
},
......@@ -87,13 +105,11 @@ export const mutations = {
state.myNodes = doc.nodes
}
})
.catch(function (err) {
console.log(err)
.catch(function () {
// console.log(err)
})
},
// TODO: Get other nodes from all other devices
EDIT_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
......@@ -132,8 +148,8 @@ export const actions = {
commit('ADD_NODE', e)
},
getMynodes: ({ commit }, e) => {
commit('GET_MY_NODES', e)
getMynodes: ({ commit }) => {
commit('GET_MY_NODES')
},
editNode: ({ commit }, { nodeid, nodetext }) => {
......
var pouchdb
var deviceName
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
})
.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++) {
if (state.allNodes[i].id != deviceName) {
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')
commit('SET_OTHER_NODES')
},
setOthernodes: ({ commit }) => {
commit('SET_OTHER_NODES')
},
getMicrocosm(vuexContext) {
deviceName = vuexContext.rootState.setup.deviceName
pouchdb = vuexContext.rootState.setup.pouchdb
},
}
export const getters = {}
......@@ -79,8 +79,7 @@ export const actions = {
retry: true,
})
.on('change', function () {
// console.log('change happened')
// vuexContext.dispatch('getNodes', null, { root: true })
vuexContext.dispatch('getOthernodes', null, { root: true })
})
.on('paused', function () {})
.on('active', function () {
......
......@@ -2,12 +2,14 @@ import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js'
import * as myNodes from '@/store/modules/myNodes.js'
import * as otherNodes from '@/store/modules/otherNodes.js'
export const store = createStore({
//
modules: {
setup,
myNodes,
otherNodes,
},
actions: {},
......
<template>
<ToolBar @added-node="addedNode" />
<OtherNodes />
<MyNodes :added="added" />
</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>
<template>
<ToolBar @added-node="addedNode" />
<MyNodes :added="added" :key="componentKey" />
<MyNodes :added="added" />
</template>
<script>
......@@ -11,6 +11,8 @@ import MyNodes from '@/components/MyNodes.vue'
export default {
mounted() {
this.$store.dispatch('getMicrocosm')
// register, i.e. in a `beforeDestroy` hook
window.addEventListener('unload', this.someMethod)
},
name: 'Collect',
......@@ -21,20 +23,21 @@ export default {
data() {
return {
componentKey: 0,
added: true,
added: false,
}
},
methods: {
addedNode() {
//console.log('I hear you!')
this.added = !this.added
this.forceRender()
},
forceRender() {
// reloads the data after adding a node
this.componentKey += 1
someMethod() {
localStorage.removeItem('nogg_microcosm')
localStorage.removeItem('nogg_name')
location.assign(
process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/'
)
},
},
}
......
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