js/brapi/Table.js

   1 //  This is for displaying brapi paginated responses in a table format. The brapi response should be paginated over response.result.data and pagination info should be in response.metadata.pagination
   2 //
   3 //  Pass a js object with the headers and data as key:values, such as:
   4 //  [
   5 //    {"col1":"col1row1value", "height":"12", "age":"900"},
   6 //    {"col1":"col1row2value", "height":"1", "age":"9"},
   7 //    {"col1":"col1row3value", "height":"2", "age":"99"}
   8 //  ]
   9 //
  10 //  as well as a pagination js object, such as:
  11 //  {"currentPage": "2", "pageSize": "200", "totalCount": "999", "totalPages":"5"}
  12 //
  13 //  as well as the id for the div that you want the table to appear on the web page, e.g. "brapi_map_list_table"
  14 //  as well as a return url for processing changing currentPage and pageSize
  15 //  as well as optionally, a link js object, which will be used to construct links in the table. e.g. { "name": ["mapId", "/maps/protocols/"] }
  16
  17
  18 function brapi_create_table(data, pagination, div_id, return_url, link, params) {
  19     console.log(data);
  20     console.log(pagination);
  21     console.log(div_id);
  22     console.log(return_url);
  23     console.log(link);
  24     console.log(params);
  25     var current_page = pagination.currentPage;
  26     var next_page = current_page + 1;
  27     var previous_page = current_page - 1;
  28     var page_size = pagination.pageSize;
  29     var total_count = pagination.totalCount;
  30     var total_pages = pagination.totalPages;
  31     var html = "<input id='table_div_id_input' type='hidden' value='"+div_id+"'/>";
  32     var html = html+"<input id='table_return_url_input' type='hidden' value='"+return_url+"'/>";
  33     if (checkDefined(link) == 1) {
  34         var html = html+"<input id='table_links_input' type='hidden' value='"+JSON.stringify(link)+"'/>";
  35     } else {
  36         var html = html+"<input id='table_links_input' type='hidden' value='"+link+"'/>";
  37     }
  38     var html = html+"<input id='table_page_size_input' type='hidden' value='"+page_size+"'/>";
  39     var html = html+"<input id='table_next_page_input' type='hidden' value='"+next_page+"'/>";
  40     var html = html+"<input id='table_previous_page_input' type='hidden' value='"+previous_page+"'/>";
  41     if (data.length == 0) {
  42         html = html+"<center><h3>No data available!</h3></center>";
  43     } else {
  44         html = html+"<table class='table table-hover table-bordered'><thead><tr>";
  45         var header = [];
  46         for(var h in data[0]) {
  47             if (data[0].hasOwnProperty(h)) {
  48                 //console.log(h);
  49                 if (checkDefined(link) == 0) {
  50                     header.push(h);
  51                 } else {
  52                     for(var link_header in link) {
  53                         if(h != link[link_header][0]) {
  54                             header.push(h);
  55                         }
  56                     }
  57                 }
  58             }
  59         }
  60         header.sort();
  61         for(var col=0; col<header.length; col++){
  62             html = html+"<th>"+capitalizeEachWord(header[col])+"</th>";
  63         }
  64         html = html+"</tr></thead><tbody>";
  65         for(var row=0; row<data.length; row++) {
  66             html = html+"<tr>";
  67             for(var col=0; col<header.length; col++){
  68                 if (checkDefined(link) == 0) {
  69                     html = html+"<td>"+data[row][header[col]]+"</td>";
  70                 } else {
  71                     for(var link_header in link) {
  72                         if (header[col] == link_header) {
  73                             html = html+"<td><a href='"+link[link_header][1]+data[row][link[link_header][0]]+"'>"+data[row][link_header]+"</a></td>";
  74                         } else {
  75                             if (data[row][header[col]].length == 0) {
  76                                 html = html+"<td>"+data[row][header[col]]+"</td>";
  77                             }
  78                         }
  79                     }
  80                 }
  81             }
  82             html = html+"</tr>";
  83         }
  84         html = html+"</tbody></table>";
  85
  86         html = html+"<div class='well well-sm'><div class='row'>";
  87         html = html+"<div class='col-sm-6'><div class='row'><div class='col-sm-7'><div class='btn-group' role='group'>";
  88
  89         if (total_pages > 1) {
  90             if (current_page > 1) {
  91                 html = html+"<button id='table_previous_page_button' class='btn btn-sm btn-default glyphicon glyphicon-arrow-left'></button><button class='btn btn-sm btn-default' style='margin-top:1px'>Page "+current_page+" of "+total_pages+"</button><button id='table_next_page_button' class='btn btn-sm btn-default glyphicon glyphicon-arrow-right'></button>";
  92             } else {
  93                 html = html+"<button class='disabled btn btn-sm btn-default glyphicon glyphicon-arrow-left'></button><button class='btn btn-sm btn-default' style='margin-top:1px'>Page "+current_page+" of "+total_pages+"</button><button id='table_next_page_button' class='btn btn-sm btn-default glyphicon glyphicon-arrow-right'></button>";
  94             }
  95         } else {
  96             html = html+"<button class='disabled btn btn-sm btn-default glyphicon glyphicon-arrow-left'></button><button class='btn btn-sm btn-default' style='margin-top:1px'>Page "+current_page+" of "+total_pages+"</button><button id='table_next_page_button' class='disabled btn btn-sm btn-default glyphicon glyphicon-arrow-right'></button>";
  97         }
  98         html = html+"</div></div><div class='col-sm-5'><div class='input-group input-group-sm'><span class='input-group-addon' id='basic-addon1'>Page:</span><input type='text' id='table_change_current_page_input' class='form-control' placeholder='"+current_page+"' aria-describedby='basic-addon1'></div></div></div></div>";
  99         html = html+"<div class='col-sm-6'><div class='row'><div class='col-sm-7'><div class='input-group input-group-sm'><span class='input-group-addon' id='basic-addon2'>Page Size:</span><input type='text' id='table_change_page_size_input' class='form-control' placeholder='"+page_size+"' aria-describedby='basic-addon2'></div></div><div class='col-sm-5'><button class='btn btn-sm btn-default'>Total: "+total_count+"</button></div></div></div></div>";
 100         html = html+"</div>";
 101     }
 102     jQuery("#"+div_id).html(html);
 103 }
 104
 105 function capitalizeEachWord(string) {
 106     return string.charAt(0).toUpperCase() + string.slice(1);
 107 }
 108
 109 function checkDefined(o) {
 110     if (typeof o === 'undefined' || o === null || o === 'undefined') {
 111         return 0;
 112     } else {
 113         return 1;
 114     }
 115 }
 116
 117 jQuery(document).ready(function () {
 118
 119     jQuery(document).on( 'click', "#table_next_page_button", function() {
 120         jQuery.ajax( {
 121             url: jQuery("#table_return_url_input").val(),
 122             dataType: 'json',
 123             method: 'POST',
 124             data: {
 125                 'currentPage':jQuery("#table_next_page_input").val(),
 126                 'pageSize':jQuery("#table_page_size_input").val(),
 127             },
 128             beforeSend: function() {
 129                 jQuery("#working_modal").modal("show");
 130             },
 131             success: function(response) {
 132                 jQuery("#working_modal").modal("hide");
 133                 //console.log(response);
 134                 var div_id = jQuery("#table_div_id_input").val();
 135                 var return_url = jQuery("#table_return_url_input").val();
 136                 if (checkDefined(jQuery("#table_links_input").val()) == 1) {
 137                     var links = jQuery.parseJSON( jQuery("#table_links_input").val() );
 138                 } else {
 139                     var links = jQuery("#table_links_input").val();
 140                 }
 141                 jQuery("#"+jQuery("#table_div_id_input").val()).empty();
 142                 brapi_create_table(response.result.data, response.metadata.pagination, div_id, return_url, links);
 143             },
 144             error: function(response) {
 145                 jQuery("#working_modal").modal("hide");
 146                 alert('An error occurred constructing table after moving to the next page.');
 147             }
 148         });
 149     });
 150
 151     jQuery(document).on( 'click', "#table_previous_page_button", function() {
 152         jQuery.ajax( {
 153             url: jQuery("#table_return_url_input").val(),
 154             dataType: 'json',
 155             method: 'POST',
 156             data: {
 157                 'currentPage':jQuery("#table_previous_page_input").val(),
 158                 'pageSize':jQuery("#table_page_size_input").val(),
 159             },
 160             beforeSend: function() {
 161                 jQuery("#working_modal").modal("show");
 162             },
 163             success: function(response) {
 164                 jQuery("#working_modal").modal("hide");
 165                 //console.log(response);
 166                 var div_id = jQuery("#table_div_id_input").val();
 167                 var return_url = jQuery("#table_return_url_input").val();
 168                 if (checkDefined(jQuery("#table_links_input").val()) == 1) {
 169                     var links = jQuery.parseJSON( jQuery("#table_links_input").val() );
 170                 } else {
 171                     var links = jQuery("#table_links_input").val();
 172                 }
 173                 jQuery("#"+jQuery("#table_div_id_input").val()).empty();
 174                 brapi_create_table(response.result.data, response.metadata.pagination, div_id, return_url, links);
 175             },
 176             error: function(response) {
 177                 jQuery("#working_modal").modal("hide");
 178                 alert('An error occurred constructing table after moving to the previous page.');
 179             }
 180         });
 181     });
 182
 183     jQuery(document).on( 'keyup', "#table_change_page_size_input", function() {
 184         delay(function() {
 185             jQuery.ajax( {
 186                 url: jQuery("#table_return_url_input").val()+"?currentPage="+jQuery("#table_previous_page_input").val()+"&pageSize="+jQuery("#table_change_page_size_input").val(),
 187                 dataType: 'json',
 188                 beforeSend: function() {
 189                     jQuery("#working_modal").modal("show");
 190                 },
 191                 success: function(response) {
 192                     jQuery("#working_modal").modal("hide");
 193                     //console.log(response);
 194                     var div_id = jQuery("#table_div_id_input").val();
 195                     var return_url = jQuery("#table_return_url_input").val();
 196                     if (checkDefined(jQuery("#table_links_input").val()) == 1) {
 197                         var links = jQuery.parseJSON( jQuery("#table_links_input").val() );
 198                     } else {
 199                         var links = jQuery("#table_links_input").val();
 200                     }
 201                     jQuery("#"+jQuery("#table_div_id_input").val()).empty();
 202                     brapi_create_table(response.result.data, response.metadata.pagination, div_id, return_url, links);
 203                 },
 204                 error: function(response) {
 205                     jQuery("#working_modal").modal("hide");
 206                     alert('An error occurred constructing table after moving to the previous page.');
 207                 }
 208             });
 209         }, 800);
 210     });
 211
 212     jQuery(document).on( 'keyup', "#table_change_current_page_input", function() {
 213         delay(function() {
 214             jQuery.ajax( {
 215                 url: jQuery("#table_return_url_input").val()+"?currentPage="+jQuery("#table_change_current_page_input").val()+"&pageSize="+jQuery("#table_page_size_input").val(),
 216                 dataType: 'json',
 217                 beforeSend: function() {
 218                     jQuery("#working_modal").modal("show");
 219                 },
 220                 success: function(response) {
 221                     jQuery("#working_modal").modal("hide");
 222                     //console.log(response);
 223                     var div_id = jQuery("#table_div_id_input").val();
 224                     var return_url = jQuery("#table_return_url_input").val();
 225                     if (checkDefined(jQuery("#table_links_input").val()) == 1) {
 226                         var links = jQuery.parseJSON( jQuery("#table_links_input").val() );
 227                     } else {
 228                         var links = jQuery("#table_links_input").val();
 229                     }
 230                     jQuery("#"+jQuery("#table_div_id_input").val()).empty();
 231                     brapi_create_table(response.result.data, response.metadata.pagination, div_id, return_url, links);
 232                 },
 233                 error: function(response) {
 234                     jQuery("#working_modal").modal("hide");
 235                     alert('An error occurred constructing table after moving to the previous page.');
 236                 }
 237             });
 238         }, 800);
 239     });
 240
 241     var delay = (function(){
 242         var timer = 0;
 243         return function(callback, ms){
 244             clearTimeout (timer);
 245             timer = setTimeout(callback, ms);
 246         };
 247     })();
 248
 249 });