liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

开始写搜索界面，将搜索条件从书签页面移到了搜索界面

This commit is contained in:
luchenqun 2016-11-14 23:10:55 +08:00
parent 392cb0a80f
commit d29bd9a2c9
11 changed files with 257 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 662 B

BIN
public/images/logout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 B

1
public/index.html
View File

@ -41,6 +41,7 @@
<script src="/scripts/controllers/tags-controller.js"></script>
<script src="/scripts/controllers/menus-controller.js"></script>
<script src="/scripts/controllers/edit-controller.js"></script>
<script src="/scripts/controllers/search-controller.js"></script>
<script src="/scripts/externe/semantic.min.js"></script>
<script src="/scripts/externe/calendar.min.js"></script>
</body>

12
public/scripts/app-angular.js
View File

@ -10,15 +10,17 @@ app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
url: '/bookmarks',
templateUrl: '/views/bookmarks.html',
params: {
foo: null,
bar: null,
showStyle: 'navigate',
},
controller: 'bookmarksCtr'
})
.state('addBookmark', {
url: '/addBookmark',
templateUrl: '/views/addBookmark.html',
.state('search', {
url: '/search',
templateUrl: '/views/search.html',
params: {
searchWord: null,
},
controller: 'searchCtr'
})
.state('tags', {
url: '/tags',

23
public/scripts/controllers/menus-controller.js
View File

@ -3,8 +3,7 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
$scope.login = false; /**< 是否登陆 */
$scope.selectLoginIndex = 0; /**< 默认登陆之后的选择的菜单索引，下表从 0 开始 */
$scope.selectNotLoginIndex = 0; /**< 默认未登陆之后的选择的菜单索引，下表从 0 开始 */
$scope.keyword = ''; /**< 搜索关键字 */
$scope.showSearch = false;
$scope.searchWord = ''; /**< 搜索关键字 */
// 防止在登陆的情况下，在浏览器里面直接输入url，这时候要更新菜单选项
pubSubService.subscribe('Common.menuActive', $scope, function(event, params) {
console.log("subscribe Common.menuActive", params)
@ -42,24 +41,7 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
* @desc 点击搜索按钮搜索书签
*/
$scope.searchBookmarks = function() {
console.log('searchBookmarks clicked...');
pubSubService.publish('MenuCtr.searchBookmarks', {
'keyword': $scope.keyword
});
$scope.selectLoginIndex = 0;
}
/**
* @func
* @desc 点击下拉列表详情搜索
* @warn 不要使用$('js-checkbox-search').checkbox('is checked')去取，因为dom元素还没更新的。。。
*/
$scope.searchDetail = function() {
$scope.showSearch = !$scope.showSearch;
console.log('searchDetail ', $scope.showSearch)
pubSubService.publish('MenuCtr.searchDetail', {
'showSearch': $scope.showSearch,
});
updateMenuActive($scope.selectLoginIndex = 0);
}
$scope.updateShowStyle = function(showStyle) {
@ -94,7 +76,6 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
// 元素构造完成之后，开始使用jquery初始化
$scope.$on('elementRenderFinished', function(elementRenderFinishedEvent) {
console.log('menus elementRenderFinished')
$scope.showSearch = $('.js-checkbox-search').checkbox('is checked');
$('.js-bookmark-dropdown').dropdown({
action: 'hide',
});

79
public/scripts/controllers/search-controller.js Normal file
View File

@ -0,0 +1,79 @@
app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', 'bookmarkService', 'pubSubService', function($scope, $state, $stateParams, $filter, $window, $timeout, bookmarkService, pubSubService) {
console.log("Hello searchCtr...", $stateParams);
$scope.bookmarks = []; // 书签数据
$scope.showSearch = true; // 搜索对话框
$scope.searchWord = ($stateParams && $stateParams.searchWord) || ''
$scope.dateBegin = '';
$scope.dateEnd = '';
$scope.clickCount = '';
$scope.username = '';
$scope.userRange = '';
searchBookmarks($stateParams);
$scope.delBookmark = function(bookmarkId) {
var params = {
id: bookmarkId
}
bookmarkService.delBookmark(params)
.then((data) => $("#" + bookmarkId).remove())
.catch((err) => {
console.log('delBookmark err ', err)
});
}
$scope.editBookmark = function(bookmarkId) {
pubSubService.publish('bookmarksCtr.editBookmark', {
'bookmarkId': bookmarkId
});
}
$scope.detailBookmark = function(bookmarkId) {
}
$scope.search = function() {
console.log('search..', $scope.searchWord, $scope.dateBegin, $scope.clickCount, $scope.username, $scope.userRange)
}
function searchBookmarks(params) {
bookmarkService.searchBookmarks(params)
.then((data) => {
$scope.bookmarks = data;
pubSubService.publish('Common.menuActive', {
login: true,
index: 0
});
})
.catch((err) => console.log('getBookmarks err', err));
}
$scope.$on('elementRenderFinished', function(elementRenderFinishedEvent) {
$('.ui.dropdown').dropdown();
$('.ui.calendar.js-date-begin').calendar({
type: 'date',
formatter: {
date: function(date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
},
endCalendar: $('.ui.calendar.js-date-end')
});
$('.ui.calendar.js-date-end').calendar({
type: 'date',
formatter: {
date: function(date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
},
startCalendar: $('.ui.calendar.js-date-begin')
});
});
}]);

14
public/scripts/services/bookmark-service.js
View File

@ -83,6 +83,20 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
});
return def.promise;
},
searchBookmarks: function(params) {
var def = $q.defer();
$http.get('/api/searchBookmarks/', {
params: params
})
.success(function(data) {
def.resolve(data);
})
.error(function(data, status) {
def.reject('searchBookmarks error');
});
return def.promise;
},
getBookmark: function(params) {
var def = $q.defer();

46
public/views/bookmarks.html
View File

@ -1,49 +1,3 @@
<div class="ui small menu js-search-detail" ng-show="showSearch" ng-repeat="justSureRendered in [1]" on-finish-render-filters>
<div class="ui dropdown item">
<div class="text">搜索范围</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">自己书签</div>
<div class="item">全站书签</div>
</div>
</div>
<div class="item" style="width:136px;">
<div class="ui calendar js-date-begin">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期">
</div>
</div>
</div>
<div class="item" style="width:136px;">
<div class="ui calendar js-date-end">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期">
</div>
</div>
</div>
<div class="ui dropdown item">
<div class="text">点击次数</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">大于</div>
<div class="item">小于</div>
</div>
</div>
<div class="ui item transparent icon input" style="width:120px;">
<input class="prompt" type="text" ng-model="keyword" placeholder="点击次数">
</div>
<div class="ui item transparent icon input" style="width:120px;">
<input class="prompt" type="text" ng-model="keyword" placeholder="用户账号">
</div>
<div class="ui item transparent icon input" style="width:160px;">
<input type="text" placeholder="标题，链接，分类">
</div>
<div class="right item">
<div class="ui button">搜索</div>
</div>
</div>
<div class="ui segment" ng-if="showStyle === 'navigate'">
<div class="ui container" ng-repeat="tag in bookmarks" ng-init="tagIndex=$index">
<div class="ui grid">

16
public/views/menus.html
View File

@ -25,30 +25,22 @@
<label>卡片</label>
</div>
</div>
<div class="divider"></div>
<div class="header">搜索选项</div>
<div class="item">
<div class="ui checkbox js-checkbox-search" ng-click="searchDetail()">
<input type="checkbox">
<label>显示详细搜索</label>
</div>
</div>
</div>
</div>
</a>
<div class="right menu">
<div class="ui category right search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" ng-model="keyword" placeholder="标题，链接，分类...">
<i class="search link icon" ng-click="searchBookmarks()" ui-sref="bookmarks({foo: 'fooVal1', bar: 'barVal1'})"></i>
<input class="prompt" type="text" ng-model="searchWord" placeholder="标题，链接，分类...">
<i class="search link icon" ng-click="searchBookmarks()" ui-sref="search({searchWord:searchWord})" ui-sref-opts="{reload: true}"></i>
</div>
<div class="results"></div>
</div>
<div class="item">
<div class="ui button" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks">添加书签</div>
<i class="add square icon" title="添加书签" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks"></i>
</div>
<div class="item">
<div class="ui button" ng-click="logout()">退出</div>
<i class="sign out icon" title="退出登陆" ng-click="logout()"></i>
</div>
</div>
</div>

109
public/views/search.html Normal file
View File

@ -0,0 +1,109 @@
<div class="ui small menu js-search-detail" ng-show="showSearch" ng-repeat="justSureRendered in [1]" on-finish-render-filters>
<div class="ui dropdown item">
<div class="text">搜索范围</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">自己书签</div>
<div class="item">全站书签</div>
</div>
</div>
<div class="item" style="width:136px;">
<div class="ui calendar js-date-begin">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateBegin">
</div>
</div>
</div>
<div class="item" style="width:136px;">
<div class="ui calendar js-date-end">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateEnd">
</div>
</div>
</div>
<div class="ui dropdown item">
<div class="text">点击次数</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">大于</div>
<div class="item">小于</div>
</div>
</div>
<div class="ui item transparent icon input" style="width:120px;">
<input class="prompt" type="text" placeholder="点击次数" ng-model="clickCount">
</div>
<div class="ui item transparent icon input" style="width:120px;">
<input class="prompt" type="text" placeholder="用户账号" ng-model="username">
</div>
<div class="ui item transparent icon input" style="width:160px;">
<input type="text" placeholder="标题，链接，分类" ng-model="searchWord">
</div>
<div class="right menu">
<div class="item">
<i class="search icon" title="搜索" ng-click="search()"></i>
</div>
<div class="item" ng-click="showSearch = !showSearch">
<i class="space shuttle icon" title="隐藏搜索工具"></i>
</div>
</div>
</div>
<table class="ui celled table">
<thead>
<tr>
<th>标题</th>
<th>链接</th>
<th style="width:90px;">点击次数</th>
<th style="width:100px;">创建日期</th>
<th style="width:100px;">最后点击</th>
<th style="width:150px;">分类</th>
<th style="width:105px;">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}">
<td>
<img class="ui ui middle aligned tiny image" src="http://www.google.com/s2/favicons?domain={{bookmark.url}}" style="width:16px;height:16px">
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}">
{{ bookmark.title }}
</span>
</td>
<td ng-click="jumpToUrl(bookmark.url, bookmark.id)">
<span title="{{bookmark.url}}">{{ bookmark.url }}</span>
</td>
<td>{{ bookmark.click_count }}</td>
<td>{{ bookmark.created_at }}</td>
<td>{{ bookmark.last_click }}</td>
<td>
<div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}">
{{ tag.name }}
</div>
</td>
<td>
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark.id)">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 5px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark.id)">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7">
<div class="ui right floated pagination menu">
<a class="icon item">
<i class="left chevron icon"></i>
</a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="icon item">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>
<p>这是搜索页面</p>

41
routes/api.js
View File

@ -209,6 +209,47 @@ api.get('/bookmarks', function(req, res) {
}
});
api.get('/searchBookmarks', function(req, res) {
console.log('hello bookmarks', JSON.stringify(req.query), req.session.username);
if (!req.session.username) {
res.send(401);
return;
}
var bookmarks = [];
var tagsBookmarks = [];
var userId = '1';
db.getBookmarksTable(userId)
.then((bms) => {
bookmarks = bms;
var bookmarkIds = bookmarks.map((bookmark) => bookmark.id);
return db.getTagsBookmarks(bookmarkIds);
})
.then((tbs) => {
tagsBookmarks = tbs;
return db.getTags(userId);
})
.then((tags) => {
var data = [];
// 获取每个书签的所有分类标签
bookmarks.forEach(function(bookmark) {
var bookmarkTags = [];
tagsBookmarks.forEach(function(tb) {
if (tb.bookmark_id == bookmark.id) {
tags.forEach(function(tag) {
if (tb.tag_id == tag.id) {
bookmarkTags.push(tag)
}
})
}
});
bookmark.tags = bookmarkTags;
data.push(bookmark);
})
res.json(data);
})
.catch((err) => console.log('bookmarks table or card err', err))
});
api.get('/tags', function(req, res) {
if (!req.session.username) {
res.send(401);