From 570cbca889072c3c1f2d97708b9efcf1baac549a Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 4 Jun 2020 18:20:51 +0100
Subject: [PATCH] updated
added readmode to state, added icon for iOS home screen.
---
app/src/components/NodesLayer.vue | 116 ++++++++++++++++++------------
app/src/store/index.js | 42 ++++++-----
app/src/views/Sandbox.vue | 2 +-
3 files changed, 94 insertions(+), 66 deletions(-)
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index cc367d5..ac547ba 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -1,23 +1,21 @@
<template>
<div ref="nodes" class="node">
- <div v-for="(value, index) in configPositions" v-bind:key="index">
+ <div v-for="(posvalue, index) in configPositions" v-bind:key="index">
<div v-if="toolmode == 'move'">
- <!-- make draggable false as we are panning around -->
<vue-draggable-resizable
class="innernode"
- v-if="nodeid == value.node_id"
- :w="value.width"
- :h="value.height"
- :x="value.x_pos"
- :y="value.y_pos"
- :z="value.z_index"
+ v-if="nodeid == posvalue.node_id"
+ :w="posvalue.width"
+ :h="posvalue.height"
+ :x="posvalue.x_pos"
+ :y="posvalue.y_pos"
+ :z="posvalue.z_index"
:draggable="false"
style="background-color: rgb(205, 234, 255);"
>
<form>
- <!-- <div v-if="readmode == false"> -->
- <div v-for="value in myNodes" v-bind:key="value.node_id">
- <div v-if="value.readmode == false">
+ <div v-if="posvalue.read_mode == false">
+ <div v-for="value in myNodes" v-bind:key="value.node_id">
<textarea
v-if="nodeid == value.node_id"
@focus="editTrue(true)"
@@ -31,11 +29,11 @@
placeholder="Idea goes here!"
></textarea>
</div>
- <!-- FIXME: What is this doing below now ? Looks old -->
- <div v-else>
- <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
- </div>
</div>
+ <div v-if="posvalue.read_mode == true">
+ <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+ </div>
+
<h3>Reactions</h3>
<div v-for="(emojis, index) in configEmoji" :key="index">
@@ -49,26 +47,38 @@
<BaseButton buttonClass="danger" @click="deleteFlag()"
>Delete</BaseButton
>
- <BaseButton
- class="read"
- buttonClass="action"
- @click="readFlag()"
- >{{ mode }}</BaseButton
- >
+ <div v-if="posvalue.read_mode == true">
+ <BaseButton
+ class="read"
+ buttonClass="action"
+ @click="readFlag()"
+ >Edit
+ </BaseButton>
+ </div>
+ <div v-else>
+ <BaseButton
+ class="read"
+ buttonClass="action"
+ @click="readFlag()"
+ >Read</BaseButton
+ >
+ </div>
</div>
</form>
</vue-draggable-resizable>
</div>
+ <!-- Same code as above when in any other mode other than move so you can drag nodes-->
+
<div v-else>
<vue-draggable-resizable
class="innernode"
- v-if="nodeid == value.node_id"
- :w="value.width"
- :h="value.height"
- :x="value.x_pos"
- :y="value.y_pos"
- :z="value.z_index"
+ v-if="nodeid == posvalue.node_id"
+ :w="posvalue.width"
+ :h="posvalue.height"
+ :x="posvalue.x_pos"
+ :y="posvalue.y_pos"
+ :z="posvalue.z_index"
@activated="onActivated"
@dragging="onDrag"
@resizing="onResize"
@@ -78,8 +88,8 @@
style="background-color: rgb(205, 234, 255);"
>
<form>
- <div v-for="value in myNodes" v-bind:key="value.node_id">
- <div v-if="value.readmode == false">
+ <div v-if="posvalue.read_mode == false">
+ <div v-for="value in myNodes" v-bind:key="value.node_id">
<textarea
v-if="nodeid == value.node_id"
@focus="editTrue(true)"
@@ -93,15 +103,11 @@
placeholder="Idea goes here!"
></textarea>
</div>
-
- <!-- </div> -->
- <!-- FIXME: What is this doing below now ? Looks old -->
- <div v-else>
- <p :id="nodeid" :inner-html.prop="nodetext | marked">
- <!-- {{ nodeid }} -->
- </p>
- </div>
</div>
+ <div v-if="posvalue.read_mode == true">
+ <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+ </div>
+
<h3>Reactions</h3>
<div v-for="(emojis, index) in configEmoji" :key="index">
@@ -115,12 +121,22 @@
<BaseButton buttonClass="danger" @click="deleteFlag()"
>Delete</BaseButton
>
- <BaseButton
- class="read"
- buttonClass="action"
- @click="readFlag()"
- >{{ mode }}</BaseButton
- >
+ <div v-if="posvalue.read_mode == true">
+ <BaseButton
+ class="read"
+ buttonClass="action"
+ @click="readFlag()"
+ >Edit
+ </BaseButton>
+ </div>
+ <div v-else>
+ <BaseButton
+ class="read"
+ buttonClass="action"
+ @click="readFlag()"
+ >Read</BaseButton
+ >
+ </div>
</div>
</form>
</vue-draggable-resizable>
@@ -143,14 +159,13 @@ export default {
nodewidth: Number,
nodeheight: Number,
deleted: Boolean,
- readmode: Boolean,
},
data() {
return {
pickupz: 99,
- // localreadmode: this.readmode,
- mode: 'Read',
+ localreadmode: false,
+ mode: '',
}
},
@@ -261,7 +276,14 @@ export default {
readFlag(e) {
e = this.nodeid
- if (readmode == true) {
+ var i
+ for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+ if (this.configPositions[i].node_id == this.nodeid) {
+ this.localreadmode = this.configPositions[i].read_mode
+ }
+ }
+
+ if (this.localreadmode == true) {
readmode = false
this.$store.dispatch('readFlag', { e, readmode })
this.mode = 'Read'
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 262211b..daf70c3 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -185,7 +185,6 @@ const store = new Vuex.Store({
content_type: 'sheet',
// NOTE: first node is hidden due to no position
deleted: true,
- readmode: false,
attachment_name: '',
},
],
@@ -325,7 +324,6 @@ const store = new Vuex.Store({
node_owner: state.myclient,
content_type: 'sheet',
deleted: false,
- readmode: false,
attachment_name: e,
})
}
@@ -363,6 +361,7 @@ const store = new Vuex.Store({
width: 200,
height: 275,
z_index: 1,
+ read_mode: false,
})
return pouchdb
.put({
@@ -443,27 +442,29 @@ const store = new Vuex.Store({
READ_FLAG(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].readmode = e.readmode
+ console.log(e.e)
+ for (i = 0; i < Object.keys(state.configPositions).length; i++) {
+ if (e.e == state.configPositions[i].node_id) {
+ state.configPositions[i].read_mode = e.readmode
}
}
+
pouchdb
- .get(state.myclient)
+ .get(state.global_pos_name)
.then(function (doc) {
+ // console.log(doc)
// put the store into pouchdb
return pouchdb.bulkDocs([
{
- _id: state.myclient,
+ _id: state.global_pos_name,
_rev: doc._rev,
- _attachments: doc._attachments,
- nodes: state.myNodes,
+ positions: state.configPositions,
},
])
})
.then(function () {
- return pouchdb.get(state.myclient).then(function (doc) {
- state.myNodes = doc.nodes
+ return pouchdb.get(state.global_pos_name).then(function (doc) {
+ state.configPositions = doc.positions
})
})
.catch(function (err) {
@@ -472,6 +473,7 @@ const store = new Vuex.Store({
}
})
},
+
GET_EMOJI(state) {
console.log
pouchdb
@@ -528,7 +530,12 @@ const store = new Vuex.Store({
store.commit('GET_EMOJI')
// turn on two-way, continuous, retriable sync
pouchdb
- .sync(remote, { live: true, retry: true, attachments: true })
+ .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')
@@ -550,7 +557,6 @@ const store = new Vuex.Store({
})
.on('complete', function () {
// handle complete
- //console.log('complete')
})
.on('error', function (err) {
console.log(err)
@@ -567,7 +573,10 @@ const store = new Vuex.Store({
movePos: ({ commit }, nodeid, xpos, ypos, width, height, zindex) => {
commit('MOVE_POS', nodeid, xpos, ypos, width, height, zindex)
},
-
+ readFlag: ({ commit }, e) => {
+ // var text = e.target.value
+ commit('READ_FLAG', e)
+ },
addNode: ({ commit }, e) => {
commit('ADD_NODE', e)
},
@@ -597,10 +606,7 @@ const store = new Vuex.Store({
// var text = e.target.value
commit('DELETE_FLAG', e)
},
- readFlag: ({ commit }, e) => {
- // var text = e.target.value
- commit('READ_FLAG', e)
- },
+
addEmoji: ({ commit }, { nodeid, emojitext }) => {
commit('ADD_EMOJI', {
nodeid,
diff --git a/app/src/views/Sandbox.vue b/app/src/views/Sandbox.vue
index 00db019..67c9a5c 100644
--- a/app/src/views/Sandbox.vue
+++ b/app/src/views/Sandbox.vue
@@ -24,7 +24,7 @@
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
- v-bind:readmode="value.readmode"
+
/>
</PanZoomContainer>
<!-- <SelectionLayer
--
GitLab