From eb0322f5097dacee44e24a70b0832d2c41d9192a Mon Sep 17 00:00:00 2001 From: luchenqun Date: Fri, 11 Nov 2016 16:53:03 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=88=E4=BA=8E=E5=8F=AF=E4=BB=A5=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E4=B9=A6=E7=AD=BE=EF=BC=8C=E5=88=A0=E9=99=A4=E4=B9=A6?= =?UTF-8?q?=E7=AD=BE=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- database/db.js | 66 +++++++++ public/css/style.css | 40 ++++- public/images/back.png | Bin 0 -> 536 bytes public/images/delete-hover.png | Bin 0 -> 425 bytes public/images/delete.png | Bin 0 -> 345 bytes public/images/edit-bookmark-hover.png | Bin 0 -> 427 bytes public/images/edit-bookmark.png | Bin 0 -> 371 bytes public/images/edit.png | Bin 0 -> 389 bytes .../controllers/bookmarks-controller.js | 36 ++++- public/scripts/controllers/edit-controller.js | 118 +++++++++++---- public/scripts/services/bookmark-service.js | 46 +++++- public/views/bookmarks.html | 36 ++--- routes/api.js | 138 ++++++++++++------ 13 files changed, 365 insertions(+), 115 deletions(-) create mode 100644 public/images/back.png create mode 100644 public/images/delete-hover.png create mode 100644 public/images/delete.png create mode 100644 public/images/edit-bookmark-hover.png create mode 100644 public/images/edit-bookmark.png create mode 100644 public/images/edit.png diff --git a/database/db.js b/database/db.js index c224f47..79a5b40 100644 --- a/database/db.js +++ b/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++) { diff --git a/public/css/style.css b/public/css/style.css index 1c6c1ff..ec83843 100644 --- a/public/css/style.css +++ b/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; diff --git a/public/images/back.png b/public/images/back.png new file mode 100644 index 0000000000000000000000000000000000000000..3a268365bb0113f891639c015a1662f71d43f038 GIT binary patch literal 536 zcmV+z0_XjSP)0005sNklA-w5Z_VcA?Y?{0#>>uRGGlhn zez|+@kCDpPwWKpiFOr_iWmZp)3dFW0JxIE2&dwwq7w9C9c%cCLkaQR+4hjVbK!C+- zFesjiCu;)%Hwe_7q;bYG{|ZG^o|+8H`S?@PjifJ0^BRUv8GTREYs=7<`+x#++I)zj zdv!sj4DA+gBKIa~(!iQD+E5spCtJrNdiPBPv-&X<*@ZXOy@0!t^qsm0D664s!s5N# zRC@x7f>^apIOr)gJn7N`3hFI~Q0=WG!IEu&qSMpmhXli8zmrBVI%R-A9@GwlLvKHr zKh8c3Pfa;;2-Vz5R-Pc(RXmBlp8Hr0% za1q=FJ}3VJkmCS=b?m?^&4JcPt_8R#x|+0c1eWm$rr|wT8U5+uTLYPZxYcJOul)|;TbFYagc)EUo=dzM0;~a?ngkX- z8a1o{1bEui(03y&m2fOLcL0yXvp#6ep@d9a-Esj0kAcsAbDI%W@W$39`R(hIc+jp? z0F?uk1C;|u?!Z{;ZiG*r)pRO$BD@o*CsQ$i*`mjGG8K#9Bk+0l=f_A*)M+;Xu~Opd zUsb`noho9eg!K5_s#rbAZUj~3Ugf>*JN?tRhE7&3SQx-k)OvWX1J)5OCsY96DaceX T@k+2x00000NkvXXu0mjfO53|G literal 0 HcmV?d00001 diff --git a/public/images/delete.png b/public/images/delete.png new file mode 100644 index 0000000000000000000000000000000000000000..491131bf39a52dbbf51bbc44525f762a6a9f6091 GIT binary patch literal 345 zcmV-f0jBdM-GCl&EL&PDfj!U(Bp(CoUl9l?a0j|E6&L{RvVW5kcLuhA z%Ja60N+21BUxK^i8(?H5@Q4JiG>5D-CIu=d5K(~qRG~I(M7V^KKX-))sHJuV=hb%g zfK-JTRsu_42B@_J+{!N3%DZTqf`02pB{0tjxQVFbP9?V|f>TeGL?9`U6i5pEw*q>M zuHIC0qxb}9&mYB_j?R#}QG5ZK-#kV-`)WjGtpu*+e}BTsbwVyU^cX2lV6ta@qd|}l rlnwjn1uX=OxVG>z3fM9lqZ5HA*570yb|%Cd00000NkvXXu0mjfO|^y0 literal 0 HcmV?d00001 diff --git a/public/images/edit-bookmark-hover.png b/public/images/edit-bookmark-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..e0cead7ed4933982fe6a4fe111f95d8f5276e837 GIT binary patch literal 427 zcmV;c0aX5pP))NAsygOk_KX2Leha<09r3E^uc7SGbda54g2}3p~#G=JVNPL&wj29@Z&F8;MdvQolCi*IolShUX04{C?ig<|;fSckEN-VGiuyLTfO97v0hge_*fIB}ccN~j~1++U&&HD?q zMt~KqP&=J^x5hxq50k8oh&eYj$8hR>007CU*ljzyoj(JX+2^1PK0QpwGZ<`25!b7QiOr?6P%ZFDcND zuX`fCfw}Ib9C!h~M(RR2jV;-(C3v`65lTVxEG6I)*g6W+=KL4b0wu!Ut1h5laMEvq zs)^2~YB~^u2Ln61&ixrqNkIzUccGKj8V!u5J=C^eg(>cCw)*R2K(76IhU(5fatZS=xWJ^&SD z3SQL#otoBdKVM}`%b>NI1CHU?gq#E%rvo}NjUCByYeM}a9MeL~XdlS^a_@U50sqed jZ!U}Ca{pWwK~lj#MgD0a`>Hrj00000NkvXXu0mjf86>05 literal 0 HcmV?d00001 diff --git a/public/scripts/controllers/bookmarks-controller.js b/public/scripts/controllers/bookmarks-controller.js index 5f80ee7..4b5f992 100644 --- a/public/scripts/controllers/bookmarks-controller.js +++ b/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) { - $window.open(url, '_blank'); - bookmarkService.clickBookmark({ - id: 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); diff --git a/public/scripts/controllers/edit-controller.js b/public/scripts/controllers/edit-controller.js index 4dc318d..773da97 100644 --- a/public/scripts/controllers/edit-controller.js +++ b/public/scripts/controllers/edit-controller.js @@ -8,18 +8,20 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p $timeout(function() { $scope.urlError = $scope.url == '' && $('.ui.modal.js-add-bookmark').modal('is active'); }); - $scope.title = ""; - if (/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/.test(newUrl)) { - var params = { - url: newUrl, + if ($scope.add) { + $scope.title = ""; + if (/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/.test(newUrl)) { + var params = { + url: newUrl, + } + bookmarkService.getTitle(params).then( + function(data) { + console.log(JSON.stringify(data)); + $scope.title = data.title; + }, + function(errorMsg) {} + ); } - bookmarkService.getTitle(params).then( - function(data) { - console.log(JSON.stringify(data)); - $scope.title = data.title; - }, - function(errorMsg) {} - ); } }); @@ -81,33 +83,53 @@ 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 } - - bookmarkService.addBookmark(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); - } - ); + if ($scope.add) { + bookmarkService.addBookmark(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); + } + ); + } 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 = ''; diff --git a/public/scripts/services/bookmark-service.js b/public/scripts/services/bookmark-service.js index ba64c17..b949c11 100644 --- a/public/scripts/services/bookmark-service.js +++ b/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) { }, /** diff --git a/public/views/bookmarks.html b/public/views/bookmarks.html index bed48a9..cc1b30c 100644 --- a/public/views/bookmarks.html +++ b/public/views/bookmarks.html @@ -1,5 +1,5 @@
-
+
@@ -9,37 +9,21 @@
- - + title="{{ bookmark.title }}" + id="{{bookmark.id}}"> + + + {{ bookmark.title}} -
-
-
-
-
-
-
-
- -
-
- - {{ tag.name }} - - {{ hoverItem }} -
-
- - {{ bookmark.title}} +
diff --git a/routes/api.js b/routes/api.js index 3f1039d..4d0215b 100644 --- a/routes/api.js +++ b/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(/]*?)>/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(/]*?)>/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')