Commit 33d42d92 authored by Bertrand  NÉRON's avatar Bertrand NÉRON
Browse files

add search by name feature.

on index.html page ther is a field to search replicon by name.
the list of matches replicon is dispalyed under the search box.
each entry is a link 
the mouse over each link display a tooltip with some informations on the entry
click on the link open the corresponding secreton system page
if no thing is specified in the seach box all replicon are display (45 by 45) order by replicon name.

parent 008a234b
<!DOCTYPE html>
<html>
<head>
<title>Example CouchApp</title>
<title>Secreton</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
<link rel="stylesheet" href="style/tooltip.css" type="text/css">
<script src="/_utils/script/jquery.js"></script>
<script src="/_utils/script/jquery.couch.js"></script>
</head>
<body>
<div id="account"></div>
<h1>Example CouchApp</h1>
<div id="profile">
</div>
<div id="content"></div>
<div id="sidebar">
<p>Edit welcome message.</p>
<p>Ideas: You could easily turn this into a photo sharing app,
or a grocery list, or a chat room. <a href="https://github.com/couchapp/example">Code for this app is on Github.</a></p>
</div>
<div id="request">
<form>
<fieldset>
<label for="nameSearch">by replicon name (ex:BUMA001c02)</label>
<input type="text" name="nameSearch" id="nameInput"/>
<button type="button" id="nameButton">search by name</button>
</fieldset>
</form>
</div>
<div id="results">
</div>
</body>
<script src="/_utils/script/sha1.js"></script>
<script src="/_utils/script/json2.js"></script>
<script src="/_utils/script/jquery.js"></script>
<script src="/_utils/script/jquery.couch.js"></script>
<script src="vendor/couchapp/jquery.couchLogin.js"></script>
<script src="vendor/couchapp/jquery.couchProfile.js"></script>
<script src="vendor/couchapp/md5.js"></script>
<script src="vendor/couchapp/jquery.mustache.js"></script>
<script type="text/javascript">
$(".tooltip" , "#results").live('mouseenter', function(){
var link$ = $(this).find("a");
timer = setTimeout(function(){
var pos = link$.position();
var top = pos.top + link$.outerHeight(true)+3;
var left = pos.left + link$.outerWidth(false)-25;
link$.next().css({top: top+"px", left: left+"px"}).show(300)},
500);
}).live( 'mouseleave', function(){
clearTimeout(timer);
$(this).find("ul").hide(300)});
</script>
<!-- templates used by app.js -->
<script id="new-message" type="text/x-mustache" charset="utf-8">
<div class="avatar">
{{#gravatar_url}}<img src="{{gravatar_url}}"/>{{/gravatar_url}}
<div class="name">
{{name}}
</div>
</div>
<form id="create-message">
<label>New message from {{nickname}}: <input type="text" name="message" size=60 value=""></label>
</form>
<div style="clear:left;"></div>
<script type="text/javascript">
var get_results = function( view , args ){
var url= document.location.href.split('/').slice(0, -1).concat(['_list','index',view]).join('/');
$("#results").load(url , args );
}
$("#nameButton").click( function(){
var params = {limit:45};
var key= $("#nameInput").attr("value");
if( key ){ params.key='"'+key+'"'}
get_results( 'by_replicon_name', $.param(params));
});
$("#paginate .nav_page").live( 'click', function(){
console.log('paginate click' );
var url = $(this).attr('data-href');
console.log("url="+url);
$("#results").load( url );
});
</script>
<script id="recent-messages" type="text/x-mustache" charset="utf-8">
<h3>Recent Messages</h3>
<ul id="items">
{{#items}}
<li>
<div class="avatar">
{{#gravatar_url}}<img src="{{gravatar_url}}" alt="{{name}}"/>{{/gravatar_url}}
<div class="name">
{{nickname}}
</div>
</div>
<p>{{message}}</p>
<div style="clear:left;"></div>
</li>
{{/items}}
</ul>
<p><em>Protip:</em> If you setup continuous replication between this database and a remote one, this list will reflect remote changes in near real-time.</p>
<p>This would be a good place to add pagination.</p>
</script>
<script src="script/app.js"></script>
</html>
#results {
margin-left: 20px;
margin-right: 20%;
width:80%;
font-size:14px;
//background-color: yellow;
}
div .left{
//background-color: green;
margin-right: 5em;
float:left;
}
#results ol>li{
padding-top:5px;
margin-top:5px;
}
li a {
position: relative;
}
li a:hover{
color: red;
}
.tooltip ul{
display: none;
border: 1px solid #777;
border-radius : 10px;
position: absolute;
background-color: #FFFFCC;
z-index: 20000;
/* setting tooltip opacity to opaque */
opacity:1;
color: black;
font-weight: normal;
list-style-type: disc;
list-style-position: inside;
padding-left: 10px;
padding-right: 3px;
}
.replicon_property{
font-weight: bold;
}
#paginate{
clear: left;
margin: 1.5em 25%;
padding: 1em;
text-align:center;
font-size:12px;
}
#paginate .nav_page{
color: blue;
text-decoration: underline;
}
#paginate .nav_page:hover{
color: red;
}
......@@ -2,14 +2,29 @@ function(head, req) {
//!json templates.replicon
var Mustache = require("vendor/couchapp/lib/mustache");
var path = require("vendor/couchapp/lib/path").init(req);
var limit = (req.query.limit)? req.query.limit: 0;
var curr_page = (req.query.curr_page)? parseInt(req.query.curr_page) : 0 ;
provides("html", function() {
send("<ul>");
var row, url;
var first_key, last_key ;
var first_docid, last_docid;
var row, system;
send(Mustache.to_html(templates.replicon.head , {}));
var item = 0;
var col_height = 15;
while (row = getRow()) {
if (!first_key){ first_key = row.key };
if (!first_docid){ first_docid = row.id };
last_key = row.key;
last_docid = row.id;
if( item >= col_height){
send('</ol></div><div class="left"><ol>')
item = 0;
}
system = row.value ;
send( Mustache.to_html(templates.replicon , {
"url" : path.show("secretion_system" , row.id ) ,
send( Mustache.to_html(templates.replicon.body , {
"url" : path.show("secretion_system" , system.id ) ,
"code" : system.code ,
"T3SS_family" : system.T3SS_family,
"name" : system.name,
......@@ -18,8 +33,33 @@ function(head, req) {
"taxonomy" : system.taxonomy,
"type" : system.type
}));
item++;
}
return("</ul>");
var pagination = {};
if( req.query.limit ){
var page_nb = Math.ceil( item / limit);
if( page_nb >1 ){
//a faire que si plusieurs pages
//var curr_page = Math.ceil( head.offset / limit) + 1;
if ( curr_page > 0 ){
if( req.query.descending ){
pagination.prev = path.list( "index" ,"by_replicon_name" ,{ startkey:last_key , startkey_docid: last_docid, limit: limit, skip:1, descending:true, curr_page: curr_page-1 });
}else{
pagination.prev = path.list( "index" ,"by_replicon_name" ,{ startkey:first_key , startkey_docid: first_docid, limit: limit, skip:1, descending:true, curr_page: curr_page-1});
}
}
if( curr_page < page_nb -1 ){
if( req.query.descending ){
pagination.next = path.list( "index" ,"by_replicon_name" ,{ startkey:first_key , startkey_docid: first_docid, limit: limit , skip:1, curr_page: curr_page+1});
}else{
pagination.next = path.list( "index" ,"by_replicon_name" ,{ startkey:last_key , startkey_docid: last_docid, limit: limit , skip:1, curr_page: curr_page+1 });
}
}
}
}
return(Mustache.to_html(templates.replicon.tail , pagination));
});
}
\ No newline at end of file
<li>
<li class="tooltip">
<a href="{{url}}">{{name}}</a>
<ul class="tooltip">
<ul>
<li><span class="replicon_property">code</span>: {{code}}</li>
<li><span class="replicon_property">T3SS_family</span>: {{T3SS_family}}</li>
<li><span class="replicon_property">taxid</span>: {{taxid}}</li>
......
</ol>
</div>
<div id="paginate">
{{#prev}}<a href="{{prev}}">&lt; previous</a> {{/prev}}|{{#next}}<a href="{{next}}">next &gt;</a>{{/next}}
{{#prev}}<span class="nav_page" data-href="{{prev}}">&lt; previous</span>{{/prev}}|{{#next}}<span class="nav_page" data-href="{{next}}">next &gt;</span>{{/next}}
</div>
......@@ -220,7 +220,7 @@
$(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
});
},
error: function(status) { console.log(status); }
error: function(status) { "<p>Error document not found</p>" }
});
};
$(document).ready( getdoc( "{{code}}"));
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment