Skip to content
Snippets Groups Projects
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
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 167 additions and 66 deletions
src/couchapp/secreton/_attachments/index.html
+ 51
− 56
View file @ 33d42d92
<!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>
src/couchapp/secreton/_attachments/style/tooltip.css 0 → 100644
+ 64
− 0
View file @ 33d42d92
#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;
}
src/couchapp/secreton/lists/index.js
+ 46
− 6
View file @ 33d42d92
...@@ -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
src/couchapp/secreton/templates/replicon/body.html
+ 2
− 2
View file @ 33d42d92
<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>
......
src/couchapp/secreton/templates/replicon/head.html
+ 1
− 0
View file @ 33d42d92
<div class="left">
<ol> <ol>
src/couchapp/secreton/templates/replicon/tail.html
+ 2
− 1
View file @ 33d42d92
</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>
src/couchapp/secreton/templates/secretion_system.html
+ 1
− 1
View file @ 33d42d92
...@@ -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}}"));
......
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