Better pannels

server/src/uds/REST/methods/users.py

@@ -32,12 +32,11 @@
 '''
 from __future__ import unicode_literals
 
-import time
+#import time
 from django.utils.translation import ugettext as _
-from django.utils import formats
 from uds.core.util.State import State
 
-from uds.models import Authenticator, User
+from uds.models import Authenticator
 
 from uds.REST.mixins import DetailHandler
 

server/src/uds/static/adm/css/uds-admin.css

@@ -20,65 +20,8 @@ body {
   padding: 5px 15px;
 }
 
-/* Nav Messages */
-
-.messages-dropdown .dropdown-menu .message-preview .avatar,
-.messages-dropdown .dropdown-menu .message-preview .name,
-.messages-dropdown .dropdown-menu .message-preview .message,
-.messages-dropdown .dropdown-menu .message-preview .time {
-  display: block;
-}
-
-.messages-dropdown .dropdown-menu .message-preview .avatar {
-  float: left;
-  margin-right: 15px;
-}
-
-.messages-dropdown .dropdown-menu .message-preview .name {
-  font-weight: bold;
-}
-
-.messages-dropdown .dropdown-menu .message-preview .message {
-  font-size: 12px;
-}
-
-.messages-dropdown .dropdown-menu .message-preview .time {
-  font-size: 12px;
-}
-
-/* Nav Announcements */
-
-.announcement-heading {
-  font-size: 50px;
-  margin: 0;
-}
-
-.announcement-text {
-  margin: 0;
-}
-
-/* Table Headers */
-
-table.tablesorter thead {
-  cursor: pointer;
-}
-
-table.tablesorter thead tr th:hover {
-  background-color: #f5f5f5;
-}
-
-/* Flot Chart Containers */
-
-.flot-chart {
-  display: block;
-  height: 400px;
-}
-
-.flot-chart-content {
-  width: 100%;
-  height: 100%;
-}
 
+/* Custom */
 .btn3d-tables {
 	margin-top:0px;
 	margin-botton: 8px;
@@ -93,9 +36,19 @@ table.tablesorter thead tr th:hover {
 	display: none;
 }
 
-.white {
+/* chevrons for collapsable pannels */
-	color: white; 
+.chevron:before {
+  content: "\f139";
 }
+.chevron.collapsed:before {
+  content: "\f13a";
+}
+.panel-icon {
+	margin-left: 0.6em !important;
+	cursor: pointer;
+}
+
+
 /* Edit Below to Customize Widths > 768px */
 @media (min-width:768px) {
 
@@ -158,17 +111,7 @@ table.tablesorter thead tr th:hover {
   .navbar-inverse .navbar-nav>li>a:focus {
 	background-color: #080808;
   }
-
+  
-  /* Nav Messages */
-
-  .messages-dropdown .dropdown-menu {
-	min-width: 300px;
-  }
-
-  .messages-dropdown .dropdown-menu li a {
-	white-space: normal;
-  }
-
   .label-tbl-button {
 	  display: inline-block;
   }

server/src/uds/static/adm/js/gui-elements.js

@@ -39,7 +39,7 @@ gui.providers.link = function(event) {
             gui.doLog(this);
             gui.doLog(this.fnGetSelectedData());
         },
-        buttons : [ 'edit', 'refresh', 'delete', 'xls' ],
+        buttons : [ 'edit', 'delete', 'xls' ],
     });
 
     return false;
@@ -64,7 +64,7 @@ gui.authenticators.link = function(event) {
         gui.authenticators.table({
             container : 'auths-placeholder',
             rowSelect : 'single',
-            buttons : [ 'edit', 'refresh', 'delete', 'xls' ],
+            buttons : [ 'edit', 'delete', 'xls' ],
             onRowSelect : function(selected) {
                 api.tools.blockUI();
                 var id = selected[0].id;
@@ -72,7 +72,7 @@ gui.authenticators.link = function(event) {
                 user.table({
                     container : 'users-placeholder',
                     rowSelect : 'multi',
-                    buttons : [ 'edit', 'refresh', 'delete', 'xls' ],
+                    buttons : [ 'edit', 'delete', 'xls' ],
                     scrollToTable : true,
                     onLoad: function(k) {
                         api.tools.unblockUI();
@@ -97,7 +97,7 @@ gui.osmanagers.link = function(event) {
 
     gui.osmanagers.table({
         rowSelect : 'single',
-        buttons : [ 'edit', 'refresh', 'delete', 'xls' ],
+        buttons : [ 'edit', 'delete', 'xls' ],
     });
 
     return false;
@@ -120,12 +120,12 @@ gui.connectivity.link = function(event) {
         gui.connectivity.transports.table({
             rowSelect : 'multi',
             container : 'transports-placeholder',
-            buttons : [ 'edit', 'refresh', 'delete', 'xls' ],
+            buttons : [ 'edit', 'delete', 'xls' ],
         });
         gui.connectivity.networks.table({
             rowSelect : 'multi',
             container : 'networks-placeholder',
-            buttons : [ 'edit', 'refresh', 'delete', 'xls' ],
+            buttons : [ 'edit', 'delete', 'xls' ],
         });
     });
       

server/src/uds/static/adm/js/gui.js

@@ -55,22 +55,27 @@
             css: 'btn3d-info btn3d btn3d-tables',
         },
     };
-
+    
     gui.table = function(title, table_id, options) {
-        if (options === undefined)
+        options = options || {};
-            options = {
+        var size = options.size || 12;
-                'size' : 12,
+        var icon = options.icon || 'table';
-                'icon' : 'table'
+        var panelId = 'panel-' + table_id;
-            };
-        if (options.size === undefined)
-            options.size = 12;
-        if (options.icon === undefined)
-            options.icon = 'table';
 
-        return '<div class="panel panel-primary"><div class="panel-heading">' +
+        return {
-                '<h3 class="panel-title"><span class="fa fa-' + options.icon + '"></span> ' + title + '</h3></div>' +
+           text: '<div class="panel panel-primary" id="' + panelId + '">' +
-                '<div class="panel-body"><table class="table table-striped table-bordered table-hover" id="' +
+                 '<div class="panel-heading">' +
-                table_id + '" border="0" cellpadding="0" cellspacing="0" width="100%"></table></div></div>';
+                 '<h3 class="panel-title"><span class="fa fa-' + icon + '"></span> ' + title + 
+                 '<span class="panel-icon fa fa-dot-circle-o pull-right" onclick="$(\'#'+panelId + '\').remove();"> </span>' +
+                 '<span class="panel-icon fa chevron pull-right" data-toggle="collapse" data-target="#' + panelId  + ' > div.panel-body"> </span>' +
+                 '<span class="panel-icon fa fa-refresh pull-right"> </span>' +
+                 '</h3>' +
+                 '</div>' +
+                 '<div class="panel-body collapse in"><table class="table table-striped table-bordered table-hover" id="' +
+                 table_id + '" border="0" cellpadding="0" cellspacing="0" width="100%"></table></div></div>',
+           panelId: panelId,
+           refreshSelector: '#' + panelId + ' span.fa-refresh'
+        };
     };
 
     gui.breadcrumbs = function(path) {
@@ -200,25 +205,21 @@ GuiElement.prototype = {
     //                Receives 3 parameters:
     //                   1.- the array of selected items data (objects, as got from api...get)
     //                   2.- the DataTable that raised the event
-    //                   3.- the DataTableTools that raised the event
     //   onNew: Event (function). If defined, will be invoked when "new" button is pressed
     //                Receives 4 parameters:
     //                   1.- the selected item data (single object, as got from api...get)
     //                   2.- the event that fired this (new, delete, edit, ..)
     //                   3.- the DataTable that raised the event
-    //                   4.- the DataTableTools that raised the event
     //   onEdit: Event (function). If defined, will be invoked when "edit" button is pressed
     //                Receives 4 parameters:
     //                   1.- the selected item data (single object, as got from api...get)
     //                   2.- the event that fired this (new, delete, edit, ..)
     //                   3.- the DataTable that raised the event
-    //                   4.- the DataTableTools that raised the event
     //   onDelete: Event (function). If defined, will be invoked when "delete" button is pressed
     //                Receives 4 parameters:
     //                   1.- the selected item data (single object, as got from api...get)
     //                   2.- the event that fired this (new, delete, edit, ..)
     //                   4.- the DataTable that raised the event
-    //                   5.- the DataTableTools that raised the event
     table : function(options) {
         "use strict";
         options = options || {};
@@ -339,10 +340,10 @@ GuiElement.prototype = {
                     success : function(data) {
                         var table = gui.table(title, tableId);
                         if (options.container === undefined) {
-                            gui.appendToWorkspace('<div class="row"><div class="col-lg-12">' + table + '</div></div>');
+                            gui.appendToWorkspace('<div class="row"><div class="col-lg-12">' + table.text + '</div></div>');
                         } else {
                             $('#' + options.container).empty();
-                            $('#' + options.container).append(table);
+                            $('#' + options.container).append(table.text);
                         }
     
                         var btns = [];
@@ -351,42 +352,14 @@ GuiElement.prototype = {
                             var clickHandlerFor = function(handler, action) {
                                 var handleFnc = handler || function(val, action, tbl, tbltools) {gui.doLog('Default handler called for ' + action + ': ' + JSON.stringify(val));};
                                 return function(btn) {
-                                    var tblTools = this;
+                                    var tbl = $('#' + tableId).dataTable();
-                                    var table = $('#' + tableId).dataTable();
                                     var val = this.fnGetSelectedData()[0];
                                     setTimeout(function() {
-                                        handleFnc(val, action, table, tblTools);
+                                        handleFnc(val, action, tbl);
                                     }, 0);
                                 };
                             };
-    
+
-                            // What execute on refresh button push
-                            var onRefresh = options.onRefresh || function(){};
-    
-                            var refreshFnc = function(btn) {
-                                // Refreshes table content
-                                var tbl = $('#' + tableId).dataTable();
-                                /*var width = $(btn).width();
-                                var saved = $(btn).html();
-                                $(btn).addClass('disabled').html('<span class="fa fa-spinner fa-spin"></span>')
-                                        .width(width);*/
-                                if( data.length > 1000 )
-                                    api.tools.blockUI();
-                                
-                                onRefresh($this);
-                                
-                                $this.rest.get({
-                                    success : function(data) {
-                                        /*$(btn).removeClass('disabled').width('').html(saved);*/
-                                        setTimeout( function() {
-                                            tbl.fnClearTable();
-                                            tbl.fnAddData(data);
-                                            api.tools.unblockUI();
-                                        }, 0);
-                                    }
-                                });
-                            };
-    
                             // methods for buttons on row select
                             var editSelected = function(btn, obj, node) {
                                 var sel = this.fnGetSelectedData();
@@ -404,6 +377,31 @@ GuiElement.prototype = {
                                     $(btn).removeClass('btn3d-warning').addClass('disabled');
                                 }
                             };
+                            
+                            // What execute on refresh button push
+                            var onRefresh = options.onRefresh || function(){};
+    
+                            var refreshFnc = function() {
+                                // Refreshes table content
+                                var tbl = $('#' + tableId).dataTable();
+                                // Clears selection first
+                                TableTools.fnGetInstance(tableId).fnSelectNone();
+                                if( data.length > 1000 )
+                                    api.tools.blockUI();
+                                
+                                $this.rest.get({
+                                    success : function(data) {
+                                        /*$(btn).removeClass('disabled').width('').html(saved);*/
+                                        setTimeout( function() {
+                                            tbl.fnClearTable();
+                                            tbl.fnAddData(data);
+                                            onRefresh($this);
+                                            api.tools.unblockUI();
+                                        }, 0);
+                                    }
+                                });
+                                return false; // This may be used on button or href, better disable execution of it
+                            };
     
                             $.each(options.buttons, function(index, value) {
                                 var btn;
@@ -532,7 +530,10 @@ GuiElement.prototype = {
                         // Fix 3dbuttons
                         api.tools.fix3dButtons('#' + tableId + '_wrapper .btn-group-3d');
                         // Fix form 
-                        //$('#' + tableId + '_filter input').addClass('form-control');
+                        $('#' + tableId + '_filter input').addClass('form-control');
+                        // Add refresh action to panel
+                        $(table.refreshSelector).click(refreshFnc);
+                        
                         if (options.scrollToTable === true ) {
                             var tableTop = $('#' + tableId).offset().top;
                             $('html, body').scrollTop(tableTop);

server/src/uds/static/css/tables.css

@@ -1,4 +1,4 @@
-@media (max-width: 979px) {
+@media (max-width: 768px) {
 	table, thead, tbody, th, td, tr { 
 			display: block; 
 		}