* Added template "preload" ability

* Added caching templates as "compiled" templates
* moved table description panel to template

server/src/uds/static/adm/js/api-templates.js

@@ -3,33 +3,37 @@
 // Inserted into api
 // for the admin app
 // -------------------------------
-(function(templates, $) {
+(function(api, $) {
-    templates.cache = {}; // Will cache templates locally. If name contains
+    api.templates = {};
+    
+    api.templates.cache = new api.cache('tmpls'); // 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.templates.get = function(name, success_fnc) {
         var $this = this;
+        success_fnc = success_fnc || function(){};
         api.doLog('Getting tempkate ' + name);
         if (name.indexOf('?') == -1) {
-            if ($this.cache[name] !== undefined) {
+            if ($this.cache.get(name) ) {
-                if (success_fnc !== undefined) {
+                success_fnc($this.cache.get(name));
-                    success_fnc($this.cache[name]);
+                return;
-                }
+             // Let's check if a "preloaded template" exists                
+            } else if( document.getElementById('tmpl_' + name) ) { 
+                success_fnc('tmpl_' + name);
                 return;
             }
         }
         $.ajax({
-            url : '/adm/tmpl/' + name,
+            url : api.template_url + name,
             type : "GET",
             dataType : "text",
             success : function(data) {
-                $this.cache[name] = data;
+                var cachedId = name;
+                $this.cache.put('_' + cachedId, $this.evaluate(data));
+                $this.cache.put(name, cachedId);
                 api.doLog('Success getting template "' + name + '".');
                 api.doLog('Received: ' + data);
-                if (success_fnc !== undefined) {
+                success_fnc(cachedId);
-                    api.doLog('Executing success method');
-                    success_fnc(data);
-                }
             },
             fail: function( jqXHR, textStatus, errorThrown ) {
                 api.doLog(jqXHR);
@@ -41,10 +45,20 @@
 
     // Simple JavaScript Templating
     // Based on John Resig - http://ejohn.org/ - MIT Licensed
-    templates.evaluate = function tmpl(str, data) {
+    api.templates.evaluate = function (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 =
+        var cached;
+        if( !/\W/.test(str) ) {
+            cached = this.cache.get('_'+str);
+            if( cached === undefined ) {
+                cached = api.templates.evaluate(document.getElementById(str).innerHTML);
+                this.cache.put('_'+str, cached);
+            }
+            
+        }
+        // If cached, get cached first
+        var fn =  cached ||
         // 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);};" +
@@ -60,4 +74,4 @@
         // Provide some basic currying to the user
         return data ? fn(data) : fn;
     };
-}(api.templates = api.templates || {}, jQuery));
+}(window.api = window.api || {}, jQuery));

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

@@ -34,10 +34,12 @@ gui.providers.link = function(event) {
 
     var tableId = gui.providers.table({
         rowSelect : 'multi',
-        rowSelectFnc : function(data) {
+        onEdit: function(value, event, table) {
-            gui.doLog(data);
+            gui.providers.rest.gui(value.type, {
-            gui.doLog(this);
+               success: function(data){
-            gui.doLog(this.fnGetSelectedData());
+                   gui.fields(data);
+               },
+            });
         },
         buttons : [ 'edit', 'delete', 'xls' ],
     });

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

@@ -9,34 +9,36 @@
         });
     };
 
+    gui.fields.config = {
+            text: {
+                css: 'form-control'
+                
+            },
+            textbox: {
+                css: 'form-control'
+            },
+            numeric: {
+                css: 'form-control'
+            },
+            password: {
+                css: 'form-control'
+            },
+            hidden: {
+                css: ''
+            },
+            choice: {
+                css: ''
+            },
+            multichoice: {
+                css: ''
+            },
+            editlist: {
+                css: ''
+            },
+            checkbox: {
+                css: 'form-control'
+            },
+    };
+    
 }(window.gui = window.gui || {}, jQuery));
 
-gui.fields.options = {
-        text: {
-            css: 'form-control'
-        },
-        textbox: {
-            
-        },
-        numeric: {
-            css: 'form-control'
-        },
-        password: {
-            css: 'form-control'
-        },
-        hidden: {
-            css: ''
-        },
-        choice: {
-            css: ''
-        },
-        multichoice: {
-            css: ''
-        },
-        editlist: {
-            css: ''
-        },
-        checkbox: {
-            css: 'form-control'
-        },
-};

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

@@ -9,7 +9,6 @@
             } catch (e) {
                 // nothing can be logged
             }
-
         }
     };
     
@@ -59,20 +58,16 @@
     gui.table = function(title, table_id, options) {
         options = options || {};
         var size = options.size || 12;
-        var icon = options.icon || 'table';
         var panelId = 'panel-' + table_id;
 
         return {
-           text: '<div class="panel panel-primary" id="' + panelId + '">' +
+           text: api.templates.evaluate('tmpl_table', {
-                 '<div class="panel-heading">' +
+                     panelId: panelId,
-                 '<h3 class="panel-title"><span class="fa fa-' + icon + '"></span> ' + title + 
+                     icon: options.icon || 'table',
-                 '<span class="panel-icon fa fa-dot-circle-o pull-right" onclick="$(\'#'+panelId + '\').remove();"> </span>' +
+                     size: options.size || 12,
-                 '<span class="panel-icon fa chevron pull-right" data-toggle="collapse" data-target="#' + panelId  + ' > div.panel-body"> </span>' +
+                     title: title,
-                 '<span class="panel-icon fa fa-refresh pull-right"> </span>' +
+                     table_id: table_id
-                 '</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'
         };
@@ -350,7 +345,7 @@ GuiElement.prototype = {
     
                         if (options.buttons) {
                             var clickHandlerFor = function(handler, action) {
-                                var handleFnc = handler || function(val, action, tbl, tbltools) {gui.doLog('Default handler called for ' + action + ': ' + JSON.stringify(val));};
+                                var handleFnc = handler || function(val, action, tbl) {gui.doLog('Default handler called for ' + action + ': ' + JSON.stringify(val));};
                                 return function(btn) {
                                     var tbl = $('#' + tableId).dataTable();
                                     var val = this.fnGetSelectedData()[0];

server/src/uds/templates/uds/admin/index.html

@@ -65,6 +65,7 @@
                 api.token = "{% auth_token %}";
                 api.auth_header = "{% auth_token_header %}";
                 api.base_url = "{% url 'REST' '' %}";
+                api.template_url = "{% url 'uds.admin.views.tmpl' '' %}";
                 api.img_url = "{% get_static_prefix %}adm/img/";
                 
                 api.url_for = function(path) {
@@ -81,13 +82,11 @@
         <script src="{% get_static_prefix %}adm/js/api-tools.js"></script>
         
         <!--  templates related, inserts itself into api -->
-        <script src="{% get_static_prefix %}adm/js/templates.js"></script>
+        <script src="{% get_static_prefix %}adm/js/api-templates.js"></script>
         
         <!--  export to xls, inserts itself into api -->
         <script src="{% get_static_prefix %}adm/js/api-spreadsheet.js"></script>
         
-        
-        
         <script src="{% get_static_prefix %}adm/js/gui.js"></script>
         <script src="{% get_static_prefix %}adm/js/gui-fields.js"></script>
         
@@ -101,8 +100,11 @@
             	
             });        
         </script>
-
-        
         {% block js %}{% endblock %}
+        <!-- templates -->
+        {% js_template_path 'uds/admin/tmpl' %}
+        {% js_template 'dashboard' %}
+        {% js_template 'authenticators' %}
+        {% js_template 'table' %}
     </body>
 </html>

server/src/uds/templates/uds/admin/tmpl/table.html

@@ -0,0 +1,16 @@
+<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>

server/src/uds/templates/uds/admin/tmpl/test.html

@@ -1,79 +1,3 @@
-<?xml version="1.0"?>
+<div>
-<?mso-application progid="Excel.Sheet"?>
+    <p> pepito </p>
-<Workbook
+</div>
-   xmlns="urn:schemas-microsoft-com:office:spreadsheet"
-   xmlns:o="urn:schemas-microsoft-com:office:office"
-   xmlns:x="urn:schemas-microsoft-com:office:excel"
-   xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
-   xmlns:html="http://www.w3.org/TR/REC-html40">
-  <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
-    <Author>Darl McBride</Author>
-    <LastAuthor>Bill Gates</LastAuthor>
-    <Created>2007-03-15T23:04:04Z</Created>
-    <Company>SCO Group, Inc.</Company>
-    <Version>11.8036</Version>
-  </DocumentProperties>
-  <ExcelWorkbook xmlns="urn:schemas-microsoft-com:office:excel">
-    <WindowHeight>6795</WindowHeight>
-    <WindowWidth>8460</WindowWidth>
-    <WindowTopX>120</WindowTopX>
-    <WindowTopY>15</WindowTopY>
-    <ProtectStructure>False</ProtectStructure>
-    <ProtectWindows>False</ProtectWindows>
-  </ExcelWorkbook>
-  <Styles>
-    <Style ss:ID="Default" ss:Name="Normal">
-      <Alignment ss:Vertical="Bottom" />
-      <Borders />
-      <Font />
-      <Interior />
-      <NumberFormat />
-      <Protection />
-    </Style>
-    <Style ss:ID="s21">
-      <Font x:Family="Swiss" ss:Bold="1" />
-    </Style>
-  </Styles>
-  <Worksheet ss:Name="Sheet1">
-    <Table ss:ExpandedColumnCount="2" ss:ExpandedRowCount="5"
-           x:FullColumns="1" x:FullRows="1">
-      <Row>
-        <Cell>
-          <Data ss:Type="String">Texto en celda A1</Data>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell ss:StyleID="s21">
-          <Data ss:Type="String">Texto en negrita en celda A2</Data>
-        </Cell>
-      </Row>
-      <Row ss:Index="4">
-        <Cell ss:Index="2">
-          <Data ss:Type="Number">43</Data>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell ss:Index="2" ss:Formula="=R[-1]C/2">
-          <Data ss:Type="Number">21.5</Data>
-        </Cell>
-      </Row>
-    </Table>
-    <WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
-      <Print>
-        <ValidPrinterInfo />
-        <HorizontalResolution>600</HorizontalResolution>
-        <VerticalResolution>600</VerticalResolution>
-      </Print>
-      <Selected />
-      <Panes>
-        <Pane>
-          <Number>3</Number>
-          <ActiveRow>5</ActiveRow>
-          <ActiveCol>1</ActiveCol>
-        </Pane>
-      </Panes>
-      <ProtectObjects>False</ProtectObjects>
-      <ProtectScenarios>False</ProtectScenarios>
-    </WorksheetOptions>
-  </Worksheet>
-</Workbook>

server/src/uds/templatetags/REST.py

@@ -52,3 +52,14 @@ def auth_token(context):
 @register.simple_tag(name='auth_token_header')
 def auth_token_header():
     return AUTH_TOKEN_HEADER
+
+@register.simple_tag(name='js_template_path', takes_context=True)
+def js_template_path(context, path):
+    context['template_path'] = path
+    return ''
+
+@register.simple_tag(name='js_template', takes_context=True)
+def js_template(context, template_name, template_id = None):
+    template_id = template_id or 'tmpl_' + template_name
+    tmpl = template.loader.get_template(context['template_path'] + '/' +  template_name + '.html')
+    return '<script id="{0}" type="text/html">\n'.format(template_id) + tmpl.render(context) + '\n</script>'