add getElementById cache to speed up things, make floating div for total

size, note and submit button, use POST in form (to get around limit URI
length when using GET)

git-svn-id: svn+ssh://llin/home/dpavlin/private/svn/BackupPC/trunk@126 8392b6e1-25fa-0310-8288-cc32f8e212ea

diff --git a/lib/BackupPC/SearchLib.pm b/lib/BackupPC/SearchLib.pm
index 9382e98..9143e11 100644 (file)
--- a/lib/BackupPC/SearchLib.pm
+++ b/lib/BackupPC/SearchLib.pm
@@ -340,61 +340,116 @@ sub getBackupsNotBurned() {
        return @ret;      
 }
 
-sub displayBackupsGrid()
-  {
-      my $retHTML = "";
-      
+sub displayBackupsGrid() {
+
+       my $retHTML .= q{
+               <form id="forma" method="POST" action=};
+               $retHTML .= "\"".$MyURL."\"";
+               $retHTML .= q{?action=burn>
+       };
+
        $retHTML .= <<EOF3;
 <script language="javascript" type="text/javascript">
 <!--
 
-    function checkAll(location)
-    {
-      for (var i=0;i<document.forma.elements.length;i++)
-      {
-        var e = document.forma.elements[i];
-        if ((e.checked || !e.checked) && e.name != \'all\') {
-            if (eval("document.forma."+location+".checked")) {
-                e.checked = true;
-            } else {
-                e.checked = false;
-            }
-        }
-      }
-    }
+var debug_div = null;
+
+function debug(msg) {
+//     return; // Disable debugging
+
+       if (! debug_div) debug_div = document.getElementById('debug');
+
+       // this will create debug div if it doesn't exist.
+       if (! debug_div) {
+               debug_div = document.createElement('div');
+               if (document.body) document.body.appendChild(debug_div);
+               else debug_div = null;
+       }
+       if (debug_div) {
+               debug_div.appendChild(document.createTextNode(msg));
+               debug_div.appendChild(document.createElement("br"));
+       }
+}
+
+
+var element_id_cache = Array();
+
+function element_id(name,element) {
+       if (! element_id_cache[name]) {
+               element_id_cache[name] = self.document.getElementById(name);
+       }
+       return element_id_cache[name];
+}
+
+function checkAll(location) {
+       var len = element_id('forma').elements.length;
+       var check_all = element_id('allFiles');
+
+       for (var i = 0; i < len; i++) {
+
+               var e = element_id('forma').elements[i];
+               if ((e.checked || !e.checked) && e.name != \'all\') {
+                       if (check_all.checked) {
+                               e.checked = true;
+                       } else {
+                               e.checked = false;
+                       }
+               }
+       }
+
+       sumiraj();
+}
     
-    function sumiraj()
-    {
-       var suma = 0;
-       for (var i = 0; i < document.forma.elements.length; i++)    
-               {
-                       var e = document.forma.elements[i];
-                       if ((e.checked || !e.checked) && e.name != \'all\')
-                       {
-                               if (e.checked)
-                               {
-                                       var ret = e.name.match("fcb(.*)");
-                                       suma += parseInt(eval("document.forma.fss"+ret[1]+".value") || 0);
-                                       
-                               }
-                       }
-       }
-       document.forma.totalsize.value = suma;
+function sumiraj(e) {
+       var suma = parseInt(element_id('forma').totalsize.value) || 0;
+       var len = element_id('forma').elements.length;
+       if (e) {
+               var size = parseInt( element_id("fss" + e.name.substr(3)).value );
+               if (e.checked) {
+                       suma += size;
+               } else {
+                       suma -= size;
+               }
+       } else {
+               suma = 0;
+               for (var i = 0; i < len; i++) {
+                       var e = element_id('forma').elements[i];
+                       if (e.name != \'all\' && e.checked && e.name.substr(0,3) == 'fcb') {
+                               var el = element_id("fss" + e.name.substr(3));
+                               if (el && el.value) suma += parseInt(el.value) || 0;
+                       }
+               }
+       }
+       element_id('forma').totalsize.value = suma;
+       debug('total size: '+suma);
        return suma;
-    }
+}
+
+if (!self.body) self.body = new Object();
+self.onload = self.document.onload = self.body.onload = function() {
+       sumiraj();
+}
+
 //-->
-</script>      
+</script>
+<div id="debug" style="position: absolute; top: 0; right: 0; width: 10em; border: 1px #ff0000 solid; background-color: #ffe0e0; -moz-opacity: 0.7;">
+Total size:
+<input type="text" name="totalsize" size="8">
+<br/>
+Note:
+<textarea name="note" cols="10" rows="5">
+</textarea>
+<br/>
+<input type="submit" value="Burn selected backups" name="submitBurner">
+</div>
 EOF3
        $retHTML .= q{
-               <form name="forma" method="GET" action=};
-               $retHTML .= "\"".$MyURL."\"";
-               $retHTML .= q{?action=burn>
                        <input type="hidden" value="burn" name="action">
                        <input type="hidden" value="results" name="search_results">
                        <table style="fview" border="0" cellspacing="0" cellpadding="2">
                        <tr class="tableheader">
                        <td class="tableheader">
-                               <input type="checkbox" name="allFiles" onClick="checkAll('allFiles');">
+                               <input type="checkbox" name="allFiles" id="allFiles" onClick="checkAll('allFiles');">
                        </td>
                        <td align="center">Share</td>
                        <td align="center">Backup no</td>
@@ -405,9 +460,6 @@ EOF3
                        <td align="center">gzip size</td>
                        </tr>
 
-                       <tr><td colspan=7 style="tableheader">
-                       <input type="submit" value="Burn selected backups on medium" name="submitBurner">
-                       </td></tr>
        };
 
        my @color = (' bgcolor="#e0e0e0"', '');
@@ -426,12 +478,14 @@ EOF3
                $retHTML .=
                        '<tr' . $color[$i %2 ] . '>
                        <td class="fview">';
+               # FIXME
+               #$backup->{'fs_size'} = int($backup->{'size'} * 1024);
                if (($backup->{'fs_size'} || 0) > 0) {
                        $retHTML .= '
                        <input type="checkbox" name="fcb' .
                        $backup->{'hostid'}.'_'.$backup->{'backupnum'} . 
                        '" value="' . $backup->{'hostid'}.'_'.$backup->{'backupnum'} .
-                       '" onClick="sumiraj();">';
+                       '" onClick="sumiraj(this);">';
                }
                $retHTML .=
                        '</td>' .
@@ -442,15 +496,12 @@ EOF3
                        '<td align="center">' . $backup->{'age'} . '</td>' .
                        '<td align="right">' . $backup->{'size'} . '</td>' .
                        '<td align="right">' . $backup->{'fs_size'} .
-                       '<input type="hidden" name="fss'.$backup->{'hostid'}.'_'.$backup->{'backupnum'} . '"'.
-                       'value="'. $backup->{'fs_size'} .'"'.'</td>' .
+                       '<input type="hidden" iD="fss'.$backup->{'hostid'}.'_'.$backup->{'backupnum'} . '" value="'. $backup->{'fs_size'} .'"></td>' .
 
                        "</tr>\n";
        }
 
        $retHTML .= "</table>";
-       $retHTML .= "total gzip size:<input type=\"text\" name=\"totalsize\"><br>";
-       $retHTML .= "Note:<input type=\"text\" name=\"note\">";
        $retHTML .= "</form>";
       
        return $retHTML;