add pouch db demo

jatins · Aug 9, 2016 · 9493088 · 9493088
1 parent 4ac3cb1
commit 9493088
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 0 deletions.
diff --git a/pouchdb-demo/index.html b/pouchdb-demo/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>PouchDB Demo</title>
+	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
+	<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+	<input type="text" placeholder="Item to add" class="item">
+	<button class="add pure-button-primary pure-button">Add</button>
+	<hr>
+	<div id="list">
+
+	</div>
+
+	<div id="footer">
+		Open the page in different browser windows (of same browser), changes in one will reflect instantly in other.
+	</div>
+	<script src="http://cdn.jsdelivr.net/pouchdb/5.4.5/pouchdb.min.js"></script>
+	<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"   integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="   crossorigin="anonymous"></script>
+	<script src="script.js"></script>
+</body>
+</html>
diff --git a/pouchdb-demo/script.js b/pouchdb-demo/script.js
@@ -0,0 +1,103 @@
+var itemsdb = new PouchDB('Items')
+
+$(document).ready(function () {
+  var listDiv = $('#list')
+  var input = $('input.item')
+
+  function itemTemplate (id, content) {
+    return '<div id="' + id + '" class="list-item pure-g"><p class="pure-u-1-3">' + content + '</p> ' +
+      '<p class="delete pure-u-2-3" href="#" data-id="' + id + '"> Delete </p></div>'
+  }
+
+  // add a list of items to UI
+  function addAllItemsToUI (items) {
+    if (!items.length) {
+      listDiv.append('<p class="no-item"> No items yet. Add one. </p>')
+      return
+    }
+
+    items.forEach(function (item) {
+      addItemToUI(item.doc)
+    })
+  }
+
+  // adds an item to DB
+  function addItemToDb (content) {
+    itemsdb.put({
+      _id: new Date().valueOf().toString(),
+      content: content
+    }).then(console.log)
+      .catch(console.log)
+  }
+
+  // removes an item from db
+  function removeItemFromDB (id) {
+    itemsdb.get(id)
+      .then(function (doc) {
+        return itemsdb.remove(doc)
+      })
+      .then(console.log)
+      .catch(console.log)
+  }
+
+  // add single item to UI
+  function addItemToUI (item) {
+    listDiv.append(itemTemplate(item._id, item.content))
+    attachEventHandler()
+  }
+
+  $('button.add').on('click', function (e) {
+    var content = input.val()
+    addItemToDb(content)
+    input.val('')
+  })
+
+  function attachEventHandler () {
+    $('.delete').on('click', function (e) {
+      e.preventDefault()
+      var id = $(e.target).attr('data-id')
+      removeItemFromDB(id)
+    })
+  }
+
+  // remove an item from UI
+  function removeItemFromUI (id) {
+    var selector = '#' + id
+    var node = $(selector)
+    node.remove()
+  }
+
+  itemsdb.changes({
+    since: 'now',
+    live: true,
+    include_docs: true
+  }).on('change', function (change) {
+    // change.id contains the doc id, change.doc contains the doc
+    if (change.deleted) {
+      console.log('deleted from db')
+      removeItemFromUI(change.id)
+    } else {
+      $('.no-item').remove()
+      addItemToUI(change.doc)
+    }
+  }).on('error', function (err) {
+    console.log('ERROR', err)
+  })
+
+  // function to initialize application
+  function start () {
+    attachEventHandler()
+
+    // first time data load
+    itemsdb.allDocs({include_docs: true})
+      .then(function (items) {
+        console.log(items)
+        addAllItemsToUI(items.rows)
+      })
+      .catch(function (err) {
+        console.error('Error getting all items', err)
+      })
+  }
+
+  start()
+})
diff --git a/pouchdb-demo/style.css b/pouchdb-demo/style.css
@@ -0,0 +1,38 @@
+body{
+	font-family: 'Helvetica';
+	padding: 200px;
+}
+
+hr {
+	border: 1px solid rgba(0,0,0,0.1);
+}
+
+input {
+	height: 30px;
+	width: 200px;
+}
+
+#list {
+	margin-top: 40px;
+	height: 300px;
+}
+
+p.delete {
+	color: blue;
+	cursor: pointer;
+}
+
+input.item {
+	padding-left: 10px;
+	margin-bottom: 10px;
+	margin-right: 5px;
+}
+
+.no-item {
+	color: rgba(0,0,0,0.3);
+}
+
+#footer{
+	font-size: 12px;
+	color: gray;
+}