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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Example CouchApp</title> <title>Secreton</title>
<link rel="stylesheet" href="style/main.css" type="text/css"> <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> </head>
<body> <body>
<div id="account"></div> <div id="request">
<form>
<h1>Example CouchApp</h1> <fieldset>
<label for="nameSearch">by replicon name (ex:BUMA001c02)</label>
<div id="profile"> <input type="text" name="nameSearch" id="nameInput"/>
</div> <button type="button" id="nameButton">search by name</button>
<div id="content"></div> </fieldset>
</form>
<div id="sidebar"> </div>
<p>Edit welcome message.</p> <div id="results">
<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>
</body> </body>
<script src="/_utils/script/sha1.js"></script> <script type="text/javascript">
<script src="/_utils/script/json2.js"></script> $(".tooltip" , "#results").live('mouseenter', function(){
<script src="/_utils/script/jquery.js"></script> var link$ = $(this).find("a");
<script src="/_utils/script/jquery.couch.js"></script> timer = setTimeout(function(){
<script src="vendor/couchapp/jquery.couchLogin.js"></script> var pos = link$.position();
<script src="vendor/couchapp/jquery.couchProfile.js"></script> var top = pos.top + link$.outerHeight(true)+3;
<script src="vendor/couchapp/md5.js"></script> var left = pos.left + link$.outerWidth(false)-25;
<script src="vendor/couchapp/jquery.mustache.js"></script> 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 type="text/javascript">
<script id="new-message" type="text/x-mustache" charset="utf-8"> var get_results = function( view , args ){
<div class="avatar"> var url= document.location.href.split('/').slice(0, -1).concat(['_list','index',view]).join('/');
{{#gravatar_url}}<img src="{{gravatar_url}}"/>{{/gravatar_url}} $("#results").load(url , args );
<div class="name"> }
{{name}} $("#nameButton").click( function(){
</div> var params = {limit:45};
</div> var key= $("#nameInput").attr("value");
<form id="create-message"> if( key ){ params.key='"'+key+'"'}
<label>New message from {{nickname}}: <input type="text" name="message" size=60 value=""></label> get_results( 'by_replicon_name', $.param(params));
</form> });
<div style="clear:left;"></div>
$("#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>
<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> </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) { ...@@ -2,14 +2,29 @@ function(head, req) {
//!json templates.replicon //!json templates.replicon
var Mustache = require("vendor/couchapp/lib/mustache"); var Mustache = require("vendor/couchapp/lib/mustache");
var path = require("vendor/couchapp/lib/path").init(req); 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() { provides("html", function() {
send("<ul>"); var first_key, last_key ;
var row, url; 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()) { 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 ; system = row.value ;
send( Mustache.to_html(templates.replicon , { send( Mustache.to_html(templates.replicon.body , {
"url" : path.show("secretion_system" , row.id ) , "url" : path.show("secretion_system" , system.id ) ,
"code" : system.code , "code" : system.code ,
"T3SS_family" : system.T3SS_family, "T3SS_family" : system.T3SS_family,
"name" : system.name, "name" : system.name,
...@@ -18,8 +33,33 @@ function(head, req) { ...@@ -18,8 +33,33 @@ function(head, req) {
"taxonomy" : system.taxonomy, "taxonomy" : system.taxonomy,
"type" : system.type "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> <a href="{{url}}">{{name}}</a>
<ul class="tooltip"> <ul>
<li><span class="replicon_property">code</span>: {{code}}</li> <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">T3SS_family</span>: {{T3SS_family}}</li>
<li><span class="replicon_property">taxid</span>: {{taxid}}</li> <li><span class="replicon_property">taxid</span>: {{taxid}}</li>
......
</ol> </ol>
</div>
<div id="paginate"> <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> </div>
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
$(this).toggleClass( "grabbable" ).toggleClass( "grabbing" ); $(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
}); });
}, },
error: function(status) { console.log(status); } error: function(status) { "<p>Error document not found</p>" }
}); });
}; };
$(document).ready( getdoc( "{{code}}")); $(document).ready( getdoc( "{{code}}"));
......
Supports Markdown
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