JS updates. Added list / edit / add / delete functionality. Added Helpers methods.

web/js/__init__.js

@@ -1,17 +1,15 @@
 $(document).ready(function(){
     try{
         App.Utils.detectBrowser();
-        
+        App.Env.world = 'CRON';
-        App.Env.world = 'USER';
         App.Pages.init();
-        
         App.Ref.init();
-            
+
         //App.View.start();
         App.Core.listen();
         App.Core.initMenu();
         App.Helpers.liveValidate();
-    
+
     }catch(e){
         fb.error(e);
     }

web/js/_settings.js

@@ -3,16 +3,18 @@ App.i18n.EN = {};
 App.i18n.EN.incorrect_ip = 'Incorrect ip';
 App.i18n.EN.confirm = 'Are you sure?';
 App.i18n.getMessage = function(key) 
-{    
+{
     return 'undefined' != typeof App.i18n[App.Env.lang][key] ? App.i18n[App.Env.lang][key] : '';
 }
 
 
 
 // Constants
-App.Constants.IP_FORM_ID    = 'ip-form';
+App.Constants.IP_FORM_ID          = 'ip-form';
-App.Constants.DNS_FORM_ID   = 'dns-form';
+App.Constants.DNS_FORM_ID         = 'dns-form';
-App.Constants.USER_FORM_ID  = 'user-form';
+App.Constants.USER_FORM_ID        = 'user-form';
+App.Constants.WEB_DOMAIN_FORM_ID  = 'web_domain-form';
+App.Constants.DB_FORM_ID          = 'db-form';
 
 App.Settings.ajax_url = 1;
 App.Settings.uri = location.href.replace('index.html', '');

web/js/actions.js

@@ -104,14 +104,9 @@ App.Actions.save_form = function(evt) {
         var source = $(elm).find('.source').val();
         var values = App.Helpers.getFormValues(elm);
         if(App.Validate.form(values, $('#'+elm_id))) {
-            App.Model.add(values, source);
+            App.Model.add(values, source);         
-            //var form_id = App.Constants[App.Env.world + '_FORM_ID'];
-            //$('#'+form_id).remove();
             App.Model.update(values, source, elm);         
-        }
+        }       
-        /*if(App.Validate.form(values, $('#'+elm_id))) {
-            App.Model.update(values, source);           
-        }*/
     }    
 }
 
@@ -148,6 +143,16 @@ App.Actions.cancel_form = function(evt, params) {
     App.Helpers.updateScreen();
 }
 
+App.Actions.suspend = function(evt)
+{
+    alert('Suspend?');
+}
+
+App.Actions.unsuspend = function(evt)
+{
+    alert('Unsuspend?');
+}
+
 // do_action_form_help
 App.Actions.showFormHelp = function(evt) {
     var tpl_name = App.Env.world + '_form';
@@ -188,3 +193,39 @@ App.Actions.generate_pass = function()
 {
     $('.password').val(App.Helpers.generatePassword());
 }
+
+App.Actions.toggle_section = function(evt)
+{
+    var elm = $(evt.target);    
+    var ref = $(elm).parents('.form-options-group:first');
+    fb.log(ref);
+    if ($('.sub_section:first', ref).hasClass('hidden')) {
+        $('.sub_section:first', ref).removeClass('hidden');
+        $('.group-header:first', ref).removeClass('collapsed').addClass('expanded');
+    }
+    else {
+        $('.sub_section:first', ref).addClass('hidden');
+        $('.group-header:first', ref).removeClass('expanded').addClass('collapsed');
+    }
+}
+
+App.Actions.close_inner_popup = function(evt)
+{
+    App.Helpers.closeInnerPopup();
+}
+
+App.Actions.open_inner_popup = function(evt)
+{
+    var elm = $(evt.target);  
+    App.Helpers.openInnerPopup(elm, $(elm).next('.inner-popup-html').val());
+}
+
+App.Actions.add_db_user = function(evt)
+{
+    alert('TODO');
+}
+
+App.Actions.backup_db = function(evt)
+{
+    alert('TODO');
+}

web/js/helpers.js

@@ -1,3 +1,44 @@
+
+
+App.Helpers.getMbHumanMeasure = function(val)
+{  
+    return App.Helpers.getMbHuman(val, true);
+}
+
+/**
+ * Currently no bytes are used, minimal value is in MB
+ * uncomment in case we will use bytes instead
+ */
+App.Helpers.getMbHuman = function(val, only_measure)
+{
+    var bytes     = val * 1024 * 1024;
+    var kilobyte  = 1024;
+    var megabyte  = kilobyte * 1024;
+    var gigabyte  = megabyte * 1024;
+    var terabyte  = gigabyte * 1024;
+    var precision = 0;
+   
+    /*if ((bytes >= 0) && (bytes < kilobyte)) {
+        return bytes + ' B';
+ 
+    } else if ((bytes >= kilobyte) && (bytes < megabyte)) {
+        return (bytes / kilobyte).toFixed(precision) + ' KB';
+ 
+    } else */
+    if ((bytes >= megabyte) && (bytes < gigabyte)) {
+        return only_measure ? 'MB' : (bytes / megabyte).toFixed(precision);
+ 
+    } else if ((bytes >= gigabyte) && (bytes < terabyte)) {
+        return only_measure ? 'GB' :  (bytes / gigabyte).toFixed(precision);
+ 
+    } else if (bytes >= terabyte) {
+        return only_measure ? 'TB' : (bytes / terabyte).toFixed(precision);
+ 
+    } else {
+        return only_measure ? 'MB' : bytes;
+    }
+}
+
 App.Helpers.getFirst = function(obj)
 {
     try{ // TODO: remove try / catch
@@ -101,22 +142,6 @@ App.Helpers.showConsoleHint = function()
     // TODO:
 }
 
-
-// UTILS
-App.Utils.generatePasswordHash = function(length)
-{
-    var length = length || 11;
-    var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!~.";
-    var pass = "";
-    for(var x=0;x<length;x++)
-    {
-        var i = Math.floor(Math.random() * 62);
-        pass += chars.charAt(i);
-    }
-
-    return pass;
-}
-
 App.Helpers.markBrowserDetails = function()
 {
     var b = App.Env.BROWSER;
@@ -194,12 +219,12 @@ App.Helpers.liveValidate = function()
 
 App.Helpers.generatePassword = function()
 {   
-   var length = 12; 
+   var length = 8; 
-   var chars = "abcdefghijklmn.-%$#&-opqrstuvwxyz.-%$#&-ABCDEFGHIJKLMNOPQRSTUV.-%$#&-WXYZ1234567890.-%$#&-";
+   var chars = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789";
    var pass = "";
 
    for (x=0;x<length;x++) {
-      var i = Math.floor(Math.random() * 62);
+      var i = Math.floor(Math.random() * chars.length);
       pass += chars.charAt(i);
    }
 
@@ -210,3 +235,21 @@ App.Helpers.Warn = function(msg)
 {
     alert(msg);
 }
+
+App.Helpers.openInnerPopup = function(elm, html)
+{
+    App.Helpers.closeInnerPopup();
+    
+    var offset = $(elm).offset();
+    var tpl = App.Templates.get('inner_popup', 'general');
+    tpl.set(':CONTENT', html);
+    tpl.set(':LEFT', offset.left);
+    tpl.set(':TOP', offset.top);
+    
+    $(document.body).append(tpl.finalize());
+}
+
+App.Helpers.closeInnerPopup = function(evt)
+{
+    $('#inner-popup').remove();
+}

web/js/html.js

@@ -2,21 +2,21 @@ App.HTML.setTplKeys = function(tpl, o, empty)
 {
     var empty = empty || '-';
     fb.log(empty);
-    tpl.set(':source', $.toJSON(o))
+    tpl.set(':source', $.toJSON(o).replace(/'/gi, "\\'"))
     $(o).each(function(i, object)
-    {              
+    {
         $.each(o, function(key)
-        {  
+        {
-            var val = o[key];     
+            var val = o[key];
-            if (empty == true) {       
+            if (empty == true) {
                 tpl.set(':' + key, val || '');
             }
             else {
                 tpl.set(':' + key, val || '-');
             }
         });
-    });    
+    });
-    
+
     return tpl;
 }
 
@@ -30,7 +30,7 @@ App.HTML.makeDatabases = function(databases)
         tpl.set(':db_name', o.Database);
         acc[acc.length++] = tpl.finalize();
     });
-    
+
     return acc.done();
 }
 
@@ -45,7 +45,7 @@ App.HTML.makeDbTableList = function(data)
         tpl.set(':table_name', name);
         acc[acc.length++] = tpl.finalize();
     });
-    
+
     return acc.done();
 }
 
@@ -60,7 +60,7 @@ App.HTML.makeDbFieldsList = function(data)
         tpl.set(':details', details);
         acc[acc.length++] = tpl.finalize();
     });
-    
+
     return acc.done();
 }
 
@@ -71,7 +71,7 @@ App.HTML.Build.dns_form = function(options, id)
     }
     var tpl = App.Templates.get('FORM', 'dns');
     tpl.set(':source', options);
-    
+
     options = App.Helpers.evalJSON(options) || {};
     if (App.Helpers.isEmpty(options)) {
        tpl.set(':title', 'New dns record'); 
@@ -81,27 +81,27 @@ App.HTML.Build.dns_form = function(options, id)
         tpl.set(':title', 'Edit dns record'); 
         tpl.set(':save_button', 'SAVE'); 
     }
-    
+
     tpl.set(':id', id || ''); 
     tpl.set(':DNS_DOMAIN', options.DNS_DOMAIN || '');
     tpl.set(':IP', options.IP || '');
     tpl.set(':TTL', options.TTL || '');
     tpl.set(':SOA', options.SOA || '');
     tpl.set(':DATE', options.DATE || '');
-    
+
     tpl = App.HTML.Build.dns_selects(tpl, options);
-    
+
     return tpl.finalize();
 }
 
 App.HTML.Build.ip_form = function(options, id) 
-{
+{try{
     if('undefined' == typeof App.Env.initialParams) {
         return alert('PLease wait a bit. Some background processes are not yet executed. Thank you for patience.');
     }
     var tpl = App.Templates.get('FORM', 'ip');
     tpl.set(':source', options);
-    
+
     options = App.Helpers.evalJSON(options) || {};
     if (App.Helpers.isEmpty(options)) {
        tpl.set(':title', 'New ip address'); 
@@ -111,49 +111,17 @@ App.HTML.Build.ip_form = function(options, id)
         tpl.set(':title', 'Edit ip address'); 
         tpl.set(':save_button', 'SAVE'); 
     }
-    
+
     tpl.set(':id', id || ''); 
     tpl.set(':IP_ADDRESS', options.IP_ADDRESS || '');
     tpl.set(':NETMASK', options.NETMASK || '');
     tpl.set(':NAME', options.NAME || '');
     
     tpl = App.HTML.Build.ip_selects(tpl, options);
-    
+}catch(e){fb.error(e);}
     return tpl.finalize();
 }
 
-App.HTML.Build.ip_selects = function(tpl, options) 
-{
-    // OWNER
-    var opts = App.HTML.Build.options(App.Env.initialParams.IP.SYS_USERS, options.OWNER);
-    tpl.set(':owner_options', opts);
-    
-    // STATUS
-    var opts = App.HTML.Build.options(App.Env.initialParams.IP.STATUSES, options.STATUS);
-    tpl.set(':status_options', opts);
-    
-    // INTERFACE
-    var opts = App.HTML.Build.options(App.Env.initialParams.IP.INTERFACES, options.INTERFACE);
-    tpl.set(':interface_options', opts);
-    
-    return tpl;
-}
-
-App.HTML.Build.dns_selects = function(tpl, options) 
-{    
-    try {
-        // TPL
-        var obj = App.Env.initialParams.DNS.TPL;
-        var opts = App.HTML.Build.options(obj, options.TPL);
-        tpl.set(':TPL', opts);
-        tpl.set(':TPL_DEFAULT_VALUE', options.TPL || App.Helpers.getFirstKey(obj));
-    }
-    catch (e) {        
-        return '';
-    }
-    
-    return tpl;
-}
 
 App.HTML.Build.options = function(initial, default_value) 
 {
@@ -168,17 +136,17 @@ App.HTML.Build.options = function(initial, default_value)
 App.HTML.Build.ip_entry = function(o)
 {
     var tpl = App.Templates.get('ENTRY', 'ip');
-    tpl = App.HTML.setTplKeys(tpl, o);      
+    tpl = App.HTML.setTplKeys(tpl, o);
-       
+
     if (App.Constants.SUSPENDED_YES == o.SUSPENDED) {
         var sub_tpl = App.Templates.get('SUSPENDED_TPL_ENABLED', 'ip');
     }
     else {
         var sub_tpl = App.Templates.get('SUSPENDED_TPL_DISABLED', 'ip');
     }
-    
+
     tpl.set(':SUSPENDED_TPL', sub_tpl.finalize());
-    
+
     return tpl.finalize();
 }
 
@@ -186,7 +154,7 @@ App.HTML.Build.dns_entry = function(o, is_new)
 {
     var tpl = App.Templates.get('ENTRY', 'dns');
     tpl = App.HTML.setTplKeys(tpl, o);      
-    
+
     var ip = o.IP.split('.');
     tpl.set(':IP', ip.join('<span class="dot">.</span>'));    
     tpl.set(':CHECKED', '');
@@ -194,35 +162,39 @@ App.HTML.Build.dns_entry = function(o, is_new)
         var now = new Date();
         tpl.set(':DATE', now.format("d.mm.yyyy"));
     }
-    
+
     if (App.Constants.SUSPENDED_YES == o.SUSPEND) {
-        var sub_tpl = App.Templates.get('SUSPENDED_TPL_ENABLED', 'dns');
+        var sub_tpl = App.Templates.get('SUSPENDED_TPL_NOT_SUSPENDED', 'general');
     }
     else {
-        var sub_tpl = App.Templates.get('SUSPENDED_TPL_DISABLED', 'dns');
+        var sub_tpl = App.Templates.get('SUSPENDED_TPL_SUSPENDED', 'general');
     }
-    
+
     tpl.set(':SUSPENDED_TPL', sub_tpl.finalize());
-    
+
     return tpl.finalize();
 }
 
 App.HTML.Build.user_entry = function(o, key)
 {
     var processed_data = {
-        'NICKNAME': key,
+        'NICKNAME'              : key, 
-        'BANDWIDTH_PERCENTS': 90,
+        'U_DISK_PERCENTAGE'     : o.U_DISK > 0 ? o.U_DISK / o.DISK_QUOTA * 100 : 0.01,
-        'U_DISK_PERCENTS': 80
+        'U_BANDWIDTH_PERCENTAGE': o.U_BANDWIDTH > 0 ? o.U_BANDWIDTH / o.BANDWIDTH * 100 : 0.01,
+        'DISK_QUOTA_MEASURE'    : App.Helpers.getMbHumanMeasure(o.DISK_QUOTA),
+        'BANDWIDTH_MEASURE'     : App.Helpers.getMbHumanMeasure(o.BANDWIDTH),
+        'BANDWIDTH'             : App.Helpers.getMbHuman(o.BANDWIDTH),
+        'DISK_QUOTA'            : App.Helpers.getMbHuman(o.DISK_QUOTA)
     };
     var o = $.extend(o, processed_data);
     var tpl = App.Templates.get('ENTRY', 'user');  
     tpl = App.HTML.setTplKeys(tpl, o);
        
     if (App.Constants.SUSPENDED_YES == o.SUSPENDED) {
-        var sub_tpl = App.Templates.get('SUSPENDED_TPL_ENABLED', 'ip');
+        var sub_tpl = App.Templates.get('SUSPENDED_TPL_SUSPENDED', 'general');
     }
     else {
-        var sub_tpl = App.Templates.get('SUSPENDED_TPL_DISABLED', 'ip');
+        var sub_tpl = App.Templates.get('SUSPENDED_TPL_NOT_SUSPENDED', 'general');
     }
     tpl.set(':SUSPENDED_TPL', sub_tpl.finalize());
     
@@ -258,27 +230,47 @@ App.HTML.Build.user_form = function(options, id)
 
 App.HTML.Build.web_domain_entry = function(o, key)
 {    
-    // TODO:
-    /*<span class="domain-name">~!:ALIAS~!,</span>\
-								<span class="domain-name">naumov-socolov.org.md,</span>\
-								<span class="domain-name">naumov-socolov.to</span>\*/
     var processed_data = {
         DOMAIN: key
     };
     var o = $.extend(o, processed_data);
-    //fb.info(o);
     var tpl = App.Templates.get('ENTRY', 'web_domain');
     tpl = App.HTML.setTplKeys(tpl, o);      
     
-    /*if (App.Constants.SUSPENDED_YES == o.SUSPENDED) {
+    if (App.Constants.SUSPENDED_YES == o.SUSPENDED) {
-        var sub_tpl = App.Templates.get('SUSPENDED_TPL_ENABLED', 'ip');
+        var sub_tpl = App.Templates.get('SUSPENDED_TPL_SUSPENDED', 'general');
     }
     else {
-        var sub_tpl = App.Templates.get('SUSPENDED_TPL_DISABLED', 'ip');
+        var sub_tpl = App.Templates.get('SUSPENDED_TPL_NOT_SUSPENDED', 'general');
+    }    
+    tpl.set(':SUSPENDED_TPL', sub_tpl.finalize());
+    
+    return tpl.finalize();
+}
+
+App.HTML.Build.web_domain_form = function(options, id) 
+{
+    if('undefined' == typeof App.Env.initialParams) {
+        return alert('PLease wait a bit. Some background processes are not yet executed. Thank you for patience.');
+    }
+    var tpl = App.Templates.get('FORM', 'web_domain');
+    tpl.set(':source', options);
+    tpl.set(':id', id || '');
+    options = App.Helpers.evalJSON(options) || {};
+    if (App.Helpers.isEmpty(options)) {
+       tpl.set(':title', 'New user'); 
+       tpl.set(':save_button', 'ADD'); 
+    }
+    else {
+        tpl.set(':title', 'Edit user'); 
+        tpl.set(':save_button', 'SAVE'); 
     }
     
-    tpl.set(':SUSPENDED_TPL', sub_tpl.finalize());
+    options = !App.Helpers.isEmpty(options) ? options : {'CONTACT':'', 'PASSWORD':'','LOGIN_NAME':'','NS':''};
-    */
+    
+    tpl = App.HTML.setTplKeys(tpl, options, true);        
+    tpl = App.HTML.Build.user_selects(tpl, options);
+    
     return tpl.finalize();
 }
 
@@ -295,17 +287,57 @@ App.HTML.Build.mail_entry = function(o, key)
 }
 
 App.HTML.Build.db_entry = function(o, key)
-{        
+{
+    var user_list_html = [];    
+    $(o['USERS']).each(function(i, o)
+    {
+        var tpl = App.Templates.get('USER_ITEM', 'db');
+        tpl.set(':NAME', o);
+        user_list_html.push(tpl.finalize());
+    });   
+    var wrapper = App.Templates.get('USER_ITEMS_WRAPPER', 'db');
+    wrapper.set(':CONTENT', user_list_html.done());
     var processed_data = {
-        DOMAIN: key
+        'USER_LIST': wrapper.finalize(),
+        'USERS': o['USERS'].length || 0,
+        'U_DISK_PERCENTAGE'     : o.U_DISK > 0 ? o.U_DISK / o.DISK * 100 : 0.01,
+        'DISK_MEASURE': App.Helpers.getMbHumanMeasure(o.DISK),
+        'DISK': App.Helpers.getMbHuman(o.DISK)
     };
     var o = $.extend(o, processed_data);
+    
     var tpl = App.Templates.get('ENTRY', 'db');
     tpl = App.HTML.setTplKeys(tpl, o);      
     
     return tpl.finalize();
 }
 
+App.HTML.Build.db_form = function(options, id) 
+{
+    if('undefined' == typeof App.Env.initialParams) {
+        return alert('PLease wait a bit. Some background processes are not yet executed. Thank you for patience.');
+    }
+    var tpl = App.Templates.get('FORM', 'db');
+    tpl.set(':source', options);
+    tpl.set(':id', id || '');
+    options = App.Helpers.evalJSON(options) || {};
+    if (App.Helpers.isEmpty(options)) {
+       tpl.set(':title', 'New database'); 
+       tpl.set(':save_button', 'ADD'); 
+    }
+    else {
+        tpl.set(':title', 'Edit database "'+options.DB+'"'); 
+        tpl.set(':save_button', 'SAVE'); 
+    }
+    
+    options = !App.Helpers.isEmpty(options) ? options : {'DB':'', 'USER':'','FORM':'', 'PASSWORD': ''};
+    
+    tpl = App.HTML.setTplKeys(tpl, options, true);        
+    tpl = App.HTML.Build.db_selects(tpl, options);   
+    
+    return tpl.finalize();
+}
+
 App.HTML.Build.cron_entry = function(o, key)
 {        
     var processed_data = {
@@ -313,7 +345,15 @@ App.HTML.Build.cron_entry = function(o, key)
     };
     var o = $.extend(o, processed_data);    
     var tpl = App.Templates.get('ENTRY', 'cron');
-    tpl = App.HTML.setTplKeys(tpl, o);      
+    tpl = App.HTML.setTplKeys(tpl, o);     
+    
+    if (App.Constants.SUSPENDED_YES == o.SUSPENDED) {
+        var sub_tpl = App.Templates.get('SUSPENDED_TPL_SUSPENDED', 'general');
+    }
+    else {
+        var sub_tpl = App.Templates.get('SUSPENDED_TPL_NOT_SUSPENDED', 'general');
+    }    
+    tpl.set(':SUSPENDED_TPL', sub_tpl.finalize()); 
     
     return tpl.finalize();
 }
@@ -354,6 +394,7 @@ App.HTML.Build.user_selects = function(tpl, options)
         var tpl = App.Templates.get('select_option', 'general');
         tpl.set(':VALUE', val);
         tpl.set(':TEXT', pkg[val]);
+        tpl.set(':SELECTED', val == options.PACKAGE ? 'selected="selected"' : '');
         acc[acc.length++] = tpl.finalize();
     });
     tpl.set(':PACKAGE_OPTIONS', acc.done());
@@ -365,6 +406,7 @@ App.HTML.Build.user_selects = function(tpl, options)
         var tpl = App.Templates.get('select_option', 'general');
         tpl.set(':VALUE', val);
         tpl.set(':TEXT', roles[val]);
+        tpl.set(':SELECTED', val == options.ROLE ? 'selected="selected"' : '');
         acc[acc.length++] = tpl.finalize();
     });
     tpl.set(':ROLE_OPTIONS', acc.done());
@@ -376,6 +418,7 @@ App.HTML.Build.user_selects = function(tpl, options)
         var tpl = App.Templates.get('select_option', 'general');
         tpl.set(':VALUE', val);
         tpl.set(':TEXT', shell[val]);
+        tpl.set(':SELECTED', val == options.SHELL ? 'selected="selected"' : '');
         acc[acc.length++] = tpl.finalize();
     });
     tpl.set(':SHELL_OPTIONS', acc.done());
@@ -383,3 +426,70 @@ App.HTML.Build.user_selects = function(tpl, options)
     return tpl;
 }
 
+App.HTML.Build.db_selects = function(tpl, options)
+{
+    var acc = [];
+    // PACKAGE
+    var items = App.Env.initialParams.DB.TYPE;
+    $.each(items, function(val)
+    {
+        var tpl = App.Templates.get('select_option', 'general');
+        tpl.set(':VALUE', val);
+        tpl.set(':TEXT', items[val]);
+        tpl.set(':SELECTED', val == options.TYPE ? 'selected="selected"' : '');
+        acc[acc.length++] = tpl.finalize();
+    });
+    tpl.set(':TYPE_OPTIONS', acc.done());
+    // ROLE
+    acc = [];
+    var items = App.Env.initialParams.DB.HOST;
+    $.each(items, function(val)
+    {
+        var tpl = App.Templates.get('select_option', 'general');
+        tpl.set(':VALUE', val);
+        tpl.set(':TEXT', items[val]);
+        tpl.set(':SELECTED', val == options.HOST ? 'selected="selected"' : '');
+        acc[acc.length++] = tpl.finalize();
+    });
+    tpl.set(':HOST_OPTIONS', acc.done());
+        
+    return tpl;
+}
+
+App.HTML.Build.ip_selects = function(tpl, options) 
+{
+    // OWNER
+    var users = App.Env.initialParams.IP.SYS_USERS || ['Skid'];
+    var opts = App.HTML.Build.options(users, options.OWNER);
+    tpl.set(':owner_options', opts);
+    
+    // STATUS
+    var opts = App.HTML.Build.options(App.Env.initialParams.IP.STATUSES, options.STATUS);
+    tpl.set(':status_options', opts);
+    
+    // INTERFACE
+    var opts = App.HTML.Build.options(App.Env.initialParams.IP.INTERFACES, options.INTERFACE);
+    tpl.set(':interface_options', opts);
+    
+    return tpl;
+}
+
+App.HTML.Build.dns_selects = function(tpl, options) 
+{    
+    try {
+        // TPL
+        var obj = App.Env.initialParams.DNS.TPL;
+        var opts = App.HTML.Build.options(obj, options.TPL);
+        tpl.set(':TPL', opts);
+        tpl.set(':TPL_DEFAULT_VALUE', options.TPL || App.Helpers.getFirstKey(obj));
+    }
+    catch (e) {        
+        return '';
+    }
+    
+    return tpl;
+}
+
+
+
+

web/js/model.js

@@ -20,12 +20,40 @@ App.Model.WEB_DOMAIN.loadList = function()
 
 App.Model.MAIL.loadList = function()
 {
-    App.Ajax.request('MAIL.getList', {}, App.View.listItems);
+    //App.Ajax.request('MAIL.getList', {}, App.View.listItems);
+    App.Ref.CONTENT.html('<center><h1 style="padding-top: 20px;font-size: 28px;">Under maintanance</h1></center>');
 }
 
 App.Model.DB.loadList = function()
 {
-    App.Ajax.request('DB.getList', {}, App.View.listItems);
+    App.Ajax.request('DB.getList', {}, function(reply)
+    {
+        var acc = [];
+        var build_method = App.Env.getWorldName() + '_entry';
+        var data = reply.data;   
+        // TODO: fix it data.data
+        $.each(data, function(key) 
+        {
+            var db_list = data[key];
+            fb.warn('KEY: %o', key);
+            fb.warn('DATA: %o', data[key]);
+            var tpl_divider = App.Templates.get('DIVIDER', 'db');
+            tpl_divider.set(':TYPE', key);
+            acc[acc.length++] = tpl_divider.finalize();
+            $(db_list).each(function(i, o)
+            {
+                acc[acc.length++] = App.HTML.Build[build_method](o, key);
+            });
+            
+            /*var o = data[key];
+            fb.warn(key);
+            acc[acc.length++] = App.HTML.Build[build_method](o, key);*/
+        });
+        
+        var html = acc.done().wrapperize('ENTRIES_WRAPPER', App.Env.getWorldName());
+        App.Ref.CONTENT.html(html);
+        App.Helpers.updateScreen();
+    });
 }
 
 App.Model.CRON.loadList = function()
@@ -71,7 +99,7 @@ App.Model.remove = function(world, elm)
 }
 
 App.Model.update = function(values, source_json, elm) 
-{    alert(source_json);
+{    
     var method = App.Settings.getMethodName('update');
     var build_method = App.Env.getWorldName() + '_entry';
     App.Ajax.request(method, {

web/js/templates.js

@@ -16,13 +16,23 @@ App.Templates.html = {
             "Well," the farmer said, "I didn\'t have anymore rope, so I took off my belt and tied her tail to the rafter. In that moment, my pants fell down and my wife walked in ... Some things you just can\'t explain."']
     },
     general: {
-        loading: ['<div id="loading" style="top: 0;font-size:19px;font-weight: bol;position:absolute;width: 150px; background-color:yellow;z-index: 9999; padding: 8px;left: 50%;margin-left:-75px;">\
+        loading: ['<div id="loading" style="top: 0;font-size:19px;font-weight: bol;position:fixed;width: 150px; background-color:yellow;z-index: 9999; padding: 8px;left: 50%;margin-left:-75px;">\
                 <center>Loading...</center>\
                 </div>'],
         popup: ['<div class="black_overlay" id="popup-bg"></div>\
                 <div class="popup_content" id="popup"><button class="do_action_close_popup">close</button>~!:content~!</div>'],
+        inner_popup: ['<div id="inner-popup" style="left:~!:LEFT~!px;top:~!:TOP~!px;z-index:1000;display:block;" class="d-popup d-popup-ns-list">\
+            <div class="d-popup-inner">\
+                <span class="close do_action_close_inner_popup">×</span>\
+                <div class="d-popup-content">\
+                    ~!:CONTENT~!\
+                </div>\
+            </div>\
+        </div>'],
         select_option: ['<option ~!:SELECTED~! value="~!:VALUE~!">~!:TEXT~!</option>'],
-        error_elm: ['<div class="error-box">~!:ERROR~!</div>']     
+        error_elm: ['<div class="error-box">~!:ERROR~!</div>'],
+        SUSPENDED_TPL_NOT_SUSPENDED : ['<span class="ip-status-info ip-enabled-status do_action_suspend"><span class="ip-status-text do_action_suspend">enabled</span></span>'],
+        SUSPENDED_TPL_SUSPENDED : ['<span class="ip-status-info ip-enabled-status do_action_unsuspend"><span class="ip-status-text do_action_unsuspend">disabled</span></span>']
     },
     popup: {
         error: ['<div class="error"><center><h1 style="color: red;">Important: An Error Has Occured.</h1><hr></center>&nbsp;&nbsp;&nbsp;&nbsp;Something went wrong and some of your actions can be not saved in system. Mostly, it happens when you have network connection errors.<br>,&nbsp;&nbsp;&nbsp;&nbsp;However, please notify us about the situation. It would be helpfull if you will write us approximate time the error occured and last actions you were performing. You send your petition on <a href="mail_to">this email: BLABLA</a>,<br><br><center><span style="color: rgb(92, 92, 92);">Sorry for inconvinience. (We recommend you to reload the page)</span></center></div>']
@@ -70,13 +80,10 @@ App.Templates.html = {
                     <div class="form-row buttons-row cc">\
                             <input type="submit" value="~!:save_button~!" class="add-entry-btn do_action_save_form" name="save">\
                             <span class="cancel-btn do_action_cancel_form">Cancel</span>\
-                            <span class="help-btn do_action_form_help">Help</span>\
+                            <a class="help-btn" href="http://vestacp.com/docs/dns/" target="_blank">Help</a>\
                     </div>\
             </div>'
-        ],
+        ],        
-        SUSPENDED_TPL_ENABLED : ['<span class="ip-status-info ip-enabled-status"><span class="ip-status-text">enabled</span></span>\
-                                <span class="delete-entry"><span class="delete-entry-text do_action_delete_ip">delete</span></span>'],
-        SUSPENDED_TPL_DISABLED : ['<span class="ip-status-info ip-suspended-status do_action_delete_dns"><span class="ip-status-text">suspended</span></span>'],
         ENTRIES_WRAPPER: ['<div class="dns-list items-list">~!:content~!</div>'],
         ENTRY: ['<div class="row dns-details-row ~!:CHECKED~!">\
                             <input type="hidden" name="source" class="source" value=\'~!:source~!\'>\
@@ -162,35 +169,35 @@ App.Templates.html = {
         FORM: ['\
             <div class="b-new-entry b-new-entry_ip" id="~!:id~!">\
                 <input type="hidden" name="source" class="source" value=\'~!:source~!\'>\
+                <input type="hidden" name="target" class="target" value=\'~!:target~!\'>\
                 <div class="entry-header">~!:title~!</div>\
-                <div class="errors">\
+                <div class="form-error">\
-		</div>\
+						</div>\
                 <div class="form-row cc">\
                         <label for="#" class="field-label">ip address:</label>\
                         <input type="text" value="~!:IP_ADDRESS~!" name="IP_ADDRESS" class="text-field">\
                 </div>\
                 <div class="form-row cc">\
                         <label for="#" class="field-label">owner:</label>\
-                        <span class="select" id="select2">vesta</span>\
+                        <select name="OWNER" class="not-styled OWNER">\
-                        <select name="OWNER" class="styled OWNER">\
                                 ~!:owner_options~!\
                         </select>\
                 </div>\
                 <div class="form-row cc">\
                         <label for="#" class="field-label">status:</label>\
-                        <span class="select" id="select">shared</span>\
+                        <!-- span class="select" id="select">shared</span -->\
-                        <select class="styled status" name="STATUS">\
+                        <select class="not-styled status" name="STATUS">\
                                 ~!:status_options~!\
                         </select>\
                 </div>\
                 <div class="form-row cc">\
                         <label for="#" class="field-label">name:</label>\
-                        <input type="text" name="NAME" value="" class="text-field">\
+                        <input type="text" name="NAME" value="~!:NAME~!" class="text-field">\
                 </div>\
                 <div class="form-row cc">\
                         <label for="#" class="field-label">interface:</label>\
-                        <span class="select" id="select">eth1</span>\
+                        <!-- span class="select" id="select">eth1</span -->\
-                        <select class="styled interface" name="INTERFACE">\
+                        <select class="not-styled interface" name="INTERFACE">\
                                 ~!:interface_options~!\
                         </select>\
                 </div>\
@@ -203,7 +210,7 @@ App.Templates.html = {
                 <div class="form-row buttons-row cc">\
                         <input type="submit" value="~!:save_button~!" name="save" class="add-entry-btn do_action_save_form">\
                         <span class="cancel-btn do_action_cancel_form">Cancel</span>\
-                        <span class="help-btn">Help</span>\
+                        <a class="help-btn" href="http://vestacp.com/docs/ip/" target="_blank">Help</a>\
                 </div>\
         </div>\
          '],
@@ -216,6 +223,7 @@ App.Templates.html = {
                         <div class="check-this"></div>\
                         <div class="row-operations">\
                         ~!:SUSPENDED_TPL~!\
+                        <span class="delete-entry do_action_delete_entry"><span class="delete-entry-text do_action_delete_entry">delete</span></span>\
                         </div>\
                 </div>\
                 <div class="row-meta">\
@@ -224,7 +232,7 @@ App.Templates.html = {
                 <div class="row-details cc">\
                         <div class="ip-props-main">\
                                 <div class="ip-adr-box">\
-                                        <span class="ip-adr">~!:IP_ADDRESS~!</span>\
+                                        <span class="ip-adr  do_action_edit">~!:IP_ADDRESS~!</span>\
                                 </div>\
                                 <span class="prop-box">\
                                         <span class="prop-title">netmask:</span>\
@@ -273,7 +281,7 @@ App.Templates.html = {
                         <input type="hidden" name="source" class="source" value=\'~!:source~!\'>\
                         <input type="hidden" name="target" class="target" value=\'\'>\
 						<div class="entry-header">~!:title~!</div>\
-						<div class="form-error hidden">\
+						<div class="form-error">\
 						</div>\
 						<div class="form-row cc">\
 							<label for="#" class="field-label">username:</label>\
@@ -393,7 +401,7 @@ App.Templates.html = {
 										<div class="value-box">\
 											<span class="value">~!:U_BANDWIDTH~!</span>\
 											<div class="graph low">\
-												<span style="width:30%;" class="bar"></span>\
+												<span style="width:~!:U_BANDWIDTH_PERCENTAGE~!%;" class="bar"></span>\
 											</div>\
 										</div>\
 										<div class="max-size">~!:BANDWIDTH~!<span class="units">~!:BANDWIDTH_MEASURE~!</span></div>\
@@ -462,13 +470,118 @@ App.Templates.html = {
 					</div>']
     },
     web_domain: {
+        FORM: ['<div id="~!:id~!"  class="b-new-entry b-new-entry_domain">\
+                        <input type="hidden" class="source" name="source" value=\'~!:source~!\' />\
+                        <input type="hidden" class="target" name="target" value="" />\
+						<div class="entry-header">~!:title~!</div>\
+						<div class="form-error">\
+						</div>\
+                        <div class="form-row cc">\
+							<label for="#" class="field-label">domain:</label>\
+							<input type="text" name="DOMAIN" class="text-field" value="~!:DOMAIN~!">\
+						</div>\
+						<div class="form-row cc">\
+							<label for="#" class="field-label">ip:</label>\
+							<div class="">\
+								<select name="IP">\
+                                ~!:IP_OPTIONS~!\
+                                </select>\
+							</div>\
+						</div>\
+						<!-- advanced options -->\
+						<div class="form-options-group">\
+							<div class="group-header cc collapsed">\
+								<span class="group-title-outer do_action_toggle_section">\
+									<span class="group-title do_action_toggle_section">Advanced options</span>\
+								</span>									\
+							</div>\
+                            <div class="sub_section hidden">\
+							<div class="form-row cc adv_opts">\
+								<label for="#" class="field-label">template:</label>\
+								<select class="not-styled" name="TPL">\
+								~!:TPL_OPTIONS~!\
+								</select>\
+							</div>\
+							<div class="form-row cc">\
+								<label for="#" class="field-label">alias list:</label>\
+								<textarea name="ALIAS" class="textarea">~!:ALIAS~!</textarea>\
+							</div>\
+\
+							<div class="form-row cc">\
+								<label for="#" class="field-label">statistics:</label>\
+								<input type="checkbox" name="STATS" ~!:stats_checked~!="" value="~!:STATS~!" class="styled">\
+							</div>\
+							<div class="stats-settings">\
+								<div class="form-row cc">\
+									<label for="#" class="field-label">stats auth:</label>\
+									<input type="checkbox" name="STATS_AUTH" ~!:stats_auth_checked~!="" value="~!:STATS_AUTH~!" class="styled">\
+								</div>\
+								<div class="form-row cc">\
+									<label for="#" class="field-label">login:</label>\
+									<input type="text" class="text-field" name="STATS_LOGIN" value="~!:STATS_LOGIN~!">\
+								</div>\
+								<div class="form-row pwd-box cc">\
+									<label for="#" class="field-label">password:</label>\
+									<input type="text" value="~!:STATS_PASSWORD~!" name="STATS_PASSWORD" class="text-field password">\
+									<span class="generate-pwd do_action_generate_pass">Generate</span>\
+								</div>\
+							</div><!-- // stats settings -->\
+							<div class="form-row cc">\
+								<label for="#" class="field-label">ssl:</label>\
+								<input type="checkbox" class="styled" ~!:ssl_checked~!="" value="~!SSL~!">\
+							</div>\
+							<div class="form-row cc">\
+								<label for="#" class="field-label">ssl home:</label>\
+								<input type="text" name="SSL_HOME" class="text-field" value="~!:SSL_HOME~!">\
+							</div>\
+							<div class="form-row ssl-crtfct-box cc">\
+								<label for="#" class="field-label">ssl certificate: <span class="remark">(upload file or insert text)</span></label>\
+								<input type="file" value="" size="43" class="file-upload">\
+								<textarea name="SSL_CERT" class="textarea">~!:SSL_CERT~!</textarea>\
+							</div>\
+						</div><!-- // advanced options -->\
+						</div>\
+                        <div class="form-options-group">\
+							<div class="group-header cc collapsed">\
+								<span class="group-title-outer do_action_toggle_section">\
+									<span class="group-title do_action_toggle_section">DNS options</span>\
+								</span>									\
+							</div>\
+							<div class="sub_section hidden">\
+                            <div class="form-row cc">\
+								<label for="#" class="field-label">create dns domain:</label>\
+								<input type="checkbox" value="" class="not-styled">\
+							</div>\
+						</div><!-- DNS options -->\
+						<div class="form-options-group">\
+							<div class="group-header cc collapsed">\
+								<span class="group-title-outer do_action_toggle_section">\
+									<span class="group-title do_action_toggle_section">Mail options</span>\
+								</span>									\
+							</div>\
+							<div class="sub_section hidden">\
+                                <div class="form-row cc">\
+                                    <label for="#" class="field-label">create mail domain:</label>\
+                                    <input type="checkbox" value="" class="not-styled">\
+                                </div>\
+                            </div>\
+                        </div>\
+                        </div><!-- Mail options -->\
+						<div class="form-row buttons-row cc">\
+							<input type="submit" value="~!:save_button~!" class="add-entry-btn">\
+							<span class="cancel-btn do_action_cancel_form">Cancel</span>\
+							<a target="_blank" href="http://vestacp.com/docs/web/" class="help-btn">Help</a>\
+						</div>\
+					</div>'],
         ENTRIES_WRAPPER: ['<div class="domains-list items-list">~!:content~!</div>'],
         ENTRY: ['<div class="row first-row domain-details-row">\
+                        <input type="hidden" class="source" name="source" value=\'~!:source~!\' />\
+                        <input type="hidden" class="target" name="target" value="" />\
 						<div class="row-actions-box cc">\
 							<div class="check-this check-control"></div>\
 							<div class="row-operations">\
-								<span class="ip-status-info ip-enabled-status"><span class="ip-status-text">enabled</span></span>\
+								~!:SUSPENDED_TPL~!\
-								<span class="delete-entry"><span class="delete-entry-text">delete</span></span>\
+								<span class="delete-entry do_action_delete_entry"><span class="delete-entry-text do_action_delete_entry">delete</span></span>\
 							</div>\
 						</div>\
 						<div class="row-meta">\
@@ -476,7 +589,7 @@ App.Templates.html = {
 						</div>\
 						<div class="row-details cc">\
 							<div class="names">\
-								<strong class="domain-name primary">~!:DOMAIN~!</strong>\
+								<strong class="domain-name primary do_action_edit">~!:DOMAIN~!</strong>\
 								<span class="alias-title">Alias:</span>\
 								~!:ALIAS~!\
 							</div>\
@@ -551,9 +664,58 @@ App.Templates.html = {
 					</div>']
     },
     db: {
+        USER_ITEMS_WRAPPER: ['<div class="db-user-box cc">~!:CONTENT~!</div>'],
+        USER_ITEM: ['<span class="db-user-wrap">\
+                        <span class="db-user">~!:NAME~!</span>\
+                    </span>\
+                    <span class="change-pwd do_action_change_db_user_password">change password</span>'],
+        DIVIDER: ['<div class="db-devider">\
+						<span class="db-devider-title">\
+							<span class="db-devider-outer">\
+								<span class="db-devider-inner">~!:TYPE~!</span>\
+							</span>\
+						</span>\
+					</div>'],
         ENTRIES_WRAPPER: ['<div class="db-list">~!:content~!</div>'],
-        ENTRY: ['<div class="row first-row db-details-row">\
+        FORM: ['<div id="~!:id~!"  class="b-new-entry b-new-entry_db">\
-						<div class="row-actions-box cc">\
+						<input type="hidden" name="source" class="source" value=\'~!:source~!\'>\
+                        <input type="hidden" name="target" class="target" value=\'\'>\
+                        <div class="entry-header">~!:title~!</div>\
+						<div class="form-error">\
+						</div>\
+						<div class="form-row cc">\
+							<label for="#" class="field-label">db type:</label>\
+							<select name="TYPE" class="not-styled">~!:TYPE_OPTIONS~!</select>\
+						</div>\
+						<div class="form-row cc">\
+							<label for="#" class="field-label">db name:</label>\
+							<input type="text" class="text-field" name="DB" value="~!:DB~!">\
+						</div>\
+						<div class="db-credentials ">\
+							<div class="form-row cc user">\
+								<label for="#" class="field-label">username</label>\
+								<input type="text" name="USER" class="text-field" value="~!:USER~!">\
+							</div>\
+							<div class="form-row pwd-box cc psw">\
+								<label for="#" class="field-label">password:</label>\
+								<input type="text" name="PASSWORD" class="text-field password" value="~!:PASSWORD~!">\
+								<span class="generate-pwd do_action_generate_pass">Generate</span>\
+							</div>\
+						</div>\
+						<div class="form-row cc">\
+							<label for="#" class="field-label">db host:</label>\
+							<select name="HOST">~!:HOST_OPTIONS~!</select>\
+						</div>\
+						<div class="form-row buttons-row cc">\
+							<input type="submit" value="~!:save_button~!" class="add-entry-btn do_action_save_form">\
+							<span class="cancel-btn do_action_cancel_form">Cancel</span>\
+							<a target="_blank" href="http://vestacp.com/docs/db/" class="help-btn">Help</a>\
+						</div>\
+					</div>'],
+        ENTRY: ['<div class="row ~!:FIRST_ROW_CLASS~! db-details-row">\
+						<input type="hidden" name="source" class="source" value=\'~!:source~!\'>\
+                        <input type="hidden" name="target" class="target" value=\'\'>\
+                        <div class="row-actions-box cc">\
 							<div class="check-this check-control"></div>\
 							<div class="row-operations">\
 								<span class="delete-entry"><span class="delete-entry-text">delete</span></span>\
@@ -562,7 +724,7 @@ App.Templates.html = {
 						<div class="row-meta">\
 							<div class="ownership">\
 								<span class="prop-box">\
-									<span class="prop-value">Javier Henneman</span>\
+									<span class="prop-value">~!:OWNER~!</span>\
 								</span>\
 							</div>\
 							<div class="entry-created">~!:DATE~!</div>\
@@ -570,36 +732,30 @@ App.Templates.html = {
 						<div class="row-details cc">\
 							<div class="props-main">\
 								<div class="db-name-box">\
-									<span class="db-name">~!:DB_NAME~!</span>\
+									<span class="db-name do_action_edit">~!:DB~!</span>\
 								</div>\
 							</div>\
 							<div class="props-additional">\
 								<div class="db-user-box cc">\
-									<span class="db-user-wrap">\
+									<span class="db-user-wrap backup-db do_action_open_inner_popup">\
-										<span class="db-user">~!:USER~!</span>\
+										Users: ~!:USERS~!\
-									</span>\
+                                    </span>\
-									<span class="change-pwd">change password</span>										\
+									<textarea class="inner-popup-html hidden">~!:USER_LIST~!</textarea>\
 								</div>\
-								<div class="db-user-box cc">\
+								<span class="add-db-user do_action_add_db_user">Add user</span>\
-									<span class="db-user-wrap">\
-										<span class="db-user">socialmediaexaminer (read only)</span>\
-									</span>\
-									<span class="change-pwd">change password</span>										\
-								</div>\
-								<span class="add-db-user">Add user</span>\
 							</div>\
 							<div class="props-ext">\
-								<span class="backup-db">backup</span>\
+								<span class="backup-db do_action_backup_db">backup</span>\
 								<!-- disk usage block -->\
 								<div class="b-usage-box disk-usage cc">\
 									<div class="usage-box">\
 										<div class="value-box">\
-											<span class="value">~!:U_DISK~!</span>\
+											<span class="value">~!:U_DISK~! Mb</span>\
 											<div class="graph middle">\
-												<span style="width:55%;" class="bar"></span>\
+												<span style="width:~!:U_DISK_PERCENTAGE~!%;" class="bar"></span>\
 											</div>\
 										</div>\
-										<div class="max-size">~!:DISK~! <span class="units">Mb</span></div>\
+										<div class="max-size">~!:DISK~! <span class="units">~!:DISK_MEASURE~!</span></div>\
 									</div>\
 								</div><!-- // disk usage block -->\
 							</div>\
@@ -612,8 +768,8 @@ App.Templates.html = {
 						<div class="row-actions-box cc">\
 							<div class="check-this check-control"></div>\
 							<div class="row-operations">\
-								<span class="ip-status-info ip-enabled-status"><span class="ip-status-text">enabled</span></span>\
+								~!:SUSPENDED_TPL~!\
-								<span class="delete-entry"><span class="delete-entry-text">delete</span></span>\
+                        <span class="delete-entry do_action_delete_entry"><span class="delete-entry-text do_action_delete_entry">delete</span></span>\
 							</div>\
 						</div>\
 						<div class="row-meta">\
@@ -643,7 +799,7 @@ App.Templates.html = {
 								</span>\
 							</div>\
 							<div class="cron-command-box">\
-								<strong class="cron-command-line">~!:CMD~!</strong>\
+								<strong class="cron-command-line do_action_edit">~!:CMD~!</strong>\
 							</div>\
 							<div class="cron-reported-to">\
 								<span class="prop-box cron-report-box">\