Skip to content
Snippets Groups Projects
Commit a85f60b6 authored by Adam Procter's avatar Adam Procter
Browse files

refactoring Vuex

splitting vuex store into modules.
parent 4f6d1a29
No related branches found
No related tags found
No related merge requests found
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<p> <p>
First we need to connect this device to your ideas. This name is what First we need to connect this device to your ideas. This name is what
allows you to create and edit your nodes and this name can be anything you allows you to create and edit your nodes and this name can be anything you
like, this name is always anonymous. like, this name is always anonymous. <strong>This is required.</strong>
</p> </p>
<div class="breaker-one"> <div class="breaker-one">
<label for="name">Your Name: {{ nameFormatted }}</label> <label for="name">Your Name: {{ nameFormatted }}</label>
...@@ -14,13 +14,11 @@ ...@@ -14,13 +14,11 @@
v-model.trim="name" v-model.trim="name"
type="text" type="text"
id="name" id="name"
autofocus
placeholder="type name here!" placeholder="type name here!"
autocorrect="off" autocorrect="off"
autocapitalize="none" autocapitalize="none"
@keyup.enter="setName()" required
/> />
<button type="button" @click="setName()">Store</button>
</div> </div>
<h2>Next start or join a <span class="long">microcosm !</span> 🚀</h2> <h2>Next start or join a <span class="long">microcosm !</span> 🚀</h2>
...@@ -39,9 +37,11 @@ ...@@ -39,9 +37,11 @@
placeholder="type microcosm name here!" placeholder="type microcosm name here!"
autocorrect="off" autocorrect="off"
autocapitalize="none" autocapitalize="none"
@keyup.enter="setMicrocosm()" @keyup.enter="setName(), setMicrocosm()"
/> />
<button type="button" @click="setMicrocosm()">Start or Join</button> <button type="button" @click="setName(), setMicrocosm()">
Start or Join
</button>
<button class="configButton" type="button" @click="settings = !settings"> <button class="configButton" type="button" @click="settings = !settings">
Change CouchDB Configuration Change CouchDB Configuration
</button> </button>
...@@ -141,7 +141,7 @@ export default { ...@@ -141,7 +141,7 @@ export default {
// focus on next input field for speed // focus on next input field for speed
this.focusInput() this.focusInput()
// now we sent this same data set to the store // now we sent this same data set to the store
this.$store.dispatch('setName', this.nameFormatted) // this.$store.dispatch('setName', this.nameFormatted)
}, },
setMicrocosm() { setMicrocosm() {
...@@ -152,7 +152,10 @@ export default { ...@@ -152,7 +152,10 @@ export default {
this.microcosmSet = true this.microcosmSet = true
localStorage.setItem('nogg_microcosm', this.microcosmFormatted) localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
// now we sent this same data set to the store // now we sent this same data set to the store
this.$store.dispatch('setMicrocosm', this.microcosmFormatted) var devicename = this.nameFormatted
var microcosm = this.microcosmFormatted
this.$store.dispatch('setMicrocosm', { devicename, microcosm })
this.$store.dispatch('startDB')
}, },
configureRemote(protocol, username, password, url) { configureRemote(protocol, username, password, url) {
// console.log(protocol, username, password, url) // console.log(protocol, username, password, url)
......
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store/store'
createApp(App) createApp(App).use(store).use(router).mount('#app')
.use(store)
.use(router)
.mount('#app')
import { createStore } from 'vuex'
import PouchDB from 'pouchdb'
//import Router from '@/router'
// Checking for previous microcosm last entered from LocalStorage
if (localStorage.getItem('nogg_microcosm') == null) {
var microcosm = 'first_visit'
} else {
microcosm = localStorage.getItem('nogg_microcosm')
}
// Checking for previous name last entered from LocalStorage
if (localStorage.getItem('nogg_name') == null) {
var name = 'no_name'
} else {
name = localStorage.getItem('nogg_name')
}
// set up PouchDB and add a remote from env files
var pouchdb = new PouchDB(microcosm)
var remote =
process.env.VUE_APP_COUCH_HTTP +
'://' +
process.env.VUE_APP_COUCH_USER +
':' +
process.env.VUE_APP_COUCH_PASS +
process.env.VUE_APP_COUCH_URL +
microcosm +
'/'
export const store = createStore({
state() {
return {
version: process.env.VUE_APP_VERSION,
microcosm: '',
name: name,
myNodes: [],
allNodes: [],
configRemote: [],
}
},
mutations: {
SET_NAME(state, e) {
state.name = e
},
SET_MICROCOSM(state, e) {
// const urlmicrocosm = Router.currentRoute.params.microcosm
pouchdb.close().then(function () {
// if the URL Parameter has /microcosm/usethisname
microcosm = e
// if (urlmicrocosm != undefined) {
// microcosm = urlmicrocosm
// localStorage.setItem('nogg_microcosm', microcosm)
// } else {
// microcosm = doc
// }
pouchdb = new PouchDB(microcosm)
if (state.configRemote && state.configRemote.length > 0) {
remote =
state.configRemote[0].protocol +
'://' +
state.configRemote[0].username +
':' +
state.configRemote[0].password +
'@' +
state.configRemote[0].url +
'/' +
microcosm +
'/'
} else {
remote =
process.env.VUE_APP_COUCH_HTTP +
'://' +
process.env.VUE_APP_COUCH_USER +
':' +
process.env.VUE_APP_COUCH_PASS +
process.env.VUE_APP_COUCH_URL +
microcosm +
'/'
}
store.dispatch('syncDB')
})
},
SET_REMOTE(state, e) {
state.configRemote = [
{
protocol: e.protocol,
username: e.username,
password: e.password,
url: e.url,
},
]
},
// ADD_NODE(state) {
// var uniqueid =
// Math.random().toString(36).substring(2, 15) +
// Math.random().toString(36).substring(2, 15)
// if (state.microcosm == 'first_visit') {
// console.log('not allowed on this microcosm')
// } else {
// pouchdb.get(state.name).then(function (doc) {
// doc.nodes.push({
// node_id: uniqueid,
// node_text: '',
// node_owner: state.name,
// node_type: 'sheet',
// node_shape: 'square',
// node_deleted: false,
// node_readmode: false,
// node_color: '#9bc2d8',
// })
// return pouchdb
// .put({
// _id: state.name,
// _rev: doc._rev,
// _attachments: doc._attachments,
// nodes: doc.nodes,
// })
// .then(function () {
// return pouchdb.get(state.name).then(function (doc) {
// state.myNodes = doc.nodes
// var end = Object.keys(state.myNodes).length - 1
// const newNode = {
// nodeid: state.myNodes[end].id,
// nodetext: state.myNodes[end].text,
// }
// console.log(newNode)
// })
// })
// .catch(function (err) {
// if (err.status == 404) {
// // pouchdb.put({ })
// }
// })
// })
// }
// },
GET_ALL_NODES(state) {
pouchdb
.allDocs({
include_docs: true,
})
.then(function (doc) {
state.allNodes = doc.rows
store.commit('GET_MY_NODES')
})
.catch(function () {
//console.log(err)
})
},
GET_MY_NODES(state) {
pouchdb
.get(state.name)
.then(function (doc) {
var i
for (i = 0; i < Object.keys(doc.nodes).length; i++) {
state.myNodes = doc.nodes
}
})
.catch(function () {
// console.log(err)
})
},
},
actions: {
syncDB: () => {
pouchdb.replicate.from(remote).on('complete', function () {
// turn on two-way, continuous, retriable sync
store.commit('GET_ALL_NODES')
pouchdb
.sync(remote, {
live: true,
since: 'now',
retry: true,
attachments: true,
})
.on('change', function () {
// pop info into function to find out more
store.commit('GET_ALL_NODES')
})
.on('paused', function () {})
.on('active', function () {})
.on('denied', function () {})
.on('complete', function () {})
.on('error', function (err) {
console.log(err)
})
})
},
setName: ({ commit }, e) => {
commit('SET_NAME', e)
},
setMicrocosm: ({ commit }, e) => {
commit('SET_MICROCOSM', e)
},
configureRemote: ({ commit }, e) => {
commit('SET_REMOTE', e)
},
},
modules: {},
})
export default store
store.dispatch('syncDB')
import { createStore } from 'vuex'
export const nodesstore = createStore({
state() {
return {
version: process.env.VUE_APP_VERSION,
myNodes: [],
allNodes: [],
}
},
mutations: {},
actions: {
})
export default nodesstore
// ADD_NODE(state) {
// var uniqueid =
// Math.random().toString(36).substring(2, 15) +
// Math.random().toString(36).substring(2, 15)
// if (state.microcosm == 'first_visit') {
// console.log('not allowed on this microcosm')
// } else {
// pouchdb.get(state.deviceName).then(function (doc) {
// doc.nodes.push({
// node_id: uniqueid,
// node_text: '',
// node_owner: state.deviceName,
// node_type: 'sheet',
// node_shape: 'square',
// node_deleted: false,
// node_readmode: false,
// node_color: '#9bc2d8',
// })
// return pouchdb
// .put({
// _id: state.name,
// _rev: doc._rev,
// _attachments: doc._attachments,
// nodes: doc.nodes,
// })
// .then(function () {
// return pouchdb.get(state.name).then(function (doc) {
// state.myNodes = doc.nodes
// var end = Object.keys(state.myNodes).length - 1
// const newNode = {
// nodeid: state.myNodes[end].id,
// nodetext: state.myNodes[end].text,
// }
// console.log(newNode)
// })
// })
// .catch(function (err) {
// if (err.status == 404) {
// // pouchdb.put({ })
// }
// })
// })
// }
// },
// GET_ALL_NODES(state) {
// pouchdb
// .allDocs({
// include_docs: true,
// })
// .then(function (doc) {
// state.allNodes = doc.rows
// })
// .catch(function () {
// //console.log(err)
// })
// },
// GET_MY_NODES(state) {
// pouchdb
// .get(state.deviceName)
// .then(function (doc) {
// var i
// for (i = 0; i < Object.keys(doc.nodes).length; i++) {
// state.myNodes = doc.nodes
// }
// })
// .catch(function () {
// // console.log(err)
// })
// },
import PouchDB from 'pouchdb'
var pouchdb
var remote
export const state = {
microcosmName: '',
deviceName: '',
remoteAddress: '',
configRemote: [],
}
export const mutations = {
SET_MICROCOSM(state, e) {
state.deviceName = e.devicename
state.microcosmName = e.microcosm
pouchdb = new PouchDB(state.microcosmName)
if (state.configRemote && state.configRemote.length > 0) {
remote =
state.configRemote[0].protocol +
'://' +
state.configRemote[0].username +
':' +
state.configRemote[0].password +
'@' +
state.configRemote[0].url +
'/' +
state.microcosmName +
'/'
} else {
remote =
process.env.VUE_APP_COUCH_HTTP +
'://' +
process.env.VUE_APP_COUCH_USER +
':' +
process.env.VUE_APP_COUCH_PASS +
process.env.VUE_APP_COUCH_URL +
state.microcosmName +
'/'
}
state.remoteAddress = remote
},
SET_REMOTE(state, e) {
state.configRemote = [
{
protocol: e.protocol,
username: e.username,
password: e.password,
url: e.url,
},
]
},
}
export const actions = {
setMicrocosm: ({ commit }, e) => {
commit('SET_MICROCOSM', e)
},
configureRemote: ({ commit }, e) => {
commit('SET_REMOTE', e)
},
startDB: () => {
pouchdb.replicate.from(remote).on('complete', function () {})
},
}
import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js'
//import * as nodes from '@/store/modules/nodes.js'
export const store = createStore({
//
modules: {
setup,
// nodes,
},
})
export default store
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment