Administrator approval is now required for registering new accounts. If you are registering a new account, and are external to the University, please ask the repository owner to contact ServiceLine to request your account be approved. Repository owners must include the newly registered email address, and specific repository in the request for approval.

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

various attempts at keyboard and focus

Plan is to undo all this now and start a global event and add in focus trap
parent a85f60b6
......@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.10.0",
"freeze-dry": "^0.2.4",
"marked": "^2.0.1",
"pouchdb": "^7.2.2",
"vue": "^3.0.9",
......
<template>
<form>
<span class="arrow">⬇⬇</span>
<h1>What shall we call you ? 👩‍🚀</h1>
<p>
First we need to connect this device to your ideas. This name is what
......@@ -14,6 +15,7 @@
v-model.trim="name"
type="text"
id="name"
ref="name"
placeholder="type name here!"
autocorrect="off"
autocapitalize="none"
......@@ -29,6 +31,7 @@
</p>
<div class="breaker-two">
<label for="microcosm">Microcosm:</label>
<input
v-model.trim="microcosm"
ref="microcosm"
......@@ -37,11 +40,13 @@
placeholder="type microcosm name here!"
autocorrect="off"
autocapitalize="none"
@keyup.enter="setName(), setMicrocosm()"
/>
<button type="button" @click="setName(), setMicrocosm()">
Start or Join
</button>
<router-link to="/collect">
<button type="button" @click="setName(), setMicrocosm()">
Start or Join
</button>
</router-link>
<button class="configButton" type="button" @click="settings = !settings">
Change CouchDB Configuration
</button>
......@@ -112,10 +117,22 @@
export default {
name: 'JoinMicrocosm',
created() {
window.addEventListener('keypress', this.keyCommand)
},
unmounted() {
window.removeEventListener('keypress', this.keyCommand)
},
props: {
isStart: Boolean,
},
data: function () {
return {
// what you are calling yourself / device
name: '',
nameSet: false,
nameFormatted: '',
// Next dataset related to microcosm
......@@ -130,7 +147,33 @@ export default {
}
},
watch: {
// this doesnt run as isStart is in v-if component
isStart: {
deep: true,
handler: function (newVal, oldVal) {
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
this.$refs.name.focus()
},
},
},
methods: {
microcosmField() {
this.$refs.microcosm.focus()
},
keyCommand(e) {
if (
(e.keyCode == 13 && this.nameSet == false) ||
(e.keyCode == 9 && this.nameSet == false)
) {
console.log('tabb')
this.setName()
} else if (e.keyCode == 13) {
this.setMicrocosm()
}
},
setName() {
// format name so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasename = this.name.toLowerCase()
......@@ -138,13 +181,10 @@ export default {
this.nameFormatted = spacesremoved.split('-').join('')
this.nameSet = true
localStorage.setItem('nogg_name', this.nameFormatted)
// focus on next input field for speed
this.focusInput()
// now we sent this same data set to the store
// this.$store.dispatch('setName', this.nameFormatted)
},
setMicrocosm() {
this.$router.push({ path: '/collect' })
// format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasemicrocosm = this.microcosm.toLowerCase()
var spacesremoved = lowercasemicrocosm.split(' ').join('')
......@@ -166,10 +206,6 @@ export default {
url,
})
},
focusInput() {
this.$refs.microcosm.focus()
},
},
}
</script>
......
<template
><div>
<template>
<div>
<h1>Messy mapping tool for multiplayer thinking</h1>
<p class="info">⚠️This is a non functional beta build of nodenogg.in⚠️</p>
<p>
......@@ -36,7 +36,7 @@
<script>
export default {
name: 'TellmeMore'
name: 'TellmeMore',
}
</script>
......
<template>
<div>
<button @click="addNode()">Add Node</button>
<button>Select Node</button>
<button>Make Connections</button>
<UploadMedia />
</div>
</template>
<script>
// @ is an alias to /src
import UploadMedia from '@/components/UploadMedia.vue'
export default {
name: 'ToolBar',
components: {
UploadMedia,
},
data() {
return {}
},
methods: {
addNode() {
this.$store.dispatch('addNode')
this.$emit('added-node')
},
},
}
</script>
<style scoped></style>
<template>
<div></div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'UploadMedia',
components: {},
data() {
return {}
},
}
</script>
<style scoped></style>
<template>
<div v-for="(nodes, index) in myArray" v-bind:key="index">
<form class="nodes">
<p>{{ nodes.node_id }}</p>
<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)"
></textarea>
<p class="info">*markdown supported &amp; autosaves</p>
</template>
<template v-else>
<p
class="readmode"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text"
></p>
</template>
</form>
</div>
</template>
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
export default {
name: 'YourNodes',
props: {
added: Boolean,
},
data() {
return {
myArray: [],
}
},
computed: {
...mapState({
myNodes: (state) => state.mynodes,
}),
nodesFiltered: function () {
return this.myNodes.myNodes.filter((nodes) => {
return nodes.node_deleted == false
})
},
},
mounted() {
setTimeout(this.loadData, 500)
},
watch: {
added: {
deep: true,
handler() {
setTimeout(this.loadData, 200)
},
},
},
methods: {
loadData() {
this.myArray = this.nodesFiltered
this.$forceUpdate()
},
editNode(e) {
var nodeid = e.target.id
var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext })
},
},
}
</script>
<style scoped>
.nodes {
width: 95%;
border: 2px dashed black;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 0.5em;
}
</style>
......@@ -16,6 +16,15 @@ const routes = [
component: () =>
import(/* webpackChunkName: "credits" */ '../views/Credits.vue'),
},
{
path: '/collect',
name: 'Collect',
// 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: "credits" */ '../views/Collect.vue'),
},
]
const router = createRouter({
......
var pouchdb
var deviceName
export const state = {
myNodes: [],
activeNode: {},
}
export const mutations = {
ADD_NODE() {
return pouchdb
.get(deviceName)
.then(function () {
var uniqueid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
pouchdb.get(deviceName).then(function (doc) {
doc.nodes.push({
node_id: uniqueid,
node_text: '',
node_owner: deviceName,
node_type: 'sheet',
node_shape: 'square',
node_deleted: false,
node_readmode: false,
node_color: '#9bc2d8',
})
return pouchdb
.put({
_id: deviceName,
_rev: doc._rev,
nodes: doc.nodes,
})
.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,
}
// 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.status)
})
})
})
.catch(function (err) {
console.log(err)
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',
},
],
})
}
})
},
GET_NODES() {
pouchdb
.get(deviceName)
.then(function (doc) {
var i
for (i = 0; i < Object.keys(doc.nodes).length; i++) {
state.myNodes = doc.nodes
}
console.log(state.myNodes)
})
.catch(function () {
// console.log(err)
})
},
EDIT_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (e.nodeid == state.myNodes[i].node_id) {
state.myNodes[i].node_text = e.nodetext
}
}
pouchdb
.get(deviceName)
.then(function (doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: deviceName,
_rev: doc._rev,
_attachments: doc._attachments,
nodes: state.myNodes,
},
])
})
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
})
})
.catch(function (err) {
if (err.status == 404) {
// pouchdb.put({ })
}
})
},
}
export const actions = {
addNode: ({ commit }, e) => {
commit('ADD_NODE', e)
},
getNodes: ({ commit }, e) => {
commit('GET_NODES', e)
},
editNode: ({ commit }, { nodeid, nodetext }) => {
commit('EDIT_NODE', { nodeid, nodetext })
},
getMicrocosm(vuexContext) {
pouchdb = vuexContext.rootState.setup.pouchdb
deviceName = vuexContext.rootState.setup.deviceName
},
}
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)
// })
// },
......@@ -7,6 +7,7 @@ export const state = {
deviceName: '',
remoteAddress: '',
configRemote: [],
pouchdb: {},
}
export const mutations = {
......@@ -15,6 +16,7 @@ export const mutations = {
state.microcosmName = e.microcosm
pouchdb = new PouchDB(state.microcosmName)
state.pouchdb = pouchdb
if (state.configRemote && state.configRemote.length > 0) {
remote =
......@@ -62,7 +64,30 @@ export const actions = {
commit('SET_REMOTE', e)
},
startDB: () => {
pouchdb.replicate.from(remote).on('complete', function () {})
startDB: (vuexContext) => {
pouchdb.replicate.from(remote).on('complete', function () {
// GET_MYNODES from mynodes.js ACTION
//console.log('start')
vuexContext.dispatch('getNodes', null, { root: true })
//dispatch('getNodes')
pouchdb
.sync(remote, {
live: true,
since: 'now',
retry: true,
})
.on('change', function () {
// GET_MYNODES
console.log('change')
vuexContext.dispatch('getNodes', null, { root: true })
})
.on('paused', function () {})
.on('active', function () {})
.on('denied', function () {})
.on('complete', function () {})
.on('error', function (err) {
console.log(err)
})
})
},
}
import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js'
//import * as nodes from '@/store/modules/nodes.js'
import * as mynodes from '@/store/modules/mynodes.js'
export const store = createStore({
//
modules: {
setup,
// nodes,
mynodes,
},
actions: {},
})
export default store
<template>
<ToolBar @added-node="addedNode" />
<YourNodes :added="added" />
</template>
<script>
// @ is an alias to /src