plugins/query_editor/query_editor.js

   1 /**
   2  * Description: QueryEditor plugin
   3  * Copyright (c) 2012-2013 UPMC Sorbonne Universite
   4  * License: GPLv3
   5  */
   6
   7 (function($){
   8
   9     var QueryEditor = Plugin.extend({
  10
  11         init: function(options, element) {
  12             $('.queryeditor-auto-filter').change(function(event) {
  13                 var key   = event.target.id.split('-')[4]; // Should be consistent with the naming of fields
  14                 var op    = '=';
  15                 var value = event.target.value;
  16
  17                 manifold.raise_event(object.options.query_uuid, FILTER_ADDED, [key, op, value]);
  18             });
  19
  20             jQuery('.queryeditor-filter').change(function(event) {
  21                 var key   = event.target.id.split('-')[4];
  22                 var op    = '=';
  23                 var value = event.target.value;
  24
  25                 manifold.raise_event(object.options.query_uuid, FILTER_ADDED, [key, op, value]);
  26             });
  27             jQuery('.queryeditor-filter-min').change(function(event) {
  28                 query = data.current_query;
  29                 var key=getKeySplitId(event.target.id,"-");
  30                 var op='>';
  31                 var value=event.target.value;
  32
  33                 if(value){
  34                     query.update_filter(key, op, value);
  35                     //add_ActiveFilter(event.target.id,'>',event.target.value,data);
  36                 }else{
  37                     query.remove_filter(key,op,"");
  38                     //remove_ActiveFilter(event, data, event.target.id,'>');
  39                 }
  40                 // Publish the query changed, the other plugins with subscribe will get the changes
  41                 jQuery.publish('/query/' + query.uuid + '/changed', query);
  42             });
  43             jQuery('.queryeditor-filter-max').change(function(event) {
  44                 query = data.current_query;
  45                 var key=getKeySplitId(event.target.id,"-");
  46                 var op='<';
  47                 var value=event.target.value;
  48
  49                 if(value){
  50                     query.update_filter(key, op, value);
  51                     //add_ActiveFilter(event.target.id,'<',event.target.value,data);
  52                 }else{
  53                     query.remove_filter(key,op,"");
  54                     //remove_ActiveFilter(event, data, event.target.id,'<');
  55                 }
  56                 // Publish the query changed, the other plugins with subscribe will get the changes
  57                 jQuery.publish('/query/' + query.uuid + '/changed', query);
  58             });
  59
  60             jQuery('.queryeditor-check').click(function() {
  61                 manifold.raise_event(object.options.query_uuid, this.checked?FIELD_ADDED:FIELD_REMOVED, this.value);
  62                 /*
  63                     var column = this.id.substring(6);
  64                     query = data.current_query;
  65                     if (this.checked) {
  66                         if (jQuery.inArray(column, query.fields) == -1) {
  67                             query.fields.push(column);
  68                             jQuery.publish('/query/' + query.uuid + '/changed', query);
  69                         }
  70                     } else {
  71                         query.fields = jQuery.grep(query.fields, function(value) {return value != column;});
  72                         jQuery.publish('/query/' + query.uuid + '/changed', query);
  73                     }
  74                 */
  75                 });
  76
  77             //onFunctionAvailable('jQuery.fn.dataTable', function() {
  78
  79                 var nCloneTh = document.createElement( 'th' );
  80                 var nCloneTd = document.createElement( 'td' );
  81                 nCloneTd.innerHTML = "<span class='ui-icon ui-icon-triangle-1-e' style='cursor:pointer'></span>";
  82                 //nCloneTd.innerHTML = '<img src="/components/com_tophat/images/details_open.png">';
  83                 nCloneTh.innerHTML = '<b>Info</b>';
  84                 nCloneTd.className = "center";
  85                 nCloneTh.className = "center";
  86
  87                 jQuery('#'+this.options.plugin_uuid+'_fields thead tr').each( function () {
  88                     this.insertBefore( nCloneTh, this.childNodes[0] );
  89                 });
  90
  91                 jQuery('#'+this.options.plugin_uuid+'_fields tbody tr').each( function () {
  92                     this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
  93                 });
  94
  95                 var  metaTable = jQuery('#'+this.options.plugin_uuid+'-table').dataTable( {
  96                     bFilter: false,
  97                     bPaginate: false,
  98                     bInfo: false,
  99                     sScrollX: '100%',       /* Horizontal scrolling */
 100                     sScrollY: "200px",
 101                     bJQueryUI: true, // Use jQuery UI
 102                     bProcessing: true, // Loading
 103                     aaSorting: [[ 1, "asc" ]], // sort by column fields on load
 104                     aoColumnDefs: [ {"bSortable": false, "aTargets": [ 0 ]},
 105                                       { "sWidth": "8px", "aTargets": [ 0 ] },
 106                                       { "sWidth": "8px", "aTargets": [ 4 ] }
 107                     ]
 108                 });
 109
 110                 jQuery('#'+this.options.plugin_uuid+'_fields tbody td span').live('click', function () {
 111                     var nTr = this.parentNode.parentNode;
 112                     // use jQuery UI instead of images to keep a common UI
 113                     // class="ui-icon treeclick ui-icon-triangle-1-s tree-minus"
 114                     //East oriented Triangle class="ui-icon-triangle-1-e"
 115                     //South oriented Triangle class="ui-icon-triangle-1-s"
 116
 117                     if(this.className=="ui-icon ui-icon-triangle-1-e"){
 118                         this.removeClass("ui-icon-triangle-1-e");
 119                         this.addClass("ui-icon-triangle-1-s");
 120                         metaTable.fnOpen( nTr, this.fnFormatDetails(metaTable, nTr, this.options.plugin_uuid+'_div'), 'details' );
 121                     }else{
 122                         this.removeClass("ui-icon-triangle-1-s");
 123                         this.addClass("ui-icon-triangle-1-e");
 124                         metaTable.fnClose( nTr );
 125                     }
 126                     /*
 127                     if ( this.src.match('details_close') ) {
 128                         this.src = "/components/com_tophat/images/details_open.png";
 129                         metaTable.fnClose( nTr );
 130                     }
 131                     else {
 132                         this.src = "/components/com_tophat/images/details_close.png";
 133                         metaTable.fnOpen( nTr, this.fnFormatDetails(metaTable, nTr, this.options.plugin_uuid+'_div'), 'details' );
 134                     }
 135                     */
 136                 });
 137
 138                 jQuery('#'+this.options.plugin_uuid+'_fields_wrapper').css({'padding-top':'0em','padding-bottom':'0em'});
 139
 140             //}); // onfunctionAvailable
 141         }, // init
 142
 143         /* UI management */
 144
 145         check_field: function(field)
 146         {
 147             this.el('check', field).attr('checked', true);
 148         },
 149
 150         uncheck_field: function(field)
 151         {
 152             this.el('check', field).attr('checked', false);
 153         },
 154
 155         /* Events */
 156
 157         on_filter_added: function(filter)
 158         {
 159 //                    filter = data;
 160 //                    // Set the value of the filter = to query filter value
 161 //                    // Necessary if the filter has been modified by another plugin (QuickFilter)
 162 //                    if(filter[1]=="="){
 163 //                        jQuery('#'+this.options.plugin_uuid+'-filter-'+filter[0]).val(filter[2]);
 164 //                    }else if(filter[1]=="<"){
 165 //                        jQuery('#'+this.options.plugin_uuid+'-filter-'+filter[0]+'-max').val(filter[2]);
 166 //                    }else if(filter[1]==">"){
 167 //                        jQuery('#'+this.options.plugin_uuid+'-filter-'+filter[0]+'-min').val(filter[2]);
 168 //                    }
 169         },
 170
 171         on_filter_removed: function(filter)
 172         {
 173 //                    filter = data;
 174 //                    if(filter[1]=="="){
 175 //                        jQuery('#'+this.options.plugin_uuid+'-filter-'+filter[0]).val(null);
 176 //                    }else if(filter[1]=="<"){
 177 //                        //502124d5a5848-filter-asn-max
 178 //                        jQuery('#'+this.options.plugin_uuid+'-filter-'+filter[0]+'-max').val(null);
 179 //                    }else if(filter[1]==">"){
 180 //                        //502124d5a5848-filter-asn-min
 181 //                        jQuery('#'+this.options.plugin_uuid+'-filter-'+filter[0]+'-min').val(null);
 182 //                    }
 183         },
 184
 185         on_field_added: function(field)
 186         {
 187             this.check_field(field);
 188         },
 189
 190         on_field_removed: function(field)
 191         {
 192             this.uncheck_field(field);
 193         },
 194
 195         /* Former code */
 196
 197         print_field_description: function(field_header, div_id)
 198         {
 199             //var selected = all_headers[field_header];
 200             var selected = getMetadata_field('resource',field_header);
 201
 202             field_header = div_id+"_"+field_header;
 203
 204             var output = "<div id='desc"+field_header+"'>";
 205
 206             output += "<div id='divinfo"+field_header+"'>";
 207             output += '<p><span class="column-title">'+selected['title']+'</span></p></span>';
 208             output += '<p><span class="column-detail">'+selected['description']+'</span></p></span>';
 209
 210             var period_select = "<select id='selectperiod"+field_header+"'><option value='Now'> Now </option><option value='latest'> Latest  </option><option value=w> Week </option><option value=m> Month </option><option value=y> Year </option></select>";
 211
 212             if (selected['value_type'] == 'string') {
 213
 214                 var values_select = "<p><select id='selectvalues"+field_header+"' MULTIPLE size=3>";
 215
 216                 output += '<p>Values: ';
 217
 218                 var values_list = selected['allowed_values'].split(",");
 219
 220                 for (var value_index = 0; value_index < values_list.length ; value_index++) {
 221                     var value_desc = values_list[value_index].split("-");
 222                     if (value_index > 0)
 223                         output += ', ';
 224                     output += '<span class="bold">'+value_desc[0]+'</span>';
 225                     values_select += "<option value ='"+value_desc[0]+"'>&nbsp;"+value_desc[0];
 226                     if (value_desc[1]!='')
 227                         output += ' ('+value_desc[1]+')';
 228
 229                     values_select += "&nbsp;</option>";
 230                 }
 231                 values_select += "</select>";
 232             }
 233             else
 234                 output+='<p>Unit: '+selected['unit'];
 235
 236             output+= '</p>';
 237
 238             output += '<p>Source: <a class="source-url" target="source_window" href="'+selected['platform_url']+'">'+selected['platform']+'</a>';
 239
 240             //if (selected['via'] != '')
 241                 //output += ' via <a class="source-url" target="source_window" href="http://'+selected['via_url']+'">'+selected['via']+'</a>';
 242
 243             output += '</p>';
 244             output += "</div>";
 245
 246     /*
 247             output += "<div id='divgroup"+field_header+"'>";
 248             output += "<p>Group resources with the same value <input type=checkbox></input>";
 249             output += "<p>Select aggregator : <select><option>Count</option><option selected=true>Average</option><option>Maximum</option><option>Minimum</option></select>";
 250             output += "</div>";
 251             output += "<div id='divtime"+field_header+"'>";
 252             output += "<p>Select timestamp : ";
 253             output += period_select;
 254             output += "</div>";
 255     */
 256             output += "</div>";
 257
 258             return output;
 259         },
 260
 261         update_autocomplete: function(e, rows, current_query)
 262         {
 263             var d = data;
 264             d.current_query = current_query;
 265             var availableTags={};
 266             jQuery.each (rows, function(index, obj) {
 267                 jQuery.each(obj,function(key,value){
 268                     value = get_value(value);
 269                     if(!availableTags.hasOwnProperty(key)){availableTags[key]=new Array();}
 270                     //availableTags[key].push(value);
 271                     var currentArray=availableTags[key];
 272                     if(value!=null){
 273                         if(jQuery.inArray(value,currentArray)==-1){availableTags[key].push(value);}
 274                     }
 275                 });
 276             });
 277             jQuery.each(availableTags, function(key, value){
 278                 value.sort();
 279                 jQuery("#"+options.plugin_uuid+"-filter-"+key).autocomplete({
 280                             source: value,
 281                             selectFirst: true,
 282                             minLength: 0, // allows to browse items with no value typed in
 283                             select: function(event, ui) {
 284                                 var key=getKeySplitId(this.id,"-");
 285                                 var op='=';
 286                                 var val=ui.item.value;
 287
 288                                 query=d.current_query;
 289                                 query.update_filter(key,op,val);
 290                                 // Publish the query changed, the other plugins with subscribe will get the changes
 291                                 jQuery.publish('/query/' + query.uuid + '/changed', query);
 292                                 //add_ActiveFilter(this.id,'=',ui.item.value,d);
 293                             }
 294                 });
 295             });
 296         }, // update_autocomplete
 297
 298         fnFormatDetails: function( metaTable, nTr, div_id )
 299         {
 300             var aData = metaTable.fnGetData( nTr );
 301             var sOut = '<blockquote>';
 302             //sOut += prepare_tab_description(aData[1].substr(21, aData[1].length-21-7), div_id);
 303             sOut += this.print_field_description(aData[1].substring(3, aData[1].length-4), div_id);
 304             sOut += '</blockquote>';
 305
 306             return sOut;
 307         }
 308
 309 })( jQuery );