Skip to content
Snippets Groups Projects
index.js 12.43 KiB
import Vue from 'vue'
import Vuex from 'vuex'
import PouchDB from 'pouchdb'
PouchDB.plugin(require('pouchdb-find'))
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Vue.use(Vuex)
Vue.component('vue-draggable-resizable', VueDraggableResizable)
var myclient = 'firstvisit'

if (localStorage.getItem('mylastMicrocosm') == null) {
  var microcosm = 'firstvisit'
} else {
  microcosm = localStorage.getItem('mylastMicrocosm')
}

if (localStorage.getItem('myNNClient') == null) {
  myclient = 'firstvisit'
} else {
  myclient = localStorage.getItem('myNNClient')
}

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 +
  '/'

const store = new Vuex.Store({
  state: {
    version: process.env.VUE_APP_VERSION,
    localnodeid: '',
    global_pos_name: 'positions',
    global_con_name: 'connections',
    global_emoji_name: 'emojis',
    microcosm: '',
    myclient: myclient,
    activeNode: {},
    // this will be objects containing arrays of all the handles / connections and nodes
    configConnect: {
      x: -25,
      y: -25,
      height: 50,
      width: 50,
      fill: 'rgb(200, 0, 0)'
    },
    configHandle: {
      x: 25,
      y: 25,
      height: 10,
      width: 10,
      fill: 'black'
    },
    allNodes: [],
    myNodes: [
      // { nodeid: 1, nodetext: 'node 1' },
    ],
    otherNodes: [
      //{}
    ],
    configPositions: [
      //{}
    ],
    configConnections: [
      //{}
    ],
    configEmoji: [
      //{}
    ]
  },
  mutations: {
    CREATE_MICROCOSM(state, doc) {
      pouchdb.close().then(function() {
        microcosm = doc
        pouchdb = new PouchDB(microcosm)
        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')
      })
    },

    GET_ALL_NODES(state) {
      pouchdb
        .allDocs({
          include_docs: true,
          attachments: true
        })
        .then(function(doc) {
          state.microcosm = microcosm
          state.allNodes = doc.rows
          store.commit('SET_OTHER_NODES')
        })
        .catch(function(err) {
          console.log(err)
        })
    },

    SET_OTHER_NODES(state) {
      state.otherNodes = []
      var i
      var j
      for (i = 0; i < Object.keys(state.allNodes).length; i++) {
        if (
          state.allNodes[i].id != state.myclient &&
          state.allNodes[i].id != state.global_pos_name &&
          state.allNodes[i].id != state.global_emoji_name &&
          state.allNodes[i].id != state.global_con_name
        ) {
          for (
            j = 0;
            j < Object.keys(state.allNodes[i].doc.nodes).length;
            j++
          ) {
            const newNode = {
              nodeid: state.allNodes[i].doc.nodes[j].nodeid,
              nodetext: state.allNodes[i].doc.nodes[j].nodetext
            }

            state.otherNodes.push(newNode)
          }
        }
      }
      //console.log(state.otherNodes)
    },

    SET_CLIENT(state, doc) {
      state.myclient = doc
      store.commit('GET_MY_NODES')
    },

    GET_MY_NODES(state) {
      pouchdb
        .get(state.myclient)
        .then(function(doc) {
          state.myNodes = doc.nodes
        })
        .catch(function(err) {
          if (err.status == 404) {
            var uniqueid =
              Math.random()
                .toString(36)
                .substring(2, 15) +
              Math.random()
                .toString(36)
                .substring(2, 15)
            return pouchdb.put({
              _id: state.myclient,
              _attachments: {},
              nodes: [
                {
                  // FIXME: these values are here as GET_ALL_NODES cant hunt a blank
                  // this shouldnt need to be here

                  nodeid: uniqueid,
                  nodetext: 'Ignore this node' + state.myclient,
                  nodeowner: state.myclient,
                  content_type: 'sheet',
                  // TEMP: this hides the first node card as its effectivly auto deleted
                  deleted: true,
                  attachment_name: ''
                }
              ]
            })
          }
        })
    },

    GET_POSITIONS(state) {
      pouchdb
        .get(state.global_pos_name)
        .then(function(doc) {
          state.configPositions = doc.positions
        })
        .catch(function(err) {
          console.log(err)
          if (err.status == 404) {
            return pouchdb.put({
              _id: state.global_pos_name,
              positions: []
            })
          }
        })
    },

    MOVE_POS(state, e) {
      var i
      for (i = 0; i < Object.keys(state.configPositions).length; i++) {
        if (e.localnodeid == state.configPositions[i].nodeid) {
          state.configPositions[i].xpos = e.x
          state.configPositions[i].ypos = e.y
          state.configPositions[i].width = e.width
          state.configPositions[i].height = e.height
        }
      }

      pouchdb
        .get(state.global_pos_name)
        .then(function(doc) {
          //  console.log(doc)
          // put the store into pouchdb
          return pouchdb.bulkDocs([
            {
              _id: state.global_pos_name,
              _rev: doc._rev,
              positions: state.configPositions
            }
          ])
        })
        .then(function() {
          return pouchdb.get(state.global_pos_name).then(function(doc) {
            state.configPositions = doc.positions
          })
        })
        .catch(function(err) {
          if (err.status == 404) {
            // pouchdb.put({  })
          }
        })
    },

    ADD_NODE(state, e) {
      var uniqueid =
        Math.random()
          .toString(36)
          .substring(2, 15) +
        Math.random()
          .toString(36)
          .substring(2, 15)
      state.localnodeid = uniqueid

      pouchdb.get(state.myclient).then(function(doc) {
        if (e == undefined) {
          doc.nodes.push({
            nodeid: uniqueid,
            nodetext: '',
            nodeowner: state.myclient,
            content_type: 'sheet',
            deleted: false,
            attachment_name: e
          })
        }

        return pouchdb
          .put({
            _id: state.myclient,
            _rev: doc._rev,
            _attachments: doc._attachments,
            nodes: doc.nodes
          })
          .then(function() {
            return pouchdb.get(state.myclient).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
                //  content_type: state.notes[end].content_type
              }
              state.activeNode = newNode
            })
          })
          .catch(function(err) {
            if (err.status == 404) {
              // pouchdb.put({  })
            }
          })
      })
      pouchdb.get(state.global_pos_name).then(function(doc) {
        doc.positions.push({
          nodeid: uniqueid,
          xpos: 50,
          ypos: 50,
          width: 200,
          height: 250
        })
        return pouchdb
          .put({
            _id: state.global_pos_name,
            _rev: doc._rev,
            positions: doc.positions
          })
          .catch(function(err) {
            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].nodeid) {
          state.myNodes[i].nodetext = e.nodetext
        }
      }
      pouchdb
        .get(state.myclient)
        .then(function(doc) {
          // put the store into pouchdb

          return pouchdb.bulkDocs([
            {
              _id: state.myclient,
              _rev: doc._rev,
              _attachments: doc._attachments,
              nodes: state.myNodes
            }
          ])
        })
        .then(function() {
          return pouchdb.get(state.myclient).then(function(doc) {
            state.myNodes = doc.nodes
          })
        })
        .catch(function(err) {
          if (err.status == 404) {
            // pouchdb.put({  })
          }
        })
    },

    DELETE_FLAG(state, e) {
      var i
      for (i = 0; i < Object.keys(state.myNodes).length; i++) {
        if (e.e == state.myNodes[i].nodeid) {
          state.myNodes[i].deleted = true
        }
      }
      pouchdb
        .get(state.myclient)
        .then(function(doc) {
          // put the store into pouchdb
          return pouchdb.bulkDocs([
            {
              _id: state.myclient,
              _rev: doc._rev,
              _attachments: doc._attachments,
              nodes: state.myNodes
            }
          ])
        })
        .then(function() {
          return pouchdb.get(state.myclient).then(function(doc) {
            state.myNodes = doc.nodes
          })
        })
        .catch(function(err) {
          if (err.status == 404) {
            // pouchdb.put({  })
          }
        })
    },
    GET_EMOJI(state) {
      console.log
      pouchdb
        .get(state.global_emoji_name)
        .then(function(doc) {
          state.configEmoji = doc.emojis
        })
        .catch(function(err) {
          console.log(err)
          if (err.status == 404) {
            return pouchdb.put({
              _id: state.global_emoji_name,
              emojis: []
            })
          }
        })
    },
    ADD_EMOJI(state, e) {
      var uniqueid =
        Math.random()
          .toString(36)
          .substring(2, 15) +
        Math.random()
          .toString(36)
          .substring(2, 15)
      pouchdb.get(state.global_emoji_name).then(function(doc) {
        doc.emojis.push({
          id: uniqueid,
          docid: e.docid,
          emojitext: e.emojitext
        })
        return pouchdb
          .put({
            _id: state.global_emoji_name,
            _rev: doc._rev,
            emojis: doc.emojis
          })
          .catch(function(err) {
            console.log(err)
          })
      })
    }
  },

  actions: {
    syncDB: () => {
      pouchdb.replicate.from(remote).on('complete', function() {
        store.commit('GET_ALL_NODES')
        store.commit('GET_MY_NODES')
        store.commit('GET_POSITIONS')
        store.commit('GET_EMOJI')
        // turn on two-way, continuous, retriable sync
        pouchdb
          .sync(remote, { live: true, retry: true, attachments: true })
          .on('change', function() {
            // pop info into function to find out more
            store.commit('GET_ALL_NODES')
            store.commit('GET_MY_NODES')
            store.commit('GET_POSITIONS')
            store.commit('GET_EMOJI')
          })
          .on('paused', function() {
            // replication paused (e.g. replication up to date, user went offline)
            // console.log('replication paused')
          })
          .on('active', function() {
            // replicate resumed (e.g. new changes replicating, user went back online)
            //console.log('back active')
          })
          .on('denied', function() {
            // a document failed to replicate (e.g. due to permissions)
          })
          .on('complete', function() {
            // handle complete
            //console.log('complete')
          })
          .on('error', function(err) {
            console.log(err)
          })
      })
    },
    createMicrocosm: ({ commit }, e) => {
      commit('CREATE_MICROCOSM', e)
    },
    setClient: ({ commit }, e) => {
      commit('SET_CLIENT', e)
    },

    movePos: ({ commit }, nodeid, xpos, ypos, width, height) => {
      commit('MOVE_POS', nodeid, xpos, ypos, width, height)
    },

    addNode: ({ commit }, e) => {
      commit('ADD_NODE', e)
    },
    editNode: ({ commit }, { nodeid, nodetext }) => {
      commit('EDIT_NODE', { nodeid, nodetext })
    },
    deleteFlag: ({ commit }, e) => {
      // var text = e.target.value
      commit('DELETE_FLAG', e)
    },
    addEmoji: ({ commit }, { docid, emojitext }) => {
      commit('ADD_EMOJI', {
        docid,
        emojitext
      })
    }
  },
  modules: {}
})

export default store
store.dispatch('syncDB')