mirror of
https://github.com/dkmstr/openuds.git
synced 2024-12-22 13:34:04 +03:00
Better pannels
This commit is contained in:
Adolfo Gómez
parent
17b20ab684
commit
dbd4531376
@ -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
|
||||
|
||||
|
||||
@ -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 {
|
||||
color: white;
|
||||
/* chevrons for collapsable pannels */
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -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' ],
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -55,22 +55,27 @@
|
||||
css: 'btn3d-info btn3d btn3d-tables',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
gui.table = function(title, table_id, options) {
|
||||
if (options === undefined)
|
||||
options = {
|
||||
'size' : 12,
|
||||
'icon' : 'table'
|
||||
};
|
||||
if (options.size === undefined)
|
||||
options.size = 12;
|
||||
if (options.icon === undefined)
|
||||
options.icon = 'table';
|
||||
options = options || {};
|
||||
var size = options.size || 12;
|
||||
var icon = options.icon || 'table';
|
||||
var panelId = 'panel-' + table_id;
|
||||
|
||||
return '<div class="panel panel-primary"><div class="panel-heading">' +
|
||||
'<h3 class="panel-title"><span class="fa fa-' + options.icon + '"></span> ' + title + '</h3></div>' +
|
||||
'<div class="panel-body"><table class="table table-striped table-bordered table-hover" id="' +
|
||||
table_id + '" border="0" cellpadding="0" cellspacing="0" width="100%"></table></div></div>';
|
||||
return {
|
||||
text: '<div class="panel panel-primary" id="' + panelId + '">' +
|
||||
'<div class="panel-heading">' +
|
||||
'<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 table = $('#' + tableId).dataTable();
|
||||
var tbl = $('#' + 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);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@media (max-width: 979px) {
|
||||
@media (max-width: 768px) {
|
||||
table, thead, tbody, th, td, tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user