终于可以编辑书签，删除书签了

database/db.js

@@ -38,6 +38,72 @@ db.addBookmark = function(user_id, bookmark) {
     });
 };
 
+db.delBookmark = function(id){
+    var sql = "DELETE FROM `bookmarks` WHERE (`id`='"+ id +"')";
+    return new Promise(function(resolve, reject) {
+        client.query(sql, (err, result) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve(result.affectedRows);
+            }
+        });
+    });
+}
+
+db.updateBookmark = function(bookmark){
+    var sql = "UPDATE `bookmarks` SET `title`='"+ bookmark.title +"', `description`='"+ bookmark.description+"', `url`='"+ bookmark.url +"', `public`='"+ bookmark.public +"' WHERE (`id`='"+ bookmark.id +"')";
+    return new Promise(function(resolve, reject) {
+        client.query(sql, (err, result) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve(result.affectedRows);
+            }
+        });
+    });
+}
+
+db.getBookmark = function(id){
+    var sql ="SELECT * FROM `bookmarks` WHERE `id` = '"+ id +"'";
+    return new Promise(function(resolve, reject) {
+        client.query(sql, (err, result) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve(result[0]);
+            }
+        });
+    });
+}
+
+db.getBookmarkTags = function(bookmard_id){
+    var sql ="SELECT tag_id FROM `tags_bookmarks` WHERE `bookmark_id` = '"+ bookmard_id +"'";
+    return new Promise(function(resolve, reject) {
+        client.query(sql, (err, result) => {
+            if (err) {
+                reject(err);
+            } else {
+                var tags = result.map((item) => item.tag_id);
+                resolve(tags);
+            }
+        });
+    });
+}
+
+db.delBookmarkTags = function(bookmard_id) {
+    var sql = "DELETE FROM `tags_bookmarks` WHERE (`bookmark_id`='"+ bookmard_id +"')";
+    return new Promise(function(resolve, reject) {
+        client.query(sql, (err, result) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve(result.affectedRows);
+            }
+        });
+    });
+}
+
 db.addTagsBookmarks = function(tags, bookmard_id) {
     sql = "INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES";
     for (var i = 0; i < tags.length; i++) {

public/css/style.css

@@ -2,10 +2,40 @@ body {
     padding: 50px;
     font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
+.bookmark{
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    -o-text-overflow:ellipsis;
+    overflow: hidden;
+    color:#212121;
+    border:1px solid transparent;
+}
+
+.bookmarkNormalHover {
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    -o-text-overflow:ellipsis;
+    overflow: hidden;
+    color:#212121;
 
-.divHover {
     background:#F5F5F5;
     cursor:pointer;
+    border:1px solid transparent;
+}
+
+.bookmarkOperaterHover {
+    cursor:pointer;
+}
+
+.bookmarkEditHover {
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    -o-text-overflow:ellipsis;
+    overflow: hidden;
+    color:#212121;
+
+    cursor:move;
+    border:1px dashed #3388FF;
 }
 
 .img-fixed-size{
@@ -13,13 +43,7 @@ body {
     height:16px;
 }
 
-.js-navigate-bookmark{
-    white-space:nowrap;
-    text-overflow:ellipsis;
-    -o-text-overflow:ellipsis;
-    overflow: hidden;
-    color:#212121;
-}
+
 .wrap{
     white-space:nowrap;
     text-overflow:ellipsis;

public/scripts/controllers/bookmarks-controller.js

@@ -2,7 +2,8 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     console.log("Hello bookmarksCtr...", $stateParams);
     $scope.bookmarks = []; // 书签数据
     $scope.showSearch = false; // 书签数据
-    $scope.hoverItem = false;
+    $scope.bookmarkNormalHover = false;
+    $scope.bookmarkEditHover = false;
     $scope.showStyle = 'navigate'; // 显示风格'navigate', 'card', 'table'
     $scope.edit = false;
     semanticInit();
@@ -12,11 +13,38 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     }
 
     $scope.jumpToUrl = function(url, id) {
+        if(!$scope.edit){
             $window.open(url, '_blank');
             bookmarkService.clickBookmark({
                 id: id
             });
         }
+    }
+    $scope.toggleMode = function(){
+        console.log('toggleMode..........');
+        $scope.edit = !$scope.edit
+    };
+    $scope.delBookmark = function(bookmarkId){
+        var params = {
+            id:bookmarkId
+        }
+        bookmarkService.delBookmark(params).then(
+            function(data) {
+                console.log(data);
+                $("#"+bookmarkId).remove();
+            },
+            function(data) {
+                console.log(data);
+            }
+        );
+
+    }
+    $scope.editBookmark = function(bookmarkId){
+        pubSubService.publish('bookmarksCtr.editBookmark', {
+            'bookmarkId': bookmarkId
+        });
+    }
+
     getBookmarks(params);
     pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, params) {
         console.log('subscribe MenuCtr.bookmarks', params);

public/scripts/controllers/edit-controller.js

@@ -8,6 +8,7 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p
         $timeout(function() {
             $scope.urlError = $scope.url == '' && $('.ui.modal.js-add-bookmark').modal('is active');
         });
+        if ($scope.add) {
             $scope.title = "";
             if (/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/.test(newUrl)) {
                 var params = {
@@ -21,6 +22,7 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p
                     function(errorMsg) {}
                 );
             }
+        }
     });
 
     $scope.$watch('title', function(newValue, oldValue, scope) {
@@ -81,13 +83,14 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p
         $scope.titleError = $scope.title == '';
         $scope.tagsError = (selectedTags.length == 0 || selectedTags.length > maxSelections);
         var params = {
+            id: $scope.id,
             url: $scope.url,
             title: $scope.title,
             public: '1',
             tags: selectedTags,
             description: $scope.description
         }
-
+        if ($scope.add) {
             bookmarkService.addBookmark(params).then(
                 function(data) {
                     console.log(data);
@@ -104,10 +107,29 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p
                     console.log(errorMsg);
                 }
             );
+        } else {
+            console.log('updateBookmark...........', params)
+            bookmarkService.updateBookmark(params).then(
+                function(data) {
+                    console.log(data);
+                    $('.ui.modal.js-add-bookmark').modal('hide');
+                    $state.go('bookmarks', {
+                        foo: 'i love you',
+                        bar: 'hello world'
+                    });
+                    pubSubService.publish('EditCtr.inserBookmarsSuccess', {
+                        show: 'navigate'
+                    });
+                },
+                function(errorMsg) {
+                    console.log(errorMsg);
+                }
+            );
+        }
     }
 
     pubSubService.subscribe('MenuCtr.showAddBookmarkMoadl', $scope, function(event, params) {
-        console.log('subscribe MenuCtr.MenuCtr.showAddBookmarkMoadl', params);
+        console.log('subscribe MenuCtr.showAddBookmarkMoadl', params);
         $('.ui.modal.js-add-bookmark').modal({
             closable: false,
         }).modal('show');
@@ -120,6 +142,42 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p
         getTags(params);
     });
 
+    pubSubService.subscribe('bookmarksCtr.editBookmark', $scope, function(event, params) {
+        console.log('subscribe bookmarksCtr.editBookmark', params);
+        $('.ui.modal.js-add-bookmark').modal({
+            closable: false,
+        }).modal('show');
+        $('.ui.modal.js-add-bookmark .ui.dropdown').dropdown('clear');
+        $('.ui.modal.js-add-bookmark .ui.dropdown').addClass('loading');
+        bookmarkService.getBookmark(params).then(
+            function(data) {
+                var bookmark = data.bookmark;
+                $scope.add = false;
+
+                $scope.id = (bookmark && bookmark.id) || '';
+                $scope.url = (bookmark && bookmark.url) || '';
+                $scope.title = (bookmark && bookmark.title) || '';
+                $scope.description = (bookmark && bookmark.description) || '';
+                // $scope.newTags = bookmark && bookmark.url && '';
+                $scope.tags = data.tags;
+
+                $timeout(function() {
+                    data.bookmarkTags.forEach((tagId) => {
+                        $('.ui.fluid.search.dropdown').dropdown('set selected', tagId);
+                    });
+                });
+
+                $scope.public = '1';
+
+                console.log(data);
+                $('.ui.modal.js-add-bookmark .ui.dropdown').removeClass('loading');
+            },
+            function(errorMsg) {
+                console.log(errorMsg);
+            }
+        );
+    });
+
     function getTags(params) {
         bookmarkService.getTags(params).then(
             function(data) {
@@ -149,6 +207,8 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p
     }
 
     function init() {
+        $scope.add = true;
+        $scope.id = '';
         $scope.url = '';
         $scope.title = '';
         $scope.description = '';

public/scripts/services/bookmark-service.js

@@ -88,6 +88,20 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
                 });
             return def.promise;
         },
+        getBookmark: function(params) {
+            var def = $q.defer();
+
+            $http.get('/api/bookmark/', {
+                    params: params
+                })
+                .success(function(data) {
+                    def.resolve(data);
+                })
+                .error(function(data, status) {
+                    console.log('Error: ' + data, status);
+                });
+            return def.promise;
+        },
         addBookmark: function(params) {
             var def = $q.defer();
             $http.post('/api/addBookmark/', {
@@ -102,10 +116,36 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
                 });
             return def.promise;
         },
-        delBookmark: function() {
-
+        updateBookmark: function(params) {
+            console.log('service updateBookmark')
+            var def = $q.defer();
+            $http.post('/api/updateBookmark/', {
+                    params: params
+                })
+                .success(function(data) {
+                    def.resolve(data);
+                })
+                .error(function(data) {
+                    console.log('Error: ' + data);
+                    def.reject('Failed to get todos');
+                });
+            return def.promise;
         },
-        editBookmark: function() {
+        delBookmark: function(params) {
+            var def = $q.defer();
+            $http.delete('/api/delBookmark/', {
+                    params: params
+                })
+                .success(function(data) {
+                    def.resolve(data);
+                })
+                .error(function(data) {
+                    console.log('Error: ' + data);
+                    def.reject('delBookmark fail');
+                });
+            return def.promise;
+        },
+        editBookmark: function(params) {
 
         },
         /**

public/views/bookmarks.html

@@ -1,5 +1,5 @@
 <div class="ui segment" ng-if="showStyle === 'navigate'">
-    <div class="ui container" ng-repeat="tag in bookmarks">
+    <div class="ui container" ng-repeat="tag in bookmarks" ng-init="tagIndex=$index">
         <div class="ui grid">
             <div class=" row">
                 <div class="wrap" style="width:88px;color:#0aa770;text-align:left;margin-left:20px;">
@@ -9,37 +9,21 @@
                     <div class="ui grid container">
                         <div
                             class="two wide column js-navigate-bookmark"
-                            ng-class="{divHover:hoverItem}"
-                            ng-mouseover="hoverItem=true"
-                            ng-mouseleave="hoverItem=false"
+                            ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmarkEditHover:bookmarkEditHover, bookmark:(!bookmarkNormalHover && !bookmarkEditHover)}"
+                            ng-mouseover="edit ? (bookmarkEditHover=true) : (bookmarkNormalHover=true)"
+                            ng-mouseleave="edit ? (bookmarkEditHover=false) : (bookmarkNormalHover=false)"
                             ng-repeat="bookmark in tag.bookmarks"
                             ng-click="jumpToUrl(bookmark.url, bookmark.id)"
-                            title="{{ bookmark.title }}">
-                            <i class="remove circle icon" ng-if="edit"></i>
-                            <img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{ bookmark.url }}" style="width:16px;height:16px" ng-if="!edit">
+                            title="{{ bookmark.title }}"
+                            id="{{bookmark.id}}">
+                            <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark.id)">
+                            <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)">
+                            <img class="ui ui middle aligned tiny image" src="http://www.google.com/s2/favicons?domain={{ bookmark.url }}" style="width:16px;height:16px" ng-if="!edit">
                             <span>{{ bookmark.title}}</span>
-                            <i class="write icon" ng-if="edit"></i>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
-        <div class="ui divider"></div>
-    </div>
-</div>
-<div class="ui segment" ng-if="false">
-    <div class="ui raised" ng-repeat="tag in bookmarks">
-        <!-- <a class="ui orange ribbon label" style="margin-bottom:20px">{{ tag.name }}</a> <span></span> -->
-        <div class="ui grid container">
-            <div class="two wide column">
-                <i class="bookmark icon"></i>
-                <span>{{ tag.name }}
-                </span>
-                <span>{{ hoverItem }}</span>
-            </div>
-            <div class="two wide column js-navigate-bookmark" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url)">
-                <img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{ bookmark.url }}" style="width:16px;height:16px">
-                <span>{{ bookmark.title}}</span>
+                <div ng-if="tagIndex === 0" style="width:32px;height:32px;padding-right:10px;" ng-click="toggleMode()" title="{{edit ? '退出编辑模式' : '点我进入编辑模式'}}"><img class="ui ui middle aligned tiny image" src="./images/{{ edit ? 'back' : 'edit'}}.png"></div>
             </div>
         </div>
         <div class="ui divider"></div>

routes/api.js

@@ -8,46 +8,6 @@ var request = require('request');
 var iconv = require('iconv-lite');
 var db = require('../database/db.js');
 
-api.post('/getTitle', function(req, response) {
-    var params = req.body.params;
-    var url = params.url;
-
-    var options = {
-        url: url,
-        encoding: null,
-        headers: {
-            'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.65 Safari/537.36'
-        }
-    }
-    request(options, function(err, res, body) {
-        var title = '';
-        if (!err && response.statusCode == 200) {
-            var charset = "utf-8";
-            var arr = body.toString().match(/<meta([^>]*?)>/g);
-            if (arr) {
-                arr.forEach(function(val) {
-                    var match = val.match(/charset\s*=\s*(.+)\"/);
-                    if (match && match[1]) {
-                        if (match[1].substr(0, 1) == '"') match[1] = match[1].substr(1);
-                        charset = match[1].trim();
-                        return false;
-                    }
-                })
-            }
-            var html = iconv.decode(body, charset);
-            var $ = cheerio.load(html, {
-                decodeEntities: false
-            });
-            title = $("title").text();
-        }
-
-        console.log(title);
-        response.json({
-            title: title || '',
-        });
-    })
-})
-
 api.post('/logout', function(req, res) {
     var params = req.body.params;
     console.log('logout......', params);
@@ -110,6 +70,55 @@ api.get('/autoLogin', function(req, res) {
     }
 });
 
+api.delete('/delBookmark', function(req, res) {
+    var bookmarkId = req.query.id;
+    db.delBookmarkTags(bookmarkId)
+        .then(() => db.delBookmark(bookmarkId))
+        .then((affectedRows) => res.json({
+            result: affectedRows
+        }))
+        .catch((err) => console.log('delBookmark err', err));
+})
+
+api.post('/updateBookmark', function(req, res) {
+    var bookmark = req.body.params;
+    console.log('hello updateBookmark', JSON.stringify(bookmark));
+    var bookmark = req.body.params;
+    var user_id = '1';
+    var tags = bookmark.tags;
+    db.updateBookmark(bookmark) // 更新标签信息
+        .then((affectedRows) => db.delBookmarkTags(bookmark.id)) // 将之前所有的书签分类信息删掉
+        .then((affectedRows) => db.addTagsBookmarks(tags, bookmark.id)) // 将新的分类关联起来
+        .then(() => db.updateLastUseTags(user_id, tags)) // 更新最近使用的分类(这个有待考虑)
+        .then(() => res.json({})) // 运气不错
+        .catch((err) => console.log('updateBookmark err', err)); // oops!
+})
+
+api.get('/bookmark', function(req, res) {
+    var bookmarkId = req.query.bookmarkId;
+    var userId = '1';
+    var ret = {
+        bookmark: {},
+        bookmarkTags: [],
+        tags: [],
+    };
+
+    db.getBookmark(bookmarkId)
+        .then((bookmark) => {
+            ret.bookmark = bookmark;
+            return db.getBookmarkTags(bookmarkId);
+        })
+        .then((bookmarkTags) => {
+            ret.bookmarkTags = bookmarkTags;
+            return db.getTags(userId);
+        })
+        .then((tags) => {
+            ret.tags = tags;
+            res.json(ret);
+        })
+        .catch((err) => console.log('bookmark err', err));
+})
+
 api.get('/bookmarks', function(req, res) {
     console.log('hello bookmarks', JSON.stringify(req.query), req.session.username);
     if (!req.session.username) {
@@ -145,9 +154,8 @@ api.get('/bookmarks', function(req, res) {
                 if (result && result.length > 0) {
                     data.push(tag);
                 }
-                data.sort(function(a, b) {
-                    return a.click < b.click;
-                })
+                data.sort((a, b) => a.click < b.click)
+                    // console.log(JSON.stringify(data));
                 res.json(data);
             })
             .catch((err) => console.log('bookmarks navigate err', err));
@@ -198,11 +206,11 @@ api.get('/tags', function(req, res) {
 });
 
 api.post('/addBookmark', function(req, res) {
-    console.log('hello addBookmark', JSON.stringify(req.query), JSON.stringify(req.body));
+    console.log('hello addBookmark', JSON.stringify(req.body));
     var bookmark = req.body.params;
     var user_id = '1';
     var tags = bookmark.tags;
-    db.addBookmark(user_id, params) // 插入书签
+    db.addBookmark(user_id, bookmark) // 插入书签
         .then((bookmark_id) => db.addTagsBookmarks(tags, bookmark_id)) // 插入分类
         .then(() => db.updateLastUseTags(user_id, tags)) // 更新最新使用的分类
         .then(() => res.json({})) // 运气不错
@@ -234,6 +242,46 @@ api.post('/addTags', function(req, res) {
         .catch((err) => console.log('addTags err', err));
 });
 
+api.post('/getTitle', function(req, response) {
+    var params = req.body.params;
+    var url = params.url;
+
+    var options = {
+        url: url,
+        encoding: null,
+        headers: {
+            'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.65 Safari/537.36'
+        }
+    }
+    request(options, function(err, res, body) {
+        var title = '';
+        if (!err && response.statusCode == 200) {
+            var charset = "utf-8";
+            var arr = body.toString().match(/<meta([^>]*?)>/g);
+            if (arr) {
+                arr.forEach(function(val) {
+                    var match = val.match(/charset\s*=\s*(.+)\"/);
+                    if (match && match[1]) {
+                        if (match[1].substr(0, 1) == '"') match[1] = match[1].substr(1);
+                        charset = match[1].trim();
+                        return false;
+                    }
+                })
+            }
+            var html = iconv.decode(body, charset);
+            var $ = cheerio.load(html, {
+                decodeEntities: false
+            });
+            title = $("title").text();
+        }
+
+        console.log(title);
+        response.json({
+            title: title || '',
+        });
+    })
+})
+
 function md5(str) {
     return crypto
         .createHash('md5')