resources_selected: remove tfoot, and disable non-implemented buttons
[myslice.git] / plugins / resources_selected / static / js / resources_selected.js
index 18b61fd..669bfca 100644 (file)
             this._super(options, element);
 
             var self = this;
-            this.table = this.el('table').dataTable({
-                //sPaginationType: 'full_numbers',  // Use pagination
-                sPaginationType: 'bootstrap',
+            this.table = this.elmt('table').dataTable({
+                sDom: "<'row'<'col-xs-5'l><'col-xs-1'r><'col-xs-6'f>>t<'row'<'col-xs-5'i><'col-xs-7'p>>",
+                sPaginationType: 'full_numbers',
+               bAutoWidth: true,
                 //bJQueryUI      : true,
                 //bRetrieve      : true,
-                sScrollX       : '100%',                 // Horizontal scrolling 
-                bSortClasses   : false,              // Disable style for the sorted column
-                aaSorting      : [[ 0, 'asc' ]],        // Default sorting on URN
-                fnDrawCallback: function() {      // Reassociate close click every time the table is redrawn
-                    /* Prevent to loop on click while redrawing table  */
-                    $('.ResourceSelectedClose').unbind('click');
-                    /* Handle clicks on close span */
-                    /* Reassociate close click every time the table is redrawn */
-                    $('.ResourceSelectedClose').bind('click', self, self._close_click);
-                }
+//                sScrollX       : '100%',                 // Horizontal scrolling 
+//                bSortClasses   : false,              // Disable style for the sorted column
+//                aaSorting      : [[ 0, 'asc' ]],        // Default sorting on URN
+//                fnDrawCallback: function() {      // Reassociate close click every time the table is redrawn
+//                    /* Prevent to loop on click while redrawing table  */
+//                    $('.ResourceSelectedClose').unbind('click');
+//                    /* Handle clicks on close span */
+//                    /* Reassociate close click every time the table is redrawn */
+//                    $('.ResourceSelectedClose').bind('click', self, self._close_click);
+//                }
              });
             
+            // XXX This should not be done at init...
+            this.elmt('update').click(this, this.do_update);
+            this.elmt('refresh').click(this, this.do_refresh);
+            this.elmt('reset').click(this, this.do_reset);
+            this.elmt('clear_annotations').click(this, this.do_clear_annotations);
+
             this.listen_query(options.query_uuid);
         },
 
         /*************************** PLUGIN EVENTS ****************************/
 
         /***************************** GUI EVENTS *****************************/
-        
-        // Move through the query cycle
-        // XXX 'update', 'refresh', 'reset' and 'remove annotation' button
-        // This is a query scheduler
 
+        do_update: function(e) 
+        {
+            var self = e.data;
+            // XXX check that the query is not disabled
+            manifold.raise_event(self.options.query_uuid, RUN_UPDATE);
+        },
+
+       // related buttons are also disabled in the html template
+        do_refresh: function(e)
+        {
+            throw 'resource_selected.do_refresh Not implemented';
+        },
+
+        do_reset: function(e)
+        {
+            throw 'resources_selected.do_reset Not implemented';
+        },
+
+        do_clear_annotations: function(e)
+        {
+            throw 'resources_selected.do_clear_annotations Not implemented';
+        },
+        
         /************************** GUI MANIPULATION **************************/
 
+        
+        set_button_state: function(name, state)
+        {
+            this.elmt(name).attr('disabled', state ? false : 'disabled');
+        },
+
         clear: function()
         {
 
         },
 
+        find_row: function(key)
+        {
+            // key in third position, column id = 2
+            var KEY_POS = 2;
+
+            var cols = $.grep(this.table.fnSettings().aoData, function(col) {
+                return (col._aData[KEY_POS] == key);
+            } );
+
+            if (cols.length == 0)
+                return null;
+            if (cols.length > 1)
+                throw "Too many same-key rows in ResourceSelected plugin";
+
+            return cols[0];
+        },
+
         set_state: function(data)
         {
             var action;
-            var color;
             var msg;
             var button = '';
 
+            var row;
+           
+           // make sure the change is visible : toggle on the whole plugin
+           // this might hae to be made an 'auto-toggle' option of this plugin..
+           // also it might be needed to be a little finer-grained here
+           this.toggle_on();
+           
             switch(data.request) {
+                case FIELD_REQUEST_ADD_RESET:
+                case FIELD_REQUEST_REMOVE_RESET:
+                    // find line and delete it
+                    row = this.find_row(data.value);
+                    if (row)
+                        this.table.fnDeleteRow(row.nTr);
+                    return;
                 case FIELD_REQUEST_CHANGE:
                     action = 'UPDATE';
                     break;
             switch(data.status) {
                 case FIELD_REQUEST_PENDING:
                     msg   = 'PENDING';
-                    color = 'white';
                     button = "<span class='ui-icon ui-icon-close ResourceSelectedClose' id='" + data.key + "'/>";
                     break;
                 case FIELD_REQUEST_SUCCESS:
                     msg   = 'SUCCESS';
-                    color = 'green';
                     break;
                 case FIELD_REQUEST_FAILURE:
                     msg   = 'FAILURE';
-                    color = 'red';
                     break;
             }
 
-            var status = msg + color;
+            var status = msg + status;
 
-            this.table.fnAddData([
+            // find line
+            // if no, create it, else replace it
+            // XXX it's not just about adding lines, but sometimes removing some
+            // XXX how do we handle status reset ?
+            row = this.find_row(data.value);
+            newline = [
                 action,
                 data.key,
                 data.value,
                 msg,
                 button
-            ]);
-            // XXX change cell color according to status
+            ];
+            if (!row) {
+                // XXX second parameter refresh = false can improve performance. todo in hazelnut also
+                this.table.fnAddData(newline);
+                row = this.find_row(data.value);
+            } else {
+                // Update row text...
+                this.table.fnUpdate(newline, row.nTr);
+            }
+
+            // Change cell color according to status
+            if (row) {
+                $(row.nTr).removeClass('add remove')
+                var cls = action.toLowerCase();
+                if (cls)
+                    $(row.nTr).addClass(cls);
+            }
         },
 
         /*************************** QUERY HANDLER ****************************/