* Added template "preload" ability

* Added caching templates as "compiled" templates * moved table description panel to template
2024-12-22 13:34:04 +03:00 · 2013-11-21 11:01:30 +00:00 · 2013-11-21 11:01:30 +00:00 · 127c36f364
commit 127c36f364
parent dbd4531376
8 changed files with 115 additions and 149 deletions
--- a/server/src/uds/static/adm/js/api-templates.js
+++ b/server/src/uds/static/adm/js/api-templates.js
@ -3,33 +3,37 @@
 // Inserted into api
 // for the admin app
 // -------------------------------
-(function(templates, $) {
-    templates.cache = {}; // Will cache templates locally. If name contains
+(function(api, $) {
+    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 (success_fnc !== undefined) {
-                    success_fnc($this.cache[name]);
-                }
+            if ($this.cache.get(name) ) {
+                success_fnc($this.cache.get(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) {
-                    api.doLog('Executing success method');
-                    success_fnc(data);
-                }
+                success_fnc(cachedId);
            },
            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));
--- a/server/src/uds/static/adm/js/gui-elements.js
+++ b/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) {
-            gui.doLog(data);
-            gui.doLog(this);
-            gui.doLog(this.fnGetSelectedData());
+        onEdit: function(value, event, table) {
+            gui.providers.rest.gui(value.type, {
+               success: function(data){
+                   gui.fields(data);
+               },
+            });
        },
        buttons : [ 'edit', 'delete', 'xls' ],
    });
--- a/server/src/uds/static/adm/js/gui-fields.js
+++ b/server/src/uds/static/adm/js/gui-fields.js
@ -1,42 +1,44 @@
 /* jshint strict: true */
 (function(gui, $, undefined) {
    "use strict";
-    
+
    // Returns a form that will manage a gui description (new or edit)
    gui.fields = function(item_description) {
        $.each(item_description, function(index, field){
           gui.doLog(field); 
        });
    };
+
+    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'
-        },
-};
--- a/server/src/uds/static/adm/js/gui.js
+++ b/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 + '">' +
-                 '<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>',
+           text: api.templates.evaluate('tmpl_table', {
+                     panelId: panelId,
+                     icon: options.icon || 'table',
+                     size: options.size || 12,
+                     title: title,
+                     table_id: table_id
+                 }),
           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];
--- a/server/src/uds/templates/uds/admin/index.html
+++ b/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>
        
@ -96,13 +95,16 @@
        
        <script>
            $(function() {
-    			// Initialize gui        
+    			// Initialize gui
            	gui.init();
            	
            });        
        </script>
-
-        
        {% block js %}{% endblock %}
+        <!-- templates -->
+        {% js_template_path 'uds/admin/tmpl' %}
+        {% js_template 'dashboard' %}
+        {% js_template 'authenticators' %}
+        {% js_template 'table' %}
    </body>
 </html>
--- a/server/src/uds/templates/uds/admin/tmpl/table.html
+++ b/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>
--- a/server/src/uds/templates/uds/admin/tmpl/test.html
+++ b/server/src/uds/templates/uds/admin/tmpl/test.html
@ -1,79 +1,3 @@
-<?xml version="1.0"?>
-<?mso-application progid="Excel.Sheet"?>
-<Workbook
-   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>
+<div>
+    <p> pepito </p>
+</div>
--- a/server/src/uds/templatetags/REST.py
+++ b/server/src/uds/templatetags/REST.py
@ -51,4 +51,15 @@ def auth_token(context):

@register.simple_tag(name='auth_token_header')
 def auth_token_header():
-    return 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>'