From 67a691768e1e0b5b0a9973c3363d86de269f5915 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adolfo=20G=C3=B3mez?= Date: Mon, 18 Nov 2013 02:54:05 +0000 Subject: [PATCH] added "cute" 3d buttons :-) --- server/src/uds/admin/views.py | 3 +- server/src/uds/static/adm/css/buttons.css | 40 ++++++++++ server/src/uds/static/adm/css/uds-admin.css | 5 +- server/src/uds/static/adm/js/api.js | 65 +-------------- .../uds/static/adm/js/dataTables.bootstrap.js | 2 +- server/src/uds/static/adm/js/gui-elements.js | 38 +++++---- server/src/uds/static/adm/js/gui.js | 48 ++++++----- server/src/uds/static/adm/js/spreadsheet.js | 15 ++++ server/src/uds/static/adm/js/templates.js | 62 +++++++++++++++ server/src/uds/static/adm/js/tools.js | 5 ++ server/src/uds/templates/uds/admin/index.html | 12 +++ .../uds/admin/tmpl/connectivity.html | 16 ++++ .../templates/uds/admin/tmpl/spreadsheet.html | 60 ++++++++++++++ .../uds/templates/uds/admin/tmpl/test.html | 79 +++++++++++++++++++ 14 files changed, 344 insertions(+), 106 deletions(-) create mode 100644 server/src/uds/static/adm/css/buttons.css create mode 100644 server/src/uds/static/adm/js/spreadsheet.js create mode 100644 server/src/uds/static/adm/js/templates.js create mode 100644 server/src/uds/static/adm/js/tools.js create mode 100644 server/src/uds/templates/uds/admin/tmpl/connectivity.html create mode 100644 server/src/uds/templates/uds/admin/tmpl/spreadsheet.html create mode 100644 server/src/uds/templates/uds/admin/tmpl/test.html diff --git a/server/src/uds/admin/views.py b/server/src/uds/admin/views.py index 3083799fc..d80c6e407 100644 --- a/server/src/uds/admin/views.py +++ b/server/src/uds/admin/views.py @@ -65,7 +65,8 @@ def tmpl(request, template): t = loader.get_template('uds/admin/tmpl/' + template + ".html") c = RequestContext(request) resp = t.render(c) - except: + except Exception as e: + logger.debug('Exception getting template: {0}'.format(e)) resp = _('requested a template that do not exists') return HttpResponse(resp, content_type="text/plain"); diff --git a/server/src/uds/static/adm/css/buttons.css b/server/src/uds/static/adm/css/buttons.css new file mode 100644 index 000000000..a874d5407 --- /dev/null +++ b/server/src/uds/static/adm/css/buttons.css @@ -0,0 +1,40 @@ +.btn3d { + transition:all .08s linear; + position:relative; + outline:medium none; + -moz-outline-style:none; + border:0px; + margin-right:10px; + margin-top:15px; +} +.btn3d:focus { + outline:medium none; + -moz-outline-style:none; +} +.btn3d:active { + top:9px; +} +.btn-default { + box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); + background-color:#fff; +} +.btn-primary { + box-shadow:0 0 0 1px #428bca inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #357ebd, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); + background-color:#428bca; +} + .btn-success { + box-shadow:0 0 0 1px #5cb85c inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4cae4c, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); + background-color:#5cb85c; +} + .btn-info { + box-shadow:0 0 0 1px #5bc0de inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #46b8da, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); + background-color:#5bc0de; +} +.btn-warning { + box-shadow:0 0 0 1px #f0ad4e inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #eea236, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); + background-color:#f0ad4e; +} +.btn-danger { + box-shadow:0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #C24032, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); + background-color:#c63702; +} diff --git a/server/src/uds/static/adm/css/uds-admin.css b/server/src/uds/static/adm/css/uds-admin.css index 022d788ef..d586bb005 100644 --- a/server/src/uds/static/adm/css/uds-admin.css +++ b/server/src/uds/static/adm/css/uds-admin.css @@ -82,10 +82,11 @@ table.tablesorter thead tr th:hover { height: 100%; } -.tbl-button-active { - font-weight: bolder; +.btn3d-tables { + margin-top:0px; } + /* Edit Below to Customize Widths > 768px */ @media (min-width:768px) { diff --git a/server/src/uds/static/adm/js/api.js b/server/src/uds/static/adm/js/api.js index 11e0f9df7..7f43691f1 100644 --- a/server/src/uds/static/adm/js/api.js +++ b/server/src/uds/static/adm/js/api.js @@ -142,67 +142,4 @@ api.networks = new BasicModelRest('networks'); // Locale related api.locale = new BasicModelRest('locale'); -api.locale.tableInfo = api.locale.types = undefined; - -// ------------------------------- -// Templates related -// This is not part of REST api provided by UDS, but it's part of the api needed -// for the admin app -// ------------------------------- -(function(templates, $) { - templates.cache = {}; // Will cache templates locally. If name contains - // '?', data will not be cached and always - // re-requested - templates.get = function(name, success_fnc) { - api.doLog('Getting tempkate ' + name); - if (name.indexOf('?') != -1) { - if (templates.cache[name] !== undefined) { - if (success_fnc !== undefined) { - success_fnc(templates.cache[name]); - } - return; - } - } - $.ajax({ - url : '/adm/tmpl/' + name, - type : "GET", - dataType : "text", - success : function(data) { - templates.cache[name] = data; - api.doLog('Success getting template "' + name + '".'); - api.doLog('Received: ' + data); - if (success_fnc !== undefined) { - api.doLog('Executing success method'); - success_fnc(data); - } - }, - fail: function( jqXHR, textStatus, errorThrown ) { - api.doLog(jqXHR); - api.doLog(textStatus); - apid.doLog(errorThrown); - }, - }); - }; - - // Simple JavaScript Templating - // Based on John Resig - http://ejohn.org/ - MIT Licensed - templates.evaluate = function tmpl(str, data) { - // Figure out if we're getting a template, or if we need to - // load the template - and be sure to cache the result. - var fn = - // Generate a reusable function that will serve as a template - // generator (and which will be cached). - new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + - - // Introduce the data as local variables using with(){} - "with(obj){p.push('" + - - // Convert the template into pure JavaScript - str.replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace( - /\t=(.*?)%>/g, "',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join( - "\\'") + "');}return p.join('');"); - - // Provide some basic currying to the user - return data ? fn(data) : fn; - }; -}(api.templates = api.templates || {}, jQuery)); +api.locale.tableInfo = api.locale.types = undefined; \ No newline at end of file diff --git a/server/src/uds/static/adm/js/dataTables.bootstrap.js b/server/src/uds/static/adm/js/dataTables.bootstrap.js index ba563e81e..b49650e72 100644 --- a/server/src/uds/static/adm/js/dataTables.bootstrap.js +++ b/server/src/uds/static/adm/js/dataTables.bootstrap.js @@ -116,7 +116,7 @@ $.extend( $.fn.dataTableExt.oPagination, { if ( $.fn.DataTable.TableTools ) { // Set the classes that TableTools uses to something suitable for Bootstrap $.extend( true, $.fn.DataTable.TableTools.classes, { - "container": "DTTT btn-group", + "container": "DTTT btn-group-3d", "buttons": { "normal": "btn btn-default", "disabled": "disabled" diff --git a/server/src/uds/static/adm/js/gui-elements.js b/server/src/uds/static/adm/js/gui-elements.js index dfdc4d8b9..bb6043a27 100644 --- a/server/src/uds/static/adm/js/gui-elements.js +++ b/server/src/uds/static/adm/js/gui-elements.js @@ -13,7 +13,7 @@ gui.providers.link = function(event) { gui.doLog(this); gui.doLog(this.fnGetSelectedData()); }, - buttons : [ 'edit', 'refresh', 'delete' ], + buttons : [ 'edit', 'refresh', 'delete', 'xls' ], }); return false; @@ -37,14 +37,14 @@ gui.authenticators.link = function(event) { gui.authenticators.table({ container : 'auths-placeholder', rowSelect : 'single', - buttons : [ 'edit', 'refresh', 'delete' ], + buttons : [ 'edit', 'refresh', 'delete', 'xls' ], onRowSelect : function(nodes) { var id = this.fnGetSelectedData()[0].id; var user = new GuiElement(api.authenticators.users.detail(id), 'users'); user.table({ container : 'users-placeholder', rowSelect : 'multi', - buttons : [ 'edit', 'refresh', 'delete' ], + buttons : [ 'edit', 'refresh', 'delete', 'xls' ], scroll : true, }); return false; @@ -65,7 +65,7 @@ gui.osmanagers.link = function(event) { gui.osmanagers.table({ rowSelect : 'single', - buttons : [ 'edit', 'refresh', 'delete' ], + buttons : [ 'edit', 'refresh', 'delete', 'xls' ], }); return false; @@ -77,19 +77,23 @@ gui.connectivity = { }; gui.connectivity.link = function(event) { - gui.clearWorkspace(); - gui.appendToWorkspace(gui.breadcrumbs(gettext('Connectivity'))); - gui - .appendToWorkspace('
'); + api.templates.get('connectivity', function(tmpl) { + gui.clearWorkspace(); + gui.appendToWorkspace(api.templates.evaluate(tmpl, { + transports : 'transports-placeholder', + networks : 'networks-placeholder' + })); - gui.connectivity.transports.table({ - rowSelect : 'multi', - container : 'ttbl', - buttons : [ 'edit', 'refresh', 'delete', 'pdf' ], - }); - gui.connectivity.networks.table({ - rowSelect : 'multi', - container : 'ntbl', - buttons : [ 'edit', 'refresh', 'delete' ], + gui.connectivity.transports.table({ + rowSelect : 'multi', + container : 'transports-placeholder', + buttons : [ 'edit', 'refresh', 'delete', 'xls' ], + }); + gui.connectivity.networks.table({ + rowSelect : 'multi', + container : 'networks-placeholder', + buttons : [ 'edit', 'refresh', 'delete', 'xls' ], + }); }); + }; diff --git a/server/src/uds/static/adm/js/gui.js b/server/src/uds/static/adm/js/gui.js index ab4e3fbf5..1b380fadd 100644 --- a/server/src/uds/static/adm/js/gui.js +++ b/server/src/uds/static/adm/js/gui.js @@ -185,8 +185,6 @@ GuiElement.prototype = { // Icon renderer, based on type (created on init methods in styles) var renderTypeIcon = function(data, type, value){ - gui.doLog(type); - gui.doLog(data); if( type == 'display' ) { var css = $this.types[value.type].css; return ' ' + renderEmptyCell(data); @@ -351,7 +349,7 @@ GuiElement.prototype = { "sButtonText" : gettext('Edit'), "fnSelect" : editSelected, "fnClick" : editFnc, - "sButtonClass" : "disabled" + "sButtonClass" : "disabled btn3d btn3d-tables" }; break; case 'delete': @@ -360,7 +358,7 @@ GuiElement.prototype = { "sButtonText" : gettext('Delete'), "fnSelect" : deleteSelected, "fnClick" : deleteFnc, - "sButtonClass" : "disabled" + "sButtonClass" : "disabled btn3d btn3d-tables" }; break; case 'refresh': @@ -368,7 +366,7 @@ GuiElement.prototype = { "sExtends" : "text", "sButtonText" : gettext('Refresh'), "fnClick" : refreshFnc, - "sButtonClass" : "btn-info" + "sButtonClass" : "btn-info btn3d btn3d-tables" }; break; case 'xls': @@ -376,34 +374,42 @@ GuiElement.prototype = { "sExtends" : "text", "sButtonText" : 'xls', "fnClick" : function(){ - // Simple export, based on http://jsfiddle.net/lesson8/wVejP/ - var uri = 'data:application/vnd.ms-excel;base64,', - template = '<%= table %>
', - base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))); }; - - table = ''; + api.templates.get('spreadsheet', function(tmpl) { + var styles = { 'bold': 's21', }; + var uri = 'data:application/vnd.ms-excel;base64,', + base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))); }; + + var headings = [], rows = []; $.each(columns, function(index, heading){ if( heading.bVisible === false ) { return; } - table += '' + heading.sTitle + ''; + headings.push(api.spreadsheet.cell(heading.sTitle, 'String', styles.bold)); }); - table += ''; + rows.push(api.spreadsheet.row(headings)); $.each(data, function(index, row) { - var tr = ''; + var cells = []; $.each(columns, function(index, col){ if( col.bVisible === false ) { return; } - tr += '' + row[col.mData] + ''; + var type = col.sType == 'numeric' ? 'Number':'String'; + cells.push(api.spreadsheet.cell(row[col.mData], type)); }); - table += '' + tr + ''; + rows.push(api.spreadsheet.row(cells)); }); - table += ''; - var ctx = {worksheet: title, table: table}; - window.location.href = uri + base64(api.templates.evaluate(template, ctx)); + + var ctx = { + creation_date: (new Date()).toISOString(), + worksheet: title, + columns_count: headings.length, + rows_count: rows.length, + rows: rows.join('\n') + }; + window.location.href = uri + base64(api.templates.evaluate(tmpl, ctx)); + }); }, - "sButtonClass" : "btn-info" + "sButtonClass" : "btn-info btn3d btn3d-tables" }; /*case 'csv': btn = { @@ -457,7 +463,7 @@ GuiElement.prototype = { // First is upper row, // second row is lower // (pagination) row - "sDom" : "<'row'<'col-xs-6'T><'col-xs-6'f>r>t<'row'<'col-xs-5'i><'col-xs-7'p>>", + "sDom" : "<'row'<'col-xs-8'T><'col-xs-4'f>r>t<'row'<'col-xs-5'i><'col-xs-7'p>>", }); $('#' + tableId + '_filter input').addClass('form-control'); diff --git a/server/src/uds/static/adm/js/spreadsheet.js b/server/src/uds/static/adm/js/spreadsheet.js new file mode 100644 index 000000000..915a44cfc --- /dev/null +++ b/server/src/uds/static/adm/js/spreadsheet.js @@ -0,0 +1,15 @@ +(function(spreadsheet, $, undefined) { + spreadsheet.cell = function(data, type, style) { + type = type || 'String'; + if( style !== undefined ) { + style = ' ss:StyleID="' + style + '"'; + } else { + style = ''; + } + return '' + data + ''; + }; + + spreadsheet.row = function(cell) { + return '' + cell + ''; + }; +}(api.spreadsheet = api.spreadsheet || {}, jQuery)); diff --git a/server/src/uds/static/adm/js/templates.js b/server/src/uds/static/adm/js/templates.js new file mode 100644 index 000000000..ee436f48e --- /dev/null +++ b/server/src/uds/static/adm/js/templates.js @@ -0,0 +1,62 @@ +// ------------------------------- +// Templates related +// Inserted into api +// for the admin app +// ------------------------------- +(function(templates, $) { + templates.cache = {}; // Will cache templates locally. If name contains + // '?', data will not be cached and always + // re-requested. We do not care about lang, because page will reload on language change + templates.get = function(name, success_fnc) { + api.doLog('Getting tempkate ' + name); + if (name.indexOf('?') != -1) { + if (templates.cache[name] !== undefined) { + if (success_fnc !== undefined) { + success_fnc(templates.cache[name]); + } + return; + } + } + $.ajax({ + url : '/adm/tmpl/' + name, + type : "GET", + dataType : "text", + success : function(data) { + templates.cache[name] = data; + api.doLog('Success getting template "' + name + '".'); + api.doLog('Received: ' + data); + if (success_fnc !== undefined) { + api.doLog('Executing success method'); + success_fnc(data); + } + }, + fail: function( jqXHR, textStatus, errorThrown ) { + api.doLog(jqXHR); + api.doLog(textStatus); + apid.doLog(errorThrown); + }, + }); + }; + + // Simple JavaScript Templating + // Based on John Resig - http://ejohn.org/ - MIT Licensed + templates.evaluate = function tmpl(str, data) { + // Figure out if we're getting a template, or if we need to + // load the template - and be sure to cache the result. + var fn = + // Generate a reusable function that will serve as a template + // generator (and which will be cached). + new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + + + // Introduce the data as local variables using with(){} + "with(obj){p.push('" + + + // Convert the template into pure JavaScript + str.replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace( + /\t=(.*?)%>/g, "',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join( + "\\'") + "');}return p.join('');"); + + // Provide some basic currying to the user + return data ? fn(data) : fn; + }; +}(api.templates = api.templates || {}, jQuery)); diff --git a/server/src/uds/static/adm/js/tools.js b/server/src/uds/static/adm/js/tools.js new file mode 100644 index 000000000..054d7503b --- /dev/null +++ b/server/src/uds/static/adm/js/tools.js @@ -0,0 +1,5 @@ +(function(tools, $, undefined) { + tools.base64 = function(s) { + return window.btoa(unescape(encodeURIComponent(s))); + }; +}(api.tools = api.tools || {}, jQuery)); diff --git a/server/src/uds/templates/uds/admin/index.html b/server/src/uds/templates/uds/admin/index.html index 88f5cbffd..74aeb88d8 100644 --- a/server/src/uds/templates/uds/admin/index.html +++ b/server/src/uds/templates/uds/admin/index.html @@ -23,6 +23,7 @@ + @@ -70,6 +71,17 @@ }(window.api = window.api || {}, jQuery)); + + + + + + + + + + + diff --git a/server/src/uds/templates/uds/admin/tmpl/connectivity.html b/server/src/uds/templates/uds/admin/tmpl/connectivity.html new file mode 100644 index 000000000..372f330bb --- /dev/null +++ b/server/src/uds/templates/uds/admin/tmpl/connectivity.html @@ -0,0 +1,16 @@ +{% load i18n html5 static %} +
+
+

{% trans 'Connectivity' %} {% trans 'overview' %}

+
    +
  1. Dashboard
    2. +
+
+
+ +
+
+
+
+
+
\ No newline at end of file diff --git a/server/src/uds/templates/uds/admin/tmpl/spreadsheet.html b/server/src/uds/templates/uds/admin/tmpl/spreadsheet.html new file mode 100644 index 000000000..9ed3ca7f7 --- /dev/null +++ b/server/src/uds/templates/uds/admin/tmpl/spreadsheet.html @@ -0,0 +1,60 @@ + + + + + UDS Administration + UDS Administration Interface + <%= creation_date %> + UDS + 1.0 + + + 6795 + 8460 + 120 + 15 + False + False + + + + + + + + <%= rows %> +
+ + + + 600 + 600 + + + + + 3 + 5 + 1 + + + False + False + + + diff --git a/server/src/uds/templates/uds/admin/tmpl/test.html b/server/src/uds/templates/uds/admin/tmpl/test.html new file mode 100644 index 000000000..a33f4c8fb --- /dev/null +++ b/server/src/uds/templates/uds/admin/tmpl/test.html @@ -0,0 +1,79 @@ + + + + + Darl McBride + Bill Gates + 2007-03-15T23:04:04Z + SCO Group, Inc. + 11.8036 + + + 6795 + 8460 + 120 + 15 + False + False + + + + + + + + + + Texto en celda A1 + + + + + Texto en negrita en celda A2 + + + + + 43 + + + + + 21.5 + + +
+ + + + 600 + 600 + + + + + 3 + 5 + 1 + + + False + False + + +