Saving tags

app/css/app.css

@@ -180,7 +180,7 @@ float:right;
 }
 
 
-a .tag{
+a.tag{
   float:left;
   margin-right:8px;
   padding:2px 7px 3px 19px;
@@ -233,5 +233,5 @@ a .tag{
     from(transparent),
     to(rgba(0,0,0,1))
   )}
-a .tag:hover {
+a.tag:hover {
   opacity:.8}

app/js/app.js

@@ -30,7 +30,8 @@ var Keeper = (function () {
                 console.log('Clicked list. ' + this.id);
                 getRecipe(this.id);
             });
-        }, displayPage = function (obj) {
+        },
+        displayPage = function (obj) {
         var $bodyContents = $('#bodyContents');
 
         if (obj.reduced.length > 0) {
@@ -40,6 +41,7 @@ var Keeper = (function () {
               _rev: obj._rev,
               title: obj.title,
               reduced: obj.reduced,
+                tags:obj.tags,
               url:obj.url
             }
           };
@@ -61,6 +63,15 @@ var Keeper = (function () {
 
           });
 
+            $('#tagSave').on('click', function () {
+                self.trigger('tagsave',redoData);
+
+            });
+
+            $('#tageditmode').on('click', function() {
+                self.trigger('startTags');
+            })
+
         }
         }, getRecipe = function (id) {
             console.log('get recipe');
@@ -122,7 +133,64 @@ var Keeper = (function () {
                     console.log(type);
                 }
             });
-        }, addNew = function (newUrl) {
+        },
+        saveTags = function(d) {
+            function parse (input) {
+                return input
+                    .trim()
+                    .split(/\s*,\s*/)
+                    .map(function (col) {
+                        return col.trim();
+                    })
+                    .filter(function (col) {
+                        return col && col.length;
+                    });
+            }
+
+
+            var data = d;
+            var url='/tags';
+            var tags = {}, tagItems = $('#edittags').val();
+            tagItems = parse(tagItems);
+            tags.list = tagItems;
+            tags.solid = tagItems.join(', ');
+
+            console.log('tags:' + JSON.stringify(tags));
+           data.tags = tags;
+
+            console.log(data);
+
+            $.ajax({
+                type: 'POST',
+                url: url,
+                data: d,
+                dataType: 'json',
+
+                timeout: 10000,
+
+                //contentType: ('application/json'),
+                headers: {
+                    'Access-Control-Allow-Origin': '*',
+                    'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
+                    'Access-Control-Allow-Headers': 'Content-Type'
+
+                },
+                success: function () {
+                    //  console.log(data);
+                    // displayList(data);
+                    $('#visualTabs').toggle();
+                    $('#tagForm').toggle();
+                },
+                error: function (xhr, type) {
+                    console.log('ajax error');
+                    console.log(xhr);
+                    console.log(type);
+                }
+            });
+        }
+
+
+        ,addNew = function (newUrl) {
             var url = '/add';
 
             var data = {url: JSON.stringify(newUrl)};
@@ -209,6 +277,15 @@ var Keeper = (function () {
   this.bind('redo', function (data) {
     redo(data);
   });
+
+    this.bind('tagsave', function (data) {
+        saveTags(data);
+    });
+    this.bind('startTags', function (data) {
+        $('#visualTabs').toggle();
+        $('#tagForm').toggle();
+    });
+
     start();
 });
 

app/partials/view.ejs

@@ -1,12 +1,30 @@
 <div class="mui-container">
     <div class="mui-panel">
         <div class="mui--text-headline"><%= data.title %></div>
-        <div style="float:right">
-            <span class="tags">
-                <a class="tag" href="#?tag">Tag</a> <a class="tag" href="#?node">Node</a>
+        <div >
+            <span id='tags' class="mui--text-left">
+                <span id="visualTabs">
+                    <span class="lnr lnr-tag"></span>
+                    <%  for(var i=0; i<data.tags.list.length; i++) {%>
+                    <a class="mui--text-dark mui--text-button" href="#?<%=data.tags.list[i]%>"><%=data.tags.list[i]%></a>
+                    <% } %>
+                        <span class="lnr lnr-pencil" id="tageditmode"></span>
+                </span>
+                <span id="tagForm" style="display:none;">
+                    <span class="mui-form--inline">
+                        <span class="mui-textfield">
+                            <input type="text" id="edittags" name="edittags" value="<%=data.tags.solid%>">
+                        </span>
+
+                        <button class="mui-button" id="tagSave">Save</button>
+                    </span>
+                </span>
             </span>
-            <span id="redo" class="mui--text-accent mui--text-button" style="cursor:pointer;">Redo <span class="lnr lnr-redo"></span></span>
+            <span id="othercontrols" class="mui--pull-right">
+                 <span id="redo" class="mui--text-accent mui--text-button" style="cursor:pointer;">Redo <span class="lnr lnr-redo"></span></span>
             <span class="mui--divider-left">&nbsp;<%= link_to('Link', data.url) %>&nbsp;<span class="lnr lnr-link"></span> </span>
+            </span>
+
         </div>
 
     </div>

server/keeper.js

@@ -87,6 +87,8 @@ function updateBookmark(obj, _id, _rev) {
     if (err) {
       logger.error('Error updating into couch');
       return;
+    } else {
+      logger.info('I think we updated ok...');
     }
   });
   logger.debug('Update done..');
@@ -289,6 +291,8 @@ router.get('/entry/:id', function(req, res) {
       outJSON.title = body.title;
       outJSON.reduced = body.reduced;
       outJSON.url = body.url;
+      outJSON.tags = body.tags || {solid:'',list:[]};
+
       //logger.debug(util.inspect(body));
       res.writeHead(200, {"ContentType": "application/json"});
       res.end(JSON.stringify(outJSON));
@@ -319,6 +323,40 @@ router.post('/add', function(req, res) {
 
 });
 
+router.post('/tags', function(req,res) {
+  var t = req.body;
+  console.log(t);
+
+  logger.info('regetting:' + req.body._id);
+
+  dbCouch.get(req.body._id, function(err, body) {
+    if (!err) {
+
+      var obj = {};
+
+      obj.url = body.url;
+      obj.html = body.html;
+      obj.reduced = body.reduced;
+      obj.title = body.title;
+      obj.tags = req.body.tags;
+
+
+      logger.debug(util.inspect(obj));
+
+      logger.info('Updating...');
+      busEmitter.emit("updateBookmarkData", obj, body._id, body._rev);
+    }
+    else {
+      res.writeHead(500, {"ContentType": "application/json"});
+      res.end(JSON.stringify({}));
+    }
+  });
+
+
+
+});
+
+
 router.post('/redo', function(req, res) {
   logger.debug('redoing entry..');