From: Jordan Augé Date: Thu, 26 Sep 2013 15:29:10 +0000 (+0200) Subject: added new files for demo X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=b753eb173aba7fdd1fffae461f81f32dc9879e8b;p=unfold.git added new files for demo --- diff --git a/demo_trash/tabs/__init__.py b/demo_trash/tabs/__init__.py new file mode 100644 index 00000000..6da94da1 --- /dev/null +++ b/demo_trash/tabs/__init__.py @@ -0,0 +1,19 @@ +from unfold.composite import Composite + +class Tabs (Composite): + + def requirements (self): + return { 'js_files' : ['js/tabs.js', 'js/bootstrap.js'], + 'css_files' : ['css/bootstrap.css', 'css/tabs.css', ] + } + + def template_file (self): + return "tabs.html" + + # see Composite.py for the details of template_env, that exposes global + # 'sons' as a list of sons with each a set of a few attributes + def json_settings_list (self): + return [] + + def export_json_settings(self): + return True diff --git a/demo_trash/tabs/static/css/tabs.css b/demo_trash/tabs/static/css/tabs.css new file mode 100644 index 00000000..3dc765a9 --- /dev/null +++ b/demo_trash/tabs/static/css/tabs.css @@ -0,0 +1,5 @@ +div.Tabs { +/* border-style: solid; + border-color: #aaa; */ + padding: 10px; +} diff --git a/demo_trash/tabs/static/js/tabs.js b/demo_trash/tabs/static/js/tabs.js new file mode 100644 index 00000000..b5b1cd0b --- /dev/null +++ b/demo_trash/tabs/static/js/tabs.js @@ -0,0 +1,12 @@ +(function($){ + + $.fn.Tabs = function( method ) { + + $('a[data-toggle="tab"]').on('shown', function (e) { + // find the plugin object inside the tab content referenced by the current tabs + $('.plugin', $($(e.target).attr('href'))).trigger('show'); + }); + + }; + +})( jQuery ); diff --git a/demo_trash/tabs/templates/tabs.html b/demo_trash/tabs/templates/tabs.html new file mode 100644 index 00000000..298dec92 --- /dev/null +++ b/demo_trash/tabs/templates/tabs.html @@ -0,0 +1,12 @@ + +
+{% for son in sons %} +
+{{ son.rendered }} +
+{% endfor %} +
diff --git a/plugins/hazelnut.demo/__init__.py b/plugins/hazelnut.demo/__init__.py new file mode 100644 index 00000000..2402588f --- /dev/null +++ b/plugins/hazelnut.demo/__init__.py @@ -0,0 +1,58 @@ +from unfold.plugin import Plugin + +class Hazelnut (Plugin): + + # set checkboxes if a final column with checkboxes is desired + # pass columns as the initial set of columns + # if None then this is taken from the query's fields + def __init__ (self, query=None, query_all=None, checkboxes=False, columns=None, datatables_options={}, **settings): + Plugin.__init__ (self, **settings) + self.query = query + # Until we have a proper way to access queries in Python + self.query_all = query_all + self.query_all_uuid = query_all.query_uuid if query_all else None + self.checkboxes=checkboxes + # XXX We need to have some hidden columns until we properly handle dynamic queries + if columns is not None: + self.columns=columns + self.hidden_columns = [] + elif self.query: + self.columns = self.query.fields + if query_all: + # We need a list because sets are not JSON-serilizable + self.hidden_columns = list(self.query_all.fields - self.query.fields) + else: + self.hidden_columns = [] + else: + self.columns = [] + self.hidden_columns = [] + self.datatables_options=datatables_options + + def template_file (self): + return "hazelnut.html" + + def template_env (self, request): + env={} + env.update(self.__dict__) + env['columns']=self.columns + return env + + def requirements (self): + reqs = { + 'js_files' : [ "js/hazelnut.js", + "js/manifold.js", "js/manifold-query.js", + #"js/dataTables.js", "js/with-datatables.js", + "js/dataTables.js", "js/dataTables.bootstrap.js", "js/with-datatables.js", + "js/datatables-bs3.js", + "js/spin.presets.js", "js/spin.min.js", "js/jquery.spin.js", + "js/unfold-helper.js", + ] , + 'css_files': [ "css/hazelnut.css" , + "css/dataTables.bootstrap.css", + ], + } + return reqs + + # the list of things passed to the js plugin + def json_settings_list (self): + return ['plugin_uuid', 'domid', 'query_uuid', 'query_all_uuid', 'checkboxes', 'datatables_options', 'hidden_columns'] diff --git a/plugins/hazelnut.demo/demo_page.css1 b/plugins/hazelnut.demo/demo_page.css1 new file mode 100644 index 00000000..bee7b0d9 --- /dev/null +++ b/plugins/hazelnut.demo/demo_page.css1 @@ -0,0 +1,93 @@ + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * General page setup + */ +#dt_example { + font: 80%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; + color: #333; + background-color: #fff; +} + + +#dt_example #container { + width: 800px; + margin: 30px auto; + padding: 0; +} + + +#dt_example #footer { + margin: 50px auto 0 auto; + padding: 0; +} + +#dt_example #demo { + margin: 30px auto 0 auto; +} + +#dt_example .demo_jui { + margin: 30px auto 0 auto; +} + +#dt_example .big { + font-size: 1.3em; + font-weight: bold; + line-height: 1.6em; + color: #4E6CA3; +} + +#dt_example .spacer { + height: 20px; + clear: both; +} + +#dt_example .clear { + clear: both; +} + +#dt_example pre { + padding: 15px; + background-color: #F5F5F5; + border: 1px solid #CCCCCC; +} + +#dt_example h1 { + margin-top: 2em; + font-size: 1.3em; + font-weight: normal; + line-height: 1.6em; + color: #4E6CA3; + border-bottom: 1px solid #B0BED9; + clear: both; +} + +#dt_example h2 { + font-size: 1.2em; + font-weight: normal; + line-height: 1.6em; + color: #4E6CA3; + clear: both; +} + +#dt_example a { + color: #0063DC; + text-decoration: none; +} + +#dt_example a:hover { + text-decoration: underline; +} + +#dt_example ul { + color: #4E6CA3; +} + +.css_right { + float: right; +} + +.css_left { + float: left; +} \ No newline at end of file diff --git a/plugins/hazelnut.demo/static/css/hazelnut.css b/plugins/hazelnut.demo/static/css/hazelnut.css new file mode 100644 index 00000000..e4264d89 --- /dev/null +++ b/plugins/hazelnut.demo/static/css/hazelnut.css @@ -0,0 +1,64 @@ +.table { + width: 100% !important; +} + +div.hazelnut-spacer { + height:10px; + clear: both; +} + +div.Hazelnut table.dataTable th { + font: bold 12px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; + color: #4f6b72; + border-right: 1px solid #C1DAD7; + border-bottom: 1px solid #C1DAD7; + border-top: 1px solid #C1DAD7; + letter-spacing: 1px; + text-transform: uppercase; + text-align: left; + padding: 8px 12px 4px 20px; + vertical-align:middle; +/* background: #CAE8EA url(../img/tablesort-header.jpg) no-repeat; */ +} + +div.Hazelnut table.dataTable td, div.Hazelnut table.dataTable textarea, div.Hazelnut table.dataTable input [type="text"] { + font: normal 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; + border-right: 1px solid #C1DAD7; + border-bottom: 1px solid #C1DAD7; +} +div.Hazelnut table.dataTable td { + padding: 4px 8px 4px 8px; + /* this applies on even rows only, odd ones have a setting in bootstrap of rbg 249.249.249 */ + background-color: #f4f4f4; +} +div.Hazelnut table.dataTable td a { + font-weight:normal; +} +/* these come from bootstrap */ +div.Hazelnut div.dataTables_info { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +/* one could think or using repeat-x here but that's not working because of the arrows + * we might need to make these wider some day + * and/or to add background-color: #caebea + * which would look less conspicuous in case of overflow +*/ + +div.Hazelnut table.dataTable thead .sorting { background: url('../img/tablesort-header-sortable.png') no-repeat; } +div.Hazelnut table.dataTable thead .sorting_asc { background: url('../img/tablesort-header-up.png') no-repeat; } +div.Hazelnut table.dataTable thead .sorting_desc { background: url('../img/tablesort-header-down.png') no-repeat; } +/* this icons set does not have that exact equivalent - using an approximation for now */ +div.Hazelnut table.dataTable thead .sorting_asc_disabled { background: url('../img/tablesort-header.png') no-repeat; } +div.Hazelnut table.dataTable thead .sorting_desc_disabled { background: url('../img/tablesort-header.png') no-repeat; } + +/* the footers are not active */ +div.Hazelnut table.dataTable tfoot { + background: url('../img/tablesort-header.png') no-repeat; + background-color: #caebea; +} +/* and when sorting is turned off it's useful to set this on header too */ +div.Hazelnut table.dataTable thead { + background: url('../img/tablesort-header.png') no-repeat; + background-color: #caebea; +} diff --git a/plugins/hazelnut.demo/static/hazelnut.html b/plugins/hazelnut.demo/static/hazelnut.html new file mode 100644 index 00000000..b49161b6 --- /dev/null +++ b/plugins/hazelnut.demo/static/hazelnut.html @@ -0,0 +1,33 @@ +
+ + + + {% for column in columns %} + + {% endfor %} + {% for column in hidden_columns %} + + {% endfor %} + {% if checkboxes %} + + {% endif %} + + + + + + + {% for column in columns %} + + {% endfor %} + {% for column in hidden_columns %} + + {% endfor %} + {% if checkboxes %} + + {% endif %} + + +
{{ column }}{{ column }}+/-
{{ column }}{{ column }}+/-
+
+
diff --git a/plugins/hazelnut.demo/static/img/README b/plugins/hazelnut.demo/static/img/README new file mode 100644 index 00000000..5df2d69b --- /dev/null +++ b/plugins/hazelnut.demo/static/img/README @@ -0,0 +1,2 @@ +these styling elements come from plekit with a simple transition to png +they're currently not all used in myslice diff --git a/plugins/hazelnut.demo/static/img/tablesort-bullet1.png b/plugins/hazelnut.demo/static/img/tablesort-bullet1.png new file mode 100644 index 00000000..4304f360 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-bullet1.png differ diff --git a/plugins/hazelnut.demo/static/img/tablesort-bullet2.png b/plugins/hazelnut.demo/static/img/tablesort-bullet2.png new file mode 100644 index 00000000..4f181e19 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-bullet2.png differ diff --git a/plugins/hazelnut.demo/static/img/tablesort-col-alt.png b/plugins/hazelnut.demo/static/img/tablesort-col-alt.png new file mode 100644 index 00000000..8179f830 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-col-alt.png differ diff --git a/plugins/hazelnut.demo/static/img/tablesort-gradient.png b/plugins/hazelnut.demo/static/img/tablesort-gradient.png new file mode 100644 index 00000000..26558a49 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-gradient.png differ diff --git a/plugins/hazelnut.demo/static/img/tablesort-header-down.png b/plugins/hazelnut.demo/static/img/tablesort-header-down.png new file mode 100644 index 00000000..c8ed6576 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-header-down.png differ diff --git a/plugins/hazelnut.demo/static/img/tablesort-header-sortable.png b/plugins/hazelnut.demo/static/img/tablesort-header-sortable.png new file mode 100644 index 00000000..0c169040 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-header-sortable.png differ diff --git a/plugins/hazelnut.demo/static/img/tablesort-header-up.png b/plugins/hazelnut.demo/static/img/tablesort-header-up.png new file mode 100644 index 00000000..d12fe2a5 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-header-up.png differ diff --git a/plugins/hazelnut.demo/static/img/tablesort-header.png b/plugins/hazelnut.demo/static/img/tablesort-header.png new file mode 100644 index 00000000..cff526f9 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-header.png differ diff --git a/plugins/hazelnut.demo/static/img/tablesort-td-alt.png b/plugins/hazelnut.demo/static/img/tablesort-td-alt.png new file mode 100644 index 00000000..ef5ab358 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/tablesort-td-alt.png differ diff --git a/plugins/hazelnut.demo/static/img/toggle-hidden.png b/plugins/hazelnut.demo/static/img/toggle-hidden.png new file mode 100755 index 00000000..023f22a8 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/toggle-hidden.png differ diff --git a/plugins/hazelnut.demo/static/img/toggle-visible.png b/plugins/hazelnut.demo/static/img/toggle-visible.png new file mode 100755 index 00000000..baf6c286 Binary files /dev/null and b/plugins/hazelnut.demo/static/img/toggle-visible.png differ diff --git a/plugins/hazelnut.demo/static/js/hazelnut.js b/plugins/hazelnut.demo/static/js/hazelnut.js new file mode 100644 index 00000000..748a0a5d --- /dev/null +++ b/plugins/hazelnut.demo/static/js/hazelnut.js @@ -0,0 +1,591 @@ +/** + * Description: display a query result in a datatables-powered + * Copyright (c) 2012-2013 UPMC Sorbonne Universite - INRIA + * License: GPLv3 + */ + +(function($){ + + // TEMP + var debug=false; + debug=true + + var Hazelnut = Plugin.extend({ + + init: function(options, element) + { + this._super(options, element); + + /* Member variables */ + // query status + this.received_all = false; + this.received_set = false; + this.in_set_buffer = Array(); + + /* XXX Events XXX */ + // this.$element.on('show.Datatables', this.on_show); + this.elmt().on('show', this, this.on_show); + // Unbind all events using namespacing + // TODO in destructor + // $(window).unbind('Hazelnut'); + + var query = manifold.query_store.find_analyzed_query(this.options.query_uuid); + this.method = query.object; + + var keys = manifold.metadata.get_key(this.method); + this.key = (keys && keys.length == 1) ? keys[0] : null; + + /* Setup query and record handlers */ + this.listen_query(options.query_uuid); + this.listen_query(options.query_all_uuid, 'all'); + + /* GUI setup and event binding */ + this.initialize_table(); + }, + + default_options: { + 'checkboxes': false + }, + + /* PLUGIN EVENTS */ + + on_show: function(e) + { + var self = e.data; + + self.table.fnAdjustColumnSizing() + + /* Refresh dataTabeles if click on the menu to display it : fix dataTables 1.9.x Bug */ + /* temp disabled... useful ? -- jordan + $(this).each(function(i,elt) { + if (jQuery(elt).hasClass('dataTables')) { + var myDiv=jQuery('#hazelnut-' + this.id).parent(); + if(myDiv.height()==0) { + var oTable=$('#hazelnut-' + this.id).dataTable(); + oTable.fnDraw(); + } + } + }); + */ + }, // on_show + + /* GUI EVENTS */ + + /* GUI MANIPULATION */ + + initialize_table: function() + { + /* Transforms the table into DataTable, and keep a pointer to it */ + var self = this; + actual_options = { + // Customize the position of Datatables elements (length,filter,button,...) + // we use a fluid row on top and another on the bottom, making sure we take 12 grid elt's each time + sDom: "<'row-fluid'<'span5'l><'span1'r><'span6'f>>t<'row-fluid'<'span5'i><'span7'p>>", + sPaginationType: 'bootstrap', + // Handle the null values & the error : Datatables warning Requested unknown parameter + // http://datatables.net/forums/discussion/5331/datatables-warning-...-requested-unknown-parameter/p2 + aoColumnDefs: [{sDefaultContent: '',aTargets: [ '_all' ]}], + // WARNING: this one causes tables in a 'tabs' that are not exposed at the time this is run to show up empty + // sScrollX: '100%', /* Horizontal scrolling */ + bProcessing: true, /* Loading */ + fnDrawCallback: function() { self._hazelnut_draw_callback.call(self); } + // XXX use $.proxy here ! + }; + // the intention here is that options.datatables_options as coming from the python object take precedence + // XXX DISABLED by jordan: was causing errors in datatables.js $.extend(actual_options, options.datatables_options ); + this.table = this.elmt('table').dataTable(actual_options); + + /* Setup the SelectAll button in the dataTable header */ + /* xxx not sure this is still working */ + var oSelectAll = $('#datatableSelectAll-'+ this.options.plugin_uuid); + oSelectAll.html("Select All"); + oSelectAll.button(); + oSelectAll.css('font-size','11px'); + oSelectAll.css('float','right'); + oSelectAll.css('margin-right','15px'); + oSelectAll.css('margin-bottom','5px'); + oSelectAll.unbind('click'); + oSelectAll.click(this._selectAll); + + /* Add a filtering function to the current table + * Note: we use closure to get access to the 'options' + */ + $.fn.dataTableExt.afnFiltering.push(function( oSettings, aData, iDataIndex ) { + /* No filtering if the table does not match */ + if (oSettings.nTable.id != "hazelnut-" + self.options.plugin_uuid) + return true; + return this._hazelnut_filter.call(self, oSettings, aData, iDataIndex); + }); + + /* Processing hidden_columns */ + $.each(this.options.hidden_columns, function(i, field) { + self.hide_column(field); + }); + }, // initialize_table + + /** + * @brief Determine index of key in the table columns + * @param key + * @param cols + */ + getColIndex: function(key, cols) { + var tabIndex = $.map(cols, function(x, i) { if (x.sTitle == key) return i; }); + return (tabIndex.length > 0) ? tabIndex[0] : -1; + }, // getColIndex + + // UNUSED ? // this.update_plugin = function(e, rows) { + // UNUSED ? // // e.data is what we passed in second argument to subscribe + // UNUSED ? // // so here it is the jquery object attached to the plugin
+ // UNUSED ? // var $plugindiv=e.data; + // UNUSED ? // if (debug) + // UNUSED ? // messages.debug("entering hazelnut.update_plugin on id '" + $plugindiv.attr('id') + "'"); + // UNUSED ? // // clear the spinning wheel: look up an ancestor that has the need-spin class + // UNUSED ? // // do this before we might return + // UNUSED ? // $plugindiv.closest('.need-spin').spin(false); + // UNUSED ? // + // UNUSED ? // var options = this.options; + // UNUSED ? // var hazelnut = this; + // UNUSED ? // + // UNUSED ? // /* if we get no result, or an error, try to make that clear, and exit */ + // UNUSED ? // if (rows.length==0) { + // UNUSED ? // if (debug) + // UNUSED ? // messages.debug("Empty result on hazelnut " + this.options.domid); + // UNUSED ? // var placeholder=$(this.table).find("td.dataTables_empty"); + // UNUSED ? // console.log("placeholder "+placeholder); + // UNUSED ? // if (placeholder.length==1) + // UNUSED ? // placeholder.html(unfold.warning("Empty result")); + // UNUSED ? // else + // UNUSED ? // this.table.html(unfold.warning("Empty result")); + // UNUSED ? // return; + // UNUSED ? // } else if (typeof(rows[0].error) != 'undefined') { + // UNUSED ? // // we now should have another means to report errors that this inline/embedded hack + // UNUSED ? // if (debug) + // UNUSED ? // messages.error ("undefined result on " + this.options.domid + " - should not happen anymore"); + // UNUSED ? // this.table.html(unfold.error(rows[0].error)); + // UNUSED ? // return; + // UNUSED ? // } + // UNUSED ? // + // UNUSED ? // /* + // UNUSED ? // * fill the dataTables object + // UNUSED ? // * we cannot set html content directly here, need to use fnAddData + // UNUSED ? // */ + // UNUSED ? // var lines = new Array(); + // UNUSED ? // + // UNUSED ? // this.current_resources = Array(); + // UNUSED ? // + // UNUSED ? // $.each(rows, function(index, row) { + // UNUSED ? // // this models a line in dataTables, each element in the line describes a cell + // UNUSED ? // line = new Array(); + // UNUSED ? // + // UNUSED ? // // go through table headers to get column names we want + // UNUSED ? // // in order (we have temporarily hack some adjustments in names) + // UNUSED ? // var cols = object.table.fnSettings().aoColumns; + // UNUSED ? // var colnames = cols.map(function(x) {return x.sTitle}) + // UNUSED ? // var nb_col = cols.length; + // UNUSED ? // /* if we've requested checkboxes, then forget about the checkbox column for now */ + // UNUSED ? // if (options.checkboxes) nb_col -= 1; + // UNUSED ? // + // UNUSED ? // /* fill in stuff depending on the column name */ + // UNUSED ? // for (var j = 0; j < nb_col; j++) { + // UNUSED ? // if (typeof colnames[j] == 'undefined') { + // UNUSED ? // line.push('...'); + // UNUSED ? // } else if (colnames[j] == 'hostname') { + // UNUSED ? // if (row['type'] == 'resource,link') + // UNUSED ? // //TODO: we need to add source/destination for links + // UNUSED ? // line.push(''); + // UNUSED ? // else + // UNUSED ? // line.push(row['hostname']); + // UNUSED ? // } else { + // UNUSED ? // if (row[colnames[j]]) + // UNUSED ? // line.push(row[colnames[j]]); + // UNUSED ? // else + // UNUSED ? // line.push(''); + // UNUSED ? // } + // UNUSED ? // } + // UNUSED ? // + // UNUSED ? // /* catch up with the last column if checkboxes were requested */ + // UNUSED ? // if (options.checkboxes) { + // UNUSED ? // var checked = ''; + // UNUSED ? // // xxx problem is, we don't get this 'sliver' thing set apparently + // UNUSED ? // if (typeof(row['sliver']) != 'undefined') { /* It is equal to null when is present */ + // UNUSED ? // checked = 'checked '; + // UNUSED ? // hazelnut.current_resources.push(row[ELEMENT_KEY]); + // UNUSED ? // } + // UNUSED ? // // Use a key instead of hostname (hard coded...) + // UNUSED ? // line.push(hazelnut.checkbox(options.plugin_uuid, row[ELEMENT_KEY], row['type'], checked, false)); + // UNUSED ? // } + // UNUSED ? // + // UNUSED ? // lines.push(line); + // UNUSED ? // + // UNUSED ? // }); + // UNUSED ? // + // UNUSED ? // this.table.fnClearTable(); + // UNUSED ? // if (debug) + // UNUSED ? // messages.debug("hazelnut.update_plugin: total of " + lines.length + " rows"); + // UNUSED ? // this.table.fnAddData(lines); + // UNUSED ? // + // UNUSED ? // }, // update_plugin + + checkbox: function (key, value) + { + var result=""; + // Prefix id with plugin_uuid + result += "