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

Merge branch 'main' into futurenogg

parents b3a87eca e4de5675
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.16.2", "core-js": "^3.16.4",
"freeze-dry": "^0.2.5", "freeze-dry": "^0.2.5",
"marked": "^3.0.0", "marked": "^3.0.2",
"pouchdb": "^7.2.2", "pouchdb": "^7.2.2",
"vue": "^3.2.4", "vue": "^3.2.6",
"vue-router": "^4.0.0", "vue-router": "^4.0.0",
"vuex": "^4.0.0" "vuex": "^4.0.0"
}, },
...@@ -22,12 +22,12 @@ ...@@ -22,12 +22,12 @@
"@vue/cli-plugin-router": "^4.5.12", "@vue/cli-plugin-router": "^4.5.12",
"@vue/cli-plugin-vuex": "^4.5.12", "@vue/cli-plugin-vuex": "^4.5.12",
"@vue/cli-service": "^4.5.12", "@vue/cli-service": "^4.5.12",
"@vue/compiler-sfc": "^3.2.4", "@vue/compiler-sfc": "^3.2.6",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-prettier": "^3.1.3", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.16.0", "eslint-plugin-vue": "^7.17.0",
"prettier": "^2.3.2" "prettier": "^2.3.2"
}, },
"eslintConfig": { "eslintConfig": {
......
/// this is from Vue 2 // check and rebuild
<template>
<div>
<div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<form
class="nodes"
:style="{
backgroundColor: nodes.color,
}"
>
<template v-if="nodes.read_mode == false">
<textarea
@focus="editTrue(true)"
@blur="editTrue(false)"
v-model="nodes.node_text"
@input="editNode"
:id="nodes.node_id"
v-focus
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 | marked"
></p>
</template>
<div class="btn-row">
<SvgButton
buttonClass="nodes"
@click.prevent="deleteFlag(nodes.node_id), updateNodes()"
/>
<SvgButton2
buttonClass="nodes"
@click.prevent="
readFlag(nodes.node_id, nodes.read_mode), updateNodes()
"
/>
<v-swatches
v-model="color"
@input="chooseColor(color, nodes.node_id)"
:swatches="swatches"
:shapes="shapes"
show-border
show-fallback
fallback-input-type="color"
>
<SvgButton3 buttonClass="nodes" @click.prevent slot="trigger" />
</v-swatches>
</div>
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<template v-if="emojis.node_id == nodes.node_id">{{
emojis.emoji_text
}}</template>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import marked from 'marked'
import SvgButton from '@/components/SvgButton'
import SvgButton2 from '@/components/SvgButton2'
import SvgButton3 from '@/components/SvgButton3'
import VSwatches from 'vue-swatches'
import 'vue-swatches/dist/vue-swatches.css'
var readmode
export default {
name: 'ListLayer',
props: {
added: Boolean,
},
data: function () {
return {
color: '#9bc2d8',
shapes: 'circles',
// swatches: [{ color: '#F493A7', showBorder: true }],
swatches: [
['#EB5757', '#F2994A', '#F2C94C'],
['#219653', '#27AE60', '#6FCF97'],
['#2F80ED', '#2D9CDB', '#56CCF2'],
['#9B51E0', '#BB6BD9', '#E9B7FC'],
],
localreadmode: false,
myArray: null,
update: false,
}
},
filters: {
marked: marked,
},
computed: {
...mapState({
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
configEmoji: (state) => state.configEmoji,
// toolmode: (state) => state.ui.mode,
}),
nodes_filtered: function () {
return this.myNodes.filter((nodes) => {
return nodes.deleted == false
})
},
},
mounted() {
setTimeout(this.loadData, 500)
const unwatch = this.$watch('nodes_filtered', (value) => {
this.$options.myArray = this.nodes_filtered
this.$forceUpdate()
// this.focusInput()
// ignore falsy values
if (!value) return
// stop watching when nodes_filtered[] is not empty
if (value && value.length) unwatch()
// process value here
})
},
watch: {
added: {
deep: true,
handler() {
setTimeout(this.loadData, 200)
},
},
update: {
deep: true,
handler() {
setTimeout(this.loadData, 200)
},
},
},
methods: {
chooseColor(color, nodeid) {
this.$store.dispatch('colorNode', { nodeid, color })
this.$options.myArray = this.nodes_filtered
},
updateNodes() {
this.update = !this.update
},
loadData() {
this.$options.myArray = this.nodes_filtered
this.$forceUpdate()
},
editNode(e) {
var nodeid = e.target.id
var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext })
},
editTrue(e) {
this.$emit('edit-true', e)
},
deleteFlag(e) {
if (confirm('Confirm discard?')) {
this.$store.dispatch('deleteFlag', { e })
} else {
// nothing happens
}
},
readFlag(e, f) {
readmode = f
readmode = !readmode
this.$store.dispatch('readFlag', { e, readmode })
if (readmode == true) {
this.mode = 'Read'
} else {
this.mode = 'Edit'
}
},
},
components: {
SvgButton,
SvgButton2,
SvgButton3,
VSwatches,
},
}
</script>
<style lang="css" scoped>
.nodes {
width: 95%;
border: 2px dashed black;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 0.5em;
}
.readmode {
margin-top: 1em;
margin-left: 1em;
}
textarea {
width: 100%;
height: 175px;
resize: none;
box-sizing: border-box;
font-size: 18px;
font-family: 'Inter var', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
outline: none;
background-color: rgb(187, 227, 255);
scrollbar-color: yellow rgb(187, 227, 255);
}
.btn-row {
position: relative;
margin-bottom: 5px;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0 15px;
border-radius: 4px;
}
.allemoji {
font-size: 2em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));
/* float: left; */
}
.eachemoji p {
margin: 0em;
}
@media only screen and (max-width: 600px) {
.readmode >>> a {
font-size: 2em;
word-break: break-all;
padding-right: 0.5em;
}
}
</style>
<template> <template>
<div v-for="(nodes, index) in myArray" :key="index"> <div v-for="(nodes, index) in myArray" :key="index">
<form class="nodes"> <form class="nodes">
<!-- <template v-if="nodes.node_readmode == false"> --> <template v-if="nodes.read_mode == false">
<textarea <textarea
v-model="nodes.node_text" v-model="nodes.node_text"
@input="editNode" @input="editNode"
...@@ -12,16 +12,14 @@ ...@@ -12,16 +12,14 @@
></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>Shape</button>
<button>Discard</button> <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
<!-- </template> <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
</template>
<template v-else> <template v-else>
<p <p class="readmode" :id="nodes.node_id">{{ nodes.node_text }}</p>
class="readmode" <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
:id="nodes.node_id" </template>
:inner-html.prop="nodes.node_text"
></p>
</template> -->
</form> </form>
</div> </div>
</template> </template>
...@@ -54,14 +52,11 @@ export default { ...@@ -54,14 +52,11 @@ export default {
watch: { watch: {
added: function () { added: function () {
setTimeout(this.loadData, 500) setTimeout(this.loadData, 500)
}, },
}, },
mounted() { mounted() {
//console.log('mounted')
setTimeout(this.loadData, 500) setTimeout(this.loadData, 500)
if (localStorage.nogg_name && localStorage.nogg_microcosm) { if (localStorage.nogg_name && localStorage.nogg_microcosm) {
var devicename = localStorage.nogg_name var devicename = localStorage.nogg_name
var microcosm = localStorage.nogg_microcosm var microcosm = localStorage.nogg_microcosm
...@@ -73,21 +68,12 @@ export default { ...@@ -73,21 +68,12 @@ export default {
}, },
methods: { methods: {
emptyData() {
if (this.myNodes.myNodes == 0) {
/// that
} else {
// this
}
},
loadData() { loadData() {
var nodesFiltered = this.myNodes.myNodes.filter( var nodesFiltered = this.myNodes.myNodes.filter(
(nodes) => nodes.node_deleted == false (nodes) => nodes.node_deleted == false
) )
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) {
...@@ -95,6 +81,20 @@ export default { ...@@ -95,6 +81,20 @@ export default {
var nodetext = e.target.value var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext }) this.$store.dispatch('editNode', { nodeid, nodetext })
}, },
discardNode(e) {
if (confirm('Confirm discard?')) {
this.$store.dispatch('discardNode', { e })
setTimeout(this.loadData, 500)
} else {
// nothing happens
}
},
toggleMode(e) {
this.$store.dispatch('toggleMode', { e })
setTimeout(this.loadData, 500)
},
}, },
} }
</script> </script>
......
...@@ -125,7 +125,6 @@ export const mutations = { ...@@ -125,7 +125,6 @@ export const mutations = {
{ {
_id: deviceName, _id: deviceName,
_rev: doc._rev, _rev: doc._rev,
_attachments: doc._attachments,
nodes: state.myNodes, nodes: state.myNodes,
}, },
]) ])
...@@ -141,6 +140,99 @@ export const mutations = { ...@@ -141,6 +140,99 @@ export const mutations = {
} }
}) })
}, },
DISCARD_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (e.e == state.myNodes[i].node_id) {
state.myNodes[i].node_deleted = true
}
}
pouchdb
.get(deviceName)
.then(function (doc) {
return pouchdb.bulkDocs([
{
_id: deviceName,
_rev: doc._rev,
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({ })
}
})
},
RESTORE_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (e.e == state.myNodes[i].node_id) {
state.myNodes[i].node_deleted = false
}
}
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 () {})
},
TOGGLE_MODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (
e.e == state.myNodes[i].node_id &&
state.myNodes[i].read_mode == false
) {
state.myNodes[i].read_mode = true
} else if (
e.e == state.myNodes[i].node_id &&
state.myNodes[i].read_mode == true
) {
state.myNodes[i].read_mode = false
}
}
pouchdb
.get(deviceName)
.then(function (doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: deviceName,
_rev: doc._rev,
nodes: state.myNodes,
},
])
})
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
})
})
.catch(function () {})
},
} }
export const actions = { export const actions = {
...@@ -156,6 +248,18 @@ export const actions = { ...@@ -156,6 +248,18 @@ export const actions = {
commit('EDIT_NODE', { nodeid, nodetext }) commit('EDIT_NODE', { nodeid, nodetext })
}, },
discardNode: ({ commit }, e) => {
commit('DISCARD_NODE', e)
},
restoreNode: ({ commit }, e) => {
commit('RESTORE_NODE', e)
},
toggleMode: ({ commit }, e) => {
commit('TOGGLE_MODE', e)
},
getMicrocosm(vuexContext) { getMicrocosm(vuexContext) {
deviceName = vuexContext.rootState.setup.deviceName deviceName = vuexContext.rootState.setup.deviceName
// microcosmName = vuexContext.rootState.setup.microcosmName // microcosmName = vuexContext.rootState.setup.microcosmName
......
...@@ -200,6 +200,10 @@ ...@@ -200,6 +200,10 @@
version "7.14.0" version "7.14.0"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
"@babel/helper-validator-identifier@^7.14.9":
version "7.14.9"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
"@babel/helper-validator-option@^7.12.17": "@babel/helper-validator-option@^7.12.17":
version "7.12.17" version "7.12.17"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz#d1fbf012e1a79b7eebbfdc6d270baaf8d9eb9831" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz#d1fbf012e1a79b7eebbfdc6d270baaf8d9eb9831"
...@@ -229,10 +233,14 @@ ...@@ -229,10 +233,14 @@
chalk "^2.0.0" chalk "^2.0.0"
js-tokens "^4.0.0" js-tokens "^4.0.0"
"@babel/parser@^7.12.0", "@babel/parser@^7.12.13", "@babel/parser@^7.13.9", "@babel/parser@^7.14.0", "@babel/parser@^7.7.0": "@babel/parser@^7.12.13", "@babel/parser@^7.14.0", "@babel/parser@^7.7.0":
version "7.14.1" version "7.14.1"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.1.tgz#1bd644b5db3f5797c4479d89ec1817fe02b84c47" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.1.tgz#1bd644b5db3f5797c4479d89ec1817fe02b84c47"
"@babel/parser@^7.15.0":
version "7.15.3"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12": "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
version "7.13.12" version "7.13.12"
resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a"
...@@ -805,13 +813,20 @@ ...@@ -805,13 +813,20 @@
debug "^4.1.0" debug "^4.1.0"
globals "^11.1.0" globals "^11.1.0"
"@babel/types@^7.0.0", "@babel/types@^7.12.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.14.1", "@babel/types@^7.4.4", "@babel/types@^7.7.0": "@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.14.1", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
version "7.14.1" version "7.14.1"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.1.tgz#095bd12f1c08ab63eff6e8f7745fa7c9cc15a9db" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.1.tgz#095bd12f1c08ab63eff6e8f7745fa7c9cc15a9db"