From 33d42d92b2612a03b5148e02f4c305341e6f4c43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertrand=20N=C3=A9ron?= <bneron@pasteur.fr>
Date: Mon, 20 Feb 2012 08:41:30 +0000
Subject: [PATCH] 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.
---
src/couchapp/secreton/_attachments/index.html | 107 +++++++++---------
.../secreton/_attachments/style/tooltip.css | 64 +++++++++++
src/couchapp/secreton/lists/index.js | 52 ++++++++-
.../secreton/templates/replicon/body.html | 4 +-
.../secreton/templates/replicon/head.html | 1 +
.../secreton/templates/replicon/tail.html | 3 +-
.../secreton/templates/secretion_system.html | 2 +-
7 files changed, 167 insertions(+), 66 deletions(-)
create mode 100644 src/couchapp/secreton/_attachments/style/tooltip.css
diff --git a/src/couchapp/secreton/_attachments/index.html b/src/couchapp/secreton/_attachments/index.html
index ba84304..d7a7d18 100644
--- a/src/couchapp/secreton/_attachments/index.html
+++ b/src/couchapp/secreton/_attachments/index.html
@@ -1,66 +1,61 @@
<!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>
diff --git a/src/couchapp/secreton/_attachments/style/tooltip.css b/src/couchapp/secreton/_attachments/style/tooltip.css
new file mode 100644
index 0000000..f9f9885
--- /dev/null
+++ b/src/couchapp/secreton/_attachments/style/tooltip.css
@@ -0,0 +1,64 @@
+
+#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;
+}
diff --git a/src/couchapp/secreton/lists/index.js b/src/couchapp/secreton/lists/index.js
index 4777ae6..d3bc4cf 100644
--- a/src/couchapp/secreton/lists/index.js
+++ b/src/couchapp/secreton/lists/index.js
@@ -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
diff --git a/src/couchapp/secreton/templates/replicon/body.html b/src/couchapp/secreton/templates/replicon/body.html
index 1ab1624..073edd3 100644
--- a/src/couchapp/secreton/templates/replicon/body.html
+++ b/src/couchapp/secreton/templates/replicon/body.html
@@ -1,6 +1,6 @@
-<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>
diff --git a/src/couchapp/secreton/templates/replicon/head.html b/src/couchapp/secreton/templates/replicon/head.html
index f5cc47a..8b67cf8 100644
--- a/src/couchapp/secreton/templates/replicon/head.html
+++ b/src/couchapp/secreton/templates/replicon/head.html
@@ -1 +1,2 @@
+<div class="left">
<ol>
diff --git a/src/couchapp/secreton/templates/replicon/tail.html b/src/couchapp/secreton/templates/replicon/tail.html
index f25e60b..e3c333a 100644
--- a/src/couchapp/secreton/templates/replicon/tail.html
+++ b/src/couchapp/secreton/templates/replicon/tail.html
@@ -1,4 +1,5 @@
</ol>
+</div>
<div id="paginate">
- {{#prev}}<a href="{{prev}}">< previous</a> {{/prev}}|{{#next}}<a href="{{next}}">next ></a>{{/next}}
+ {{#prev}}<span class="nav_page" data-href="{{prev}}">< previous</span>{{/prev}}|{{#next}}<span class="nav_page" data-href="{{next}}">next ></span>{{/next}}
</div>
diff --git a/src/couchapp/secreton/templates/secretion_system.html b/src/couchapp/secreton/templates/secretion_system.html
index 0bbd0c5..52d0d78 100644
--- a/src/couchapp/secreton/templates/secretion_system.html
+++ b/src/couchapp/secreton/templates/secretion_system.html
@@ -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}}"));
--
GitLab