Commit 448a5d03 authored by Adam Procter's avatar Adam Procter
Browse files

emoji "voting" now working

parent 82f1f1d9
# 0.2.5
_10th Septemeber 2021_
## Added
- various formatting buttons to format your node text with markdown
- emojis "voting" is now working on other nodes
# 0.2.4
_6th Septemeber 2021_
......
{
"name": "nodenogg.in",
"version": "0.2.4",
"version": "0.2.5",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
......
......@@ -12,7 +12,18 @@
:id="nodes.node_id"
v-html="marked(nodes.node_text)"
></p>
<button @click="openEmoji">
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in allEmoji.allEmoji"
:key="index"
>
<p v-if="nodes.node_id == emojis.node_id">
{{ emojis.emoji_unicode }}
</p>
</div>
</div>
<button @click="openEmoji(nodes.node_id)">
<svg
height="24"
viewBox="0 0 24 24"
......@@ -26,9 +37,9 @@
</svg>
</button>
<VuemojiPicker
v-show="showEmoji"
v-if="showEmoji === nodes.node_id"
class="emojipicker"
@emojiClick="($event) => handleEmojiClick($event, nodes.node_id)"
@emojiClick="($event) => handleEmojiClick(nodes.node_id, $event)"
:pickerStyle="{}"
/>
</div>
......@@ -52,7 +63,7 @@ export default {
data: function () {
return {
showEmoji: false,
showEmoji: String,
}
},
......@@ -63,13 +74,16 @@ export default {
computed: {
...mapState({
otherNodes: (state) => state.otherNodes,
configEmoji: (state) => state.configEmoji,
allEmoji: (state) => state.allEmoji,
}),
},
mounted() {
this.$store.dispatch('getOthernodes')
setTimeout(this.loadData, 500)
// this is to get the last letter typed if no space
// this also loads in new Emoji
// May need to EDIT
setInterval(this.loadData, 5000)
},
......@@ -77,17 +91,34 @@ export default {
getNodeid(nodeid) {
this.nodeid = nodeid
},
handleEmojiClick(detail, nodeid) {
console.log(detail)
handleEmojiClick(nodeid, detail) {
console.log(nodeid)
var unicode = detail.emoji.unicode
var annotation = detail.emoji.annotation
var skinTone = detail.skinTone
var emoticon = detail.emoji.emoticon
this.$store.dispatch('addEmoji', {
nodeid,
unicode,
annotation,
skinTone,
emoticon,
})
},
openEmoji() {
this.showEmoji = !this.showEmoji
openEmoji(nodeid) {
if (this.showEmoji == nodeid) {
this.showEmoji = null
} else {
this.showEmoji = nodeid
}
},
loadData() {
this.$store.dispatch('setOthernodes')
this.$store.dispatch('getEmoji')
},
marked,
},
......@@ -103,4 +134,11 @@ button {
background: none;
border: none;
}
.allemoji {
font-size: 1.5em;
padding: 0em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));
}
</style>
export const state = {}
var pouchdb
export const mutations = {}
export const state = {
docName: 'emojis',
allEmoji: [],
}
export const actions = {}
export const mutations = {
GET_EMOJI(state) {
pouchdb
.get(state.docName)
.then(function (doc) {
state.allEmoji = doc.emojis
})
.catch(function (err) {
if (err.status == 404) {
return pouchdb.put({
_id: state.docName,
emojis: [],
})
}
})
},
ADD_EMOJI(state, e) {
var uniqueid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
pouchdb.get(state.docName).then(function (doc) {
doc.emojis.push({
emoji_id: uniqueid,
node_id: e.nodeid,
emoji_unicode: e.unicode,
emoji_annotation: e.annotation,
emoji_skintone: e.skinTone,
emoji_emoticon: e.emoticon,
})
return pouchdb
.put({
_id: state.docName,
_rev: doc._rev,
emojis: doc.emojis,
})
.catch(function () {})
})
},
}
export const actions = {
getEmoji: ({ commit }) => {
commit('GET_EMOJI')
},
addEmoji: (
{ commit },
{ nodeid, unicode, annotation, skinTone, emoticon }
) => {
commit('ADD_EMOJI', {
nodeid,
unicode,
annotation,
skinTone,
emoticon,
})
},
getMicrocosm(vuexContext) {
pouchdb = vuexContext.rootState.setup.pouchdb
},
}
export const getters = {}
var pouchdb
var deviceName
var docName
export const state = {
allNodes: [],
......@@ -27,7 +28,10 @@ export const mutations = {
var j
for (i = 0; i < Object.keys(state.allNodes).length; i++) {
if (state.allNodes[i].id != deviceName) {
if (
state.allNodes[i].id != deviceName &&
state.allNodes[i].id != docName
) {
for (j = 0; j < Object.keys(state.allNodes[i].doc.nodes).length; j++) {
const newNode = {
node_id: state.allNodes[i].doc.nodes[j].node_id,
......@@ -55,6 +59,7 @@ export const actions = {
getMicrocosm(vuexContext) {
deviceName = vuexContext.rootState.setup.deviceName
pouchdb = vuexContext.rootState.setup.pouchdb
docName = vuexContext.rootState.allEmoji.docName
},
}
......
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