Componentised vue-strap pouchdb sync

Componentised vue-strap pouchdb couchdb sync

by Warwick Grigg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.0.3/vue-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/5.1.0/pouchdb.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/0.7.7/vue-router.min.js"></script>
<div id="app">

<template id="pouchdb-open">
  <div class="panel panel-default panel-body">
    <div class="form-group">
      <label for="dblocal">Local DB name</label>
      <input v-model="settings.db_local" placeholder="Local DB name" id = "dblocal" class="form-control">
    </div>
    <button @click="openlocdb">Open local DB</button>
  </div>

  <div class="panel panel-default panel-body">
    <div class="form-group">
      <label for="dburl">Remote DB URL</label>
      <input v-model="settings.db_url" placeholder="Remote DB URL" id = "dburl" class="form-control">
      <label for="dbusername">Remote DB username</label>
      <input v-model="settings.db_username" placeholder="Remote DB username" id = "dbusername" class="form-control">
      <label for="dbpassword">Remote DB password</label>
      <input v-model="settings.db_password" placeholder="Remote DB password" id = "dbpassword" class="form-control">
    </div>
    <button @click="openremdb">Open remote DB</button>
    or
    <button @click="opendbs">Open both DBs with sync</button>
  </div>
  <div class="panel panel-default panel-body">
    <div class="form-group">
      <label for="secret">Secret passphrase</label>
      <input v-model="secret" type="password" placeholder="secret passphrase" id = "secret" class="form-control">
    </div>
    <button @click="save">Save settings to browser</button>
    <button @click="load">Load settings from...

JavaScript

var hub = {
  state: { 	
    		db1: null,
      	dbs: null
  },
  setDb: function (db1, dbs) {
  	this.db1 = db1;
  	this.dbs = dbs;
  }
};

var vcDbSettings = Vue.extend({
  template: '#pouchdb-open',
  data: function() { return {
		settings: {
      db_local: 'testdb01',
      db_url: null,
      db_username: null,
   		db_password: null
    },
    secret: null,
  }},
  props: ['db1', 'dbs'],
  methods: {
  	load: function () {
  	 	for (var k in this.settings) {
      	 	this.settings[k]=CryptoJS.AES.decrypt(localStorage.getItem(k),
        	this.secret).toString(CryptoJS.enc.Latin1)
      }
  	},
  	save: function () {
      for (var k in this.settings) {
      	localStorage.setItem(k,CryptoJS.AES.encrypt(this[k], this.secret))
      }
    },
    openlocdbcore: function() {
  		this.db1 = new PouchDB(this.settings.db_local);
  	},
  	openremdbcore: function () {
   		var options = {};
    	options.auth = {};
   		options.auth.username = this.settings.db_username;
   		options.auth.password = this.settings.db_password;
    	this.dbs = new PouchDB(this.settings.db_url, options);
  	},
    openlocdb: function() {
    	this.openlocdbcore();
      this.$dispatch('ready');
		},
  	openremdb: function () {
    	this.openremdbcore();
      this.$dispatch('ready');
  	},
  	opendbs: function () {
    	var self = this;
    	this.openlocdbcore(); 
    	this.openremdbcore();
    	PouchDB.sync(this.db1, this.dbs, {live: true});
    	this.db1.changes({
  			since: 'now',
  			live: true
    	})
      .on('change', self.$dispatch.bind(self, 'change'));
	    this.$dispatch('ready');
		}
  }
});
Vue.component('pouchdb-open', vcDbSettings);

var vcDbGrid = Vue.extend({
  template: '#gen-grid',
  props: {
    data: Array,
    columns: Array,
    filterKey: String
  },
  data: function () {
    var sortOrders = {}
    this.columns.forEach(function (key) {
      sortOrders[key] = 1
    })
    return {
      sortKey: '',
      sortOrders: sortOrders
    }
  },
  methods: {
   ...